/*
Theme Name: ICT2MKB
Theme URI: https://www.ict2mkb.nl
Author: ICT2MKB
Description: Eigen thema voor ICT2MKB. Twee werelden: donkerblauw om te lezen, retro papier
             om te bedienen. Tokens komen letterlijk uit de Claude Design-export V5.
Version: 2.1
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: ict2mkb
*/

/* ==========================================================================
   1. TOKENS
   Eén plek voor alle kleuren, letters en maten. Verander hier, nergens anders.
   De namen achter elke kleur zijn de namen uit het stijlblad op het canvas.
   ========================================================================== */
:root{

  /* --- Ondergronden en lijnen, de donkere wereld --- */
  --i2m-bg:          #0F1D2E;  /* pagina-ondergrond */
  --i2m-ink:         #16293D;  /* basis, en tekst op licht */
  --i2m-ink-2:       #1B3250;  /* afwisselende band en kaarten */
  --i2m-ink-3:       #22405F;  /* opgetild vlak */
  --i2m-line:        #2E4C6D;  /* randlijn op donker */

  /* --- Tekst en actie --- */
  --i2m-text:        #EDF3FA;  /* tekst op donker */
  --i2m-text-soft:   #A6BCD4;  /* tekst zachter */
  --i2m-text-faint:  #7391AF;  /* tekst vaag, en labels */
  --i2m-brand:       #3B78FF;  /* actiekleur */
  --i2m-brand-hi:    #4C86FF;  /* hover */
  --i2m-brand-lift:  #7FAAFF;  /* knop, en de 2 in het logo */

  /* --- Licht paneel --- */
  --i2m-paper:       #F2F7FE;  /* licht paneel */
  --i2m-paper-2:     #DEE9F9;  /* tweede tint */
  --i2m-paper-line:  #C3D6F2;  /* lijn op licht */

  /* --- Retro wereld --- */
  --i2m-retro:       #E9E1CF;  /* retro papier */
  --i2m-retro-2:     #F2EDE0;  /* lichter papier */
  --i2m-retro-3:     #DDD5C4;  /* papier in de schaduw */
  --i2m-retro-bevel: #C9BFA6;  /* bevelschaduw op retro papier */
  --i2m-mosterd:     #C9A24B;  /* decoratie, nooit status */

  /* --- Retro rood, decoratieve titelkleur. Besluit van Joost, 5 september.
         Twee waarden, net als bij status, omdat een rood dat op donkerblauw
         leesbaar is op oud geel wegvalt en andersom. Nooit voor status:
         daarvoor blijven #F0625E en #992C19 gereserveerd. --- */
  --i2m-rood-op-donker: #EF7A5A;  /* 6,15:1 op de pagina, 4,70:1 op de band */
  --i2m-rood-op-papier: #A93B26;  /* 4,83:1 op oud geel */
  --i2m-zwart:       #16293D;  /* de zwarte rand van de retro wereld */

  /* --- Status, twee reeksen.
         De donkere reeks is op oudwit onleesbaar: #2FD4B0 haalt daar 1,45 op 1.
         Status draagt uitsluitend op deze zes kleuren. Mosterd is decoratie. --- */
  --i2m-goed:            #2FD4B0;  /* op donker, 9,04:1 */
  --i2m-waarschuwing:    #F0B34E;  /* op donker, 9,12:1 */
  --i2m-fout:            #F0625E;  /* op donker, 5,35:1 */
  --i2m-goed-op-papier:         #4F6459;  /* op oudwit, 4,89:1 */
  --i2m-waarschuwing-op-papier: #A74116;  /* op oudwit, 4,73:1 */
  --i2m-fout-op-papier:         #992C19;  /* op oudwit, 5,91:1 */
  --i2m-geen-data-donker: #7391AF;  /* gestippelde ring, geen gloed */
  --i2m-geen-data-papier: #6E6959;  /* gestippelde ring, geen gloed */

  /* --- Letters --- */
  --i2m-display: "Libre Franklin","Helvetica Neue",Arial,sans-serif;  /* koppen */
  --i2m-body:    "IBM Plex Sans","Helvetica Neue",Arial,sans-serif;   /* lopende tekst */
  --i2m-quote:   "Manrope","Helvetica Neue",Arial,sans-serif;         /* citaten */
  --i2m-mono:    "JetBrains Mono",ui-monospace,Menlo,monospace;       /* labels en cijfers */

  /* --- Typografische schaal, letterlijk uit het stijlblad --- */
  --i2m-h1:     clamp(38px,5.2vw,64px);  --i2m-h1-lh:    1.05;
  --i2m-h2:     clamp(28px,3.4vw,40px);  --i2m-h2-lh:    1.15;
  --i2m-h3:     24px;                    --i2m-h3-lh:    1.3;
  --i2m-body-size: 17px;                 --i2m-body-lh:  1.65;
  --i2m-quote-size: 22px;                --i2m-quote-lh: 1.5;
  --i2m-label:  12px;                    /* mono */
  --i2m-cijfer: clamp(34px,4.4vw,56px);  /* mono */

  /* --- Maten --- */
  --i2m-wrap: 1180px;
  --i2m-pad:  clamp(20px,5vw,48px);
  --i2m-radius: 4px;    /* kleine afgeronde hoek, overal, geen uitzonderingen.
                           Besluit van Joost, 5 september. Vervangt zowel de
                           14px van de donkere wereld als de rechte hoek van
                           de retro wereld. */
  --i2m-focus: 3px;     /* dikte van de focusring */
}

