/* =========================================================
   Garage Carrosserie JVI – Hoofd stylesheet
   ========================================================= */

/* ---------- Thema & basis ---------- */
:root{
  /* Geel/goud thema */
  --bodyBg:#121212;
  --text:#ffffff;
  --muted:#cbd5e1;

  --primary:#E4A521;    /* header/primair - donker goud */
  --secondary:#FFD75D;  /* knoppen/accents - helder geel */
  --accent:#FFC722;     /* borders/highlights - medium geel */

  --surface:#000000;
  --border:#FFC722;
  --white:#ffffff;

  --shadow: 0 10px 30px rgba(2,6,23,.18);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
}
html{
  scroll-behavior:smooth;
}
body{
  background:var(--bodyBg);
  color:var(--text);
  font-family:'Ledger', serif;
  line-height:1.6;
}

/* Teksten */
h1,h2,h3,h4{
  font-family:'Nixie One', cursive;
  color:var(--secondary);
  margin-top:0;
}
a{
  color:var(--secondary);
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
}

/* Layout container */
.container{
  max-width:1140px;
  margin:0 auto;
  padding:0 20px;
}

/* Grid helpers */
.grid{
  display:grid;
  gap:20px;
}
.grid.cols-2{
  grid-template-columns:1fr 1fr;
}
@media (max-width: 768px){
  .grid.cols-2{
    grid-template-columns:1fr;
  }
}

/* Lijsten zonder bullets */
.list-plain{
  list-style:none;
  margin:0;
  padding:0;
}

/* voorkom margin-collaps tussen main en eerste child (hero) */
main.container{
  padding-top:1px;
}

/* =========================================================
   Header & navigatie
   ========================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--primary);
  border-bottom:0;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:14px;
}

/* Logo */
.logo{
  text-decoration:none;
  color:#fff;
  display:flex;
  align-items:center;
  gap:10px;
}

/* Ronde logo-afbeelding (voor <img class="logo-round">) */
.logo-round{
  width:80px;
  height:80px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--accent);
  box-shadow:0 4px 12px rgba(0,0,0,.45);
}

@media (min-width: 768px){
  .logo-round{
    width:100px;
    height: 100px;
  }
}

/* (oude tekstlogo-stijl, nu eigenlijk niet meer gebruikt)
.logo .mark{
  background:linear-gradient(90deg,var(--secondary),var(--accent));
  color:#000;
  font-weight:700;
  padding:4px 10px;
  border-radius:8px;
  margin-right:8px;
  display:inline-block;
}
*/

/* Desktop nav */
.main-nav{
  display:flex;
  align-items:center;
  gap:10px;
}
.main-nav a{
  color:#fff;
  text-decoration:none;
  padding:8px 12px;
  border-radius:10px;
  transition:.2s;
  white-space:nowrap;
}
.main-nav a:hover{
  background:rgba(255,255,255,.12);
}
.main-nav a.active{
  background:rgba(255,255,255,.18);
  font-weight:600;
}
.social a{
  color:#fff;
  margin-left:10px;
}

/* Mobile nav toggle */
.nav-toggle{
  display:none;
  position:relative;
  width:40px;
  height:40px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:10px;
  background:transparent;
}
.nav-toggle span{
  position:absolute;
  left:9px;
  right:9px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:.2s;
}
.nav-toggle span:nth-child(1){top:12px}
.nav-toggle span:nth-child(2){top:19px}
.nav-toggle span:nth-child(3){top:26px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

/* Mobile nav overlay */
.nav-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  backdrop-filter:blur(2px);
  z-index:40;
}

@media (max-width: 900px){
  .hide-mobile{
    display:none;
  }
  .nav-toggle{
    display:inline-block;
  }
  .main-nav{
    position:fixed;
    top:64px;
    right:16px;
    left:16px;
    background:#0b0b0b;
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:var(--shadow);
    padding:12px;
    flex-direction:column;
    gap:6px;
    transform:translateY(-20px);
    opacity:0;
    pointer-events:none;
    transition:.2s;
    z-index:50;
  }
  .main-nav.open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .nav-backdrop.active{
    display:block;
  }
}

/* =========================================================
   Buttons & cards
   ========================================================= */

