/*
Theme Name: autorozendaalg
Text Domain: autorozendaalg
Author: BlueCT Factory
Description: Classic PHP theme for Autobedrijf Rozendaal (Engine C)
Version: 1.0.0
*/

/* Concept: Precision garage — confident navy and electric blue with energetic orange accents; engineered type pairing (Sora display + Inter Tight body); sharp 2px radii; hairline rules; peek of motion on reveal. Icons: Lucide (clean 1.5px stroke). */

:root{
  /* Palette (brand-guided) */
  --brand-blue:#0878C2;
  --brand-blue-dark:#065FA0;
  --navy:#0D1F3C; /* primary CTA fill */
  --navy-2:#162B50;
  --accent:#E8832A; /* use for large fills/icons, not small text */
  --accent-strong:#C96B18;
  --cream:#FAF9F7; /* light surface */
  --sky:#DCEDF8;
  --ink:#111827; /* text */
  --muted:#6B7280;
  --success:#1F6B35;

  /* Contrast-safe tokens */
  --btn-fill: var(--navy);
  --btn-label: #FFFFFF; /* WCAG AA on navy */
  --btn-fill-hover: #0b274e;
  --accent-text:#7a3a10; /* darkened accent for small text, ≥4.5:1 on light bg */

  /* Type scale */
  --step--1: clamp(.9rem, .95vw, .95rem);
  --step-0: clamp(1.0625rem, 1vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.5vw, 1.375rem);
  --step-2: clamp(1.5rem, 2vw, 1.75rem);
  --step-3: clamp(1.9rem, 3vw, 2.25rem);
  --step-4: clamp(2.6rem, 5.5vw, 4.25rem); /* display */

  /* Spacing */
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-18: 4.5rem;
  --space-28: 7rem;

  /* Radius */
  --radius: 10px;

  /* Fonts */
  --font-display: 'Sora', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  --font-body: 'Inter Tight', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
}

/* Icons: Lucide — clean, consistent line icons fit the engineered, modern aesthetic. */

