) en zet een scroll-lock
* op de body. Alleen < 768px (waar smartmenu de hamburger toont). Alleen
* theme modern; desktop (>= 768px) blijft ongewijzigd (float-right menu).
* ===================================================================== */
@media (max-width: 767.98px) {
/* --- 1. Hamburger -> ronde toggle-knop, verticaal gecentreerd in de nav-balk ---
* Ankeren binnen .main-nav (position:relative) i.p.v. position:fixed, zodat de
* knop met top:50% + translateY(-50%) altijd exact met het verticale midden
* van de nav-balk uitlijnt, ongeacht de hoogte van die balk (mail Rutger
* 20 jul 2026). #main-nav is op mobiel sticky (stick_in_parent, footer.php),
* dus de knop blijft gewoon in beeld bij het scrollen. */
body.theme-modern .main-nav {
position: relative;
}
body.theme-modern .main-menu-btn {
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%); /* verticaal midden = nav-midden, hoogte-onafhankelijk */
margin: 0;
text-indent: 0; /* text-indent-hack niet meer nodig (zie .main-menu-btn-label) */
z-index: 1046; /* boven de drawer (1045) => X blijft aantikbaar */
width: 46px;
height: 46px;
background-color: var(--main-color);
border-radius: 50%;
box-shadow: 0 4px 14px rgba(29, 37, 48, 0.28);
}
/* Toggle-tekst via de standaard 'visually-hidden'-techniek i.p.v. de fragiele
* text-indent-hack: onzichtbaar én uit de flow, dus zonder invloed op de
* centrering van het icoon, maar wel leesbaar voor screenreaders. */
body.theme-modern .main-menu-btn .main-menu-btn-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
border: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
/* Icoon-bars wit + perfect gecentreerd in de 46px-knop. Alleen de middenbalk
* (.main-menu-btn-icon) centreren we via 50% + translate; de :before/:after
* houden left:0 t.o.v. die balk, zodat alle drie horizontaal uitgelijnd
* blijven — óók wanneer ze in de 'X'-stand roteren. */
body.theme-modern .main-menu-btn .main-menu-btn-icon,
body.theme-modern .main-menu-btn .main-menu-btn-icon:before,
body.theme-modern .main-menu-btn .main-menu-btn-icon:after {
background: #fff;
}
body.theme-modern .main-menu-btn .main-menu-btn-icon {
left: 50%;
transform: translate(-50%, -50%); /* horizontaal + verticaal exact midden */
}
body.theme-modern .main-menu-btn .main-menu-btn-icon:before,
body.theme-modern .main-menu-btn .main-menu-btn-icon:after {
left: 0; /* t.o.v. de gecentreerde middenbalk */
}
/* --- 2. Blurred overlay over de pagina-inhoud (JS-ingespoten label) --- */
body.theme-modern .mdn-drawer-overlay {
position: fixed;
inset: 0;
margin: 0;
z-index: 1044; /* boven de pagina, onder de drawer */
background: rgba(17, 24, 32, 0.45);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
opacity: 0;
visibility: hidden;
cursor: pointer;
transition: opacity 0.28s ease, visibility 0.28s ease;
}
body.theme-modern #main-menu-state:checked ~ .mdn-drawer-overlay {
opacity: 1;
visibility: visible;
}
/* --- 3. #main-menu -> fixed side-drawer, schuift in van rechts --- */
body.theme-modern #main-menu {
display: block !important; /* override smartmenu :not(:checked){display:none} zodat de slide-transitie werkt */
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 300px;
max-width: 85vw;
margin: 0;
padding: 4.75rem 0 1.5rem; /* ruimte bovenin, naast de FAB */
background-color: #1d2530; /* donker drawer-thema */
box-shadow: -6px 0 24px rgba(0, 0, 0, 0.3);
z-index: 1045;
transform: translateX(100%); /* off-canvas rechts */
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
body.theme-modern #main-menu-state:checked ~ #main-menu {
transform: translateX(0); /* schuift in beeld */
}
/* --- 4. Menu-items verticaal gestapeld, strakke padding, wit --- */
body.theme-modern #main-menu > li {
float: none;
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.theme-modern #main-menu > li > a,
body.theme-modern #main-menu ul a {
color: #e7ecf2 !important;
padding: 0.85rem 1.5rem;
border-radius: 0 !important; /* de pill-radius van desktop hoort niet in de drawer */
font-size: 15px;
font-weight: 600;
}
body.theme-modern #main-menu a:hover,
body.theme-modern #main-menu a:focus,
body.theme-modern #main-menu a:active,
body.theme-modern #main-menu a.highlighted {
background-color: rgba(255, 255, 255, 0.06) !important;
color: #fff !important;
}
/* Submenu's iets donkerder + ingesprongen */
body.theme-modern #main-menu ul {
background-color: rgba(0, 0, 0, 0.18);
}
body.theme-modern #main-menu ul a {
padding-left: 2.5rem;
font-weight: 500;
}
/* --- 5. Zoekformulier bovenin de drawer (JS verplaatst het hierheen) ---
* FOUC-fix (mail Rutger 20 jul 2026): het mobiele zoekformulier staat in de
* header-markup (header2.php) maar hoort in deze side-drawer — footer.php-JS
* verplaatst het daarheen. Tot dat moment flitste het kort onder de header
* ("blink" bij refresh op mobiel). We verbergen het formulier daarom in zijn
* oorspronkelijke positie en tonen het pas zodra het in de drawer
* (.mdn-drawer-search) staat. Alleen theme modern, alleen mobiel. */
body.theme-modern #searchForm_mobile { display: none; }
body.theme-modern .mdn-drawer-search #searchForm_mobile { display: block; }
body.theme-modern #main-menu .mdn-drawer-search {
display: block; /* was .d-md-none; in de drawer altijd tonen op mobiel */
float: none;
width: 100%;
padding: 0 1.5rem 1.25rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: 0.5rem;
}
body.theme-modern #main-menu .mdn-drawer-search .input-group-append .btn {
border-radius: 0 999px 999px 0;
}
/* --- 6. Scroll-lock op de body zolang de drawer open is (JS-class) --- */
body.theme-modern.mdn-drawer-open {
overflow: hidden;
}
}
/* =====================================================================
* Offer-sidebar: losse kaarten + 'partial sticky' (mail Rutger 20 jul 2026)
* — alleen theme modern. Markup: handlers/offer.php — elke logische sectie
* (categorie, externe URL, banner, inhoudsopgave, CTA, Top5) zit in een eigen
* .mdn-side-card; de TOC-kaart en alles erna zit in .mdn-side-sticky. De JS
* whole-aside sticky is voor modern-offer uitgezet (footer.php); het plakken
* gebeurt hier via CSS position:sticky. Zelfde kaart-taal (radius/shadow) als
* de rest van het modern-thema.
* ===================================================================== */
body.theme-modern .mdn-side-card {
background: #fff;
border-radius: 14px;
box-shadow: 0 2px 14px rgba(29, 37, 48, 0.07);
padding: 1.15rem 1.25rem;
margin-bottom: 1.25rem;
}
/* Kop binnen de kaart sluit aan op de rest van modern: geen uppercase, donker. */
body.theme-modern .mdn-side-card .site_heading {
text-transform: none;
font-weight: 700;
color: #1d2530;
}
/* Eerste kop in een kaart zonder top-marge — overrulet Bootstrap mt-3/mt-5
* (die !important zijn), zodat de kop netjes tegen de kaart-padding aansluit. */
body.theme-modern .mdn-side-card .site_heading:first-child {
margin-top: 0 !important;
}
body.theme-modern .mdn-side-card ol,
body.theme-modern .mdn-side-card ul {
margin-bottom: 0;
padding-left: 1.1rem;
}
/* CTA-kaart: knop vult de kaart zonder de extra -marge. */
body.theme-modern .mdn-side-cta p { margin: 0 !important; }
/* Partial sticky: de informatie-kaarten (categorie, URL, banner) scrollen
* normaal mee; vanaf de TOC-kaart plakt het blok bovenaan de viewport zodra het
* daar aankomt. Alleen desktop (col-lg-3 breekt op 992px); op mobiel stapelen de
* kaarten gewoon. height:100% op de aside laat het sticky-blok de volledige
* (flex-gestretchte) kolomhoogte meelopen, zodat het blijft plakken zolang de
* hoofdcontent langer is — binnen de container, dus zonder de layout te breken. */
@media (min-width: 992px) {
body.theme-modern .mdn-offer-sidebar {
height: 100%;
}
body.theme-modern .mdn-side-sticky {
position: sticky;
/* Wat lucht onder de gestickyde #main-nav (mail Rutger 21 jul 2026): op 88px
* plakte het blok pal tegen — feitelijk half achter — de bovenbalk. +16px
* geeft ademruimte onder de header zodat de index-kaart er netjes onder blijft. */
top: 104px;
}
}