/*
Theme Name:  Sportz Fusion
Theme URI:   https://sportzfusion.com.au
Author:      Community Sports Fusion
Description: Custom theme for Community Sports Fusion — Darwin sports coaching. Homepage + reusable Sport Page template, Events custom post type, ACF-driven content with sensible built-in defaults.
Version:     1.0.4
Requires PHP: 8.2
License:     GNU General Public License v2 or later
Text Domain: sportzfusion
*/

/* All layout/design CSS below is carried over 1:1 from the approved v4
   static design (Sport Fusion/v4/), plus a sport-accent layer at the end. */

    /* ── TOKENS ───────────────────────────────────────────────────── */
    :root {
      --navy:        #0B1F3A;
      --navy-deep:   #060F1D;
      --navy-hover:  #0F2B4A;
      --gold:        #F5A623;
      --gold-dark:   #C97E0F;
      --gold-subtle: rgba(245,166,35,0.1);
      --white:       #FFFFFF;
      --light-bg:    #F4F6FA;
      --text:        #1A1A2E;
      --muted:       #4B5E72;   /* ≥4.5:1 on white */
      --border:      #DDE1E9;
      --radius:      12px;
      --radius-sm:   6px;
      --shadow:      0 4px 24px rgba(11,31,58,0.10);
      --shadow-lg:   0 16px 48px rgba(11,31,58,0.18);
      --t:           0.2s ease;
      --t-slow:      0.35s ease;
    }

    /* ── RESET ────────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-padding-top: 76px; }
    @media (prefers-reduced-motion: no-preference) {
      html { scroll-behavior: smooth; }
    }
    body {
      font-family: 'Inter', 'Segoe UI', sans-serif;
      color: var(--text); background: var(--white);
      line-height: 1.6; -webkit-font-smoothing: antialiased;
    }
    img { display: block; max-width: 100%; }
    a { text-decoration: none; color: inherit; }
    h1,h2,h3,h4 {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 800; letter-spacing: 0.5px;
      text-transform: uppercase; line-height: 1.05; margin-top: 0;
    }
    p { margin-top: 0; }

    /* ── FOCUS ────────────────────────────────────────────────────── */
    :focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 3px;
      border-radius: 3px;
    }

    /* ── SKIP LINK ────────────────────────────────────────────────── */
    .skip-link {
      position: absolute; top: -100%; left: 16px;
      background: var(--gold); color: var(--navy);
      font-weight: 700; font-size: 0.85rem;
      padding: 10px 20px; border-radius: 0 0 8px 8px;
      z-index: 9999; text-transform: uppercase; letter-spacing: 0.5px;
    }
    .skip-link:focus { top: 0; }

    /* ── LAYOUT ───────────────────────────────────────────────────── */
    .cfs-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
    .cfs-section   { padding: 96px 0; }

    /* ── LABELS & BUTTONS ─────────────────────────────────────────── */
    /* Section kicker — line prefix, not floating isolated text */
    .cfs-label {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: 'Inter', sans-serif; font-weight: 600;
      font-size: 0.72rem; letter-spacing: 2px;
      text-transform: uppercase; color: var(--gold); margin-bottom: 14px;
    }
    .cfs-label::before {
      content: ''; display: block; width: 20px; height: 2px;
      background: var(--gold); flex-shrink: 0;
    }
    .cfs-btn {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: 'Inter', sans-serif; font-weight: 700;
      font-size: 0.9rem; letter-spacing: 0.4px;
      text-transform: uppercase; padding: 14px 32px;
      border-radius: var(--radius-sm); border: none;
      cursor: pointer; transition: background var(--t), color var(--t), transform var(--t), box-shadow var(--t);
      min-height: 48px; /* touch target */
    }
    .cfs-btn--gold {
      background: var(--gold); color: var(--navy);
    }
    /* Solid hover — no glow shadow */
    .cfs-btn--gold:hover { background: var(--gold-dark); }
    .cfs-btn--outline-white {
      background: transparent; color: var(--white);
      border: 2px solid rgba(255,255,255,0.65);
    }
    .cfs-btn--outline-white:hover {
      background: var(--white); color: var(--navy);
    }
    @media (prefers-reduced-motion: no-preference) {
      .cfs-btn:hover { transform: translateY(-2px); }
    }

    /* ── NAV ──────────────────────────────────────────────────────── */
    .cfs-header {
      position: sticky; top: 0; z-index: 1000;
      background: var(--navy);
      box-shadow: 0 2px 20px rgba(0,0,0,0.28);
    }
    .cfs-nav-inner {
      display: flex; align-items: center;
      justify-content: space-between;
      height: 76px; gap: 24px;
    }
    .cfs-logo {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900; font-size: 1.35rem;
      letter-spacing: 1px; text-transform: uppercase; color: var(--white);
      flex-shrink: 0;
    }
    .cfs-logo em { color: var(--gold); font-style: normal; }

    .cfs-nav-links {
      display: flex; align-items: center; gap: 4px;
      list-style: none;
    }
    .cfs-nav-links a {
      display: flex; align-items: center;
      font-family: 'Inter', sans-serif; font-weight: 500;
      font-size: 0.88rem; color: rgba(255,255,255,0.82);
      padding: 10px 12px; border-radius: var(--radius-sm);
      min-height: 44px; /* touch target */
      transition: color var(--t), background var(--t);
    }
    .cfs-nav-links a:hover { color: var(--gold); background: rgba(255,255,255,0.05); }
    .cfs-nav-links .cfs-nav-sport { color: rgba(245,166,35,0.8); font-weight: 600; }
    .cfs-nav-links .cfs-nav-sport:hover { color: var(--gold); }
    .cfs-nav-divider {
      width: 1px; height: 20px;
      background: rgba(255,255,255,0.12); margin: 0 4px;
      align-self: center;
    }
    .cfs-nav-cta {
      background: var(--gold) !important; color: var(--navy) !important;
      font-weight: 700 !important; padding: 10px 20px !important;
      border-radius: var(--radius-sm); font-size: 0.82rem !important;
      letter-spacing: 0.4px; text-transform: uppercase;
    }
    .cfs-nav-cta:hover { background: var(--gold-dark) !important; }

    /* ── HAMBURGER ────────────────────────────────────────────────── */
    .cfs-hamburger {
      display: none;
      flex-direction: column; justify-content: center;
      gap: 5px; width: 44px; height: 44px;
      background: none; border: none; cursor: pointer;
      padding: 10px 8px; border-radius: var(--radius-sm);
      transition: background var(--t);
      flex-shrink: 0;
    }
    .cfs-hamburger:hover { background: rgba(255,255,255,0.08); }
    .cfs-hamburger span {
      display: block; height: 2px; background: var(--white);
      border-radius: 2px;
      transition: transform var(--t), opacity var(--t), width var(--t);
      transform-origin: center;
    }
    .cfs-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .cfs-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .cfs-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ── MOBILE MENU ──────────────────────────────────────────────── */
    .cfs-mobile-menu {
      position: fixed; inset: 76px 0 0;
      background: var(--navy-deep);
      z-index: 999;
      display: flex; flex-direction: column;
      padding: 32px 24px 48px;
      overflow-y: auto;
      transform: translateX(100%);
      transition: transform var(--t-slow);
      visibility: hidden;
    }
    .cfs-mobile-menu.is-open {
      transform: translateX(0);
      visibility: visible;
    }
    .cfs-mobile-menu nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
    .cfs-mobile-menu a {
      font-family: 'Inter', sans-serif; font-weight: 600;
      font-size: 1.05rem; color: rgba(255,255,255,0.85);
      padding: 14px 16px; border-radius: var(--radius-sm);
      min-height: 52px; display: flex; align-items: center;
      transition: background var(--t), color var(--t);
    }
    .cfs-mobile-menu a:hover { background: rgba(255,255,255,0.07); color: var(--gold); }
    .cfs-mobile-menu .cfs-mobile-sport { color: rgba(245,166,35,0.85); }
    .cfs-mobile-divider {
      height: 1px; background: rgba(255,255,255,0.08);
      margin: 12px 0;
    }
    .cfs-mobile-cta {
      display: flex; align-items: center; justify-content: center;
      background: var(--gold); color: var(--navy) !important;
      font-weight: 700 !important; font-size: 1rem !important;
      padding: 16px !important; border-radius: var(--radius-sm);
      margin-top: 16px; min-height: 56px;
    }
    .cfs-mobile-cta:hover { background: var(--gold-dark) !important; }

    /* Backdrop */
    .cfs-backdrop {
      position: fixed; inset: 76px 0 0;
      background: rgba(6,15,29,0.6);
      z-index: 998;
      opacity: 0; pointer-events: none;
      transition: opacity var(--t-slow);
    }
    .cfs-backdrop.is-visible { opacity: 1; pointer-events: auto; }

    /* ── HERO SPLIT ───────────────────────────────────────────────── */
    .cfs-hero {
      display: grid; grid-template-columns: 1fr 1fr;
      min-height: 640px;
    }
    .cfs-hero-left {
      background: var(--navy);
      padding: 88px 56px 88px 0;
      display: flex; flex-direction: column; justify-content: center;
      position: relative; overflow: hidden;
    }
    /* Solid gold edge bar — no decorative gradients */
    .cfs-hero-left::after {
      content: ''; position: absolute; right: 0;
      top: 0; height: 100%; width: 4px;
      background: var(--gold);
    }
    .cfs-hero-text {
      max-width: 560px; margin-left: auto;
      padding-left: 24px; position: relative; z-index: 1;
    }
    /* Editorial kicker — no pill badge, no glowing border */
    .cfs-hero-eyebrow {
      display: flex; align-items: center; gap: 12px;
      color: var(--gold);
      font-family: 'Inter', sans-serif; font-size: 0.78rem;
      font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
      margin-bottom: 24px;
    }
    .cfs-hero-eyebrow::before {
      content: ''; display: block; width: 36px; height: 2px;
      background: var(--gold); flex-shrink: 0;
    }
    .cfs-hero-title {
      font-size: clamp(2.8rem, 5vw, 5.5rem);
      line-height: 0.94; color: var(--white); margin-bottom: 0;
    }
    .cfs-hero-title em { color: var(--gold); font-style: normal; display: block; }
    .cfs-hero-sub {
      font-size: 1.02rem; color: rgba(255,255,255,0.75);
      line-height: 1.7; margin-top: 22px; margin-bottom: 36px;
      max-width: 420px;
    }
    .cfs-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
    .cfs-hero-right { position: relative; overflow: hidden; }
    .cfs-hero-right img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: center top; display: block;
    }
    /* Hard edge — no clip-path diagonal */

    /* ── STATS BAR ────────────────────────────────────────────────── */
    .cfs-stats-bar {
      background: var(--navy-deep);
      border-bottom: 3px solid var(--gold);
    }
    .cfs-stats-inner {
      display: flex; align-items: stretch;
      justify-content: space-around; flex-wrap: wrap;
    }
    .cfs-stat {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 28px 20px; gap: 4px; flex: 1;
      border-right: 1px solid rgba(255,255,255,0.06);
      min-width: 130px;
    }
    .cfs-stat:last-child { border-right: none; }
    .cfs-stat-n {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900; font-size: 2.2rem;
      color: var(--gold); line-height: 1;
    }
    .cfs-stat-l {
      font-size: 0.72rem; font-weight: 500;
      color: rgba(255,255,255,0.65); /* ≥4.5:1 on #060F1D */
      text-transform: uppercase; letter-spacing: 1px; text-align: center;
    }

    /* ── ABOUT ────────────────────────────────────────────────────── */
    .cfs-section--about { background: var(--white); }
    .cfs-about-grid { display: grid; gap: 64px; align-items: center; }
    @media (min-width: 900px) { .cfs-about-grid { grid-template-columns: 1fr 1fr; } }
    .cfs-about-text h2 { font-size: clamp(2.4rem, 4vw, 3.4rem); color: var(--navy); margin-bottom: 18px; }
    .cfs-about-text p { font-size: 1rem; color: var(--muted); margin-bottom: 16px; line-height: 1.78; }
    .cfs-quote {
      margin-top: 28px; padding: 22px 28px;
      background: var(--light-bg);
      border-left: 4px solid var(--gold);
      border-radius: 0 var(--radius) var(--radius) 0;
    }
    .cfs-quote p { margin: 0; font-style: italic; font-size: 1.06rem; color: var(--navy); font-weight: 500; line-height: 1.72; }
    .cfs-about-img img {
      width: 100%; height: 460px;
      object-fit: cover; border-radius: var(--radius);
      box-shadow: var(--shadow-lg);
    }

    /* Hard section breaks — dividers removed */

    /* ── COACH ────────────────────────────────────────────────────── */
    .cfs-section--coach { background: var(--light-bg); }
    .cfs-coach-grid { display: grid; gap: 56px; align-items: center; }
    @media (min-width: 900px) { .cfs-coach-grid { grid-template-columns: 360px 1fr; } }
    .cfs-coach-photo { position: relative; }
    .cfs-coach-photo img {
      width: 100%; aspect-ratio: 3/4;
      object-fit: cover; border-radius: var(--radius);
      box-shadow: var(--shadow-lg); display: block;
      position: relative; z-index: 1;
    }
    /* No floating decorative square — photo stands on its own */
    .cfs-coach-name { font-size: clamp(2.6rem, 4vw, 3.8rem); color: var(--navy); margin-bottom: 4px; }
    .cfs-coach-role {
      font-family: 'Inter', sans-serif; font-weight: 700;
      font-size: 0.78rem; letter-spacing: 2px;
      text-transform: uppercase; color: var(--gold); margin-bottom: 24px;
    }
    .cfs-coach-info p { font-size: 1rem; color: var(--muted); line-height: 1.78; margin-bottom: 14px; }
    .cfs-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
    /* Flat tags — no pill shape */
    .cfs-tag {
      background: var(--navy); color: var(--white);
      font-size: 0.75rem; font-weight: 600;
      padding: 5px 12px; border-radius: 4px; letter-spacing: 0.3px;
    }

    /* ── SERVICES ─────────────────────────────────────────────────── */
    .cfs-section--services { background: var(--navy); }
    .cfs-section--services h2 { color: var(--white); font-size: clamp(2.4rem, 4vw, 3.4rem); margin-bottom: 44px; }

    .cfs-featured-card {
      position: relative; border-radius: var(--radius);
      overflow: hidden; min-height: 380px;
      display: flex; align-items: flex-end;
      margin-bottom: 24px;
      box-shadow: var(--shadow-lg);
    }
    .cfs-featured-card img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; z-index: 0;
    }
    .cfs-featured-card::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(6,15,29,0.96) 0%, rgba(6,15,29,0.3) 55%, transparent 100%);
      z-index: 1;
    }
    .cfs-featured-body { position: relative; z-index: 2; padding: 40px; }
    .cfs-featured-body h3 { font-size: 2.1rem; color: var(--white); margin-bottom: 10px; }
    .cfs-featured-body p { color: rgba(255,255,255,0.72); font-size: 1rem; max-width: 500px; line-height: 1.68; margin-bottom: 22px; }

    .cfs-service-grid { display: grid; gap: 20px; }
    @media (min-width: 640px) { .cfs-service-grid { grid-template-columns: 1fr 1fr; } }

    .cfs-service-card {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--radius); padding: 32px 28px;
      transition: background var(--t), border-color var(--t), transform var(--t);
      cursor: default;
    }
    /* No card lift on hover — subtle border shift only */
    .cfs-service-card:hover {
      background: rgba(255,255,255,0.08);
      border-color: rgba(245,166,35,0.5);
    }
    /* Committed service index — no ghost opacity */
    .cfs-service-num {
      font-family: 'Inter', sans-serif;
      font-weight: 700; font-size: 0.68rem;
      color: var(--gold); letter-spacing: 2px;
      text-transform: uppercase; margin-bottom: 12px;
    }
    .cfs-service-card h3 { font-size: 1.35rem; color: var(--white); margin-bottom: 10px; line-height: 1.2; }
    .cfs-service-card p { color: rgba(255,255,255,0.62); font-size: 0.93rem; line-height: 1.68; }

    /* ── SPORTS ───────────────────────────────────────────────────── */
    .cfs-section--sports { background: var(--white); }
    .cfs-section--sports h2 { font-size: clamp(2.4rem, 4vw, 3.4rem); color: var(--navy); margin-bottom: 10px; }
    .cfs-sports-hint { color: var(--muted); font-size: 0.95rem; margin-bottom: 52px; }
    .cfs-sports-hint strong { color: var(--navy); }
    .cfs-sports-hint .hint-desktop { display: inline; }
    .cfs-sports-hint .hint-mobile  { display: none; }

    .cfs-sports-grid { display: grid; gap: 28px; }
    @media (min-width: 768px) { .cfs-sports-grid { grid-template-columns: repeat(2, 1fr); max-width: 860px; } }

    .cfs-sport-wrap {
      position: relative; aspect-ratio: 4/5;
      border-radius: var(--radius); overflow: hidden;
      box-shadow: var(--shadow-lg); background: var(--navy-deep);
      cursor: pointer;
    }
    .cfs-sport-wrap img {
      position: absolute; inset: 0;
      width: 100%; height: 100%; object-fit: cover;
    }
    .cfs-sport-static {
      z-index: 2; opacity: 1;
      transition: opacity 0.35s ease, transform 0.45s ease;
    }
    .cfs-sport-gif {
      z-index: 1; opacity: 0;
      transition: opacity 0.35s ease, transform 0.45s ease;
    }
    /* Desktop hover */
    @media (hover: hover) {
      .cfs-sport-block:hover .cfs-sport-static { opacity: 0; }
      .cfs-sport-block:hover .cfs-sport-gif    { opacity: 1; transform: scale(1.05); }
    }
    /* Mobile tap (JS adds .is-active) */
    .cfs-sport-block.is-active .cfs-sport-static { opacity: 0; }
    .cfs-sport-block.is-active .cfs-sport-gif    { opacity: 1; transform: scale(1.05); }
    @media (prefers-reduced-motion: reduce) {
      .cfs-sport-static, .cfs-sport-gif { transition: none; }
      .cfs-sport-block.is-active .cfs-sport-gif,
      .cfs-sport-block:hover .cfs-sport-gif { transform: none; }
    }

    /* Tap hint overlay */
    /* Flat tap hint — no pill shape */
    .cfs-sport-tap-hint {
      position: absolute; bottom: 52px; left: 16px;
      background: rgba(6,15,29,0.85); color: var(--white);
      font-size: 0.68rem; font-weight: 700; letter-spacing: 1px;
      text-transform: uppercase; padding: 5px 10px;
      border-radius: 3px; z-index: 4;
      white-space: nowrap; pointer-events: none;
      display: none;
    }

    .cfs-sport-badge {
      position: absolute; bottom: 16px; left: 16px;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900; font-size: 1.5rem;
      text-transform: uppercase; color: var(--navy);
      background: var(--gold); padding: 4px 14px;
      border-radius: 4px; z-index: 3; letter-spacing: 1px;
    }
    .cfs-sport-desc { padding: 18px 2px 0; color: var(--muted); font-size: 0.93rem; line-height: 1.68; }

    /* ── EVENTS ───────────────────────────────────────────────────── */
    .cfs-section--events { background: var(--light-bg); }
    .cfs-section--events h2 { font-size: clamp(2.4rem, 4vw, 3.4rem); color: var(--navy); margin-bottom: 10px; }
    .cfs-events-hint { color: var(--muted); font-size: 0.95rem; margin-bottom: 52px; }
    .cfs-events-grid { display: grid; gap: 24px; }
    @media (min-width: 900px) { .cfs-events-grid { grid-template-columns: repeat(3, 1fr); } }
    .cfs-event-card {
      background: var(--white); border-radius: var(--radius);
      box-shadow: var(--shadow); overflow: hidden;
      display: flex; flex-direction: column;
      transition: box-shadow var(--t);
    }
    .cfs-event-card:hover { box-shadow: var(--shadow-lg); }
    .cfs-event-media { aspect-ratio: 16 / 9; overflow: hidden; }
    .cfs-event-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
    .cfs-event-head {
      display: flex; align-items: center; gap: 16px;
      padding: 20px 24px; background: var(--navy);
    }
    .cfs-event-date {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      background: var(--gold); color: var(--navy);
      border-radius: var(--radius-sm); width: 56px; height: 56px; flex-shrink: 0;
    }
    .cfs-event-day { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.5rem; line-height: 1; }
    .cfs-event-month { font-size: 0.62rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
    .cfs-event-head h3 { color: var(--white); font-size: 1.3rem; line-height: 1.15; }
    .cfs-event-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
    .cfs-event-meta {
      font-size: 0.78rem; font-weight: 600; color: var(--gold-dark);
      text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;
    }
    .cfs-event-body p { color: var(--muted); font-size: 0.93rem; line-height: 1.68; margin-bottom: 18px; flex: 1; }
    .cfs-event-link {
      font-weight: 700; font-size: 0.85rem; color: var(--navy);
      text-transform: uppercase; letter-spacing: 0.5px;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .cfs-event-link:hover { color: var(--gold-dark); }
    .cfs-events-see-all { text-align: center; margin-top: 36px; }
    .cfs-events-see-all a { font-weight: 700; color: var(--navy); }
    .cfs-events-see-all a:hover { color: var(--gold-dark); }

    /* ── TESTIMONIALS ─────────────────────────────────────────────── */
    .cfs-section--testimonials { background: var(--gold); padding: 96px 0; }
    .cfs-section--testimonials .cfs-label { color: rgba(11,31,58,0.65); }
    .cfs-section--testimonials h2 { color: var(--navy); font-size: clamp(2.4rem, 4vw, 3.4rem); margin-bottom: 44px; }
    /* Editorial pull-quote layout — no frosted glass, no star SVGs */
    .cfs-testi-grid {
      display: grid; gap: 0;
      border-top: 2px solid rgba(11,31,58,0.25);
    }
    @media (min-width: 768px) {
      .cfs-testi-grid {
        grid-template-columns: repeat(3, 1fr);
        border-top: none;
        border-left: 2px solid rgba(11,31,58,0.25);
      }
    }
    .cfs-testi-card {
      padding: 36px 32px;
      background: none; border: none; border-radius: 0;
      border-bottom: 1px solid rgba(11,31,58,0.18);
    }
    @media (min-width: 768px) {
      .cfs-testi-card {
        border-bottom: none;
        border-right: 1px solid rgba(11,31,58,0.18);
      }
      .cfs-testi-card:last-child { border-right: none; }
    }
    .cfs-testi-text {
      font-size: 1.02rem; color: var(--navy);
      line-height: 1.76; font-style: normal;
      margin-bottom: 24px; font-weight: 400;
    }
    .cfs-testi-text::before { content: '\201C'; }
    .cfs-testi-text::after  { content: '\201D'; }
    .cfs-testi-footer { display: flex; flex-direction: column; gap: 2px; }
    .cfs-testi-author {
      font-weight: 700; font-size: 0.88rem; color: var(--navy);
      text-transform: uppercase; letter-spacing: 0.5px;
    }
    .cfs-testi-loc { font-size: 0.78rem; color: rgba(11,31,58,0.6); }

    /* ── RECOGNITION ──────────────────────────────────────────────── */
    .cfs-section--recognition { padding: 64px 0; text-align: center; }
    .cfs-section--recognition .cfs-label { justify-content: center; margin-bottom: 28px; }
    .cfs-recognition-grid {
      display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
      gap: 48px;
    }
    .cfs-recognition-item {
      display: flex; flex-direction: column; align-items: center;
      max-width: 200px; margin: 0;
    }
    .cfs-recognition-item a { display: block; transition: opacity 0.2s ease; }
    .cfs-recognition-item a:hover { opacity: 0.8; }
    .cfs-recognition-item img {
      height: 130px; width: auto; max-width: 100%; object-fit: contain;
    }
    .cfs-recognition-item figcaption {
      margin-top: 16px; font-size: 0.82rem; line-height: 1.5;
      color: var(--muted); font-weight: 600;
    }

    /* ── CONTACT FORM ─────────────────────────────────────────────── */
    .cfs-section--contact { background: var(--light-bg); }
    .cfs-form-card {
      background: var(--white); border-radius: var(--radius);
      box-shadow: var(--shadow-lg); padding: 60px 48px;
      max-width: 800px; margin: 0 auto;
    }
    .cfs-form-card h2 { font-size: clamp(2rem, 3vw, 3rem); color: var(--navy); margin-bottom: 6px; }
    .cfs-form-sub { color: var(--muted); margin-bottom: 32px; font-size: 1rem; }
    .cfs-form { display: flex; flex-direction: column; gap: 20px; }
    .cfs-form-row { display: grid; gap: 20px; }
    @media (min-width: 480px) { .cfs-form-row { grid-template-columns: 1fr 1fr; } }
    .cfs-form-group { display: flex; flex-direction: column; gap: 6px; }
    .cfs-form-group label {
      font-weight: 700; font-size: 0.78rem;
      color: var(--navy); text-transform: uppercase; letter-spacing: 0.5px;
      display: flex; align-items: center; gap: 4px;
    }
    .cfs-required {
      color: #B91C1C; font-size: 0.9em; line-height: 1;
    }
    .cfs-form-group input,
    .cfs-form-group select,
    .cfs-form-group textarea {
      width: 100%; padding: 13px 17px;
      border: 1.5px solid var(--border); border-radius: 8px;
      font-family: 'Inter', sans-serif; font-size: 1rem;
      color: var(--text); background: var(--white);
      transition: border-color var(--t), box-shadow var(--t);
      min-height: 48px; /* touch target */
    }
    .cfs-form-group textarea { min-height: 120px; resize: vertical; }
    .cfs-form-group input:focus,
    .cfs-form-group select:focus,
    .cfs-form-group textarea:focus {
      outline: none; border-color: var(--gold);
      box-shadow: 0 0 0 4px rgba(245,166,35,0.18);
    }
    .cfs-form-group input.has-error,
    .cfs-form-group select.has-error,
    .cfs-form-group textarea.has-error {
      border-color: #B91C1C;
      box-shadow: 0 0 0 3px rgba(185,28,28,0.12);
    }
    .cfs-field-error {
      font-size: 0.78rem; color: #B91C1C; font-weight: 500;
      display: none; margin-top: 2px;
    }
    .cfs-field-error.visible { display: block; }

    .cfs-form-submit {
      width: 100%; padding: 16px;
      background: var(--gold); color: var(--navy);
      font-family: 'Inter', sans-serif; font-weight: 700;
      font-size: 1rem; letter-spacing: 0.4px;
      text-transform: uppercase; border: none;
      border-radius: 8px; cursor: pointer; min-height: 52px;
      transition: background var(--t), box-shadow var(--t), transform var(--t);
      display: flex; align-items: center; justify-content: center; gap: 10px;
      margin-top: 4px;
    }
    .cfs-form-submit:hover:not(:disabled) { background: var(--gold-dark); }
    @media (prefers-reduced-motion: no-preference) {
      .cfs-form-submit:hover:not(:disabled) { transform: translateY(-2px); }
    }
    .cfs-form-submit:disabled {
      opacity: 0.75; cursor: not-allowed;
    }
    /* Spinner */
    .cfs-spinner {
      width: 18px; height: 18px; border-radius: 50%;
      border: 2px solid rgba(11,31,58,0.25);
      border-top-color: var(--navy);
      display: none;
    }
    @media (prefers-reduced-motion: no-preference) {
      .cfs-spinner { animation: spin 0.7s linear infinite; }
    }
    .cfs-form-submit.loading .cfs-spinner { display: block; }
    .cfs-form-submit.loading .btn-label { opacity: 0; position: absolute; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* WPForms inside the form card — match the .cfs-form-group look above */
    .cfs-form-card div.wpforms-container-full {
      --wpforms-field-border-color: var(--border);
      --wpforms-field-border-radius: 8px;
      --wpforms-field-border-size: 1.5px;
      --wpforms-field-text-color: var(--text);
      --wpforms-field-size-input-height: 48px;
      --wpforms-field-size-font-size: 1rem;
      --wpforms-label-color: var(--navy);
      --wpforms-label-error-color: #B91C1C;
      --wpforms-button-background-color: var(--gold);
      --wpforms-button-text-color: var(--navy);
      --wpforms-button-border-radius: 8px;
      --wpforms-button-size-height: 52px;
      --wpforms-button-size-font-size: 1rem;
      --wpforms-button-border-size: 0px;
      margin: 0;
    }
    .cfs-form-card div.wpforms-container-full .wpforms-form .wpforms-field { padding: 10px 0; }
    .cfs-form-card div.wpforms-container-full .wpforms-form .wpforms-field-medium,
    .cfs-form-card div.wpforms-container-full .wpforms-form .wpforms-field-large { max-width: 100%; }
    .cfs-form-card div.wpforms-container-full .wpforms-form .wpforms-field-label {
      font-weight: 700; font-size: 0.78rem;
      text-transform: uppercase; letter-spacing: 0.5px;
    }
    .cfs-form-card div.wpforms-container-full .wpforms-form .wpforms-required-label { color: #B91C1C; }
    .cfs-form-card div.wpforms-container-full .wpforms-form input:focus,
    .cfs-form-card div.wpforms-container-full .wpforms-form select:focus,
    .cfs-form-card div.wpforms-container-full .wpforms-form textarea:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 4px rgba(245,166,35,0.18);
    }
    .cfs-form-card div.wpforms-container-full .wpforms-form textarea { min-height: 120px; resize: vertical; }
    .cfs-form-card div.wpforms-container-full .wpforms-form .wpforms-submit-container { padding-top: 14px; }
    .cfs-form-card div.wpforms-container-full .wpforms-form button[type=submit] {
      width: 100%; font-family: 'Inter', sans-serif; font-weight: 700;
      letter-spacing: 0.4px; text-transform: uppercase;
      transition: background var(--t), transform var(--t);
    }
    .cfs-form-card div.wpforms-container-full .wpforms-form button[type=submit]:hover {
      background: var(--gold-dark);
    }
    @media (prefers-reduced-motion: no-preference) {
      .cfs-form-card div.wpforms-container-full .wpforms-form button[type=submit]:hover { transform: translateY(-2px); }
    }
    .cfs-form-card div.wpforms-container-full .wpforms-confirmation-container-full {
      background: #ECFDF5; color: #065F46; border: 1px solid #6EE7B7;
      border-radius: 8px; font-weight: 600; font-size: 0.95rem; padding: 16px 20px;
    }

    /* Success / Error banners */
    .cfs-form-result {
      display: none; padding: 16px 20px;
      border-radius: 8px; font-weight: 600; font-size: 0.95rem;
      margin-top: 16px;
    }
    .cfs-form-result.success {
      display: flex; align-items: center; gap: 10px;
      background: #ECFDF5; color: #065F46; border: 1px solid #6EE7B7;
    }
    .cfs-form-result.error {
      display: flex; align-items: center; gap: 10px;
      background: #FEF2F2; color: #991B1B; border: 1px solid #FCA5A5;
    }

    /* ── FOOTER ───────────────────────────────────────────────────── */
    .cfs-footer { background: var(--navy-deep); color: var(--white); padding: 72px 0 32px; }
    .cfs-footer-grid {
      display: grid; gap: 40px;
      margin-bottom: 44px; padding-bottom: 44px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    @media (min-width: 768px) { .cfs-footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
    .cfs-footer-logo {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900; font-size: 1.35rem;
      letter-spacing: 1px; text-transform: uppercase;
      color: var(--white); display: inline-block; margin-bottom: 14px;
    }
    .cfs-footer-logo em { color: var(--gold); font-style: normal; }
    .cfs-footer-desc { color: rgba(255,255,255,0.62); font-size: 0.88rem; line-height: 1.72; max-width: 340px; }
    .cfs-footer-col-title {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.95rem; text-transform: uppercase;
      letter-spacing: 2px; color: var(--gold); margin-bottom: 18px;
    }
    .cfs-footer-links { display: flex; flex-direction: column; gap: 4px; }
    .cfs-footer-links a {
      color: rgba(255,255,255,0.65); font-size: 0.88rem;
      padding: 6px 8px; border-radius: var(--radius-sm);
      min-height: 44px; display: flex; align-items: center;
      transition: color var(--t), padding-left var(--t);
    }
    .cfs-footer-links a:hover { color: var(--gold); padding-left: 12px; }
    .cfs-footer-contact-list { display: flex; flex-direction: column; gap: 10px; }
    .cfs-footer-contact-list p { color: rgba(255,255,255,0.65); font-size: 0.88rem; margin: 0; }
    .cfs-footer-contact-list a { color: var(--gold); }
    .cfs-socials { display: flex; gap: 10px; margin-top: 20px; }
    .cfs-social {
      width: 44px; height: 44px; display: flex;
      align-items: center; justify-content: center;
      background: rgba(255,255,255,0.07); border-radius: 50%;
      color: var(--white); transition: background var(--t), color var(--t), transform var(--t);
    }
    .cfs-social:hover { background: var(--gold); color: var(--navy); }
    @media (prefers-reduced-motion: no-preference) {
      .cfs-social:hover { transform: translateY(-3px); }
    }
    .cfs-footer-bottom {
      display: flex; justify-content: space-between;
      align-items: center; flex-wrap: wrap; gap: 10px;
    }
    .cfs-footer-bottom p { color: rgba(255,255,255,0.58); font-size: 0.8rem; }

    /* ── REDUCED MOTION GLOBAL OVERRIDE ──────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* ── RESPONSIVE ───────────────────────────────────────────────── */
    @media (max-width: 767px) {
      .cfs-hero { grid-template-columns: 1fr; }
      .cfs-hero-left { padding: 64px 0 48px; }
      .cfs-hero-left::after { display: none; }
      .cfs-hero-text { max-width: 100%; margin: 0; padding: 0 24px; }
      .cfs-hero-right { height: 280px; }

      .cfs-nav-links { display: none !important; }
      .cfs-hamburger { display: flex; }

      .cfs-sports-hint .hint-desktop { display: none; }
      .cfs-sports-hint .hint-mobile  { display: inline; }

      .cfs-form-card { padding: 40px 24px; }
      .cfs-coach-photo::after { display: none; }

      .cfs-section { padding: 72px 0; }
    }

    @media (max-width: 480px) {
      .cfs-hero-title { font-size: 2.8rem; }
      .cfs-stats-inner { flex-direction: column; }
      .cfs-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); padding: 20px; }
      .cfs-stat:last-child { border-bottom: none; }
    }

/* ═══════════════════════════════════════════════════════════════════
   SPORT PAGE TEMPLATE (page-templates/template-sport.php)
   The page sets --sport / --sport-dark inline from its Accent fields;
   .sport-scope re-points the shared components at the sport accent.
═══════════════════════════════════════════════════════════════════ */
.sport-scope .cfs-hero-left { background: var(--navy); }
.sport-scope .cfs-hero-left::after { background: var(--sport); }
.sport-scope .cfs-hero-eyebrow { color: var(--sport); }
.sport-scope .cfs-hero-eyebrow::before { background: var(--sport); }
.sport-scope .cfs-hero-title em { color: var(--sport); }
.sport-scope .cfs-stats-bar { border-bottom-color: var(--sport); }
.sport-scope .cfs-stat-n { color: var(--sport); }
.sport-scope .cfs-label { color: var(--sport); }
.sport-scope .cfs-label::before { background: var(--sport); }
.sport-scope .cfs-label--gold { color: var(--gold); }
.sport-scope .cfs-label--gold::before { background: var(--gold); }
.sport-scope .cfs-coach-role { color: var(--sport); }
.sport-scope .cfs-section--contact { background: var(--navy-deep); }

/* Sport-accent button */
.sf-btn--sport { background: var(--sport); color: var(--white); }
.sf-btn--sport:hover { background: var(--sport-dark); color: var(--white); }

/* ── INTRO ─────────────────────────────────────────────────────── */
.sf-section--intro { background: var(--white); }
.sf-intro-grid { display: grid; gap: 64px; align-items: center; }
@media (min-width: 900px) { .sf-intro-grid { grid-template-columns: 1fr 1fr; } }
.sf-intro-text h2 { font-size: clamp(2.4rem, 4vw, 3.4rem); color: var(--navy); margin-bottom: 18px; }
.sf-intro-text p { font-size: 1rem; color: var(--muted); margin-bottom: 16px; line-height: 1.78; }
.sf-intro-img img {
  width: 100%; height: 420px;
  object-fit: cover; border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

/* ── EVENT PROMO BANNER ────────────────────────────────────────── */
.sf-promo { background: var(--navy); border-left: 4px solid var(--gold); }
.sf-promo-inner {
  display: flex; align-items: center; gap: 24px;
  flex-wrap: wrap; padding: 28px 0;
}
.sf-promo-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--gold); color: var(--navy);
  border-radius: var(--radius-sm); width: 56px; height: 56px; flex-shrink: 0;
}
.sf-promo-day { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.5rem; line-height: 1; }
.sf-promo-month { font-size: 0.62rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.sf-promo-text { flex: 1; min-width: 240px; }
.sf-promo-text h3 { color: var(--white); font-size: 1.4rem; margin-bottom: 4px; }
.sf-promo-text p { color: rgba(255,255,255,0.68); font-size: 0.9rem; margin: 0; }
.sf-promo .cfs-btn { flex-shrink: 0; }
.sf-promo-poster {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: var(--radius-sm); flex-shrink: 0;
}
.sf-promo-see-all { text-align: center; padding-bottom: 20px; }
.sf-promo-see-all a { color: rgba(255,255,255,0.72); font-size: 0.85rem; font-weight: 600; }
.sf-promo-see-all a:hover { color: var(--gold); }

/* ── PROGRAMS ──────────────────────────────────────────────────── */
.sf-section--programs { background: var(--light-bg); }
.sf-section--programs h2 { font-size: clamp(2.4rem, 4vw, 3.4rem); color: var(--navy); margin-bottom: 44px; }
.sf-programs-grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .sf-programs-grid { grid-template-columns: repeat(3, 1fr); } }
.sf-program-card {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 36px 28px;
  border-top: 4px solid transparent;
  transition: border-color var(--t), box-shadow var(--t);
  display: flex; flex-direction: column;
}
.sf-program-card:hover { border-top-color: var(--sport); box-shadow: var(--shadow-lg); }
.sf-program-icon { width: 48px; height: 48px; color: var(--sport); margin-bottom: 18px; }
.sf-program-icon svg { width: 100%; height: 100%; }
.sf-program-card h3 { font-size: 1.4rem; color: var(--navy); margin-bottom: 10px; }
.sf-program-card p { font-size: 0.93rem; color: var(--muted); line-height: 1.68; flex-grow: 1; margin-bottom: 20px; }
.sf-program-tag {
  display: inline-block; align-self: flex-start;
  background: color-mix(in srgb, var(--sport) 10%, transparent);
  color: var(--sport-dark);
  font-size: 0.75rem; font-weight: 700;
  padding: 5px 12px; border-radius: 4px; letter-spacing: 0.5px;
}

/* ── SKILLS / WHAT WE COVER ────────────────────────────────────── */
.sf-section--skills { background: var(--navy); }
.sf-section--skills h2 { color: var(--white); font-size: clamp(2.4rem, 4vw, 3.4rem); margin-bottom: 44px; }
.sf-skills-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .sf-skills-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .sf-skills-grid { grid-template-columns: repeat(4, 1fr); } }
.sf-skill-item {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius); padding: 24px 20px;
  transition: background var(--t), border-color var(--t);
}
.sf-skill-item:hover {
  background: rgba(255,255,255,0.08);
  border-color: color-mix(in srgb, var(--sport) 50%, transparent);
}
.sf-skill-num {
  font-family: 'Inter', sans-serif;
  font-weight: 700; font-size: 0.68rem;
  color: var(--sport); letter-spacing: 2px;
  text-transform: uppercase; margin-bottom: 12px;
}
.sf-skill-item h4 { font-size: 1.1rem; color: var(--white); margin-bottom: 6px; }
.sf-skill-item p { font-size: 0.85rem; color: rgba(255,255,255,0.62); line-height: 1.6; }

