/* =====================================================
   SMA WEBSITE — CUSTOM CSS
   Zoho Sites Bizxpert
   Bijgewerkt 9 september 2026

   NIEUW IN DEZE VERSIE (9 september)
   Acht mobiele meldingen opgelost. Alles hieronder is nagemeten
   op smav1.zohosites.eu, niet gegokt.
   1. Blok 10. hyphens stond op auto. Dat is precies wat "SMA
      Commu-nity" veroorzaakte. De pagina heeft lang="nl-NL", dus
      Chrome breekt woorden op lettergrepen zodra hyphens auto is.
      Staat nu op none. De koppen zijn dus niet te groot, ze werden
      afgebroken. word-break blijft op normal, overflow-wrap blijft
      break-word als vangnet voor een woord dat echt niet past.
   2. Blok 14a. De regelafstand voor koppen staat op desktop niet
      meer op !important. Daardoor wint de instelling uit de builder
      weer. Zoho schrijft die weg als
      [data-element-id="..."] h3.zpheading{ line-height:35px; }
      met een lagere specificiteit dan html body h3, dus !important
      maakte het veld in de builder dood.
      Op tablet en mobiel blijft !important wel staan. Zoho kent
      namelijk geen regelafstand per apparaat: hij zet er één vaste
      pixelwaarde neer voor alle schermen. Zou die doorlekken naar
      mobiel, dan krijg je 44px regelafstand op een kop van 30px.
   3. Blok 17 is nieuw en bevat de vier mobiele reparaties:
      tabbladen, footer, fotoalbum en de achtergrondfoto op Events.
   4. Blok 19 is nieuw en belangrijk. De mobiele kopgroottes uit
      blok 14c deden bijna niets. Zoho zet de grootte die je in de
      builder kiest namelijk niet op de kop zelf, maar als inline
      stijl op de <span> binnen die kop. Blok 14c stuurt de kop aan,
      de span hield zijn desktopgrootte. Op 260 koppen met een eigen
      grootte gaat het er 177 mis. Vandaar 48px koppen op een scherm
      van 390px, en vandaar dat "SMA Community" werd afgebroken.
      Blok 19 laat alles binnen een kop de grootte van die kop
      erven. Nagemeten: daarna past elk woord in elke kop op de
      site binnen 350 pixels.
   5. Correctieronde, eind 9 september. De footer op desktop werd
      600 pixels hoog en leeg. Oorzaak: de footer heeft óók de klasse
      zpcontent-container, dus de heroregel uit blok 20 en de -72px
      uit blok 1 grepen de eerste footersectie mee. Beide regels
      staan nu op .page-container. De typeschaal is een stap
      strakker gezet (H1 44, H2 34, H3 28). Blok 24 geeft koppen in
      kaarten een eigen, kleinere schaal en zet het nieuwsbriefblok en
      de introtekst op SMA Awards terug op bodygrootte. Blok 25 haalt
      de witte strook boven de hero van Over SMA weg. Alle hero's zijn
      648 pixels hoog op desktop en de kop begint overal op exact 280
      pixels, op telefoon op 270. Zie blok 20a-2 voor hoe.
   6. Nacorrectie 9 september. Kaartkoppen op desktop van 20 naar
      19px, want "DENKPRODUCTIES" viel net van de podcastkaart af.
      Blok 26 zet de namen in de Wall of Fame op 16px, gelijk aan het
      CCO-tabblad, en haalt het afbreken middenin woorden weg.
   7. Hygiëneronde, ook 9 september. Blok 19 geldt nu op elk scherm,
      dus H1-koppen zijn overal even groot en H2-koppen ook. Blok 20
      zet alle hero's op één hoogte (600px desktop, 572px telefoon) en
      laat het menu op mobiel meelopen. Blok 21 geeft de oranje hover
      in het menu terug. Blok 22 trekt de verticale ruimte tussen
      secties gelijk: 34 van de 95 secties stonden net naast de
      schaal. Blok 23 doet hetzelfde horizontaal voor vier
      kolommen die links en rechts niet gelijk stonden. De footer op
      telefoon staat nu in één kolom. Tabkopjes
      zijn ook op desktop gecentreerd. De aspect-ratio op de hero van
      SMA Awards in blok 8 is uitgezet, die vocht met de vaste
      hoogte.
   8. Blok 18 is nieuw. Tien koppen hadden nog een oude vaste
      regelafstand in de builder staan die jarenlang onzichtbaar was
      omdat !important hem overschreef. Nu de builder weer wint,
      zouden ze ineens tevoorschijn komen, en alle tien staan ze
      krapper dan de tekstgrootte. Blok 18 zet precies die tien
      terug op de schaal. Op desktop verandert er dus niets ten
      opzichte van vandaag. Voor elke andere kop, nu en later,
      werkt het veld in de builder gewoon.

   LET OP, LEESBAARHEID
   Wit op #F68B1F is 2,43:1. De norm voor gewone tekst is 4,5:1.
   Navy op oranje was 7,25:1. Dit is dus een bewuste keuze voor
   de merkuitstraling, niet een verbetering van de leesbaarheid.
   Wil je later toch aan de norm voldoen zonder navy tekst, dan is
   de enige route: het oranje donkerder maken. Bij ongeveer #B35C00
   haalt witte tekst 4,5:1. Dat raakt wel het brandbook.

   WAT ER EERDER IS VERANDERD TEN OPZICHTE VAN JOUW VERSIE
   1. Het <script>-blok is eruit. Een CSS-veld voert geen
      JavaScript uit, dus dat draaide nooit. Zie punt A hieronder.
   2. De mobiele regels stonden bij jou binnen
      @media (min-width:992px). Dat kan per definitie nooit waar
      zijn, dus ze deden niets. Nu staan ze los onderaan.
   3. .zpheader-style-04 bestaat niet op deze site (het is -01),
      maar dat is met opzet zo gelaten: de header krijgt zijn
      doorzichtige navy al van het thema. Zie de opmerking bij blok 1.
   4. Knoppen: alleen oranje en navy. De turquoise Awards-knoppen
      worden overgeslagen via .sma-turq. Zie punt B.
   5. Drie niet-merkkleuren uit je eigen CSS vervangen:
      #1a2b4a en #1c2938 naar #061A2B, #6be0a7 naar #6BDFA6.
      Header en mobiel menu blijven doorzichtig zoals ze waren.
      De footer blijft op zijn oude maat, behalve op mobiel.
   6. De -72px hangt nu aan één variabele bovenin.

   KLEURREGEL, BIJGEWERKT 8 SEPTEMBER 2026
   Navy      #061A2B
   Wit       #FFFFFF
   Oranje    #F68B1F
   Turquoise #ACEFD5
   Meer kleuren zijn er niet. Vervallen en dus fout als je ze tegenkomt:
   #FF9E40 (oude oranje uit brandbook V5), #FF8A16, #EA7704, #E67E22,
   #FF8B17, #6BDFA6, #6BE0A7, #CEF3E1, #093045, #1C2938, #1A2B4A.

   Knopregels:
   - Primair, lichte sectie:   vlak #F68B1F, tekst #FFFFFF     2,43:1
   - Primair, donkere sectie:  vlak #F68B1F, tekst #FFFFFF     2,43:1
   - Primair, hover licht:     vlak #061A2B, tekst #FFFFFF    17,64:1
   - Primair, hover donker:    vlak #FFFFFF, tekst #061A2B    17,64:1
   - Secundair, lichte sectie:  rand en tekst #061A2B         17,64:1
   - Secundair, donkere sectie: rand en tekst #FFFFFF         17,64:1
   - Knop rechtsboven:         vlak #F68B1F, tekst #FFFFFF     2,43:1
   - Knop rechtsboven, hover:  vlak #FFFFFF, tekst #061A2B    17,64:1
   Tekst op oranje is altijd wit. Tekst op wit of licht is altijd navy.
   Oranje tekst op navy komt nergens meer voor.

   NOG DOEN IN DE BUILDER, DIT KAN CSS NIET
   A. Het opruimscript hoort in de footer-code, niet hier. Beter
      nog: haal de losse tekst die begint met .zpdark-section weg uit
      het contentblok onderaan de homepage waar hij in staat.
   B. Geef de 15 turquoise knoppen de klasse sma-turq:
      4 op de homepage (Nomineer hier), 7 op /sma-awards,
      3 op /sma-community (Ontdek ...), 1 op /wall-of-fame1.
      Zonder die klasse worden ze oranje.
   C. De H1 "Wall of Fame" staat navy op navy en is onzichtbaar.
      Zet die tekst in de builder op wit.
   D. De oranje bovenkopjes en de regels die met "Status:"
      beginnen zijn oranje op wit (2,43:1). Zet ze op navy.
      Dit gaat over losse tekst, niet over knoppen. De nieuwe
      witregel voor knoppen verandert hier niets aan.
   E. Haal de dubbele regels voor .zpelem-box.zpbox-container uit
      je header-code weg. Ze staan hieronder al.
   F. Waar je in de visuele editor zelf een tekstkleur op een
      knop hebt gezet, wint die van deze CSS. Loop de 13 knoppen na
      uit de lijst bij "WAT CSS NIET KAN OVERSCHRIJVEN" en zet daar
      naast het vlak (#F68B1F) ook de tekst op wit.
   G. AFGEROND op 9 september. De H3 op /sma-community (Grand Hotel
      Huis ter Duin) stond op regelafstand 0px. Die waarde is uit
      de builder gehaald, gecontroleerd op de live site. Het
      tijdelijke reparatieregeltje is daarom weer verwijderd.
   H. AFGEROND op 9 september. De achtergrondsectie bovenaan
      /events staat nu op cover in plaats van auto. Gecontroleerd
      op de live site. Blok 17d blijft staan als vangnet, zie de
      opmerking daar.
   I. Het fotoalbum op /events heeft nu 9 foto's. De regel in blok
      17c is op dat aantal berekend. Voeg je foto's toe of haal je
      ze weg, pas dan het percentage aan. De formule staat erbij.
   J. NIEUW. De tien koppen in blok 18 hebben nog een oude vaste
      regelafstand in de builder staan. Wil je zo'n kop later echt
      zelf regelen, haal hem dan uit de lijst in blok 18 en zet de
      waarde in de builder. Zolang hij in de lijst staat, wint deze
      CSS.

   WAT CSS NIET KAN OVERSCHRIJVEN
   Op 13 plekken staat de oude oranje #FF9E40 als elementinstelling in
   de builder, met !important en een eigen data-element-id. Die zet je
   daar om naar #F68B1F. De lijst staat in
   Downloads/SMA snippets/Oude oranje FF9E40 in de builder.csv
   ===================================================== */