/* ==========================================================================
   2. BASIS
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--i2m-bg);
  color:var(--i2m-text);
  font-family:var(--i2m-body);
  font-size:var(--i2m-body-size);
  line-height:var(--i2m-body-lh);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p{margin:0}
img{max-width:100%;height:auto}
a{color:var(--i2m-brand-lift);text-decoration:none}
a:hover{color:var(--i2m-brand-hi)}

h1{font-family:var(--i2m-display);font-weight:800;font-size:var(--i2m-h1);line-height:var(--i2m-h1-lh);letter-spacing:-.02em}
h2{font-family:var(--i2m-display);font-weight:800;font-size:var(--i2m-h2);line-height:var(--i2m-h2-lh);letter-spacing:-.01em}
h3{font-family:var(--i2m-display);font-weight:800;font-size:var(--i2m-h3);line-height:var(--i2m-h3-lh)}

.i2m-eyebrow{font-family:var(--i2m-mono);font-size:var(--i2m-label);letter-spacing:.14em;text-transform:uppercase;color:var(--i2m-text-faint)}
.i2m-label{font-family:var(--i2m-mono);font-size:var(--i2m-label);color:var(--i2m-text-faint)}
.i2m-cijfer{font-family:var(--i2m-mono);font-size:var(--i2m-cijfer);line-height:1;font-weight:500}
.i2m-citaat{font-family:var(--i2m-quote);font-size:var(--i2m-quote-size);line-height:var(--i2m-quote-lh);font-weight:500}
.i2m-gegeven{font-family:var(--i2m-mono)}

.i2m-wrap{max-width:var(--i2m-wrap);margin:0 auto;padding-inline:var(--i2m-pad)}

/* De focusring is overal hetzelfde en verdwijnt nooit. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:var(--i2m-focus) solid var(--i2m-brand-lift);
  outline-offset:2px;
}

/* Voor wie beweging uitzet. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Overslaan naar de inhoud, zichtbaar zodra hij focus krijgt. */
.i2m-skip{position:absolute;left:-9999px}
.i2m-skip:focus{left:var(--i2m-pad);top:12px;z-index:99;background:var(--i2m-paper);color:var(--i2m-ink);padding:10px 16px}

/* ==========================================================================
   3. ICOON
   Bold duotone is geen los bestand maar twee gestapelde lagen: de vulling op
   26 procent, met de bold-lijn er strak overheen. Beide erven de tekstkleur.
   ========================================================================== */
.i2m-icoon{display:block;flex:none;color:currentColor}
.i2m-icoon .vulling{fill:currentColor;opacity:.26}
.i2m-icoon .lijn{fill:none;stroke:currentColor;stroke-width:24;stroke-linecap:round;stroke-linejoin:round}
/* Bold duotone uit Phosphor: de fill-laag op 26 procent, de bold er strak overheen. */
.i2m-icoon .duo-vulling{fill:currentColor;opacity:.26}
.i2m-icoon .duo-bold{fill:currentColor}

