/* ============================================================
   Energy-Check — base.css
   CSS Custom Properties · Reset · Layout Helpers
   ============================================================ */

/* Huisstijl-typografie: Rubik voor koppen/titels (WP Masters 2026).
   Bodytekst = Google Sans (geen publieke webfont) → Roboto/system fallback. */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap');

/* --- Custom Properties ------------------------------------ */
:root {
  /* Brand — primair (donker-teal conform WP Masters-richtlijn #003941) */
  --ec-teal:          #003941;
  --ec-teal-rgb:      0, 57, 65;
  --ec-teal-muted:    #5a7a7e;
  --ec-teal-soft:     #3a6a6a;
  --ec-info-bg:       rgba(25, 218, 227, 0.08);
  --ec-primary:       #003941;

  /* Brand — licht-groen accentkleuren (WP Masters): mint voor blokjes/kaarten,
     diep-groen voor titels op lichte kaarten. */
  --ec-mint:          #EFFFE9;
  --ec-green-deep:    #178541;

  /* Brand — accent + blauw-gradient (huisstijl-richtlijnen WP Masters 2026).
     Blauw #19dae3 = logo/accent · Gradient-Blauw #74f8fb → #52a3b6. */
  --ec-accent:        #19dae3;
  --ec-blue-start:    #74f8fb;
  --ec-blue-end:      #52a3b6;
  --ec-gradient-blue: linear-gradient(135deg, var(--ec-blue-start), var(--ec-blue-end));

  /* Brand — gradient groen */
  --ec-green-start:   #94f095;
  --ec-green-end:     #046a36;
  --ec-gradient-green:linear-gradient(135deg, var(--ec-green-start), var(--ec-green-end));

  /* Brand — achtergrond */
  --ec-pastel:        #f2ffeb;
  --ec-pastel-rgb:    242, 255, 235;

  /* Card-achtergrond (huisstijl groen-gradient, leesbaar voor donkere tekst) */
  --ec-card-gradient-start: #94f095;
  --ec-card-gradient-end:   #5cb86f;

  /* Brand — CTA / highlight */
  --ec-yellow:        #ffbc42;
  --ec-yellow-hover:  #e8a52e;

  /* Neutrals */
  --ec-white:         #ffffff;
  --ec-gray-50:       #f7f8fa;
  --ec-gray-100:      #edf0f3;
  --ec-gray-200:      #e2e8ed;
  --ec-gray-400:      #94a3b8;
  --ec-gray-600:      #64748b;
  --ec-gray-800:      #1a2e35;

  /* Semantisch */
  --ec-success:       #046a36;
  --ec-warning:       #e8a52e;
  --ec-danger:        #c0392b;
  --ec-info:          #19dae3;

  /* Status-banners */
  --ec-status-green-bg:  #e6f9e8;
  --ec-status-green-fg:  #046a36;
  --ec-status-orange-bg: #fff4e0;
  --ec-status-orange-fg: #b87800;
  --ec-status-yellow-bg: #fff3cd;
  --ec-status-yellow-fg: #856404;
  --ec-status-red-bg:    #fde8e6;
  --ec-status-red-fg:    #c0392b;

  /* Typografie */
  --ec-font-body:     'Google Sans', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ec-font-display:  'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ec-text-xs:       0.75rem;    /* 12px */
  --ec-text-sm:       0.875rem;   /* 14px */
  --ec-text-base:     1rem;       /* 16px */
  --ec-text-lg:       1.125rem;   /* 18px */
  --ec-text-xl:       1.25rem;    /* 20px */
  --ec-text-2xl:      1.5rem;     /* 24px */
  --ec-text-3xl:      2rem;       /* 32px */

  --ec-leading-tight:  1.25;
  --ec-leading-normal: 1.5;
  --ec-leading-relaxed:1.65;

  --ec-weight-normal:  400;
  --ec-weight-medium:  500;
  --ec-weight-semibold:600;
  --ec-weight-bold:    700;

  /* Spacing (4px grid) */
  --ec-space-1:  0.25rem;   /* 4px  */
  --ec-space-2:  0.5rem;    /* 8px  */
  --ec-space-3:  0.75rem;   /* 12px */
  --ec-space-4:  1rem;      /* 16px */
  --ec-space-5:  1.25rem;   /* 20px */
  --ec-space-6:  1.5rem;    /* 24px */
  --ec-space-8:  2rem;      /* 32px */
  --ec-space-10: 2.5rem;    /* 40px */
  --ec-space-12: 3rem;      /* 48px */
  --ec-space-16: 4rem;      /* 64px */

  /* Radii — WP Masters merkidentiteit: 20px op informatieve blokken/kaarten.
     md voor inputs/kleine blokken, sm voor micro-elementen (checkvakjes). */
  --ec-radius-sm:  6px;
  --ec-radius-md:  12px;
  --ec-radius-lg:  20px;
  --ec-radius-xl:  20px;
  --ec-radius-pill:24px;
  --ec-radius-full:9999px;

  /* Schaduwen */
  --ec-shadow-sm:  0 1px 2px rgba(var(--ec-teal-rgb), 0.06);
  --ec-shadow-md:  0 2px 8px rgba(var(--ec-teal-rgb), 0.08);
  --ec-shadow-lg:  0 4px 16px rgba(var(--ec-teal-rgb), 0.10);
  --ec-shadow-xl:  0 8px 32px rgba(var(--ec-teal-rgb), 0.12);

  /* Transities */
  --ec-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ec-duration:   200ms;

  /* Layout */
  --ec-max-width:  960px;
  --ec-gutter:     var(--ec-space-4);
}

