/*
Theme Name: CBSA 2026
Theme URI: https://croydonboroughsa.org
Author: Croydon Borough Swimming Association
Description: Custom theme for the Croydon Borough Swimming Association website. Built around the club's galas, results, records and events content.
Version: 1.3
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: cbsa-2026
*/

:root{
  --pool:#005F86;
  --pool-deep:#043A52;
  --cyan:#00C2CB;
  --lane-yellow:#FFC93C;
  --coral:#FF5A5F;
  --teal:#0B8793;
  --violet:#7B5EA7;
  --sunset:#F77F3B;
  --ink:#0A2540;
  --chalk:#F6FAFB;
  --line:rgba(10,37,64,0.10);
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--chalk);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  line-height:1.6;
}

h1,h2,h3,.display{
  font-family:'Archivo Black', sans-serif;
  font-weight:400;
  letter-spacing:-0.01em;
  line-height:1.1;
  margin:0 0 16px;
  color:var(--pool-deep);
}

h4,h5,h6{font-family:'Work Sans',sans-serif; font-weight:800; margin:0 0 12px;}

p{margin:0 0 16px;}

.mono{font-family:'IBM Plex Mono', monospace;}

a{color:var(--pool); text-decoration:underline; text-decoration-color:rgba(0,95,134,0.3);}
a:hover{text-decoration-color:var(--pool);}

img{max-width:100%; height:auto; display:block;}

.container{max-width:1160px; margin:0 auto; padding:0 6vw;}

/* skip to content, accessibility */
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--pool); color:#fff;
  padding:12px 20px; z-index:9999;
}
.skip-link:focus{left:10px; top:10px;}

:focus-visible{outline:3px solid var(--coral); outline-offset:2px;}

/* ---------- lane-rope stripe (signature device) ---------- */
.lane-stripe{
  height:6px;
  border-radius:3px;
  background:repeating-linear-gradient(
    90deg,
    var(--coral) 0 40px,
    var(--lane-yellow) 40px 80px,
    var(--cyan) 80px 120px,
    var(--pool) 120px 160px
  );
}

/* ---------- header ---------- */
.site-header{
  background:var(--chalk);
  padding:20px 6vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
}
.site-branding{
  display:flex;
  align-items:center;
  gap:18px;
  text-decoration:none;
}
.site-branding img,
.site-branding .custom-logo{max-height:76px; width:auto; display:block;}
.site-branding .wordmark{display:flex; flex-direction:column; line-height:1.2; text-decoration:none;}
.site-branding .mark{
  font-family:'Archivo Black', sans-serif;
  font-size:36px;
  color:var(--pool);
}
.site-branding .sub{
  font-size:16px;
  letter-spacing:0.04em;
  color:var(--ink);
  opacity:0.75;
  text-transform:uppercase;
  margin-top:4px;
  font-weight:600;
}

.menu-toggle{
  display:none;
  background:none;
  border:2px solid var(--pool);
  border-radius:6px;
  padding:8px 12px;
  font-weight:700;
  color:var(--pool);
  cursor:pointer;
}

.primary-navigation ul{
  list-style:none;
  display:flex;
  gap:36px;
  margin:0; padding:0;
  font-weight:700;
  font-size:21px;
}
.primary-navigation li{position:relative;}
.primary-navigation a{
  color:var(--ink);
  text-decoration:none;
  padding-bottom:12px;
  display:inline-block;
}
.primary-navigation .current-menu-item > a,
.primary-navigation a:hover{
  color:var(--pool);
}
.primary-navigation .current-menu-item > a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:6px; border-radius:3px;
  background:repeating-linear-gradient(90deg,var(--coral) 0 10px,var(--lane-yellow) 10px 20px,var(--cyan) 20px 30px,var(--pool) 30px 40px);
}

