/* Layout fixes shared by every page, loaded from the static <head>.
   The page styles arrive later from <helmet>, so selectors here start with "html body" to win on specificity.
   Inline styles are matched in the browser's normalised form ("display: inline-flex"). */

/* ---------- Header: never wrap; give way step by step as the screen narrows ---------- */
html body header a,
html body header button,
html body header span { white-space: nowrap; }
html body header > div:first-child > * { flex-shrink: 0; }
html body header > div:first-child { gap: 16px; }

/* Wide laptops: drop the secondary text link ("Tell us what…") first */
@media (max-width: 1799px) {
  html body header [data-desktop-cta] { display: none !important; }
}

/* Large monitors with long button labels: slightly tighter menu */
@media (min-width: 1600px) and (max-width: 1999px) {
  html body header nav[aria-label="Main"] > a,
  html body header nav[aria-label="Main"] > button { padding-left: 10px !important; padding-right: 10px !important; }
}

/* Laptops: tighter menu and button */
@media (max-width: 1599px) {
  html body header nav[aria-label="Main"] > a,
  html body header nav[aria-label="Main"] > button { padding: 9px 9px !important; font-size: 14px !important; }
  html body header > div:first-child > div:last-child > a { height: 42px !important; padding: 0 16px !important; font-size: 14px !important; }
}

@media (min-width: 1280px) and (max-width: 1439px) {
  html body header > div:first-child { padding-left: 24px !important; padding-right: 24px !important; }
  html body header nav[aria-label="Main"] > a,
  html body header nav[aria-label="Main"] > button { padding: 8px 6px !important; font-size: 13.5px !important; }
  html body header > div:first-child > a:first-child span { font-size: 17px !important; }
}

/* Small laptops and tablets in landscape: keep the menu, move the button to the sticky bar at the bottom */
@media (min-width: 981px) and (max-width: 1279px) {
  html body header > div:first-child { padding-left: 20px !important; padding-right: 20px !important; }
  html body header nav[aria-label="Main"] > a,
  html body header nav[aria-label="Main"] > button { padding: 8px 7px !important; font-size: 13.5px !important; }
  html body header > div:first-child > div:last-child > a:not([data-desktop-cta]) { display: none !important; }
  html body [data-sticky-cta] { display: block !important; }
  html body { padding-bottom: 78px; }
}
@media (min-width: 981px) and (max-width: 1099px) {
  html body header > div:first-child > a:first-child span { font-size: 17px !important; }
  html body header nav[aria-label="Main"] > a,
  html body header nav[aria-label="Main"] > button { padding: 8px 5px !important; font-size: 13px !important; }
}

/* Phones: logo and menu button only (the sticky bar at the bottom carries the call to action) */
@media (max-width: 560px) {
  html body header > div:first-child { padding-left: 16px !important; padding-right: 16px !important; }
  html body header > div:first-child > div:last-child > a { display: none !important; }
}

/* Main site links added to the mobile menu (hidden where the desktop menu shows) */
html body [data-mobile-site-nav] { display: none; }
@media (max-width: 980px) {
  html body [data-mobile-site-nav] { display: block; }
  /* The open menu lives inside the sticky header: let it scroll on its own instead of running past the screen */
  html body header div:has(> [data-mobile-site-nav]) { max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain; }
}

/* ---------- Content: nothing wider than the screen on phones ---------- */
/* Each page collapses multi-column grids to "1fr" below 981px; "1fr" cannot shrink below its widest
   content, so long lines pushed the column past the screen. minmax(0, 1fr) lets it shrink. */
@media (max-width: 980px) {
  html body [style*="grid-template-columns: repeat"],
  html body [style*="grid-template-columns: minmax"],
  html body [style*="grid-template-columns: 1fr 1fr"],
  html body [style*="grid-template-columns: 1.3fr"],
  html body [style*="grid-template-columns: 300px"],
  html body [style*="grid-template-columns: 320px"] { grid-template-columns: minmax(0, 1fr) !important; }
  html body input, html body select, html body textarea { min-width: 0 !important; max-width: 100%; }
}

@media (max-width: 560px) {
  /* Long call-to-action buttons wrap instead of running off the screen */
  html body section a[style*="display: inline-flex"][style*="height: 4"],
  html body section a[style*="display: inline-flex"][style*="height: 5"],
  html body section button[style*="height: 4"],
  html body section button[style*="height: 5"] {
    white-space: normal !important;
    height: auto !important;
    min-height: 48px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    text-align: center;
    justify-content: center;
    max-width: 100%;
  }
  html body section { overflow-wrap: break-word; }
  html body h1, html body h2, html body h3 { overflow-wrap: break-word; }
  html body img, html body svg { max-width: 100%; }
}

/* Phones: fixed-width tables, switchers and roomy cards */
@media (max-width: 640px) {
  html body [style*="grid-template-columns: 110px"],
  html body [style*="grid-template-columns: 190px"],
  html body [style*="grid-template-columns: 200px"] { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
}
@media (max-width: 560px) {
  /* Pill switchers ("Recommend only | Act with confirmation | …") wrap instead of running off the screen */
  html body section div[style*="display: inline-flex"] { flex-wrap: wrap; max-width: 100%; }
}
@media (max-width: 400px) {
  html body section div[style*="border-radius"][style*="padding: 3"],
  html body section div[style*="border-radius"][style*="padding: 4"] { padding-left: 20px !important; padding-right: 20px !important; }
}

/* Labels set at 10-11px are hard to read on a phone */
@media (max-width: 980px) {
  html body [style*="font: 400 10px"],
  html body [style*="font: 500 10px"],
  html body [style*="font: 600 10px"],
  html body [style*="font: 700 10px"],
  html body [style*="font: 800 10px"],
  html body [style*="font: 400 11px"],
  html body [style*="font: 500 11px"],
  html body [style*="font: 600 11px"],
  html body [style*="font: 700 11px"],
  html body [style*="font: 800 11px"],
  html body [style*="font-size: 10px"], html body [style*="font-size: 11px"] { font-size: 12px !important; }
}