/* ============================================================
   BGS — Global mobile hardening
   Loaded last on every page so it can correct cross-page
   responsiveness issues: horizontal scroll, edge-clipped text,
   overflowing media and tables.
   ============================================================ */

/* 1. Never allow the page to scroll sideways */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* 2. Media never pushes the layout wider than the screen.
   (max-width only — we deliberately do NOT force height:auto,
    so full-bleed cover images/videos keep their sizing.) */
img, svg, video, iframe, canvas {
  max-width: 100%;
}

/* 3. Long unbreakable strings (URLs, codes) wrap instead of
   stretching the page. */
p, li, a, span, h1, h2, h3, h4, h5, h6, blockquote, figcaption, label, td, th {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* 4. Wide tables scroll inside their own box, not the page. */
table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 5a. Tablet + mobile: footer-links must wrap — at 900px the footer-inner
   becomes a centered column, so a single flex row of 7 links overflows
   the viewport and gets clipped from both sides. */
@media (max-width: 900px) {
  .footer-links {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem 1.25rem !important;
  }
}

/* 5. Mobile: release any "nowrap" headings that get clipped at
   the screen edges, fix footer and ticker padding. */
@media (max-width: 600px) {
  .section-title,
  .page-title,
  .gateway-title,
  .content-h2,
  .section-h2,
  .featured-title,
  .marquee-title,
  .apply-heading,
  h1, h2, h3 {
    white-space: normal !important;
  }

  /* Footer padding was 3rem 4rem (64px sides) — far too wide on 390px,
     leaving only ~262px for content. Tighten to match section padding. */
  footer {
    padding: 2.5rem 1.25rem !important;
  }

  /* Footer links were a horizontal flex with 2rem gaps — wrap them
     and tighten the gap so they don't overflow on narrow screens. */
  .footer-links {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.75rem 1.25rem !important;
  }

  /* Ticker spans had 2rem (32px) padding each side. On a 390px screen
     this crushed the visible text area and extended the animation past
     the viewport edge. Halve it on mobile. */
  .divider-ticker span {
    padding: 0 1rem !important;
  }

  /* Guard against horizontal bleed from absolutely-positioned decorative
     elements on very small screens. */
  .hero-scroll { display: none !important; }
}

/* 6. Cookie banner: stack actions vertically on very narrow screens so
   the Accept / Decline buttons don't overflow. */
@media (max-width: 480px) {
  #cookieBanner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
    padding: 1.25rem 1.25rem !important;
  }
  #cookieBanner > div:last-child {
    display: flex !important;
    gap: 0.75rem !important;
  }
}

/* 7. Very narrow phones (≤380px): trim oversized display type
   so big headlines don't run off the edge. */
@media (max-width: 380px) {
  .page-title { font-size: clamp(40px, 13vw, 52px) !important; }
  .hero-h1 { font-size: clamp(38px, 12vw, 52px) !important; }
}