/* ==========================================================================
   Freedom in Work — shared responsive nav + footer (dropdowns + hamburger)
   Loaded AFTER each page's own styles so it wins on equal specificity.
   Desktop: hover/click dropdowns. Mobile (<=900px): hamburger + accordions.
   ========================================================================== */

/* ---- shared tokens (fallbacks match brand) ---- */
:root{ --fw-ink:#1c1c1c; --fw-cyan:#43B7D1; --fw-cyan-deep:#2C8CA6; --fw-mist:#F4F6F7; --fw-line:#E4E8EA; }

/* ---------- NAV (desktop base) ---------- */
.nav-toggle{ display:none; }
.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-item{ position:relative; }
.nav-link{ font-family:inherit; font-weight:500; font-size:14px; line-height:1;
  color:inherit; opacity:.85; background:none; border:0; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; }
.nav-link:hover{ opacity:1; }
.nav-links > a.nav-link{ text-decoration:none; }
header.nav.on-dark .nav-link{ color:#fff; }
.nav-link .caret{ width:6px; height:6px; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-1px);
  opacity:.7; transition:transform .2s; }

/* ---------- dropdown panels (desktop) ---------- */
.dropdown{ position:absolute; top:calc(100% + 14px); left:0; min-width:250px;
  background:#fff; border:1px solid var(--fw-line); border-radius:2px;
  box-shadow:0 14px 34px rgba(20,25,28,.14); padding:8px; z-index:60;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:.16s cubic-bezier(.2,.8,.2,1); }
.dropdown::before{ content:""; position:absolute; top:-14px; left:0; right:0; height:14px; }
.nav-item:hover > .dropdown, .nav-item.open > .dropdown{ opacity:1; visibility:visible; transform:none; }
.dropdown a{ display:block; padding:9px 12px; font-size:14px; text-decoration:none;
  color:var(--fw-ink) !important; opacity:1; border-radius:2px; white-space:nowrap; }
.dropdown a:hover{ background:var(--fw-mist); }
.dropdown a .pr{ color:var(--fw-cyan-deep); font-weight:600; font-size:12.5px; margin-left:8px; }
.dropdown .grp{ font-family:'Archivo',sans-serif; font-weight:700; font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:#98a1a5; padding:9px 12px 3px; }
.dropdown .sep{ height:1px; background:var(--fw-line); margin:6px 4px; }

/* ---------- hamburger button ---------- */
.nav-toggle{ width:44px; height:40px; border:1.5px solid rgba(255,255,255,.35);
  background:none; border-radius:2px; cursor:pointer; padding:0 11px;
  flex-direction:column; justify-content:center; gap:5px; color:#fff; }
header.nav:not(.on-dark) .nav-toggle{ border-color:rgba(20,25,28,.22); color:var(--fw-ink); }
.nav-toggle span{ display:block; height:2px; background:currentColor; border-radius:2px; transition:.22s; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- MOBILE (<=900px) ---------- */
@media(max-width:900px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{ position:fixed; top:78px; left:0; right:0; bottom:0; z-index:55;
    background:#141414; flex-direction:column; align-items:stretch; gap:0;
    padding:8px 22px 48px; overflow-y:auto; transform:translateX(100%);
    transition:transform .26s cubic-bezier(.2,.8,.2,1); }
  .nav-links.open{ transform:none; }
  .nav-item{ width:100%; }
  .nav-links > a.nav-link, .nav-item > .nav-link{ color:#fff !important; width:100%;
    justify-content:space-between; font-size:16px; padding:17px 2px;
    border-bottom:1px solid #292929; opacity:1; }
  .dropdown{ position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; background:none; padding:0; min-width:0;
    max-height:0; overflow:hidden; transition:max-height .28s ease; }
  .nav-item.open > .dropdown{ max-height:720px; padding:4px 0 12px; }
  .dropdown a{ color:#c9ced2 !important; padding:12px 14px; font-size:14.5px; }
  .dropdown a:hover{ background:#1e1e1e; }
  .dropdown .grp{ color:#7c858a; padding-left:14px; }
  .dropdown .sep{ background:#292929; }
  .nav-item.open > .nav-link .caret{ transform:rotate(225deg) translateY(-1px); }
  .nav-links > .btn{ width:100%; justify-content:center; margin-top:20px; }
  body.nav-open{ overflow:hidden; }
  /* On mobile the full-screen panel is a fixed child of the header. A solid
     header's `backdrop-filter` turns the header into that panel's containing
     block, which collapses the menu to the header's height (and makes it appear
     to "expand down" as it opens). Drop the filter on mobile — an opaque
     background reads the same — so the panel is always viewport-sized. */
  header.nav.solid{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(255,255,255,.98); }
}

/* ---------- FOOTER: grouped columns -> mobile accordions ---------- */
.foot-links.foot-cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px; align-items:start; }
.foot-cols .foot-h{ font-family:'Archivo',sans-serif; font-weight:700; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:#8b9296; background:none;
  border:0; padding:0 0 12px; cursor:default; display:flex; width:100%;
  align-items:center; justify-content:space-between; font-family:'Archivo',sans-serif; }
.foot-cols .foot-h .caret{ display:none; width:8px; height:8px; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .2s; }
.foot-cols .foot-d{ display:flex; flex-direction:column; gap:11px; }
.foot-cols .foot-d a{ font-size:14px; text-decoration:none; opacity:.82; }
.foot-cols .foot-d a:hover{ opacity:1; }

@media(max-width:760px){
  .foot-links.foot-cols{ grid-template-columns:1fr; gap:0; }
  .foot-cols .foot-col{ border-top:1px solid rgba(255,255,255,.12); }
  .foot-cols .foot-h{ cursor:pointer; padding:16px 0; color:inherit; opacity:.9; }
  .foot-cols .foot-h .caret{ display:block; }
  .foot-cols .foot-col.open .foot-h .caret{ transform:rotate(225deg); }
  .foot-cols .foot-d{ max-height:0; overflow:hidden; transition:max-height .26s ease; }
  .foot-cols .foot-col.open .foot-d{ max-height:520px; padding-bottom:16px; }
}