/* Mobile / responsive layer — loaded on every page */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, iframe, video { max-width: 100%; }

/* Mobile nav chrome (injected by mobile-nav.js) */
#vs-burger {
  display: none;
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 9998;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  background: #FFFFFF;
  border: 1px solid #EFEBE5;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,30,96,0.10);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
#vs-burger svg { width: 22px; height: 22px; }
#vs-drawer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,30,96,0.35);
  display: none;
}
#vs-drawer.open { display: block; }
#vs-drawer-panel {
  background: #FFFFFF;
  max-height: 92vh;
  overflow-y: auto;
  padding: 20px 24px 32px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
#vs-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
}
#vs-drawer-close {
  background: none; border: none; cursor: pointer; padding: 8px; line-height: 0;
}
#vs-drawer-close svg { width: 24px; height: 24px; }
.vs-drawer-item {
  display: block;
  padding: 18px 0;
  font-size: 17px;
  font-weight: 600;
  color: #001E60;
  text-decoration: none;
  border-top: 1px solid #EFEBE5;
}
.vs-drawer-group { border-top: 1px solid #EFEBE5; }
.vs-drawer-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  font-size: 17px;
  font-weight: 600;
  color: #001E60;
  cursor: pointer;
  list-style: none;
}
.vs-drawer-group > summary::-webkit-details-marker { display: none; }
.vs-drawer-group > summary svg { width: 18px; height: 18px; transition: transform 0.2s; flex-shrink: 0; }
.vs-drawer-group[open] > summary svg { transform: rotate(180deg); }
.vs-drawer-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 12px 4px;
}
.vs-drawer-sub a {
  padding: 12px 0;
  font-size: 15px;
  font-weight: 500;
  color: #33456f;
  text-decoration: none;
}
.vs-drawer-cta {
  display: block;
  margin-top: 24px;
  background: #001E60;
  color: #FFFFFF;
  text-align: center;
  padding: 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
}

@media (max-width: 1024px) {
  #vs-burger { display: flex; }
  .hero-endorsements { display: none !important; }
  /* hide the desktop nav pill / inline nav */
  header nav { display: none !important; }
  header nav + * { display: none; }
  header > div > div[style*="border-radius:999px"],
  header > div > div[style*="border-radius: 999px"] { display: none !important; }
  /* keep the logo and burger on one line */
  header > div {
    padding: 14px 18px !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }
  header img { height: 26px !important; }
}

@media (max-width: 1024px) {
  /* suppress any page's own mobile toggle so only the shared burger shows */
  html.vs-shared-nav header button:not(#vs-burger) { display: none !important; }

  /* section padding */
  section { padding-left: 20px !important; padding-right: 20px !important; }

  /* stack every multi-column grid */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns"] > * { min-width: 0; }
  div[style*="aspect-ratio"] { width: 100%; max-width: 100%; }

  /* footer columns stack. React re-serialises inline styles with spaces, so both
     forms are needed or DC pages wrap unevenly instead of stacking. */
  footer > div > div[style*="display:flex"][style*="justify-content:space-between"],
  footer > div > div[style*="display: flex"][style*="justify-content: space-between"] {
    flex-direction: column !important;
    gap: 32px !important;
  }

  /* long-form measure */
  h1 { line-height: 1.05 !important; }
  h2, h3 { text-wrap: pretty; }

  /* embedded forms/videos */
  iframe[src*="typeform"] { height: 560px !important; }
}

@media (max-width: 600px) {
  section { padding-left: 18px !important; padding-right: 18px !important; }
  footer { padding-left: 18px !important; padding-right: 18px !important; }
  /* footer nav links sit at a 17px line box on a phone — too small a tap target,
     especially for this site's older audience. Open the line box to ~31px without
     adding padding (which would disturb the flex `gap` rhythm). Scoped by colour so
     the social icon circles and logo link are untouched. Three forms needed: the
     authored hex, React's spaced hex, and React's rgb() re-serialisation on DC pages. */
  footer a[style*="color:#33456f"],
  footer a[style*="color: #33456f"],
  footer a[style*="color: rgb(51, 69, 111)"] { line-height: 2.2 !important; }
  /* heavy desktop padding on guest/character cards and poster panels leaves
     too little measure on a phone — reclaim ~24px of text width each side.
     React re-serialises inline styles with a space, so match both forms. */
  [style*="padding:40px 36px"],
  [style*="padding: 40px 36px"] { padding: 28px 22px !important; }
  [style*="padding:52px 44px"],
  [style*="padding: 52px 44px"] { padding: 34px 24px !important; }
  /* no body text below 12px on a phone — kicker/eyebrow labels are set at 11px inline
     (React re-serialises inline styles with a space, so match both forms) */
  [style*="font-size:11px"],
  [style*="font-size: 11px"] { font-size: 12px !important; }
}


/* tighten pill nav: keep all seven items on one line inside the pill on laptop widths */
@media (min-width: 1025px) and (max-width: 1400px) {
  header nav { gap: 2px !important; }
  header nav .topics-trigger { padding-left: 9px !important; padding-right: 9px !important; font-size: 13.5px !important; }
  header nav > a:last-child { padding-left: 14px !important; padding-right: 14px !important; }
}
@media (min-width: 1025px) and (max-width: 1180px) {
  header > div { padding-left: 16px !important; padding-right: 16px !important; gap: 12px !important; }
  header nav .topics-trigger { padding-left: 7px !important; padding-right: 7px !important; font-size: 13px !important; }
  header img { height: 28px !important; }
}

/* companion guide buy button: full width on phones */
@media (max-width: 600px) {
  .guide-buy { display: block !important; text-align: center; }
}