/* Page-specific rules for responsible-gambling.html */

.legal-toc-nav a.is-active { color: #CE0608 !important; border-left-color: #CE0608 !important; }

html { scroll-behavior: smooth; }

@media (max-width: 1240px) {
    .header-nav { display: none !important; }
    .hamburger-button { display: flex !important; }
  }

@media (max-width: 768px) {
    .header-cta, .header-cta-primary { display: none !important; }
    .mobile-menu-cta { display: flex !important; }
  }

.rg-tools { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }

.rg-support { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }

@media (max-width: 1200px) { .rg-tools { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } .rg-support { grid-template-columns: 1fr !important; } }

@media (max-width: 520px) { .rg-tools { grid-template-columns: 1fr !important; } }

@media (max-width: 900px) {
    .legal-grid { grid-template-columns: 1fr !important; }
    .legal-grid aside { position:relative !important; top:auto !important; }
    .legal-grid aside nav { flex-direction: row !important; flex-wrap: wrap; border-left:none !important; border-bottom:1px solid rgba(255,255,255,0.1); padding-bottom:8px; }
    .legal-grid aside nav a { border-left:none !important; }
  }

@media (max-width: 960px) {
    .footer-cols { grid-template-columns: 1fr 1fr !important; }
    /* Same unified heading scale as the ≤680px rule below, extended up to
       tablet width so this doesn't jump back to its uncapped 52px between
       681-960px. */
    div.page-hero-content-tall h1 { font-size: clamp(28px, 6.4vw, 44px) !important; }
    /* .rg-heading ("Set your limits before you play." / "Where to get
       help.") and .rg-heading-signs ("Spotting problem gambling.") had no
       override at all, at a fixed 34px — same unified clamp as every other
       heading. */
    .rg-heading, .rg-heading-signs { font-size: clamp(28px, 6.4vw, 44px) !important; }
  }

@media (max-width: 680px) {
    header > div { padding: 0 20px !important; gap: 16px !important; }
    section { padding-left: 20px !important; padding-right: 20px !important; }
    div.page-hero-content-tall { width: calc(100% - 40px) !important; padding: 30px 20px 72px !important; }
    /* Same clamp as the home hero (.hero-grid h1 in index.css) so every
       page's main heading reads the same size on a given phone, instead of
       each page shrinking its own fixed desktop size independently. */
    div.page-hero-content-tall h1 { font-size: clamp(28px, 6.4vw, 44px) !important; }
    .footer-cols { grid-template-columns: 1fr !important; gap: 32px !important; padding: 48px 20px 28px !important; }
    .footer-legal { padding: 48px 20px 28px !important; }
    .rg-tools { grid-template-columns: 1fr !important; }
  }

@media (max-width: 480px) {
    div.page-hero-content-tall h1 { font-size: 34px !important; }
    .rg-heading, .rg-heading-signs { font-size: 34px !important; }
  }