/* Shared 2026 header & footer.
   Everything is scoped to header.site / footer.site so the legacy page styles
   below them stay untouched. Loaded on every page, after the page's own CSS. */

:root{
  --sd-ink:#18163B;
  --sd-bg:#FAFAFA;
  --sd-blue:#547CF6;
  --sd-blue-soft:#8FB0FF;
  --sd-muted:#696880;
  --sd-muted2:#7F7E82;
  --sd-line:#18163B1f;
  --sd-line-strong:#18163B3d;
}

/* --- header ------------------------------------------------------------- */
header.site{
  position:sticky;top:0;left:0;width:100%;z-index:50;height:auto;
  /* a light wash by default so content never shows through, even without JS */
  background:#fafafae6;backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;box-shadow:none;
  font-family:"Noto Sans",system-ui,-apple-system,sans-serif;color:var(--sd-ink);
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
/* fully solid once the page is scrolled */
html.sd-scrolled header.site{
  background:#fafafafa;
  border-bottom-color:var(--sd-line);box-shadow:0 6px 24px #18163b0f;
}
header.site *{box-sizing:border-box}
header.site a{text-decoration:none}

/* the container width is deliberately NOT set here: each page keeps its own,
   so the header lines up with whatever content sits under it */
header.site .nav{
  display:flex;align-items:center;justify-content:space-between;
  height:74px;gap:24px;position:static;background:none;overflow:visible;
  /* the legacy stylesheet pads header .nav by 64px, which pushed the logo out
     of line with the page content — match the content gutter instead */
  padding-left:20px;padding-right:20px;
}
/* the homepage container uses a wider gutter */
body.home-2026 header.site .nav{padding-left:24px;padding-right:24px}
header.site .nav .logo{display:inline-flex;align-items:center}
header.site .nav .logo img{height:34px;width:auto;margin:0}
header.site .nav-links{
  display:flex;gap:30px;align-items:center;
  font-size:.96rem;font-weight:500;color:var(--sd-muted);
}
header.site .nav-links a{color:var(--sd-muted);transition:color .2s ease}
header.site .nav-links a:hover{color:var(--sd-ink)}
header.site .nav-cta{display:flex;gap:12px;align-items:center}

header.site .lang-switch{
  display:flex;align-items:center;gap:6px;margin-right:6px;
  font-size:.9rem;font-weight:600;color:var(--sd-muted);
}
header.site .lang-switch a{padding:2px 6px;border-radius:6px;color:var(--sd-muted)}
header.site .lang-switch a:hover{color:var(--sd-ink)}
header.site .lang-switch a.is-active{color:var(--sd-ink);background:var(--sd-line)}

/* --- buttons (header + footer only) ------------------------------------- */
header.site .btn,footer.site .btn{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:1rem;padding:15px 26px;border-radius:999px;
  border:1px solid transparent;cursor:pointer;line-height:1;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
header.site .btn-sm,footer.site .btn-sm{padding:11px 20px;font-size:.94rem}
header.site .btn-primary,footer.site .btn-primary,
header.site .btn-lime,footer.site .btn-lime{background:var(--sd-blue);color:#fff}
header.site .btn-primary:hover,footer.site .btn-primary:hover,
header.site .btn-lime:hover,footer.site .btn-lime:hover{background:#3f66e0;transform:translateY(-1px)}
header.site .btn-dark,footer.site .btn-dark{background:var(--sd-ink);color:#fff}
header.site .btn-dark:hover,footer.site .btn-dark:hover{background:#26224f;transform:translateY(-1px)}
header.site .btn-ghost,footer.site .btn-ghost{background:transparent;color:var(--sd-ink);border-color:var(--sd-line-strong)}
header.site .btn-ghost:hover,footer.site .btn-ghost:hover{border-color:var(--sd-ink);background:#fff}

/* --- footer ------------------------------------------------------------- */
footer.site{
  padding:56px 0 30px;border-top:1px solid var(--sd-line);
  background:var(--sd-bg);color:var(--sd-ink);
  font-family:"Noto Sans",system-ui,-apple-system,sans-serif;
}
footer.site *{box-sizing:border-box}
footer.site a{text-decoration:none}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
footer.site .logo img{height:30px;margin-bottom:14px;width:auto}
footer.site .f-desc{color:var(--sd-muted);font-size:.95rem;line-height:1.6;max-width:34ch;margin:0}
footer.site .foot-col h4{
  font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--sd-muted2);margin:0 0 14px;font-weight:700;
}
footer.site .foot-col a{display:block;color:var(--sd-muted);font-size:.95rem;margin-bottom:9px}
footer.site .foot-col a:hover{color:var(--sd-ink)}
footer.site .foot-bottom{
  margin-top:40px;padding-top:22px;border-top:1px solid var(--sd-line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--sd-muted2);font-size:.88rem;
}

@media (max-width:860px){
  header.site .nav-links{display:none}
  footer.site .foot-grid{grid-template-columns:1fr 1fr}
  footer.site .foot-bottom{flex-direction:column}
}