/* =====================================================================
   SHARED HEADER / FOOTER STYLES
   ---------------------------------------------------------------------
   One stylesheet for the site's chrome: brand variables, base resets,
   the sticky nav with its dropdowns/submenus, and the footer.

   Every page should link this file in <head>, BEFORE its own <style>
   block:

     <link rel="stylesheet" href="shared-header-footer.css">

   Adding a new top-level nav item, dropdown, or nested submenu only
   requires editing HEADER_HTML in shared-header-footer.js -- these
   rules already style any number of .nav-dropdown / .nav-subdropdown
   blocks generically, so nothing here needs to change.
   ===================================================================== */

:root{
    --ink:#0F2438;
    --teal:#12312F;
    --parchment:#F6F2E9;
    --parchment-2:#EFE8D8;
    --brass:#B08D57;
    --brass-light:#D8BD8A;
    --slate:#5B6B73;
    --line:rgba(15,36,56,0.12);
    --white:#FFFFFF;
    --shadow: 0 20px 50px -25px rgba(15,36,56,0.35);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;overflow-x:hidden;}
  body{
    margin:0;
    overflow-x:hidden;
    background:var(--parchment);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4,h5,.serif{
    font-family:'Fraunces',serif;
    font-weight:600;
    letter-spacing:-0.01em;
    margin:0;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .eyebrow{
    font-family:'Inter',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.16em;
    font-size:0.72rem;
    font-weight:600;
    color:var(--brass);
  }
  .wrap{max-width:1120px;margin:0 auto;padding:0 32px;}

  /* ===== NAV ===== */
  header.site-nav{
    position:sticky;top:0;z-index:100;
    background:rgba(246,242,233,0.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    max-width:1120px;margin:0 auto;padding:18px 32px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .wordmark{
    font-family:'Fraunces',serif;
    font-size:1.15rem;font-weight:700;letter-spacing:0.01em;
    display:flex;flex-direction:column;line-height:1.05;
  }
  .wordmark span{
    font-family:'Inter',sans-serif;font-size:0.6rem;font-weight:600;
    letter-spacing:0.18em;color:var(--brass);text-transform:uppercase;margin-top:3px;
  }
  nav.menu{display:flex;align-items:center;gap:34px;}
  nav.menu a{
    font-size:0.86rem;font-weight:500;color:var(--ink);position:relative;padding:6px 0;
    transition:color .2s ease;
  }
  nav.menu a::after{
    content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
    background:var(--brass);transition:width .25s ease;
  }
  nav.menu a:hover::after,nav.menu a.active::after{width:100%;}
  nav.menu a.active{color:var(--brass);}
  nav.menu a.nav-cta{
    background:var(--brass);color:var(--ink);
    padding:10px 20px;border-radius:2px;font-size:0.82rem;font-weight:600;
    letter-spacing:0.02em;
  }
  nav.menu a.nav-cta::after{display:none;}
  nav.menu a.nav-cta:hover{background:var(--ink);color:var(--parchment);}
  .menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:4px;}
  .menu-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;}

  /* ===== NAV DROPDOWNS ===== */
  .nav-dropdown{position:relative;}
  .dropdown-toggle{
    background:none;border:none;padding:6px 0;margin:0;cursor:pointer;
    font-family:'Inter',sans-serif;font-size:0.86rem;font-weight:500;color:var(--ink);
    display:inline-flex;align-items:center;gap:5px;position:relative;
  }
  .dropdown-toggle .caret{font-size:0.6rem;color:var(--brass);transition:transform .2s ease;}
  .nav-dropdown.open .dropdown-toggle .caret{transform:rotate(180deg);}
  .dropdown-toggle::after{
    content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
    background:var(--brass);transition:width .25s ease;
  }
  .dropdown-toggle:hover::after,.nav-dropdown.open .dropdown-toggle::after,.dropdown-toggle.active::after{width:100%;}
  .dropdown-toggle.active{color:var(--brass);}
  .dropdown-menu{
    position:absolute;top:100%;left:0;min-width:320px;
    padding-top:16px;
    opacity:0;pointer-events:none;transform:translateY(-6px);
    transition:opacity .2s ease, transform .2s ease;z-index:50;
  }
  .dropdown-menu-inner{
    background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow);padding:8px;
  }
  .nav-dropdown.open .dropdown-menu{opacity:1;pointer-events:auto;transform:translateY(0);}
  .dropdown-item{display:block;padding:13px 14px;font-size:0.85rem;font-weight:500;color:var(--ink);line-height:1.4;}
  .dropdown-item::after{display:none;}
  .dropdown-item:hover{background:var(--parchment-2);color:var(--brass);}
  .dropdown-item.active{background:var(--parchment-2);color:var(--brass);}
  @media (min-width:861px){
    .nav-dropdown:hover .dropdown-menu{opacity:1;pointer-events:auto;transform:translateY(0);}
  }
  .nav-dropdown.force-closed .dropdown-menu{opacity:0 !important;pointer-events:none !important;transform:translateY(-6px) !important;}

  .nav-subdropdown{position:relative;border-top:1px solid var(--line);margin-top:4px;padding-top:4px;}
  .dropdown-subtoggle{
    display:flex;align-items:center;justify-content:space-between;width:100%;
    background:none;border:none;cursor:pointer;padding:13px 14px 13px 0;margin:0;
    font-family:'Inter',sans-serif;font-size:0.85rem;font-weight:500;color:var(--ink);text-align:left;
  }
  .dropdown-subtoggle:hover{background:var(--parchment-2);color:var(--brass);}
  .dropdown-subtoggle .sub-caret{font-size:0.6rem;color:var(--brass);transition:transform .2s ease;margin-left:10px;flex-shrink:0;}
  .nav-subdropdown.open .dropdown-subtoggle .sub-caret{transform:rotate(180deg);}
  .dropdown-subitem{padding:12px 14px 12px 26px;font-size:0.82rem;color:var(--slate);}
  .dropdown-subitem:hover{color:var(--brass);background:var(--parchment-2);}

  @media (min-width:861px){
    .dropdown-submenu{
      position:absolute;top:-8px;left:100%;margin-left:8px;min-width:260px;
      background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow);padding:8px;
      opacity:0;pointer-events:none;transform:translateX(-6px);max-height:none;overflow:visible;
      transition:opacity .2s ease, transform .2s ease;z-index:60;
    }
    .dropdown-submenu.flip-left{left:auto;right:100%;margin-left:0;margin-right:8px;transform:translateX(6px);}
    .nav-subdropdown:hover .dropdown-submenu,
    .nav-subdropdown.open .dropdown-submenu{opacity:1;pointer-events:auto;transform:translateX(0);}
    .nav-subdropdown.force-closed .dropdown-submenu{opacity:0 !important;pointer-events:none !important;transform:translateX(-6px) !important;}
  }
  @media (max-width:860px){
    .dropdown-submenu{max-height:0;overflow:hidden;transition:max-height .25s ease;}
    .nav-subdropdown.open .dropdown-submenu{max-height:220px;}
  }

  /* ===== FOOTER ===== */
  footer{background:var(--ink);color:var(--parchment-2);padding:60px 0 30px;}
  .footer-grid{display:grid;grid-template-columns:1.1fr 1fr 1.3fr 0.85fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,0.12);}
  footer h5{font-family:'Inter',sans-serif;font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--brass-light);margin-bottom:16px;}
  footer .fwordmark{font-family:'Fraunces',serif;font-size:1.3rem;margin-bottom:8px;}
  footer p{font-size:0.86rem;color:rgba(246,242,233,0.7);line-height:1.7;margin:0;}
  footer ul{list-style:none;margin:0;padding:0;}
  footer li{margin-bottom:9px;}
  footer a{font-size:0.84rem;color:rgba(246,242,233,0.85);}
  footer a:hover{color:var(--brass-light);}
  .footer-disclaimer{
    padding-top:28px;
    font-size:0.76rem;line-height:1.7;color:rgba(246,242,233,0.55);
  }
  .footer-bottom{padding-top:24px;font-size:0.76rem;color:rgba(246,242,233,0.5);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

  /* ===== SCROLL BUTTONS (back-to-top / scroll-to-bottom) ===== */
  .scroll-btn{
    position:fixed;right:24px;z-index:90;
    width:44px;height:44px;border-radius:50%;
    background:var(--ink);color:var(--parchment);border:1px solid var(--brass);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    font-size:1.1rem;line-height:1;
    opacity:0;pointer-events:none;transform:translateY(8px);
    transition:opacity .25s ease, transform .25s ease, background .2s ease;
  }
  .scroll-btn.visible{opacity:1;pointer-events:auto;transform:translateY(0);}
  .scroll-btn:hover{background:var(--brass);color:var(--ink);}
  .back-to-top{bottom:76px;}
  .scroll-to-bottom{bottom:24px;}
  @media (max-width:860px){
    .scroll-btn{right:16px;width:40px;height:40px;font-size:1rem;}
    .back-to-top{bottom:64px;}
    .scroll-to-bottom{bottom:16px;}
  }

  
  /* ===== RESPONSIVE: NAV & FOOTER ===== */
  @media (max-width:900px){
    .footer-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:860px){
    .footer-grid{grid-template-columns:1fr;gap:32px;}
    nav.menu{
      position:fixed;top:64px;left:0;right:0;background:var(--parchment);
      flex-direction:column;align-items:flex-start;padding:24px 32px;gap:20px;
      border-bottom:1px solid var(--line);
      transform:translateY(-8px);opacity:0;pointer-events:none;transition:all .2s ease;
    }
    nav.menu.open{transform:translateY(0);opacity:1;pointer-events:auto;}
    .menu-toggle{display:block;}
    nav.menu a.nav-cta{width:fit-content;}
    .nav-dropdown{width:100%;}
    .dropdown-toggle{width:100%;justify-content:space-between;}
    .dropdown-menu{
      position:static;min-width:0;padding-top:4px;
      opacity:1;pointer-events:auto;transform:none;display:none;
    }
    .dropdown-menu-inner{background:none;border:none;box-shadow:none;padding:0 0 0 14px;}
    .nav-dropdown.open .dropdown-menu{display:block;}
  }