/* ── GALLERY ───────────────────────────────────────────────────── */
.sf-section--gallery { background: var(--white); }
.sf-section--gallery h2 { font-size: clamp(2.4rem, 4vw, 3.4rem); color: var(--navy); margin-bottom: 36px; }
.sf-gallery-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .sf-gallery-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: 220px 220px; } }
.sf-gallery-item { border-radius: var(--radius); overflow: hidden; position: relative; }
.sf-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
@media (prefers-reduced-motion: no-preference) {
  .sf-gallery-item:hover img { transform: scale(1.05); }
}
.sf-gallery-item--wide { grid-column: span 2; }

/* ── FORM FALLBACK CTA (shown when no form plugin is wired) ───── */
.sf-form-fallback {
  background: var(--light-bg); border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 24px 28px;
}
.sf-form-fallback p { color: var(--muted); margin-bottom: 8px; }
.sf-form-fallback a { color: var(--navy); font-weight: 700; }
.sf-form-fallback a:hover { color: var(--gold-dark); }

/* ── WP DEFAULT CONTENT (index.php fallback) ───────────────────── */
.sf-plain { padding: 140px 0 96px; }
.sf-plain h1 { color: var(--navy); margin-bottom: 24px; }
.sf-plain .cfs-container { max-width: 800px; }

