/* === Satyum Mobile V2 (responsive overlay) === */
:root{--satyum-blue:#1A4E8A;--satyum-saffron:#ff9933;--hdr-h:10vh;--bbar-h:12vh;--safe-top:env(safe-area-inset-top);--safe-bottom:env(safe-area-inset-bottom)}
@media (max-width:360px){:root{--hdr-h:9vh;--bbar-h:11vh}}
@media (min-width:481px) and (max-width:768px){:root{--hdr-h:9vh;--bbar-h:10vh}}
@media (min-width:769px) and (max-width:1024px){:root{--hdr-h:8vh;--bbar-h:9vh}}
@media (min-width:1025px) and (max-width:1400px){:root{--hdr-h:8vh;--bbar-h:8vh}}
@media (max-width: 1200px){
  html,body{height:100%}
  body{padding-top:calc(var(--hdr-h)+var(--safe-top));padding-bottom:calc(var(--bbar-h)+var(--safe-bottom))}
  .sx-mobile-header{position:fixed;inset:0 0 auto 0;height:var(--hdr-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:#fff;border-bottom:1px solid rgba(0,0,0,.06);z-index:9999;padding:0 clamp(8px,2.2vw,16px)}
  .sx-logo{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--satyum-blue);font-size:clamp(16px,2.2vw,20px)}
  .sx-logo .dot{width:clamp(24px,3.5vw,30px);height:clamp(24px,3.5vw,30px);border-radius:999px;background:var(--satyum-blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900}
  .sx-actions{justify-self:center;display:flex;gap:8px}
  .sx-btn{border:1.5px solid var(--satyum-blue);color:var(--satyum-blue);background:#fff;border-radius:999px;padding:6px 10px;font-weight:700;font-size:clamp(11px,2vw,13px)}
  .sx-login{justify-self:end;display:flex;gap:10px;align-items:center}
  .sx-hamburger{border:none;background:transparent;font-size:clamp(20px,2.6vw,24px);line-height:1;color:#222;padding:4px 6px}
  .sx-drawer{position:fixed;top:var(--hdr-h);bottom:0;right:0;width:min(78%,360px);background:#fff;box-shadow:-10px 0 30px rgba(0,0,0,.15);z-index:9998;transform:translateX(100%);transition:transform .25s ease;overflow:auto}
  .sx-drawer.open{transform:translateX(0)}
  .sx-drawer h3{margin:14px 14px 8px;font-size:16px;color:#333}
  .sx-drawer a{display:block;padding:12px 16px;border-bottom:1px solid rgba(0,0,0,.06);color:#0a0a0a;text-decoration:none;font-weight:600}
  .sx-bottom-bar{position:fixed;left:0;right:0;bottom:0;height:var(--bbar-h);background:#fff;border-top:1px solid rgba(0,0,0,.06);z-index:9998;display:flex;align-items:center;gap:10px;padding:8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sx-bottom-bar a{white-space:nowrap;border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:8px 12px;text-decoration:none;color:#222;font-weight:600;font-size:13px}
  .sx-votes-pill{position:sticky;bottom:calc(var(--bbar-h) + 12px);margin:6px auto;display:inline-flex;gap:8px;align-items:center;background:#fff;border:2px solid var(--satyum-saffron);color:#222;border-radius:999px;padding:6px 12px;font-weight:800;box-shadow:0 6px 18px rgba(0,0,0,.08)}
  .sx-votes-pill .flame{font-size:18px}
}


/* Hide legacy top header on small screens to avoid double ribbons.
   Adjust selectors if your header uses different class names. */
@media (max-width: 1200px){
  body > header:not(.sx-mobile-header),
  header.site-header,
  .site-header,
  .topbar,
  .header-main { display:none !important; }
}