.btn{
  background-color:var(--secondary);
  color:#000;
  text-decoration:none;
  padding:12px 18px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--secondary);
  cursor:pointer;
  box-shadow:none;
  transition:
    transform .15s ease,
    box-shadow .2s ease,
    background .2s ease,
    color .2s ease;
}
.btn:hover{
  background:transparent;
  color:var(--secondary);
  text-decoration:none;
}
.btn.small{
  padding:9px 14px;
}
.btn.outline{
  background:transparent;
  color:var(--secondary);
  border:1px solid var(--secondary);
}
.btn.whatsapp{
  background:linear-gradient(90deg,#25D366,#128C7E);
  color:#fff;
  border-color:transparent;
}

/* Kaarten */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  color:#fff;
  box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .2s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 45px rgba(2,6,23,.24);
}

/* =========================================================
   Hero
   ========================================================= */

.hero{
  position:relative;
  margin-top:18px;
  padding:52px 28px;
  border-radius:22px;
  color:#fff;
  background:
    linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.35)),
    radial-gradient(1000px 420px at 100% -20%, rgba(255,215,93,.25), transparent 60%),
    linear-gradient(135deg,#0b0b0b,#151922 60%, #192035);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.hero h1{
  color:var(--secondary);
  font-size:clamp(28px,5vw,44px);
  line-height:1.15;
  margin:0 0 10px;
}
.hero p{
  margin:0 0 16px;
}
.hero .badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#000;
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 10px;
}

/* Hero met foto (home) */
.hero.has-photo{
  margin-top:0;
  border-top:0;
  border-radius:0 0 22px 22px;
  overflow:hidden;              /* clip binnen radius */
  min-height:clamp(260px, 42vw, 520px);
  padding:clamp(22px,6vw,52px) 28px;
  isolation:isolate;
  position:relative;
}

/* Achtergrondlaag strikt binnen hero */
.hero.has-photo > .hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  overflow:hidden;
  clip-path: inset(0 round 0 0 22px 22px);
  -webkit-mask-image: radial-gradient(white, white);
          mask-image: radial-gradient(white, white);
}
.hero.has-photo > .hero-bg picture,
.hero.has-photo > .hero-bg img{
  width:100%;
  height:100%;
  display:block;
}
.hero.has-photo > .hero-bg img{
  object-fit:cover;
  filter:saturate(1.05) contrast(1.05);
}
.hero.has-photo > *:not(.hero-bg){
  position:relative;
  z-index:2;
}

/* =========================================================
   Media helpers
   ========================================================= */

.media{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:12px;
  border:1px solid var(--border);
  background:#000;
}
.media.ratio-16x9{
  aspect-ratio:16/9;
}
.media.ratio-4x3{
  aspect-ratio:4/3;
}
.media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================================================
   Forms (afspraak / contact / reviews)
   ========================================================= */

main form{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:24px 24px 28px;
  box-shadow:var(--shadow);
  max-width:720px;
  margin:28px auto;
  display:grid;
  gap:18px;
}

/* Formulier dat binnen een .card staat (zoals contact/reviews/afspraak):
   gebruik alleen de buitenste card als "blok". */
.card > form{
  background:transparent;
  border:none;
  box-shadow:none;
  border-radius:0;
  padding:8px 0 0;
  margin:0;
  max-width:none;
}

main form h1,
main form h2{
  text-align:center;
  margin:0 0 6px;
  font-size:1.35rem;
}

main form .form-intro{
  text-align:center;
  color:var(--muted);
  margin:0 0 12px;
  font-size:0.95rem;
}

/* labels */
main form label{
  display:block;
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#9ca3af;
}

/* 2‑koloms layout binnen formulieren */
main form .form-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px 20px;
}
main form .form-grid .full{
  grid-column:1 / -1;
}
@media (max-width: 640px){
  main form .form-grid{
    grid-template-columns:1fr;
  }
}

