/*
Theme Name: Extremely GMC
Theme URI: https://extremelyturbocharged.co.za
Author: Extremely GMC
Author URI: https://extremelyturbocharged.co.za
Description: High-performance WordPress theme for Extremely GMC — South Africa's turbocharger repair, rebuild and performance engineering specialists. Mirrors the React design exactly: navy-blue base with red performance accents and white typography. Self-contained — no page builder required. Includes templates for Home, Services, Service Detail, Areas, Area Detail, About, Contact, FAQ.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: extremely-gmc
Tags: business, automotive, custom-colors, custom-menu, custom-logo, featured-images, full-width-template, responsive-layout, theme-options, threaded-comments
*/

/* =========================================================
   Extremely GMC — Theme Styles
   Tokens: navy base, performance red, white foreground
   ========================================================= */

:root{
  --background:#0d1326;
  --foreground:#fafafa;
  --card:#141d36;
  --border:#26314f;
  --muted:#1a2440;
  --muted-foreground:#a3aec9;
  --primary:#e63946;
  --primary-foreground:#ffffff;
  --secondary:#1d4ed8;
  --secondary-foreground:#ffffff;
  --accent:#2563eb;
  --whatsapp:#25D366;
  --shadow-red:0 10px 40px -10px rgba(230,57,70,.55);
  --shadow-card:0 8px 30px -8px rgba(13,30,80,.6);
  --gradient-red:linear-gradient(135deg,#e63946 0%,#b91c2c 100%);
  --gradient-hero:linear-gradient(135deg,#0d1326 0%,#1d3a8a 50%,#a31a28 100%);
  --radius:.5rem;
  --container:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--background);color:var(--foreground);font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--primary)}
h1,h2,h3,h4,h5{font-family:'Oswald','Bebas Neue',system-ui,sans-serif;text-transform:uppercase;letter-spacing:.01em;line-height:1.1;margin:0 0 .5em}
h1{font-size:clamp(2rem,5vw,3.75rem)}
h2{font-size:clamp(1.75rem,3.5vw,2.5rem)}
h3{font-size:1.25rem}
p{margin:0 0 1rem}
hr{border:0;border-top:1px solid var(--border);margin:2rem 0}

.container{max-width:var(--container);margin:0 auto;padding:0 1rem}
@media(min-width:1024px){.container{padding:0 2rem}}