@media (min-width: 768px) {
  :root {
    --ec-gutter: var(--ec-space-8);
  }
}


/* --- Reset ------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--ec-font-body);
  font-size: 15px;
  font-weight: var(--ec-weight-normal);
  line-height: var(--ec-leading-normal);
  color: #1a2e35;
  background-color: var(--ec-pastel);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: env(safe-area-inset-top, 0px);
}

/* Koppen + titels in Rubik (huisstijl); gewicht blijft per element bepaald.
   Ook de title-divs die geen <h>-tag zijn (anders erven die Google Sans). */
h1, h2, h3, h4, h5, h6,
.ec-landing-hero__title,
.ec-steps__title,
.ec-step-header__title,
.ec-solution-card__title,
.ec-cta-section__title,
.ec-summary-card__title,
.ec-result-mini__title,
.ec-flex-e-box__title,
.ec-info-callout__title,
.ec-regulation-link__title,
.ec-metric__value,
.ec-services__title,
.ec-tile__title,
.ec-status-banner__title,
.ec-info-banner__body strong {
  font-family: var(--ec-font-display);
}

img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--ec-blue-end);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--ec-duration) var(--ec-ease);
}

a:hover {
  color: var(--ec-teal);
}

input, select, textarea, button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

fieldset {
  border: none;
}

::placeholder {
  color: var(--ec-gray-400);
  opacity: 1;
}

:focus-visible {
  outline: 2px solid var(--ec-blue-end);
  outline-offset: 2px;
}


/* --- Layout helpers --------------------------------------- */
.ec-container {
  width: 100%;
  max-width: var(--ec-max-width);
  margin-inline: auto;
  padding-inline: var(--ec-gutter);
}

.ec-section {
  padding-block: var(--ec-space-12);
}

.ec-grid {
  display: grid;
  gap: var(--ec-space-6);
}

.ec-grid--2 {
  grid-template-columns: 1fr;
}

.ec-grid--3 {
  grid-template-columns: 1fr;
}

.ec-grid--4 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .ec-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ec-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .ec-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.ec-flex {
  display: flex;
  gap: var(--ec-space-4);
}

.ec-flex--center {
  align-items: center;
  justify-content: center;
}

.ec-flex--between {
  justify-content: space-between;
  align-items: center;
}

/* Utility: sr-only */
.ec-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Utility: tekst */
.ec-text-sm    { font-size: var(--ec-text-sm); }
.ec-text-lg    { font-size: var(--ec-text-lg); }
.ec-text-xl    { font-size: var(--ec-text-xl); }
.ec-text-2xl   { font-size: var(--ec-text-2xl); }
.ec-text-3xl   { font-size: var(--ec-text-3xl); }
.ec-text-center { text-align: center; }
.ec-text-muted { color: var(--ec-gray-600); }
.ec-font-medium   { font-weight: var(--ec-weight-medium); }
.ec-font-semibold { font-weight: var(--ec-weight-semibold); }
.ec-font-bold     { font-weight: var(--ec-weight-bold); }

/* Embed-modus: geen header/footer, transparante achtergrond.
   Iframe-integratie host-site: content tot 1400px breed. min-height: 0 zodat
   de content kan KRIMPEN onder de huidige iframe-hoogte — anders kan de
   dynamische iframe-hoogte (embed-height.js) alleen groeien, nooit terug. */
.ec-embed {
  background: transparent;
  margin: 0;
  padding: 0;
  min-height: 0;
  --ec-max-width: 1400px;
}
.ec-embed .ec-container.ec-section {
  padding-top: 0;
}