/*
Theme Name: Scooter Centre West Premium OnePage v3.4 SEO
Theme URI: https://scootercentrewest.nl/
Author: ChatGPT
Description: Premium one-page thema in lichte Vespa-stijl met Bel-ons CTA, sticky call bar, animaties, diensten, prijzen, galerij, contactformulier en basis SEO-optimalisatie.
Version: 3.4
Text Domain: scw-premium-v34
*/

:root {
  --scw-bg: #f5f0e8;
  --scw-bg-alt: #ffffff;
  --scw-primary: #c96f4a;
  --scw-accent: #b08c5a;
  --scw-text: #1f2933;
  --scw-muted: #6b7280;
  --scw-border: #e5ded2;
}

*,
*::before,
*::after { box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  margin:0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: radial-gradient(circle at top, #faf4ec 0, #f1e5d3 40%, #e5d5c0 100%);
  color:var(--scw-text);
}

/* Header */

.site-header {
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter: blur(14px);
  background: rgba(250,245,235,0.96);
  border-bottom:1px solid rgba(209,213,219,0.5);
}
.site-header-inner {
  max-width:1200px;
  margin:0 auto;
  padding:10px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.site-branding {
  display:flex;
  align-items:center;
  gap:10px;
}
.site-logo {
  height:42px;
  width:auto;
}
.site-title-text {
  font-weight:800;
  letter-spacing:.08em;
  font-size:14px;
  text-transform:uppercase;
}
.site-nav a {
  text-decoration:none;
  margin-left:18px;
  font-size:14px;
  color:var(--scw-muted);
  position:relative;
}
.site-nav a::after {
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:2px;
  background:var(--scw-primary);
  transition:width .18s ease;
}
.site-nav a:hover {
  color:var(--scw-text);
}
.site-nav a:hover::after {
  width:100%;
}
.site-nav .cta {
  margin-left:24px;
  padding:8px 18px;
  border-radius:999px;
  background:var(--scw-primary);
  color:#fff;
  box-shadow:0 6px 16px rgba(201,111,74,0.45);
}

/* Layout */

section {
  padding:70px 20px;
}
.section-inner {
  max-width:1200px;
  margin:0 auto;
}

/* Hero */

.hero {
  background: linear-gradient(135deg,#fdf8f2,#f3e5d3);
  border-bottom:1px solid var(--scw-border);
}
.hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);
  gap:40px;
  align-items:center;
}
.hero-eyebrow {
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--scw-accent);
}
.hero-title {
  font-size:38px;
  margin:10px 0 10px;
}
.hero-sub {
  font-size:16px;
  color:var(--scw-muted);
  margin-bottom:20px;
}
.hero-badges {
  font-size:18px;
  color:#f59e0b;
  margin-bottom:20px;
}
.hero-actions .btn {
  margin-right:10px;
}
.hero-media {
  position:relative;
}
.hero-media::before {
  content:"";
  position:absolute;
  inset:12%;
  border-radius:24px;
  background: radial-gradient(circle at top,#ffffffaa,transparent 60%);
  z-index:0;
}
.hero-media img {
  position:relative;
  z-index:1;
  width:100%;
  border-radius:24px;
  box-shadow:0 22px 50px rgba(148,123,94,0.55);
  object-fit:cover;
}

/* Buttons */

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 22px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease, background .18s ease, color .18s ease;
}
.btn-primary {
  background:var(--scw-primary);
  color:#fff;
  box-shadow:0 10px 24px rgba(201,111,74,0.55);
}
.btn-primary:hover {
  transform:translateY(-1px);
  box-shadow:0 16px 32px rgba(201,111,74,0.65);
}
.btn-outline {
  background:transparent;
  color:var(--scw-text);
  border:1px solid rgba(148,163,184,0.7);
}
.btn-outline:hover {
  background:#fff;
}

/* Sections shared */

.section-title {
  font-size:26px;
  margin:0 0 8px;
}
.section-sub {
  margin:0 0 26px;
  color:var(--scw-muted);
}

.grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:22px;
}
.card {
  background:var(--scw-bg-alt);
  border-radius:18px;
  padding:22px 22px 20px;
  border:1px solid rgba(209,213,219,0.7);
  box-shadow:0 10px 26px rgba(148,123,94,0.08);
}
.card h3 {
  margin-top:0;
  margin-bottom:6px;
  font-size:18px;
}
.card p {
  margin:0;
  font-size:14px;
  color:var(--scw-muted);
}

/* Service icons */

.service-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:999px;
  background:#f3d0bc;
  color:var(--scw-primary);
  font-size:20px;
  margin-bottom:10px;
}

/* Price cards */

.price-item h3 {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.price-item h3 span {
  font-size:15px;
  color:var(--scw-text);
}

/* Vespa service image smaller */

#vespa-service img {
  max-width:350px;
  width:100%;
  height:auto;
  border-radius:18px;
  display:block;
  margin:0 auto;
}

/* Gallery */

.gallery-grid img {
  width:100%;
  border-radius:18px;
  object-fit:cover;
  height:220px;
  box-shadow:0 12px 30px rgba(148,123,94,0.45);
}

/* Contact */

.contact-card {
  background:var(--scw-bg-alt);
  border-radius:20px;
  padding:24px 24px 22px;
  border:1px solid rgba(209,213,219,0.8);
  box-shadow:0 14px 36px rgba(148,123,94,0.20);
}

/* CF7 basic styling */

.wpcf7 form p {
  margin-bottom:14px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--scw-border);
  background:#faf7f2;
  font-size:14px;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  outline:none;
  border-color:var(--scw-primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(201,111,74,0.2);
}
.wpcf7 input[type="submit"] {
  background:var(--scw-primary);
  color:#fff;
  padding:11px 22px;
  border-radius:999px;
  border:none;
  font-weight:600;
  cursor:pointer;
}

/* Footer */

.site-footer {
  padding:28px 20px 64px;
  text-align:center;
  font-size:13px;
  color:var(--scw-muted);
  border-top:1px solid rgba(209,213,219,0.7);
  background:#faf5ef;
}

/* Sticky mobile call bar */

.mobile-call-bar {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:var(--scw-primary);
  color:#fff;
  text-decoration:none;
  display:none;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  font-size:15px;
  font-weight:600;
  box-shadow:0 -4px 18px rgba(0,0,0,0.25);
  z-index:50;
}
.mobile-call-bar span {
  margin-left:6px;
}

/* Reveal animations */

.reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.reveal-visible {
  opacity:1;
  transform:translateY(0);
}
.reveal[data-delay="1"] { transition-delay:.05s; }
.reveal[data-delay="2"] { transition-delay:.12s; }
.reveal[data-delay="3"] { transition-delay:.20s; }
.reveal[data-delay="4"] { transition-delay:.28s; }

@media (max-width:900px){
  .hero-grid {
    grid-template-columns:1fr;
  }
  .site-nav {
    display:none;
  }
}

/* Show sticky call bar on small screens */
@media (max-width:768px){
  .mobile-call-bar {
    display:flex;
  }
}