/*
 * Nuna kdv 2026 — Moderne opmaak (v0.2.0)
 * ------------------------------------------------------------------
 * Wordt alleen geladen als de templateparameter "Moderne opmaak (2026)"
 * op Ja staat; index.php zet dan ook <body class="… nuna-2026">.
 * Staat de parameter op Nee, dan wordt dit bestand niet geladen en is de
 * presentatie exact die van v0.1.x (template.css).
 *
 * Spelregels voor dit bestand
 *  1. Elke selector begint met body.nuna-2026 (of :where(body.nuna-2026 …)).
 *  2. Nieuwe tokens heten --nuna-*. Bestaande template-variabelen worden
 *     alleen bijgesteld waar dat nodig is voor contrast/breedte (§1).
 *  3. Geen nieuwe brede regels op a, button, input, th, thead, table,
 *     .btn, .card, .row of andere Bootstrap-klassen. Content-opmaak geldt
 *     alleen binnen expliciet genoemde Joomla-contexten (§6).
 *  4. JExtranet (.jextranet-portal / .com-jextranet) blijft geïsoleerd:
 *     §2 zet daar de oude erfwaarden terug, en geen enkele context in dit
 *     bestand bevat de portal.
 *  5. Mobiel eerst: basisregels = mobiel, @media (min-width: 769px) =
 *     desktop. 768px is ook het omslagpunt in template.js.
 * ------------------------------------------------------------------
 */

/* =============================================
   1. DESIGN TOKENS
   ============================================= */

body.nuna-2026 {
    /* Merk (uit het logo) */
    --nuna-orange:        #f15b2b;   /* accent: lijnen, iconen, markeringen (3,4:1 — niet voor tekst) */
    --nuna-orange-dark:   #b8410f;   /* knoppen + links op wit (5,5:1) */
    --nuna-orange-darker: #9a3412;   /* hover van knoppen (7,3:1) */
    --nuna-orange-soft:   #fff1ea;
    --nuna-red:           #bb1e10;   /* fouten / verplicht */
    --nuna-green:         #43b85f;   /* decoratief */
    --nuna-green-dark:    #2e7d46;   /* groen met tekst (5,1:1) */
    --nuna-yellow:        #f9a800;   /* decoratief, nooit tekst */

    /* Secundair */
    --nuna-blue:          #2d5b88;   /* secundaire knop, focusring (7,1:1) */
    --nuna-blue-soft:     #eaf1f8;

    /* Neutraal */
    --nuna-text:          #1f2a37;   /* 14,5:1 op wit */
    --nuna-muted:         #5b6670;   /* 5,9:1 op wit, 5,4:1 op --nuna-bg-soft */
    --nuna-bg:            #ffffff;
    --nuna-bg-soft:       #f7f5f2;
    --nuna-border:        #e6e2dc;   /* decoratieve rand */
    --nuna-border-strong: #857c72;   /* rand van invoervelden (4,1:1, WCAG 1.4.11) */

    /* Vorm */
    --nuna-radius-sm:     8px;
    --nuna-radius-md:     14px;
    --nuna-radius-pill:   999px;
    --nuna-shadow:        0 1px 2px rgba(31, 42, 55, .06), 0 6px 18px rgba(31, 42, 55, .06);

    /* Ruimte (4-px raster) */
    --nuna-space-1: 4px;  --nuna-space-2: 8px;  --nuna-space-3: 12px; --nuna-space-4: 16px;
    --nuna-space-5: 24px; --nuna-space-6: 32px; --nuna-space-7: 48px; --nuna-space-8: 64px;

    /* Typografie */
    --nuna-fs-body:       1rem;      /* 16px mobiel, 17px desktop (zie §13) */
    --nuna-fs-small:      .9375rem;
    --nuna-fs-h1:         1.75rem;
    --nuna-fs-h2:         1.375rem;
    --nuna-fs-h3:         1.125rem;
    --nuna-lh:            1.65;

    /* Interactie */
    --nuna-focus:         3px solid var(--nuna-blue);
    --nuna-tap:           44px;

    /* Bestaande template-variabelen, bijgesteld voor de moderne opmaak.
       --container-max: 1100px sluit aan op de .full-width-berekening (§19
       template.css), die al van 1100px uitging. */
    --container-max:      1100px;
    --color-text:         var(--nuna-text);       /* was #7a7a7a (4,3:1) */
    --color-text-light:   var(--nuna-muted);      /* was #b2b3b6 (1,9:1) */
}

/* =============================================
   2. JEXTRANET-ISOLATIE
   De portal erft alleen van <body>. Hier zetten we de oude erfwaarden
   terug, zodat elke berekende stijl binnen de portal gelijk is aan de
   klassieke opmaak. :where() = specificiteit 0, dus elke regel uit
   jextranet.css blijft winnen.
   ============================================= */

:where(body.nuna-2026 .jextranet-portal),
:where(body.nuna-2026 .com-jextranet) {
    --container-max:    880px;
    --color-text:       #7a7a7a;
    --color-text-light: #b2b3b6;
    color:              #7a7a7a;
}

/* =============================================
   3. TOEGANKELIJKHEID: SKIP-LINK EN FOCUS
   ============================================= */

body.nuna-2026 .nuna-skip-link {
    position: absolute;
    left: var(--nuna-space-4);
    top: -100px;
    z-index: 2000;
    padding: var(--nuna-space-3) var(--nuna-space-4);
    background: var(--nuna-text);
    color: #fff;
    font-weight: 600;
    border-radius: var(--nuna-radius-sm);
    text-decoration: none;
}

body.nuna-2026 .nuna-skip-link:focus {
    top: var(--nuna-space-3);
    color: #fff;
    outline: 3px solid var(--nuna-yellow);
    outline-offset: 2px;
}

body.nuna-2026 #content-main:focus {
    outline: none;
}

/* Eén duidelijke focusring in header, menu's, content en footer.
   Niet op de portal: die heeft eigen focusstijlen. */
