/*
Theme Name: AutoGuru Workshop
Theme URI: https://autoguru.ae
Author: AutoGuru.ae
Author URI: https://autoguru.ae
Description: Custom one-page theme for AutoGuru Auto General Repairing LLC, Dubai. Black, gold and beige workshop design with a services, callback and reviews layout.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: autoguru
*/

/* =========================================================
   0. DESIGN TOKENS
   ========================================================= */
:root{
  --black:#0D0C0A;
  --charcoal:#1A1712;
  --charcoal-2:#221E17;
  --gold:#B8892B;
  --gold-bright:#DDB35E;
  --gold-dim:#8A6A22;
  --beige:#EFE6D3;
  --beige-2:#E4D8BE;
  --ink:#211C14;
  --ink-soft:#4A4232;
  --line:rgba(184,137,43,0.35);
  --radius:2px;

  --font-heading:'Gotham','Montserrat','Segoe UI',Arial,sans-serif;
  --font-body:'Gotham Book','Gotham','Work Sans','Segoe UI',Arial,sans-serif;

  --maxw:1180px;
  --dur:0.25s;
}

/* =========================================================
   1. RESET / BASE
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--beige);
  color:var(--ink);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{
  font-family:var(--font-heading);
  font-weight:700;
  letter-spacing:0.01em;
  line-height:1.15;
  margin:0 0 0.5em;
}
p{ margin:0 0 1em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; height:auto; }
ul{ list-style:none; margin:0; padding:0; }
button, input, textarea, select{ font-family:inherit; font-size:inherit; }
button{ cursor:pointer; }

/* Accessibility: visible focus state everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:2px;
}

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--gold); color:var(--black);
  padding:12px 20px; z-index:9999;
  font-family:var(--font-heading);
}
.skip-link:focus{ left:16px; top:16px; }

.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
section{ padding:96px 0; }

/* Anchor-jump fix: keeps the sticky header from covering the top of
   the target section when a nav link scrolls to it. */
#services, #why, #callback, #callback-form, #reviews, #contact{ scroll-margin-top:96px; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* =========================================================
   2. TYPE HELPERS
   ========================================================= */
.kicker{
  font-family:var(--font-heading);
  font-size:13px;
  letter-spacing:0.14em;
  color:var(--gold-dim);
  margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
  text-transform:uppercase;
}
.kicker::before{ content:""; width:26px; height:2px; background:var(--gold); display:inline-block; }
.kicker.on-dark{ color:var(--gold-bright); }

