/*
Theme Name: Defender DRL Repair LDN
Theme URI: https://customwheelsldn.com
Author: Defender DRL Repair LDN
Author URI: https://customwheelsldn.com
Description: A clean, light motorsport-themed one-page theme for the Defender DRL Repair LDN service. Features an animated flashing indicator hero, project gallery, reviews and WhatsApp contact. Hero image, gallery, reviews and contact details are all editable from the WordPress Customizer.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: defender-drl-repair-ldn
*/

:root{
  --bg:#ffffff;
  --bg-soft:#f4f6f8;
  --panel:#ffffff;
  --panel-edge:#e4e8ec;
  --ink:#11161b;
  --ink-soft:#3a434c;
  --muted:#6a747e;
  --amber:#ff5c1a;
  --amber-soft:rgba(255,92,26,.10);
  --line:#e4e8ec;
  --green:#1ec27a;
  --shadow:0 8px 30px rgba(17,22,27,.08);
  --max:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
h1,h2,h3,.display{font-family:'Rajdhani',sans-serif;letter-spacing:.01em;line-height:1.05}
.eyebrow{
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.78rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--amber);
}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ===== SITE HEADER / NAV ===== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.85);backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.site-logo{font-family:'Rajdhani',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:1.15rem}
.site-logo .amber{color:var(--amber)}
.site-nav{display:flex;gap:24px;align-items:center}
.site-nav a{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:.92rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.site-nav a:hover{color:var(--amber)}
.nav-cta{background:var(--amber);color:#fff !important;padding:9px 16px;border-radius:7px}
.nav-cta:hover{background:#ff7136;color:#fff !important}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;font-size:1.5rem;color:var(--ink)}

/* ===== HERO ===== */
.hero{
  position:relative;
  display:flex;align-items:center;
  border-bottom:1px solid var(--line);
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 85% 0%, rgba(255,92,26,.06), transparent 55%),
    linear-gradient(180deg,#ffffff 0%,#f7f9fb 100%);
  padding:70px 0;
}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(2.6rem,7vw,5rem);font-weight:700;margin:.5rem 0 .2rem;text-transform:uppercase}
.hero h1 .amber{color:var(--amber)}
.mot-line{
  font-family:'Rajdhani',sans-serif;font-weight:600;font-size:1.18rem;
  color:var(--ink);max-width:560px;margin-top:1.1rem;
  border-left:3px solid var(--amber);padding-left:14px;line-height:1.35;
}
.hero .sub{color:var(--muted);font-size:1.1rem;max-width:560px;margin:1.1rem 0 1.7rem}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:2rem}
.badge{
  font-family:'Rajdhani',sans-serif;font-weight:600;font-size:.82rem;
  letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line);background:var(--bg-soft);
  padding:7px 13px;border-radius:6px;color:var(--ink);
}
.badge b{color:var(--amber)}