html{font-size:16px; scroll-behavior:smooth}
body{font-family:var(--font-body); font-size:var(--step-0); line-height:1.65; color:var(--ink); background:#fff}

.container{max-width:1280px; margin-inline:auto; padding-inline:clamp(1rem,5vw,2rem)}
section{padding-block:clamp(4rem,9vw,7rem)}

h1,h2,h3{font-family:var(--font-display); letter-spacing:-0.01em; color:var(--navy)}
h1{font-size:var(--step-4); line-height:1.08}
h2{font-size:var(--step-3); line-height:1.12}
h3{font-size:var(--step-2); line-height:1.18}

.lead{font-size:var(--step-1); color:var(--ink)}
.eyebrow{font-size:var(--step--1); text-transform:uppercase; letter-spacing:.08em; color:var(--accent-text); font-weight:600}

.prose{}
.prose--longform{max-width:760px; margin-inline:auto}

/* Header & Nav */
.site-header{position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid #e5e7eb}
.site-header .brand{display:flex; align-items:center; gap:.75rem}
.site-title{font-family:var(--font-display); font-size:1.25rem; font-weight:700; color:var(--navy)}
.primary-nav{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.nav-menu{display:flex; gap:1rem; align-items:center}
.nav-menu a{color:var(--navy); text-decoration:none; padding:.75rem .25rem; border-radius:6px}
.nav-menu a:hover{color:var(--brand-blue)}
.nav-toggle{display:none; background:none; border:1px solid #e5e7eb; padding:.5rem .75rem; border-radius:8px}

/* Prevent cascade trap: buttons keep their label color inside nav/footer */
.primary-nav .btn, .site-footer .btn{color:var(--btn-label)}

@media (max-width: 900px){
  .nav-toggle{display:inline-flex; align-items:center; gap:.5rem}
  .nav-menu{display:none; position:fixed; inset:auto 0 0 0; top:64px; background:#fff; flex-direction:column; padding:1rem; border-top:1px solid #e5e7eb}
  .nav-menu.is-open{display:flex}
  .nav-menu a:not(.btn){display:block; width:100%; padding:.9rem .5rem}
}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:.5rem; font-weight:700; border-radius:999px; padding:.8rem 1.2rem; text-decoration:none; border:1.5px solid transparent; transition:background-color .2s ease, color .2s ease, border-color .2s ease}
.btn--primary{background:var(--btn-fill); color:var(--btn-label)}
.btn--primary:hover{background:var(--btn-fill-hover)}
.btn--ghost{background:transparent; color:var(--navy); border-color:var(--navy)}
.btn--ghost:hover{background:#f3f4f6}

.badge{display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .5rem; border-radius:999px; font-weight:600; font-size:.85rem; background:var(--cream); color:var(--accent-text)}

/* Hero */
.hero{position:relative; overflow:hidden}
.hero .bg{position:absolute; inset:0; z-index:-1}
.hero .bg img{width:100%; height:100%; object-fit:cover}
.hero .scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,31,60,.55), rgba(13,31,60,.2) 50%, rgba(13,31,60,.65))}
.hero .content{color:#fff}
.hero h1,.hero p{color:#fff}
.hero .meta{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1rem}

/* Grids */
.grid{display:grid; gap:1.25rem}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width: 999px){.grid--3,.grid--4{grid-template-columns:1fr 1fr}}
@media (max-width: 599px){.grid--3,.grid--4{grid-template-columns:1fr}}
.card{background:#fff; border:1px solid #e5e7eb; border-radius:var(--radius); overflow:hidden}
.card .pad{padding:1rem}
.card h3{margin:0 0 .25rem}
.card .meta{color:var(--muted); font-size:.95rem}

/* Testimonials */
.quote{background:#fff; border-left:3px solid var(--brand-blue); padding:1rem; border-radius:6px}
.quote cite{display:block; color:var(--muted); margin-top:.5rem}

/* CTA band */
.cta-band{background:var(--navy); color:#fff}
.cta-band h2{color:#fff}
.cta-band .actions{display:flex; gap:.75rem; flex-wrap:wrap}

/* Footer */
.site-footer{background:var(--navy-2); color:#e5e7eb}
.site-footer a{color:#e5e7eb}
.site-footer .columns{display:grid; gap:2rem; grid-template-columns:2fr 1fr 1fr 1fr}
@media (max-width: 999px){.site-footer .columns{grid-template-columns:1fr 1fr}}
@media (max-width: 599px){.site-footer .columns{grid-template-columns:1fr}}
.site-footer h3{color:#fff}
.site-footer .legal{border-top:1px solid rgba(255,255,255,.1); margin-top:2rem; padding-top:1rem; font-size:.95rem; display:flex; justify-content:space-between; flex-wrap:wrap}
.site-footer .badges{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}
.site-footer .btn{color:var(--btn-label)}

/* Skip link */
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; background:#fff; color:#000; padding:.5rem .75rem; border-radius:6px; z-index:50}

/* Reveal */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .4s ease-out, transform .4s ease-out}
.reveal.is-visible{opacity:1; transform:none}

/* Forms (Forminator seam) */
.forminator-custom-form input[type="text"],
.forminator-custom-form input[type="email"],
.forminator-custom-form input[type="tel"],
.forminator-custom-form input[type="url"],
.forminator-custom-form input[type="number"],
.forminator-custom-form textarea,
.forminator-custom-form select{width:100%; font-family:var(--font-body); color:var(--ink); background:#fff; border:1.5px solid #d1d5db; border-radius:var(--radius); padding:.8rem 1rem}
.forminator-custom-form input:focus,
.forminator-custom-form textarea:focus,
.forminator-custom-form select:focus{outline:none; border-color:var(--brand-blue); box-shadow:0 0 0 3px rgba(8,120,194,.15)}
.forminator-custom-form label{font-weight:600; color:var(--ink)}
.forminator-custom-form .forminator-button, .forminator-custom-form button[type=submit]{background:var(--btn-fill); color:var(--btn-label); border:none; border-radius:999px; padding:.9rem 1.2rem; font-weight:700}
.forminator-custom-form .forminator-button:hover, .forminator-custom-form button[type=submit]:hover{background:var(--btn-fill-hover)}

/* Sticky mobile call bar (opt-in) */
.sticky-call{position:fixed; bottom:0; inset-inline:0; background:var(--navy); color:#fff; padding:.5rem 1rem; display:none; align-items:center; justify-content:center; gap:1rem; z-index:45}
@media (max-width: 900px){ .sticky-call{display:flex} }

/* Accessibility */
a:focus-visible, button:focus-visible{outline:3px solid var(--brand-blue); outline-offset:2px; border-radius:6px}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  .reveal{opacity:1 !important; transform:none !important}
}