/*
Theme Name: Bonsall Riders BHS Style
Theme URI: https://example.com/
Author: OpenAI
Description: Custom theme for Bonsall Riders based on the approved homepage mockup.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: bonsall-riders
*/

:root{
  --red:#c92f33;
  --red-dark:#a92226;
  --blue:#1e5ea8;
  --blue-dark:#184f8d;
  --cream:#f6f4ef;
  --paper:#ffffff;
  --text:#2b2f33;
  --muted:#6b7280;
  --line:#e5e7eb;
  --shadow:0 10px 28px rgba(0,0,0,.08);
  --radius:16px;
  --max:1280px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  color:var(--text);
  background:linear-gradient(#f4f2ee,#efede7);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.site-wrap{min-height:100vh}
.container{width:min(calc(100% - 40px), var(--max)); margin:0 auto}
.section{padding:56px 0}
.section-tight{padding:36px 0}
.hidden-title{position:absolute;left:-9999px}

.site-header{
  background:linear-gradient(180deg, #d13135 0%, #bc272d 100%);
  color:#fff;
  position:sticky;
  top:0;
  z-index:999;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.header-row{
  min-height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.branding{
  display:flex;
  align-items:center;
  gap:14px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size:44px;
  line-height:1;
  font-weight:700;
}
.branding .mark{
  width:52px;height:52px;border-radius:50%;
  border:4px solid rgba(255,255,255,.95);
  position:relative;flex:0 0 auto;
}
.branding .mark:before{
  content:"";
  position:absolute; inset:10px 11px 9px 13px;
  border-radius:50% 55% 45% 50%;
  background:#fff;
  opacity:.95;
}
.branding .mark:after{
  content:"";
  position:absolute; width:16px;height:20px; right:9px; top:12px;
  background:#fff; clip-path:polygon(0 0, 100% 15%, 65% 100%, 0 80%);
  opacity:.95;
}
.branding .text{font-size:28px}

.primary-nav{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.primary-nav a{
  padding:14px 16px;
  border-radius:10px;
  font-weight:700;
  font-size:18px;
  color:#fff;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a{background:rgba(255,255,255,.12)}
.primary-nav .join-link a,
.primary-nav a.cta{
  background:rgba(0,0,0,.14);
}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:28px}

.hero{
  position:relative;
  min-height:640px;
  color:#fff;
  display:flex;
  align-items:flex-start;
}
.hero-bg{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.22) 33%, rgba(0,0,0,.05) 66%, rgba(0,0,0,.08) 100%),
    url('assets/images/hero.jpg') center/cover no-repeat;
}
.hero-curve{
  position:absolute; left:0; right:0; bottom:-1px; height:120px;
}
.hero-curve svg{width:100%;height:100%;display:block}
.hero-content{position:relative; z-index:2; padding-top:72px; padding-bottom:140px}
.hero-copy{max-width:560px}
.hero-title{
  font-family: Georgia, 'Times New Roman', serif;
  font-size:76px; line-height:.95; margin:0 0 18px;
  text-shadow:0 3px 16px rgba(0,0,0,.25);
}
.hero-title span{display:block}
.hero-sub{
  font-size:24px; font-weight:700; margin:0 0 30px; max-width:540px;
  padding-top:14px; border-top:4px solid rgba(255,255,255,.75);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 28px;
  border-radius:8px;
  color:#fff; font-weight:700; font-size:17px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.btn-red{background:linear-gradient(180deg, #d93337, #bf252a)}
.btn-red:hover{background:linear-gradient(180deg, #c9282c, #aa1f24)}
.btn-blue{background:linear-gradient(180deg, #2566b2, #1e59a0)}
.btn-blue:hover{background:linear-gradient(180deg, #1f5ca4, #184f8d)}
.btn-block{width:100%}

.cards-overlap{margin-top:-76px; position:relative; z-index:5}
.feature-grid, .news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.card{
  background:var(--paper);
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,.07);
}
.card-media{
  aspect-ratio: 16 / 9;
  background:#ddd center/cover no-repeat;
}
.card-bar{
  background:linear-gradient(180deg, #d13135, #bf262b);
  color:#fff;
  font-size:20px; font-weight:700;
  padding:14px 18px;
  display:flex; align-items:center; gap:12px;
}
.card-bar .icon{
  width:24px; height:24px; border:2px solid rgba(255,255,255,.95); border-radius:4px; opacity:.95;
}
.card-body{padding:20px 24px 24px; text-align:center}
.card-body p{margin:0 0 18px; color:#4b5563; font-size:16px}
.small-btn{min-height:46px; padding:0 20px; font-size:16px}

.welcome{
  text-align:center;
  background:
   linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.95)),
   radial-gradient(ellipse at bottom, rgba(95,145,120,.18), transparent 50%);
}
.welcome h2{
  font-family: Georgia, 'Times New Roman', serif;
  font-size:62px; color:var(--red); margin:0;
}
.subtitle-wrap{
  display:flex; align-items:center; gap:18px; justify-content:center;
  margin:12px auto 24px; color:#5b6470;
}
.subtitle-wrap:before,.subtitle-wrap:after{
  content:""; height:1px; width:140px; background:#d7d7d7;
}
.welcome .sub{font-size:18px; font-style:italic; font-weight:700}
.welcome p{
  max-width:720px; margin:0 auto 28px; font-size:17px; line-height:1.65; color:#44505d;
}
.button-row{display:flex; justify-content:center; gap:18px; flex-wrap:wrap}

.section-head{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  margin-bottom:24px;
}
.section-title{
  font-family: Georgia, 'Times New Roman', serif;
  font-size:30px; margin:0; color:var(--red);
}
.section-link{font-size:18px; color:#4b5563; font-weight:700}

.news-card .card-body{text-align:left;padding:18px 22px 20px}
.news-card h3{
  margin:0 0 10px; font-size:20px; line-height:1.25;
}
.news-date{font-size:16px; color:#5e6673}
.news-footer{
  display:flex; justify-content:flex-end; margin-top:24px;
}

.content-page{
  background:#fff;
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:40px;
}
.entry-content{font-size:18px; line-height:1.72; color:#334155}
.entry-content h1, .entry-content h2, .entry-content h3{
  font-family:Georgia, 'Times New Roman', serif;
  color:var(--red);
  line-height:1.15;
}
.entry-content h1{font-size:52px}
.entry-content h2{font-size:34px; margin-top:38px}
.entry-content ul{padding-left:24px}

.archive-wrap{padding-top:44px;padding-bottom:60px}
.archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.archive-card{background:#fff;border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.archive-card .media{aspect-ratio:16/9;background:center/cover no-repeat}
.archive-card .inner{padding:18px 22px 22px}
.archive-card h2{font-size:24px;margin:0 0 8px}
.archive-card .meta{color:#6b7280;font-size:16px;margin-bottom:10px}
.archive-card p{color:#475569;font-size:16px;line-height:1.6}

.site-footer{
  margin-top:48px;
  background:#f1eee7;
  border-top:1px solid #ddd8cd;
  color:#5e6673;
}
.footer-row{
  padding:28px 0 36px;
  display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:24px;
}
.footer-title{font-family:Georgia, 'Times New Roman', serif; font-size:26px; color:#273241; margin:0 0 10px}
.footer-list{list-style:none; padding:0; margin:0}
.footer-list li{margin-bottom:8px}
.footer-bottom{padding:0 0 26px; font-size:15px}

@media (max-width: 980px){
  .menu-toggle{display:block}
  .primary-nav{
    display:none;
    position:absolute; left:0; right:0; top:86px;
    background:#bd272d;
    padding:14px 20px 20px;
    box-shadow:0 8px 20px rgba(0,0,0,.14);
  }
  .primary-nav.open{display:flex; flex-direction:column; align-items:stretch}
  .primary-nav a{padding:12px 14px}
  .hero{min-height:540px}
  .hero-content{padding-top:46px}
  .hero-title{font-size:56px}
  .feature-grid,.news-grid,.archive-grid,.footer-row{grid-template-columns:1fr}
  .cards-overlap{margin-top:-30px}
  .content-page{padding:24px}
}
@media (max-width: 640px){
  .container{width:min(calc(100% - 24px), var(--max))}
  .branding .text{font-size:22px}
  .hero{min-height:460px}
  .hero-content{padding-bottom:100px}
  .hero-title{font-size:42px}
  .hero-sub{font-size:20px}
  .welcome h2{font-size:40px}
  .subtitle-wrap:before,.subtitle-wrap:after{width:60px}
  .section-title{font-size:26px}
}