/* _chrome.css - shared site nav + footer (canonical = homepage chrome).
   Loaded AFTER tailwind.css + custom.css + _brand.css on every non-home page so
   the whole site shares one nav + footer. Relies only on CSS vars defined in
   _brand.css (--teal, --on-teal, --card, --line, --muted, --bg-side, etc.).
   Fonts are set explicitly (Bricolage Grotesque) so it never depends on a page's
   font setup. Desktop dropdowns are pure CSS (hover/focus-within); chrome.js only
   handles scroll-solid + the mobile menu toggle. */

/* shared container */
header.nav .wrap,.footer .wrap,.mobile-menu .wrap{width:min(100% - 40px, 1200px);margin-inline:auto}

/* chrome-scoped button base */
header.nav .btn,.footer .btn,.mobile-menu .btn{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:650;cursor:pointer;border:1px solid transparent;display:inline-flex;align-items:center;gap:8px;border-radius:10px;text-decoration:none;transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
header.nav .btn:active,.mobile-menu .btn:active{transform:translateY(1px)}

/* ---------- nav ---------- */
header.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;transition:background .25s ease;font-family:'Bricolage Grotesque',system-ui,sans-serif}
header.nav.solid{background:var(--teal)}
header.nav .nav-in{display:flex;align-items:center;gap:26px;height:62px}
header.nav .logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;font-size:18px;color:var(--on-teal);text-decoration:none}
header.nav .logo .suffix{color:var(--on-teal);font-weight:800}
header.nav .logo svg{width:21px;height:21px}
header.nav .nav-links{display:flex;align-items:center;gap:2px;font-size:14.5px;font-weight:550}
header.nav .nav-links>a,header.nav .nav-links .has{color:var(--on-teal-dim);padding:7px 11px;border-radius:9px;cursor:pointer;text-decoration:none;transition:color .15s ease,background .15s ease}
header.nav .nav-links>a:hover,.navitem:hover .has,.navitem:focus-within .has{color:#fff;background:rgba(255,255,255,.13)}
header.nav .nav-links .has{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
header.nav .nav-links .has svg{width:13px;height:13px;opacity:.85}
header.nav .nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
header.nav .nav-right .login{font-size:14.5px;font-weight:700;color:var(--on-teal-dim);padding:7px 2px;text-decoration:none;transition:color .15s ease}
header.nav .nav-right .login:hover{color:#fff}
header.nav .btn.btn-navghost{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.13);padding:8px 16px;font-size:14px;font-weight:650}
header.nav .btn.btn-navghost:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.78)}
header.nav .btn-navcta{background:var(--on-teal);color:var(--teal-deep);padding:8px 16px;font-size:14px;font-weight:700}
header.nav .btn-navcta:hover{background:#fff;box-shadow:0 8px 20px -8px rgb(0 0 0/.3)}

/* nav dropdowns (pure CSS) */
.navitem{position:relative;display:flex}
.navitem .chev{transition:transform .18s ease}
.navitem:hover .chev,.navitem:focus-within .chev{transform:rotate(180deg)}
.dropdown{position:absolute;top:calc(100% + 9px);left:0;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 54px -18px rgb(8 40 44/.32);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:60}
.navitem:hover .dropdown,.navitem:focus-within .dropdown{opacity:1;visibility:visible;transform:none}
.dropdown::before{content:"";position:absolute;top:-11px;left:0;right:0;height:11px}
.dropdown.rich{width:302px}
.dropdown.rich.two{width:min(520px,calc(100vw - 40px));display:grid;grid-template-columns:1fr 1fr;gap:0 4px}
.dropdown.rich a{display:flex;align-items:flex-start;gap:12px;padding:11px;border-radius:11px;cursor:pointer;text-decoration:none}
.dropdown.rich a:hover{background:var(--teal-tint)}
.dd-ic{width:36px;height:36px;border-radius:9px;background:var(--teal-tint);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dropdown.rich a:hover .dd-ic{background:#fff}
.dd-ic svg{width:18px;height:18px;stroke:var(--teal);fill:none}
.dd-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.dd-title{font-size:14px;font-weight:650;color:var(--text)}
.dropdown.rich a:hover .dd-title{color:var(--teal-deep)}
.dd-desc{font-size:12px;line-height:1.35;color:var(--muted);font-weight:450}
.dropdown.mega{display:grid;grid-template-columns:1fr 1fr;gap:2px 22px;width:464px;padding:14px}
.dd-col-label{font-size:11.5px;font-weight:700;color:var(--muted);padding:6px 10px 4px}
.dropdown.mega a{display:block;padding:7px 10px;border-radius:8px;font-size:13.5px;color:var(--text);font-weight:500;white-space:nowrap;cursor:pointer;text-decoration:none}
.dropdown.mega a:hover{background:var(--teal-tint);color:var(--teal-deep)}
header.nav .menu-btn{display:none}

/* ---------- mobile menu ---------- */
.mobile-menu{position:fixed;top:62px;left:0;right:0;z-index:48;background:var(--card);border-bottom:1px solid var(--line);box-shadow:0 24px 44px -24px rgb(8 40 44/.4);max-height:calc(100dvh - 62px);overflow-y:auto;font-family:'Bricolage Grotesque',system-ui,sans-serif}
.mobile-menu[hidden]{display:none}
/* beat _brand.css's old `#mobile-menu{background:var(--teal-deep)!important}` (dark-menu reskin, now unused) */
#mobile-menu.mobile-menu{background:var(--card)!important}
.mobile-menu .mm-in{display:flex;flex-direction:column;padding:8px 0 22px}
.mm-group{border-bottom:1px solid var(--line-soft)}
.mm-group>summary{list-style:none;cursor:pointer;padding:14px 4px;font-weight:700;font-size:15.5px;color:var(--text);display:flex;align-items:center;justify-content:space-between}
.mm-group>summary::-webkit-details-marker{display:none}
.mm-group>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s ease;margin-right:6px}
.mm-group[open]>summary::after{transform:rotate(-135deg)}
.mm-group a{display:block;padding:9px 14px;font-size:14px;color:var(--muted);text-decoration:none}
.mm-group a:hover{color:var(--teal)}
.mm-col-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:10px 14px 2px}
.mm-link{display:block;padding:14px 4px;font-weight:700;font-size:15.5px;color:var(--text);border-bottom:1px solid var(--line-soft);text-decoration:none}
.mm-link:hover{color:var(--teal)}
.mm-cta{display:flex;flex-direction:column;gap:10px;padding-top:18px}
.mm-cta .login{font-weight:700;color:var(--teal);text-align:center;padding:11px;text-decoration:none}
.mobile-menu .btn-navcta{justify-content:center;background:var(--teal);color:#fff;padding:13px 16px;font-size:15px;font-weight:700}
.mobile-menu .btn-navcta:hover{background:var(--teal-deep)}

/* ---------- footer ---------- */
.footer{background:var(--bg-side);border-top:1px solid var(--line);padding:clamp(44px,6vw,68px) 0 30px;font-family:'Bricolage Grotesque',system-ui,sans-serif;color:var(--text)}
.footer .foot-top{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;padding-bottom:36px;border-bottom:1px solid var(--line)}
.footer .foot-brand .logo{display:flex;align-items:center;gap:10px;color:var(--text);margin-bottom:14px;font-size:18px;font-weight:800;letter-spacing:-.02em;text-decoration:none}
.footer .foot-brand .logo svg{width:21px;height:21px}
.footer .foot-brand .logo .suffix{color:var(--muted);font-weight:600}
.footer .foot-brand p{color:var(--muted);font-size:14px;line-height:1.6;max-width:42ch}
.footer .foot-news h4{font-size:16px;font-weight:700;margin-bottom:4px}
.footer .foot-news>p{color:var(--muted);font-size:12.5px;margin-bottom:14px}
.footer .foot-form{display:flex;gap:9px;flex-wrap:wrap}
.footer .foot-form input{flex:1;min-width:180px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 14px;font-size:14px;font-family:inherit;color:var(--text)}
.footer .foot-form input:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:transparent}
.footer .foot-form .btn-teal{background:var(--teal);color:#fff;padding:11px 17px;font-size:14px}
.footer .foot-form .btn-teal:hover{background:var(--teal-deep);box-shadow:0 8px 22px -8px rgb(14 124 134/.6)}
.footer .foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:36px 0}
.footer .foot-cols h5{font-size:12px;font-weight:700;color:var(--teal);margin-bottom:14px}
.footer .foot-cols ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0;padding:0}
.footer .foot-cols a{color:var(--muted);font-size:14px;text-decoration:none}
.footer .foot-cols a:hover{color:var(--text)}
.footer .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-top:24px;border-top:1px solid var(--line);flex-wrap:wrap}
.footer .foot-bottom p{color:var(--muted);font-size:12.5px}
.footer .foot-bottom a{color:var(--text)}
.footer .foot-social{display:flex;gap:16px;align-items:center}
.footer .foot-social a{color:var(--muted);display:inline-flex;text-decoration:none}
.footer .foot-social svg{width:19px;height:19px;fill:currentColor}
.footer .foot-social a:hover{color:var(--teal)}

@media (max-width:880px){
  header.nav .nav-links{display:none}
  header.nav .nav-right .login,header.nav .nav-right .btn-navghost:not(.menu-btn){display:none}
  header.nav .nav-right .menu-btn{display:inline-flex}
  .footer .foot-top,.footer .foot-cols{grid-template-columns:1fr 1fr}
}
@media (min-width:881px){
  .mobile-menu,header.nav .menu-btn{display:none!important}
}
@media (max-width:620px){
  .footer .foot-top{grid-template-columns:1fr}
  .footer .foot-bottom{flex-direction:column-reverse;align-items:flex-start}
}