body.nuna-2026 :where(#header-wrap, #header-nav-mob, .header-navigation, #breadcrumbs,
    #hero, #content-area-top, #content-bottom, .sidebar, #footer-wrap, #box-wrap,
    #online-support, .nuna-modal, #cookie)
    :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
body.nuna-2026 :where(.item-page, .com-content-category-blog, .blog-featured, .com-content-category,
    .contact-profile, .com-contact, .com-finder, .profile, #member-profile)
    :is(a, button, input, select, textarea, summary):focus-visible {
    outline: var(--nuna-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #fff;
}

/* =============================================
   4. TOPBALK (position-13) EN BANNER
   De klassieke force-fix gebruikt !important; om contrast te herstellen
   zijn hier enkele !important-waarden nodig (alleen in deze sectie).
   ============================================= */

body.nuna-2026 #top-header-sidebar {
    background: var(--nuna-bg-soft) !important;
    border-bottom: 1px solid var(--nuna-border);
    max-width: none;
    padding: 0;
}

body.nuna-2026 #top-header-sidebar p {
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nuna-space-1) var(--nuna-space-4);
    min-height: 40px;
}

body.nuna-2026 #top-header-sidebar a.top-header-item {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    margin-right: 0 !important;
    color: var(--nuna-text) !important;
    font-size: var(--nuna-fs-small) !important;
    line-height: 1.2 !important;
}

body.nuna-2026 #top-header-sidebar a.top-header-item:hover {
    text-decoration: underline !important;
}

body.nuna-2026 #top-header-sidebar a.top-header-item::before {
    color: var(--nuna-orange-dark) !important;
    vertical-align: middle !important;
}

body.nuna-2026 #top-header-sidebar a.nuna-facebook,
body.nuna-2026 #top-header-sidebar a.nuna-instagram {
    justify-content: center;
    min-width: 32px;
}

body.nuna-2026 #topnav-wrap {
    background: var(--nuna-bg-soft);
    border-bottom-color: var(--nuna-border);
}

body.nuna-2026 #topnav a {
    color: var(--nuna-text);
    border-left-color: var(--nuna-border-strong);
}

body.nuna-2026 #topnav a:hover {
    color: var(--nuna-orange-dark);
    text-decoration: underline;
}

/* =============================================
   5. HEADER (mobiel eerst)
   ============================================= */

body.nuna-2026 #header-wrap {
    border-bottom: 1px solid var(--nuna-border);
}

body.nuna-2026 .header-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nuna-space-3);
    padding: var(--nuna-space-3) 0;
}

body.nuna-2026 #logo img {
    max-height: 44px;
}

body.nuna-2026 .site-title {
    color: var(--nuna-orange-dark);
    font-weight: 700;
}

body.nuna-2026 .site-description {
    color: var(--nuna-muted);
}

/* Mobiel: de kinderen van .header-right doen mee in de rij van .header-inner,
   zodat logo + knoppen op regel 1 staan en het zoekveld op regel 2. */
body.nuna-2026 .header-right {
    display: contents;
}

body.nuna-2026 #logo {
    margin-right: auto;
}

/* Hamburger: 44px klikvlak met zichtbaar label */
body.nuna-2026 .mobile-menu-button {
    order: 2;
}

body.nuna-2026 #mobile-menu-icon {
    flex-direction: row;
    align-items: center;
    gap: var(--nuna-space-2);
    width: auto;
    height: var(--nuna-tap);
    padding: 0 var(--nuna-space-4);
    background: var(--nuna-bg);
    border: 1px solid var(--nuna-border-strong);
    border-radius: var(--nuna-radius-pill);
    color: var(--nuna-text);
    font-family: inherit;
    font-size: var(--nuna-fs-small);
    font-weight: 600;
    line-height: 1;
}

body.nuna-2026 #mobile-menu-icon .nuna-burger-bars {
    display: grid;
    gap: 4px;
    width: 18px;
}

body.nuna-2026 #mobile-menu-icon .hamburger-bar {
    background-color: currentColor;
}

body.nuna-2026 #mobile-menu-icon[aria-expanded="true"] .hamburger-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

body.nuna-2026 #mobile-menu-icon[aria-expanded="true"] .hamburger-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* In- en uitlogknop: rustige secundaire knop */
body.nuna-2026 .nuna-login-btn {
    order: 1;
    min-height: var(--nuna-tap);
    padding: 0 var(--nuna-space-4);
    background: var(--nuna-bg);
    color: var(--nuna-text);
    border: 1px solid var(--nuna-border-strong);
    border-radius: var(--nuna-radius-pill);
    font-size: var(--nuna-fs-small);
    font-weight: 600;
}

body.nuna-2026 .nuna-login-btn:hover,
body.nuna-2026 .nuna-login-btn:focus {
    background: var(--nuna-bg-soft);
    color: var(--nuna-text);
    outline: none;
}

body.nuna-2026 .nuna-login-btn:focus-visible {
    outline: var(--nuna-focus);
    outline-offset: 2px;
}

body.nuna-2026 #user-menu {
    order: 1;
    border-right: 0;
    margin-right: 0;
    padding-right: 0;
    font-size: var(--nuna-fs-small);
}

body.nuna-2026 #user-menu a {
    color: var(--nuna-text);
}

body.nuna-2026 #user-menu a:hover {
    color: var(--nuna-orange-dark);
    text-decoration: underline;
}

/* Zoeken: op mobiel een volle regel onder logo en knoppen */
body.nuna-2026 #search-wrap {
    order: 3;
    flex: 1 1 100%;
    display: block;
    width: 100%;
}

body.nuna-2026 #search-wrap:empty {
    display: none;
}

body.nuna-2026 #search-wrap form {
    display: flex;
    gap: var(--nuna-space-2);
    width: 100%;
}

body.nuna-2026 #search-wrap .input-group,
body.nuna-2026 #search-wrap .mod-finder__search {
    display: flex;
    gap: var(--nuna-space-2);
    width: 100%;
}

