/* ===== Base & layout ===== */
:root{
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.35rem + 0.8vw, 1.875rem);
  --brand: #1e3a8a;
  --accent: #2563eb;
  --accent-2: #1d4ed8;
  --border: #e5e7eb;
  --bg: #ffffff;
  --shadow: 0 12px 30px rgba(37,99,235,.08);
}
html { font-size: var(--step-0); }
body { margin:0; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:#111; background:#f8fafc; }
img { max-width:100%; height:auto; display:block; }
h1{ font-size: var(--step-2); line-height:1.2 }
h2{ font-size: var(--step-1); line-height:1.25 }

/* Tap targets only on touch devices (prevents tall buttons on desktop) */
@media (pointer: coarse){
  a,button { min-height:44px; min-width:44px; }
}

/* Page wrapper */
.page { max-width: 1100px; margin: 2rem auto; padding: 1rem; background: #fff; border-radius: 12px; box-shadow: var(--shadow); }

/* ===== Header & desktop nav ===== */
.site-header{ background:rgba(255,255,255,.98); backdrop-filter: blur(6px); position:sticky; top:0; z-index:1000; border-bottom:1px solid var(--border); }
.header-inner{ max-width:1120px; margin:0 auto; padding:.5rem 1rem .9rem; display:flex; flex-direction:column; align-items:center; }
.logo-row{ width:100%; display:flex; align-items:center; justify-content:center; position:relative; }
.site-logo{ max-height:110px; width:auto; }

.main-nav{ width:100%; }
.main-menu{ display:flex; justify-content:center; align-items:center; gap:2rem; list-style:none; margin:0; padding:0; }
.main-menu > li { position:relative; }
.main-menu a{
  display:block; text-decoration:none; font-weight:700; color:var(--brand);
  padding:.6rem .8rem; border-radius:8px; line-height:1.2;
}
.main-menu > li > a:not(.cta-button):hover{ background:var(--accent); color:#fff; }
.main-menu a.active{ color:var(--accent); }

/* Desktop submenu (hover) */
.has-submenu .submenu{
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:#fff; border:1px solid var(--border); border-radius:10px;
  margin:0; padding:.4rem 0; min-width:260px; box-shadow: 0 10px 30px rgba(0,0,0,.08);
  z-index:10000;
}
@media (min-width:981px){ .has-submenu:hover > .submenu{ display:block; } }
.submenu{ list-style:none; }
.submenu a{ padding:.6rem 1rem; display:block; color:var(--brand); white-space:nowrap; border-radius:6px; }
.submenu a:hover{ background:#eef2ff; }

/* CTA */
.cta-button{ background:var(--accent); color:#fff !important; border-radius:10px; padding:.6rem 1rem; font-weight:800; line-height:1; border:0; box-shadow:none; }
.cta-button:hover,.cta-button:focus{ background:var(--accent-2); }

/* ===== Mobile (burger + drawer) ===== */
.drawer{ display:none !important; }
.burger{ display:none !important; }

@media (max-width:980px){
  .header-inner{ padding:.35rem .75rem .7rem; }
  .logo-row{ justify-content:space-between; }
  .site-logo{ max-height:72px; }
  .main-nav{ display:none; }

  .burger{ display:flex !important; flex-direction:column; gap:5px; background:transparent; border:0; cursor:pointer; padding:.2rem .25rem; position:absolute; right:.25rem; top:50%; transform:translateY(-50%); }
  .burger-bar{ width:34px; height:3px; background:var(--brand); border-radius:2px; }

  .drawer{
    display:block !important; position:fixed; top:0; right:0; height:100dvh; width:min(86%,340px); background:#fff; z-index:10001;
    transform:translateX(100%); transition:transform .28s cubic-bezier(.22,.61,.36,1); box-shadow:-20px 0 50px rgba(0,0,0,.15);
  }
  .drawer.open{ transform:translateX(0); }

  .drawer-close{ position:absolute; top:.6rem; right:.4rem; background:none; border:0; padding:.3rem; cursor:pointer; }
  .drawer-x, .drawer-x::before{
    content:""; display:block; width:18px; height:2px; background:#111; border-radius:2px;
  }
  .drawer-x{ position:relative; transform:rotate(45deg); }
  .drawer-x::before{ position:absolute; inset:0; transform:rotate(90deg); }

  .drawer-nav{ padding-top:3rem; }
  .drawer-menu{ list-style:none; margin:0; padding:.6rem .85rem; }
  .drawer-menu > li{ border-bottom:1px solid #eef2f7; }
  .drawer-menu > li:last-child{ border-bottom:0; }
  .drawer-menu a{ display:block; text-decoration:none; font-weight:700; color:var(--brand); padding:.85rem .1rem; border-radius:8px; }

  .drawer-row{ display:flex; align-items:center; gap:.5rem; min-height:48px; }
  .drawer-link{ flex:1; }

  .drawer-expand{
    position:relative; width:24px; height:24px; border:0; background:transparent; padding:0; margin:0; flex-shrink:0;
  }
  .drawer-expand::before{
    content:""; position:absolute; left:7px; top:6px; width:8px; height:8px;
    border-right:2px solid var(--brand); border-bottom:2px solid var(--brand); transform:rotate(-45deg);
  }
  .drawer-expand[aria-expanded="true"]::before{ transform:rotate(45deg); }

  .drawer-sub{ list-style:none; margin:.25rem 0 .6rem; padding:0 .25rem 0 .75rem; border-left:2px solid var(--border); }
  .drawer-sub a{ padding:.5rem 0; font-weight:600; }

  .drawer-cta{ display:block; width:100%; text-align:center; margin:.9rem 0 0; border-radius:10px; }
}

/* ===== FIX PACK (guarantees content visible and interactions work) ===== */
/* Drawer must not intercept clicks when closed */
.drawer { pointer-events: none; }
.drawer.open { pointer-events: auto; }

/* Prevent mobile hover menus from catching taps; desktop hover only */
.has-submenu .submenu { display: none; }
@media (min-width:981px){ .has-submenu:hover > .submenu{ display:block; } }

/* Desktop buttons should not grow on click */
@media (pointer: fine){ a,button { min-height:0; } }

/* Safety: hidden means hidden */
[hidden]{ display:none !important; }

/* === BURGER / CLOSE NORMALIZER (put at end of mobile.css) === */

/* Reset & unify clickable icon buttons */
.burger,
.drawer-close {
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  color: #1e3a8a;               /* set icon color once */
}

/* Size & hit area */
.burger,
.drawer-close {
  width: 44px;
  height: 44px;
  padding: 10px;                 /* centers the icon bars nicely */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

/* Subtle hover/active feedback (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .burger:hover,
  .drawer-close:hover { background: #eef2ff; }
  .burger:active,
  .drawer-close:active { transform: translateY(0.5px); }
}

/* Focus visibility for keyboard users */
.burger:focus-visible,
.drawer-close:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 10px;
}

/* Burger bars – force exact look */
.burger-bar {
  display: block;
  width: 24px !important;
  height: 2px !important;
  margin: 3px 0 !important;
  border-radius: 2px !important;
  background: currentColor !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Ensure 3 bars render evenly even if global CSS sets gaps differently */
.burger .burger-bar:first-child   { margin-top: 0 !important; }
.burger .burger-bar:last-child    { margin-bottom: 0 !important; }

/* Close “X” – force thin, centered lines */
.drawer-x,
.drawer-x::before {
  content: "" !important;
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  background: currentColor !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
.drawer-x {
  position: relative !important;
  transform: rotate(45deg) !important;
}
.drawer-x::before {
  position: absolute !important;
  inset: 0 !important;
  transform: rotate(90deg) !important;
}

/* Make sure icons are visible on any header background */
.site-header .burger,
.site-header .drawer-close { color: #1e3a8a; }       /* icon color */
.site-header { background: #fff; }                   /* contrast */

/* Positioning on mobile (guard against page CSS overriding) */
@media (max-width: 980px) {
  .logo-row { position: relative !important; }
  .burger {
    position: absolute !important;
    right: .25rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  .drawer-close {
    position: absolute !important;
    top: .6rem !important;
    right: .4rem !important;
  }
}

/* Optional: prevent any transform scaling applied by page containers */
.burger, .drawer-close { transform: none; }
.burger:active, .drawer-close:active { transform: none; }
/* --- Optional hardeners against page-level overrides --- */
.burger,
.drawer-close {
  line-height: 0 !important;     /* avoid tall buttons if a page sets line-height */
  font: inherit !important;       /* ignore any global button font override */
  box-sizing: border-box !important;
}

.main-menu a,
.drawer-menu a {
  -webkit-tap-highlight-color: transparent;
}

.drawer { will-change: transform; }  /* smoother open/close on some devices */
/* === FINAL HARDENERS for burger / close === */
/* Force a consistent look regardless of page styles */

.site-header .logo-row .burger,
.site-header .drawer-close {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #1e3a8a !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  padding: 10px !important;
  margin: 0 !important;
  line-height: 0 !important;        /* stop tall buttons from line-height elsewhere */
  font: inherit !important;          /* neutralise any odd button font rules */
  box-sizing: border-box !important;
  transform: none !important;        /* kill any inherited transforms */
  text-shadow: none !important;
  filter: none !important;
}

/* Keep icon bars neat and immune to page CSS */
.site-header .burger .burger-bar {
  display: block !important;
  width: 24px !important;
  height: 2px !important;
  margin: 3px 0 !important;
  border-radius: 2px !important;
  background: currentColor !important;
  box-shadow: none !important;
  transform: none !important;
}
.site-header .burger .burger-bar:first-child { margin-top: 0 !important; }
.site-header .burger .burger-bar:last-child  { margin-bottom: 0 !important; }

/* Close “X” */
.site-header .drawer-x,
.site-header .drawer-x::before {
  content: "" !important;
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  background: currentColor !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
.site-header .drawer-x {
  position: relative !important;
  transform: rotate(45deg) !important;
}
.site-header .drawer-x::before {
  position: absolute !important;
  inset: 0 !important;
  transform: rotate(90deg) !important;
}

/* Ensure correct positioning on mobile, regardless of page CSS */
@media (max-width: 980px) {
  .site-header .logo-row { position: relative !important; }
  .site-header .logo-row .burger {
    position: absolute !important;
    right: .25rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  .site-header .drawer-close {
    position: absolute !important;
    top: .6rem !important;
    right: .4rem !important;
  }
}

/* Interaction polish that won't distort size */
@media (hover:hover) and (pointer:fine) {
  .site-header .logo-row .burger:hover,
  .site-header .drawer-close:hover { background: #eef2ff !important; }
}
.site-header .logo-row .burger:focus-visible,
.site-header .drawer-close:focus-visible {
  outline: 2px solid #2563eb !important;
  outline-offset: 2px !important;
  border-radius: 10px !important;
}

/* Make sure the drawer never blocks clicks when closed (safety) */
.site-header .drawer { pointer-events: none !important; }
.site-header .drawer.open { pointer-events: auto !important; }
/* Hide any accidental text node inside the expand buttons */
.drawer-expand { font-size: 0 !important; }