/* === EC Laadpalen base layer === */

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

html {
  font-family: var(--ec-font-body);
  font-size: 100%;
  line-height: var(--ec-lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  color: var(--ec-text);
  background: var(--ec-bg);
  font-size: var(--ec-fs-base);
  min-height: 100vh;
}

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

a {
  color: var(--ec-primary);
  text-decoration: none;
}
a:hover { color: var(--ec-primary-hover); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ec-font-title);
  font-weight: var(--ec-fw-semibold);
  line-height: var(--ec-lh-tight);
  color: var(--ec-dark);
  margin: 0 0 var(--ec-space-4) 0;
}

h1 { font-size: var(--ec-fs-3xl); }
h2 { font-size: var(--ec-fs-2xl); }
h3 { font-size: var(--ec-fs-xl); }
h4 { font-size: var(--ec-fs-lg); }

p {
  margin: 0 0 var(--ec-space-4) 0;
  line-height: var(--ec-lh-relaxed);
}

/* Container & layout */
.ec-container {
  width: 100%;
  max-width: var(--ec-container-max);
  margin: 0 auto;
  padding: 0 var(--ec-gutter);
}

.ec-page {
  padding: var(--ec-space-6) 0;
}

/* Embed-modus: ingeframed in host-site (?embed=1). Host levert header/footer
   en achtergrond; container is al 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;
  min-height: 0;
}

/* Card */
.ec-card {
  background: var(--ec-white);
  border-radius: var(--ec-radius-lg);
  box-shadow: var(--ec-shadow-md);
  padding: var(--ec-space-6);
  margin: 0 auto;
  max-width: 640px;
}

/* Utility helpers */
.ec-text-center { text-align: center; }
.ec-text-muted  { color: var(--ec-text-muted); }
.ec-mt-2 { margin-top: var(--ec-space-2); }
.ec-mt-4 { margin-top: var(--ec-space-4); }
.ec-mt-6 { margin-top: var(--ec-space-6); }
.ec-mt-8 { margin-top: var(--ec-space-8); }

/* Responsive (mobile-first) */
@media (min-width: 640px) {
  .ec-page { padding: var(--ec-space-8) 0; }
  h1 { font-size: var(--ec-fs-3xl); }
}

@media (min-width: 768px) {
  .ec-card { padding: var(--ec-space-8); }
}

@media (min-width: 1024px) {
  .ec-container { padding: 0 var(--ec-space-8); }
}