body.nuna-2026 #search-wrap :is(input[type="search"], input[type="text"]) {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-height: var(--nuna-tap);
    padding: 0 var(--nuna-space-4);
    border: 1px solid var(--nuna-border-strong);
    border-radius: var(--nuna-radius-pill);
    background: var(--nuna-bg);
    color: var(--nuna-text);
    font-size: 1rem;
}

/* Klassiek: #search-wrap input { outline: none } — focusring hier expliciet terug */
body.nuna-2026 #search-wrap :is(input[type="search"], input[type="text"]):focus-visible {
    border-color: var(--nuna-blue);
    outline: var(--nuna-focus);
    outline-offset: 2px;
}

body.nuna-2026 #search-wrap :is(input[type="search"], input[type="text"])::placeholder {
    color: var(--nuna-muted);
    opacity: 1;
}

body.nuna-2026 #search-wrap :is(button[type="submit"], input[type="submit"]) {
    flex: 0 0 auto;
    min-height: var(--nuna-tap);
    padding: 0 var(--nuna-space-4);
    border-radius: var(--nuna-radius-pill);
    background: var(--nuna-orange-dark);
    color: #fff;
    font-weight: 600;
}

body.nuna-2026 #search-wrap :is(button[type="submit"], input[type="submit"]):hover {
    background: var(--nuna-orange-darker);
}

/* =============================================
   6. HOOFDMENU — DESKTOP (#gtsnav, zichtbaar vanaf 769px)
   ============================================= */

body.nuna-2026 .header-navigation {
    background: var(--nuna-bg);
    border-bottom: 1px solid var(--nuna-border);
}

body.nuna-2026 #gtsnav > ul {
    display: flex;
    flex-wrap: wrap;
    font-size: var(--nuna-fs-small);
    margin-left: calc(-1 * var(--nuna-space-3));
}

body.nuna-2026 #gtsnav > ul > li {
    font-size: var(--nuna-fs-small);
}

body.nuna-2026 #gtsnav > ul > li > :is(a, .separator) {
    display: flex;
    align-items: center;
    gap: var(--nuna-space-2);
    min-height: 52px;
    padding: 0 var(--nuna-space-3);
    color: var(--nuna-text);
    font-size: var(--nuna-fs-small);
    font-weight: 600;
    text-transform: none;
    border-bottom: 3px solid transparent;
    transition: background-color .15s ease, color .15s ease;
}

body.nuna-2026 #gtsnav > ul > li:hover > a,
body.nuna-2026 #gtsnav > ul > li:focus-within > a {
    background-color: var(--nuna-bg-soft);
    color: var(--nuna-orange-dark);
}

/* Actief item: onderstreping (vorm) + kleur — niet alleen kleur */
body.nuna-2026 #gtsnav > ul > li.active > a,
body.nuna-2026 #gtsnav > ul > li.current > a,
body.nuna-2026 #gtsnav > ul > li.current-menu-item > a,
body.nuna-2026 #gtsnav > ul > li.current-path > a {
    background-color: transparent;
    color: var(--nuna-text);
    border-bottom-color: var(--nuna-orange);
}

body.nuna-2026 #gtsnav > ul > li.active:hover > a,
body.nuna-2026 #gtsnav > ul > li.active:focus-within > a {
    background-color: var(--nuna-bg-soft);
}

/* Dropdown-pijl (vervangt de witte pijl van de klassieke opmaak) */
body.nuna-2026 .header-navigation .nav-item.has-sub > a::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: .6;
}

/* Submenu (2e en 3e niveau) */
body.nuna-2026 #gtsnav ul ul {
    min-width: 230px;
    padding: var(--nuna-space-2) 0;
    background-color: var(--nuna-bg);
    border: 1px solid var(--nuna-border);
    border-radius: 0 0 var(--nuna-radius-sm) var(--nuna-radius-sm);
    box-shadow: var(--nuna-shadow);
}

body.nuna-2026 #gtsnav ul ul ul {
    border-radius: var(--nuna-radius-sm);
}

body.nuna-2026 #gtsnav ul ul li :is(a, .separator) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nuna-space-3);
    min-height: 44px;
    padding: var(--nuna-space-2) var(--nuna-space-4);
    color: var(--nuna-text);
    font-size: var(--nuna-fs-small);
    font-weight: 500;
    border-top: 0;
    border-left: 3px solid transparent;
    white-space: normal;
}

body.nuna-2026 #gtsnav ul ul li:hover > a,
body.nuna-2026 #gtsnav ul ul li:focus-within > a {
    background-color: var(--nuna-bg-soft);
    color: var(--nuna-orange-dark);
}

body.nuna-2026 #gtsnav ul ul li.active > a,
body.nuna-2026 #gtsnav ul ul li.current > a,
body.nuna-2026 #gtsnav ul ul li.current-menu-item > a {
    background-color: var(--nuna-orange-soft);
    color: var(--nuna-text);
    font-weight: 700;
    border-left-color: var(--nuna-orange);
}

/* 3e niveau: pijl naar rechts */
body.nuna-2026 .header-navigation ul ul .nav-item.has-sub > a::after {
    transform: rotate(-45deg);
}

/* =============================================
   7. HOOFDMENU — MOBIEL OFF-CANVAS (#header-nav-mob)
   Zelfde markup en JS als voorheen; alleen de opmaak verandert.
   ============================================= */

body.nuna-2026 #header-nav-mob {
    background-color: var(--nuna-bg);
    color: var(--nuna-text);
    padding-top: 64px;
    box-shadow: -8px 0 24px rgba(31, 42, 55, .12);
    visibility: hidden;
    transition: left .3s ease, visibility 0s linear .3s;
}

body.nuna-2026 #header-nav-mob.active {
    visibility: visible;
    transition: left .3s ease, visibility 0s linear 0s;
}