.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:36px; color:var(--ink); }
.section-head p{ color:var(--ink-soft); margin-top:14px; font-size:16px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.on-dark .section-head h2{ color:var(--beige); }
.on-dark .section-head p{ color:#B7AF9E; }

/* =========================================================
   3. BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-heading);
  font-size:15px; font-weight:700; letter-spacing:0.03em;
  padding:15px 30px;
  border:1px solid var(--gold);
  color:var(--gold-bright);
  background:transparent;
  transition:background var(--dur) ease, color var(--dur) ease, transform var(--dur) ease;
}
.btn.solid{ background:var(--gold); color:var(--black); }
.btn.solid:hover, .btn.solid:focus-visible{ background:var(--gold-bright); transform:translateY(-1px); }
.btn:not(.solid):hover, .btn:not(.solid):focus-visible{ background:rgba(184,137,43,0.12); transform:translateY(-1px); }

/* =========================================================
   4. HEADER / NAV
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--black);
  border-bottom:1px solid var(--line);
}
.nav{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"logo links cta";
  align-items:center; column-gap:24px;
  padding:16px 32px; max-width:var(--maxw); margin:0 auto;
}
.logo{
  font-family:var(--font-heading);
  font-size:24px; font-weight:700; color:var(--beige);
  letter-spacing:0.02em;
  display:flex; align-items:center; gap:12px;
  flex-shrink:0;
  grid-area:logo; justify-self:start;
}
.logo span{ color:var(--gold-bright); }
.logo img{ height:58px; width:58px; border-radius:50%; background:var(--beige); padding:3px; }
.logo-word{ white-space:nowrap; }
.logo.small{ font-size:20px; gap:10px; }
.logo.small img{ height:52px; width:52px; }

.nav-links{ display:flex; gap:28px; align-items:center; flex-shrink:0; grid-area:links; justify-self:center; }
.nav-links a{
  color:#C9C2B2; font-size:14.5px; font-family:var(--font-heading); font-weight:500;
  letter-spacing:0.03em; padding:6px 0; white-space:nowrap;
  border-bottom:1px solid transparent;
  transition:color var(--dur) ease, border-color var(--dur) ease;
}
.nav-links a:hover, .nav-links a:focus-visible{ color:var(--gold-bright); border-color:var(--gold); }

.nav-cta{ display:flex; align-items:center; gap:14px; flex-shrink:0; white-space:nowrap; grid-area:cta; justify-self:end; }
.nav-phone{ color:var(--beige); font-size:14.5px; }
.nav-phone strong{ color:var(--gold-bright); font-family:var(--font-heading); }

.menu-toggle{
  display:none; background:none; border:1px solid var(--line); color:var(--beige);
  padding:8px 10px; border-radius:var(--radius);
}
.menu-toggle span{ display:block; width:20px; height:2px; background:var(--gold-bright); margin:4px 0; }

/* =========================================================
   5. HERO
   ========================================================= */
.hero{
  position:relative;
  background:
    linear-gradient(100deg, rgba(13,12,10,0.93) 0%, rgba(13,12,10,0.55) 52%, rgba(13,12,10,0.18) 100%),
    linear-gradient(0deg, rgba(13,12,10,0.92) 0%, rgba(13,12,10,0) 38%),
    radial-gradient(circle at 82% 30%, rgba(184,137,43,0.12), transparent 55%),
    var(--hero-image, url('https://images.unsplash.com/photo-1714434087918-4b9abedef3c6?auto=format&fit=crop&w=1800&q=75')) center right / cover no-repeat,
    var(--black);
  color:var(--beige);
  padding:110px 0 90px;
  border-bottom:1px solid var(--line);
}
.hero .wrap{ display:grid; grid-template-columns:1fr 1.05fr; gap:60px; align-items:center; }
.hero h1{ font-size:50px; color:var(--beige); max-width:560px; }
.hero h1 em{ font-style:normal; color:var(--gold-bright); }
.hero p.lead{ font-size:17px; color:#C9C2B2; max-width:500px; margin-bottom:34px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:44px; }
.hero-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.hero-stat{ border-left:1px solid var(--line); padding-left:14px; }
.hero-stat-title{ font-family:var(--font-heading); font-size:15px; font-weight:700; color:var(--gold-bright); letter-spacing:0.03em; text-transform:uppercase; margin-bottom:6px; }
.hero-stat-desc{ font-size:12.5px; line-height:1.5; color:#9C9384; }
.dial-wrap{ display:flex; flex-direction:column; justify-content:center; align-items:center; }
.dial{ width:100%; max-width:500px; }
.dial-needle{
  transform-box: view-box;
  transform-origin: 200px 200px;
  transition: transform 0.12s cubic-bezier(0.22, 0.9, 0.32, 1.3);
}
.dial-needle.revving{
  transition: transform 0.45s cubic-bezier(0.16, 0.9, 0.28, 1);
}
.dial-needle.revving-hold{
  animation: dial-idle-bounce 0.5s ease-in-out infinite;
}
@keyframes dial-idle-bounce{
  0%, 100%{ transform: rotate(122deg); }
  50%{ transform: rotate(108deg); }
}
#dial-label-main{ transition: opacity 0.2s ease; }

/* =========================================================
   6. PHOTO STRIP
   ========================================================= */
.photo-strip{ padding:0; border-bottom:1px solid var(--line); }
.photo-strip-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2px; background:var(--black); }
.photo-strip-grid figure{ margin:0; min-height:280px; overflow:hidden; }
.photo-strip-grid img{ width:100%; height:100%; min-height:280px; object-fit:cover; display:block; }

/* =========================================================
   7. SERVICES ("BAYS")
   ========================================================= */
.bays{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
.bay{ background:var(--beige); padding:38px 30px; }
.bay-icon{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin-bottom:18px; color:var(--gold); border:1px solid var(--line); border-radius:50%; }
.bay-icon svg{ width:20px; height:20px; }
.bay h3{ font-size:19px; color:var(--ink); margin-bottom:10px; }
.bay p{ font-size:14.5px; color:var(--ink-soft); margin-bottom:0; }

/* =========================================================
   8. WHY US
   ========================================================= */
.section-dark{ background:var(--black); color:var(--beige); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); margin-top:10px; }
.stat{ background:var(--black); padding:36px 24px; text-align:left; }
.stat .n{ font-family:var(--font-heading); font-size:26px; font-weight:700; color:var(--gold-bright); letter-spacing:0.01em; line-height:1.2; min-height:63px; }
.stat .l{ font-size:13.5px; color:#B7AF9E; margin-top:8px; line-height:1.5; }

/* =========================================================
   9. CALLBACK / FORM
   ========================================================= */
.section-alt{ background:var(--beige-2); }
.cb-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
.cb-grid h2{ font-size:32px; margin-bottom:16px; }
.cb-grid p{ color:var(--ink-soft); margin-bottom:26px; max-width:420px; }
.steps li{ display:flex; gap:16px; padding:14px 0; border-top:1px solid var(--line); }
.steps li:last-child{ border-bottom:1px solid var(--line); }
.steps .s-no{ font-family:var(--font-heading); color:var(--gold-dim); font-size:14px; min-width:24px; }

.form-card{ background:var(--black); padding:40px; color:var(--beige); }
.form-card h3{ color:var(--gold-bright); font-size:20px; margin-bottom:22px; }
.form-card label{ display:block; font-size:13px; color:#B7AF9E; margin-bottom:6px; }
.form-row{ margin-bottom:18px; }
.form-card input, .form-card textarea{
  width:100%; background:var(--charcoal); border:1px solid var(--line);
  color:var(--beige); padding:12px 14px; font-family:var(--font-body); font-size:14.5px;
  transition:border-color var(--dur) ease;
}
.form-card input:focus, .form-card textarea:focus{ border-color:var(--gold); }
.form-card textarea{ min-height:80px; resize:vertical; }
.form-card button{ width:100%; margin-top:8px; }
.form-msg{ margin-top:16px; padding:12px 14px; font-size:14px; border:1px solid var(--line); display:none; }
.form-msg.is-visible{ display:block; }
.form-msg.success{ color:var(--gold-bright); border-color:var(--gold); }
.form-msg.error{ color:#E4A2A2; border-color:#E4A2A2; }
.field-error{ color:#E4A2A2; font-size:12.5px; margin-top:4px; display:none; }
.field-error.is-visible{ display:block; }

/* =========================================================
   10. BRANDS MARQUEE
   ========================================================= */
.brand-marquee{
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:56px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.brand-track{
  display:flex;
  align-items:center;
  width:max-content;
  gap:76px;
  animation:brand-scroll 80s linear infinite;
}
.brand-marquee:hover .brand-track{ animation-play-state:paused; }
@keyframes brand-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.brand-logo{
  height:130px;
  width:auto;
  max-width:280px;
  object-fit:contain;
  transition:transform var(--dur) ease;
  flex-shrink:0;
}
.brand-logo:hover{ transform:translateY(-3px); }
@media (prefers-reduced-motion: reduce){
  .brand-track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
}

/* =========================================================
   11. REVIEWS
   ========================================================= */
.rev-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); }
.rev-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.rev-track{
  display:flex;
  align-items:stretch;
  width:max-content;
  gap:1px;
  animation:rev-scroll 42s linear infinite;
}
.rev-marquee:hover .rev-track{ animation-play-state:paused; }
@keyframes rev-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.rev{ background:var(--black); padding:34px; width:380px; flex-shrink:0; border:1px solid var(--line); }
.rev .gauge{ display:flex; gap:3px; margin-bottom:16px; }
.rev .gauge span{ width:20px; height:6px; background:var(--gold); }
.rev .gauge span.off{ background:var(--charcoal-2); }
.rev p.quote{ font-size:16px; color:#DCD5C4; margin-bottom:18px; }
.rev .who{ font-family:var(--font-heading); font-size:14.5px; color:var(--gold-bright); }
.rev .role{ font-size:12.5px; color:#9C9384; }

/* =========================================================
   12. CONTACT
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:70px; }
.contact-grid h2{ font-size:34px; margin-bottom:18px; }
.contact-grid p{ color:var(--ink-soft); margin-bottom:30px; max-width:440px; }
.info-list li{ display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--line); font-size:14.5px; }
.info-list li:last-child{ border-bottom:1px solid var(--line); }
.info-list .k{ font-family:var(--font-heading); color:var(--gold-dim); min-width:110px; font-size:13px; letter-spacing:0.04em; }
.map-box{
  background:var(--charcoal); min-height:280px; overflow:hidden;
  border:1px solid var(--line);
}
.map-box iframe{ width:100%; height:100%; min-height:280px; border:0; }
.map-box .map-placeholder{
  display:flex; align-items:center; justify-content:center; min-height:280px;
  color:#9C9384; font-family:var(--font-heading); font-size:13px; letter-spacing:0.05em; text-align:center; padding:20px;
}

/* =========================================================
   13. FOOTER
   ========================================================= */
.site-footer{ background:var(--black); color:#8F8674; padding:60px 0 30px; border-top:1px solid var(--line); }
.foot-logo{ margin-bottom:36px; }
.foot-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; margin-bottom:36px; }
.foot-grid h4, .foot-brand-name{ color:var(--beige); font-size:14px; margin-bottom:16px; font-family:var(--font-heading); letter-spacing:0.04em; }
.foot-grid p{ font-size:13.5px; max-width:260px; }
.foot-grid li{ margin-bottom:9px; font-size:13.5px; }
.foot-grid a:hover, .foot-grid a:focus-visible{ color:var(--gold-bright); }
.foot-social{ display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-top:18px; }
.foot-social a{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border:1px solid var(--line); border-radius:50%;
  color:var(--gold-bright); transition:border-color var(--dur) ease, color var(--dur) ease, transform var(--dur) ease;
}
.foot-social a:hover, .foot-social a:focus-visible{ border-color:var(--gold); color:var(--beige); transform:translateY(-2px); }
.foot-social svg{ width:17px; height:17px; }
.foot-bottom{
  border-top:1px solid var(--line); padding-top:24px;
  text-align:center; font-size:12.5px; color:#6D6656;
}

/* =========================================================
   14. SCROLL-REVEAL ANIMATION HOOKS (see assets/js/main.js)
   ========================================================= */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }