/*
Theme Name: TAB Signup
Theme URI: https://signup.tab.co.za
Description: Single-page theme for the TAB fixed-odds signup landing. Full-bleed hero with optional overlay marketing copy, registration iframe and legal block below. All visible text, hero images (separate desktop + mobile creatives served via <picture>), iframe heights, hero/legal colours and scrim strength editable via Appearance → Customize. v0.9.5 drops the GTM noscript pixel — Cloudflare's Tag Gateway doesn't proxy ns.html and the registration iframe is JS-driven anyway, so the noscript fallback served no real audience. GTM head loader still routes through the gateway (default /8f1o/, configurable, clears to fall back to googletagmanager.com).
Version: 0.9.5
Author: sportportal
Text Domain: tab-signup
*/

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{margin:0;padding:0;background:#ECF5FF;color:#1a1a1a}
body{font:400 16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* ── HERO ────────────────────────────────────────────────────────────
   Two modes:
   • Image-only (no customizer copy filled): <picture> serves the right
     creative per breakpoint and the image dictates the hero's height at
     its own intrinsic aspect ratio. No scrim, no crop.
   • With copy (.sp-hero--with-copy): image is cover-fit to a min-height
     so overlay text has a predictable area; scrim is layered for legibility.
   ─────────────────────────────────────────────────────────────────── */
.sp-hero{position:relative;width:100%;background:#0b0b0b;overflow:hidden;margin:0;padding:0}
.sp-hero picture{display:block;width:100%}
.sp-hero-img{display:block;width:100%;height:auto}

.sp-hero--with-copy{min-height:clamp(380px,46vw,620px);display:flex;align-items:flex-end}
.sp-hero--with-copy .sp-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:0}
.sp-hero--with-copy::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.78) 100%);z-index:1;pointer-events:none}
.sp-hero-copy{position:relative;z-index:2;width:100%;max-width:1120px;margin:0 auto;padding:clamp(28px,5vw,70px) clamp(20px,4vw,42px);color:#fff}

/* Transparent click overlay — entire hero scrolls to #signup on click/tap.
   z-index:3 keeps it above the image (0), gradient scrim (1) and copy
   block (2). Visible only via the focus ring when keyboard-navigated. */
.sp-hero-link{position:absolute;inset:0;z-index:3;display:block;cursor:pointer;background:transparent;text-decoration:none;-webkit-tap-highlight-color:rgba(0,169,238,.18)}
.sp-hero-link:focus-visible{outline:3px solid #00A9EE;outline-offset:-6px}
.sp-hero-copy h1{margin:0 0 12px;font:900 clamp(34px,6vw,72px)/1 Arial,Helvetica,sans-serif;color:#fff;letter-spacing:-.02em;text-transform:uppercase;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.sp-hero-copy .lede{margin:0 0 10px;font:700 clamp(18px,2.4vw,28px)/1.2 Arial,Helvetica,sans-serif;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.sp-hero-copy .body{margin:0;font:400 clamp(15px,1.6vw,18px)/1.55 Arial,Helvetica,sans-serif;color:rgba(255,255,255,.95);max-width:740px;text-shadow:0 1px 10px rgba(0,0,0,.5)}

/* ── PAGE BODY ──────────────────────────────────────────────────────── */
.sp-wrap{max-width:1120px;margin:0 auto;padding:0}
.sp-card{background:#ECF5FF;overflow:hidden}

.sp-frame{padding:18px 14px 0;background:#ECF5FF}
.sp-iframe{display:block;width:100%;height:1680px;border:0;background:#ECF5FF}

/* Desktop-only: cap iframe width below Bootstrap's md breakpoint (768px) so
   the embedded TAB registration form's two-column grid collapses to a single
   centered column instead of leaving an empty col-md-2 gutter on the left. */
@media (min-width:783px){
  .sp-iframe{max-width:760px;margin:0 auto}
}

.sp-copy{padding:24px 42px 36px;color:#222}
.sp-copy h2{margin:0 0 8px;font:700 20px/1.3 Arial,Helvetica,sans-serif;color:#1a1a1a}
.sp-copy p{margin:0 0 16px;line-height:1.7;color:#333}

.sp-legal{background:#111;color:#fff;padding:28px 0;text-align:center;width:100%}
.sp-legal-inner{max-width:1120px;margin:0 auto;padding:0 42px}
.sp-legal p{margin:0 0 14px;font-size:15px;line-height:1.65}
.sp-legal strong{font-weight:700}
.sp-legal .links{margin:0}
.sp-legal .links a{color:#fff;text-decoration:underline}
.sp-legal .links span{display:inline-block;padding:0 8px;opacity:.7}

/* ── COMPLIANCE LOGO ROW ────────────────────────────────────────────
   White silhouette by default (filter:brightness(0) invert(1)) so every
   regulator/authority logo reads cleanly on the dark legal footer; on
   hover the filter drops away to reveal the original brand colours.
   Height locked at 50px, width auto — preserves each SVG's intrinsic
   aspect ratio so wordmarks and badges sit consistently on the same
   baseline. Wraps to a centred row on narrow viewports.
   ──────────────────────────────────────────────────────────────────── */
.sp-compliance{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px;margin:6px 0 18px;padding:0}
.sp-compliance a{display:inline-flex;align-items:center;line-height:0}
.sp-compliance img{height:50px;width:auto;display:block;filter:brightness(0) invert(1);transition:filter .3s ease;opacity:1}
/* Hover / keyboard focus: tint logos to #00A9EE (TAB brand cyan-blue).
   CSS filter() can only approximate exact RGB targets; this chain was
   produced by the standard filter-solver algorithm for rgb(0,169,238)
   starting from a brightness(0) black baseline and lands within a couple
   of perceptual units of the target. */
.sp-compliance a:hover img,.sp-compliance a:focus-visible img{filter:brightness(0) saturate(100%) invert(52%) sepia(96%) saturate(2014%) hue-rotate(170deg) brightness(101%) contrast(101%)}

@media (max-width:782px){
  .sp-hero--with-copy{min-height:clamp(440px,90vw,580px)}
  .sp-hero-copy{padding:28px 18px 34px}
  .sp-wrap{max-width:none;padding:0}
  .sp-frame{padding:8px 0 0}
  .sp-iframe{height:1880px}
  .sp-copy{padding:20px 18px 8px}
  .sp-legal{padding:24px 0}
  .sp-legal-inner{padding:0 18px}
  .sp-legal .links span{padding:0 5px}
  .sp-compliance{gap:18px;margin:4px 0 14px}
  .sp-compliance img{height:42px}
}