/* ============================================================================
   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;
    --ks-ink:          #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);

    --ks-accent-secondary: #1FA9D6;  /* athletic cyan — not corporate blue */
    --public-accent:       #D8232A;  /* warmer red */

    --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 Club Manager" 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 — ink surface, oversized Anton headline ===== */

.theme-kinetic-sport .public-site-hero {
    background: var(--ks-ink);
    color: var(--ks-text-on-ink);
    padding: 64px 56px 80px;
    text-align: left;
}
.theme-kinetic-sport .public-site-hero--with-image::before {
    background: rgba(0, 0, 0, 0.7);
}
.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-on-ink);
    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-on-ink);
    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 */
.theme-kinetic-sport .public-site-hero--split .public-site-hero__heading {
    font-size: clamp(3rem, 9vw, 8.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 {
    background: var(--ks-bg);
    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);
    border-bottom: 4px solid var(--public-accent);
    padding-bottom: 0.5rem;
    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;
}
.theme-kinetic-sport .public-weekday-card:nth-child(2n) {
    background: var(--ks-accent-secondary);
}
.theme-kinetic-sport .public-weekday-card:nth-child(5n) {
    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);
    /* Section already has 120px 56px padding from the section base; full-bleed by
       neutralising its max-width and stretching to the viewport edges. */
    max-width: none;
    padding: 120px 56px;
    position: relative;
    overflow: hidden;
}

/* The decorative background letter — a giant Anton version of the section heading
   bleeding off the bottom-left corner at low opacity. Pointer-events disabled so
   it doesn't intercept clicks on content above it. */
.theme-kinetic-sport .public-contact-section__bg {
    display: block;
    position: absolute;
    left: -30px;
    bottom: -60px;
    font-family: var(--ks-display-font);
    font-size: 360px;
    line-height: 0.85;
    color: var(--public-accent);
    opacity: 0.18;
    pointer-events: none;
    letter-spacing: -8px;
    text-transform: uppercase;
    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 */
.theme-kinetic-sport .public-contact-card {
    display: grid;
    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: 180px 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 Club Manager") */
.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;
}