/* ============================================================
   COMPONENTS.CSS — Shared UI Components
   ============================================================
   PURPOSE:
     Styles for reusable UI pieces that appear in multiple
     sections: form elements, radio buttons, the trust bar,
     the mobile sticky CTA bar, and the availability badge.

   SAFE TO EDIT:
     - Input padding if fields feel too tight/loose
     - Border colors on inputs to match brand updates
     - Mobile sticky bar colors if the CTA style changes

   DO NOT MODIFY:
     - .reveal and .reveal.visible (those are in base.css)
     - The input/select -webkit-appearance:none — this removes
       default browser styling on dropdowns in Safari. Removing
       it causes inconsistent dropdown appearance on iOS.
============================================================ */


/* ── Brand Lockup (Nav + Footer) ──────────────────────────────
   Logo image + vertical divider + optional name/subtitle stack.
   Same structure used in both #main-nav and the footer bottom bar
   — previously duplicated as one-off inline styles in both places.
────────────────────────────────────────────────────────────── */
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
}

.brand-lockup-img {
  height: 32px;
  width: auto;
}

.brand-divider {
  width: 1px;
  height: 26px;
  background: var(--line);
  display: block;
  flex-shrink: 0;
}

.brand-divider.short {
  height: 20px;
}

.brand-name-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.brand-name {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.03em;
  line-height: 1;
}

.brand-subtitle {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 400;
  color: var(--stone);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}

/* Right side of #main-nav: CTA button + mobile hamburger */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: 2rem;
}

/* Inline accent-colored link inside body copy (pull quotes, notes) */
.link-accent {
  color: var(--gold);
  font-weight: 500;
}


/* ── Form Rows & Groups ──────────────────────────────────────
   .form-row: two-column side-by-side layout for short fields.
   .form-group: stacks label on top of input.
   .form-group.full: spans both columns in a .form-row.
────────────────────────────────────────────────────────────── */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-group.full {
  grid-column: 1 / -1; /* span full width inside a .form-row */
}


/* ── Form Labels ─────────────────────────────────────────── */
label {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 400;
}


/* ── Text Inputs & Selects ────────────────────────────────── */
input,
select {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  background: var(--white);
  transition: border-color 0.2s;

  /* Removes OS-level default styling (important for Safari/iOS) */
  -webkit-appearance: none;
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--gold);
  /* A color-only border change is a weak focus indicator under
     WCAG 2.4.7 for low-vision users. The ring adds a second,
     shape-based signal that doesn't depend on color perception. */
  box-shadow: 0 0 0 3px rgba(76,156,46,0.18);
}

input::placeholder {
  color: var(--mist);
}

/* ── Inline Field Errors ──────────────────────────────────────
   Set by validateRequired() in main.js on a failed submit —
   replaces the old alert() popup with a red border on the empty
   field plus a short message underneath it.
────────────────────────────────────────────────────────────── */
input.input-error,
select.input-error,
textarea.input-error {
  border-color: #B3443B;
}

.field-error {
  display: block;
  font-size: 0.72rem;
  color: #B3443B;
  margin-top: 0.3rem;
}


/* ── Textarea ─────────────────────────────────────────────── */
textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  background: var(--white);
  resize: vertical;       /* user can resize vertically only */
  min-height: 90px;
  transition: border-color 0.2s;
}

textarea:focus {
  outline: none;
  border-color: var(--gold);
}

textarea::placeholder {
  color: var(--mist);
}


/* ── Form Submit Area & Note ──────────────────────────────── */
.form-submit {
  margin-top: 1.2rem;
}

/* Small privacy/trust note below submit button.
   Uses --stone, not --mist: --mist fails WCAG AA contrast
   on the white form card background (~2.5:1 vs required 4.5:1). */
.form-note {
  font-size: 0.74rem;
  color: var(--stone);
  margin-top: 0.8rem;
  text-align: center;
}


