/*
Theme Name: Champions Rise FA
Theme URI: https://championsrisefa.com/
Description: A fully custom WordPress theme for Champions Rise FA — a boys & girls football academy in Ilorin, Kwara State, Nigeria. Bold club-style branding built around the academy crest. No parent theme or page-builder dependency.
Author: Champions Rise FA
Version: 3.3
Text Domain: champions-rise-fa
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ============================================================
   DESIGN TOKENS — "Club Crest"
   Bold, official-academy branding built around the crest: a
   deep green colour band for header/footer, gold as the accent,
   full-bleed tinted hero photography with a large logo lockup —
   in the spirit of official club academy sites.
   ============================================================ */
:root{
  --crfa-ink:        #14140F;
  --crfa-ink-soft:   rgba(20,20,15,.62);
  --crfa-ink-faint:  rgba(20,20,15,.38);
  --crfa-paper:      #FBF9F4;
  --crfa-white:      #FFFFFF;
  --crfa-green:      #12503B; /* primary brand band */
  --crfa-green-deep: #0A3527; /* utility bar / darkest band */
  --crfa-green-light:#1C6B4E; /* hover state on green */
  --crfa-gold:       #F0B429; /* accent — crest gold */
  --crfa-gold-deep:  #C4900E;
  --crfa-line:       rgba(20,20,15,.14);
  --crfa-line-soft:  rgba(20,20,15,.08);
  --crfa-maxw:       1240px;
  --serif:  'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:   'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--sans);
  font-size:16px;
  color: var(--crfa-ink);
  background: var(--crfa-paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family: var(--serif); font-weight:600; line-height:1.08; letter-spacing:-0.01em; margin:0 0 16px; color: var(--crfa-ink); }
