/* ==========================================================================
   Sporty theme, public pages
   --------------------------------------------------------------------------
   The app pages get it from sporty.css; this file is its counterpart for
   pages outside the app layout: the platform's own landing, sign-in and
   marketing pages, club websites and tournament sites. Loaded through
   templates/partials/sporty_public.html, which also sets html.sx-public.

   sporty-public.js does the part CSS cannot: it finds the page's coloured
   bands (heroes, banners, full-page gradients) and repaints them as the
   dark sporty band, using the page's own brand colour as the accent.
   --sx-pub-accent is set by that script (club colour on club sites).
   ========================================================================== */

html.sx-public {
    --sx-pub-accent: #10b981;
    --sx-pub-ink: #0f172a;
    --sx-pub-ink-2: #1e293b;
}

/* Display type: heavy, italic, tight. */
html.sx-public h1, html.sx-public .h1,
html.sx-public h2, html.sx-public .h2 {
    font-weight: 900 !important;
    font-style: italic;
    letter-spacing: -.02em;
}
html.sx-public h3, html.sx-public .h3,
html.sx-public h4, html.sx-public .h4 { font-weight: 800; letter-spacing: -.01em; }

/* Buttons: chunky, uppercase. Colours stay the page's own. */
html.sx-public .btn,
html.sx-public button[type="submit"],
html.sx-public a[class*="btn-"],
html.sx-public a[class*="-btn"],
html.sx-public button[class*="-btn"] {
    border-radius: 10px;
    font-weight: 800 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
}
html.sx-public .btn-lg { padding-top: .8rem; padding-bottom: .8rem; }

/* Forms and cards. */
html.sx-public .form-control,
html.sx-public .form-select,
html.sx-public input[type="text"], html.sx-public input[type="email"],
html.sx-public input[type="password"], html.sx-public input[type="search"],
html.sx-public input[type="tel"], html.sx-public textarea, html.sx-public select { border-radius: 10px; }
html.sx-public label, html.sx-public .form-label { font-weight: 700; }
html.sx-public .card { border-radius: 16px; }

/* Small uppercase labels and badges read like a scoreboard. */
html.sx-public .badge,
html.sx-public [class*="eyebrow"],
html.sx-public [class*="kicker"] {
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* The dark band sporty-public.js paints onto coloured sections. */
.sx-pub-band {
    background-image:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--sx-pub-accent) 38%, transparent) 0%, transparent 55%),
        repeating-linear-gradient(-55deg, rgba(255,255,255,.035) 0 14px, transparent 14px 28px),
        linear-gradient(135deg, var(--sx-pub-ink), var(--sx-pub-ink-2)) !important;
    background-color: var(--sx-pub-ink) !important;
}
.sx-pub-band:not(body) { box-shadow: inset 6px 0 0 var(--sx-pub-accent); }
/* A full-page gradient (sign-in, sign-up): keep it put while the card scrolls. */
body.sx-pub-band { background-attachment: fixed !important; }

/* Gradient text in headlines picks up the accent. */
html.sx-public .sx-pub-band h1 span[class*="gradient"],
html.sx-public .sx-pub-band h1 .text-gradient { filter: saturate(1.2); }

/* Light hero flipped to the dark band: text that sat on it turns light. */
.sx-pub-flip { color: #e2e8f0; }
.sx-pub-on-dark { color: #e2e8f0 !important; }
:is(h1, h2, h3, h4, h5, h6, strong).sx-pub-on-dark { color: #fff !important; }