body.nuna-2026 #mobile-close {
    top: var(--nuna-space-3);
    right: var(--nuna-space-3);
    width: var(--nuna-tap);
    height: var(--nuna-tap);
    padding: 0;
    color: var(--nuna-text);
    border: 1px solid var(--nuna-border-strong);
    border-radius: 50%;
    font-size: 1.75rem;
}

body.nuna-2026 #mobile-close:hover,
body.nuna-2026 #mobile-close:focus {
    color: var(--nuna-orange-dark);
    outline: none;
}

body.nuna-2026 #mobile-close:focus-visible {
    outline: var(--nuna-focus);
    outline-offset: 2px;
}

body.nuna-2026 #header-nav-mob > ul > li {
    border-top: 1px solid var(--nuna-border);
}

body.nuna-2026 #header-nav-mob > ul > li:last-child {
    border-bottom: 1px solid var(--nuna-border);
}

body.nuna-2026 #header-nav-mob li :is(a, .separator) {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: var(--nuna-space-2) 64px var(--nuna-space-2) var(--nuna-space-5);
    color: var(--nuna-text);
    font-size: 1rem;
    font-weight: 600;
    border-left: 4px solid transparent;
}

body.nuna-2026 #header-nav-mob li a:hover {
    background-color: var(--nuna-bg-soft);
    color: var(--nuna-orange-dark);
}

body.nuna-2026 #header-nav-mob li.active > a,
body.nuna-2026 #header-nav-mob li.current > a,
body.nuna-2026 #header-nav-mob li.current-menu-item > a {
    background-color: transparent;
    color: var(--nuna-text);
    border-left-color: var(--nuna-orange);
}

body.nuna-2026 #header-nav-mob li.current-menu-item > a {
    background-color: var(--nuna-orange-soft);
    font-weight: 700;
}

body.nuna-2026 #header-nav-mob ul ul {
    background-color: var(--nuna-bg-soft);
}

body.nuna-2026 #header-nav-mob ul ul li {
    border-top: 1px solid var(--nuna-border);
}

body.nuna-2026 #header-nav-mob ul ul li :is(a, .separator) {
    padding-left: calc(var(--nuna-space-5) + var(--nuna-space-4));
    font-size: var(--nuna-fs-small);
    font-weight: 500;
}

body.nuna-2026 #header-nav-mob ul ul ul li :is(a, .separator) {
    padding-left: calc(var(--nuna-space-5) + var(--nuna-space-7));
}

body.nuna-2026 #header-nav-mob .sub_menu_icon {
    width: 52px;
    height: 52px;
    background: transparent;
    border-left: 1px solid var(--nuna-border);
    color: var(--nuna-text);
}

body.nuna-2026 #header-nav-mob .sub_menu_icon:hover {
    background: var(--nuna-bg-soft);
}

body.nuna-2026 #header-nav-mob .sub_menu_icon span {
    width: 8px;
    height: 8px;
    border: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
}

body.nuna-2026 #header-nav-mob .sub_menu_icon.rotate span {
    transform: rotate(-135deg) translate(-2px, -2px);
}

/* =============================================
   8. BREADCRUMBS
   ============================================= */

body.nuna-2026 #breadcrumbs {
    padding: var(--nuna-space-3) 0 0;
    margin-bottom: var(--nuna-space-2);
    border-bottom: 0;
    font-size: var(--nuna-fs-small);
    color: var(--nuna-muted);
}

body.nuna-2026 #breadcrumbs :is(ol.breadcrumb, ul.breadcrumb) {
    gap: 2px 0;
    background: none;
}

body.nuna-2026 #breadcrumbs .mod-breadcrumbs__here {
    margin-right: var(--nuna-space-1);
}

body.nuna-2026 #breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    padding: 0 .5em;
    color: var(--nuna-muted);
    opacity: 1;
}

body.nuna-2026 #breadcrumbs a {
    color: var(--nuna-muted);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
}

body.nuna-2026 #breadcrumbs a:hover {
    color: var(--nuna-orange-dark);
    text-decoration-color: currentColor;
}

body.nuna-2026 #breadcrumbs span:not(.divider) {
    opacity: 1;
}

/* Huidige pagina: donker én vet (niet alleen kleur) */
body.nuna-2026 #breadcrumbs :is(.active, .breadcrumb-item.active) {
    color: var(--nuna-text);
    font-weight: 600;
    opacity: 1;
}

/* =============================================
   9. LAYOUT EN CONTENT-TYPOGRAFIE
   Alleen binnen de hieronder genoemde Joomla-contexten. De portal
   (#content-main > .com-jextranet) valt daar nooit onder.
   ============================================= */

body.nuna-2026 #content-inner {
    padding-top: var(--nuna-space-2);
}

body.nuna-2026 #main-row {
    padding-top: var(--nuna-space-4);
}

body.nuna-2026 #content-wrap {
    border-bottom: 0;
    padding-bottom: var(--nuna-space-7);
}

body.nuna-2026 :where(.item-page, .com-content-category-blog, .blog-featured, .com-content-category,
    .contact-profile, .com-contact, .com-finder, .profile, #member-profile,
    #hero, #content-area-top, #content-bottom, .sidebar) {
    color: var(--nuna-text);
    font-size: var(--nuna-fs-body);
    line-height: var(--nuna-lh);
}

/* Lange woorden en URL's breken af in plaats van de pagina breder te maken */
body.nuna-2026 :where(.item-page, .com-content-category-blog, .blog-featured, .com-content-category,
    .contact-profile, .com-contact, .com-finder, .sidebar, #hero, #content-area-top, #content-bottom)
    :is(h1, h2, h3, h4, p, li, td, th, dd, a, blockquote) {
    overflow-wrap: anywhere;
}

body.nuna-2026 :where(.item-page, .com-content-category-blog, .blog-featured, .com-content-category,
    .contact-profile, .com-contact, .com-finder) :is(h1, h2) {
    hyphens: auto;
}

body.nuna-2026 :where(.item-page, .com-content-category-blog, .blog-featured, .com-content-category,
    .contact-profile, .com-contact, .com-finder)
    :is(h1, h2, h3) {
    color: var(--nuna-text);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
}

body.nuna-2026 :where(.item-page, .com-content-category-blog, .blog-featured, .com-content-category,
    .contact-profile, .com-contact, .com-finder) h1 {
    font-size: var(--nuna-fs-h1);
    margin-bottom: var(--nuna-space-4);
}

body.nuna-2026 :where(.item-page, .com-content-category-blog, .blog-featured, .com-content-category,
    .contact-profile, .com-contact, .com-finder) h2 {
    font-size: var(--nuna-fs-h2);
    margin: var(--nuna-space-5) 0 var(--nuna-space-3);
}

body.nuna-2026 :where(.item-page, .com-content-category-blog, .blog-featured) > h2:first-child,
body.nuna-2026 .item-page > h1 + h2,
body.nuna-2026 .blog-item > h2:first-child {
    margin-top: 0;
}

body.nuna-2026 :where(.item-page, .com-content-category-blog, .blog-featured, .com-content-category,
    .contact-profile, .com-contact, .com-finder) h3 {
    font-size: var(--nuna-fs-h3);
    margin: var(--nuna-space-5) 0 var(--nuna-space-2);
}

body.nuna-2026 :where(.item-page, .com-content-category-blog, .blog-featured) h2 a {
    color: var(--nuna-text);
}

body.nuna-2026 :where(.item-page, .com-content-category-blog, .blog-featured) h2 a:hover {
    color: var(--nuna-orange-dark);
    text-decoration: underline;
}

body.nuna-2026 :where(.item-page, .com-content-category-blog, .blog-featured, .contact-profile, .com-contact) p {
    margin: 0 0 var(--nuna-space-4);
    line-height: var(--nuna-lh);
}

body.nuna-2026 :where(.item-page, .com-content-category-blog, .blog-featured, .contact-profile) :is(ul, ol):not(.actions):not(.pagenav):not([class*="pagination"]) {
    margin: 0 0 var(--nuna-space-4);
    padding-left: 1.25rem;
}

body.nuna-2026 :where(.item-page, .com-content-category-blog, .blog-featured) li::marker {
    color: var(--nuna-orange);
}

/* Basis-linkkleur buiten de portal. De klassieke regel a { color: #f15b2b }
   haalt op wit 3,4:1 en de hover (#faa71b) 2,0:1. Deze regel heeft dezelfde
   specificiteit als die klassieke a-regel (0,0,1 resp. 0,1,1) en wint alleen
   daarvan; elke specifiekere regel (knoppen, menu, paginering) blijft winnen.
   JExtranet (.com-jextranet) is expliciet uitgesloten. */
:where(body.nuna-2026 :where(#content-wrap, #footer-wrap, #box-wrap, #online-support)) a:where(:not(.com-jextranet *)) {
    color: var(--nuna-orange-dark);
}

:where(body.nuna-2026 :where(#content-wrap, #footer-wrap, #box-wrap, #online-support)) a:where(:not(.com-jextranet *)):is(:hover, :focus) {
    color: var(--nuna-orange-darker);
}

/* Tekstlinks in lopende tekst: kleur + onderstreping (niet alleen kleur) */
body.nuna-2026 :where(.item-page, .com-content-category-blog, .blog-featured, .contact-profile,
    .com-contact, .com-finder, .mod-custom, .sidebar, #hero, #content-area-top, #content-bottom)
    :is(p, td, dd, blockquote, figcaption, :is(ul, ol):not([class]) > li) > a:not([class]),
body.nuna-2026 .com-finder .result__title-link {
    color: var(--nuna-orange-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.nuna-2026 :where(.item-page, .com-content-category-blog, .blog-featured, .contact-profile,
    .com-contact, .com-finder, .mod-custom, .sidebar, #hero, #content-area-top, #content-bottom)
    :is(p, td, dd, blockquote, figcaption, :is(ul, ol):not([class]) > li) > a:not([class]):hover,
body.nuna-2026 .com-finder .result__title-link:hover {
    color: var(--nuna-orange-darker);
    text-decoration-thickness: 2px;
}

/* Artikel-info (datum, auteur): was #b2b3b6 */
body.nuna-2026 dl.article-info {
    color: var(--nuna-muted);
    font-size: .875rem;
    margin-bottom: var(--nuna-space-4);
}

/* Lees meer */
body.nuna-2026 :where(.item-page, .com-content-category-blog, .blog-featured) .readmore a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--nuna-tap);
    color: var(--nuna-orange-dark);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.nuna-2026 :where(.item-page, .com-content-category-blog, .blog-featured) .readmore a::after {
    content: "\203A";
    font-size: 1.25em;
    line-height: 1;
}

body.nuna-2026 .item-separator {
    border-top-color: var(--nuna-border);
    margin: var(--nuna-space-6) 0;
}

body.nuna-2026 blockquote {
    color: var(--nuna-text);
    border-left-width: 6px;
    border-right: 0;
    border-radius: 0 var(--nuna-radius-sm) var(--nuna-radius-sm) 0;
    box-shadow: none;
    background: var(--nuna-bg-soft);
    text-align: left;
}

/* Modules in de zijbalk (footer- en homepagemodules houden hun eigen opmaak) */
body.nuna-2026 .sidebar .moduletable {
    color: var(--nuna-text);
    background-color: var(--nuna-bg-soft);
    border-radius: var(--nuna-radius-md);
    padding: var(--nuna-space-4);
}

body.nuna-2026 .moduletable h3 {
    color: var(--nuna-text);
    font-weight: 700;
    font-size: 1.0625rem;
    margin-bottom: var(--nuna-space-3);
}

body.nuna-2026 .sidebar ul.menu li,
body.nuna-2026 .sidebar .mod-menu li {
    padding: 0;
    border-bottom-color: var(--nuna-border);
}

body.nuna-2026 .sidebar :is(ul.menu, .mod-menu) li a {
    display: block;
    padding: var(--nuna-space-2) var(--nuna-space-2);
    color: var(--nuna-text);
    border-left: 3px solid transparent;
}

body.nuna-2026 .sidebar :is(ul.menu, .mod-menu) li a:hover {
    color: var(--nuna-orange-dark);
    background: var(--nuna-bg);
}

body.nuna-2026 .sidebar :is(ul.menu, .mod-menu) li.current > a {
    border-left-color: var(--nuna-orange);
}

body.nuna-2026 ul.latestnews li {
    border-bottom-color: var(--nuna-border);
}

body.nuna-2026 h3.latesttitle {
    color: var(--nuna-text);
    font-weight: 600;
}

body.nuna-2026 a.leer {
    color: var(--nuna-orange-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* =============================================
   10. KNOPPEN
   Alleen binnen genoemde contexten — nooit globaal op button/.btn.
   ============================================= */

body.nuna-2026 :where(.item-page, .com-content-category-blog, .blog-featured, .com-content-category,
    .contact-profile, .com-contact, .com-finder, .com-users-login, .com-users-remind, .com-users-reset,
    .com-users-registration, #member-profile, .nuna-modal-body, #login-form, .sidebar,
    #hero, #content-area-top, #content-bottom)
    :is(.btn-primary, button[type="submit"], input[type="submit"], input.button, button.validate),
body.nuna-2026 a.nuna-button,
body.nuna-2026 .nuna-button--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nuna-space-2);
    min-height: var(--nuna-tap);
    padding: var(--nuna-space-2) var(--nuna-space-5);
    background-color: var(--nuna-orange-dark);
    color: #fff;
    border: 2px solid transparent;
    text-align: center;
    overflow-wrap: normal;
    border-radius: var(--nuna-radius-pill);
    font-family: inherit;
    font-size: var(--nuna-fs-small);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

body.nuna-2026 :where(.item-page, .com-content-category-blog, .blog-featured, .com-content-category,
    .contact-profile, .com-contact, .com-finder, .com-users-login, .com-users-remind, .com-users-reset,
    .com-users-registration, #member-profile, .nuna-modal-body, #login-form, .sidebar,
    #hero, #content-area-top, #content-bottom)
    :is(.btn-primary, button[type="submit"], input[type="submit"], input.button, button.validate):hover,
body.nuna-2026 a.nuna-button:hover,
body.nuna-2026 .nuna-button--primary:hover {
    background-color: var(--nuna-orange-darker);
    color: #fff;
}

body.nuna-2026 .nuna-button--secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--nuna-tap);
    padding: var(--nuna-space-2) var(--nuna-space-5);
    text-align: center;
    background: var(--nuna-bg);
    color: var(--nuna-blue);
    border: 2px solid var(--nuna-blue);
    border-radius: var(--nuna-radius-pill);
    font-weight: 600;
    text-decoration: none;
}

body.nuna-2026 .nuna-button--secondary:hover {
    background: var(--nuna-blue-soft);
    color: var(--nuna-blue);
}

body.nuna-2026 a.buttongroen {
    width: auto;
    min-height: var(--nuna-tap);
    padding: 0 var(--nuna-space-5);
    line-height: var(--nuna-tap);
    background-color: var(--nuna-green-dark);   /* was #43b85f met wit (2,5:1) */
    border-radius: var(--nuna-radius-pill);
    font-weight: 600;
}

body.nuna-2026 a.buttongroen:hover {
    background-color: #24633a;
    color: #fff;
}

/* Paginering (vorige/volgende in artikelen) */
body.nuna-2026 :is(li.pagenav-prev, li.pagenav-next, li.previous, li.next) a {
    min-height: var(--nuna-tap);
    padding: 0 var(--nuna-space-4);
    display: inline-flex;
    align-items: center;
    background-color: var(--nuna-orange-dark);
    border-radius: var(--nuna-radius-pill);
    font-weight: 600;
}

body.nuna-2026 :is(li.pagenav-prev, li.pagenav-next, li.previous, li.next) a:hover {
    background-color: var(--nuna-orange-darker);
}

/* Paginering categorielijst: de klassieke regels zijn !important (#d94a1e = 4,2:1) */
body.nuna-2026 .com-content-category__pagination .page-link {
    color: var(--nuna-orange-dark) !important;
    min-width: var(--nuna-tap) !important;
    height: var(--nuna-tap) !important;
    border-color: var(--nuna-border-strong) !important;
}

body.nuna-2026 .com-content-category__pagination .active .page-link {
    background: var(--nuna-orange-dark) !important;
    border-color: var(--nuna-orange-dark) !important;
    color: #fff !important;
    font-weight: 700;
}

body.nuna-2026 .com-content-category__pagination .disabled .page-link {
    color: var(--nuna-muted) !important;
}

/* =============================================
   11. KAARTEN (opt-in klassen voor eigen HTML in modules/artikelen)
   Eigen namen; .card van Bootstrap/JExtranet blijft ongemoeid.
   ============================================= */

body.nuna-2026 .nuna-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nuna-space-4);
    margin: 0 0 var(--nuna-space-5);
}

body.nuna-2026 .nuna-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--nuna-space-3);
    padding: var(--nuna-space-5);
    background: var(--nuna-bg);
    color: var(--nuna-text);
    border: 1px solid var(--nuna-border);
    border-radius: var(--nuna-radius-md);
    box-shadow: var(--nuna-shadow);
}

body.nuna-2026 .nuna-card :is(h2, h3) {
    margin: 0;
    font-size: var(--nuna-fs-h3);
}

body.nuna-2026 .nuna-card p {
    margin: 0;
    color: var(--nuna-muted);
    font-size: var(--nuna-fs-small);
}

body.nuna-2026 .nuna-card a.nuna-card-link {
    margin-top: auto;
    color: var(--nuna-orange-dark);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Hele kaart klikbaar via de link */
body.nuna-2026 .nuna-card a.nuna-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

body.nuna-2026 .nuna-card:hover {
    border-color: #d6d0c7;
}

body.nuna-2026 .nuna-infobox {
    padding: var(--nuna-space-5);
    background: var(--nuna-blue-soft);
    color: var(--nuna-text);
    border-radius: var(--nuna-radius-md);
}

body.nuna-2026 .nuna-lead {
    font-size: 1.125rem;
    color: var(--nuna-muted);
}

/* Bestaande homepageblokken: zachtere vorm, leesbare koppen */
body.nuna-2026 .block-offer::before,
body.nuna-2026 .gordon-block-inner {
    border-radius: var(--nuna-radius-md);
}

body.nuna-2026 .block-offer h3,
body.nuna-2026 .gordon-block h3 {
    color: var(--nuna-text);
    font-weight: 700;
}

body.nuna-2026 #nuna-about .container-inner {
    border-radius: var(--nuna-radius-md);
}

body.nuna-2026 #nuna-about .section-title h2 {
    color: var(--nuna-text);
}

/* =============================================
   12. FORMULIEREN (contact, login, profiel, zoekpagina)
   ============================================= */

body.nuna-2026 :where(.contact-profile, .com-contact, .com-finder, .com-users-login, .com-users-remind,
    .com-users-reset, .com-users-registration, #member-profile, .nuna-modal-body, #login-form)
    :is(input[type="text"], input[type="email"], input[type="search"], input[type="password"],
        input[type="tel"], input[type="url"], input[type="number"], textarea, select) {
    width: 100%;
    max-width: 32rem;
    min-height: var(--nuna-tap);
    padding: var(--nuna-space-2) var(--nuna-space-3);
    background: var(--nuna-bg);
    color: var(--nuna-text);
    border: 1px solid var(--nuna-border-strong);
    border-radius: var(--nuna-radius-sm);
    font-size: 1rem;
}

body.nuna-2026 :where(.contact-profile, .com-contact) textarea {
    max-width: 40rem;
    min-height: 140px;
}

body.nuna-2026 :where(.contact-profile, .com-contact, .com-finder, .com-users-login, .com-users-remind,
    .com-users-reset, .com-users-registration, #member-profile, .nuna-modal-body, #login-form)
    :is(input, textarea, select):focus-visible {
    border-color: var(--nuna-blue);
}

body.nuna-2026 :where(.contact-profile, .com-contact, .com-users-login, .com-users-remind,
    .com-users-reset, .com-users-registration, #member-profile, .nuna-modal-body, #login-form) label {
    margin-bottom: var(--nuna-space-1);
    color: var(--nuna-text);
    font-weight: 600;
}

body.nuna-2026 :where(.contact-profile, .com-contact) .formelm {
    margin-bottom: var(--nuna-space-4);
}

/* Verplicht: sterretje in rood én het woord blijft in het label */
body.nuna-2026 .star {
    color: var(--nuna-red);
    font-weight: 700;
}

body.nuna-2026 :where(.contact-profile, .com-contact) .contact-emailcopy {
    display: flex;
    align-items: center;
    gap: var(--nuna-space-2);
    margin-bottom: var(--nuna-space-4);
}

body.nuna-2026 :where(.contact-profile, .com-contact) .contact-emailcopy :is(input, label) {
    margin: 0;
}

body.nuna-2026 :where(.contact-profile, .com-contact) input[type="checkbox"],
body.nuna-2026 .nuna-modal-body input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--nuna-orange-dark);
}

/* =============================================
   13. TABELLEN BUITEN DE PORTAL
   ============================================= */

body.nuna-2026 :where(.item-page, .com-content-category-blog, .blog-featured, .contact-profile) table th {
    background-color: var(--nuna-bg-soft);
    color: var(--nuna-text);
}

body.nuna-2026 :where(.item-page, .com-content-category-blog, .blog-featured, .contact-profile) :is(td, th) {
    border-color: var(--nuna-border);
    padding: var(--nuna-space-2) var(--nuna-space-3);
}

/* Artikellijst (table.category): klassieke regels zijn !important */
body.nuna-2026 table.category a {
    color: var(--nuna-orange-dark) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

body.nuna-2026 table.category th {
    color: var(--nuna-muted) !important;
}

body.nuna-2026 table.category :is(td, th) {
    color: var(--nuna-text) !important;
}

/* =============================================
   14. LOGIN-MODAL
   ============================================= */

body.nuna-2026 .nuna-modal-content {
    border-radius: var(--nuna-radius-md);
    border-color: var(--nuna-border);
}

body.nuna-2026 .nuna-modal-title {
    color: var(--nuna-text);
    font-size: 1.25rem;
    font-weight: 700;
}

body.nuna-2026 .nuna-modal-close {
    width: var(--nuna-tap);
    height: var(--nuna-tap);
    color: var(--nuna-text);
    opacity: 1;
    border-radius: 50%;
}

body.nuna-2026 .nuna-modal-close:hover,
body.nuna-2026 .nuna-modal-close:focus {
    background: var(--nuna-bg-soft);
    color: var(--nuna-text);
    outline: none;
}

body.nuna-2026 .nuna-modal-close:focus-visible {
    outline: var(--nuna-focus);
}

body.nuna-2026 .nuna-modal-body .login-fields input:is([type="text"], [type="password"], [type="email"]) {
    max-width: 100%;
}

body.nuna-2026 .nuna-modal-body .login-links a {
    color: var(--nuna-orange-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* =============================================
   15. GEBRUIKERSPROFIEL
   ============================================= */

body.nuna-2026 ul.com-users-profile__edit li a.btn {
    background-color: var(--nuna-green-dark);
    min-height: var(--nuna-tap);
}

body.nuna-2026 ul.com-users-profile__edit li a.btn:hover {
    background-color: var(--nuna-orange-dark);
}

body.nuna-2026 :is(.profile, #member-profile) legend {
    color: var(--nuna-orange-dark);
}

body.nuna-2026 #member-profile input.form-control {
    border-color: var(--nuna-border-strong);
    color: var(--nuna-text);
    min-height: var(--nuna-tap);
}

body.nuna-2026 #member-profile button.input-password-toggle {
    background-color: var(--nuna-orange-dark);
    min-width: var(--nuna-tap);
}

/* Profiel: vaste 150px-labelkolom alleen vanaf tablet (zie §19) */
body.nuna-2026 :is(.profile dt, .profile dd, #member-profile .control-label, #member-profile .controls) {
    display: block;
    width: auto;
}

/* =============================================
   16. FOOTER, BOX-WRAP, CREDITS
   ============================================= */

body.nuna-2026 #footer-wrap {
    background-color: var(--nuna-bg-soft);
    border-top: 1px solid var(--nuna-border);
    padding-bottom: var(--nuna-space-6);
}

body.nuna-2026 #footer {
    padding-top: var(--nuna-space-6);
    color: #4a5560;                      /* 7,0:1 op --nuna-bg-soft (was 1,9:1) */
    font-size: var(--nuna-fs-small);
}

body.nuna-2026 #footer a {
    color: var(--nuna-text);
    text-decoration: underline;
    text-decoration-color: rgba(31, 42, 55, .35);
    text-underline-offset: 3px;
}

