/* ============================================================
   TRANSWARRANTY — SITE HEADER + SLIDE-OUT NAV
   Self-contained: every variable, font and reset the header needs is scoped
   to its own three root elements (.site-header / .scrim / .nav-panel), so it
   can be dropped into any page without inheriting — or leaking into — that
   page's own styling.
   Loaded via <link rel="stylesheet" href="assets/header.css">
   ============================================================ */

/* ---- scoped design tokens (never touch the host page's :root) ---- */
.site-header, .scrim, .nav-panel{
  --blue:#0071c1;
  --blue-deep:#005a9c;
  --orange:#ff7200;
  --ink:#04131d;
  --burger:#16193c;
  --pill-bg:#edf0f9;
  --pill-text:#1468a8;
  --rule:#eceef1;
  --panel:#ffffff;
  --header-h:88px;
  --panel-w:497px;
  --panel-pad:38px;
  --row-h:90px;
  --ease:cubic-bezier(.22,.61,.36,1);
  font-family:"Outfit","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  /* base colour for the header's own scope, so nothing inherits the host
     page's body colour (which differs from page to page). */
  color:var(--ink);
}

/* ---- insulation from the host page's global element styles ----
   Some pages declare `a{color:var(--blue-deep)}` with no text-decoration reset,
   which would underline the pills and nav rows. Re-assert the defaults here.
   NOTE: deliberately no `color` here. `.site-header a` scores 0,1,1 and would
   outrank .pill--solid / .pill--ghost / .sub-link (all 0,1,0), stripping the
   pills of their own colours. Colour is carried by the scoped base `color`
   below, which those rules override normally through inheritance. */
.site-header *, .scrim *, .nav-panel *{ box-sizing:border-box; }
.site-header a, .nav-panel a{ text-decoration:none; }
.site-header button, .nav-panel button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
.site-header img, .nav-panel img{ display:block; max-width:100%; }

/* set by the menu script while the slide-out panel is open */
body.is-locked{ overflow:hidden; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:60;
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  padding:0 26px 0 22px;
  background:#fff;
  box-shadow:0 2px 12px rgba(4,19,29,.07);
}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:46px;width:auto}
.header-actions{display:flex;align-items:center;gap:24px}
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 28px;
  border-radius:999px;
  font-size:17px;letter-spacing:.1px;white-space:nowrap;
  transition:background-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
.pill--ghost{background:var(--pill-bg);color:var(--pill-text);font-weight:600;min-width:150px}
.pill--ghost:hover{background:#e3e9f6}
.pill--solid{background:var(--blue);color:#fff;font-weight:700;min-width:206px;box-shadow:0 5px 14px rgba(0,113,193,.22)}
.pill--solid:hover{background:var(--blue-deep);transform:translateY(-1px);box-shadow:0 9px 20px rgba(0,113,193,.28)}
/* hamburger — 3 bars, 4px thick, 11px gaps (as measured) */
.burger{
  width:42px;height:28px;
  display:flex;flex-direction:column;justify-content:space-between;
  flex:0 0 auto;margin-left:16px;padding:0;
}
.burger span{
  display:block;height:3.5px;width:100%;
  border-radius:2px;background:var(--burger);
  transition:transform .3s var(--ease),opacity .2s var(--ease),width .3s var(--ease);
}
.burger:hover span{background:var(--blue)}

/* ============================================================
   SLIDE-OUT NAV PANEL
   ============================================================ */
.scrim{
  position:fixed;inset:var(--header-h) 0 0 0;z-index:55;
  background:transparent;
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),visibility .3s var(--ease);
}
.scrim.is-open{opacity:1;visibility:visible}
.nav-panel{
  position:fixed;top:var(--header-h);right:0;z-index:58;
  width:var(--panel-w);max-width:100%;
  height:calc(100vh - var(--header-h));
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--panel);
  border-radius:0;
  box-shadow:-8px 10px 44px rgba(4,19,29,.13);
  padding:49px var(--panel-pad) 34px;
  opacity:0;visibility:hidden;
  transform:translateY(-14px);
  transition:opacity .3s var(--ease),transform .34s var(--ease),visibility .3s var(--ease);
}
.nav-panel.is-open{opacity:1;visibility:visible;transform:none}
/* `.nav-panel` prefix is load-bearing: the button reset above scores 0,1,1 and
   would otherwise outrank a bare `.panel-close` (0,1,0) and take its colour. */