.text-gradient-red{background:linear-gradient(180deg,#fee2e2 0%,#e63946 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.text-primary{color:var(--primary)}
.text-muted{color:var(--muted-foreground)}
.uppercase-label{font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--primary)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.4rem;border-radius:var(--radius);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;border:0;cursor:pointer;transition:transform .2s,background .2s,color .2s,border-color .2s}
.btn:hover{transform:scale(1.04)}
.btn-red{background:var(--gradient-red);color:#fff;box-shadow:var(--shadow-red)}
.btn-wa{background:var(--whatsapp);color:#fff}
.btn-blue{background:var(--secondary);color:#fff}
.btn-outline{background:rgba(255,255,255,.04);color:var(--foreground);border:2px solid rgba(255,255,255,.3)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
.btn-ghost-primary{border:1px solid rgba(230,57,70,.5);color:var(--primary);background:transparent;padding:.65rem 1.2rem}
.btn-ghost-primary:hover{background:var(--primary);color:#fff}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--border);background:rgba(13,19,38,.9);backdrop-filter:blur(8px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;max-width:var(--container);margin:0 auto}
@media(min-width:1024px){.header-inner{padding:.75rem 2rem}}
.site-logo img{height:48px;width:auto}
@media(min-width:768px){.site-logo img{height:56px}}
.main-nav{display:none;align-items:center;gap:.25rem}
@media(min-width:1024px){.main-nav{display:flex}}
.main-nav a{padding:.6rem 1rem;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:rgba(250,250,250,.85);border-radius:var(--radius)}
.main-nav a:hover,.main-nav .current-menu-item>a{color:var(--primary);background:var(--muted)}
.header-cta{display:none}
@media(min-width:1024px){.header-cta{display:inline-flex}}
.menu-toggle{display:inline-flex;padding:.5rem;border:1px solid var(--border);background:transparent;color:#fff;border-radius:var(--radius);cursor:pointer}
@media(min-width:1024px){.menu-toggle{display:none}}
.mobile-nav{display:none;border-top:1px solid var(--border);background:var(--background)}
.mobile-nav.open{display:block}
.mobile-nav ul{list-style:none;padding:.5rem 1rem;margin:0}
.mobile-nav a{display:block;padding:.85rem .75rem;font-weight:700;text-transform:uppercase;font-size:.85rem;border-radius:var(--radius)}
.mobile-nav a:hover{background:var(--muted)}
.mobile-nav .cta{margin-top:.5rem;justify-content:center}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,rgba(13,19,38,1),rgba(13,19,38,.8),rgba(13,19,38,.4))}
.hero-bg img{height:100%;width:100%;object-fit:cover;opacity:.4}
.hero-inner{position:relative;z-index:1;display:grid;gap:2.5rem;padding:4rem 1rem;max-width:var(--container);margin:0 auto}
@media(min-width:1024px){.hero-inner{grid-template-columns:1.2fr 1fr;padding:6rem 2rem;gap:3rem}}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(230,57,70,.4);background:rgba(230,57,70,.1);color:var(--primary);font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:.35rem .85rem;border-radius:999px}
.pulse-dot{width:.5rem;height:.5rem;border-radius:999px;background:var(--primary);animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{50%{opacity:.5}}
.hero p.lead{font-size:1.05rem;color:var(--muted-foreground);max-width:36rem;margin-top:1.25rem}
.hero-buttons{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:2.5rem}
@media(min-width:640px){.trust-grid{grid-template-columns:repeat(4,1fr)}}
.trust-item{display:flex;align-items:center;gap:.5rem;border:1px solid var(--border);background:rgba(20,29,54,.6);padding:.75rem;border-radius:var(--radius);backdrop-filter:blur(4px);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.trust-item svg{color:var(--primary);flex-shrink:0}

/* ---------- Quote form ---------- */
.quote-form{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:1.75rem;box-shadow:var(--shadow-card)}
.quote-form h3{font-size:1.5rem;margin-bottom:.25rem}
.quote-form .form-sub{color:var(--muted-foreground);font-size:.875rem;margin-bottom:1.25rem}
.quote-form label{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.35rem;color:rgba(250,250,250,.85)}
.quote-form input,.quote-form select,.quote-form textarea{width:100%;background:var(--muted);border:1px solid var(--border);border-radius:var(--radius);padding:.7rem .85rem;color:#fff;font-family:inherit;font-size:.9rem;margin-bottom:.85rem}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{outline:2px solid var(--primary);outline-offset:1px}
.quote-form textarea{min-height:90px;resize:vertical}
.quote-form button{width:100%;margin-top:.5rem;justify-content:center}

/* ---------- Sections / cards ---------- */
.section{padding:4.5rem 0}
.section-tight{padding:3rem 0}
.section.bg-soft{background:rgba(20,29,54,.5);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:2.5rem}
.grid-2{display:grid;gap:1.5rem}
.grid-3{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:640px){.grid-3{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.grid-4{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:640px){.grid-4{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.grid-4{grid-template-columns:repeat(4,1fr)}}

.card{background:var(--card);border:1px solid var(--border);border-radius:.75rem;padding:1.5rem;transition:transform .2s,border-color .2s,box-shadow .2s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:var(--shadow-red)}
.card-icon{display:inline-flex;width:48px;height:48px;align-items:center;justify-content:center;border-radius:.6rem;background:var(--gradient-red);color:#fff;box-shadow:var(--shadow-red);margin-bottom:1rem}
.card .desc{color:var(--muted-foreground);font-size:.9rem;margin-top:.5rem}
.card a.more{display:inline-block;margin-top:1rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--primary)}
.card-link{display:block;color:inherit}
.card-link:hover h3{color:var(--primary)}

/* ---------- Performance CTA ---------- */
.perf-cta{position:relative;overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.perf-cta-bg{position:absolute;inset:0}
.perf-cta-bg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.perf-cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,var(--background),rgba(13,19,38,.8),rgba(13,19,38,.2))}
.perf-cta-content{position:relative;z-index:1;max-width:var(--container);margin:0 auto;padding:5rem 1rem}
@media(min-width:1024px){.perf-cta-content{padding:5rem 2rem}}
.perf-cta-content .inner{max-width:36rem}

/* ---------- Testimonials ---------- */
.review-stars{color:var(--primary);letter-spacing:.1em}
.review-card{background:var(--card);border:1px solid var(--border);border-radius:.75rem;padding:1.5rem;box-shadow:var(--shadow-card)}
.review-card .who{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}
.review-card .who .name{font-weight:700;text-transform:uppercase;font-size:.85rem}
.review-card .who .car{font-size:.72rem;color:var(--muted-foreground)}

/* ---------- FAQ ---------- */
.faq-list{display:flex;flex-direction:column;gap:.75rem}
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:.6rem;overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:1.1rem 1.25rem;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.5rem;color:var(--primary);transition:transform .2s}
.faq-item[open] summary::after{content:"−"}
.faq-item .a{padding:0 1.25rem 1.1rem;color:var(--muted-foreground);font-size:.92rem}

/* ---------- Service / page detail ---------- */
.page-hero{padding:3.5rem 0 2rem;border-bottom:1px solid var(--border);background:var(--gradient-hero)}
.page-hero h1{margin-bottom:.5rem}
.breadcrumbs{font-size:.75rem;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.75rem}
.breadcrumbs a:hover{color:var(--primary)}
.bullet-list{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.bullet-list li{position:relative;padding-left:1.5rem;color:var(--muted-foreground)}
.bullet-list li::before{content:"";position:absolute;left:0;top:.55em;width:.6rem;height:.6rem;background:var(--primary);border-radius:2px;transform:rotate(45deg)}

.two-col{display:grid;gap:2rem}
@media(min-width:960px){.two-col{grid-template-columns:1.4fr 1fr}}

/* ---------- Contact ---------- */
.info-card{background:var(--card);border:1px solid var(--border);border-radius:.75rem;padding:1.5rem}
.info-card h4{font-family:inherit;text-transform:none;letter-spacing:0;font-size:.75rem;color:var(--muted-foreground);font-weight:700;margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.1em}
.info-card a{display:block;font-size:1.05rem;font-weight:700}
.info-card a:hover{color:var(--primary)}
.map-wrap{border-radius:.75rem;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-card)}
.map-wrap iframe{display:block;width:100%;height:420px;border:0}

/* ---------- Footer ---------- */
.site-footer{background:#080d1b;border-top:1px solid var(--border);padding:3rem 0 1.5rem;margin-top:4rem;color:var(--muted-foreground);font-size:.88rem}
.footer-grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:768px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer-grid h4{font-size:.8rem;letter-spacing:.15em;color:#fff;margin-bottom:1rem}
.footer-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem}
.footer-grid a:hover{color:var(--primary)}
.footer-bottom{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;font-size:.75rem}

/* ---------- Floating actions ---------- */
.floating-actions{position:fixed;right:1rem;bottom:1rem;display:flex;flex-direction:column;gap:.75rem;z-index:50}
.fab{display:inline-flex;width:56px;height:56px;align-items:center;justify-content:center;border-radius:999px;color:#fff;box-shadow:var(--shadow-card);transition:transform .2s}
.fab:hover{transform:scale(1.1);color:#fff}
.fab.call{background:var(--gradient-red);box-shadow:var(--shadow-red)}
.fab.wa{background:var(--whatsapp)}

/* ---------- Misc ---------- */
.tag{display:inline-block;background:var(--muted);border:1px solid var(--border);padding:.35rem .75rem;border-radius:999px;font-size:.72rem;text-transform:uppercase;font-weight:700;letter-spacing:.08em;color:var(--muted-foreground)}
.areas-grid{display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.areas-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.areas-grid{grid-template-columns:repeat(4,1fr)}}
.area-chip{display:block;padding:1rem;background:var(--card);border:1px solid var(--border);border-radius:.6rem;text-align:center;transition:all .2s}
.area-chip:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}
.area-chip .prov{display:block;font-size:.7rem;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.1em;margin-top:.25rem;font-weight:600}

.alert{padding:1rem 1.25rem;border-radius:.5rem;background:rgba(37,211,102,.1);border:1px solid var(--whatsapp);color:#bdf5d2;font-size:.9rem;margin-bottom:1rem}
</content>
</invoke>