/*
Theme Name: Dixon Racing
Theme URI: https://dixon.2-day.org
Author: TwoDay Design
Description: Official site theme for Dixon Family Motors. Dark asphalt with the team's blue, pink and yellow.
Version: 1.0.1
License: GNU General Public License v2 or later
Text Domain: dixon-racing
*/

:root{
  --asphalt:#0c0e13;
  --asphalt-2:#141824;
  --card:#171c2a;
  --blue:#2b6bff;
  --pink:#ff2d78;
  --yellow:#ffd21f;
  --white:#f5f7fb;
  --muted:#aab2c5;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--asphalt);color:var(--white);font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--yellow);text-decoration:none}
a:hover{color:var(--pink)}

/* checkered flag strips */
.checker{height:22px;background:
  repeating-conic-gradient(#e8e8e8 0% 25%, #111 0% 50%) 0 0/44px 44px;}
.checker.thin{height:12px;background-size:24px 24px}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(12,14,19,.96);border-bottom:2px solid var(--blue)}
.nav-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:.7rem 1.2rem}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:800;letter-spacing:.06em}
.brand .num{background:linear-gradient(135deg,var(--blue),var(--pink));color:#fff;font-size:1.1rem;padding:.15rem .55rem;border-radius:6px}
.brand .name{color:var(--white);font-size:1.05rem;text-transform:uppercase}
.main-nav{display:flex;gap:1.4rem}
.main-nav a{color:var(--muted);font-weight:600;text-transform:uppercase;font-size:.85rem;letter-spacing:.08em}
.main-nav a:hover{color:var(--yellow)}

/* hero */
.hero{position:relative;padding:4.5rem 1.2rem 3.5rem;text-align:center;overflow:hidden;
  background:radial-gradient(1100px 480px at 50% -10%,rgba(43,107,255,.28),transparent 60%),
             radial-gradient(800px 380px at 85% 110%,rgba(255,45,120,.16),transparent 60%),
             var(--asphalt)}
.kicker{color:var(--yellow);text-transform:uppercase;letter-spacing:.35em;font-size:.8rem;font-weight:700;margin-bottom:1rem}
.hero h1{font-size:clamp(2.6rem,7vw,5rem);font-weight:900;letter-spacing:.02em;line-height:1.05;text-transform:uppercase;
  background:linear-gradient(100deg,var(--blue) 20%,var(--pink) 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{color:var(--muted);margin:1rem auto 2rem;max-width:640px;font-size:1.05rem}
.hero-car{max-width:760px;margin:0 auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.6))}
.hero-badges{display:flex;gap:1rem;justify-content:center;margin-top:2rem;flex-wrap:wrap}
.badge{border:1px solid #2a3350;background:var(--card);border-radius:10px;padding:.6rem 1.1rem;font-weight:700}
.badge .n{font-size:1.4rem}
.badge.blue .n{color:var(--blue)} .badge.pink .n{color:var(--pink)}

/* sections */
.section{max-width:1100px;margin:0 auto;padding:3.5rem 1.2rem}
.section h2{text-transform:uppercase;letter-spacing:.12em;font-size:1.6rem;margin-bottom:.4rem}
.section h2 .accent-pink{color:var(--pink)}
.section h2 .accent-blue{color:var(--blue)}
.section .lede{color:var(--muted);margin-bottom:2rem;max-width:700px}

/* car cards */
.cars{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.6rem}
.car-card{background:var(--card);border-radius:14px;overflow:hidden;border:1px solid #232b45;transition:transform .2s}
.car-card:hover{transform:translateY(-4px)}
.car-card .imgwrap{background:#0a0c11;padding:1rem}
.car-card.blue{border-top:4px solid var(--blue)}
.car-card.green{border-top:4px solid #7bd747}
.car-body{padding:1.4rem}
.car-num{font-size:2.6rem;font-weight:900;line-height:1}
.car-card.blue .car-num{color:var(--blue)}
.car-card.green .car-num{color:#7bd747}
.car-driver{font-size:1.25rem;font-weight:700;margin:.3rem 0 .6rem}
.car-body p{color:var(--muted);font-size:.95rem}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.g-item{background:var(--card);border:1px solid #232b45;border-radius:12px;overflow:hidden}
.g-item .imgwrap{background:#0a0c11;padding:.8rem}
.g-item figcaption{padding:.8rem 1rem;color:var(--muted);font-size:.9rem}

/* footer */
.site-footer{background:#080a0f;border-top:2px solid var(--pink);margin-top:2rem}
.footer-inner{max-width:1100px;margin:0 auto;padding:2rem 1.2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-inner p{color:var(--muted);font-size:.9rem}
.footer-note{color:#5b657f;font-size:.8rem}

@media(max-width:640px){
  .main-nav{gap:.9rem}
  .brand .name{display:none}
}