/* ============================================================
   Site Chrome - Home variant (index.html only)
   ============================================================
   Extracted directly from the already-working, already-approved index.html
   nav/footer CSS - preserved exactly (Option A: relocate, don't redesign).

   Kept in a SEPARATE file from site-chrome.css (the tool-page variant)
   deliberately: both variants use the same selectors (.nav, .nav-links,
   .nav-dropdown, footer, etc.) with genuinely different values, so loading
   both on the same page would create a cascade conflict - whichever file
   loaded last would silently win, regardless of which page type is
   actually being viewed. Only index.html should ever link to this file;
   the three tool pages continue to link to site-chrome.css only.

   Depends on these CSS custom properties already being defined in
   index.html's own <style> block: --line, --gold, --navy, --navy-deep,
   --ink, --ink-soft, --cream, --paper, --radius, --max.
   ============================================================ */

header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,249,244,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;
}
.brand{font-size:1.15rem;font-weight:600;display:flex;align-items:center;gap:12px;line-height:1.15;}
.brand small{font-family:'Inter',sans-serif;font-weight:500;font-size:.68rem;letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase;}
.brand img{height:64px;width:auto;display:block;}
.nav-links{display:flex;align-items:center;gap:32px;font-size:.94rem;font-weight:500;}
.nav-links a{position:relative;padding:4px 0;color:var(--navy);}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:width .2s ease;
}
.nav-links a:hover::after{width:100%;}

.nav-dropdown{position:relative;}
.nav-dropdown-trigger{
  background:none;border:none;font:inherit;font-weight:500;color:var(--navy);
  display:flex;align-items:center;gap:6px;cursor:pointer;padding:4px 0;
}
.nav-dropdown-trigger svg{width:11px;height:11px;flex:none;transition:transform .2s ease;}
.nav-dropdown.is-open .nav-dropdown-trigger svg{transform:rotate(180deg);}
.nav-dropdown-menu{
  display:none;
  position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%);
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 40px rgba(14,42,77,.14);
  padding:8px;min-width:170px;z-index:70;
}
.nav-dropdown.is-open .nav-dropdown-menu{display:block;}
.nav-dropdown-menu a{
  display:block;padding:10px 14px;border-radius:8px;font-size:.9rem;color:var(--ink);white-space:nowrap;
}
.nav-dropdown-menu a:hover{background:var(--cream);}
.nav-dropdown-menu a::after{display:none;}

.nav-cta{display:flex;align-items:center;gap:18px;margin-left:32px;flex:none;}
/* Reduced from the generic .btn's default padding (14px 26px) - the full
   size, combined with "Explore/ Login" being longer text than a typical
   nav button, was crowding out the gap to "Contact" on narrower desktop
   widths, since .nav's justify-content:space-between only guarantees
   spacing between top-level items, not a fixed minimum. The margin-left
   above guarantees a consistent gap; this reduces how much width the
   button itself claims in the first place. */
/* Prevents "Explore/ Login" from wrapping onto two lines at narrower
   desktop widths, where the full nav row (logo + 7 items + button) can
   exceed the available width - without this, the button grows taller than
   the rest of the nav row once its text wraps, visibly bulging below the
   nav bar. Scoped to .nav-cta .btn specifically, not the generic .btn
   class used elsewhere on the page (hero CTAs, contact form, etc.). */
.nav-cta .btn{padding:11px 20px;font-size:.88rem;white-space:nowrap;}
.menu-toggle{display:none;background:none;border:none;font-size:1.6rem;color:var(--navy);cursor:pointer;line-height:1;padding:4px;}
/* Small, icon-only Share button - mobile nav only. Hidden here by default
   (desktop already has its own, full "Share" button within the hero
   itself, positioned there specifically because desktop has the
   horizontal room for it at zero vertical cost - see the mobile media
   query below for why this exists as a second, separate element rather
   than just repositioning the hero one). */
.nav-share-btn{display:none;}

footer{background:var(--navy-deep);color:#8FA0B7;padding:52px 0 28px;font-size:.86rem;}
.footer-grid{display:grid;grid-template-columns:1.3fr 0.8fr 0.8fr 0.8fr;gap:32px;margin-bottom:36px;}
.footer-grid h4{color:#fff;font-family:'Inter',sans-serif;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px;}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.footer-grid a:hover{color:#fff;}
.footer-brand{
  display:flex;align-items:center;gap:10px;
  font-family:'Fraunces',serif;color:#fff;font-size:1.15rem;margin-bottom:10px;
}
.footer-brand img{height:34px;width:auto;display:block;}
.disclaimer{
  border-top:1px solid rgba(255,255,255,.1);padding-top:24px;font-size:.78rem;line-height:1.7;color:#6E7F94;
}
.disclaimer strong{color:#9FAEC2;}
.bottom-bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:20px;font-size:.78rem;color:#5E7086;}
.legal-links{margin-top:14px;font-size:.8rem;color:#5E7086;}
.legal-links a{color:#9FAEC2;}
.legal-links a:hover{color:#fff;}
.legal-links span{margin:0 8px;}

@media (max-width:980px){
  .footer-grid{grid-template-columns:1fr;}
  .nav{position:relative;flex-wrap:wrap;}
  .nav-links{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);
    border:1px solid var(--line);
    border-top:none;
    border-radius:0 0 var(--radius) var(--radius);
    box-shadow:0 18px 30px rgba(14,42,77,.1);
    padding:8px 28px 16px;
    z-index:60;
  }
  .nav-links.is-open{display:flex;}
  .nav-links a{padding:12px 0;border-bottom:1px solid var(--line);}
  .nav-links a:last-child{border-bottom:none;}
  .nav-links a::after{display:none;}
  .menu-toggle{display:block;}
  .nav-share-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:50%;
    background:var(--cream);color:var(--navy);
    flex:none;
  }
  .nav-share-btn:hover{background:var(--line);}

  /* The "Explore/ Login" button (nav-cta) at full desktop size, combined
     with the logo and hamburger icon, sits right at the edge of fitting on
     one row at this breakpoint - close enough that Chrome and Firefox
     resolve it differently (one wraps the hamburger to its own row, one
     doesn't), due to small font-metric differences between browsers.
     Scoped specifically to .nav-cta .btn, not the generic .btn class used
     elsewhere on the page, so no other buttons are affected. */
  .nav-cta .btn{padding:9px 16px;font-size:.82rem;white-space:nowrap;}

  .nav-dropdown{width:100%;}
  .nav-dropdown-trigger{width:100%;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);}
  .nav-dropdown-menu{
    /* Fixed here to genuinely toggle open/closed on mobile, matching the
       same correction already applied to site-chrome.css (the tool
       variant) - the original index.html CSS had "display:block !important"
       here too, which forced this dropdown permanently open on mobile
       regardless of tap state. Applying the proven fix directly rather
       than reintroducing the same bug and fixing it again later. */
    display:none;
    position:static;transform:none;
    box-shadow:none;border:none;border-radius:0;
    padding:0 0 0 16px;margin:0;min-width:0;
  }
  .nav-dropdown-menu a{padding:10px 0;border-bottom:1px solid var(--line);border-radius:0;}
  .nav-dropdown.is-open .nav-dropdown-trigger svg{transform:rotate(0deg);}
}

@media (max-width:560px){
  .brand img{height:44px;}
  .brand-text{font-size:.85rem;}
}