.nav-panel .panel-close{
  position:absolute;top:23px;right:31px;
  width:34px;height:34px;
  display:grid;place-items:center;
  color:var(--burger);border-radius:8px;
  transition:color .2s var(--ease),transform .2s var(--ease);
}
.panel-close:hover{color:var(--blue);transform:rotate(90deg)}
.panel-close svg{width:26px;height:26px}

/* --- top-level rows ---------------------------------------- */
.nav-row{
  display:flex;align-items:center;gap:35px;
  width:100%;min-height:var(--row-h);
  border-bottom:1px solid var(--rule);
  text-align:left;
}
.nav-row .ico{
  flex:0 0 32px;width:32px;height:32px;
  color:var(--blue);
  transition:transform .25s var(--ease);
}
.nav-row .lbl{
  font-size:22px;font-weight:600;line-height:1.35;letter-spacing:-.1px;
  color:var(--ink);
  transition:color .2s var(--ease);
}
.nav-row:hover .lbl{color:var(--blue)}
.nav-row:hover .ico{transform:translateX(3px)}

/* --- Technology / Investors accordions ---------------------- */
.nav-group{border-bottom:1px solid var(--rule)}
.nav-row--toggle{
  gap:0;justify-content:space-between;
  min-height:76px;border-bottom:0;
}
/* Investors carries a short label, so space-between pushed it away from its
   icon. Use the same icon/label gap as every other row and pin the chevron
   to the right edge instead. Tech keeps its own spacing untouched. */
#investorsGroup > .nav-row--toggle{gap:35px;justify-content:flex-start}
#investorsGroup > .nav-row--toggle .chev{margin-left:auto}
.nav-row--toggle .chev{
  width:24px;height:24px;color:#495176;
  transition:transform .3s var(--ease),color .2s var(--ease);
}
.nav-row--toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-row--toggle:hover .chev{color:var(--blue)}
.nav-sub{
  display:grid;grid-template-rows:1fr;
  overflow:hidden;
  transition:grid-template-rows .32s var(--ease);
}
.nav-sub[hidden]{display:none !important}
.nav-sub__inner{overflow:hidden;min-height:0;padding-bottom:25px}
.sub-link{
  display:flex;align-items:flex-start;gap:10px;
  padding:9px 34px 9px 46px;
  font-size:21.5px;font-weight:400;line-height:1.45;
  color:var(--ink);
  transition:color .2s var(--ease);
}
.sub-link .chev-r{
  flex:0 0 13px;width:13px;height:13px;margin-top:7px;
  color:var(--orange);
  transition:transform .22s var(--ease);
}
.sub-link span{max-width:300px}
.sub-link:hover{color:var(--blue)}
.sub-link:hover .chev-r{transform:translateX(4px)}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1024px){
  .site-header{padding:0 22px 0 18px}
  .brand img{height:38px}
  .pill--ghost{display:none}
  /* Investors lives inside the panel on tablet/mobile */
  .burger{width:38px;height:25px}
  .burger span{height:3.5px}
}
@media (max-width:560px){
  .site-header{gap:10px;padding:0 14px}
  .brand{min-width:0;flex:0 1 auto}
  .brand img{height:28px;max-width:52vw;object-fit:contain;object-position:left center}
  .header-actions{gap:10px;flex:0 0 auto}
  .pill{height:34px;font-size:12.5px;padding:0 14px}
  .pill--solid{font-weight:700}
  .burger{width:32px;height:22px;margin-left:6px}
  .burger span{height:3px}
  .nav-panel{border-radius:0;padding-top:40px}
  .nav-row{gap:20px}
  #investorsGroup > .nav-row--toggle{gap:20px}
  .nav-row .ico{flex-basis:25px;width:25px;height:25px}
  .nav-row .lbl{font-size:18.5px}
  .sub-link{padding-left:30px;padding-right:8px;font-size:17.5px}
  .panel-close{top:12px;right:16px}
}
@media (max-width:400px){
  .brand img{height:25px}
  .pill{height:32px;font-size:11.5px;padding:0 11px}
}