ul{ margin:0; padding:0; list-style:none; }
.container{ max-width: var(--crfa-maxw); margin:0 auto; padding: 0 28px; }
.section{ padding: clamp(48px, 7vw, 110px) 0; }
.rule{ border:0; border-top:1px solid var(--crfa-line); margin:0; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link{ position:absolute; left:-9999px; background:var(--crfa-ink); color:#fff; padding:12px 18px; z-index:1000; }
.skip-link:focus{ left:10px; top:10px; }

/* Editorial kicker/eyebrow used throughout instead of pill badges */
.kicker{
  display:flex; align-items:center; gap:10px;
  font-family: var(--sans); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--crfa-green); margin-bottom:16px;
}
.kicker::before{ content:""; width:28px; height:2px; background: var(--crfa-gold); display:inline-block; }
.kicker.on-dark{ color: var(--crfa-paper); }

/* Numbered index labels, e.g. 01 / 02 */
.idx{ font-family: var(--serif); font-size:14px; color: var(--crfa-ink-faint); letter-spacing:.05em; }

/* ============================================================
   BUTTONS — squared-off, hairline, no pill/gradient
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:15px 26px; font-weight:600; font-size:14px; letter-spacing:.02em;
  border:1px solid transparent; border-radius:2px; transition: all .15s ease;
}
.btn-primary{ background: var(--crfa-green); color:#fff; }
.btn-primary:hover{ background: var(--crfa-green-light); }
.btn-line{ background:transparent; border-color: var(--crfa-line); color: var(--crfa-ink); }
.btn-line:hover{ border-color: var(--crfa-ink); }
.btn-line.on-dark{ border-color: rgba(255,255,255,.4); color:#fff; }
.btn-line.on-dark:hover{ border-color:#fff; }
.btn-gold{ background: var(--crfa-gold); color: var(--crfa-ink); }
.btn-gold:hover{ background:#B3860F; }
.btn-arrow::after{ content:"→"; margin-left:2px; }

/* ============================================================
   TOP UTILITY BAR — dark band above the main nav
   ============================================================ */
.crfa-topbar{ background: var(--crfa-green-deep); color: rgba(255,255,255,.75); font-size:12.5px; }
.crfa-topbar .container{ display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; justify-content:space-between; padding-top:9px; padding-bottom:9px; letter-spacing:.02em; }
.crfa-topbar a{ color: rgba(255,255,255,.92); }
.crfa-topbar a:hover{ color: var(--crfa-gold); }
.crfa-topbar-left,.crfa-topbar-right{ display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; }

/* ============================================================
   SITE HEADER / NAV — bold colour band, crest + wordmark lockup
   ============================================================ */
.crfa-header{ background: var(--crfa-green); border-bottom:3px solid var(--crfa-gold); position:sticky; top:0; z-index:100; }
.crfa-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:14px; padding-bottom:14px; }
.crfa-brand{ display:flex; align-items:center; gap:14px; font-family: var(--serif); font-weight:700; font-size:21px; letter-spacing:-0.01em; color:#fff; }
.crfa-brand img{ height:52px; width:auto; }
.crfa-brand .wordmark span{ display:block; font-family: var(--sans); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--crfa-gold); margin-top:2px; }
.crfa-nav ul{ display:flex; gap:22px; align-items:center; }
.crfa-nav a{ font-family: var(--sans); font-weight:700; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color: rgba(255,255,255,.82); border-bottom:2px solid transparent; padding-bottom:4px; }
.crfa-nav a:hover{ color:#fff; border-color: var(--crfa-gold); }
.crfa-nav .cta{ background: var(--crfa-gold); color: var(--crfa-ink); border-radius:999px; padding:10px 20px; border-bottom:none; }
.crfa-nav .cta:hover{ background:#fff; color: var(--crfa-green); }
.crfa-menu-toggle{ display:none; background:none; border:1px solid rgba(255,255,255,.4); color:#fff; border-radius:4px; padding:8px 12px; font-size:18px; }
@media (max-width: 900px){
  .crfa-nav{ display:none; }
  .crfa-menu-toggle{ display:inline-flex; }
  .crfa-header.is-open .crfa-nav{
    display:block; position:absolute; left:0; right:0; top:100%; background: var(--crfa-green);
    border-bottom:1px solid rgba(255,255,255,.15); padding:20px 28px;
  }
  .crfa-header.is-open .crfa-nav ul{ flex-direction:column; align-items:flex-start; gap:18px; }
}

/* ============================================================
   HERO — full-bleed tinted photo, crest lockup, watermark type
   ============================================================ */
.crfa-hero{ position:relative; overflow:hidden; background: var(--crfa-green); color:#fff; }
.crfa-hero-bg{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(10,53,39,.94) 0%, rgba(10,53,39,.86) 42%, rgba(18,80,59,.55) 75%),
    url('assets/images/hero.jpg');
  background-size:cover; background-position:center 22%;
}
.crfa-hero-watermark{
  position:absolute; top:0; right:-4%; bottom:0; width:60%;
  font-family: var(--serif); font-weight:700; font-size:12vw; line-height:.92; color: rgba(255,255,255,.07);
  display:flex; flex-direction:column; justify-content:center; text-align:right; text-transform:uppercase;
  pointer-events:none; user-select:none; white-space:nowrap;
}
.crfa-hero-inner{ position:relative; z-index:2; padding: clamp(48px,7vw,110px) 0 clamp(40px,6vw,70px); }
.crfa-hero-logo{ display:flex; align-items:center; gap:18px; margin-bottom:28px; }
.crfa-hero-logo img{ height:76px; width:auto; }
.crfa-hero-logo .name{ font-family: var(--serif); font-size:20px; font-weight:700; }
.crfa-hero-logo .name span{ display:block; font-family: var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color: var(--crfa-gold); margin-top:3px; }
.crfa-hero h1{ color:#fff; font-size:clamp(38px,5.6vw,68px); max-width:16ch; text-shadow:0 3px 24px rgba(0,0,0,.35); }
.crfa-hero .deck{ font-size:clamp(16px,1.3vw,19px); color:rgba(255,255,255,.82); max-width:56ch; margin-bottom:30px; }
.crfa-hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }
@media (max-width:760px){ .crfa-hero-watermark{ display:none; } }

/* Fact strip beneath the hero — gold band */
.crfa-fact-strip{ background: var(--crfa-gold); color: var(--crfa-ink); }
.crfa-fact-strip .container{ display:grid; grid-template-columns:repeat(3,1fr); }
.crfa-fact{ padding:20px 24px; border-left:1px solid rgba(20,20,15,.18); }
.crfa-fact:first-child{ border-left:none; padding-left:0; }
.crfa-fact .label{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color: rgba(20,20,15,.6); margin-bottom:6px; font-weight:700; }
.crfa-fact .value{ font-family: var(--serif); font-size:19px; font-weight:600; }
@media (max-width:720px){
  .crfa-fact-strip .container{ grid-template-columns:1fr; }
  .crfa-fact{ border-left:none; border-top:1px solid rgba(20,20,15,.18); padding-left:0; }
  .crfa-fact:first-child{ border-top:none; }
}

/* ============================================================
   NUMBERED FEATURE LIST — replaces rounded shadow cards
   ============================================================ */
.crfa-feature-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--crfa-line); }
.crfa-feature{ padding:28px 26px 32px 0; border-right:1px solid var(--crfa-line); }
.crfa-feature:last-child{ border-right:none; }
.crfa-feature .idx{ display:block; margin-bottom:18px; }
.crfa-feature h3{ font-size:19px; margin-bottom:8px; }
.crfa-feature p{ margin:0; color: var(--crfa-ink-soft); font-size:14.5px; }
@media (max-width:960px){ .crfa-feature-list{ grid-template-columns:repeat(2,1fr);} .crfa-feature:nth-child(2){ border-right:none;} }
@media (max-width:560px){ .crfa-feature-list{ grid-template-columns:1fr;} .crfa-feature{ border-right:none !important; border-bottom:1px solid var(--crfa-line);} }

/* ============================================================
   FULL-BLEED BANNER PHOTO
   ============================================================ */
.crfa-banner-strip{ line-height:0; }
.crfa-banner-strip img{ width:100%; height:auto; object-fit:cover; filter:grayscale(.15); }

/* ============================================================
   AGE-GROUP INDEX — editorial table-of-contents style rail
   ============================================================ */
.crfa-toc{ border-top:1px solid var(--crfa-line); }
.crfa-toc-row{ display:grid; grid-template-columns: 90px 1fr 2fr; gap:24px; align-items:baseline; padding:22px 0; border-bottom:1px solid var(--crfa-line); }
.crfa-toc-row .idx{ font-size:15px; }
.crfa-toc-row h4{ font-size:20px; margin:0; }
.crfa-toc-row p{ margin:0; color: var(--crfa-ink-soft); font-size:14.5px; max-width:48ch; }
@media (max-width:700px){ .crfa-toc-row{ grid-template-columns:1fr; gap:6px; } }

/* ============================================================
   CTA BAND — dark, quiet, typographic
   ============================================================ */
.crfa-cta-band{ background: var(--crfa-green-deep); color: var(--crfa-paper); padding: clamp(40px,6vw,80px) 0; text-align:left; }
.crfa-cta-band .container{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:28px; }
.crfa-cta-band h2{ color: var(--crfa-paper); font-size:clamp(28px,3.4vw,44px); max-width:16ch; margin:0; }
.crfa-cta-band p{ color: rgba(251,249,244,.65); max-width:44ch; margin:10px 0 0; }

/* ============================================================
   GENERIC PAGE / POST CONTENT
   ============================================================ */
.crfa-page-header{ padding: 48px 0 20px; border-bottom:1px solid var(--crfa-line); }
.crfa-page-header .kicker{ margin-bottom:14px; }
.crfa-page-header h1{ font-size:clamp(32px,4vw,48px); }
.crfa-content{ padding: clamp(30px,4vw,50px) 0; max-width:74ch; }
.crfa-content h2{ font-size:26px; margin-top:34px; }
.crfa-content p{ margin:0 0 18px; color: var(--crfa-ink-soft); }
.crfa-content img{ margin:22px 0; }

.crfa-post-list{ border-top:1px solid var(--crfa-line); }
.crfa-post-card{ padding:30px 0; border-bottom:1px solid var(--crfa-line); }
.crfa-post-card .meta{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color: var(--crfa-ink-faint); margin-bottom:10px; }
.crfa-post-card h2{ font-size:24px; margin-bottom:10px; }
.crfa-post-card p{ color: var(--crfa-ink-soft); max-width:64ch; }
.crfa-pagination{ display:flex; gap:16px; justify-content:center; margin-top:40px; font-size:13px; text-transform:uppercase; letter-spacing:.06em; }

.crfa-404{ text-align:left; padding: 70px 0; border-top:1px solid var(--crfa-line); }
.crfa-404 .code{ font-family: var(--serif); font-size:clamp(70px,11vw,140px); color: var(--crfa-gold); line-height:1; margin-bottom:10px; }

/* ============================================================
   MOTION — scroll-reveal + hover polish
   ============================================================ */
.reveal{ transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.js .reveal{ opacity:0; transform: translateY(18px); }
.js .reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }

.crfa-card,.crfa-feature,.crfa-post-card,.crfa-news-card,.crfa-faq-item,.crfa-toc-row{ transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.crfa-feature:hover,.crfa-news-card:hover{ transform: translateY(-4px); }
.btn{ transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.btn:active{ transform: translateY(1px); }
a{ transition: color .15s ease; }

/* ============================================================
   ADMISSIONS — dark green band between About and News
   ============================================================ */
.crfa-admissions{ background: var(--crfa-green); color:#fff; padding: clamp(40px,6vw,72px) 0; text-align:center; }
.crfa-admissions h2{ color:#fff; font-size:clamp(26px,3.2vw,40px); max-width:20ch; margin:0 auto 12px; }
.crfa-admissions p{ color:rgba(255,255,255,.82); max-width:56ch; margin:0 auto 26px; }
.crfa-admissions-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ============================================================
   NEWS GRID
   ============================================================ */
.crfa-news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.crfa-news-thumb{ display:block; aspect-ratio: 4/3; overflow:hidden; border:1px solid var(--crfa-line); margin-bottom:14px; }
.crfa-news-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.crfa-news-card:hover .crfa-news-thumb img{ transform: scale(1.04); }
.crfa-news-card .meta{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color: var(--crfa-ink-faint); margin-bottom:6px; }
.crfa-news-card h3{ font-size:18px; margin:0; }
.crfa-news-card h3 a{ color: var(--crfa-ink); }
.crfa-news-card h3 a:hover{ color: var(--crfa-green); }
@media (max-width:860px){ .crfa-news-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .crfa-news-grid{ grid-template-columns:1fr; } }

/* ============================================================
   TABLES (fixtures/results)
   ============================================================ */
.crfa-table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.crfa-table th,.crfa-table td{ padding:14px 12px; text-align:left; border-bottom:1px solid var(--crfa-line); }
.crfa-table thead th{ text-transform:uppercase; font-size:12px; letter-spacing:.08em; color: var(--crfa-ink-faint); font-weight:700; border-bottom:2px solid var(--crfa-ink); }

/* ============================================================
   ABOUT SPLIT — text + pull quote, no photo needed
   ============================================================ */
.crfa-about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.crfa-about-grid h2{ font-size:clamp(28px,3.2vw,40px); max-width:14ch; }
.crfa-about-grid p{ color: var(--crfa-ink-soft); margin-bottom:16px; }
.crfa-pull-quote{ border-left:2px solid var(--crfa-gold); padding-left:22px; font-family: var(--serif); font-size:22px; line-height:1.4; color: var(--crfa-ink); }
.crfa-pull-quote cite{ display:block; font-family: var(--sans); font-style:normal; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color: var(--crfa-ink-faint); margin-top:14px; }
@media (max-width:860px){ .crfa-about-grid{ grid-template-columns:1fr; } }

.crfa-panel-card{ border:1px solid var(--crfa-line); border-radius:8px; padding:26px; }
.crfa-panel-card h3{ font-size:20px; margin-bottom:10px; }
.crfa-panel-card p{ color:var(--crfa-ink-soft); margin-bottom:18px; }
.crfa-panel-card:hover{ border-color: var(--crfa-green); }

/* ============================================================
   PROCESS STEPS — "How Training Works"
   ============================================================ */
.crfa-steps{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--crfa-line); }
.crfa-step{ padding:26px 24px 8px 0; border-right:1px solid var(--crfa-line); position:relative; }
.crfa-step:last-child{ border-right:none; }
.crfa-step .idx{ display:block; margin-bottom:16px; color: var(--crfa-gold); }
.crfa-step h4{ font-size:17px; margin-bottom:6px; }
.crfa-step p{ margin:0; color: var(--crfa-ink-soft); font-size:14px; }
@media (max-width:860px){ .crfa-steps{ grid-template-columns:1fr 1fr; } .crfa-step:nth-child(2){ border-right:none; } .crfa-step{ border-bottom:1px solid var(--crfa-line); } }
@media (max-width:560px){ .crfa-steps{ grid-template-columns:1fr; } .crfa-step{ border-right:none !important; } }

/* ============================================================
   CHECKLIST — what's included
   ============================================================ */
.crfa-checklist{ display:grid; grid-template-columns:1fr 1fr; gap:16px 40px; }
.crfa-checklist li{ display:flex; gap:14px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--crfa-line); }
.crfa-checklist li::before{ content:"✓"; color: var(--crfa-green); font-weight:700; }
@media (max-width:700px){ .crfa-checklist{ grid-template-columns:1fr; } }

/* ============================================================
   FAQ
   ============================================================ */
.crfa-faq{ border-top:1px solid var(--crfa-line); }
.crfa-faq-item{ padding:24px 0; border-bottom:1px solid var(--crfa-line); }
.crfa-faq-item h4{ font-size:17px; margin-bottom:8px; }
.crfa-faq-item p{ margin:0; color: var(--crfa-ink-soft); max-width:64ch; }

/* ============================================================
   LOCATION
   ============================================================ */
.crfa-location-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.crfa-location-grid .value{ font-family: var(--serif); font-size:19px; margin-bottom:6px; }
@media (max-width:860px){ .crfa-location-grid{ grid-template-columns:1fr; } }

/* ============================================================
   FOOTER — thin-rule masthead footer
   ============================================================ */
.crfa-footer{ background: var(--crfa-green-deep); color: rgba(251,249,244,.72); padding: 44px 0 20px; margin-top:0; }
.crfa-footer h3{ font-family: var(--serif); color: var(--crfa-paper); font-size:22px; margin-bottom:10px; }
.crfa-footer h4{ color: var(--crfa-paper); font-size:12px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:14px; font-family: var(--sans); }
.crfa-footer a:hover{ color: var(--crfa-gold); }
.crfa-foot-top{ display:grid; grid-template-columns:1.2fr .9fr .9fr; gap:28px; padding-bottom:24px; }
.crfa-foot-brand p{ color:rgba(251,249,244,.6); max-width:34ch; font-size:14px; }
.crfa-foot-col ul{ display:flex; flex-direction:column; gap:9px; }
.crfa-foot-col li{ font-size:13.5px; color:rgba(251,249,244,.68); }
.crfa-foot-col a{ color:rgba(251,249,244,.82); }
@media (max-width:860px){ .crfa-foot-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .crfa-foot-top{ grid-template-columns:1fr; } }
.crfa-foot-bottom{ margin-top:0; padding-top:18px; border-top:1px solid rgba(251,249,244,.14); font-size:12px; color: rgba(251,249,244,.45); letter-spacing:.02em; }

/* ============================================================
   PHOTO GALLERY
   ============================================================ */
.crfa-gallery{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.crfa-gallery a{ display:block; overflow:hidden; border-radius:6px; aspect-ratio: 1 / 1; }
.crfa-gallery img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.crfa-gallery a:hover img{ transform: scale(1.08); }
@media (max-width:760px){ .crfa-gallery{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){ .crfa-gallery{ grid-template-columns:repeat(2,1fr); gap:8px; } }

/* Sticky mobile CTA */
.crfa-mobile-cta{ display:none; }
@media (max-width:640px){
  .crfa-mobile-cta{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:200;
    background: var(--crfa-gold); color: var(--crfa-ink); font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase;
    justify-content:center; padding:16px;
  }
  body{ padding-bottom:52px; }
}