/* ── Radio Button Group (Contact Form) ───────────────────────
   Custom-styled radio buttons as pill-shaped toggle buttons.
   The actual <input type="radio"> is hidden; the <label>
   acts as the visible toggle.
────────────────────────────────────────────────────────────── */
.form-group-radio > label:first-child {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
  display: block;
  margin-bottom: 0.6rem;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.radio-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex: 1 1 10rem;
  min-width: 10rem;
  font-size: 0.82rem;
  color: var(--stone);
  border: 1px solid var(--line);
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
}

/* When the radio inside this label is checked: highlight it */
.radio-label:has(input:checked) {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

/* Hide the actual radio input — the label is the visual toggle */
.radio-label input {
  display: none;
}


/* ── Availability Badge (Hero) ────────────────────────────── */
.availability-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(44,110,73,0.25);
  border: 1px solid rgba(200,230,211,0.4);
  padding: 0.4rem 0.9rem;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #a8dfc0;
  margin-bottom: 2rem;
}

/* Animated green pulse dot */
.avail-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.85); }
}

/* Outside real business hours (set by updateAvailabilityBadge() in
   main.js), the badge should not visually claim to be "live" — the
   dot stops pulsing and switches to a neutral color instead of green. */
.availability-badge.is-closed {
  background: rgba(138,170,187,0.18);
  border-color: rgba(138,170,187,0.35);
  color: var(--mist);
}
.availability-badge.is-closed .avail-dot {
  background: var(--mist);
  animation: none;
}


/* ── Mobile Sticky CTA Bar ───────────────────────────────────
   Fixed bar at bottom of screen on mobile only.
   Provides quick access to call and consultation form.
   Hidden on desktop (display: none by default).
   Shown at 768px breakpoint in layout.css.
────────────────────────────────────────────────────────────── */
.mobile-sticky-bar {
  display: none; /* shown only on mobile via layout.css */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 0.9rem 1.2rem;
  gap: 0.75rem;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);

  /* Extra bottom inset for the iPhone home-indicator area. Currently a
     no-op (env() resolves to 0 without viewport-fit=cover on the meta
     viewport tag, which this page intentionally doesn't set — Safari
     already keeps fixed elements clear of the home indicator by default
     in that mode). Kept so the bar is automatically correct if that
     ever changes, at zero cost today. */
  padding-bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
}

.mobile-sticky-bar a {
  flex: 1;
  text-align: center;
  padding: 0.85rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  transition: all 0.2s;
}

/* Left button: outline style for phone call.
   display:inline-flex + the svg rules below lay the phone icon and
   label side by side (replaces a 📞 emoji, which rendered
   inconsistently across OS/browsers and was the one icon on the
   site not drawn from the shared inline-SVG set). */
.mobile-sticky-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1px solid var(--line);
  color: var(--ink);
}
.mobile-sticky-call svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.mobile-sticky-call:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Right button: filled green for main CTA */
.mobile-sticky-form {
  background: var(--gold);
  color: var(--white);
}
.mobile-sticky-form:hover {
  background: var(--gold-lt);
}


/* ── Floating Language Toggle (FR / EN) ──────────────────────
   Fixed to the bottom-right corner, independent of #main-nav, so
   switching languages doesn't add to nav-bar clutter. Moved here
   (out of hero.css) since it's a page-level floating widget, same
   as the mobile sticky bar above.
   On mobile the mobile-sticky-bar is also bottom-fixed, so
   layout.css lifts this above it at the 768px breakpoint.
   SAFE TO EDIT: colors/spacing only — the "FR"/"EN" labels are
   language codes and stay as-is in both languages.
────────────────────────────────────────────────────────────── */
.lang-toggle-float {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.2rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.lang-toggle-float .nav-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--stone);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  padding: 0.4rem 0.7rem;
  min-height: 36px; /* secondary control — smaller target is an accepted tradeoff */
  cursor: pointer;
  transition: all 0.2s;
}

.lang-toggle-float .nav-lang-btn:hover {
  color: var(--ink);
}

.lang-toggle-float .nav-lang-btn.active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}