/* =========================================================
   FlooGoo Site Styles (new.css)
   Notes:
   - Place this at: /var/www/html/css/new.css
   - All pages should link with: <link rel="stylesheet" href="../css/new.css">
   - Backdrop blur is applied to .nav-backdrop only; the menu itself is crisp.
   ========================================================= */

/* ---- CSS Reset / Base ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.6;
  color: #e9ecff;
  background: #0b143c; /* deep navy */
}

/* Utility */
.wrap { width: min(1200px, 92vw); margin-inline: auto; }
.small { font-size: 0.92rem; opacity: 0.92; }
.pill {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: #16245e;
  border: 1px solid #22327a;
  color: #ccd4ff;
  font-size: 0.85rem;
}

/* ---- Header / Top Nav ---- */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8, 12, 32, .85);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid #1e2a66;
}
header .nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0;
}
.brand img { height: 28px; display: block; }

/* Hamburger button */
.hamburger {
  display: none;
  border: 1px solid #33408a;
  background: #121a45;
  color: #cfd5ff;
  padding: 6px;
  border-radius: 10px;
}
.hamburger svg rect { fill: currentColor; }

/* Site-wide drawer nav */
.site-nav {
  display: flex; gap: 16px; align-items: center;
}
.site-nav a {
  color: #d9defe; text-decoration: none; opacity: .95;
  padding: 8px 10px; border-radius: 8px;
}
.site-nav a:hover { opacity: 1; background: #152159; }

/* Drawer behavior (mobile) */
@media (max-width: 960px){
  .hamburger { display: inline-flex; align-items: center; justify-content: center; }
  .site-nav {
    position: fixed; inset: 0 0 0 auto; /* right-side drawer */
    width: min(84vw, 360px);
    transform: translateX(100%);
    transition: transform .28s ease;
    padding: 18px;
    display: flex; flex-direction: column; align-items: stretch; gap: 6px;

    /* Crisp menu background (no blur on the menu itself) */
    background: rgba(8, 12, 32, 0.98);
    filter: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .site-nav.open { transform: translateX(0); }
  .site-nav a { border: 1px solid #25337a; background: #111a48; }
}

/* The backdrop behind the drawer carries the blur */
.nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(4, 6, 14, .32);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
  backdrop-filter: blur(6px) saturate(130%);
  -webkit-backdrop-filter: blur(6px) saturate(130%);
  z-index: 40;
}
.nav-backdrop.show { opacity: 1; pointer-events: auto; }

/* ---- Hero ---- */
.hero { padding: 28px 0 10px; }
.hero-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; align-items: center; }
.hero h1 { margin: 10px 0 12px; line-height: 1.18; }
.hero p { margin: 0 0 10px; }
@media (max-width: 960px){
  .hero-in { grid-template-columns: 1fr; }
}

/* ---- Cards / Surfaces ---- */
.card {
  background: #0f1a4b;
  border: 1px solid #24327a;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
}
.svg-on-white {
  background: #fff; border-radius: 10px; padding: 8px;
}
.svg-on-white img { display: block; width: 100%; height: auto; }

/* Grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px){
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* Media helpers */
.imgWide { max-width: 100%; height: auto; display: block; border-radius: 10px; }

/* ---- Buttons ---- */
.btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-block; padding: 10px 14px; border-radius: 10px;
  text-decoration: none; color: #eaf0ff;
  border: 1px solid #2a3a86; background: #15205a;
}
.btn.primary { background: #2b49e0; border-color: #3654e6; }
.btn:hover { filter: brightness(1.05); }

/* ---- In-page Navigation (页面内导航) ---- */
/* Keep .page-nav (your original) and also support .inpage-nav */
.inpage-nav-wrap, .page-nav-wrap {
  position: sticky; top: 60px; z-index: 40;
  background: rgba(7, 12, 40, .86);
  border-bottom: 1px solid #1e2a66;
  backdrop-filter: saturate(160%) blur(8px);
}
.inpage-nav, .page-nav {
  display: flex; gap: 12px; overflow: auto; padding: 10px 20px;
  scroll-snap-type: x mandatory;
}
.inpage-nav a, .page-nav a {
  flex: 0 0 auto; scroll-snap-align: start;
  padding: 8px 12px; border: 1px solid #1e2a66; border-radius: 999px;
  color: #cfd5ff; text-decoration: none; white-space: nowrap; opacity: .95;
  background: #111a48;
}
.inpage-nav a:hover, .page-nav a:hover { opacity: 1; background: #152159; }
@media (max-width: 720px){ .inpage-nav, .page-nav { padding: 8px 16px; } }

/* ---- Sections ---- */
section { padding: 30px 0; }
h1, h2, h3 { margin: 0 0 10px; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }

/* ---- Specs Table ---- */
.specs table { width: 100%; border-collapse: collapse; }
.specs th, .specs td { text-align: left; padding: 10px; vertical-align: top; }
.specs tr { border-bottom: 1px solid #25327a; }
.specs th { width: 180px; color: #b8c2ff; }

/* ---- Footer ---- */
footer { padding: 22px 0 36px; border-top: 1px solid #1e2a66; background: #0a1234; }

/* ---- Accessibility touches ---- */
a:focus-visible, button:focus-visible {
  outline: 2px solid #6ea8ff; outline-offset: 2px;
}

/* ---- Grouped Drawer Nav ---- */
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 10px 14px;
  border: 1px solid #233277;
  border-radius: 12px;
  background: #0e1849;
  margin-bottom: 12px;
}
.nav-label {
  font-size: 0.86rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #89a2ff;
  opacity: .95;
  margin-bottom: 2px;
  padding-left: 2px;
}
/* desktop header display */
@media (min-width: 961px){
  .site-nav { gap: 10px; }
  .nav-group { flex-direction: row; align-items: center; gap: 10px; padding: 6px 8px; margin: 0; }
  .nav-group + .nav-group { margin-left: 6px; }
  .nav-label { margin: 0 4px 0 0; opacity: .9; }
  .site-nav a { border: 1px solid #25337a; background: #111a48; }
}

/* ---- Desktop Hover Dropdowns for Site Nav ---- */
.site-nav { position: relative; }
.nav-top { position: relative; }
.top-link { cursor: pointer; }

/* Desktop: show submenu on hover */
@media (min-width: 961px){
  .site-nav { display: flex; gap: 18px; align-items: center; }
  .nav-top { display: inline-flex; align-items: center; }
  .nav-top > .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    min-width: 220px;
    padding: 10px;
    border: 1px solid #233277;
    border-radius: 12px;
    background: #0e1849;
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
  }
  .nav-top:hover > .submenu { display: block; }
  .submenu a {
    display: block;
    padding: 8px 10px;
    margin: 2px 0;
    color: #e5e9ff;
    text-decoration: none;
    border-radius: 8px;
  }
  .submenu a:hover { background: #16245e; }
}

/* Mobile drawer: stack top-level items and show submenu as inline group */
@media (max-width: 960px){
  .site-nav { display: flex; flex-direction: column; gap: 12px; }
  .nav-top { display: block; }
  .nav-top .submenu { display: block; padding-left: 8px; }
  .nav-top .submenu a { display: block; margin: 4px 0; border: 1px solid #25337a; background: #111a48; border-radius: 8px; padding: 8px 10px; }
}

/* ---- Ensure in-page nav is single-line scrollable on mobile ---- */
.inpage-nav, .page-nav {
  display: flex;
  flex-wrap: nowrap;          /* no wrapping */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;        /* keep links on one line */
}
.inpage-nav a, .page-nav a { flex: 0 0 auto; }

/* ---- Remove any default white borders for images in cards ---- */
.card figure:not(.svg-on-white), .card figure:not(.svg-on-white) > img {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* === Updates per latest request === */

/* Center images within their containers */
figure { display: flex; justify-content: center; align-items: center; }
figure > img { display: block; max-width: 100%; height: auto; margin: 0 auto; }

/* Only SVG images should have white background */
.svg-on-white {
  background: #ffffff;
  border-radius: 10px;
  padding: 8px;
  border: 1px solid #e7e9ef;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

/* Ensure raster images inside cards never get forced white borders/backgrounds */
.card figure:not(.svg-on-white),
.card figure:not(.svg-on-white) > img {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Keep in-page nav single-line on mobile explicitly */
.inpage-nav, .page-nav { flex-wrap: nowrap; white-space: nowrap; overflow-x: auto; }
.inpage-nav a, .page-nav a { flex: 0 0 auto; }

/* === Mobile header & hamburger compact tweaks === */
@media (max-width: 960px){
  /* Tighter header bar */
  header .nav{
    padding: 6px 0;
    min-height: 48px;
  }
  /* Smaller brand mark */
  .brand img{
    height: 22px;
  }
  /* Compact hamburger without losing tap target */
  .hamburger{
    padding: 4px;
    border-radius: 8px;
    line-height: 1;
  }
  .hamburger svg{
    width: 22px;
    height: 22px;
  }
  /* Reduce drawer internal padding & item spacing */
  .site-nav{
    padding: 12px;
    gap: 10px;
  }
  .nav-top .submenu a{
    padding: 8px 10px;
    margin: 2px 0;
  }
  /* Reduce page-nav stick offset a bit since header is shorter */
  .inpage-nav-wrap, .page-nav-wrap{
    top: 54px;
  }
}

/* === Mobile drawer overlay: prevent layout space reservation === */
@media (max-width: 960px){
  /* Take the drawer completely out of normal flow */
  .site-nav{
    position: fixed !important;
    top: 0; right: 0; bottom: 0; left: auto;
    height: 100dvh;           /* full device viewport height */
    max-height: 100dvh;
    overflow-y: auto;
    transform: translateX(100%);
    will-change: transform;
    /* Do not reserve space when closed */
    visibility: hidden;
    pointer-events: none;
    z-index: 1001;            /* above backdrop */
  }
  .site-nav.open{
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  /* Backdrop sits below the drawer */
  .nav-backdrop{
    z-index: 1000;
  }
}

/* === Anti-blur hardening for mobile drawer === */
@media (max-width: 960px){
  .site-nav{
    z-index: 1100 !important;                 /* above backdrop */
    background: rgba(8,12,32,.98) !important; /* solid background for crisp text */
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .site-nav *{
    filter: none !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .nav-backdrop{
    z-index: 1090 !important;                 /* stay under the drawer */
  }
}

/* If any global blur is applied when the drawer is open, cancel it */
@supports selector(html:has(#site-nav.open)){
  html:has(#site-nav.open),
  body:has(#site-nav.open){
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ===== Reference-aligned body & link styles (copied from reference semantics) ===== */
:root{
  --bg:#070c28;
  --panel:#0b143c;
  --panel-2:#0a133a;
  --fg:#f5f7ff;
  --muted:#c9cde6;
  --accent:#2b6cff;
  --accent-2:#5aa2ff;
  --border:#1e2a66;
}

/* Base text */
html, body{
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui,-apple-system,Segoe UI,Inter,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  line-height: 1.6;
}

/* Headings to mirror reference sizing */
h1{ margin:.2rem 0 1rem; font-size: clamp(28px,3.2vw,40px); }
h2{ font-size: clamp(22px,2.3vw,28px); margin:0 0 12px; }
h3{ font-size: 18px; margin:0 0 8px; }
p { margin: .5rem 0; }

/* Links: default/hover/visited/active */
a{
  color: var(--accent);
  text-decoration: none;
}
a:hover{ text-decoration: underline; }
a:visited{ color: var(--accent-2); }
a:active{ color: #1f5ae6; }

/* Small text color */
.small{ color: var(--muted); font-size:.94rem; }

/* Section rhythm and borders like reference */
section{ padding: 44px 0; border-top: 1px solid var(--border); }

/* Buttons similar to reference look */
.btn{
  border:1px solid var(--border);
  border-radius:12px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  color: var(--fg);
  font-weight:600;
}
.btn.primary{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border: none;
  color: #fff;
}

/* Cards similar to reference look */
.card{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
}

/* Figures / images: center and keep existing rules */
figure{ margin:16px 0; display:flex; justify-content:center; align-items:center; }
.imgWide{ width:100%; max-width:800px; height:auto; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.25); }
/* Only SVG on white tile */
.svg-on-white{ background:#fff; border:1px solid var(--border); border-radius:10px; padding:8px; }
.card figure:not(.svg-on-white), .card figure:not(.svg-on-white) > img{ background:transparent !important; border:none !important; box-shadow:none !important; }

/* Notice box like reference */
.notice{ padding:12px 14px; border:1px dashed var(--border); border-radius:12px; background:#0a1336; color:#dfe4ff; }

/* Specs table like reference */
.specs table{ width:100%; border-collapse:collapse; border:1px solid var(--border); }
.specs th, .specs td{ padding:10px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
.specs th{ width:30%; color:#cfd5ff; }

/* Grids spacing mirrors reference */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:960px){
  .grid-2, .grid-3{ grid-template-columns:1fr; }
}

/* === Header logo visibility on dark background ===
   Convert black strokes/fills in the external SVG to white via CSS filter.
   Scoped ONLY to the header brand logo; won't affect other SVGs.
*/

/* If the page ever uses a light header, disable the inversion */

/* Force white tile for SVGs even inside cards (override any previous !important) */
.card figure.svg-on-white{
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
  border-radius: 10px !important;
  padding: 8px !important;
}

/* === Header logo: use native colors from the SVG (no filters) === */
header .brand img[src$="logo-floogoo.svg"]{
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* === Taller relay card & larger SVG rendering (no distortion) === */
.card--relay{
                 /* desktop baseline */
  display: flex;
  align-items: center;
  justify-content: center;
}
.card--relay figure{
  width: 100%;
  
  display: flex;
  align-items: center;
  justify-content: center;
}
.card--relay figure > img{
  width: 100%;
  height: 100%;
  max-width: 900px;                /* allow bigger than default */
  object-fit: contain;             /* scale without distortion */
}

/* Mobile / narrow screens: slightly smaller but still larger than before */
@media (max-width: 960px){
  .card--relay{
    
  }
  .card--relay figure{
    
  }
}

/* === Relay SVG no-clip & wider layout === */
/* Make the relay card span full width on desktop (if inside a 2-col grid) */
@media (min-width: 961px){
  .grid-2 .card--relay { grid-column: 1 / -1; }
}

/* Prevent horizontal clipping: fit inside both width & height */
.card--relay figure{
  overflow: visible;            /* don't hide edges */
}
.card--relay figure > img{
  width: 100%;                  /* fit card width */
  height: auto;                 /* maintain aspect by height */
  max-height: 100%;             /* respect card height */
  object-fit: contain;          /* no distortion, no crop */
}

/* === Keep relay card in the same row (cancel full-width span) === */
@media (min-width: 961px){
  .grid-2 .card--relay { grid-column: auto; }  /* revert previous 1/-1 */
}

/* === Compact relay card heights === */
.card--relay{
  /* Previously 520px min-height — too tall. Make it responsive and smaller. */
  min-height: clamp(260px, 38vh, 360px);
}
.card--relay figure{
  min-height: clamp(220px, 32vh, 300px);
}

/* Mobile tweaks */
@media (max-width: 960px){
  .card--relay{ min-height: clamp(220px, 34vh, 320px); }
  .card--relay figure{ min-height: clamp(200px, 30vh, 280px); }
}

/* === Force compact relay card & image size (strong overrides) === */
.card.card--relay{ min-height: auto !important; }
.card.card--relay figure{ min-height: 0 !important; }
.card.card--relay figure > img{
  max-height: 260px !important;   /* desktop cap */
  width: auto !important;
  height: auto !important;
  margin: 0 auto !important;      /* center */
  object-fit: contain !important;
}
@media (max-width: 960px){
  .card.card--relay figure > img{
    max-height: 200px !important; /* mobile cap */
  }
}

/* === No horizontal clipping for relay.svg === */
.card.card--relay figure{
  overflow: visible !important;   /* never crop the figure content */
}
.card.card--relay figure > img{
  display: block !important;
  width: 100% !important;         /* fit the tile's inner width */
  max-width: 100% !important;     /* never exceed tile width */
  height: auto !important;        /* keep aspect ratio */
  /* keep the compact cap we set earlier */
  max-height: 260px !important;   /* desktop */
  object-fit: contain !important; /* extra safety if UA considers replaced content */
}
@media (max-width: 960px){
  .card.card--relay figure > img{
    max-height: 200px !important; /* mobile */
  }
}

/* === Relay: show full SVG without side crop (height-capped, width auto) === */
.card.card--relay .svg-on-white{
  padding: 0 !important;          /* give the SVG maximum white area */
  overflow: visible !important;    /* tile doesn't clip */
}
.card.card--relay{ overflow: visible !important; } /* ensure card doesn't clip */
.card.card--relay figure{ overflow: visible !important; }
.card.card--relay figure > img{
  height: 260px !important;        /* desktop: cap by height */
  max-height: 260px !important;
  width: auto !important;          /* compute width from height so it never overflows horizontally */
  max-width: 100% !important;      /* still respect container width if very wide */
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}
@media (max-width: 960px){
  .card.card--relay figure > img{
    height: 200px !important;      /* mobile cap */
    max-height: 200px !important;
  }
}

/* === Logo 2× size & header spacing === */
/* Desktop */
@media (min-width: 961px){
  header .brand img[src$="logo-floogoo.svg"]{
    height: 56px !important;            /* ~2× of typical 28px */
  }
  header .nav{
    min-height: 72px;                   /* make room for larger logo */
    padding: 8px 0;
  }
  .inpage-nav-wrap, .page-nav-wrap{
    top: 80px;                          /* avoid overlap under taller header */
  }
}

/* Mobile */
@media (max-width: 960px){
  header .brand img[src$="logo-floogoo.svg"]{
    height: 44px !important;            /* ~2× of compact 22px */
  }
  header .nav{
    min-height: 64px;                   /* add a bit of space for larger logo */
    padding: 8px 0;
  }
  .inpage-nav-wrap, .page-nav-wrap{
    top: 76px;                          /* keep sticky in-page nav clear of header */
  }
}

/* Minimal: increase gap before "Official Auracast..." (one button row case) */
.hero .btns + @media (max-width: 960px){
  .hero .btns + }

/* Precise: match the base paragraph rhythm (10px) after button rows */
.hero .btns + p.small,

/* In-page nav: add space between buttons (without touching site nav) */

/* Fallback spacing for older engines */

/* Optional: a bit of vertical breathing room if the row wraps */
@media (max-width: 640px){
  
}

/* Precise: match the base paragraph rhythm (10px) after button rows */
.hero .btns + p.small,
.hero .btns + .btns + p.small{
  margin-top: 10px;
}

/* In-page nav: add space between buttons */
.page-nav, .inpage-nav{ gap: 8px; }
.page-nav a, .inpage-nav a{ margin-right: 8px; }
.page-nav a:last-child, .inpage-nav a:last-child{ margin-right: 0; }

/* drawer overlay above everything */


/* === Mobile header fallback (Android only via JS toggle) === */
:root{ --header-h: 72px; }  /* sensible default */

@media (max-width: 960px){
  header.is-fixed{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1003;
  }
  body.has-fixed-header{
    padding-top: var(--header-h);
  }
  /* Keep in-page nav just below the fixed header */
  .page-nav-wrap, .inpage-nav-wrap{
    position: sticky;
    top: var(--header-h);
  }
}


/* === Desktop: ensure site nav dropdown overlays in-page nav === */
@media (min-width: 961px){
  #site-nav{ position: relative; z-index: 1200; }
  #site-nav .submenu{ z-index: 1201; }          /* dropdown list */
  .page-nav-wrap, .inpage-nav-wrap{ z-index: 900; } /* sit below top nav dropdown */
}


/* Avoid scroll chaining to the page when the drawer is open */
#site-nav{ overscroll-behavior: contain; }
#site-nav .backdrop, #site-nav .drawer{
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}


/* Make the hamburger drawer scrollable within the viewport */
#site-nav .drawer{
  max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#site-nav{ overscroll-behavior: contain; }
#site-nav .backdrop{ overscroll-behavior: contain; }

/* iPhone-only: hide the entire header (global nav + in-page nav) on downward scroll */
@media (max-width: 960px){
  body.ios header{
    position: sticky;
    top: 0;
    z-index: 1003;
    will-change: transform;
    transition: transform 200ms ease;
  }
  body.ios.header-hidden header{
    transform: translateY(-100%);
  }
}


/* Android-only (via body.android) — in landscape, fit wrappers to the true viewport width */
@media (orientation: landscape){
  body.android, 
  body.android header.site-header,
  body.android main,
  body.android footer{
    width: var(--vw, 100dvw);
    max-width: var(--vw, 100dvw);
  }
}


/* Android-only (iOS-hide variant): place hamburger to the LEFT of the logo, and open drawer from LEFT */
@media (max-width: 960px){
  body.android header.site-header{ position: sticky; top: 0; z-index: 1003; }
  /* Ensure header is a positioning context */
  body.android header.site-header{ position: sticky; }
  body.android header.site-header .nav-toggle{
    position: absolute;
    left: 12px;
    top: 10px;
  }
  /* Reserve space at left so logo doesn't overlap the hamburger */
  body.android header.site-header{
    padding-left: 56px; /* roughly 40-44px button + gap */
  }
  /* Make the drawer slide from the left on Android */
  body.android .site-nav{
    inset: 0 auto 0 0;           /* left-side sheet */
    transform: translateX(-100%);
  }
  body.android .site-nav.open{
    transform: translateX(0);
  }
}


/* Android-only (iOS-hide variant): FORCE hamburger left & left-side drawer with high specificity */
@media (max-width: 960px){
  /* Put hamburger at left of header, before logo */
  html.android header.site-header, body.android header.site-header{ position: sticky; top:0; z-index:1003; }
  html.android header.site-header .nav-toggle, body.android header.site-header .nav-toggle{
    position: absolute !important;
    left: 12px !important;
    right: auto !important;
    top: 10px !important;
  }
  html.android header.site-header, body.android header.site-header{
    padding-left: 56px !important;
  }

  /* Drawer from LEFT for both #site-nav and .site-nav */
  html.android #site-nav, body.android #site-nav,
  html.android .site-nav, body.android .site-nav{
    left: 0 !important;
    right: auto !important;
    inset: 0 auto 0 0 !important;
    transform: translateX(-100%) !important;
  }
  html.android #site-nav.open, body.android #site-nav.open,
  html.android .site-nav.open, body.android .site-nav.open{
    transform: translateX(0) !important;
  }
}


/* === Android-only: hamburger LEFT of logo; drawer from LEFT; do not push in-page nav === */
@media (max-width: 960px){
  /* Place hamburger at absolute left within the top header bar */
  body.android header.site-header .nav-toggle{
    position: absolute !important;
    left: 12px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1100 !important;
  }
  /* Shift only the logo/brand to create visual space; do not add header padding that could push content below */
  body.android header.site-header .logo,
  body.android header.site-header .brand{
    margin-left: 48px !important;
  }

  /* Ensure the drawer opens from the LEFT and overlays content (no layout shift) */
  body.android #site-nav, body.android .site-nav{
    left: 0 !important;
    right: auto !important;
    inset: 0 auto 0 0 !important;
    transform: translateX(-100%) !important;
    position: fixed !important;   /* overlay */
  }
  body.android #site-nav.open, body.android .site-nav.open{
    transform: translateX(0) !important;
  }
}


/* === Android-only (correct selectors): hamburger LEFT of logo; left-side drawer; no page-nav shift === */
@media (max-width: 960px){
  body.android header.site-header .wrap.nav{ position: relative; }

  /* Place the hamburger button at the absolute left inside the top bar */
  body.android header.site-header .wrap.nav .hamburger{
    position: absolute !important;
    left: 12px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1100 !important;
  }

  /* Nudge only the brand/logo right so it won't overlap; do not pad the whole header */
  body.android header.site-header .wrap.nav .brand{
    margin-left: 48px !important;
  }

  /* Drawer from LEFT (overlay), both #site-nav and .site-nav */
  body.android #site-nav, body.android .site-nav{
    left: 0 !important;
    right: auto !important;
    inset: 0 auto 0 0 !important;
    transform: translateX(-100%) !important;
    position: fixed !important;
  }
  body.android #site-nav.open, body.android .site-nav.open{
    transform: translateX(0) !important;
  }
}


/* === Android-only: keep header aligned to the left edge (no global shift) === */
@media (max-width: 960px){
  /* Ensure the top header row itself is not indented */
  body.android header.site-header,
  body.android header.site-header .wrap.nav{
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  /* Do NOT push the brand/logo to the right; center it naturally without offset */
  body.android header.site-header .wrap.nav .brand{
    margin-left: 0 !important;
  }
  /* Keep the hamburger absolutely at the left without affecting layout */
  body.android header.site-header .wrap.nav .hamburger{
    position: absolute !important;
    left: 12px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1100 !important;
  }
}


/* === Android-only: prevent hamburger from covering the logo (brand-only margin) === */
@media (max-width: 960px){
  body.android header.site-header .wrap.nav .brand{
    margin-left: 48px !important; /* reserve space for the left-anchored hamburger */
  }
}


/* Android-only: hide the entire header on upward swipe (page moves down), show on downward swipe */
@media (max-width: 960px){
  body.android header{
    position: sticky;
    top: 0;
    z-index: 1003;
    will-change: transform;
    transition: transform 200ms ease;
  }
  body.android.header-hidden header{
    transform: translateY(-100%);
  }
}


/* Mobile drawer: allow JS to set a content-fit width; protect against overflow */
@media (max-width: 960px){
  .site-nav{
    max-width: 92vw;
    box-sizing: border-box;
  }
}