body.nuna-2026 #footer a:hover {
    color: var(--nuna-orange-dark);
    text-decoration-color: currentColor;
}

body.nuna-2026 h2.koprood,
body.nuna-2026 h2.footercont {
    color: var(--nuna-orange-dark);
    font-weight: 700;
}

body.nuna-2026 #credits h3,
body.nuna-2026 :where(#box-wrap h1, #box-wrap h2, #box-wrap h3) {
    color: var(--nuna-muted);
}

body.nuna-2026 #credits ul li a {
    color: var(--nuna-text);
}

body.nuna-2026 #credits ul li a:hover {
    color: var(--nuna-green-dark);
    text-decoration: underline;
}

body.nuna-2026 #box-wrap {
    background-color: var(--nuna-bg-soft);
    border-top: 1px solid var(--nuna-border);
}

body.nuna-2026 #box-wrap a {
    color: var(--nuna-orange-dark);
}

/* was color:#fff op een lichte achtergrond (onzichtbaar) */
body.nuna-2026 #box-wrap a:hover {
    color: var(--nuna-orange-darker);
    text-decoration: underline;
}

body.nuna-2026 #online-support a {
    background-color: var(--nuna-orange-dark);
    min-height: var(--nuna-tap);
}

body.nuna-2026 #online-support a:hover {
    background-color: var(--nuna-orange-darker);
}