:root{
    --sma-header-h: 72px;   /* verander je de logohoogte, pas dit aan */
    --sma-logo-h: 46px;
}

/* =====================================================
   1. HEADER EN LOGO
   ===================================================== */
.theme-branding-info img,
[data-zs-branding] img{
    max-height: var(--sma-logo-h) !important;
    height: auto !important;
    width: auto !important;
}
.theme-branding-info,
[data-zs-branding]{
    min-height: var(--sma-header-h) !important;
    height: var(--sma-header-h) !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 11px !important;
    padding-bottom: 15px !important;
}
.theme-header .zpcontainer,
[data-megamenu-content-container].theme-header{
    min-height: var(--sma-header-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Ongewijzigd gelaten. .zpheader-style-04 bestaat niet op deze site,
   maar de buitenste headerlaag krijgt zijn doorzichtige navy al van het
   thema zelf. Er .zpheader-style-01 bij zetten voegt niets toe en kan de
   header juist dichter maken doordat twee lagen over elkaar verven. */
.zpheader-style-04,
.theme-header,
[data-megamenu-content-container]{
    background: rgba(6, 26, 43, .80) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    background-image: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
/* Lijn tussen header en content weg */
[data-headercontainer],
.theme-header,
.zpheader-style-01,
.zpheader-style-04,
.theme-content-area,
.theme-content-container,
.zpcontent-container,
.zpsection:first-child{
    border: none !important;
    border-top: none !important;
    box-shadow: none !important;
}
/* Hero begint achter de header */
.theme-content-area,
[data-theme-content-container]{
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* GEWIJZIGD 9 SEPTEMBER: .page-container in plaats van .zpcontent-container.
   De footer heeft namelijk ook de klasse zpcontent-container. Deze regel trok
   dus ook de eerste footersectie 72 pixels omhoog. */
.page-container > .zpsection:first-child,
.theme-content-area-inner .zpsection:first-child{
    margin-top: calc(var(--sma-header-h) * -1) !important;
}

/* =====================================================
   2. MENU OP DESKTOP
   De :not(.menu-highlight-primary) blijft staan. De gewone
   menutekst en de knop "Lid worden" zijn nu allebei wit, dus
   je zou hem weg kunnen halen. Toch laten staan: blok 3d moet
   de hover kunnen omdraaien naar navy op wit, en die uitzondering
   houdt die zeggenschap bij blok 3d.
   ===================================================== */
.theme-header .theme-menu > ul > li:not(.menu-highlight-primary) > a,
.theme-header .theme-menu > ul > li:not(.menu-highlight-primary) > a span{
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .5) !important;
}
.theme-header .theme-menu ul ul a,
.theme-header .theme-menu ul ul span{
    color: #061A2B !important;              /* was #1a2b4a, geen merkkleur */
}
.theme-header .theme-navigation-and-icons svg,
.theme-header .theme-navigation-and-icons svg path,
.theme-header .theme-navigation-and-icons i{
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* =====================================================
   3. KNOPPEN — alleen oranje en navy
   De turquoise Awards-knoppen krijgen in de builder de
   klasse sma-turq en worden hier overal overgeslagen.
   ===================================================== */

/* 3a. Vorm en klikvlak */
html body a.zpbutton:not(:is(
                     [data-element-id="elm_aWKKaqbfjUzgVH8Xlwi2NA"],
                     [data-element-id="elm_Jgb8SJeu6gM2a4WR367fYQ"],
                     [data-element-id="elm_PujjtfkMRgRratMgL7lCjw"],
                     [data-element-id="elm_cghTH1hVbtEhw3NkESAfuw"],
                     [data-element-id="elm_fFcb97nwt9jVilwXcy7n3g"],
                     [data-element-id="elm_5cpZR7Hd_Ue_1gs3NjImCQ"],
                     [data-element-id="elm_9dCjQX4l8v5JDD1jg9_o1Q"],
                     [data-element-id="elm_gZ1WQyqNwSp70KxzfHbFFg"],
                     [data-element-id="elm_2WVDGHuoK7YDn9OIVk-Rmg"],
                     [data-element-id="elm_5ubBuw4gSsWxPD2tyzUMEw"],
                     [data-element-id="elm_thmjBBXzwN0ojQDNykwJfA"],
                     [data-element-id="elm_dtM1ew2hWXwbKe1tGA8ieA"],
                     [data-element-id="elm_IupveU7BAiCZMcuk4B9qyg"],
                     [data-element-id="elm_7KvO93aDJUnIgBpKZ0WcRQ"],
                     [data-element-id="elm_WOWWkmDwwwWClECvDIfALA"],
                     [data-element-id="elm_vfKXBIcRx6asbBE1vdCfDg"],
                     [data-element-id="elm_Rl6FO8BA019W-FFrfMWUzg"]) *){
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 8px 24px !important;
    border-radius: 999px !important;
    border: 1.5px solid transparent !important;
    font-family: "Work Sans", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease !important;
}

/* 3b. Op lichte secties */
html body a.zpbutton.zpbutton-type-primary:not(:is(
                     [data-element-id="elm_aWKKaqbfjUzgVH8Xlwi2NA"],
                     [data-element-id="elm_Jgb8SJeu6gM2a4WR367fYQ"],
                     [data-element-id="elm_PujjtfkMRgRratMgL7lCjw"],
                     [data-element-id="elm_cghTH1hVbtEhw3NkESAfuw"],
                     [data-element-id="elm_fFcb97nwt9jVilwXcy7n3g"],
                     [data-element-id="elm_5cpZR7Hd_Ue_1gs3NjImCQ"],
                     [data-element-id="elm_9dCjQX4l8v5JDD1jg9_o1Q"],
                     [data-element-id="elm_gZ1WQyqNwSp70KxzfHbFFg"],
                     [data-element-id="elm_2WVDGHuoK7YDn9OIVk-Rmg"],
                     [data-element-id="elm_5ubBuw4gSsWxPD2tyzUMEw"],
                     [data-element-id="elm_thmjBBXzwN0ojQDNykwJfA"],
                     [data-element-id="elm_dtM1ew2hWXwbKe1tGA8ieA"],
                     [data-element-id="elm_IupveU7BAiCZMcuk4B9qyg"],
                     [data-element-id="elm_7KvO93aDJUnIgBpKZ0WcRQ"],
                     [data-element-id="elm_WOWWkmDwwwWClECvDIfALA"],
                     [data-element-id="elm_vfKXBIcRx6asbBE1vdCfDg"],
                     [data-element-id="elm_Rl6FO8BA019W-FFrfMWUzg"]) *){
    background: #F68B1F !important;
    border-color: #F68B1F !important;
    color: #FFFFFF !important;              /* wit op oranje, 2,43:1 */
}
html body a.zpbutton.zpbutton-type-primary:not(:is(
                     [data-element-id="elm_aWKKaqbfjUzgVH8Xlwi2NA"],
                     [data-element-id="elm_Jgb8SJeu6gM2a4WR367fYQ"],
                     [data-element-id="elm_PujjtfkMRgRratMgL7lCjw"],
                     [data-element-id="elm_cghTH1hVbtEhw3NkESAfuw"],
                     [data-element-id="elm_fFcb97nwt9jVilwXcy7n3g"],
                     [data-element-id="elm_5cpZR7Hd_Ue_1gs3NjImCQ"],
                     [data-element-id="elm_9dCjQX4l8v5JDD1jg9_o1Q"],
                     [data-element-id="elm_gZ1WQyqNwSp70KxzfHbFFg"],
                     [data-element-id="elm_2WVDGHuoK7YDn9OIVk-Rmg"],
                     [data-element-id="elm_5ubBuw4gSsWxPD2tyzUMEw"],
                     [data-element-id="elm_thmjBBXzwN0ojQDNykwJfA"],
                     [data-element-id="elm_dtM1ew2hWXwbKe1tGA8ieA"],
                     [data-element-id="elm_IupveU7BAiCZMcuk4B9qyg"],
                     [data-element-id="elm_7KvO93aDJUnIgBpKZ0WcRQ"],
                     [data-element-id="elm_WOWWkmDwwwWClECvDIfALA"],
                     [data-element-id="elm_vfKXBIcRx6asbBE1vdCfDg"],
                     [data-element-id="elm_Rl6FO8BA019W-FFrfMWUzg"]) *):hover{
    background: #061A2B !important;
    border-color: #061A2B !important;
    color: #FFFFFF !important;              /* 17,64:1 */
}
html body a.zpbutton.zpbutton-type-secondary:not(.sma-turq){
    background: transparent !important;
    border-color: #061A2B !important;
    color: #061A2B !important;              /* 17,64:1 */
}
html body a.zpbutton.zpbutton-type-secondary:not(.sma-turq):hover{
    background: #061A2B !important;
    border-color: #061A2B !important;
    color: #FFFFFF !important;
}

/* 3c. Op donkere secties en op de hero.
   De hero heeft geen .zpdark-section-klasse maar wel een donkere
   foto of gradient, dus die vangen we apart af. Zonder deze regels
   krijgt "Word ook lid" een navy rand op een donkere foto. */
html body .zpdark-section a.zpbutton.zpbutton-type-primary:not(:is(
                     [data-element-id="elm_aWKKaqbfjUzgVH8Xlwi2NA"],
                     [data-element-id="elm_Jgb8SJeu6gM2a4WR367fYQ"],
                     [data-element-id="elm_PujjtfkMRgRratMgL7lCjw"],
                     [data-element-id="elm_cghTH1hVbtEhw3NkESAfuw"],
                     [data-element-id="elm_fFcb97nwt9jVilwXcy7n3g"],
                     [data-element-id="elm_5cpZR7Hd_Ue_1gs3NjImCQ"],
                     [data-element-id="elm_9dCjQX4l8v5JDD1jg9_o1Q"],
                     [data-element-id="elm_gZ1WQyqNwSp70KxzfHbFFg"],
                     [data-element-id="elm_2WVDGHuoK7YDn9OIVk-Rmg"],
                     [data-element-id="elm_5ubBuw4gSsWxPD2tyzUMEw"],
                     [data-element-id="elm_thmjBBXzwN0ojQDNykwJfA"],
                     [data-element-id="elm_dtM1ew2hWXwbKe1tGA8ieA"],
                     [data-element-id="elm_IupveU7BAiCZMcuk4B9qyg"],
                     [data-element-id="elm_7KvO93aDJUnIgBpKZ0WcRQ"],
                     [data-element-id="elm_WOWWkmDwwwWClECvDIfALA"],
                     [data-element-id="elm_vfKXBIcRx6asbBE1vdCfDg"],
                     [data-element-id="elm_Rl6FO8BA019W-FFrfMWUzg"]) *):hover,
html body .zpcontent-container > .zpsection:first-child a.zpbutton.zpbutton-type-primary:not(:is(
                     [data-element-id="elm_aWKKaqbfjUzgVH8Xlwi2NA"],
                     [data-element-id="elm_Jgb8SJeu6gM2a4WR367fYQ"],
                     [data-element-id="elm_PujjtfkMRgRratMgL7lCjw"],
                     [data-element-id="elm_cghTH1hVbtEhw3NkESAfuw"],
                     [data-element-id="elm_fFcb97nwt9jVilwXcy7n3g"],
                     [data-element-id="elm_5cpZR7Hd_Ue_1gs3NjImCQ"],
                     [data-element-id="elm_9dCjQX4l8v5JDD1jg9_o1Q"],
                     [data-element-id="elm_gZ1WQyqNwSp70KxzfHbFFg"],
                     [data-element-id="elm_2WVDGHuoK7YDn9OIVk-Rmg"],
                     [data-element-id="elm_5ubBuw4gSsWxPD2tyzUMEw"],
                     [data-element-id="elm_thmjBBXzwN0ojQDNykwJfA"],
                     [data-element-id="elm_dtM1ew2hWXwbKe1tGA8ieA"],
                     [data-element-id="elm_IupveU7BAiCZMcuk4B9qyg"],
                     [data-element-id="elm_7KvO93aDJUnIgBpKZ0WcRQ"],
                     [data-element-id="elm_WOWWkmDwwwWClECvDIfALA"],
                     [data-element-id="elm_vfKXBIcRx6asbBE1vdCfDg"],
                     [data-element-id="elm_Rl6FO8BA019W-FFrfMWUzg"]) *):hover,
html body .theme-content-area-inner .zpsection:first-child a.zpbutton.zpbutton-type-primary:not(:is(
                     [data-element-id="elm_aWKKaqbfjUzgVH8Xlwi2NA"],
                     [data-element-id="elm_Jgb8SJeu6gM2a4WR367fYQ"],
                     [data-element-id="elm_PujjtfkMRgRratMgL7lCjw"],
                     [data-element-id="elm_cghTH1hVbtEhw3NkESAfuw"],
                     [data-element-id="elm_fFcb97nwt9jVilwXcy7n3g"],
                     [data-element-id="elm_5cpZR7Hd_Ue_1gs3NjImCQ"],
                     [data-element-id="elm_9dCjQX4l8v5JDD1jg9_o1Q"],
                     [data-element-id="elm_gZ1WQyqNwSp70KxzfHbFFg"],
                     [data-element-id="elm_2WVDGHuoK7YDn9OIVk-Rmg"],
                     [data-element-id="elm_5ubBuw4gSsWxPD2tyzUMEw"],
                     [data-element-id="elm_thmjBBXzwN0ojQDNykwJfA"],
                     [data-element-id="elm_dtM1ew2hWXwbKe1tGA8ieA"],
                     [data-element-id="elm_IupveU7BAiCZMcuk4B9qyg"],
                     [data-element-id="elm_7KvO93aDJUnIgBpKZ0WcRQ"],
                     [data-element-id="elm_WOWWkmDwwwWClECvDIfALA"],
                     [data-element-id="elm_vfKXBIcRx6asbBE1vdCfDg"],
                     [data-element-id="elm_Rl6FO8BA019W-FFrfMWUzg"]) *):hover{
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: #061A2B !important;
}
html body .zpdark-section a.zpbutton.zpbutton-type-secondary:not(.sma-turq),
html body .zpcontent-container > .zpsection:first-child a.zpbutton.zpbutton-type-secondary:not(.sma-turq),
html body .theme-content-area-inner .zpsection:first-child a.zpbutton.zpbutton-type-secondary:not(.sma-turq){
    background: transparent !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;              /* 17,64:1 op navy */
}
html body .zpdark-section a.zpbutton.zpbutton-type-secondary:not(.sma-turq):hover,
html body .zpcontent-container > .zpsection:first-child a.zpbutton.zpbutton-type-secondary:not(.sma-turq):hover,
html body .theme-content-area-inner .zpsection:first-child a.zpbutton.zpbutton-type-secondary:not(.sma-turq):hover{
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: #061A2B !important;              /* 17,64:1 */
}

/* 3d. De knop rechtsboven in de header.
   De tekst van dit menu-item zit in twee geneste spans binnen de link:
   .theme-menu-content en daarin .theme-menu-name. Kleur je alleen de
   link, dan blijft de tekst staan op de kleur van de span. Daarom
   worden hieronder link en beide spans expliciet gezet.
   Sinds 8 september staat de tekst op wit, gelijk aan alle andere
   oranje knoppen. De tekstschaduw uit blok 2 blijft uit: die maakt
   de rand van de letters vuil op oranje. */
html body .theme-header .theme-menu > ul > li.menu-highlight-primary > a{
    background: #F68B1F !important;
    border-radius: 999px !important;
    font-family: "Work Sans", sans-serif !important;
    font-size: 14px !important;
}
html body .theme-header .theme-menu > ul > li.menu-highlight-primary > a,
html body .theme-header .theme-menu > ul > li.menu-highlight-primary > a .theme-menu-content,
html body .theme-header .theme-menu > ul > li.menu-highlight-primary > a .theme-menu-name,
html body li.menu-highlight-primary > a span{
    color: #FFFFFF !important;              /* wit op oranje, 2,43:1 */
    text-shadow: none !important;
}
/* Hover: het vlak wordt wit, dus daar moet de tekst juist navy zijn. */
html body .theme-header .theme-menu > ul > li.menu-highlight-primary > a:hover{
    background: #FFFFFF !important;
}
html body .theme-header .theme-menu > ul > li.menu-highlight-primary > a:hover,
html body .theme-header .theme-menu > ul > li.menu-highlight-primary > a:hover .theme-menu-content,
html body .theme-header .theme-menu > ul > li.menu-highlight-primary > a:hover .theme-menu-name,
html body li.menu-highlight-primary > a:hover span{
    color: #061A2B !important;              /* 17,64:1 */
    text-shadow: none !important;
}

/* 3e. Het vangnet.
   Alles binnen een knop erft de kleur van die knop. Zet een span,
   strong of em in de builder een eigen kleur, dan wordt die hier
   overschreven met de kleur die de knop zelf heeft. Dit werkt voor
   oranje, navy en turquoise tegelijk, want inherit vraagt niet naar
   een vaste waarde maar naar de kleur van de ouder. */
html body a.zpbutton *,
html body button.zpbutton *,
html body .zpelem-button a *,
html body .zpelem-buttongroup a *{
    color: inherit !important;
    text-shadow: inherit !important;
}

/* =====================================================
   4. FOOTER
   Op desktop ongemoeid gelaten. De links staan op 10px en de
   sublinks op 8px, allebei uit je eigen footer-codeblok.
   Op mobiel wordt dat wel aangepast, zie blok 17b.
   ===================================================== */
/*
html body ul.zplink-list-container a.zplink-text{
    font-size: 12px !important;
    line-height: 1.5 !important;
}
*/

/* 4b. Hoverkleur van de footerlinks terug naar de merkoranje.
   In je eigen footer-codeblok staat deze regel:
       .footer-container .zplink-list-container a:hover,
       .footer-container .zplink-list-container a:hover span{
           color: #FF9E40 !important;
       }
   Dat is de oude oranje, en dat blok staat op elke pagina. De regel
   hieronder heeft twee elementen meer in de selector en wint daarom,
   ongeacht in welke volgorde de stijlen laden. Je hoeft je codeblok
   dus niet te veranderen. Doe je dat later wel, dan kan dit blok weg. */
html body .footer-container .zplink-list-container a:hover,
html body .footer-container .zplink-list-container a:hover span,
html body .footer-container .zplink-list-container li a:hover,
html body .footer-container .zplink-list-container li a:hover span{
    color: #F68B1F !important;
}

/* =====================================================
   5. SOCIAL ICONS
   ===================================================== */
.zs-socialicon a,
.zs-socialicon i,
.zs-socialicon svg,
.zs-socialicon svg path{
    color: #ACEFD5 !important;
    fill: #ACEFD5 !important;
    stroke: #ACEFD5 !important;
}

/* =====================================================
   6. KAARTEN EN KOLOMMEN GELIJK UITLIJNEN
   Alleen vanaf tablet. Op mobiel staan ze onder elkaar en
   levert gelijke hoogte alleen lege vlakken op.
   ===================================================== */
@media (min-width: 768px){
    .zpelem-col.zpcol-md-3{
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }
    .zpelem-col.zpcol-md-3 .zpelem-button{
        margin-top: auto !important;
    }
    .zpelem-box.zpbox-container{
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }
    /* NIET laten meegroeien. Dat was de oorzaak van de extra
       witruimte onder de datumregel op de eerste eventkaart:
       dat element is een Text-element en pakte de restruimte
       van de kaart. De knoppen worden al met margin-top:auto
       naar beneden geduwd, dus meegroeien is overbodig. */
    html body .zpelem-box.zpbox-container .zpelem-text{
        flex: 0 1 auto !important;
    }
    .zpelem-box.zpbox-container .zpelem-buttongroup,
    .zpelem-box.zpbox-container .zpelem-button{
        margin-top: auto !important;
    }
}

/* =====================================================
   7. HERO FALLBACK, voorkomt een witte flits tijdens laden
   ===================================================== */
.hero-fallback-bg,
.zscustom-section-bizxpert-01{
    background-color: #061A2B !important;   /* was #1c2938, geen merkkleur */
    animation: none !important;
    opacity: 1 !important;
}

/* =====================================================
   8. PAGINASPECIFIEK — SMA Awards
   ===================================================== */
html body [data-element-id="elm_ThQb7e2fAX5ZCvfaK4pJMw"].zpelem-heading.zpelem-heading{
    margin-block-start: 0 !important;
    margin-top: 0 !important;
}
html body [data-element-id="elm_vq2CMF0ArJPXJhrrUoTAMQ"].zpsection.zpsection{
    margin-block-end: 0 !important;
    margin-bottom: 0 !important;
}
/* UITGEZET OP 9 SEPTEMBER. Deze regel gaf de hero van SMA Awards een
   hoogte die meebewoog met de schermbreedte. Bij 1440px werd dat 600px,
   bij 1920px 800px. Daardoor was die hero nooit even hoog als de rest.
   Blok 20 zet alle hero's op één vaste hoogte. Zet je dit terug aan,
   dan valt SMA Awards weer uit de rij.
@media (min-width: 992px){
    html body [data-element-id="elm_vq2CMF0ArJPXJhrrUoTAMQ"].zpsection.zpsection{
        aspect-ratio: 1600 / 667 !important;
        height: auto !important;
    }
}
*/

/* =====================================================
   9. TABLET EN TELEFOON — tot 991px
   ===================================================== */
@media (max-width: 991px){
    .theme-header-topbar{ display: none !important; }
    .theme-header{ top: 0 !important; }

    /* Menupaneel doorzichtig met blur, zoals bewust gestyled. */
    .theme-menu{
        background: rgba(6, 26, 43, .94) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        background-image: none !important;
    }
    .theme-menu a,
    .theme-menu span,
    .theme-menu .theme-menu-name,
    .theme-menu .theme-menu-content{
        color: #ffffff !important;
    }
    /* De regel hierboven zet alle menutekst op wit. De knop "Lid worden"
       houdt in het uitgeklapte menu zijn oranje pil met witte tekst, net
       als op desktop. Dat gebeurt vanzelf via blok 3d, want die regels
       hebben een hogere specificiteit. Wil je hem op mobiel wel als
       gewone witte regel zonder pil, haal dan de twee schuine strepen
       hieronder weg.
       .theme-menu li.menu-highlight-primary > a{ background: transparent !important; }
       .theme-menu li.menu-highlight-primary > a,
       .theme-menu li.menu-highlight-primary > a span{ color: #ffffff !important; }
    */
    .theme-sub-menu{
        background: transparent !important;
        padding-left: 18px !important;
    }
    .theme-menu .theme-sub-menu li > a,
    .theme-menu .theme-sub-menu li > a > .theme-menu-content,
    .theme-menu .theme-sub-menu li > a > .theme-menu-content > .theme-menu-name{
        color: #ffffff !important;
    }
    .theme-sub-menu .theme-menu-name{
        font-size: 15px !important;
        opacity: .9;
    }
    /* Menu-items groot genoeg om te tappen */
    html body .theme-menu > ul > li > a{
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
    }
    /* Hamburger was 23x20px en stond 2px van de bovenrand.
       Nu 44px breed, over de volle hoogte van de header, en het
       icoon precies in het midden. De -16px compenseert de twee
       streepjes die het icoon met ::before en ::after onder zich
       tekent; zonder dat hangt het icoon 8px te laag. */
    html body .theme-responsive-menu-area{
        display: flex !important;
        align-items: center !important;
        align-self: stretch !important;
        min-height: var(--sma-header-h) !important;
    }
    html body .theme-responsive-menu-container{
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        min-width: 44px !important;
        height: var(--sma-header-h) !important;
        margin: 0 !important;
        padding-right: 2px !important;
    }
    html body .theme-burger-icon{
        margin: -16px 0 0 0 !important;
    }
    /* Knoppen groot genoeg om te tappen */
    html body a.zpbutton:not(.sma-turq){ min-height: 44px !important; }
}

/* =====================================================
   10. TELEFOON — tot 767px
   ===================================================== */
@media (max-width: 767px){
    /* De roterende hero-woorden zijn 411px breed in een scherm
       van 390px. Daardoor scrollt de homepage zijwaarts. */
    html body .sma-word-wrapper,
    html body .sma-cube,
    html body .sma-face{
        max-width: 100% !important;
    }
    html, body{ overflow-x: hidden !important; }

    /* GEWIJZIGD 9 SEPTEMBER.
       hyphens stond hier op auto. De pagina heeft lang="nl-NL", dus
       Chrome ging Nederlandse woorden op lettergrepen afbreken:
       "SMA Commu-nity", "Accreditat-ie". Dat is geen kwestie van
       een te grote letter, het is het afbreken zelf. Staat nu uit.
       word-break normal voorkomt het harde afbreken midden in een
       woord. overflow-wrap break-word blijft staan als vangnet
       voor een woord dat echt breder is dan het scherm. */
    html body h1, html body h2, html body h3,
    html body h4, html body h5, html body h6{
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
    }
    /* De mobiele kopgroottes staan in blok 14c. Past een titel na
       deze wijziging nog steeds niet, verlaag dan daar één getal. */

    /* Kaarten niet allemaal even hoog, scheelt lege vlakken */
    html body .zpelem-box.zpbox-container,
    html body .zpelem-col.zpcol-md-3{ height: auto !important; }

    /* De m-vorm valt over de knop "Bekijk de events en meld je aan".
       De knop komt er nu bovenop te liggen. */
    html body .zpelement.zpelem-button{
        position: relative !important;
        z-index: 2 !important;
    }
    html body img[src*="M_SHAPE"]{ margin-top: 24px !important; }
}

/* =====================================================
   11. TOETSENBORDBEDIENING
   ===================================================== */
html body a.zpbutton:focus-visible,
html body .theme-menu a:focus-visible,
html body ul.zplink-list-container a.zplink-text:focus-visible{
    outline: 3px solid #F68B1F !important;
    outline-offset: 2px !important;
}

/* =====================================================
   12. SCROLLBAR IN HUISSTIJL
   Vervangt de witte systeem-scrollbar door navy.
   Firefox gebruikt scrollbar-color, Chrome/Safari/Edge
   gebruiken de ::-webkit-regels daaronder.
   ===================================================== */
html{
    scrollbar-width: thin;
    scrollbar-color: #061A2B transparent;   /* duimpje, spoor */
}
html::-webkit-scrollbar{
    width: 8px;
    height: 8px;
}
html::-webkit-scrollbar-track{
    background: transparent;
}
html::-webkit-scrollbar-thumb{
    background: #061A2B;
    border-radius: 8px;
}
html::-webkit-scrollbar-thumb:hover{
    background: #F68B1F;
}
html::-webkit-scrollbar-corner{
    background: transparent;
}

/* =====================================================
   14. TYPESCHAAL VOOR KOPPEN
   Een niveau is wat iets IS, een grootte is hoe het
   eruitziet. Deze schaal koppelt de twee aan elkaar,
   zodat je in de editor alleen nog het juiste niveau
   hoeft te kiezen en de grootte vanzelf goed staat.
   Basis: bodytekst 16px Work Sans. Koppen Rubik.

   GEWIJZIGD 9 SEPTEMBER, REGELAFSTAND
   Op desktop staat line-height hieronder niet meer op
   !important. Zoho schrijft de waarde uit de builder weg als
   [data-element-id="..."] h3.zpheading{ line-height:35px; }
   Die selector telt twee klassen en wint dus van html body h3,
   zolang die laatste geen !important heeft. Met !important won
   deze CSS altijd en deed het veld in de builder niets.
   Zonder !important geldt: staat er niets in de builder, dan
   pakt de kop de schaal hieronder; zet je er wel iets in, dan
   wint de builder. Precies wat je wilt.

   Op tablet en mobiel blijft !important wel staan, met opzet.
   Zoho kent geen regelafstand per apparaat: je zet één vaste
   pixelwaarde voor alle schermen. Tien koppen op de site hebben
   nog zo'n vaste waarde (44px op /events, 35px op /sma-community,
   19px op /podcasts-presentaties). Zou 44px doorlekken naar een
   kop van 30px op een telefoon, dan valt de tekst uit elkaar.
   Diezelfde tien koppen worden op desktop teruggezet op de
   schaal, zie blok 18.
   ===================================================== */
/* 14a. Desktop, vanaf 992px */
@media (min-width: 992px){
    html body h1{ font-size: 44px !important; line-height: 1.10; font-weight: 700 !important; }
    html body h2{ font-size: 34px !important; line-height: 1.15; font-weight: 400 !important; }
    html body h3{ font-size: 28px !important; line-height: 1.20; font-weight: 400 !important; }
    html body h4{ font-size: 23px !important; line-height: 1.25; font-weight: 400 !important; }
    html body h5{ font-size: 20px !important; line-height: 1.30; font-weight: 500 !important; }
    html body h6{ font-size: 18px !important; line-height: 1.35; font-weight: 600 !important; }
}
/* 14b. Tablet, 768 tot 991px */
@media (min-width: 768px) and (max-width: 991px){
    html body h1{ font-size: 38px !important; line-height: 1.12 !important; font-weight: 700 !important; }
    html body h2{ font-size: 30px !important; line-height: 1.16 !important; font-weight: 400 !important; }
    html body h3{ font-size: 25px !important; line-height: 1.20 !important; font-weight: 400 !important; }
    html body h4{ font-size: 21px !important; line-height: 1.25 !important; font-weight: 400 !important; }
    html body h5{ font-size: 18px !important; line-height: 1.30 !important; font-weight: 500 !important; }
    html body h6{ font-size: 17px !important; line-height: 1.35 !important; font-weight: 600 !important; }
}
/* 14c. Telefoon, tot 767px */
@media (max-width: 767px){
    html body h1{ font-size: 30px !important; line-height: 1.12 !important; font-weight: 700 !important; }
    html body h2{ font-size: 25px !important; line-height: 1.18 !important; font-weight: 400 !important; }
    html body h3{ font-size: 21px !important; line-height: 1.22 !important; font-weight: 400 !important; }
    html body h4{ font-size: 19px !important; line-height: 1.26 !important; font-weight: 400 !important; }
    html body h5{ font-size: 17px !important; line-height: 1.30 !important; font-weight: 500 !important; }
    html body h6{ font-size: 16px !important; line-height: 1.35 !important; font-weight: 600 !important; }
}

/*
15. KLEUR VAN DE JAARTALLEN EN DE WINNAARSNAMEN
BIJGEWERKT OP 9 SEPTEMBER 2026

Hier stonden twee kleurregels voor koppen in de kaarten.
Die koppen bestaan niet meer. De namen en de jaartallen zijn
nu tekstelementen en dragen hun eigen kleur.
Zie blok 26 en blok 27.
*/

/*
16. LEGE KOPPEN UIT DE KOPPENSTRUCTUUR HALEN
Op zes plekken staat een kop zonder tekst. Ze zijn nul
pixels hoog, dus je ziet ze niet, maar een screenreader
en Google lezen ze wel mee als een lege kop. De Zoho-
editor laat ze niet verwijderen. Deze regel haalt ze uit
beeld en uit de structuur, zonder dat er iets verschuift.
*/
html body h1:empty,
html body h2:empty,
html body h3:empty,
html body h4:empty,
html body h5:empty,
html body h6:empty{
    display: none;
}

/* =====================================================
   17. MOBIELE CORRECTIES — NIEUW OP 9 SEPTEMBER 2026
   Vier reparaties. Alle selectors zijn gecontroleerd op
   smav1.zohosites.eu.
   ===================================================== */

/* 17a. TABBLADEN ONDER 992px
   Wat er gebeurt: Zoho toont de echte tabbladenrij
   (.zptabs-container) pas vanaf 992px. Daaronder verbergt hij
   die rij en schakelt hij om naar een accordeon in
   .zptabs-content-container, in deze volgorde:
       kopje 1, inhoud 1, kopje 2, inhoud 2
   Daardoor stond "Overige lidmaatschappen" onder alle kaarten
   van het eerste tabblad. Precies wat jij gek vond.

   Wat deze regels doen: de accordeon wordt een flexkolom en alle
   kopjes krijgen order 1, alle inhoud order 2. Alle kopjes staan
   dan bovenaan, de open inhoud eronder. De dichte tabbladen zet
   Zoho zelf al op display:none, dus daar hoeven we niets aan te
   doen. Klikken blijft gewoon werken, getest.

   Over "default ingeklapt": dat kan niet met CSS. Zoho houdt
   altijd precies één tabblad actief en dat regelt JavaScript.
   Met deze indeling is het ook niet meer nodig, want de kopjes
   staan nu naast elkaar bovenin in plaats van tussen de kaarten.

   De grens staat op 991px en niet op 767px. Dat is geen keuze
   maar de plek waar Zoho zelf omschakelt: vanaf 992px staat de
   echte tabbladenrij er en doen deze regels niets. */
/* TOEGEVOEGD 9 SEPTEMBER: op desktop staat de echte tabbladenrij en
   die had zijn tekst ook links staan. Deze regel geldt op elk scherm. */
html body .zptabelem-inner-container .zptab{
    text-align: center !important;
    justify-content: center !important;
}

@media (max-width: 991px){
    html body .zptabelem-inner-container .zptabs-content-container{
        display: flex !important;
        flex-direction: column !important;
    }
    html body .zptabelem-inner-container .zptabs-content-container > .zptab{
        order: 1 !important;
        flex: 0 0 auto !important;
        text-align: center !important;
        justify-content: center !important;
    }
    html body .zptabelem-inner-container .zptabs-content-container > .zptab-content{
        order: 2 !important;
        flex: 0 0 auto !important;
    }
}

/* 17b. FOOTER OP TELEFOON
   De maten komen uit je eigen footer-codeblok:
       .footer-container .zplink-list > a   { font-size:10px !important }
       .footer-container .zplink-sublist a  { font-size:8px  !important }
   8px is op een telefoon niet te lezen. De regels hieronder hebben
   html body ervoor staan en winnen daarom, zonder dat je dat
   codeblok hoeft aan te raken. Op desktop verandert er niets.

   Verder: de lijst is nu een raster van twee kolommen in plaats van
   een rij die willekeurig afbreekt, en het streepje | dat Zoho voor
   elke groep zet is weg. Dat streepje hoort bij een horizontale
   menubalk en heeft in een gestapelde footer geen functie. */
@media (max-width: 767px){
    html body .footer-container ul.zplink-list-container{
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 26px !important;
        align-items: start !important;
    }
    html body .footer-container ul.zplink-list-container > li.zplink-list{
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    html body .footer-container ul.zplink-list-container > li > a.zplink-has-sublist::before{
        content: none !important;
    }
    html body .footer-container .zplink-list > a{
        font-size: 15px !important;
        line-height: 1.35 !important;
    }
    html body .footer-container .zplink-sublist-container a{
        font-size: 13px !important;
        line-height: 1.6 !important;
    }
    html body .footer-container .zplink-sublist-container{
        margin: 6px 0 0 0 !important;
    }
    /* GEWIJZIGD 9 SEPTEMBER: één kolom in plaats van twee. Alles onder
       elkaar leest rustiger op een telefoon. Wil je terug naar twee,
       zet grid-template-columns hierboven op 1fr 1fr. */
}

/* 17c. FOTOALBUM OP TELEFOON
   Het album is een filmstrip. Zoho zet met JavaScript twee breedtes:
       .zpfilmstrip-inner { width: 225% }   (= aantal foto's / 4)
       .zpfilmstrip-item  { width: 11,1111% } (= 100 / aantal foto's)
   Netto: er passen altijd vier foto's in beeld, ook op 390 pixels.
   Vandaar die postzegels.

   De buitenste breedte laat zich niet overschrijven, de breedte van
   een losse foto wel. Die breedte is een percentage van de strip,
   niet van het scherm. De rekensom voor één foto per keer is dus:
       percentage = 400 / aantal foto's
   Nu 9 foto's, dus 44,4444%. Voor twee foto's naast elkaar: 200
   gedeeld door het aantal, dus 22,2222%.

   Let op: verandert het aantal foto's, dan klopt dit getal niet meer.
   Dat staat ook bij punt I bovenin. */
@media (max-width: 767px){
    html body .zpelem-gallery .zpfilmstrip-item{
        width: 44.4444% !important;   /* 400 / 9 foto's = één foto per keer */
    }
}

/* 17d. ACHTERGRONDFOTO BOVENAAN /events
   Die sectie staat op background-attachment: fixed in combinatie met
   background-size: auto. Bij fixed rekent de browser de foto af tegen
   het browservenster in plaats van tegen de sectie. Met size auto komt
   de foto dan op ware grootte in een venster van 390 pixels te staan.
   Je ziet dan alleen de donkere gradient eroverheen, en dus geen foto.

   De drie andere secties met fixed op deze site staan wel op cover en
   die doen het op mobiel gewoon. Dat verschil is het bewijs.

   Onder 992px zetten we fixed uit (parallax werkt op telefoons toch
   niet betrouwbaar) en zetten we die ene sectie op cover. Op desktop
   verandert er niets, daar blijft de parallax zoals hij was.

   Sinds 9 september staat die sectie in de builder zelf op cover.
   De tweede regel hieronder raakt op dit moment dus geen enkel
   element meer. Hij blijft staan als vangnet voor het geval er
   later weer een sectie op auto plus fixed komt te staan. */
@media (max-width: 991px){
    html body .zpsection.zpbackground-attachment-fixed{
        background-attachment: scroll !important;
    }
    html body .zpsection.zpbackground-attachment-fixed.zpbackground-size-auto{
        background-size: cover !important;
        background-position: center center !important;
    }
}

/* =====================================================
   18. OUDE REGELAFSTANDEN UIT DE BUILDER, ALLEEN DESKTOP
   NIEUW OP 9 SEPTEMBER 2026

   Sinds blok 14a geen !important meer heeft op line-height, wint
   de instelling uit de builder. Dat is de bedoeling. Alleen: tien
   koppen hebben daar nog een oude vaste pixelwaarde staan die
   nooit zichtbaar was, omdat !important hem al die tijd overschreef.
   Alle tien staan ze krapper dan de tekst zelf:

     /events                  2 x h2  44px  op tekst van 64px  (0,69)
     /sma-community           1 x h3  35px  op tekst van 40px  (0,88)
     /sma-community           2 x h2  35px  op tekst van 40px  (0,88)
     /podcasts-presentaties   5 x h4  19px  op tekst van 26px  (0,73)

   Zou je die doorlaten, dan gaan regels over elkaar heen lopen en
   worden staartletters afgeknipt. Deze lijst zet precies die tien
   terug op de schaal uit blok 14a. Op desktop verandert er dus
   niets ten opzichte van hoe de site er vandaag uitziet.

   Elke andere kop op de site is vrij: zet je daar een regelafstand
   in de builder, dan werkt die gewoon. Wil je een van deze tien
   later toch zelf regelen, haal hem dan hier uit de lijst en zet
   de waarde in de builder.

   Alleen desktop. Op tablet en mobiel doen blok 14b en 14c dit al.
   ===================================================== */
@media (min-width: 992px){
    /* H2, terug naar 1,15 */
    html body [data-element-id="elm_3rnrMBbPqvWoYZbZ1WaWFw"] h2.zpheading,
    html body [data-element-id="elm_3W7-AuNjLzG3nrBL41UREA"] h2.zpheading,
    html body [data-element-id="elm_Cd8J1Df8OTG0ygdIxYPj0g"] h2.zpheading,
    html body [data-element-id="elm_wh939CcyMXkz6HodGebTgw"] h2.zpheading{
        line-height: 1.15 !important;
    }
    /* H3, terug naar 1,20 */
    html body [data-element-id="elm_A5NuTAr98GA6Y1BIQDHN1g"] h3.zpheading{
        line-height: 1.20 !important;
    }
    /* H4, terug naar 1,25 */
    html body [data-element-id="elm_D2ZtGKClNjODjTCiFhbWKw"] h4.zpheading,
    html body [data-element-id="elm_sYZibq2uchDch-5jRTWQuA"] h4.zpheading,
    html body [data-element-id="elm_IIWv6qOnuWRrz_5Y4uUplQ"] h4.zpheading,
    html body [data-element-id="elm_oOsFj6BE403cybb2FRO-DQ"] h4.zpheading,
    html body [data-element-id="elm_iD_zYhhiuzAIzFsEKfPP0Q"] h4.zpheading{
        line-height: 1.25 !important;
    }
}

/* =====================================================
   19. KOPGROOTTES OP TELEFOON ECHT AFDWINGEN
   NIEUW OP 9 SEPTEMBER 2026

   Het probleem: blok 14c zet de mobiele kopgroottes op h1 tot en
   met h6. Zoho schrijft de grootte die jij in de builder kiest
   alleen niet op de kop, maar als inline stijl op de span erbinnen:

       <h1 class="zpheading"><span style="font-size:48px">SMA Community</span></h1>

   Een inline stijl op de span geldt voor de tekst in die span.
   De regel voor h1 raakt hem niet, ook niet met !important, want
   het zijn twee verschillende elementen. Gevolg: de kop is op
   papier 32px, de tekst erin blijft 48px.

   Geteld over de hele site: 260 koppen hebben een eigen grootte
   meegekregen, en bij 177 daarvan is die groter dan de mobiele
   schaal. De schaal uit blok 14c deed dus bij twee op de drie
   koppen niets.

   Dat verklaart ook het afbreken. "SMA Community" is op 48px
   382 pixels breed en past niet in een scherm van 390. Op 32px is
   het 255 pixels en past het op één regel.

   De oplossing: alles binnen een kop erft de grootte van die kop.
   font-size:inherit met !important wint wel van een inline stijl,
   want een inline stijl zonder !important verliest van een
   !important-regel uit een stylesheet.

   Nagemeten na deze regel: van alle koppen op alle elf pagina's
   past elk afzonderlijk woord binnen 350 pixels. Er hoeft dus
   nergens meer iets af te breken.

   Alleen telefoon. Op tablet is 768 pixels breed genoeg voor de
   groottes die je in de builder hebt gekozen.
   ===================================================== */
/* GEWIJZIGD 9 SEPTEMBER: de media query is eraf. Op desktop stonden
   H1-koppen op 48, 56 en 64px door elkaar en H2-koppen op 40, 46 en
   56px. Nu geldt de schaal uit blok 14 overal: elke H1 is even groot,
   elke H2 ook. Wil je één kop toch groter, verander dan het niveau,
   niet de grootte. */
html body h1 *, html body h2 *, html body h3 *,
html body h4 *, html body h5 *, html body h6 *{
    font-size: inherit !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
}

/* =====================================================
   20. HERO'S OP ÉÉN HOOGTE EN EEN MEELOPEND MENU OP MOBIEL
   NIEUW OP 9 SEPTEMBER 2026

   20a. Hero's.
   De eerste sectie van elke pagina was even hoog als zijn inhoud.
   Gemeten op 1440 pixels: 366, 433, 477, 479, 494, 504, 544, 567 en
   600 pixels. Elke pagina begon dus op een andere hoogte.
   Deze regels geven ze dezelfde bovenmarge, dezelfde ondermarge en
   een minimumhoogte. Nagemeten na de wijziging: op desktop komt elke
   hero uit op 600 pixels, op telefoon op 572.

   Twee uitzonderingen, allebei met opzet:
   - /nomineren. Die eerste sectie is geen hero maar het hele
     nominatieformulier. Die staat hieronder uitgezonderd.
   - /over-sma op telefoon wordt 768 pixels. De kop is daar simpelweg
     langer dan een scherm van 390 pixels aankan. Korter schrijven is
     de enige echte oplossing.
   ===================================================== */
/* 20a-1. De basis voor elke hero. */
@media (min-width: 992px){
    html body .page-container > .zpsection:first-child:not([data-element-id="elm__fSY3uRYAkyQhxo75vDzLQ"]){
        padding-block-start: 98px !important;
        padding-block-end: 26px !important;
        min-height: 648px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }
    html body .page-container > .zpsection:first-child .zprow{
        padding-block-start: 0 !important;
        padding-block-end: 0 !important;
    }
}
@media (max-width: 767px){
    html body .page-container > .zpsection:first-child:not([data-element-id="elm__fSY3uRYAkyQhxo75vDzLQ"]){
        padding-block-start: 98px !important;
        padding-block-end: 26px !important;
        min-height: 746px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }
}

/* 20a-2. De kop op elke pagina op exact dezelfde hoogte.
   Boven de H1 staat op elke pagina iets anders: een bovenkopje, een
   spacer, een afbeelding. Op Wall of Fame 24 pixels, op Over SMA 247.
   Daarom kan één vaste bovenmarge de koppen nooit gelijk zetten.

   Deze regels rekenen dat verschil per pagina weg. De bovenmarge is
   telkens het doel min wat er boven de kop staat. Resultaat, nagemeten
   op alle negen pagina's: de kop begint op desktop exact 280 pixels
   onder de bovenkant van de hero, op telefoon exact 270. Geen enkele
   pagina wijkt af.

   De hero is 648 pixels op desktop en 746 op telefoon. Die 746 wordt
   bepaald door de homepage: daar staat onder de kop nog een subtitel
   en twee knoppen, samen 450 pixels. Wil je de telefoonhero korter,
   dan moet daar inhoud uit. Zet je hem lager zonder dat te doen, dan
   lopen de hero's weer uit elkaar.

   Verandert er iets boven een kop in de builder, dan klopt het getal
   voor die pagina niet meer. Laat het me weten, dan reken ik hem bij. */
@media (min-width: 992px){
    /* / */
    html body .page-container > .zpsection:first-child[data-element-id="elm_nXG5ylusBAZ1wytiHL6IsQ"]{ padding-block-start: 176px !important; }
    /* /events */
    html body .page-container > .zpsection:first-child[data-element-id="elm_52-CiCnhZJeiDtTArgTCew"]{ padding-block-start: 178px !important; }
    /* /sma-community */
    html body .page-container > .zpsection:first-child[data-element-id="elm_3KRLnqhq5GZiFo9cPta-8w"]{ padding-block-start: 60px !important; }
    /* /kennis */
    html body .page-container > .zpsection:first-child[data-element-id="elm_kHlgKyLi8cVW2FT372Eabw"]{ padding-block-start: 95px !important; }
    /* /podcasts-presentaties */
    html body .page-container > .zpsection:first-child[data-element-id="elm_roZ0M56GFxshzMjHkfUzvw"]{ padding-block-start: 162px !important; }
    /* /sma-awards */
    html body .page-container > .zpsection:first-child[data-element-id="elm_vq2CMF0ArJPXJhrrUoTAMQ"]{ padding-block-start: 118px !important; }
    /* /wall-of-fame1 */
    html body .page-container > .zpsection:first-child[data-element-id="elm_DnJA4CRdRfOseZgi2hXVDg"]{ padding-block-start: 250px !important; }
    /* /over-sma */
    html body .page-container > .zpsection:first-child[data-element-id="elm_LGyJvbVqC6YO3L87O3gK4A"]{ padding-block-start: 139px !important; }
    /* /Lid-worden */
    html body .page-container > .zpsection:first-child[data-element-id="elm_4t7Ozb4mo40uG_4nAdWHFg"]{ padding-block-start: 168px !important; }
}
@media (max-width: 767px){
    /* / */
    html body .page-container > .zpsection:first-child[data-element-id="elm_nXG5ylusBAZ1wytiHL6IsQ"]{ padding-block-start: 199px !important; }
    /* /events */
    html body .page-container > .zpsection:first-child[data-element-id="elm_52-CiCnhZJeiDtTArgTCew"]{ padding-block-start: 151px !important; }
    /* /sma-community */
    html body .page-container > .zpsection:first-child[data-element-id="elm_3KRLnqhq5GZiFo9cPta-8w"]{ padding-block-start: 50px !important; }
    /* /kennis */
    html body .page-container > .zpsection:first-child[data-element-id="elm_kHlgKyLi8cVW2FT372Eabw"]{ padding-block-start: 85px !important; }
    /* /podcasts-presentaties */
    html body .page-container > .zpsection:first-child[data-element-id="elm_roZ0M56GFxshzMjHkfUzvw"]{ padding-block-start: 96px !important; }
    /* /sma-awards */
    html body .page-container > .zpsection:first-child[data-element-id="elm_vq2CMF0ArJPXJhrrUoTAMQ"]{ padding-block-start: 108px !important; }
    /* /wall-of-fame1 */
    html body .page-container > .zpsection:first-child[data-element-id="elm_DnJA4CRdRfOseZgi2hXVDg"]{ padding-block-start: 246px !important; }
    /* /over-sma */
    html body .page-container > .zpsection:first-child[data-element-id="elm_LGyJvbVqC6YO3L87O3gK4A"]{ padding-block-start: 23px !important; }
    /* /Lid-worden */
    html body .page-container > .zpsection:first-child[data-element-id="elm_4t7Ozb4mo40uG_4nAdWHFg"]{ padding-block-start: 148px !important; }
}

/* 20b. Menu blijft staan op tablet en telefoon.
   De header stond op position:static. Wilde je naar een andere pagina,
   dan moest je eerst helemaal terug naar boven scrollen. Hij staat nu
   vast bovenaan.

   De tweede regel is nodig: blok 1 trekt de eerste sectie 72 pixels
   omhoog zodat de hero achter de header begint. Haal je de header uit
   de pagina-flow, dan verdwijnt die 72 pixels boven het scherm. Op
   mobiel zetten we die verschuiving daarom terug op nul.

   Wil je dat de header pas verschijnt zodra je omhoog scrollt in plaats
   van altijd zichtbaar te zijn, plak dan het scriptje uit mijn bericht
   in je footer-code. De klasse sma-hide hieronder hoort daarbij en doet
   zonder dat script niets. */
@media (max-width: 991px){
    html body .theme-header{
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999 !important;
        transition: transform .25s ease !important;
    }
    html body .theme-header.sma-hide{
        transform: translateY(-100%) !important;
    }
    html body .page-container > .zpsection:first-child,
    html body .theme-content-area-inner .zpsection:first-child{
        margin-top: 0 !important;
    }
}

/* =====================================================
   21. HOVER IN HET MENU TERUG
   NIEUW OP 9 SEPTEMBER 2026

   Het thema heeft een hoverkleur (#F68B1F), maar blok 2 zet de
   menutekst op wit met !important. Dat gold ook tijdens hover, dus
   er gebeurde niets meer als je eroverheen ging. Deze regels zetten
   de hover terug, met een hogere specificiteit dan blok 2.
   ===================================================== */
html body .theme-header .theme-menu > ul > li:not(.menu-highlight-primary) > a:hover,
html body .theme-header .theme-menu > ul > li:not(.menu-highlight-primary) > a:hover span,
html body .theme-header .theme-menu > ul > li:not(.menu-highlight-primary):hover > a,
html body .theme-header .theme-menu > ul > li:not(.menu-highlight-primary):hover > a span{
    color: #F68B1F !important;
}
html body .theme-header .theme-menu ul ul li > a:hover,
html body .theme-header .theme-menu ul ul li > a:hover span{
    color: #F68B1F !important;
}

/* =====================================================
   22. VERTICALE RUIMTE TUSSEN BLOKKEN GELIJKTREKKEN
   NIEUW OP 9 SEPTEMBER 2026

   De 95 secties op de site hadden 40 verschillende combinaties van
   boven- en ondermarge: 1, 2, 3, 5, 13, 15, 17, 18, 20, 29, 30, 36,
   37, 40, 50, 63, 80, 96, 98, 99 en 100 pixels door elkaar heen.
   Dat is precies het "net afwijkend" waar je last van hebt.

   De schaal is nu 0, 20, 50 en 100. Elke waarde is naar de
   dichtstbijzijnde van die vier gezet. 15 wordt 20, 37 wordt 50,
   80 wordt 100, 3 wordt 0. Waarden die al klopten zijn niet
   aangeraakt, dus 61 van de 95 secties staan hier niet in.

   Boven en onder zijn los behandeld. Een sectie die bewust boven
   ruimte heeft en onder niet, houdt dat verschil.

   Desktop en telefoon staan apart, want twaalf secties hebben in de
   builder een eigen mobiele waarde gekregen.
   ===================================================== */
@media (min-width: 992px){
    html body [data-element-id="elm_ISZER7oy5-LXcMIrQUlQAA"].zpsection,
    html body [data-element-id="elm_-8KRGajKM1qraOfTvjC1cQ"].zpsection,
    html body [data-element-id="elm_Q28AURSTadX9MLHhHkfn8A"].zpsection,
    html body [data-element-id="elm_V04DPZVMWhdpZxgxfWW3rw"].zpsection{
        padding-block-start: 50px !important;
        padding-block-end: 20px !important;
    }
    html body [data-element-id="elm_Qsh30oM23N_zyM8M2_uKsw"].zpsection,
    html body [data-element-id="elm_Sh1ut0JJLOzsWswr6Xz7Og"].zpsection,
    html body [data-element-id="elm_TZkudYlcOSpJ1q65gqqz8g"].zpsection,
    html body [data-element-id="elm_ZMSBNhj8JdFjp5LfEMfkIw"].zpsection,
    html body [data-element-id="elm_u0xng9Xjj7pNMLTvmJGY5g"].zpsection{
        padding-block-start: 0px !important;
        padding-block-end: 0px !important;
    }
    html body [data-element-id="elm_nFadzR33pyjTPZQx3imzJw"].zpsection,
    html body [data-element-id="elm_X22yHiezXsFhSG2xVPl-tA"].zpsection{
        padding-block-start: 100px !important;
        padding-block-end: 100px !important;
    }
    html body [data-element-id="elm_gi_8_Hg-R1EjODHR-XmylQ"].zpsection{
        padding-block-start: 20px !important;
        padding-block-end: 0px !important;
    }
    html body [data-element-id="elm_bsY71SQcCA3025oQ7wihGg"].zpsection,
    html body [data-element-id="elm_RD9QVp9JvOjQyHBZYy8blg"].zpsection,
    html body [data-element-id="elm_8C71GVb69JJq1ti0aMLzGA"].zpsection,
    html body [data-element-id="elm_HemaH_VuAK3C1qb5uSEPfQ"].zpsection,
    html body [data-element-id="elm_gWD3vuAfzFxelWrdxjk0nQ"].zpsection,
    html body [data-element-id="elm__D9ILQi-UjLwkQC_szxx2A"].zpsection,
    html body [data-element-id="elm_H8Dbyc8xh61_uvkI5Nupow"].zpsection,
    html body [data-element-id="elm_4t9sp2o-k0aa3XQt2vzIRA"].zpsection,
    html body [data-element-id="elm_T1ZNg4SUtKlJVDC11pKKmQ"].zpsection,
    html body [data-element-id="elm_YqwdVP2hdxgfeH4mnyRhHA"].zpsection{
        padding-block-start: 20px !important;
        padding-block-end: 20px !important;
    }
    html body [data-element-id="elm_iRgXt-x9gvmBumJJEP7N6A"].zpsection,
    html body [data-element-id="elm_qdjyPkkAvFG89DU_GL7N6w"].zpsection,
    html body [data-element-id="elm_iqytjCoZmD5oFWgZXxhZSA"].zpsection,
    html body [data-element-id="elm_SlFvC_ZkKDk14Y-67zuELw"].zpsection{
        padding-block-start: 50px !important;
        padding-block-end: 50px !important;
    }
    html body [data-element-id="elm_ymVMbXcgY0TewZ4thoigLA"].zpsection{
        padding-block-start: 50px !important;
        padding-block-end: 100px !important;
    }
    html body [data-element-id="elm_qjeqpvkjfJy90wcDMh4bGw"].zpsection{
        padding-block-start: 20px !important;
        padding-block-end: 100px !important;
    }
    html body [data-element-id="elm_-ggL3D9yHruOvTe3s9kDGA"].zpsection{
        padding-block-start: 0px !important;
        padding-block-end: 20px !important;
    }
    html body [data-element-id="elm_YZNRWh_X-QuPyj2hxGU8Aw"].zpsection,
    html body [data-element-id="elm_VKuxM3xe9k-OuHRYK3gwqw"].zpsection{
        padding-block-start: 0px !important;
        padding-block-end: 50px !important;
    }
    html body [data-element-id="elm__KXRViswEwHlYm5pffEk9Q"].zpsection{
        padding-block-start: 100px !important;
        padding-block-end: 50px !important;
    }
    html body [data-element-id="elm_i9l2QNQIvkXq9FrB5oXPpg"].zpsection,
    html body [data-element-id="elm_u40HYGxv5YRql-ab4NLUsA"].zpsection{
        padding-block-start: 50px !important;
        padding-block-end: 0px !important;
    }
}
@media (max-width: 767px){
    html body [data-element-id="elm_ISZER7oy5-LXcMIrQUlQAA"].zpsection,
    html body [data-element-id="elm_-8KRGajKM1qraOfTvjC1cQ"].zpsection,
    html body [data-element-id="elm_Q28AURSTadX9MLHhHkfn8A"].zpsection,
    html body [data-element-id="elm_V04DPZVMWhdpZxgxfWW3rw"].zpsection{
        padding-block-start: 50px !important;
        padding-block-end: 20px !important;
    }
    html body [data-element-id="elm_Qsh30oM23N_zyM8M2_uKsw"].zpsection,
    html body [data-element-id="elm_Sh1ut0JJLOzsWswr6Xz7Og"].zpsection,
    html body [data-element-id="elm_TZkudYlcOSpJ1q65gqqz8g"].zpsection,
    html body [data-element-id="elm_0pnFVp-tnU2XpZC9AwHMKA"].zpsection,
    html body [data-element-id="elm_l2sIzrUBz-StBwK3lw_5zA"].zpsection,
    html body [data-element-id="elm_ZMSBNhj8JdFjp5LfEMfkIw"].zpsection,
    html body [data-element-id="elm_u0xng9Xjj7pNMLTvmJGY5g"].zpsection{
        padding-block-start: 0px !important;
        padding-block-end: 0px !important;
    }
    html body [data-element-id="elm_nFadzR33pyjTPZQx3imzJw"].zpsection{
        padding-block-start: 100px !important;
        padding-block-end: 0px !important;
    }
    html body [data-element-id="elm_Kulr4rLdexvJ9X_pzkM6sw"].zpsection{
        padding-block-start: 100px !important;
        padding-block-end: 100px !important;
    }
    html body [data-element-id="elm_1wBolSBpNja9aY_mG0RReA"].zpsection,
    html body [data-element-id="elm_IfCGwTDexoq20oqy2U9eNg"].zpsection,
    html body [data-element-id="elm__KXRViswEwHlYm5pffEk9Q"].zpsection{
        padding-block-start: 100px !important;
        padding-block-end: 50px !important;
    }
    html body [data-element-id="elm_gi_8_Hg-R1EjODHR-XmylQ"].zpsection,
    html body [data-element-id="elm_qjeqpvkjfJy90wcDMh4bGw"].zpsection{
        padding-block-start: 20px !important;
        padding-block-end: 100px !important;
    }
    html body [data-element-id="elm_X22yHiezXsFhSG2xVPl-tA"].zpsection,
    html body [data-element-id="elm_ymVMbXcgY0TewZ4thoigLA"].zpsection{
        padding-block-start: 50px !important;
        padding-block-end: 100px !important;
    }
    html body [data-element-id="elm_bsY71SQcCA3025oQ7wihGg"].zpsection,
    html body [data-element-id="elm_RD9QVp9JvOjQyHBZYy8blg"].zpsection,
    html body [data-element-id="elm_8C71GVb69JJq1ti0aMLzGA"].zpsection,
    html body [data-element-id="elm_HemaH_VuAK3C1qb5uSEPfQ"].zpsection,
    html body [data-element-id="elm_gWD3vuAfzFxelWrdxjk0nQ"].zpsection,
    html body [data-element-id="elm__D9ILQi-UjLwkQC_szxx2A"].zpsection,
    html body [data-element-id="elm_H8Dbyc8xh61_uvkI5Nupow"].zpsection,
    html body [data-element-id="elm_4t9sp2o-k0aa3XQt2vzIRA"].zpsection,
    html body [data-element-id="elm_T1ZNg4SUtKlJVDC11pKKmQ"].zpsection,
    html body [data-element-id="elm_YqwdVP2hdxgfeH4mnyRhHA"].zpsection{
        padding-block-start: 20px !important;
        padding-block-end: 20px !important;
    }
    html body [data-element-id="elm_iRgXt-x9gvmBumJJEP7N6A"].zpsection,
    html body [data-element-id="elm_qdjyPkkAvFG89DU_GL7N6w"].zpsection,
    html body [data-element-id="elm_iqytjCoZmD5oFWgZXxhZSA"].zpsection,
    html body [data-element-id="elm_SlFvC_ZkKDk14Y-67zuELw"].zpsection{
        padding-block-start: 50px !important;
        padding-block-end: 50px !important;
    }
    html body [data-element-id="elm_-ggL3D9yHruOvTe3s9kDGA"].zpsection{
        padding-block-start: 0px !important;
        padding-block-end: 20px !important;
    }
    html body [data-element-id="elm_YZNRWh_X-QuPyj2hxGU8Aw"].zpsection,
    html body [data-element-id="elm_VKuxM3xe9k-OuHRYK3gwqw"].zpsection{
        padding-block-start: 0px !important;
        padding-block-end: 50px !important;
    }
    html body [data-element-id="elm_i9l2QNQIvkXq9FrB5oXPpg"].zpsection,
    html body [data-element-id="elm_u40HYGxv5YRql-ab4NLUsA"].zpsection{
        padding-block-start: 50px !important;
        padding-block-end: 0px !important;
    }
}

/* =====================================================
   23. HORIZONTALE RUIMTE IN KOLOMMEN
   NIEUW OP 9 SEPTEMBER 2026

   De zijmarge van kolommen staat op de hele site op 15 of 30 pixels,
   op vier plekken na. Daar staat links iets anders dan rechts
   (30 en 15) of een losse 10. Die vier zijn hieronder gelijkgetrokken
   naar de grootste van de twee, afgerond op de schaal 0, 15, 30.
   De andere 200-plus kolommen zijn niet aangeraakt.
   ===================================================== */
html body [data-element-id="elm_vZOCGB-nrG-xAlb1KaN98A"].zpelem-col,
html body [data-element-id="elm_4N-lAInf_l1HYhUH9JAxvw"].zpelem-col{
    padding-inline-start: 15px !important;
    padding-inline-end: 15px !important;
}
html body [data-element-id="elm_rFdcbwyGt6vufl23rR2-Sg"].zpelem-col,
html body [data-element-id="elm_6j1G4vH7tjshAQ9t6dFXaA"].zpelem-col{
    padding-inline-start: 30px !important;
    padding-inline-end: 30px !important;
}

/* =====================================================
   24. KOPPEN IN KAARTEN EN LANGE ZINNEN IN EEN KOP
   NIEUW OP 9 SEPTEMBER 2026

   Blok 19 laat elke kop de grootte van zijn niveau volgen. Dat is
   goed voor consistentie, maar het legde een probleem bloot dat al
   in de pagina's zat: op 64 plekken staat een kaarttitel als H2, H3
   of H4. Een kaarttitel hoort kleiner te zijn dan een sectiekop,
   ook al is het hetzelfde niveau. Vandaar een tweede schaal voor
   alles binnen een kaart (.zpelem-box).

   Verdeling: 46 keer H3, 12 keer H4, 6 keer H2.

   Daarnaast staan er op twee plekken hele zinnen in een H2. Het
   nieuwsbriefblok (84 tot 97 tekens, op elke pagina) en de introtekst
   op SMA Awards (194 tekens). Dat is lopende tekst, geen kop, en op
   34px werd dat een muur. Die twee krijgen bodygrootte.

   De echte oplossing is in de builder het juiste niveau kiezen. Deze
   regels vangen het op zolang dat niet gebeurd is.
   ===================================================== */
@media (min-width: 992px){
    html body .zpelem-box h1{ font-size: 26px !important; }
    html body .zpelem-box h2{ font-size: 24px !important; }
    html body .zpelem-box h3{ font-size: 22px !important; }
    /* 19px en niet 20px. Op 20px viel "DENKPRODUCTIES" net van de
       podcastkaart af: het woord is dan 174 pixels breed en het
       tekstvak 187, met letterafstand erbij past het niet. Op 19px
       past het wel. Nagemeten op de kaart zelf. */
    html body .zpelem-box h4{ font-size: 19px !important; }
    html body .zpelem-box h5{ font-size: 18px !important; }
    html body .zpelem-box h6{ font-size: 16px !important; }
}
@media (min-width: 768px) and (max-width: 991px){
    html body .zpelem-box h1{ font-size: 24px !important; }
    html body .zpelem-box h2{ font-size: 22px !important; }
    html body .zpelem-box h3{ font-size: 21px !important; }
    html body .zpelem-box h4{ font-size: 19px !important; }
    html body .zpelem-box h5{ font-size: 18px !important; }
    html body .zpelem-box h6{ font-size: 16px !important; }
}
@media (max-width: 767px){
    html body .zpelem-box h1{ font-size: 22px !important; }
    html body .zpelem-box h2{ font-size: 21px !important; }
    html body .zpelem-box h3{ font-size: 20px !important; }
    html body .zpelem-box h4{ font-size: 18px !important; }
    html body .zpelem-box h5{ font-size: 17px !important; }
    html body .zpelem-box h6{ font-size: 16px !important; }
}

/* 24b. Lopende tekst die als kop is opgemaakt.
   Het nieuwsbriefblok staat op elke pagina en heeft twee volle
   zinnen in een H2. De introtekst op SMA Awards is 194 tekens. */
html body .zpelem-newsletter h1,
html body .zpelem-newsletter h2,
html body .zpelem-newsletter h3,
html body .zpelem-newsletter h4{
    font-size: 22px !important;
    line-height: 1.45 !important;
}
html body [data-element-id="elm_8sVQPWnMcGnFafax_G6hoQ"] h1,
html body [data-element-id="elm_8sVQPWnMcGnFafax_G6hoQ"] h2,
html body [data-element-id="elm_8sVQPWnMcGnFafax_G6hoQ"] h3{
    font-size: 22px !important;
    line-height: 1.5 !important;
}
@media (max-width: 767px){
    html body .zpelem-newsletter h1,
    html body .zpelem-newsletter h2,
    html body .zpelem-newsletter h3,
    html body .zpelem-newsletter h4,
    html body [data-element-id="elm_8sVQPWnMcGnFafax_G6hoQ"] h2{
        font-size: 19px !important;
    }
}

/* =====================================================
   25. WITTE RAND BOVENAAN OVER SMA
   NIEUW OP 9 SEPTEMBER 2026

   Op /over-sma zit het navy niet op de sectie zelf maar op de rij
   erbinnen. De sectie is wit. Daardoor zie je boven het navy blok
   een witte strook ter hoogte van de bovenmarge van die sectie.
   Vroeger 50 pixels, met de vaste herohoogte werd dat meer.
   Deze regel geeft de sectie zelf de navy kleur, dan loopt het door.

   Netter is het om in de builder de achtergrondkleur op de sectie te
   zetten in plaats van op de rij. Dan kan deze regel weg.
   ===================================================== */
html body [data-element-id="elm_LGyJvbVqC6YO3L87O3gK4A"].zpsection{
    background-color: #061A2B !important;
}

/* =====================================================
   26. WALL OF FAME, NAMEN
   BIJGEWERKT OP 9 SEPTEMBER 2026

   Hier stond een regel die de namen in de Wall of Fame-kaarten
   met CSS op 16px dwong. Die regel is weg.

   De namen waren H4-koppen met een span van 14px erin. Blok 19
   laat zo'n span de grootte van de kop volgen, dus ze sprongen
   naar 20px. Het CCO-tabblad stond goed omdat de namen daar al
   gewone tekst waren.

   De 52 koppen zijn nu in de builder vervangen door echte
   tekstelementen, 14px, wit, gewicht 600, gelijk aan het
   CCO-tabblad. Er is dus geen CSS meer nodig. Blok 19 raakt ze
   niet meer, want ze zijn geen kop meer.

   In de studentenkaart van 2023 stonden de namen en de school
   in dezelfde kop. De school staat nu in het tekstelement
   eronder, net als bij de andere kaarten.
   ===================================================== */

/* =====================================================
   27. JAARTALLEN BOVEN DE KAARTEN
   NIEUW OP 9 SEPTEMBER 2026

   De jaartallen boven de winnaarskaarten waren H3-koppen. Dat klopt
   niet. Een jaartal is geen kop, het is een label bij een foto.
   Google en een voorleesprogramma zagen 78 koppen op een pagina die
   er twee hoort te hebben. Op SMA Awards waren dat er 34.

   Ze zijn nu gewone tekstelementen. De kleur en de grootte voor
   desktop staan in het element zelf. Tablet en mobiel kun je niet in
   het element zetten, die staan hier. De maten zijn gelijk aan wat
   H3 gaf: 28 op desktop, 25 op tablet, 21 op mobiel.

   Het jaartal is het enige tekstelement dat direct in de kolom
   staat. De namen en de bedrijven zitten in het kaartblok eronder.
   Daarom staat er een > in de selector.
   ===================================================== */
html body [data-element-id="elm_M3IcNgAA4n3y4f4BP_IHTA"] .zpelem-col > .zpelem-text p,
html body [data-element-id="elm_ifo_RRUX6kEcZQilFTH2Lw"] .zpelem-col > .zpelem-text p{
    line-height: 1.20;
}
@media (max-width: 991px){
    html body [data-element-id="elm_M3IcNgAA4n3y4f4BP_IHTA"] .zpelem-col > .zpelem-text span,
    html body [data-element-id="elm_ifo_RRUX6kEcZQilFTH2Lw"] .zpelem-col > .zpelem-text span{
        font-size: 25px !important;
    }
}
@media (max-width: 767px){
    html body [data-element-id="elm_M3IcNgAA4n3y4f4BP_IHTA"] .zpelem-col > .zpelem-text span,
    html body [data-element-id="elm_ifo_RRUX6kEcZQilFTH2Lw"] .zpelem-col > .zpelem-text span{
        font-size: 21px !important;
    }
}
/* Partnerpagina's: regelafstand kop bovenaan */
html body [data-element-id="elm_7zHrIk7Sx0hKsDo1GIRUOQ"] h1.zpheading{
    line-height: 1.1 !important;
}
/* Zwevend cookie-icoon verbergen, voorkeuren via de footerlink */
#zc-revise{
    display: none !important;
}