@media (max-width: 767px) {
  .sf-promo-inner { flex-direction: column; align-items: flex-start; }
}

/* ── EVENTS PAGE ──────────────────────────────────────────────── */
.sf-events-hero {
  background: var(--navy); padding: 140px 0 64px;
}
.sf-events-hero .cfs-label { color: var(--gold); }
.sf-events-hero h1 {
  color: var(--white); font-size: clamp(2.4rem, 4vw, 3.4rem); margin: 10px 0 14px;
}
.sf-events-hero-sub {
  color: rgba(255,255,255,0.72); font-size: 1.05rem; max-width: 560px;
}

.sf-events-section { background: var(--white); }
.sf-events-section--current { background: var(--gold-subtle); }
.sf-events-section--past { background: var(--light-bg); }
.sf-events-section h2 { font-size: clamp(2.2rem, 4vw, 3rem); color: var(--navy); margin-bottom: 36px; }

.sf-events-list { display: grid; gap: 28px; }
@media (min-width: 700px) {
  .sf-events-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .sf-events-list:not(.sf-events-list--past) { grid-template-columns: repeat(3, 1fr); }
}

.sf-event-card {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow var(--t);
}
.sf-event-card:hover { box-shadow: var(--shadow-lg); }
.sf-event-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--light-bg); }
.sf-event-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.sf-event-badge {
  position: absolute; bottom: 0; left: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 0.9rem; letter-spacing: 0.6px; text-transform: uppercase;
  padding: 7px 16px; color: var(--white);
  background: var(--navy);
}
.sf-event-badge--current { background: var(--gold); color: var(--navy); }
.sf-event-badge--upcoming { background: var(--navy); }
.sf-event-badge--past { background: rgba(11,31,58,0.7); }
.sf-event-sport-tag {
  position: absolute; top: 14px; right: 14px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.3px;
  padding: 5px 12px; border-radius: 4px;
  background: var(--white); color: var(--navy);
}
.sf-event-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.sf-event-dates {
  font-size: 0.78rem; font-weight: 700; color: var(--gold-dark);
  text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px;
}
.sf-event-card-body h3 { color: var(--navy); font-size: 1.3rem; margin-bottom: 8px; }
.sf-event-meta { color: var(--muted); font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; }
.sf-event-desc { color: var(--muted); font-size: 0.93rem; line-height: 1.68; margin-bottom: 18px; flex: 1; }
.sf-event-register-area { margin-top: auto; }
.sf-event-register-area .sf-admin-note { font-size: 0.78rem; color: var(--muted); margin-top: 10px; }
.sf-events-list--past .sf-event-card { opacity: 0.82; }
.sf-events-list--past .sf-event-card-media { filter: grayscale(0.35); }