/* hero image + animated indicator */
.hero-media{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--panel-edge);box-shadow:var(--shadow);aspect-ratio:569/469}
.hero-media img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.03) saturate(1.04)}
.drl-bar{
  position:absolute;z-index:3;pointer-events:none;
  left:70%;top:34%;width:5%;height:27%;border-radius:5px;
  background:linear-gradient(180deg,#ffd27a,#ff9d2e);
  box-shadow:0 0 30px 10px rgba(255,160,40,.95),0 0 8px 2px rgba(255,210,120,1);
  opacity:0;
  animation:bar .9s steps(1,end) infinite;
}
@keyframes bar{0%,49%{opacity:0}50%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.drl-bar{animation:none;opacity:.9}}

/* ===== BUTTONS ===== */
.cta-row{display:flex;flex-wrap:wrap;gap:14px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1.02rem;
  letter-spacing:.05em;text-transform:uppercase;
  padding:15px 26px;border-radius:8px;transition:.18s;cursor:pointer;border:1px solid transparent;
}
.btn-primary{background:var(--amber);color:#fff}
.btn-primary:hover{background:#ff7136;transform:translateY(-2px)}
.btn svg{width:19px;height:19px}

/* ===== SECTIONS ===== */
.section{padding:84px 0}
.sec-head{margin-bottom:42px;max-width:640px}
.sec-head h2{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:700;text-transform:uppercase;margin:.4rem 0}
.sec-head p{color:var(--muted)}

.grid{display:grid;gap:16px}
.repair-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--panel);border:1px solid var(--panel-edge);border-radius:12px;padding:24px;transition:.2s;box-shadow:var(--shadow)}
.card:hover{border-color:var(--amber);transform:translateY(-3px)}
.card .ico{width:42px;height:42px;border-radius:9px;background:var(--amber-soft);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.card .ico svg{width:22px;height:22px;stroke:var(--amber)}
.card h3{font-size:1.18rem;font-weight:600;margin-bottom:6px}
.card p{color:var(--muted);font-size:.94rem}

/* process */
.process{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px}
.step .num{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:2.6rem;color:var(--amber);line-height:1}
.step h3{font-size:1.18rem;font-weight:600;margin:.5rem 0 .3rem}
.step p{color:var(--muted);font-size:.94rem}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.shot{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid var(--panel-edge);background:var(--bg-soft);box-shadow:var(--shadow)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot .empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;border:1px dashed var(--panel-edge);border-radius:12px}
.shot .tag{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);border:1px solid var(--amber);border-radius:5px;padding:4px 9px;margin-bottom:12px}
.shot .ph{color:var(--muted);font-size:.9rem;max-width:200px}

/* reviews */
.reviews{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rev-top{display:flex;align-items:center;gap:18px;margin-bottom:32px;flex-wrap:wrap}
.rev-score{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:3.4rem;color:var(--ink);line-height:1}
.stars{color:var(--amber);font-size:1.3rem;letter-spacing:2px}
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.review{background:var(--panel);border:1px solid var(--panel-edge);border-radius:12px;padding:24px;box-shadow:var(--shadow)}
.review .stars{font-size:1rem;margin-bottom:12px}
.review p{font-size:.98rem;margin-bottom:16px;color:var(--ink-soft)}
.review .who{display:flex;align-items:center;gap:11px}
.review .av{width:38px;height:38px;border-radius:50%;background:var(--amber-soft);color:var(--amber);font-family:'Rajdhani',sans-serif;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.review .who b{font-weight:600;font-size:.92rem;display:block}
.review .who span{color:var(--muted);font-size:.8rem}

/* contact */
.contact .contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.contact h2{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:700;text-transform:uppercase;margin:.4rem 0 1rem}
.contact .lead{color:var(--muted);margin-bottom:28px;max-width:440px}
.info-row{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line)}
.info-row:last-child{border-bottom:1px solid var(--line)}
.info-row .ico{width:40px;height:40px;border-radius:9px;background:var(--amber-soft);flex:none;display:flex;align-items:center;justify-content:center}
.info-row .ico svg{width:20px;height:20px;stroke:var(--amber)}
.info-row .k{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.info-row .v{font-size:1.02rem;font-weight:500}
.info-row .v a:hover{color:var(--amber)}
.contact-card{background:var(--panel);border:1px solid var(--panel-edge);border-radius:14px;padding:30px;box-shadow:var(--shadow)}
.contact-card h3{font-size:1.35rem;font-weight:600;margin-bottom:8px}
.contact-card .note{color:var(--muted);font-size:.92rem;margin-bottom:22px}
.contact-card .btn{width:100%;justify-content:center;margin-bottom:12px}
.tip{margin-top:20px;background:var(--amber-soft);border:1px solid rgba(255,92,26,.22);border-radius:9px;padding:15px;font-size:.9rem;color:var(--ink)}
.tip b{color:var(--amber)}

/* footer */
.site-footer{padding:38px 0;text-align:center;color:var(--muted);font-size:.85rem;background:var(--bg)}
.site-footer .brand{font-family:'Rajdhani',sans-serif;font-weight:700;color:var(--ink);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;font-size:1.05rem}

@media(max-width:760px){
  .site-nav{position:fixed;inset:64px 0 auto 0;background:#fff;flex-direction:column;gap:0;border-bottom:1px solid var(--line);display:none}
  .site-nav.open{display:flex}
  .site-nav a{padding:14px 22px;border-top:1px solid var(--line);width:100%}
  .nav-toggle{display:block}
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-media{order:-1;max-width:440px;margin:0 auto;width:100%}
  .contact .contact-grid{grid-template-columns:1fr;gap:34px}
  .section,.hero{padding:56px 0}
}