/* ==========================================================================
   4. STATUSLAMPJE
   Vier staten. De donkere kleur is de ring en draagt het contrast, de heldere
   kleur is de kern en de gloed en laat het lampje branden. Geen data heeft
   geen gloed en een gestippelde ring. Nooit blauw, dat is de actiekleur.
   ========================================================================== */
.i2m-lamp{
  display:inline-block;width:16px;height:16px;border-radius:50%;flex:none;
  border:2px solid var(--i2m-goed);
  background:radial-gradient(circle at 35% 30%,#FFFFFF 0%,var(--i2m-goed) 38%,var(--i2m-goed) 100%);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.35),inset 0 1px 2px rgba(255,255,255,.7),
             0 0 8px var(--i2m-goed),0 0 18px color-mix(in srgb,var(--i2m-goed) 40%,transparent);
}
.i2m-lamp--let-op{border-color:var(--i2m-waarschuwing);
  background:radial-gradient(circle at 35% 30%,#FFFFFF 0%,var(--i2m-waarschuwing) 38%,var(--i2m-waarschuwing) 100%);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.35),inset 0 1px 2px rgba(255,255,255,.7),
             0 0 8px var(--i2m-waarschuwing),0 0 18px color-mix(in srgb,var(--i2m-waarschuwing) 40%,transparent)}
.i2m-lamp--fout{border-color:var(--i2m-fout);
  background:radial-gradient(circle at 35% 30%,#FFFFFF 0%,var(--i2m-fout) 38%,var(--i2m-fout) 100%);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.35),inset 0 1px 2px rgba(255,255,255,.7),
             0 0 8px var(--i2m-fout),0 0 18px color-mix(in srgb,var(--i2m-fout) 40%,transparent)}
.i2m-lamp--geen-data{border:2px dotted var(--i2m-geen-data-donker);background:none;box-shadow:none}

/* Op retro papier draagt de ring het contrast, daar zijn ring en kern verschillend. */
.i2m-op-papier .i2m-lamp{border-color:var(--i2m-goed-op-papier)}
.i2m-op-papier .i2m-lamp--let-op{border-color:var(--i2m-waarschuwing-op-papier)}
.i2m-op-papier .i2m-lamp--fout{border-color:var(--i2m-fout-op-papier)}
.i2m-op-papier .i2m-lamp--geen-data{border-color:var(--i2m-geen-data-papier)}

/* ==========================================================================
   5. KNOPPEN
   Vijf staten per type. Primair en secundair horen bij de blauwe wereld.
   ========================================================================== */
.i2m-knop{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--i2m-body);font-weight:600;font-size:18px;line-height:1;
  padding:14px 26px;border:0;border-radius:var(--i2m-radius);cursor:pointer;text-decoration:none;
  background:var(--i2m-brand-lift);color:var(--i2m-ink);
  transition:background .18s ease,transform .12s ease;
}
.i2m-knop:hover{background:#9BBEFF;color:var(--i2m-ink)}
.i2m-knop:active{box-shadow:inset 0 3px 0 rgba(22,41,61,.28);transform:translateY(1px)}
.i2m-knop[disabled],.i2m-knop[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* Vlak, net als de primaire knop. Het bevel blijft gereserveerd voor wat je
   echt bedient: formulieren, aanvinkvakken en de scans. Twee knoppen naast
   elkaar horen uit dezelfde familie te komen. */
.i2m-knop--secundair{background:var(--i2m-retro-2);color:var(--i2m-zwart);border:2px solid var(--i2m-zwart);border-radius:var(--i2m-radius);padding:12px 24px;font-weight:700;box-shadow:none}
.i2m-knop--secundair:hover{background:#FFFFFF;color:var(--i2m-zwart)}
.i2m-knop--secundair:active{box-shadow:inset 0 3px 0 rgba(22,41,61,.28);transform:translateY(1px)}

/* ==========================================================================
   6. HEADER
   Licht paneel met een dikke blauwe onderrand. Daaronder een tweede balk met
   de eyebrow links en het telefoonnummer rechts.
   ========================================================================== */
.i2m-header{background:var(--i2m-paper);color:var(--i2m-ink)}
.i2m-header a{color:var(--i2m-ink)}
.i2m-header__boven{border-bottom:0}
.i2m-header__balk{display:flex;align-items:center;justify-content:space-between;gap:32px;min-height:112px;padding-block:20px}

.i2m-wordmerk{font-family:var(--i2m-display);font-weight:800;font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:-.02em;text-decoration:none}
.i2m-wordmerk .twee{color:var(--i2m-brand-lift)}

.i2m-header__rechts{display:flex;align-items:center;gap:clamp(20px,3vw,48px);margin-left:auto}
.i2m-nav ul{display:flex;gap:clamp(18px,2.6vw,40px);margin:0;padding:0;list-style:none}
.i2m-nav a{font-weight:600;font-size:clamp(17px,1.5vw,22px);text-decoration:none}
.i2m-nav a:hover{color:var(--i2m-brand)}
.i2m-nav .current-menu-item > a,
.i2m-nav .current_page_item > a{box-shadow:inset 0 -3px 0 var(--i2m-brand-lift)}

/* De blauwe balk is even hoog als de knop erboven: 18px regelhoogte plus twee
   keer 14px binnenruimte is 46 pixels. Het telefoonnummer staat erin, rechts
   uitgelijnd. Tekst in #16293D op #7FAAFF haalt 6,41 op 1, de vastgelegde
   combinatie voor deze achtergrond. */
.i2m-header__meta{background:var(--i2m-brand-lift);color:var(--i2m-ink)}
.i2m-header__meta .i2m-wrap{display:flex;align-items:center;justify-content:flex-end;gap:24px;min-height:46px}
.i2m-header__eyebrow{font-family:var(--i2m-mono);font-size:13px;line-height:1;letter-spacing:.08em;text-transform:uppercase;opacity:.65}
.i2m-telefoon{display:inline-flex;align-items:center;gap:10px;font-family:var(--i2m-mono);font-weight:600;font-size:18px;line-height:1;letter-spacing:0;text-decoration:none}
.i2m-header__meta .i2m-telefoon{color:var(--i2m-ink)}

/* Het menu klapt op smalle schermen onder de logoregel. */
@media (max-width:860px){
  .i2m-header__balk{flex-wrap:wrap;min-height:0}
  .i2m-header__rechts{width:100%;justify-content:space-between;margin-left:0}
  .i2m-nav ul{flex-wrap:wrap}
  .i2m-header__meta .i2m-wrap{justify-content:center}
}

/* ==========================================================================
   7. FOOTER
   Donker en modern, bewust. De retro wereld is waar de bezoeker iets bedient, de
   donkere wereld is waar hij iets leest. De footer is de achterkant van het
   apparaat: dezelfde onderdelen, geen verf. Dus geen oudwit, geen bevel, geen
   papiertextuur.

   Opzet sinds 3 september: wordmerk bovenaan, daaronder vier kolommen van gelijke
   maat. Drie kaarten, Service Desk, Zuid en Midden, en als vierde de twee
   uitklapknoppen Diensten en Bedrijf. Daaronder de ISO-regel en het juridische slot.
   ========================================================================== */
.i2m-footer{background:var(--i2m-ink-2);border-top:1px solid var(--i2m-line);margin-top:96px}
/* padding-block, niet de verkorte padding. De verkorte vorm wist de zijmarge die
   .i2m-wrap zet, en dan staat de footer 48 pixels linkser dan de header. */
.i2m-footer__binnen{padding-block:44px 24px;display:flex;flex-direction:column;gap:22px}

.i2m-footer__merk{display:flex;flex-direction:column;gap:6px}
.i2m-footer__merk p{color:var(--i2m-text-soft);font-size:15px}

/* Vier kolommen even breed. Ze beginnen bovenaan en krijgen dezelfde minimumhoogte,
   zodat ze even groot ogen zonder dat ze meerekken als een uitklapper opengaat. Met
   stretch groeide een kaart mee met de opengeklapte lijst ernaast, en dan viel er een
   gat in de kaart. */
.i2m-footer__blokken{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start}

.i2m-kaart{
  background:var(--i2m-ink);
  border:2px solid var(--i2m-line);
  border-radius:var(--i2m-radius);
  box-shadow:inset 0 1px 0 rgba(237,243,250,.10);
  padding:18px 20px;min-height:150px;
  display:flex;flex-direction:column;
}
.i2m-kaart .titel{font-family:var(--i2m-display);font-weight:800;font-size:17px;line-height:1.3}

/* Dezelfde opbouw in alle drie de kaarten: kop, twee regels mono, en onderaan een
   regel mono die tegen de onderrand staat. Bij de vestigingen zijn dat het adres en
   het KvK-nummer, bij de Service Desk de openingstijden met het telefoonnummer en
   daaronder het statuslampje. */
.i2m-kaart__regels{display:flex;flex-direction:column;font-family:var(--i2m-mono);font-size:13px;line-height:1.6;color:var(--i2m-text-soft);margin-top:8px}
.i2m-kaart__voet{font-family:var(--i2m-mono);font-size:12px;color:var(--i2m-text-faint);margin-top:auto;padding-top:12px}

.i2m-footer .i2m-telefoon{
  display:inline-flex;align-items:center;gap:7px;width:fit-content;
  font-family:var(--i2m-mono);font-weight:600;font-size:13px;letter-spacing:.03em;
  color:var(--i2m-text);
}
.i2m-footer .i2m-telefoon:hover{color:var(--i2m-brand-lift)}

/* Het lampje volgt de openingstijden. Groen en open binnen de tijden, rood en
   gesloten daarbuiten. De tekst kleurt mee met het lampje. */
.i2m-servicedesk__status{display:inline-flex;align-items:center;gap:8px;font-size:13px}
.i2m-servicedesk__status .tekst{font-family:var(--i2m-mono);color:var(--i2m-goed)}
.i2m-servicedesk__status.is-gesloten .tekst{color:var(--i2m-fout)}
.i2m-servicedesk__status .i2m-lamp{width:14px;height:14px}

/* Uitklapknoppen. Twee stuks, samen even hoog als een kaart. Het is een gewone
   details, dus dit werkt zonder javascript en is uit zichzelf toetsenbordklaar. */
.i2m-footer__knoppen{display:flex;flex-direction:column;gap:10px;min-height:150px}
.i2m-uitklap{display:flex;flex-direction:column;flex:1}
.i2m-uitklap > summary{
  list-style:none;cursor:pointer;user-select:none;width:100%;flex:1;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--i2m-ink);border:2px solid var(--i2m-line);border-radius:var(--i2m-radius);
  box-shadow:inset 0 1px 0 rgba(237,243,250,.10);
  padding:12px 20px;color:var(--i2m-text);font-weight:600;font-size:16px;
  transition:border-color .18s ease;
}
.i2m-uitklap > summary::-webkit-details-marker{display:none}
.i2m-uitklap > summary:hover{border-color:var(--i2m-brand-lift)}
.i2m-uitklap[open] > summary{border-color:var(--i2m-brand-lift)}
.i2m-uitklap__pijl{width:9px;height:9px;border-right:2px solid var(--i2m-brand-lift);border-bottom:2px solid var(--i2m-brand-lift);transform:rotate(45deg);transition:transform .18s ease;margin-bottom:3px}
.i2m-uitklap[open] .i2m-uitklap__pijl{transform:rotate(-135deg);margin-bottom:-2px}

/* De lijst klapt naar beneden open en staat in de stroom, dus hij duwt de footer op
   in plaats van over de knop eronder heen te vallen. Besluit van Joost, 3 september:
   naar boven openklappen liet de twee lijsten over elkaar heen lopen. */
.i2m-uitklap__lijst{
  margin-top:8px;
  background:var(--i2m-ink);border:2px solid var(--i2m-line);border-radius:var(--i2m-radius);
  box-shadow:inset 0 1px 0 rgba(237,243,250,.10);
  padding:12px 18px;display:flex;flex-direction:column;gap:2px;
}
.i2m-uitklap__lijst ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.i2m-uitklap__lijst a{display:block;color:var(--i2m-text-soft);font-size:14px;line-height:1.5;padding:5px 0;text-decoration:none}
.i2m-uitklap__lijst a:hover{color:var(--i2m-text)}

/* De regel onder de kaarten. Links de status van de servicedesk, rechts de
   ISO-vermelding. Besluit van Joost, 3 september: het lampje uit de kaart halen maakt
   die kaart rustiger om te lezen, en de regel eronder vult de breedte. */
.i2m-footer__regel{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-left:2px}
.i2m-iso{display:inline-flex;align-items:center;gap:9px;color:var(--i2m-text-soft);font-size:14px}
.i2m-iso .i2m-icoon{color:var(--i2m-goed)}

/* De naad boven de juridische regel: 1 pixel lijn met 1 pixel donker eronder. */
.i2m-footer__slot{
  border-top:1px solid var(--i2m-line);
  box-shadow:inset 0 1px 0 var(--i2m-ink);
  padding-top:20px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:14px;color:var(--i2m-text-faint);
}
.i2m-footer__slot a{color:var(--i2m-text-faint);text-decoration:none}
.i2m-footer__slot a:hover{color:var(--i2m-text-soft)}
.i2m-footer__juridisch{display:flex;gap:24px;flex-wrap:wrap}

@media (max-width:980px){
  .i2m-footer__blokken{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .i2m-footer__blokken{grid-template-columns:1fr}
  .i2m-footer__regel{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ==========================================================================
   Homepage, grofbouw
   Banden wisselen tussen de pagina-ondergrond en de tweede tint. Alles wat de
   bezoeker bedient of afleest staat op retro papier, precies het recept uit
   het projectgeheugen. Padding-block, nooit de verkorte padding op een wrap.
   ========================================================================== */

.i2m-band{background:var(--i2m-bg);padding-block:96px}
.i2m-band--ink{background:var(--i2m-ink);padding-block:40px 48px}
.i2m-band--ink-2{background:var(--i2m-ink-2)}
.i2m-band--slot{background:var(--i2m-bg);padding-block:96px 120px}
.i2m-band h2{margin:0 0 16px}
.i2m-band .i2m-eyebrow{display:block;margin-bottom:12px}
.i2m-eyebrow--rood{color:var(--i2m-rood-op-donker)}
.i2m-lead{max-width:62ch;color:var(--i2m-text-soft);margin:0 0 40px}

.i2m-knoppen{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.i2m-knop--secundair-op-donker{background:transparent;color:var(--i2m-text);border:2px solid var(--i2m-line);border-radius:var(--i2m-radius);padding:12px 24px;font-weight:700}
.i2m-knop--secundair-op-donker:hover{background:var(--i2m-ink-3);color:var(--i2m-text)}
.i2m-tekstlink{font-weight:600;color:var(--i2m-brand-lift);text-decoration:none;white-space:nowrap}
.i2m-tekstlink:hover{color:var(--i2m-brand-hi)}
.i2m-kop-regel{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:40px}
.i2m-kop-regel h2{margin-bottom:12px}
.i2m-kop-regel .i2m-lead{margin-bottom:0}

/* Het retro recept. Rechte hoeken, 2 pixels rand, bevel in twee richtingen. */
.i2m-papier{
  background:var(--i2m-retro);color:var(--i2m-zwart);
  border:2px solid var(--i2m-zwart);border-radius:var(--i2m-radius);
  box-shadow:inset 2px 2px 0 #FFFFFF, inset -2px -2px 0 var(--i2m-retro-bevel);
  padding:24px;
}
.i2m-papier h3{margin:0 0 10px}
.i2m-papier p{margin:0}
.i2m-papier__label{font-family:var(--i2m-mono);font-size:var(--i2m-label);letter-spacing:.14em;text-transform:uppercase;color:#4A463C;margin:0 0 12px}
.i2m-papier__voet{font-size:14px;color:#4A463C;margin-top:16px}
.i2m-papier__link{display:inline-block;margin-top:16px;font-weight:700;color:var(--i2m-zwart);text-decoration:none;box-shadow:inset 0 -2px 0 var(--i2m-zwart)}
.i2m-papier__link:hover{background:#F2F7FE}

/* 1. Hero
   De hoogte volgt de inhoud, niet het scherm. De eerdere verdeling in vaste
   verhoudingen over 100svh rekte de lucht mee met elk scherm: op een grote
   monitor stond er honderden pixels niets tussen de kop en de claim, en vielen
   de cijfers onder de vouw. Dit is wat Joost op zijn bord met "hoogte hero"
   aanwees. De afstanden zijn nu vast en verhouden zich tot elkaar.
   Alles links uitgelijnd, de knoppen rechts. */
.i2m-hero{background:var(--i2m-retro);color:var(--i2m-zwart)}
.i2m-hero__binnen{
  min-height:calc(100svh - var(--i2m-header-h, 158px));
  padding-block:32px;
  display:flex;
  flex-direction:column;
  justify-content:space-evenly;
}
.i2m-hero__rij{display:flex;align-items:center;justify-content:flex-start}
.i2m-hero__knoprij{justify-content:flex-end}
/* De zwarte rand hoort alleen bij de knoppen in de hero. Zet hem nooit op
   .i2m-knop zelf: die klasse staat ook op de Support Desk-knop in de header en
   op vier knoppen verderop de pagina. Zie het projectgeheugen, niet-aankomen. */
.i2m-hero .i2m-knop{border:2px solid var(--i2m-zwart);padding:12px 24px}
.i2m-hero__timerrij{align-items:end;display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.i2m-hero__titel{font-size:clamp(52px,7.4vw,108px);line-height:.95;letter-spacing:-.035em;margin:0}
/* De claim staat als citaat. De aanhalingstekens komen uit het stijlblad en niet
   uit de tekst zelf, zodat de zin letterlijk in de bron blijft staan voor de
   controle op de fase 1-teksten. Manrope, de citaatletter uit het designsysteem. */
.i2m-hero__claim{font-family:var(--i2m-quote);font-weight:500;font-size:clamp(19px,2vw,26px);line-height:1.5;max-width:44ch;margin:0;text-wrap:pretty;position:relative;padding-left:22px}
.i2m-hero__claim::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:3px;background:var(--i2m-zwart);opacity:.35}
.i2m-hero__claim p{margin:0}
.i2m-hero__claim p::before{content:"\201C"}
.i2m-hero__claim p::after{content:"\201D"}
.i2m-hero__knoprij .i2m-knoppen{margin-top:0}
/* Vijf gelijke kolommen met alleen het icoon en het getal. Het label verschijnt
   bij aanwijzen als een blokje erboven. Het staat wel in de bron, dus een
   schermlezer krijgt het gewoon mee, en de kolom is met de tab-toets te bereiken
   zodat het label ook zonder muis verschijnt. */
.i2m-timer{display:flex;flex-direction:column;min-width:0;position:relative;border-radius:var(--i2m-radius);padding:6px 4px}
.i2m-timer:focus-visible{outline:var(--i2m-focus) solid var(--i2m-brand);outline-offset:2px}
.i2m-timer__kop{display:flex;align-items:center;gap:10px;min-width:0}
.i2m-timer__waarde{font-family:var(--i2m-mono);font-weight:600;font-size:clamp(22px,2.1vw,32px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap}
.i2m-timer__waarde .eenheid{font-size:15px;color:#5B7690}
/* Het label als blokje boven de kolom, in de retro-vorm. */
.i2m-timer__label{
  position:absolute;bottom:calc(100% + 8px);left:0;
  font-family:var(--i2m-mono);font-size:var(--i2m-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--i2m-zwart);
  background:var(--i2m-retro-2);border:2px solid var(--i2m-zwart);
  border-radius:var(--i2m-radius);padding:6px 10px;white-space:nowrap;
  opacity:0;visibility:hidden;transition:opacity .12s ease;pointer-events:none;
}
.i2m-timer:hover .i2m-timer__label,
.i2m-timer:focus-visible .i2m-timer__label{opacity:1;visibility:visible}
@media (prefers-reduced-motion:reduce){.i2m-timer__label{transition:none}}

/* 2. Cijferband */
.i2m-cijferband{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.i2m-cijferband__tegel{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--i2m-line);padding-block:16px}
.i2m-cijferband__waarde{font-family:var(--i2m-mono);font-weight:600;font-size:48px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--i2m-text);display:inline-flex;align-items:baseline;gap:4px}
.i2m-cijferband__waarde .eenheid{font-size:18px;color:var(--i2m-text-faint)}
.i2m-cijferband__waarde .streep{margin:0 4px}
.i2m-cijferband__label{font-family:var(--i2m-mono);font-size:var(--i2m-label);letter-spacing:.08em;text-transform:uppercase;color:var(--i2m-text-faint)}

/* 3. Herkenbaar
   Vier kaarten naast elkaar op retro papier, zoals op het canvas. Het nummer is
   een mono-label in de kaart zelf, niet een apart element ervoor. De kaarttekst
   staat in de kopletter: het is een uitspraak, geen lopende tekst. De zinnen
   komen letterlijk uit fase 1 en blijven staan. */
.i2m-pijn{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:48px}
.i2m-pijn__kaart{display:flex;flex-direction:column;gap:12px;padding:28px}
.i2m-pijn__nummer{font-family:var(--i2m-mono);font-size:13px;color:#4A463C}
.i2m-pijn__tekst{font-family:var(--i2m-display);font-weight:800;font-size:20px;line-height:1.3;margin:0}
.i2m-antwoord{max-width:62ch}
.i2m-antwoord h3{margin:0 0 12px}

/* 4. Cyberbeveiligingswet */
.i2m-wet{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start}
.i2m-wet__tekst p{max-width:58ch}
.i2m-wet__lijst ul{margin:0;padding:0;list-style:none}
.i2m-wet__lijst li{padding-block:10px;border-top:2px solid var(--i2m-zwart);font-weight:600}
.i2m-wet__lijst li:first-child{border-top:0;padding-top:0}

/* 5 en 7. Kaartrasters */
.i2m-raster-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.i2m-raster-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.i2m-kaart-papier{display:flex;flex-direction:column}
.i2m-kaart-papier .i2m-papier__link{margin-top:auto;align-self:start;padding-top:16px}

/* 6. KPI-tabel */
.i2m-kpi{padding:0}
.i2m-kpi table{width:100%;border-collapse:collapse}
.i2m-kpi th,.i2m-kpi td{text-align:left;padding:14px 24px;border-bottom:2px solid var(--i2m-zwart)}
.i2m-kpi th{font-family:var(--i2m-mono);font-size:var(--i2m-label);letter-spacing:.1em;text-transform:uppercase;color:#4A463C;font-weight:500}
.i2m-kpi tbody tr:last-child td{border-bottom:0}
.i2m-kpi__leeg{color:#6E6959;font-family:var(--i2m-mono)}
.i2m-kpi .i2m-papier__voet{padding:0 24px 20px}

/* 8. HaloPSA */
.i2m-halo{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.i2m-halo p{max-width:58ch;color:var(--i2m-text-soft)}
.i2m-halo__lijst{margin:0;padding:0;list-style:none}
.i2m-halo__lijst li{padding-block:16px;border-top:1px solid var(--i2m-line);font-size:18px}

/* 9. Core values */
.i2m-value h3{font-size:20px}

/* 10. FAQ */
.i2m-faq h2,.i2m-faq__item{max-width:820px}
.i2m-faq__item{border-top:1px solid var(--i2m-line);padding-block:18px}
.i2m-faq__item summary{cursor:pointer;font-weight:600;font-size:19px;list-style:none}
.i2m-faq__item summary::-webkit-details-marker{display:none}
.i2m-faq__item summary::after{content:"+";float:right;font-family:var(--i2m-mono);color:var(--i2m-text-faint)}
.i2m-faq__item[open] summary::after{content:"\2013"}
.i2m-faq__item p{margin:14px 0 0;color:var(--i2m-text-soft);max-width:70ch}

/* 11. Afsluiting */
.i2m-slot{padding:56px}
.i2m-slot h2{max-width:20ch}
.i2m-slot p{max-width:58ch}

@media (max-width:1080px){
  .i2m-raster-4{grid-template-columns:repeat(2,1fr)}
  .i2m-pijn{grid-template-columns:repeat(2,1fr)}
  .i2m-cijferband{grid-template-columns:repeat(2,1fr)}
  .i2m-raster-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .i2m-band{padding-block:64px}
  .i2m-wet,.i2m-halo{grid-template-columns:1fr}
  .i2m-kop-regel{flex-direction:column;align-items:start;gap:16px}
}
@media (max-width:620px){
  .i2m-raster-4,.i2m-raster-3,.i2m-pijn,.i2m-cijferband{grid-template-columns:1fr}
  .i2m-slot{padding:32px}
}

/* De timerregel onderin de hero: vier waarden naast elkaar, eerste kolom breder
   omdat daar twee getallen in staan. Onder 900 pixels twee per rij. */

@media (max-width:900px){
  .i2m-hero__timerrij{grid-template-columns:repeat(3,1fr);gap:16px}
  .i2m-hero__knoprij{justify-content:flex-start}
}
@media (max-width:560px){
  .i2m-hero__timerrij{grid-template-columns:1fr}
}