/* elke kolom in form-grid als nette field */
main form .form-grid > div{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* algemene velden */
main form input[type="text"],
main form input[type="email"],
main form input[type="tel"],
main form input[type="date"],
main form input[type="time"],
main form input[type="number"],
main form input[type="password"],
main form select,
main form textarea{
  width:100%;
  padding:11px 13px;
  border-radius:12px;
  border:1px solid rgba(255,199,34,0.75);
  background:#020617;
  color:#fff;
  font-family:inherit;
  font-size:0.95rem;
  outline:none;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease,
    transform .1s ease;
}

main form input::placeholder,
main form textarea::placeholder{
  color:#64748b;
}

main form input:hover,
main form select:hover,
main form textarea:hover{
  background:#020617;
  border-color:var(--secondary);
}

main form input:focus,
main form select:focus,
main form textarea:focus{
  border-color:var(--secondary);
  box-shadow:0 0 0 1px rgba(255,215,93,0.45);
  background:#020617;
  transform:translateY(-1px);
}

main form textarea{
  min-height:130px;
  resize:vertical;
}

/* Checkbox / radio */
main form input[type="checkbox"],
main form input[type="radio"]{
  width:auto;
  margin-right:6px;
}

/* Submit-knop */
main form .btn,
main form button[type="submit"],
main form input[type="submit"]{
  justify-content:center;
  margin-top:8px;
}

/* Als je onderaan tekst kwijt wilt (bv. "* verplichte velden") */
main form .form-hint{
  font-size:0.8rem;
  color:#64748b;
  margin-top:4px;
}
/* Prijsregels (mechaniek-pagina) */
.price-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:3px 0;
  border-bottom:1px solid rgba(255,199,34,0.3);
  font-size:0.95rem;
}
.price-row:last-of-type{
  border-bottom:none;
}
.price-row span:last-child{
  font-weight:600;
}

/* =========================================================
   Reviews – afzonderlijke blokjes in lijst
   ========================================================= */

.stars{
  color:#facc15;
  letter-spacing:1px;
}

.reviews-list{
  display:grid;
  gap:16px;
  grid-template-columns:1fr 1fr;
  margin-top:8px;
}

@media (max-width: 768px){
  .reviews-list{
    grid-template-columns:1fr;
  }
}

.review{
  background:#020617;
  border:1px solid rgba(255,199,34,0.75);
  border-radius:14px;
  padding:14px 16px;
  box-shadow:0 10px 24px rgba(2,6,23,.25);
}

.review .stars{
  color:#facc15;
  font-size:1rem;
}

.review p{
  margin:6px 0 10px;
}

.review .muted{
  font-size:0.85rem;
  color:#9ca3af;
}

/* =========================================================
   Flash-meldingen
   ========================================================= */

.flash{
  margin:16px auto 10px;
  max-width:600px;
  padding:10px 14px;
  border-radius:10px;
  font-size:0.92rem;
}
.flash.success{
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.6);
  color:#bbf7d0;
}
.flash.error{
  background:rgba(248,113,113,.12);
  border:1px solid rgba(248,113,113,.6);
  color:#fecaca;
}
.flash.info{
  background:rgba(255,199,34,.12);
  border:1px solid rgba(255,199,34,.6);
  color:#fef3c7;
}

/* =========================================================
   Floating WhatsApp knop
   ========================================================= */

.floating-whatsapp{
  position:fixed;
  right:20px;
  bottom:20px;
  width:52px;
  height:52px;
  border-radius:50%;
  background:linear-gradient(135deg,#25D366,#128C7E);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  border:none;
  box-shadow:0 12px 30px rgba(0,0,0,0.45);
  z-index:60;
}
.floating-whatsapp i{
  font-size:24px;
}
.floating-whatsapp:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(0,0,0,0.6);
  text-decoration:none;
}

/* =========================================================
   Footer
   ========================================================= */

.site-footer{
  background:#05070b;
  color:var(--muted);
  margin-top:40px;
  padding:32px 0 16px;
  border-top:1px solid rgba(255,199,34,0.28);
  font-size:0.95rem;
}

.site-footer a{
  color:inherit;
  text-decoration:none;
}
.site-footer a:hover{
  color:var(--secondary);
  text-decoration:underline;
}

/* Flexbox layout: kolommen naast elkaar */
.footer-grid{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.footer-col{
  flex:1 1 220px;
  min-width:220px;
}

.footer-col h4{
  margin:0 0 8px;
  font-size:0.98rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:#fff;
}
.footer-col p{
  margin:0 0 8px;
}

.site-footer .list-plain{
  list-style:none;
  margin:0;
  padding:0;
}
.site-footer .list-plain li{
  margin-bottom:4px;
}

.site-footer .social a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:6px;
}
.site-footer .social i{
  width:18px;
  text-align:center;
}

.copyright{
  margin-top:24px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,0.06);
  text-align:center;
  font-size:0.82rem;
  color:#888;
}