/* ERA huisstijl: design tokens
   Afgeleid van de live CSS van era.be (thema rocketship_theme_starter).
   HSL-waarden uit de site staan tussen haakjes.

   Breakpoints (zelfde als era.be):
     xs  < 768px   (basis, mobile first)
     sm  >= 768px
     md  >= 940px
     lg  >= 1200px
     xl  >= 1512px  (era schaalt tekst en ruimte hier verder op)
   Hulpbreakpoint: 480px. */

@font-face{font-family:"Gotham";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/gotham/gotham-book.woff2") format("woff2")}
@font-face{font-family:"Gotham";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/gotham/gotham-italic.woff2") format("woff2")}
@font-face{font-family:"Gotham";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/gotham/gotham-bold.woff2") format("woff2")}
/* Black dekt 800 en 900: era.be gebruikt 800 voor koppen */
@font-face{font-family:"Gotham";font-style:normal;font-weight:800 900;font-display:swap;src:url("../fonts/gotham/gotham-black.woff2") format("woff2")}

:root{
  /* Kleuren */
  --era-red:#D60A29;          /* spot-2  (351,91%,44%) */
  --era-red-dark:#950E34;     /* spot-2-dark (343,83%,32%) */
  --era-blue:#000085;         /* spot-1  (240,100%,26%) */
  --era-blue-dark:#00003D;    /* spot-1-dark (240,100%,12%) */
  --era-blue-light:#1C1CBA;   /* spot-1-light (240,74%,42%) */
  --era-text:#6E6F72;         /* base (225,2%,44%) */
  --era-ink:#333333;          /* gray-dark (0,0%,20%) */
  --era-white:#FFFFFF;
  --era-gray-100:#F5F5F5;     /* off-white (0,0%,96%) */
  --era-gray-200:#EDEDED;     /* gray-light-1 (0,0%,93%) */
  --era-gray-300:#E6E6E6;     /* gray-light-2 (0,0%,90%) */
  --era-gray-border:#CCCCCC;  /* scheidingslijnen */
  --era-gray-fill:#888888;    /* neutrale balken */
  /* era.be: 3px solid #EDEDED. Dat is laag contrast (1,2:1). Zet op #8A8A8A voor 3:1 (WCAG 1.4.11). */
  --era-form-border:var(--era-gray-200);

  /* Typografie: basis (xs tot lg), waarden per breakpoint zoals op era.be */
  --font:"Gotham",Arial,sans-serif;
  --fs-body:1rem;
  --fs-small:.875rem;
  --fs-h1:clamp(2.1875rem,1.9703rem + .8913vw,2.8125rem);
  --fs-h2:clamp(1.625rem,1.5381rem + .3565vw,1.875rem);
  --fs-h3:1.375rem;
  --fs-display:clamp(3.5rem,2.4rem + 5vw,6.5rem);
  --mb-h1:clamp(1.875rem,1.2233rem + 2.6738vw,3.75rem);
  --mb-h2:clamp(1.875rem,1.6578rem + .8913vw,2.5rem);
  --mb-h3:clamp(1.25rem,1.0328rem + .8913vw,1.875rem);

  /* Ruimte */
  --gutter:clamp(1.25rem,-.0535rem + 5.3476vw,5rem);
  --gap-hor:7vw;                                           /* kolomafstand, era: --gap-layout-hor */
  --gap-block:clamp(1.875rem,1.6578rem + .8913vw,2.5rem);  /* era: .content-block margin-top */
  --section-y:clamp(3.75rem,2.881rem + 3.565vw,6.25rem);   /* era: .footer--primary padding-top */
  --header-y:2.1875rem;
  --logo-w:clamp(3.625rem,3.2557rem + 1.5152vw,4.6875rem);
  --btn-y:1.125rem;
  --btn-x:clamp(1.25rem,.9241rem + 1.3369vw,2.1875rem);
  --field-h:4.125rem;
  --gap-field:1.875rem;                                    /* era: .form__element margin-bottom */
  --mb-p:1.5625rem;                                        /* era: p margin-bottom */
  --gap-footer:3.75rem;                                    /* era: .footer--primary gap (xs) */

  /* Beweging */
  --ease:cubic-bezier(.4,0,0,1);
  --speed:.75s;
}

/* xl (>= 1512px): era schaalt tekst en ruimte verder op */
@media (min-width:1512px){
  :root{
    --fs-body:clamp(1rem,.7721rem + .2412vw,1.375rem);
    --fs-small:calc(var(--fs-body) * .875);
    --fs-h1:clamp(2.8125rem,2.1715rem + .6783vw,3.8672rem);
    --fs-h2:clamp(1.875rem,1.4477rem + .4522vw,2.5781rem);
    --fs-h3:clamp(1.375rem,1.0616rem + .3316vw,1.8906rem);
    --mb-h1:clamp(3.75rem,3.2942rem + .4823vw,4.5rem);
    --mb-h2:clamp(2.5rem,2.0442rem + .4823vw,3.25rem);
    --mb-h3:clamp(1.875rem,1.3053rem + .6029vw,2.8125rem);
    --gutter:clamp(5rem,3.4807rem + 1.6077vw,7.5rem);
    --gap-block:clamp(2.5rem,1.8923rem + .6431vw,3.5rem);
    --section-y:clamp(6.25rem,4.7307rem + 1.6077vw,8.75rem);
    --header-y:clamp(2.1875rem,1.9216rem + .2814vw,2.625rem);
    --logo-w:clamp(4.6875rem,3.6192rem + 1.1304vw,6.4453rem);
    --btn-y:clamp(1.125rem,.8515rem + .2894vw,1.575rem);
    --btn-x:clamp(2.1875rem,1.6557rem + .5627vw,3.0625rem);
    --gap-field:clamp(1.875rem,1.4192rem + .4823vw,2.625rem);
    --mb-p:clamp(1.5625rem,1.1827rem + .4019vw,2.1875rem);
  }
}

/* sm (>= 768px): footerkolommen naast elkaar; vanaf xl schaalt de tussenruimte mee */
@media (min-width:768px){
  :root{--gap-footer:3.125rem}
}
@media (min-width:768px) and (min-width:1512px){
  :root{--gap-footer:clamp(3.125rem,2.4128rem + .7536vw,4.2969rem)}
}