/* =============================================
   17. COOKIEBALK, SCROLL-TO-TOP, TOOLTIPS, HELPDESK
   ============================================= */

body.nuna-2026 #cookie {
    padding: var(--nuna-space-5);
    color: var(--nuna-text);
}

body.nuna-2026 :is(button.cookie-btn, a.cookie-btn-privacy) {
    min-height: var(--nuna-tap);
    background-color: var(--nuna-green-dark);
    border-radius: var(--nuna-radius-pill);
    font-weight: 600;
}

body.nuna-2026 :is(button.cookie-btn, a.cookie-btn-privacy):hover {
    background-color: var(--nuna-text);
}

body.nuna-2026 #gt-scroll {
    width: var(--nuna-tap);
    height: var(--nuna-tap);
    background-color: var(--nuna-green-dark);
    border-radius: 50%;
    opacity: 1;
}

body.nuna-2026 .tooltip-inner {
    background-color: var(--nuna-text);
}

body.nuna-2026 #hdp-container .btn-group button {
    background-color: var(--nuna-orange-dark);    /* was #faa71b met wit (2,0:1) */
}

body.nuna-2026 #hdp-container .btn-group button:hover {
    background-color: var(--nuna-orange-darker);
}

/* =============================================
   18. TABLET EN GROTER (≥ 600px)
   ============================================= */