/* ---------- hero (front page) ---------- */
.hero{
  position:relative;
  background:var(--pool);
  color:#fff;
  padding:70px 6vw 100px;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; top:-120px; right:-120px;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,194,203,0.35), transparent 70%);
}
.hero-inner{position:relative; max-width:none;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:18px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--lane-yellow);
  margin-bottom:20px;
}
.hero h1{font-size:clamp(44px, 7.5vw, 92px); color:#fff; margin-bottom:0;}
.hero p.lead{
  margin-top:26px; font-size:26px; line-height:1.55;
  color:rgba(255,255,255,0.92); max-width:none;
}
.hero-ctas{margin-top:30px; display:flex; gap:14px; flex-wrap:wrap;}
.btn{
  display:inline-block; padding:13px 24px; border-radius:6px;
  font-weight:700; font-size:15px; text-decoration:none; border:none; cursor:pointer;
}
.btn-primary{background:var(--lane-yellow); color:var(--pool-deep);}
.btn-primary:hover{background:#ffd766;}
.btn-ghost{border:2px solid rgba(255,255,255,0.55); color:#fff;}
.btn-ghost:hover{border-color:#fff;}

.wave{display:block; width:100%; height:64px; margin-top:-2px;}

/* ---------- quicklink cards ---------- */
.quicklinks{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  padding:0 6vw; margin-top:-60px; position:relative; z-index:2;
}
.card{
  border-radius:10px; padding:28px 22px; color:#fff;
  min-height:150px; display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:0 14px 30px -14px rgba(10,37,64,0.35);
  text-decoration:none;
}
.card:hover{transform:translateY(-3px); transition:transform .15s ease;}
.card .tag{font-family:'IBM Plex Mono',monospace; font-size:17px; opacity:0.9;}
.card .name{font-family:'Archivo Black',sans-serif; font-size:36px; margin-top:12px; color:inherit; line-height:1.1;}
.card.c1{background:var(--coral);}
.card.c2{background:var(--lane-yellow); color:var(--pool-deep);}
.card.c3{background:var(--cyan); color:var(--pool-deep);}
.card.c4{background:var(--pool-deep);}
.card.c5{background:var(--pool);}
.card.c6{background:var(--teal);}
.card.c7{background:var(--violet);}
.card.c8{background:var(--sunset);}

/* ---------- generic section shell ---------- */
.section{padding:76px 6vw;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:30px; flex-wrap:wrap; gap:14px;}
.section-head h2{font-size:clamp(24px,2.8vw,34px);}
.kicker{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--coral); margin-bottom:8px; display:block;
}
.see-all{font-weight:700; font-size:14px; color:var(--pool); text-decoration:none;}

/* ---------- events ---------- */
.events-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.event-card{border:1px solid var(--line); border-radius:10px; padding:22px; background:#fff;}
.event-card .date{
  font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--pool);
  display:flex; align-items:center; gap:8px;
}
.event-card .date::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--coral); display:inline-block;}
.event-card h3{font-size:18px; margin-top:12px; font-family:'Work Sans',sans-serif; font-weight:800;}
.event-card .venue{margin-top:6px; font-size:14px; opacity:0.65;}
.empty-note{padding:20px; border:1px dashed var(--line); border-radius:10px; opacity:0.7;}

/* ---------- page header banner (interior pages) ---------- */
.page-banner{background:var(--pool); color:#fff; padding:76px 6vw 60px;}
.page-banner h1{color:#fff; font-size:clamp(44px, 6.5vw, 72px); margin-bottom:0;}

/* ---------- page content / prose ---------- */
.page-content{padding:60px 6vw 90px; max-width:1400px; margin:0 auto; font-size:19px; line-height:1.65;}
.page-content h2{margin-top:44px; font-size:32px;}
.page-content h3{margin-top:32px; font-size:25px;}
.page-content ul, .page-content ol{padding-left:26px;}
.page-content blockquote{
  border-left:4px solid var(--lane-yellow); margin:24px 0; padding:6px 20px;
  background:#fff; border-radius:0 8px 8px 0;
}
.page-content hr{border:none; border-top:1px solid var(--line); margin:32px 0;}

/* ---------- TablePress overrides ---------- */
table.tablepress{
  width:100%; border-collapse:collapse; margin:28px 0;
  font-size:17px;
}
table.tablepress th{
  background:var(--pool-deep); color:#fff;
  font-family:'IBM Plex Mono',monospace; font-size:14px; letter-spacing:0.05em;
  text-transform:uppercase; text-align:left; padding:16px 18px;
}
table.tablepress td{
  padding:15px 18px; border-bottom:1px solid var(--line); background:#fff;
}
table.tablepress tr:nth-child(even) td{background:#F0F7FA;}
table.tablepress a{color:var(--pool); font-weight:600;}

/* ---------- contact form (Clean and Simple Contact Form) ---------- */
.cscfBlock{max-width:560px;}
.cscfForm label{font-weight:700; display:block; margin-bottom:6px;}
.cscfForm input[type=text],
.cscfForm input[type=email],
.cscfForm input[type=tel],
.cscfForm textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:6px;
  font-family:inherit; font-size:15px; margin-bottom:16px; background:#fff;
}
.cscfForm textarea{min-height:140px;}
.cscfForm button, .cscfForm input[type=submit]{
  background:var(--pool); color:#fff; border:none; padding:13px 26px;
  border-radius:6px; font-weight:700; cursor:pointer; font-size:15px;
}
.cscfForm button:hover{background:var(--pool-deep);}

/* ---------- The Events Calendar: light-touch overrides ---------- */
.tribe-common a{color:var(--pool);}
.tribe-events-calendar-list__event-title a,
.tribe-events-calendar-month__calendar-event-title a{color:var(--pool-deep) !important;}

/* ---------- footer ---------- */
.site-footer{background:var(--ink); color:rgba(255,255,255,0.78); padding:52px 6vw 30px;}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px;}
.site-footer h4{font-family:'Archivo Black',sans-serif; color:#fff; font-size:16px; margin-bottom:16px;}
.foot-links{display:flex; flex-direction:column; gap:10px; font-size:14px;}
.foot-links a{color:rgba(255,255,255,0.78); text-decoration:none;}
.foot-links a:hover{color:#fff; text-decoration:underline;}
.site-footer .lane-stripe{margin-top:34px;}
.site-footer .fine{margin-top:24px; font-size:12.5px; opacity:0.55;}

/* ---------- 404 ---------- */
.error-404{padding:100px 6vw; text-align:center;}
.error-404 h1{font-size:clamp(60px,10vw,120px); color:var(--pool);}

/* ---------- blog / index listing ---------- */
.post-list{max-width:800px; margin:0 auto; padding:56px 6vw 80px;}
.post-list article{padding:24px 0; border-bottom:1px solid var(--line);}
.post-list h2{font-size:24px;}
.post-list .post-meta{font-family:'IBM Plex Mono',monospace; font-size:12px; opacity:0.6; margin-bottom:8px;}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .menu-toggle{display:inline-block;}
  .primary-navigation{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--chalk); border-top:1px solid var(--line); padding:14px 6vw 20px; z-index:20;
  }
  .primary-navigation.is-open{display:block;}
  .primary-navigation ul{flex-direction:column; gap:16px;}
  .quicklinks{grid-template-columns:repeat(2,1fr); margin-top:20px;}
  .events-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr; gap:26px;}
}