/* ==================================================
   EV Camper Brand Styles (Standalone) - Fluid Type
   ================================================== */

:root {
  /* ==================================================
     Brand colors
     ================================================== */
  --color-green: #457A72;   /* primary */
  --color-accent: #FFA500;  /* accent/CTA */
  --color-white: #FFFFFF;
  --color-light-gray: #E6E6E6;
  --color-dark-gray: #66615C;
  --color-black: #000000;

  /* ==================================================
     Typography – Base
     ================================================== */
  --font-body: 'Inter', sans-serif;
  --font-heading: 'Poppins', sans-serif;
  --font-main: var(--font-body); 
  --font-family: var(--font-body);

  --weight-300: 300;
  --weight-400: 400;
  --weight-500: 500;

  /* ==================================================
     Fluid Type Scale with CSS clamp()
     ================================================== */

  /* Display (voor hero’s / grote headings optioneel) */
  --display-lg-size: clamp(1.959rem, calc(1.577rem + 1.909vw), 3.008rem);
  --display-lg-weight: 700;
  --display-lg-line-height: 1.55;
  --display-lg-letter-spacing: 0.015em;

  --display-md-size: clamp(1.801rem, calc(1.502rem + 1.492vw), 2.622rem);
  --display-md-weight: 700;
  --display-md-line-height: 1.55;
  --display-md-letter-spacing: 0.015em;

  /* Headings */
  --h1-size: clamp(1.656rem, calc(1.427rem + 1.143vw), 2.284rem);
  --h1-weight: 700;
  --h1-line-height: 1.55;
  --h1-letter-spacing: 0.02em;

  --h2-size: clamp(1.399rem, calc(1.278rem + 0.609vw), 1.734rem);
  --h2-weight: 600;
  --h2-line-height: 1.55;
  --h2-letter-spacing: 0.02em;

  --h3-size: clamp(1.287rem, calc(1.205rem + 0.409vw), 1.511rem);
  --h3-weight: 600;
  --h3-line-height: 1.6;
  --h3-letter-spacing: 0.025em;

  --h4-size: clamp(1.183rem, calc(1.134rem + 0.244vw), 1.317rem);
  --h4-weight: 500;
  --h4-line-height: 1.6;
  --h4-letter-spacing: 0.025em;

  --h5-size: clamp(1.134rem, calc(1.100rem + 0.173vw), 1.229rem);
  --h5-weight: 500;
  --h5-line-height: 1.6;
  --h5-letter-spacing: 0.03em;

  --h6-size: clamp(1.088rem, calc(1.066rem + 0.109vw), 1.148rem);
  --h6-weight: 500;
  --h6-line-height: 1.6;
  --h6-letter-spacing: 0.03em;

  /* Body text */
  --body-xl-size: clamp(1.043rem, calc(1.033rem + 0.052vw), 1.071rem);
  --body-xl-weight: 400;
  --body-xl-line-height: 1.6;
  --body-xl-letter-spacing: 0.03em;

  --body-size: clamp(1.000rem, calc(1.000rem + 0.000vw), 1.000rem);
  --body-weight: 400;
  --body-line-height: 1.6;
  --body-letter-spacing: 0.03em;

  --body-sm-size: clamp(0.959rem, calc(0.968rem + -0.046vw), 0.933rem);
  --body-sm-weight: 400;
  --body-sm-line-height: 1.65;
  --body-sm-letter-spacing: 0.03em;

  /* Captions / overline (optioneel te gebruiken) */
  --caption-lg-size: clamp(0.919rem, calc(0.937rem + -0.087vw), 0.871rem);
  --caption-lg-weight: 400;
  --caption-lg-line-height: 1.65;
  --caption-lg-letter-spacing: 0.03em;

  --caption-size: clamp(0.882rem, calc(0.906rem + -0.124vw), 0.813rem);
  --caption-weight: 400;
  --caption-line-height: 1.65;
  --caption-letter-spacing: 0.03em;

  --caption-sm-size: clamp(0.845rem, calc(0.877rem + -0.156vw), 0.759rem);
  --caption-sm-weight: 300;
  --caption-sm-line-height: 1.65;
  --caption-sm-letter-spacing: 0.03em;

  --overline-size: clamp(0.811rem, calc(0.848rem + -0.185vw), 0.709rem);
  --overline-weight: 500;
  --overline-line-height: 1.65;
  --overline-letter-spacing: 0.03em;

  /* Voor oudere styles die nog naar --lh-base verwijzen */
  --lh-base: var(--body-line-height);

  /* Paragraph presets (legacy mapping, nu op fluid body-sizes) */
  --p1-size: var(--body-xl-size);
  --p2-size: var(--body-size);
  --p3-size: var(--body-sm-size);
  --p-weight: 300;

  /* Buttons */
  --btn-padding-y: 0.9em;
  --btn-padding-x: 2.004em;
  --btn-radius: 9999px; /* pill */
}

