@font-face {
    font-family: 'Neue Frutiger World';
    src: url('../fonts/NeueFrutigerWorld-BoldIt.woff2') format('woff2'),
        url('../fonts/NeueFrutigerWorld-BoldIt.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Frutiger World';
    src: url('../fonts/NeueFrutigerWorld-BlackIt.woff2') format('woff2'),
        url('../fonts/NeueFrutigerWorld-BlackIt.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Frutiger World';
    src: url('../fonts/NeueFrutigerWorld-Black.woff2') format('woff2'),
        url('../fonts/NeueFrutigerWorld-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Frutiger World';
    src: url('../fonts/NeueFrutigerWorld-Bold.woff2') format('woff2'),
        url('../fonts/NeueFrutigerWorld-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Frutiger World';
    src: url('../fonts/NeueFrutigerWorld-BookIt.woff2') format('woff2'),
        url('../fonts/NeueFrutigerWorld-BookIt.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Frutiger World';
    src: url('../fonts/NeueFrutigerWorld-Book.woff2') format('woff2'),
        url('../fonts/NeueFrutigerWorld-Book.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Frutiger World';
    src: url('../fonts/NeueFrutigerWorld-It.woff2') format('woff2'),
        url('../fonts/NeueFrutigerWorld-It.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Frutiger World';
    src: url('../fonts/NeueFrutigerWorld-HeavyIt.woff2') format('woff2'),
        url('../fonts/NeueFrutigerWorld-HeavyIt.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Frutiger World';
    src: url('../fonts/NeueFrutigerWorld-Heavy.woff2') format('woff2'),
        url('../fonts/NeueFrutigerWorld-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Frutiger World';
    src: url('../fonts/NeueFrutigerWorld-LightIt.woff2') format('woff2'),
        url('../fonts/NeueFrutigerWorld-LightIt.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Frutiger World';
    src: url('../fonts/NeueFrutigerWorld-MediumIt.woff2') format('woff2'),
        url('../fonts/NeueFrutigerWorld-MediumIt.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Frutiger World';
    src: url('../fonts/NeueFrutigerWorld-Light.woff2') format('woff2'),
        url('../fonts/NeueFrutigerWorld-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Frutiger World';
    src: url('../fonts/NeueFrutigerWorld-Medium.woff2') format('woff2'),
        url('../fonts/NeueFrutigerWorld-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Frutiger World';
    src: url('../fonts/NeueFrutigerWorld-Regular.woff2') format('woff2'),
        url('../fonts/NeueFrutigerWorld-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Frutiger World';
    src: url('../fonts/NeueFrutigerWorld-ThinIt.woff2') format('woff2'),
        url('../fonts/NeueFrutigerWorld-ThinIt.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Frutiger World';
    src: url('../fonts/NeueFrutigerWorld-Thin.woff2') format('woff2'),
        url('../fonts/NeueFrutigerWorld-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Frutiger World';
    src: url('../fonts/NeueFrutigerWorld-UltLtIt.woff2') format('woff2'),
        url('../fonts/NeueFrutigerWorld-UltLtIt.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Frutiger World';
    src: url('../fonts/NeueFrutigerWorld-UltLt.woff2') format('woff2'),
        url('../fonts/NeueFrutigerWorld-UltLt.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Frutiger World';
    src: url('../fonts/NeueFrutigerWorld-XtraBlkIt.woff2') format('woff2'),
        url('../fonts/NeueFrutigerWorld-XtraBlkIt.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

ul {
  list-style-type: disc;
  padding-left: 1.5rem;
}

ul li::marker {
  color: #f5a800;
}

.step-card_icon {
  display: inline-flex;
  font-size: 1.25rem;
  height: 2em;
  width: 2em;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  border: 2px solid #154284;
  color: #154284;
  font-weight: 500;
  text-align: center;
  line-height: 0;
  margin-bottom: 2rem;
}
/* ==========================================================================
   Menutoggle (hamburger) + sluitkruis — zwaardere vormgeving en animatie

   UIkit injecteert zijn eigen <style> binnen de <svg> van .uk-navbar-toggle-icon.
   Die staat later in het document dan deze stylesheet, dus bij gelijke
   specificiteit wint UIkit. Daarom staat er !important op precies die
   eigenschappen die UIkit zelf ook zet (height, opacity, transform, transition).

   De balken zijn <rect>-elementen in een viewBox van 20x20. Hoogte en y-positie
   zijn CSS-geometrie-eigenschappen, dus vanaf hier te herschrijven.
   Balkhoogte 3.5 → een balk staat gecentreerd op y = 10 - 3.5/2 = 8.25.
   ========================================================================== */

:root {
    /* Enige plek waar deze twee maten staan; het sluitkruis rekent ermee mee.
       --tm-navbar-height moet gelijk zijn aan de min-height van .uk-navbar-toggle
       in het gecompileerde thema (nu 120px). Wijzig je de navbarhoogte in de
       YOOtheme Customizer, pas deze waarde dan mee aan. */
    --tm-navbar-height: 120px;
    --tm-toggle-icon-size: 28px;
}

/* Groter aanraakvlak en icoon: 20 → 28px */
.uk-navbar-toggle .uk-navbar-toggle-icon svg {
    /* Het gecompileerde thema zet .uk-navbar-primary .uk-navbar-toggle-icon>svg
       op width:26px met dezelfde specificiteit; !important houdt het formaat
       onafhankelijk van de laadvolgorde van de stylesheets. */
    width: var(--tm-toggle-icon-size) !important;
    height: var(--tm-toggle-icon-size) !important;
    transition: transform 0.35s cubic-bezier(0.65, -0.35, 0.35, 1.35);
}

/* Dikkere balken met ronde uiteinden */
.uk-navbar-toggle .uk-navbar-toggle-icon svg > [class*="line-"] {
    height: 3.5px !important;
    rx: 1.75px;
    transition: transform 0.35s cubic-bezier(0.65, -0.35, 0.35, 1.35),
                opacity 0.2s ease-in-out !important;
}

.uk-navbar-toggle .uk-navbar-toggle-icon svg > .line-1 { y: 1.5px; }
.uk-navbar-toggle .uk-navbar-toggle-icon svg > .line-2,
.uk-navbar-toggle .uk-navbar-toggle-icon svg > .line-3 { y: 8.25px; }
.uk-navbar-toggle .uk-navbar-toggle-icon svg > .line-4 { y: 15px; }

/* Hover: iets zwaarder aanwezig, in de huisstijlkleur */
.uk-navbar-toggle:hover .uk-navbar-toggle-icon svg,
.uk-navbar-toggle:focus-visible .uk-navbar-toggle-icon svg {
    transform: scale(1.08);
    color: #f5a800 !important;
}

/* Open: het hele icoon draait een kwartslag mee terwijl het kruis ontstaat.
   45° + 90° blijft een kruis, dus het landt netjes. */
a.uk-navbar-toggle[aria-expanded="true"] > .uk-navbar-toggle-icon svg,
.uk-navbar-toggle-icon[aria-expanded="true"] svg {
    transform: rotate(90deg);
}

/* De buitenste balken klappen naar het midden. Afstand hoort bij de nieuwe
   geometrie: van y 1.5 en 15 naar 8.25 is 6.75. */
a.uk-navbar-toggle[aria-expanded="true"] > .uk-navbar-toggle-icon svg > .line-1,
.uk-navbar-toggle-icon[aria-expanded="true"] svg > .line-1 {
    transform: translateY(6.75px) scaleX(0) !important;
}

a.uk-navbar-toggle[aria-expanded="true"] > .uk-navbar-toggle-icon svg > .line-4,
.uk-navbar-toggle-icon[aria-expanded="true"] svg > .line-4 {
    transform: translateY(-6.75px) scaleX(0) !important;
}

/* Respecteer de systeemvoorkeur voor minder beweging */
@media (prefers-reduced-motion: reduce) {
    .uk-navbar-toggle .uk-navbar-toggle-icon svg,
    .uk-navbar-toggle .uk-navbar-toggle-icon svg > [class*="line-"] {
        transition-duration: 0.01ms !important;
    }

    a.uk-navbar-toggle[aria-expanded="true"] > .uk-navbar-toggle-icon svg,
    .uk-navbar-toggle-icon[aria-expanded="true"] svg {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Sluitkruis: zelfde zwaarte én exact op de plek van de menubutton.

   De menubutton is <a class="uk-navbar-toggle"> in .uk-navbar-right, binnen
   .uk-container.uk-container-expand van .tm-header-mobile. Zijn positie volgt uit
   drie dingen in het gecompileerde thema:
     - .uk-navbar-toggle heeft min-height 120px en padding 0, dus het icoon staat
       verticaal gecentreerd op 60px;
     - het icoon is 28px breed (hierboven ingesteld);
     - de container heeft padding-right 20px (<640px) en 40px (vanaf 640px).
   De mobiele header is niet sticky en staat bovenaan de pagina, dus het icoon
   staat op viewport-top 60px.

   Het sluitkruis krijgt dezelfde doos. Een absoluut gepositioneerd element rekent
   vanaf de padding-box van .uk-offcanvas-bar; de padding van die balk (20/30px)
   schuift het dus niet op, en de balk zelf ligt met right:0 tegen de rechterrand
   van het scherm. Daarmee vallen beide iconen samen.
   -------------------------------------------------------------------------- */

#tm-dialog-mobile .uk-offcanvas-close {
    top: 0;
    right: 20px; /* = .uk-container padding-right onder 640px */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--tm-toggle-icon-size);
    min-height: var(--tm-navbar-height);
    padding: 0;
    transition: transform 0.25s cubic-bezier(0.65, -0.35, 0.35, 1.35), color 0.2s ease-in-out;
}

@media (min-width: 640px) {
    #tm-dialog-mobile .uk-offcanvas-close {
        right: 40px; /* = .uk-container padding-right vanaf 640px */
    }
}

/* Even groot als het hamburger-icoon, ook wanneer UIkit vanaf 640px zelf de class
   uk-close-large toevoegt — anders zou het icoon daar verspringen. */
#tm-dialog-mobile .uk-offcanvas-close svg,
#tm-dialog-mobile .uk-offcanvas-close.uk-close-large svg {
    width: var(--tm-toggle-icon-size) !important;
    height: var(--tm-toggle-icon-size) !important;
}

/* Zelfde zwaarte als de balken: streek 1.1 → 2.6 */
#tm-dialog-mobile .uk-offcanvas-close svg line {
    stroke-width: 2.6;
    stroke-linecap: round;
}

/* Draaien uitsluitend bij hover. UIkit legt bij het openen van de overlay de focus
   op deze knop; met :focus-visible erbij zou het kruis dus meteen gedraaid staan en
   zou hover niets meer doen. Focus krijgt daarom een eigen zichtbare markering. */
#tm-dialog-mobile .uk-offcanvas-close:hover {
    transform: rotate(90deg);
    /* Thema zet .uk-offcanvas-bar .uk-close:hover op #fff. */
    color: #f5a800 !important;
}

#tm-dialog-mobile .uk-offcanvas-close:focus-visible {
    color: #f5a800 !important;
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Menu in de overlay: verticaal gecentreerd en iets groter

   .uk-offcanvas-bar is een flex-kolom (uk-flex uk-flex-column). Het widget-blok
   krijgt van YOOtheme de class uk-margin-auto-bottom — dat is
   margin-bottom:auto!important — en wordt daardoor naar boven geduwd. Met ook
   margin-top:auto verdeelt de vrije ruimte zich boven én onder.

   Wordt het menu ooit hoger dan het scherm, dan vallen beide auto-marges terug op
   0 en scrollt de balk gewoon (overflow-y:auto). Centreren blijft dus veilig.
   -------------------------------------------------------------------------- */

#tm-dialog-mobile .uk-offcanvas-bar > .uk-margin-auto-bottom {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

/* Alleen binnen de overlay: hetzelfde WordPress-menu hangt ook op de locatie
   'navbar' voor de desktopheader, en dat moet ongemoeid blijven. */
#tm-dialog-mobile .uk-nav-default > li > a {
    font-size: 1.125rem;
    line-height: 1.5;
}

/* Subpagina's. Het menu is nu nog vlak, maar zodra er items ónder een pagina
   hangen rendert YOOtheme ul.uk-nav-sub. Die schaalt mee, met een duidelijke stap
   onder het hoofdniveau zodat de hiërarchie leesbaar blijft. */
#tm-dialog-mobile .uk-nav-default .uk-nav-sub {
    font-size: 1rem;
    line-height: 1.5;
}

#tm-dialog-mobile .uk-nav-default .uk-nav-sub a {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Het uitklappijltje van een item met subpagina's meeschalen met de tekst. */
#tm-dialog-mobile .uk-nav-parent-icon svg {
    width: 1em;
    height: 1em;
}

/* ==========================================================================
   Desktopnavigatie horizontaal centreren

   Opbouw van de header: .uk-navbar-left bevat logo én menu, .uk-navbar-right de
   knop. Het menu zit dus in dezelfde flex-cel als het logo en staat daardoor
   links. Auto-marges binnen die cel zouden het menu tussen logo en knop centreren
   — optisch, niet op het midden van de pagina.

   Daarom haal ik het menu uit de flow en centreer het binnen .uk-navbar. Die loopt
   van rand tot rand van .uk-container, en dat blok heeft margin:auto met gelijke
   padding links en rechts, dus het midden ervan is ook het midden van de pagina.

   Gecentreerd met left/right 0 plus margin:auto in plaats van translateX(-50%),
   omdat het menu 520,1px breed is: een translate van -260,05px geeft een
   subpixel-offset en daarmee onscherpe tekst.

   Alleen vanaf 1200px (UIkit @l). Daaronder is er domweg te weinig ruimte:
   logo 150 + menu 520 + knop 215 = 885px, terwijl de navbar op 960px 840px breed
   is — daar wrapt de navigatie nu al naar een tweede regel. Onder 1200px blijft
   de bestaande weergave dus staan.
   ========================================================================== */

@media (min-width: 1200px) {
    .tm-header .uk-navbar {
        /* Zonder dit centreert het menu tegen het sticky-element erboven, dat
           inline position:fixed en de volle schermbreedte krijgt. */
        position: relative;
    }

    .tm-header .uk-navbar-left > .uk-navbar-nav {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: max-content;
        margin: 0 auto;
    }
}