/* ============================================================
   HERO.CSS — Navigation Bar & Hero Section
   ============================================================
   PURPOSE:
     Styles the top navigation bar (fixed, always visible) and
     the full-screen hero section with the left headline and
     right consultation form card.

   SAFE TO EDIT:
     - nav height (72px) if you want a taller/shorter bar
     - hero background gradient colors
     - hero-h1 font size via the clamp() values
     - Form card padding and border radius

   DO NOT MODIFY:
     - nav z-index: 100 — this keeps the nav above all page
       content while scrolling. Lowering it causes content
       to scroll on top of the navigation bar.
     - #accueil overflow: hidden — this clips the background
       gradient to the section boundaries.
============================================================ */


/* ── Navigation Bar ──────────────────────────────────────────
   Fixed to the top of the viewport on all scroll positions.
   Uses backdrop-filter blur for a frosted-glass effect.

   Scoped to #main-nav (not a bare `nav` tag selector): the
   distressed-homeowner silo's breadcrumb component
   (content-page.css) also uses a semantic <nav class="breadcrumb-bar">
   element. A bare `nav { position:fixed; z-index:100 }` here matched
   that second <nav> too, making it fixed at top:0 with the same
   z-index — since it's later in DOM order, it painted directly over
   #main-nav, hiding the logo/CTA entirely on all 8 silo pages. Found
   during AUDIENCE_SEGMENTATION_AUDIT.md / the distressed-pages QA
   audit. layout.css already scopes its nav rules to #main-nav for
   the same reason (see its .nav-open comment) — this brings hero.css
   in line with that convention.
────────────────────────────────────────────────────────────── */
#main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100; /* must stay above all page sections */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  height: 72px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s;
}

/* Shadow added by JavaScript when user scrolls past 20px */
#main-nav.scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}

/* Logo text in nav */
.nav-logo {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
}

/* Green accent in logo (if used) */
.nav-logo span {
  color: var(--gold);
}

/* Navigation link list */
.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  align-items: center;
  /* Guarantees breathing room from the logo ("Brandon Aiello"),
     matching the fixed margin-left on the right-side CTA wrapper
     in index.html — both sit on top of whatever free space
     justify-content:space-between happens to leave. */
  margin-left: 2rem;
}

.nav-links a {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  text-decoration: none;
  font-weight: 400;
  white-space: nowrap;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--ink);
}

/* "Calculatrice hypothécaire" / "Mortgage Calculator" — stacked onto two
   lines (one word per line) so it takes less horizontal space in the nav.
   Font size, letter-spacing, and case are untouched; only wrapping and
   centering change. */
.nav-links a.nav-link-stack {
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}

/* Primary CTA button in nav ("Consultation gratuite") */
.nav-cta {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--white);
  background: var(--ink);
  padding: 0.65rem 1.4rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
  border-radius: var(--radius);
}

.nav-cta:hover {
  background: var(--gold);
}


/* ── Mobile Nav Toggle (Hamburger) ────────────────────────────
   Hidden on desktop. Shown at ≤768px via layout.css, where it
   opens/closes the .nav-links dropdown panel (also in layout.css).
   The "X" transform on .nav-open is purely visual — the open/close
   state itself is tracked by the .nav-open class on <nav>.
────────────────────────────────────────────────────────────── */
.nav-toggle {
  /* display:none lives in layout.css, not here — layout.css loads
     BEFORE this file, so an unconditional display rule here would
     win the cascade over layout.css's @media display:flex (equal
     specificity, later source wins). Keep this file appearance-only. */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s;
}

#main-nav.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
#main-nav.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}
#main-nav.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ── Hero Section ────────────────────────────────────────────
   Full-screen two-column layout.
   Left column: headline + availability badge.
   Right column: consultation form card.

   The dark navy gradient background creates the premium look.
   On mobile (768px), columns stack vertically (in layout.css).
────────────────────────────────────────────────────────────── */
#accueil {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 100px var(--gutter) 60px;
  gap: 5rem;
  position: relative;
  overflow: hidden; /* clips background gradient */

  /* Dark navy gradient background */
  background: linear-gradient(
    135deg,
    rgba(0,38,58,0.82) 0%,
    rgba(0,38,58,0.60) 50%,
    rgba(0,38,58,0.48) 100%
  ), var(--ink);
}

/* Same `1fr` min-content overflow fix as #about/#contact in layout.css
   — confirmed in a real browser that .hero-left/.hero-form-card were
   pushing #accueil ~5px past the viewport at ≤340px wide. */
#accueil > * {
  min-width: 0;
}

/* On mobile, override to solid navy for readability */
@media (max-width: 768px) {
  #accueil {
    background: var(--ink);
    grid-template-columns: 1fr;
    padding: 100px 4vw 50px;
    min-height: auto;
    gap: 2.5rem;
  }
}


/* ── Hero Eyebrow ─────────────────────────────────────────── */
.hero-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-lt);
  font-weight: 500;
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

/* Decorative line before eyebrow */
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold-lt);
}


/* ── Hero Headline ────────────────────────────────────────── */
.hero-h1 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 4.5vw, 3.8rem); /* scales between 2.6rem and 3.8rem */
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--white);
  margin-bottom: 1.4rem;
}

/* Italic green accent in headline */
.hero-h1 em {
  font-style: italic;
  color: var(--gold-lt);
}


/* ── Hero Body Copy ───────────────────────────────────────── */
.hero-p {
  font-size: 1rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.75;
  max-width: 460px;
  margin-bottom: 1.6rem;
}


/* ── Hero Form Card ──────────────────────────────────────────
   The white card on the right side of the hero section
   containing the consultation request form.
────────────────────────────────────────────────────────────── */
.hero-form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2.4rem 2.8rem;
  box-shadow:
    0 8px 40px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.04);
  position: relative;
}

.hero-form-header {
  margin-bottom: 1.6rem;
}

.hero-form-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

.hero-form-sub {
  font-size: 0.82rem;
  color: var(--stone);
}


/* ── Project Type Tabs (Hero Form) ────────────────────────── */
.project-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.4rem;
}

.project-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 0.5rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--stone);
  cursor: pointer;
  transition: all 0.15s;
  background: none;
  letter-spacing: 0.02em;
}

.project-tab:hover {
  border-color: var(--gold);
  color: var(--ink);
}

/* Active / selected tab */
.project-tab.active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

.project-tab svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}


/* ── Hero Form Submit Button ──────────────────────────────── */
.btn-submit-hero {
  width: 100%;
  background: var(--ink);
  color: var(--white);
  padding: 0.95rem;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: background 0.2s, transform 0.15s;
  margin-top: 0.25rem;
}

.btn-submit-hero:hover {
  background: var(--gold);
  transform: translateY(-1px);
}


/* ── Form Trust Row (below hero submit) ───────────────────── */
.form-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
}

/* Uses --stone, not --mist: --mist fails WCAG AA contrast
   on the white hero form card background (~2.5:1 vs required 4.5:1). */
.form-trust-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  color: var(--stone);
}

.form-trust-item svg {
  width: 13px;
  height: 13px;
  color: var(--gold);
}