/* Site-wide header menu and footer (markup injected by build.mjs, behaviour in assets/nav.js). */

/* ---- header menu (≥1024px) ---- */
.site-nav { display:none; align-items:center; gap:2px; margin-right:4px; font-size:14px; font-weight:700; }
@media (min-width:1024px) { .site-nav { display:flex; } }
.site-nav > a, .nav-dd-btn {
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px;
  color:var(--text-2); background:none; border:0; font:inherit; cursor:pointer; transition:color .25s, background .25s;
}
.site-nav > a:hover, .nav-dd-btn:hover, .nav-dd.open .nav-dd-btn, .site-nav a[aria-current="page"] { color:var(--text); background:var(--surface-2); }
.nav-dd { position:relative; }
.nav-caret { width:14px; height:14px; transition:transform .2s ease; }
.nav-dd.open .nav-caret { transform:rotate(180deg); }
.nav-dd-menu {
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); z-index:70; min-width:220px; padding:6px;
  background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-card);
}
.nav-dd-menu[hidden] { display:none; }
.nav-dd-menu a { display:block; padding:10px 12px; border-radius:10px; font-weight:700; color:var(--text-2); white-space:nowrap; }
.nav-dd-menu .nav-dd-all { margin-top:4px; border-top:1px solid var(--border); border-radius:0 0 10px 10px; color:var(--brand-indigo); }
.nav-dd-menu a:hover { background:var(--surface-2); color:var(--text); }

/* ---- mobile menu (<1024px) ---- */
.nav-burger {
  order:10; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:999px;
  color:var(--text-2); background:none; border:0; cursor:pointer; transition:color .25s, background .25s;
}
.nav-burger:hover, .nav-burger[aria-expanded="true"] { color:var(--text); background:var(--surface-2); }
.nav-burger svg { width:22px; height:22px; }
@media (min-width:1024px) { .nav-burger { display:none; } }
.nav-panel {
  position:fixed; top:78px; left:12px; right:12px; z-index:60; max-height:calc(100vh - 96px); overflow:auto; padding:10px;
  background:var(--surface); border:1px solid var(--border); border-radius:24px; box-shadow:var(--shadow-card);
}
.nav-panel[hidden] { display:none; }
@media (min-width:1024px) { .nav-panel { display:none !important; } }
.nav-panel a { display:block; padding:12px 14px; border-radius:14px; font-size:16px; font-weight:800; color:var(--text); }
.nav-panel a:hover { background:var(--surface-2); }
.nav-panel-label { display:block; padding:14px 14px 4px; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
.nav-panel .nav-sub { padding-left:30px; font-size:15px; font-weight:700; color:var(--text-2); }
.nav-panel .nav-panel-cta {
  margin-top:8px; text-align:center; color:#fff;
  background:linear-gradient(135deg,#FF6F61 0%,#FF9A6B 60%,#FFC857 100%); box-shadow:0 10px 30px rgba(255,111,97,.35);
}

/* ---- footer ---- */
.site-foot { position:relative; z-index:10; border-top:1px solid var(--border); }
.foot-inner { max-width:1120px; margin:0 auto; padding:56px 20px 28px; }
.foot-top { display:grid; gap:36px; }
@media (min-width:900px) { .foot-top { grid-template-columns:1.2fr 3fr; } }
.foot-brand a { display:inline-flex; align-items:center; gap:8px; font-family:'Bricolage Grotesque',Nunito,system-ui,sans-serif; font-weight:700; font-size:18px; color:var(--text); }
.foot-brand img { height:28px; width:auto; }
.foot-brand p { margin-top:10px; font-size:14px; font-weight:700; color:var(--text-3); }
.foot-cols { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px; }
@media (min-width:640px) { .foot-cols { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.foot-cols h3 { margin:0 0 14px; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
.foot-cols ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.foot-cols a, .foot-cols button {
  padding:0; border:0; background:none; font:inherit; font-size:14px; font-weight:700; text-align:left; color:var(--text-2); cursor:pointer; transition:color .25s;
}
.foot-cols a:hover, .foot-cols button:hover { color:var(--text); }
.foot-bottom {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  margin-top:40px; padding-top:20px; border-top:1px solid var(--border); font-size:13px; font-weight:700; color:var(--text-3);
}