@media (min-width: 600px) {
    body.nuna-2026 .nuna-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.nuna-2026 :is(.profile dt, #member-profile .control-label) {
        display: inline-block;
        width: 150px;
    }

    body.nuna-2026 :is(.profile dd, #member-profile .controls) {
        display: inline-block;
        width: calc(100% - 160px);
    }
}

/* =============================================
   19. DESKTOP (≥ 769px — gelijk aan het JS-omslagpunt)
   ============================================= */

@media (min-width: 769px) {
    body.nuna-2026 {
        --nuna-fs-body: 1.0625rem;
        --nuna-fs-h1:   2.25rem;
        --nuna-fs-h2:   1.625rem;
        --nuna-fs-h3:   1.25rem;
    }

    body.nuna-2026 .header-inner {
        flex-wrap: nowrap;
        gap: var(--nuna-space-5);
        padding: var(--nuna-space-4) 0;
    }

    body.nuna-2026 #logo img {
        max-height: 60px;
    }

    body.nuna-2026 .header-right {
        display: flex;
        flex: 0 1 auto;
        width: auto;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: var(--nuna-space-3);
    }

    body.nuna-2026 #search-wrap {
        order: 0;
        flex: 0 1 280px;
        width: auto;
    }

    body.nuna-2026 #search-wrap form,
    body.nuna-2026 #search-wrap :is(.input-group, .mod-finder__search) {
        width: auto;
    }

    body.nuna-2026 .nuna-login-btn,
    body.nuna-2026 #user-menu {
        order: 1;
    }

    body.nuna-2026 #main-row {
        gap: var(--nuna-space-6);
    }

    body.nuna-2026 .sidebar {
        flex-basis: 260px;
        width: 260px;
    }
}

@media (min-width: 900px) {
    body.nuna-2026 .nuna-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =============================================
   20. MINDER BEWEGING
   ============================================= */

@media (prefers-reduced-motion: reduce) {
    body.nuna-2026 :is(#header-nav-mob, #mobile-menu-icon .hamburger-bar, #gtsnav a, .nuna-modal *) {
        transition: none !important;
    }
}