body {
  font-family: var(--font-body);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

/* ==================================================
   Base
   ================================================== */
html,
body {
  font-family: var(--font-main);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  color: var(--color-dark-gray);
  background-color: var(--color-white);
}

/* ==================================================
   Headings (fluid)
   ================================================== */
h1 {
  font-size: var(--h1-size);
  line-height: var(--h1-line-height);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-letter-spacing);
  color: var(--color-black);
}

h2 {
  font-size: var(--h2-size);
  line-height: var(--h2-line-height);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-letter-spacing);
  color: var(--color-black);
}

h3 {
  font-size: var(--h3-size);
  line-height: var(--h3-line-height);
  font-weight: var(--h3-weight);
  letter-spacing: var(--h3-letter-spacing);
  color: var(--color-black);
}

h4 {
  font-size: var(--h4-size);
  line-height: var(--h4-line-height);
  font-weight: var(--h4-weight);
  letter-spacing: var(--h4-letter-spacing);
  color: var(--color-black);
}

h5 {
  font-size: var(--h5-size);
  line-height: var(--h5-line-height);
  font-weight: var(--h5-weight);
  letter-spacing: var(--h5-letter-spacing);
  color: var(--color-black);
}

h6 {
  font-size: var(--h6-size);
  line-height: var(--h6-line-height);
  font-weight: var(--h6-weight);
  letter-spacing: var(--h6-letter-spacing);
  color: var(--color-black);
}

/* Optionele utility classes voor displays */
.display-lg {
  font-size: var(--display-lg-size);
  line-height: var(--display-lg-line-height);
  font-weight: var(--display-lg-weight);
  letter-spacing: var(--display-lg-letter-spacing);
}

.display-md {
  font-size: var(--display-md-size);
  line-height: var(--display-md-line-height);
  font-weight: var(--display-md-weight);
  letter-spacing: var(--display-md-letter-spacing);
}

/* ==================================================
   Paragraph presets
   ================================================== */
/* Grotere bodytekst (bijv. intro) */
.p1 {
  font-size: var(--p1-size);
  font-weight: var(--p-weight);
  line-height: var(--body-xl-line-height);
  letter-spacing: var(--body-xl-letter-spacing);
}

/* Standaard bodytekst */
.p2 {
  font-size: var(--p2-size);
  font-weight: var(--p-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
}

/* Kleinere toelichtingen / voetnoten */
.p3 {
  font-size: var(--p3-size);
  font-weight: var(--p-weight);
  line-height: var(--body-sm-line-height);
  letter-spacing: var(--body-sm-letter-spacing);
}

/* ==================================================
   Links
   ================================================== */
a {
  color: var(--color-green);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
a:hover,
a:focus {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ==================================================
   Buttons (pill)
   ================================================== */
button,
input[type="button"],
input[type="submit"],
.btn,
.zpbutton {
  font-family: var(--font-main);
  font-weight: var(--weight-500);
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--color-white) !important;
  background-color: var(--color-accent) !important;
  border: none !important;
  outline: 0 !important;
  border-radius: var(--btn-radius) !important;
  padding: var(--btn-padding-y) var(--btn-padding-x) !important;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.1s ease;
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.btn:hover,
.zpbutton:hover {
  background-color: var(--color-green) !important;
  transform: scale(1.02);
}
button:disabled,
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Focus visibility for accessibility */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ==================================================
   Utilities
   ================================================== */
.bg-green  { background-color: var(--color-green); color: var(--color-white); }
.bg-accent { background-color: var(--color-accent); color: var(--color-white); }
.bg-light  { background-color: var(--color-light-gray); }
.bg-dark   { background-color: var(--color-dark-gray); color: var(--color-white); }

.text-green  { color: var(--color-green) !important; }
.text-accent { color: var(--color-accent) !important; }
.text-dark   { color: var(--color-dark-gray) !important; }
.text-light  { color: var(--color-light-gray) !important; }
.text-white  { color: var(--color-white) !important; }
.text-black  { color: var(--color-black) !important; }

/* Spacing helpers */
.mt-1 { margin-top: 0.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-2 { margin-bottom: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-3 { margin-bottom: 1.5rem; }

.pt-1 { padding-top: 0.5rem; }
.pb-1 { padding-bottom: 0.5rem; }
.pt-2 { padding-top: 1rem; }
.pb-2 { padding-bottom: 1rem; }
.pt-3 { padding-top: 1.5rem; }
.pb-3 { padding-bottom: 1.5rem; }

/* Geen extra responsive heading-tweaks meer nodig:
   clamp() regelt de schaal nu automatisch. */

.hero-slide {
  overflow: hidden;              /* zorgt voor nette randen */
  display: block;
  animation: heroZoomPan 18s ease-in-out infinite;
  will-change: transform;
}

/* Voor img binnen de hero-slide (indien je een img-tag gebruikt) */

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: heroZoomPan 18s ease-in-out infinite;
  will-change: transform;
}

@keyframes heroZoomPan {
  0% {
    transform: scale(1) translate(0, 0);
  }
  40% {
    transform: scale(1.06) translate(-8px, -4px);
  }
  70% {
    transform: scale(1.1) translate(-15px, -8px);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}