/* ============================================================================
   theme-kinetic-sport.css — bold athletic theme. Every rule scoped under
   .theme-kinetic-sport so a club picking this template doesn't bleed styling
   into the admin shell or any other public site.

   Tokens + typography + spacing are aligned to the Stockton Aces "Kinetic
   Sport" design system (landing-b.css), with the same layered palette and
   Archivo / Anton / JetBrains Mono type stack.

   Surface tokens:
     --ks-bg / paper     warm cream — page body
     --ks-bg-strip       slightly off-white nav strip
     --ks-ink            dark sections (hero, contact)
     --ks-card-surface   white cards on cream
   Type tokens:
     --ks-display-font   Anton — section + headline display
     --ks-body-font      Archivo — paragraphs, buttons
     --ks-mono-font      JetBrains Mono — eyebrows + counters + labels
   ============================================================================ */

/* Themed selection — OS-default blue clashes with the ink+red palette; this
   keeps any text the visitor highlights reading on-theme. */
.theme-kinetic-sport ::selection {
    background: var(--public-accent, #D8232A);
    color: #F4F1EA;
}

.theme-kinetic-sport {
    /* Palette — concrete values from the design system. */
    --ks-bg:           #F4F1EA;  /* paper */
    --ks-bg-strip:     #ffffff;
    /* Dark sections follow the club's brand secondary (= ink), matching Spirit Poster's --sp-ink
       mapping, so a brand-preset swap re-skins the hero/contact surfaces too. Falls back to the
       default ink. */
    --ks-ink:          var(--brand-secondary, #0E1216);
    --ks-card-surface: #ffffff;

    --ks-text:               #0E1216;
    --ks-text-on-ink:        #F4F1EA;
    --ks-text-muted:         #6B7480;  /* cool slate — much closer to design than warm gray */
    --ks-text-muted-on-ink:  rgba(244, 241, 234, 0.78);

    --ks-border:         rgba(0, 0, 0, 0.10);
    --ks-border-strong:  rgba(0, 0, 0, 0.18);
    --ks-border-on-ink:  rgba(244, 241, 234, 0.20);

    /* Secondary accent follows the club's brand accent (= Spirit Poster's --sp-blue). Falls back
       to the default athletic cyan. */
    --ks-accent-secondary: var(--brand-accent, #1FA9D6);  /* athletic cyan — not corporate blue */
    /* The dominant accent (red bands, CTAs, marquee) now follows the club's brand PRIMARY — the shell
       always emits --public-accent = --brand-primary, so a kit swap re-skins it like every other theme.
       The fixed #D8232A override that used to live here locked this theme to one red; it's gone. */

    --ks-display-font: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
    --ks-body-font:    'Archivo', system-ui, sans-serif;
    --ks-mono-font:    'JetBrains Mono', ui-monospace, monospace;

    background: var(--ks-bg);
    color: var(--ks-text);
    font-family: var(--ks-body-font);
    min-height: 100vh;
}

/* Reach the PublicSiteLayout wrapper that's outside the theme class so the
   paper surface flows under the "Powered by My League Hub" footer too. */
.public-site:has(.theme-kinetic-sport) {
    background: #F4F1EA;
}

/* ===== Utility strip — show it on this theme as the design's black info bar ===== */

.theme-kinetic-sport .public-site-util {
    display: block;
    background: var(--ks-ink);
    color: var(--ks-text-on-ink);
}
.theme-kinetic-sport .public-site-util__inner {
    max-width: none;
    padding: 8px 56px;
}
.theme-kinetic-sport .public-site-util__live {
    color: var(--ks-accent-secondary);
}
.theme-kinetic-sport .public-site-util__item {
    color: var(--ks-text-on-ink);
}

/* ===== Header — white strip, dark wordmark + nav ===== */

.theme-kinetic-sport .public-site-header {
    background: var(--ks-bg-strip);
    border-bottom: 1px solid var(--ks-border);
    padding: 20px 0;
}
.theme-kinetic-sport .public-site-header__brand-name {
    font-family: var(--ks-display-font);
    font-size: 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ks-text);
}
.theme-kinetic-sport .public-site-header__brand-tagline {
    font-family: var(--ks-mono-font);
    font-size: 10px;
    color: var(--ks-text-muted);
    letter-spacing: 2px;
    margin-top: 4px;
    text-transform: uppercase;
}

/* Brand-tail (words 3+) gets the same mono treatment as the tagline so a long name
   reads as a single compact wordmark block under the brand mark. */
.theme-kinetic-sport .public-site-header__brand-tail {
    font-family: var(--ks-mono-font);
    font-size: 10px;
    color: var(--ks-text-muted);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 4px;
    line-height: 1;
}

/* Brand mark uses the theme tokens so flipping --public-accent or --ks-ink later
   flows into the mark automatically. */
.theme-kinetic-sport .public-site-header__brand-mark {
    background: var(--ks-ink);
    color: var(--ks-bg);
}
.theme-kinetic-sport .public-site-header__brand-mark::after {
    background: var(--public-accent);
}
.theme-kinetic-sport .public-site-header__nav a {
    color: var(--ks-text);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1.4px;
    font-family: var(--ks-mono-font);
    font-size: 11px;
}
.theme-kinetic-sport .public-site-header__nav a:hover {
    color: var(--public-accent);
}

/* ===== Hero — paper surface, oversized Anton headline =====
   Design landing-b's hero sits on PAPER with an ink headline and a floating photo
   stack on the right (not an ink band). The headline last-word + the right-column
   badge keep the red/cyan pop against the cream. */

.theme-kinetic-sport .public-site-hero {
    background: var(--ks-bg);
    color: var(--ks-text);
    padding: 64px 56px 80px;
    text-align: left;
}
/* Only when an admin sets a full-bleed hero photo do we darken for legibility; the
   default (split) hero has no background image, so it stays clean paper. */
.theme-kinetic-sport .public-site-hero--with-image {
    color: var(--ks-text-on-ink);
}
.theme-kinetic-sport .public-site-hero--with-image::before {
    background: rgba(0, 0, 0, 0.7);
}
.theme-kinetic-sport .public-site-hero--with-image .public-site-hero__heading,
.theme-kinetic-sport .public-site-hero--with-image .public-site-hero__subheading {
    color: var(--ks-text-on-ink);
}
.theme-kinetic-sport .public-site-hero__content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
}
.theme-kinetic-sport .public-site-hero__heading {
    font-family: var(--ks-display-font);
    /* 184px upper bound matches the design's hero-title size. clamp scales fluidly on smaller
       viewports without ever going below a readable display size. */
    font-size: clamp(4rem, 12vw, 11.5rem);
    line-height: 0.86;
    letter-spacing: -2px;
    text-transform: uppercase;
    color: var(--ks-text);
    margin: 0;
    text-wrap: balance;
    /* Display poster type — prevent the text-selection flash on initial paint and on
       casual clicks inside the hero. Headlines aren't usually content the visitor wants
       to copy; the rest of the page stays selectable. */
    user-select: none;
    -webkit-user-select: none;
}
.theme-kinetic-sport .public-site-hero__heading-word {
    display: inline-block;
    margin-right: 22px;
}
.theme-kinetic-sport .public-site-hero__heading-word:last-child {
    color: var(--public-accent);
    margin-right: 0;
}
.theme-kinetic-sport .public-site-hero__subheading {
    margin-top: 24px;
    color: var(--ks-text-muted);
    font-size: 18px;
    line-height: 1.5;
    max-width: 540px;
}

/* Hero CTA — primary button matching the design's ink-on-paper "JOIN TRYOUTS"
   style, except inverted (red on dark hero so it remains the accent). */
.theme-kinetic-sport .public-site-hero__cta {
    border-radius: 0;
    font-family: var(--ks-body-font);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    font-size: 14px;
    padding: 20px 28px;
    margin-top: 36px;
}

/* Hero split layout — keep the headline near the design's 184px even beside the photo
   stack (the prior 8.5rem cap shrank it well below the mock). */
.theme-kinetic-sport .public-site-hero--split .public-site-hero__heading {
    font-size: clamp(3rem, 9vw, 10.5rem);
}
.theme-kinetic-sport .public-hero-event {
    background-color: #161616;
    border-color: var(--ks-border-on-ink);
    color: var(--ks-text-on-ink);
}
.theme-kinetic-sport .public-hero-event__chip-month,
.theme-kinetic-sport .public-hero-event__chip-day {
    font-family: var(--ks-display-font);
}
.theme-kinetic-sport .public-hero-event__chip-day {
    font-size: 2.5rem;
}
.theme-kinetic-sport .public-hero-event__title {
    font-family: var(--ks-display-font);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.theme-kinetic-sport .public-hero-event__meta {
    color: var(--ks-text-muted-on-ink);
}

/* Hero feature panel + brand stamp (legacy fallback when stack mode is disabled) */
.theme-kinetic-sport .public-hero-feature {
    border: 1px solid var(--ks-border-on-ink);
    border-radius: 0;
}
.theme-kinetic-sport .public-hero-feature__stamp {
    font-family: var(--ks-display-font);
    font-size: 2rem;
    letter-spacing: 0.1em;
}

/* Hero stack overrides — set stripes to use theme tokens so the colours stay coherent
   if the palette ever flexes. The badge picks up Anton display for the date number,
   the small card uses the cyan top border the design calls for. */
.theme-kinetic-sport .public-hero-photo {
    background: repeating-linear-gradient(135deg,
                var(--ks-ink) 0 14px,
                color-mix(in srgb, var(--ks-ink) 88%, var(--public-accent)) 14px 28px);
}
.theme-kinetic-sport .public-hero-photo--red {
    background: repeating-linear-gradient(135deg,
                var(--public-accent) 0 14px,
                color-mix(in srgb, var(--public-accent) 88%, black) 14px 28px);
}
.theme-kinetic-sport .public-hero-photo--paper {
    background: repeating-linear-gradient(135deg,
                var(--ks-bg) 0 14px,
                color-mix(in srgb, var(--ks-bg) 94%, black) 14px 28px);
}
.theme-kinetic-sport .public-hero-stack__badge {
    background: var(--public-accent);
    color: var(--ks-text-on-ink);
}
.theme-kinetic-sport .public-hero-stack__badge-num {
    font-family: var(--ks-display-font);
}
.theme-kinetic-sport .public-hero-stack__badge-eyebrow,
.theme-kinetic-sport .public-hero-stack__badge-foot {
    font-family: var(--ks-mono-font);
}
.theme-kinetic-sport .public-hero-stack__card {
    /* White card (not paper) so it reads as the design's floating "next clinic" panel
       against the cream hero, with the cyan top border the mock calls for. */
    background: var(--ks-card-surface);
    color: var(--ks-text);
    border-color: var(--ks-ink);
    border-top-color: var(--ks-accent-secondary);
}
.theme-kinetic-sport .public-hero-stack__card-eyebrow {
    font-family: var(--ks-mono-font);
    color: var(--ks-text-muted);
}
.theme-kinetic-sport .public-hero-stack__card-title {
    font-family: var(--ks-display-font);
    text-transform: uppercase;
}
.theme-kinetic-sport .public-hero-stack__card-sub {
    color: var(--ks-text-muted);
}

/* ===== Marquee — full-bleed red ribbon with display type ===== */

.theme-kinetic-sport .public-marquee {
    background: var(--public-accent);
    color: var(--ks-text-on-ink);
    padding: 18px 0;
    border-top: 1px solid var(--ks-ink);
    border-bottom: 1px solid var(--ks-ink);
}
.theme-kinetic-sport .public-marquee__item {
    font-family: var(--ks-display-font);
    font-size: 56px;
    letter-spacing: 2px;
    line-height: 1;
}
/* Swap the inline · character for the volleyball illustration. color:transparent
   hides the dot glyph while keeping the span in flow; background paints the ball
   at the same footprint the dot would have occupied. */
.theme-kinetic-sport .public-marquee__dot {
    width: 56px;
    height: 56px;
    color: transparent;
    background: url('/img/themes/kinetic-sport/volleyball.png') no-repeat center / contain;
    opacity: 1;
    flex-shrink: 0;
    vertical-align: middle;
}

/* ===== Section titles + lede + intro =====
   Big editorial display type sized to the design system's 108px section heading. */

.theme-kinetic-sport .public-site-section {
    background: transparent;
    color: var(--ks-text);
    max-width: 1240px;
    padding: 120px 56px;
}
.theme-kinetic-sport .public-site-section__title {
    font-family: var(--ks-display-font);
    font-size: clamp(3rem, 8vw, 6.75rem);
    line-height: 0.9;
    letter-spacing: -1px;
    text-transform: uppercase;
    color: var(--ks-text);
    /* No accent underline — the design's GRIT / Clinics / Facilities heads are clean
       Anton; the red lives in the last-word accent + the section content, not a rule
       under every title. */
    margin-bottom: 28px;
}
.theme-kinetic-sport .public-site-section__lede,
.theme-kinetic-sport .public-site-section__intro {
    color: var(--ks-text-muted);
    font-size: 17px;
    line-height: 1.55;
    max-width: 460px;
}
.theme-kinetic-sport .public-site-section__cta {
    border-radius: 0;
    font-family: var(--ks-body-font);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-size: 13px;
    border-width: 1.5px;
    padding: 10px 16px;
}

@media (max-width: 720px) {
    .theme-kinetic-sport .public-site-section {
        padding: 80px 24px;
    }
}

/* ===== Two-column sticky layouts for Values Pillars + Locations + Contact =====
   The section becomes a grid with the meta on the left and the items list on the
   right. Meta is sticky so it stays visible while the eye scans the long list.
   :has() lets us scope this only to sections that carry the matching child class. */

.theme-kinetic-sport .public-site-section:has(.public-pillars),
.theme-kinetic-sport .public-site-section:has(.public-locations),
.theme-kinetic-sport .public-contact-section {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 56px;
    align-items: start;
}

/* Override the base display:contents so the meta wrapper becomes a real grid child
   that can be made sticky. Inside it, the heading/lede/intro/cta stack vertically. */
.theme-kinetic-sport .public-pillars-meta,
.theme-kinetic-sport .public-locations-meta,
.theme-kinetic-sport .public-contact-card-meta {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 24px;
    align-self: start;
}

@media (max-width: 860px) {
    .theme-kinetic-sport .public-site-section:has(.public-pillars),
    .theme-kinetic-sport .public-site-section:has(.public-locations),
    .theme-kinetic-sport .public-contact-section {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .theme-kinetic-sport .public-pillars-meta,
    .theme-kinetic-sport .public-locations-meta,
    .theme-kinetic-sport .public-contact-card-meta {
        position: static;
    }
}

/* ===== Values pillars — letter cycles red → ink → blue → ink ===== */

.theme-kinetic-sport .public-pillars {
    /* Reset counter so each pillar row gets a 01/02/03 mono label via ::before */
    counter-reset: pillar-counter;
}

.theme-kinetic-sport .public-pillars__row {
    counter-increment: pillar-counter;
}

/* Mono "01 / 02 / 03" counter rendered above the value name. Positioned as an
   absolute element inside the row's copy column so it sits flush with the heading. */
.theme-kinetic-sport .public-pillars__row .public-pillars__name::before {
    content: counter(pillar-counter, decimal-leading-zero);
    display: block;
    font-family: var(--ks-mono-font);
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ks-text-muted);
    margin-bottom: 8px;
    -webkit-font-feature-settings: normal;
    font-feature-settings: normal;
}

.theme-kinetic-sport .public-pillars__row {
    grid-template-columns: 140px 1fr;
    border-bottom: 1px solid var(--ks-border);
    border-top: 1px solid transparent;
    padding: 32px 0;
}
.theme-kinetic-sport .public-pillars__row:first-of-type {
    border-top-color: var(--ks-border);
}
.theme-kinetic-sport .public-pillars__letter {
    font-family: var(--ks-display-font);
    font-size: 140px;
    line-height: 0.8;
    letter-spacing: -2px;
}
/* Rotate letter colours so the page reads as a layered system, not a wall of red. */
.theme-kinetic-sport .public-pillars__row:nth-child(4n+1) .public-pillars__letter { color: var(--public-accent); }
.theme-kinetic-sport .public-pillars__row:nth-child(4n+2) .public-pillars__letter { color: var(--ks-ink); }
.theme-kinetic-sport .public-pillars__row:nth-child(4n+3) .public-pillars__letter { color: var(--ks-accent-secondary); }
.theme-kinetic-sport .public-pillars__row:nth-child(4n+4) .public-pillars__letter { color: var(--ks-ink); }

.theme-kinetic-sport .public-pillars__name {
    font-family: var(--ks-display-font);
    font-size: 56px;
    line-height: 1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ks-text);
}
.theme-kinetic-sport .public-pillars__body {
    color: var(--ks-text);
    opacity: 0.78;
    font-size: 16px;
    line-height: 1.55;
    margin: 14px 0 0;
    max-width: 480px;
}
@media (max-width: 540px) {
    .theme-kinetic-sport .public-pillars__row { grid-template-columns: 80px 1fr; }
    .theme-kinetic-sport .public-pillars__letter { font-size: 80px; }
    .theme-kinetic-sport .public-pillars__name { font-size: 32px; }
}

/* ===== Weekday clinics — full-bleed colored blocks, dominant day name ===== */

.theme-kinetic-sport .public-weekday-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
@media (max-width: 860px) {
    .theme-kinetic-sport .public-weekday-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

.theme-kinetic-sport .public-weekday-card {
    /* Whole card becomes the colour — no white body, no separate header strip.
       Day name dominates as a 132px Anton character with the meta floating
       below it; the CTA pins to the bottom via margin-top:auto on the base. */
    background: var(--public-accent);
    color: var(--ks-text-on-ink);
    border: none;
    border-radius: 0;
    padding: 24px;
    min-height: 440px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* Strict odd/even rhythm per the design (MON/WED/FRI red, TUE/THU cyan). The prior
   extra :nth-child(5n) rule re-tinted the 5th card (Friday) cyan, breaking the pattern. */
.theme-kinetic-sport .public-weekday-card:nth-child(2n) {
    background: var(--ks-accent-secondary);
}

/* Day name now lives inline as the card's lead element, not a separate header band. */
.theme-kinetic-sport .public-weekday-card__day {
    background: transparent;
    color: var(--ks-text-on-ink);
    padding: 0;
    font-family: var(--ks-display-font);
    font-size: 132px;
    line-height: 0.85;
    letter-spacing: -1px;
    text-align: left;
    opacity: 0.92;
}
.theme-kinetic-sport .public-weekday-card__time {
    color: var(--ks-text-on-ink);
    font-family: var(--ks-mono-font);
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    opacity: 0.85;
    padding: 18px 0 0;
    text-align: left;
    font-weight: 500;
}
.theme-kinetic-sport .public-weekday-card__title {
    color: var(--ks-text-on-ink);
    font-family: var(--ks-display-font);
    font-size: 22px;
    line-height: 1.05;
    letter-spacing: 0.01em;
    margin: 0;
    padding: 6px 0 0;
    text-align: left;
    text-transform: none;
}
.theme-kinetic-sport .public-weekday-card__details {
    color: var(--ks-text-on-ink);
    opacity: 0.85;
    font-size: 13px;
    line-height: 1.45;
    padding: 4px 0 0;
    text-align: left;
}
.theme-kinetic-sport .public-weekday-card__cta {
    margin-top: auto;
    background: var(--ks-bg);
    color: var(--ks-text);
    border-top: none;
    padding: 12px 14px;
    font-family: var(--ks-body-font);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-align: center;
}
.theme-kinetic-sport .public-weekday-card__cta:hover {
    background: var(--ks-bg-strip);
}

/* ===== Locations — bigger numeric anchors, denser type, 3-column rows ===== */

.theme-kinetic-sport .public-locations__row {
    /* 3-column: num / content / 180px actions — matches the design's facility layout. */
    grid-template-columns: 96px 1fr 180px;
    border-bottom-color: var(--ks-border);
    padding: 28px 0;
}
.theme-kinetic-sport .public-locations__row:first-of-type {
    border-top: 2px solid var(--ks-ink);
}
.theme-kinetic-sport .public-locations__row:last-of-type {
    border-bottom: 2px solid var(--ks-ink);
}
.theme-kinetic-sport .public-locations__index {
    font-family: var(--ks-display-font);
    font-size: 64px;
    line-height: 0.9;
    letter-spacing: 0.5px;
    color: var(--ks-ink);
}
/* First location pops red as the primary facility */
.theme-kinetic-sport .public-locations__row:first-of-type .public-locations__index {
    color: var(--public-accent);
}
.theme-kinetic-sport .public-locations__name {
    font-family: var(--ks-display-font);
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ks-text);
}
.theme-kinetic-sport .public-locations__address {
    font-family: var(--ks-mono-font);
    color: var(--ks-text);
    font-size: 14px;
    margin-top: 12px;
}
.theme-kinetic-sport .public-locations__notes {
    color: var(--ks-text-muted);
    font-size: 14px;
    line-height: 1.55;
    font-style: normal;
    margin-top: 10px;
}
/* Include :link / :visited explicitly so the rule wins against the global
   `.public-site a:link` red color (specificity 0,2,1) which would otherwise force
   the demoted secondary action into the primary red. */
.theme-kinetic-sport .public-locations__map,
.theme-kinetic-sport .public-locations__map:link,
.theme-kinetic-sport .public-locations__map:visited {
    font-family: var(--ks-mono-font);
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ks-text-muted);
}

/* Role kicker above the facility name */
.theme-kinetic-sport .public-locations__role {
    font-family: var(--ks-mono-font);
    color: var(--ks-text-muted);
    font-size: 11px;
    letter-spacing: 1.4px;
}
.theme-kinetic-sport .public-locations__row:first-of-type .public-locations__role {
    color: var(--public-accent);
}

/* Directions button — outlined ink-on-paper, fills on hover. :link/:visited again to
   beat the universal `.public-site a:link` red color. */
.theme-kinetic-sport .public-locations__directions,
.theme-kinetic-sport .public-locations__directions:link,
.theme-kinetic-sport .public-locations__directions:visited {
    background: var(--ks-bg);
    color: var(--ks-ink);
    border: 1.5px solid var(--ks-ink);
    font-family: var(--ks-body-font);
    border-radius: 0;
}
.theme-kinetic-sport .public-locations__directions:hover {
    background: var(--ks-ink);
    color: var(--ks-bg);
}
.theme-kinetic-sport .public-locations__directions:hover * {
    color: var(--ks-bg);
}

@media (max-width: 540px) {
    .theme-kinetic-sport .public-locations__row {
        grid-template-columns: 80px 1fr;
    }
    .theme-kinetic-sport .public-locations__actions {
        grid-column: 1 / -1;
        align-items: flex-start;
    }
    .theme-kinetic-sport .public-locations__index { font-size: 48px; }
    .theme-kinetic-sport .public-locations__name { font-size: 28px; }
}

/* ===== Cards on the cream body — News / Events / Teams / Bento / Gallery / Slideshow ===== */

.theme-kinetic-sport .public-announcement-card,
.theme-kinetic-sport .public-event-card,
.theme-kinetic-sport .public-teams-card,
.theme-kinetic-sport .public-bento__tile,
.theme-kinetic-sport .public-gallery__tile,
.theme-kinetic-sport .public-slideshow__slide {
    background: var(--ks-card-surface);
    border-color: var(--ks-border);
    color: var(--ks-text);
}
.theme-kinetic-sport .public-announcement-card__title,
.theme-kinetic-sport .public-event-card__title,
.theme-kinetic-sport .public-teams-card__name,
.theme-kinetic-sport .public-bento__heading,
.theme-kinetic-sport .public-slideshow__heading {
    color: var(--ks-text);
    font-family: var(--ks-display-font);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.theme-kinetic-sport .public-announcement-card__preview,
.theme-kinetic-sport .public-event-card__meta,
.theme-kinetic-sport .public-teams-card__desc,
.theme-kinetic-sport .public-bento__body,
.theme-kinetic-sport .public-slideshow__body {
    color: var(--ks-text-muted);
}

/* ===== Contact — ink section with giant decorative background letter ===== */

.theme-kinetic-sport .public-contact-section {
    background: var(--ks-ink);
    color: var(--ks-text-on-ink);
    /* Full-bleed ink band: neutralise the base max-width so the background stretches
       edge-to-edge, but cap the INNER content with --cm-edge padding so the two columns
       stay aligned to the same artboard as every other section (instead of sprawling the
       full viewport width). min-height guarantees the band is always taller than the
       decorative backdrop word, so a short card (just Email + Instagram) can't collapse
       and leave the giant letter sliced flush against the footer. */
    max-width: none;
    padding: clamp(72px, 9vw, 120px) var(--cm-edge);
    min-height: 520px;
    position: relative;
    overflow: hidden;
}

/* The decorative backdrop word — a giant Anton rallying word (the club's short name,
   NOT the heading) bleeding off the bottom-left corner at low opacity. font-size is
   clamped to the band so it scales down with the viewport and can never overrun a
   short card. Pointer-events disabled so it doesn't intercept clicks above it. */
.theme-kinetic-sport .public-contact-section__bg {
    display: block;
    position: absolute;
    left: -0.08em;
    bottom: -0.16em;
    max-width: 100%;
    font-family: var(--ks-display-font);
    font-size: clamp(140px, 26vw, 300px);
    line-height: 0.85;
    color: var(--public-accent);
    opacity: 0.15;
    pointer-events: none;
    letter-spacing: -8px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    z-index: 0;
}

/* All real content sits above the background letter */
.theme-kinetic-sport .public-contact-section > *:not(.public-contact-section__bg) {
    position: relative;
    z-index: 1;
}

/* Contact title gets the design's "one word red" treatment via :last-child */
.theme-kinetic-sport .public-contact-section .public-site-section__title {
    color: var(--ks-text-on-ink);
    border-bottom-color: var(--ks-border-on-ink);
}

.theme-kinetic-sport .public-contact-section .public-site-section__lede,
.theme-kinetic-sport .public-contact-section .public-site-section__intro {
    color: var(--ks-text-muted-on-ink);
}

/* Contact items become a stacked label/value list, not a grid of cards. Force a single
   column — without this the card inherits the base auto-fit `minmax(220px, 1fr)` grid, which
   splits the items into 2–3 narrow cells; each item's 180px label then starves its value column,
   wrapping the email/address to many lines and overlapping the next column's label. */
.theme-kinetic-sport .public-contact-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--ks-border-on-ink);
}
.theme-kinetic-sport .public-contact-card__item {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ks-border-on-ink);
    border-radius: 0;
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: baseline;
    padding: 18px 0;
}
.theme-kinetic-sport .public-contact-card__label {
    color: var(--ks-text-muted-on-ink);
    font-family: var(--ks-mono-font);
    font-size: 11px;
    letter-spacing: 1.4px;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0;
}
.theme-kinetic-sport .public-contact-card__value {
    color: var(--ks-text-on-ink);
    font-size: 19px;
    font-weight: 600;
}
.theme-kinetic-sport .public-contact-card__value a {
    color: var(--ks-text-on-ink);
}

.theme-kinetic-sport .public-contact-card__cta {
    background: var(--public-accent);
    color: var(--ks-text-on-ink);
    font-family: var(--ks-body-font);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    padding: 22px 28px;
    border-radius: 0;
    width: 100%;
    justify-content: space-between;
}

@media (max-width: 540px) {
    .theme-kinetic-sport .public-contact-card__item {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* Newsletter signup */
.theme-kinetic-sport .public-newsletter__input {
    background: var(--ks-card-surface);
    border-color: var(--ks-border);
    color: var(--ks-text);
}

/* Outer-layout footer ("Powered by My League Hub") */
.public-site:has(.theme-kinetic-sport) .public-site__footer {
    background: transparent;
    border-top-color: rgba(0, 0, 0, 0.10);
    color: #6B7480;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}