/*
 * Nuna Joomla 6 Template — template.css
 * Gebaseerd op de visuele stijl van de oude Nuna Joomla 3 template.
 * Herschreven voor Joomla 6.1 / PHP 8.3.
 */

/* =============================================
   1. CSS CUSTOM PROPERTIES (KLEURENPALET)
   ============================================= */

:root {
    --color-primary:      #f15b2b;   /* Oranje — hoofdkleur, knoppen, links hover */
    --color-hover:        #faa71b;   /* Geel-oranje — hover state */
    --color-green:        #43b85f;   /* Groen — accent */
    --color-text:         #7a7a7a;   /* Grijs — standaard tekst */
    --color-text-light:   #b2b3b6;   /* Lichtgrijs — subtekst */
    --color-bg-light:     #f5f4f4;   /* Lichte achtergrond — footer, modules */
    --color-bg-white:     #ffffff;
    --color-border:       #e2e2e2;   /* Randkleur */
    --color-border-dark:  #b3b3b3;

    --font-stack:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
                          Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
    /* Optioneel: vervang bovenstaande door Roboto als je die lokaal host:
       --font-stack: 'Roboto', sans-serif; */

    --container-max:      880px;
    --container-pad:      2%;

    --sidebar-width:      220px;
    --gap:                24px;
}

/* =============================================
   2. RESET & BASIS
   ============================================= */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    overflow-y: scroll;
    font-size: 100%;
}

body {
    font-family: var(--font-stack);
    font-size: 0.875rem;       /* 14px */
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg-white);
    text-align: left;
}

img {
    max-width: 100%;
    height: auto;
    border: none;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover, a:focus {
    color: var(--color-hover);
    text-decoration: none;
}

p   { margin: 0.5rem 0 0.75rem; line-height: 1.65; }
hr  { border: none; border-top: 1px solid var(--color-border); margin: 0.75rem 0; }
em, i   { font-style: italic; }
strong, b { font-weight: 700; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-stack);
    color: var(--color-text);
    line-height: 1.2;
}

h1 { font-size: 1.5rem;   font-weight: 400; margin-bottom: 0.75rem; }
h2 { font-size: 1.25rem;  font-weight: 400; margin-bottom: 0.625rem; }
h3 { font-size: 1rem;     font-weight: 400; margin-bottom: 0.375rem; }
h4 { font-size: 0.875rem; font-weight: 600; }
h5 { font-size: 0.875rem; font-weight: 300; }
h6 { font-size: 0.8125rem; font-weight: 600; }

h1 a, h2 a, h3 a { color: var(--color-text); }
h1 a:hover, h2 a:hover, h3 a:hover { color: var(--color-primary); }

ul, ol {
    padding-left: 1.875rem;
    margin: 0.375rem 0;
    list-style-position: outside;
}

blockquote {
    display: block;
    background: var(--color-bg-white);
    padding: 0.9375rem 1.25rem 0.9375rem 2.8125rem;
    margin: 0 0 1.25rem;
    position: relative;
    font-family: Georgia, serif;
    font-size: 1rem;
    line-height: 1.4;
    color: #666;
    text-align: justify;
    border-left: 0.9375rem solid var(--color-green);
    border-right: 2px solid var(--color-green);
    box-shadow: 2px 2px 15px #ccc;
}

blockquote::before {
    content: "\201C";
    font-family: Georgia, serif;
    font-size: 3.75rem;
    font-weight: bold;
    color: #999;
    position: absolute;
    left: 0.625rem;
    top: 0.3125rem;
}

blockquote::after { content: ""; }
blockquote a { background: #eee; padding: 0 0.1875rem; color: #c76c0c; }
blockquote em { font-style: italic; }

/* =============================================
   3. LAYOUT WRAPPER EN CONTAINER
   ============================================= */

#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container-inner {
    width: 96%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
}

/* =============================================
   4. HEADER
   ============================================= */

#header-wrap {
    background-color: var(--color-bg-white);
    width: 100%;
}

#header {
    padding: 0;
}

/* TopNav (position-13) — smalle balk boven het logo */
#topnav-wrap {
    background-color: var(--color-bg-white);
    border-bottom: 1px solid var(--color-border);
    width: 100%;
}

#topnav {
    font-size: 0.8125rem;
    display: flex;
    justify-content: flex-end;
    padding: 0.25rem 0;
}

#topnav a {
    color: var(--color-text);
    text-transform: uppercase;
    padding: 0 0.75rem;
    border-left: 1px solid #525252;
}

#topnav a:first-child { border-left: none; }
#topnav a:hover, #topnav li.active a { color: var(--color-primary); }

/* Header inner: logo links, search rechts */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 0 0.875rem;
    gap: var(--gap);
}

#logo {
    flex: 0 0 auto;
}

#logo a {
    display: block;
    text-decoration: none;
    color: var(--color-primary);
}

#logo img {
    max-height: 80px;
    width: auto;
}

.site-title {
    display: block;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-primary);
}

.site-description {
    display: block;
    font-size: 0.7rem;
    color: var(--color-text-light);
}

.header-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* User-menu (inline in header-right, naast zoekveld) */
#user-menu {
    display: flex;
    align-items: center;
    font-size: 0.8125rem;
    margin-right: 0.75rem;
    padding-right: 0.75rem;
    border-right: 1px solid var(--color-border-dark);
}
#user-menu a { color: var(--color-text); }
#user-menu a:hover { color: var(--color-primary); }

#search-wrap { display: flex; align-items: center; }

/* Zoekbalk stijl */
#search-wrap input[type="search"],
#search-wrap input[type="text"],
#mod-search-searchword,
#filter-search {
    padding: 0.3125rem 0.75rem;
    border: 2px solid var(--color-border-dark);
    border-radius: 0.75rem;
    outline: none;
    font-size: 0.875rem;
}

#search-wrap label { display: none; }

/* =============================================
   5. NAVIGATIE — DESKTOP (#gtsnav) EN MOBIEL (#header-nav-mob)
   ============================================= */

/* ── Desktop navigatiebalk ── */
.header-navigation {
    background-color: var(--color-primary);
    width: 100%;
}

.header-nav-desktop {
    /* nav wrapper — geen extra stijl nodig */
}

#gtsnav {
    position: relative;
}

/* Root UL — font-size: 0 verwijdert inline-block witruimte */
#gtsnav > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0;
}

/* Root items inline naast elkaar */
#gtsnav > ul > li {
    display: inline-block;
    position: relative;
    vertical-align: top;
    font-size: 0.8125rem;
}

/* Root links */
#gtsnav > ul > li > a {
    display: block;
    padding: 0.6875rem 1rem;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

/* Hover, keyboard focus, actief item */
#gtsnav > ul > li:hover > a,
#gtsnav > ul > li:focus-within > a,
#gtsnav > ul > li.active > a,
#gtsnav > ul > li.current > a,
#gtsnav > ul > li.current-menu-item > a,
#gtsnav > ul > li.current-path > a {
    background-color: var(--color-hover);
}

/* ── Pijltje bij items met children (sub_menu_icon) ── */
#gtsnav .sub_menu_icon {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid rgba(255,255,255,0.75);
    margin-left: 5px;
    vertical-align: middle;
    pointer-events: none;
    position: relative;
    top: -1px;
}

#gtsnav .sub_menu_icon span { display: none; }

/* ── Dropdown submenu's — 2e niveau ── */
#gtsnav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background-color: var(--color-primary);
    z-index: 500;
    list-style: none;
    padding: 0;
    margin: 0;
    box-shadow: 2px 3px 8px rgba(0,0,0,0.25);
}

/* Tonen bij hover en keyboard (focus-within voor toegankelijkheid) */
#gtsnav li:hover > ul,
#gtsnav li:focus-within > ul {
    display: block;
}

#gtsnav ul ul li {
    display: block;
    position: relative;
}

#gtsnav ul ul li a {
    display: block;
    padding: 0.5625rem 0.9375rem;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 400;
    text-decoration: none;
    border-top: 1px dotted rgba(255,255,255,0.25);
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

#gtsnav ul ul li:hover > a,
#gtsnav ul ul li.active > a,
#gtsnav ul ul li.current > a,
#gtsnav ul ul li.current-menu-item > a {
    background-color: var(--color-hover);
}

/* 3e niveau: naast het 2e niveau */
#gtsnav ul ul ul {
    top: 0;
    left: 100%;
}

/* ── Mobiele menuknop (in header-right, verborgen op desktop) ── */
.mobile-menu-button {
    display: none;
}

#mobile-menu-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.375rem;
    background: none;
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    cursor: pointer;
}

#mobile-menu-icon .hamburger-bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Hamburger → X animatie via aria-expanded */
#mobile-menu-icon[aria-expanded="true"] .hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
#mobile-menu-icon[aria-expanded="true"] .hamburger-bar:nth-child(2) {
    opacity: 0;
}
#mobile-menu-icon[aria-expanded="true"] .hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Off-canvas mobiel menu ── */
#header-nav-mob {
    position: fixed;
    top: 0;
    left: 100vw;
    width: 100%;
    height: 100%;
    background-color: var(--color-primary);
    z-index: 1000;
    overflow-y: auto;
    transition: left 0.3s ease;
    padding-top: 3.5rem;
}

#header-nav-mob.active {
    left: 0;
}

/* Sluitknop binnen off-canvas nav */
#mobile-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: color 0.15s ease;
}

#mobile-close:hover,
#mobile-close:focus {
    color: var(--color-hover);
    outline: 2px solid rgba(255,255,255,0.5);
    outline-offset: 2px;
}

/* Mobiele menulijst */
#header-nav-mob ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#header-nav-mob > ul > li {
    display: block;
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.15);
}

#header-nav-mob li a {
    display: block;
    padding: 0.75rem 3.5rem 0.75rem 1rem;
    color: #fff;
    text-decoration: none;
    font-size: 0.9375rem;
    transition: background-color 0.15s ease;
}

#header-nav-mob li a:hover,
#header-nav-mob li.active > a,
#header-nav-mob li.current > a,
#header-nav-mob li.current-menu-item > a {
    background-color: var(--color-hover);
}

/* Sub-menus mobiel: standaard dicht */
#header-nav-mob ul ul {
    display: none;
    background-color: rgba(0,0,0,0.12);
    list-style: none;
    padding: 0;
    margin: 0;
}

/* .open class via JS: opent submenu */
#header-nav-mob li.open > ul {
    display: block;
}

#header-nav-mob ul ul li a {
    padding-left: 2rem;
    font-size: 0.875rem;
}

/* sub_menu_icon op mobiel: klikbare pijl rechtsnaast de link */
#header-nav-mob .sub_menu_icon {
    position: absolute;
    right: 0;
    top: 0;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(0,0,0,0.12);
    border-left: 1px solid rgba(255,255,255,0.12);
}

#header-nav-mob .sub_menu_icon span {
    display: block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid rgba(255,255,255,0.9);
    transition: transform 0.2s ease;
}

#header-nav-mob .sub_menu_icon.rotate span {
    transform: rotate(180deg);
}

/* =============================================
   6. CONTENT WRAPPER & 3-KOLOM LAYOUT
   ============================================= */

#content-wrap {
    flex: 1;
    background-color: var(--color-bg-white);
    width: 100%;
    padding-bottom: 1.875rem;
    border-bottom: 1px solid var(--color-border);
}

#content-inner {
    padding-top: 1rem;
}

/* Breadcrumbs (position-2 — Joomla mod_breadcrumbs) */
#breadcrumbs {
    font-size: 0.85rem;
    padding: 0.625rem 0 0.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

/* Joomla 6 breadcrumbs: nav wrapper en module-wrapper */
#breadcrumbs nav,
#breadcrumbs .mod-breadcrumbs,
#breadcrumbs .mod-breadcrumbs__wrapper {
    display: block;
}

/* ol.breadcrumb (Bootstrap-stijl — Joomla 4/5/6 standaard output) */
#breadcrumbs ol.breadcrumb,
#breadcrumbs ul.breadcrumb {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#breadcrumbs ol.breadcrumb li,
#breadcrumbs ul.breadcrumb li,
#breadcrumbs .breadcrumb-item {
    display: flex;
    align-items: center;
    list-style: none;
}

/* Separator tussen items via CSS — Joomla voegt dit niet altijd zelf toe */
#breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    padding: 0 0.35em;
    color: var(--color-text);
    opacity: 0.4;
}

/* Fallback: oudere pathway-stijl (Joomla 3-compat module output) */
#breadcrumbs .pathway {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25em;
}
#breadcrumbs .pathway .divider { opacity: 0.4; }

/* Links en actief item */
#breadcrumbs a { color: var(--color-text); text-decoration: none; }
#breadcrumbs a:hover { color: var(--color-primary); text-decoration: underline; }
#breadcrumbs .active,
#breadcrumbs .breadcrumb-item.active,
#breadcrumbs span:not(.divider) { color: var(--color-text); opacity: 0.75; }

/* Hero (position-12 / hero) */
#hero { margin-bottom: 1.125rem; }

/* Content-area-top (content-top positie — boven component-output) */
#content-area-top { margin-bottom: 0.75rem; }

/* Content-bottom (position-3 / content-bottom — volledige breedte onder main-row) */
#content-bottom {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

/* Flexbox row: sidebars + main */
#main-row {
    display: flex;
    align-items: flex-start;
    gap: var(--gap);
    padding-top: 1.25rem;
}

#content-main {
    flex: 1 1 0;
    min-width: 0;
}

.sidebar {
    flex: 0 0 var(--sidebar-width);
    width: var(--sidebar-width);
    min-width: 0;
}

/* Sidebar module stijlen */
.sidebar .moduletable {
    background-color: var(--color-bg-light);
    padding: 0.625rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

.sidebar .moduletable h3 {
    font-family: var(--font-stack);
    font-weight: 500;
    color: var(--color-primary);
    font-size: 1rem;
    margin-bottom: 0.375rem;
}

.sidebar ul.menu { list-style: none; padding: 0; }
.sidebar ul.menu li {
    border-bottom: 1px solid var(--color-border);
    padding: 0.125rem 0.5rem;
}
.sidebar ul.menu li a { color: var(--color-text); }
.sidebar ul.menu li a:hover { color: var(--color-primary); }
.sidebar ul.menu li.current a { font-weight: bold; }

/* =============================================
   7. CONTENT — ARTIKELEN
   ============================================= */

#content-main h1 { margin-top: 0; }
#content-main h3 { margin-top: 1.25rem; }

.article-info-term { display: none; }
dl.article-info {
    clear: both;
    font-size: 0.8125rem;
    line-height: 1.4;
    margin-bottom: 0.375rem;
    color: var(--color-text-light);
}
.article-info dd { margin: 0; display: inline; }
.article-info dd::after { content: " · "; }
.article-info dd:last-child::after { content: ""; }

ul.actions {
    list-style: none;
    padding: 0;
    margin: 0 0 0.25rem;
    text-align: right;
}
li.print-icon, li.email-icon, li.edit-icon { display: inline; margin-right: 0.125rem; }

.readmore a { font-weight: 700; }

.image-left  { float: left;  margin: 0 0.625rem 0.25rem 0; }
.image-right { float: right; margin: 0 0 0.25rem 0.625rem; }

/* Blog layout */
.items-leading { margin-bottom: 1.25rem; }
.item-separator { border-top: 1px solid var(--color-border); margin: 1rem 0; }

.blog-more { padding: 0.625rem 0.3125rem; }
.items-row { overflow: hidden; margin-bottom: 0.625rem; }

/* Paginering */
ul.pagenav {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0.25rem;
    overflow: hidden;
}

li.pagenav-prev a, li.pagenav-next a,
li.previous a, li.next a {
    display: inline-block;
    font-size: 0.8125rem;
    color: var(--color-bg-white);
    background-color: var(--color-primary);
    border: none;
    padding: 0.25rem 0.75rem;
    border-radius: 3px;
    text-decoration: none;
}

li.pagenav-prev a:hover, li.pagenav-next a:hover,
li.previous a:hover, li.next a:hover {
    background-color: var(--color-hover);
}

li.pagenav-prev, li.previous { float: left; }
li.pagenav-next, li.next     { float: right; }

.pagination { overflow: hidden; }
.pagination ul { list-style: none; padding: 0; margin: 0; }
.pagination ul li { display: inline; }
.pagination ul li span, .pagination ul li a { padding: 0 0.375rem; margin-right: 0.375rem; }

/* System messages */
#system-message { padding: 0; margin: 0 0 1rem; }
#system-message-container div.alert {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}
div.alert-success { background-color: #dff0d8; color: #3c763d; border: 1px solid #d6e9c6; }
div.alert-warning { background-color: #fcf8e3; color: #8a6d3b; border: 1px solid #faebcc; }
div.alert-danger, div.alert-error { background-color: #f2dede; color: #a94442; border: 1px solid #ebccd1; }
div.alert-info { background-color: #d9edf7; color: #31708f; border: 1px solid #bce8f1; }

/* Tabellen */
table { border-collapse: collapse; width: 100%; margin-bottom: 1rem; }
td, th { border: 1px solid var(--color-border); padding: 0.4375rem; vertical-align: top; }
th { background-color: var(--color-text); color: var(--color-bg-white); text-align: left; }
th a { color: var(--color-bg-white); }
th a:hover { color: var(--color-primary); }
tr.odd  { background-color: #f2f2f2; }
tr.even { background-color: var(--color-bg-white); }
td p { margin: 0; line-height: 1.4; }

/* Knoppen */
.btn-primary,
input[type="submit"],
button[type="submit"],
input.button,
button.validate {
    display: inline-block;
    font-family: var(--font-stack);
    font-size: 0.84375rem;
    font-weight: 400;
    color: var(--color-bg-white);
    background-color: var(--color-primary);
    border: none;
    padding: 0.375rem 0.9375rem;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.btn-primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
input.button:hover,
button.validate:hover {
    background-color: var(--color-hover);
    color: var(--color-bg-white);
}

a.buttongroen {
    display: inline-block;
    width: 8.75rem;
    line-height: 2.1875rem;
    font-size: 1rem;
    color: var(--color-bg-white);
    background-color: var(--color-green);
    border-radius: 8px;
    text-align: center;
    margin: 1.25rem 0 0;
}
a.buttongroen:hover { background-color: var(--color-primary); }

/* Formulieren */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea,
select {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    outline: none;
    font-family: var(--font-stack);
    font-size: 0.875rem;
    width: 100%;
    max-width: 18.75rem;
}

input[type="checkbox"],
input[type="radio"] { width: auto; max-width: none; }

/* Toegankelijkheid: zichtbare focus voor toetsenbordgebruikers.
   outline:none staat op de velden hierboven; :focus-visible geeft
   de indicator terug zonder muis-ring te tonen. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

label { display: block; margin-bottom: 0.25rem; }
fieldset { border: none; }

/* Login */
#login-form fieldset.userdata { border: none; }
#login-form ul { list-style: none; padding: 0; }
#login-form ul li { line-height: 1.2; margin-bottom: 0.5rem; }

/* Contact */
#contact-form fieldset { border: none; }
h3.pane-toggler, h3.pane-toggler-down {
    font-size: 1.0625rem;
    border-top: 1px solid var(--color-border);
    margin-bottom: 0.125rem;
    padding: 0.5rem 0;
}
address span { display: block; font-style: normal; }
.star { color: #cc0000; }

/* Zoekresultaten */
.searchintro { font-weight: normal; margin: 1.25rem 0; }
dl.search-results dt.result-title {
    border-top: 1px solid var(--color-border);
    padding-top: 0.625rem;
    font-weight: bold;
}
dl.search-results dd.result-created {
    padding: 0.375rem 0 0.625rem;
    color: #aaa;
}
.highlight { font-weight: bold; }

/* Module: mod_articles_latest */
ul.latestnews {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.latestnews li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}
ul.latestnews li:last-child { border-bottom: none; }
h3.latesttitle {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 0.25rem;
}
h3.latesttitle::before { content: "– "; }
a.leer {
    display: inline-block;
    margin-top: 0.25rem;
    font-weight: 600;
    color: var(--color-primary);
}

.moduletable {
    overflow: hidden;
    margin-bottom: 1rem;
    color: var(--color-text);
    background-color: var(--color-bg-light);
    padding: 0.625rem;
}

.moduletable h3 {
    font-weight: 500;
    color: var(--color-primary);
    font-size: 1rem;
    margin-bottom: 0.375rem;
}

/* =============================================
   8. ONLINE SUPPORT (position-16)
   ============================================= */

#online-support {
    display: block;
    clear: both;
    width: 96%;
    max-width: var(--container-max);
    margin: 0 auto;
    text-align: right;
}

#online-support a {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-bg-white);
    padding: 0.4rem 1.2rem;
    border-radius: 0.625rem 0.625rem 0 0;
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 2.1875rem;
}

#online-support a:hover { background-color: var(--color-hover); }

/* =============================================
   9. FOOTER
   ============================================= */

#footer-wrap {
    background-color: var(--color-bg-light);
    padding-bottom: 1.25rem;
    width: 100%;
}

#footer {
    padding-top: 1.625rem;
    color: var(--color-text-light);
    font-size: 0.8125rem;
}

#footer .custom {
    display: inline-block;
    width: 49.5%;
    box-sizing: border-box;
    padding-right: 0.625rem;
    vertical-align: top;
}

#footer .custom:last-child {
    border-left: 1px solid var(--color-border-dark);
    padding-left: 1.875rem;
    padding-right: 0;
}

#footer div.custom hr {
    border-color: var(--color-border);
}

h2.koprood {
    color: var(--color-primary);
    font-size: 1.75rem;
    line-height: 2.25rem;
    margin-bottom: 1.5625rem;
    font-weight: 500;
}

h2.footercont {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0;
    letter-spacing: 0.0625rem;
    color: var(--color-primary);
    padding-left: 1.6875rem;
}

/* Contact blok in footer */
.contactbl, .contactbr {
    display: inline-block;
    width: 49.5%;
    vertical-align: top;
}
.contactbr { padding-left: 1.875rem; }
.contactbl { padding-right: 0.9375rem; }

/* Footer navigatie */
#footer ul.nav {
    width: 49.5%;
    display: inline-block;
    list-style: none;
    padding: 0;
    font-size: 1rem;
    vertical-align: top;
    box-sizing: border-box;
}

#footer li.parent ul.nav-child {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* =============================================
   10. BOX / BANNER / LINKS (position-9/10/11)
   ============================================= */

#box-wrap {
    background-color: var(--color-bg-light);
    overflow: hidden;
    width: 100%;
    padding: 1rem 0;
}

#box-inner {}

.box-grid {
    display: flex;
    gap: var(--gap);
    align-items: flex-start;
}

.box-cell {
    flex: 1 1 0;
    min-width: 0;
}

#box-wrap h1, #box-wrap h2, #box-wrap h3 { color: #969696; }
#box-wrap a:hover { color: var(--color-bg-white); }

/* =============================================
   11. ERROR & OFFLINE PAGINA'S
   ============================================= */

#error-wrap, #offline-wrap {
    max-width: 40rem;
    margin: 5rem auto;
    text-align: center;
    padding: 2rem;
}

.error-code {
    font-size: 6rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.error-title {
    font-size: 1.5rem;
    margin: 1rem 0;
    color: var(--color-text);
}

.error-message { color: var(--color-text-light); margin-bottom: 1.5rem; }

#offline-login {
    max-width: 22rem;
    margin: 1.5rem auto 0;
    text-align: left;
}

#offline-login fieldset { border: none; }
#offline-login label { margin-top: 0.75rem; }
#offline-login button { margin-top: 1rem; }

/* =============================================
   12. PRINT VENSTER / MAILTO
   ============================================= */

body.contentpane { background-color: var(--color-bg-white); }
#main { padding: 0.625rem; }

/* =============================================
   13. RESPONSIVE — TABLET (max 900px)
   ============================================= */

@media screen and (max-width: 900px) {
    :root {
        --sidebar-width: 180px;
        --gap: 16px;
    }
}

/* =============================================
   14. RESPONSIVE — MOBIEL (max 768px)
   ============================================= */

@media screen and (max-width: 768px) {

    /* Mobiele menuknop tonen, desktop nav verbergen */
    .mobile-menu-button { display: flex; align-items: center; }
    .header-navigation  { display: none; }

    /* 3-kolom → 1-kolom */
    #main-row {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        flex: none;
    }

    /* Volgorde: content → sidebar-left → sidebar-right */
    #content-main   { order: 1; }
    #sidebar-left   { order: 2; }
    #sidebar-right  { order: 3; }

    /* Header stacking */
    .header-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem 0 0.5rem;
    }

    .header-right {
        width: 100%;
        justify-content: flex-end;
    }

    /* Box grid */
    .box-grid {
        flex-direction: column;
    }

    /* Footer kolommen */
    #footer .custom {
        display: block;
        width: 100%;
    }

    #footer .custom:first-child {
        border-right: none;
        border-bottom: 1px solid var(--color-border-dark);
        margin-bottom: 0.9375rem;
    }

    #footer .custom:last-child {
        border-left: none;
        padding-left: 0;
    }

    #footer ul.nav {
        width: 100%;
        display: block;
    }

    .contactbl, .contactbr {
        display: block;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }
}

/* =============================================
   15. POPUP LOGIN MODAL
   ============================================= */

/* ── Inlogknop in header ── */
.nuna-login-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.3125rem 0.875rem;
    font-family: var(--font-stack);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-bg-white);
    background-color: var(--color-primary);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.nuna-login-btn:hover,
.nuna-login-btn:focus {
    background-color: var(--color-hover);
    color: var(--color-bg-white);
    text-decoration: none;
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ── Overlay (Bootstrap backdrop EN fallback) ── */
.modal-backdrop,
.nuna-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.55);
    z-index: 1040;
}

.nuna-modal-overlay { display: none; }

/* ── Modal container ── */
.modal.nuna-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

/* Bootstrap voegt .show toe; fallback voegt .nuna-open toe */
.modal.nuna-modal.show,
.modal.nuna-modal.nuna-open {
    display: block;
}

/* ── Dialog ── */
.nuna-modal-dialog {
    position: relative;
    width: 92%;
    max-width: 420px;
    margin: 3rem auto;
    pointer-events: none;
}

/* Verticale centrering */
@media (min-height: 500px) {
    .modal.nuna-modal::before {
        display: block;
        height: max(1rem, calc(50vh - 240px));
        content: "";
    }
    .nuna-modal-dialog { margin-top: 0; margin-bottom: 0; }
}

/* ── Content box ── */
.nuna-modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    outline: 0;
}

/* ── Header ── */
.nuna-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.nuna-modal-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--color-primary);
    line-height: 1.2;
}

/* ── Sluitknop ── */
.nuna-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.875rem;
    height: 1.875rem;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-text);
    background: none;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.nuna-modal-close:hover,
.nuna-modal-close:focus {
    opacity: 1;
    color: var(--color-primary);
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* ── Body ── */
.nuna-modal-body {
    padding: 1.25rem;
    flex: 1;
}

/* Scroll-lock (Bootstrap voegt dit ook toe aan body) */
body.modal-open { overflow: hidden; }

/* ── mod_login styling binnen modal ── */
.nuna-modal-body .login-fields label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: var(--color-text);
}

.nuna-modal-body .login-fields input[type="text"],
.nuna-modal-body .login-fields input[type="password"],
.nuna-modal-body .login-fields input[type="email"] {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0.875rem;
}

.nuna-modal-body .login-fields .checkbox {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    margin-bottom: 0.875rem;
}

.nuna-modal-body .login-fields input[type="checkbox"] {
    width: auto;
    max-width: none;
    flex-shrink: 0;
    margin: 0;
}

.nuna-modal-body input[type="submit"],
.nuna-modal-body button[type="submit"] {
    width: 100%;
    max-width: 100%;
    padding: 0.5rem 1rem;
    font-size: 0.9375rem;
    margin-top: 0.25rem;
}

/* Links: wachtwoord vergeten / registreren */
.nuna-modal-body .login-links {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.8125rem;
    text-align: center;
}

.nuna-modal-body .login-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 0.75rem;
}

.nuna-modal-body .login-links ul li {
    border: none;
    padding: 0;
}

.nuna-modal-body .login-links a {
    color: var(--color-primary);
    text-decoration: none;
}

.nuna-modal-body .login-links a:hover {
    color: var(--color-hover);
    text-decoration: underline;
}

/* Joomla alert bij login-fout */
.nuna-modal-body .alert {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 3px;
    font-size: 0.875rem;
}

.nuna-modal-body .alert-error,
.nuna-modal-body .alert-danger {
    background-color: #f2dede;
    color: #a94442;
    border: 1px solid #ebccd1;
}

/* =============================================
   16. RESPONSIVE — KLEIN MOBIEL (max 480px)
   ============================================= */

@media screen and (max-width: 480px) {

    h1 { font-size: 1.25rem; }
    h2 { font-size: 1.1rem; }

    #search-wrap {
        display: block;
        width: 100%;
    }

    #search-wrap input[type="search"],
    #search-wrap input[type="text"] {
        width: 100%;
        max-width: none;
    }

    /* Modal volledig scherm op klein mobiel */
    .nuna-modal-dialog {
        width: 96%;
        margin: 0.75rem auto;
    }
}

/* =============================================
   17. TOP-HEADER CONTACT / SOCIAL LINKS (position-13)
   v0.2.0: de oorspronkelijke regels (v0.1.30) en de latere
   "FORCE FIX" (v0.1.32) samengevoegd tot één blok met exact
   dezelfde berekende waarden. De !important-vlaggen van de
   force-fix zijn behouden (module-CSS kan erop rekenen).
   ============================================= */

#top-header-sidebar {
    display: block !important;
    width: 100% !important;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 10px 0 2px;
    background: #fff !important;
    text-align: left !important;
}

#top-header-sidebar .container-inner {
    width: 96% !important;
    max-width: var(--container-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
}

#top-header-sidebar .moduletable,
#top-header-sidebar .custom,
#top-header-sidebar .mod-custom {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    text-align: left !important;
}

#top-header-sidebar p {
    margin: 10px 0 6px !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: left !important;
}

#top-header-sidebar a.top-header-item {
    display: inline-block !important;
    align-items: center;
    vertical-align: top !important;
    margin-right: 15px !important;
    color: var(--color-primary) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

/* FontAwesome v4 — lokaal gebundeld, font-family: "FontAwesome" */
#top-header-sidebar a.top-header-item::before {
    display: inline-block !important;
    font-family: "FontAwesome" !important;
    font-size: 135% !important;
    color: var(--color-primary) !important;
    line-height: 1 !important;
}

#top-header-sidebar a.top-header-item.nuna-phone::before {
    content: "\f095" !important;
    margin-right: 4px !important;
    vertical-align: bottom !important;
}

#top-header-sidebar a.top-header-item.nuna-facebook::before {
    content: "\f09a" !important;
    margin-right: 0 !important;
}

#top-header-sidebar a.top-header-item.nuna-instagram::before {
    content: "\f16d" !important;
    margin-right: 0 !important;
}

#top-header-sidebar a.nuna-facebook,
#top-header-sidebar a.nuna-instagram {
    min-width: 14px;
    overflow: visible;
}

/* =============================================
   18. STICKY HEADER / INGELOGDE GEBRUIKER
   ============================================= */

body.sticky #header-wrap {
    position: fixed;
    width: 100%;
    top: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 999;
}

body.loggedin nav #gtsnav ul.nuna-menu,
body.loggedin #header-nav-mob ul.nuna-menu {
    display: none;
}

/* =============================================
   19. VOLLE BREEDTE BLOK
   ============================================= */

.full-width {
    display: block;
    width: 100vw;
    margin-left: -15px;
}

#home-image img {
    display: block;
}

@media screen and (min-width: 1130px) {
    .full-width {
        margin-left: calc((100vw - 1100px) * -0.5);
    }
}

@media screen and (max-width: 1130px) {
    .full-width {
        width: calc(100% + 30px);
    }
}

/* =============================================
   20. HOMEPAGE SECTIES
   ============================================= */

#nuna-service {
    background-image: linear-gradient(to bottom, var(--color-primary), var(--color-green));
    padding: 50px 0;
}

.section-title h2 {
    color: #fff;
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
}

.block-offer {
    width: 50%;
    display: table-cell;
    vertical-align: top;
    padding: 0 15px 0 0;
    position: relative;
}

.block-offer:nth-child(odd) {
    padding: 0 0 0 15px;
}

.block-offer::before {
    content: '';
    width: calc(100% - 15px);
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    background-color: #fff;
    border-radius: 15px;
    z-index: 0;
}

.block-offer:nth-child(odd)::before {
    left: auto;
    right: 0;
}

.block-offer-inner {
    display: block;
    padding: 15px;
    position: relative;
    z-index: 2;
}

.block-offer .offer-image {
    display: inline-block;
    vertical-align: top;
    width: 40%;
    margin-right: 10px;
    border-radius: 10px;
    overflow: hidden;
}

.block-offer .offer-image img {
    object-fit: cover;
    display: block;
}

.block-offer .offer-text {
    display: inline-block;
    vertical-align: top;
    width: calc(60% - 15px);
}

.block-offer h3 {
    margin: 0 0 15px;
    font-size: 22px;
}

a.nuna-button {
    background-color: var(--color-primary);
    display: inline-block;
    color: #fff;
    padding: 6px 12px;
    border-radius: 5px;
    font-weight: 600;
}

a.nuna-button:hover {
    background-color: var(--color-hover);
    color: #fff;
}

#nuna-about {
    padding: 25px 0;
    background-color: var(--color-green);
}

#nuna-about .container-inner {
    background-color: #fff;
    padding: 25px;
    border-radius: 25px;
}

#nuna-about .section-title h2 {
    color: #444;
    margin: 15px 0 25px;
}

#nuna-gordon {
    padding: 50px 0;
    background-image: linear-gradient(to bottom, var(--color-green), var(--color-primary));
}

.gordon-block {
    display: table-cell;
    vertical-align: top;
    width: 50%;
}

.gordon-block.gordon-text {
    padding: 0 15px 0 0;
}

.gordon-block-inner {
    padding: 15px;
    background-color: #fff;
    border-radius: 15px;
}

.gordon-block h3 {
    margin: 0 0 15px;
}

.gordon-block.gordon-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 15px;
    border: 5px solid #fff;
}

.gordon-block.gordon-image img {
    display: none;
}

#nuna-team {
    position: relative;
    margin-bottom: -20px;
}

#nuna-team img {
    display: block;
}

#nuna-team .floating {
    display: block;
    position: absolute;
    left: 20px;
    bottom: 0;
    width: 35%;
    max-width: 300px;
}

/* =============================================
   21. SCROLL-TO-TOP KNOP
   ============================================= */

#gt-scroll {
    display: none;
    position: fixed;
    background-color: var(--color-green);
    right: 15px;
    bottom: 15px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    opacity: 0.8;
    border-radius: 5px;
    z-index: 99;
}

#gt-scroll span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -12px;
    height: 0;
    width: 0;
    border: 8px solid transparent;
    border-bottom-color: #fff;
}

#gt-scroll:hover {
    opacity: 1;
}

/* =============================================
   22. COOKIE BALK
   ============================================= */

#cookie {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-hover);
    color: #000;
    margin: 0;
    padding: 30px;
    z-index: 9999;
}

.cookie-btns {
    display: inline-block;
    vertical-align: top;
    width: 225px;
}

.cookie-txt {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 225px);
    padding-right: 25px;
}

button.cookie-btn,
a.cookie-btn-privacy {
    display: inline-block;
    vertical-align: top;
    border: none;
    text-decoration: none;
    background-color: var(--color-green);
    color: #fff;
    margin: 0;
    padding: 10px 15px;
    line-height: 1;
    border-radius: 4px;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
}

button.cookie-btn:hover,
a.cookie-btn-privacy:hover {
    background-color: var(--color-primary);
    color: #fff;
}

span.cookie-sep {
    display: inline-block;
    width: 25px;
}

/* =============================================
   23. FOOTER CREDITS NAVIGATIE
   ============================================= */

#credits {
    display: table;
    width: 100%;
    padding-top: 20px;
}

#credits .credit-box {
    display: inline-block;
    vertical-align: top;
    padding-right: 15px;
}

#credits .credit-box:last-child {
    padding-right: 0;
}

#credits.three-columns .credit-box { width: calc(33% - 2px); }
#credits.two-columns .credit-box   { width: calc(50% - 2px); }
#credits.one-column .credit-box    { width: 100%; }

#credits h3 { color: #969696; }
#credits span.sub_menu_icon { display: none; }
#credits ul ul { padding-left: 5px; }

#credits ul li {
    padding: 5px 0 5px 12px;
    list-style: none;
}

#credits ul li a {
    position: relative;
    color: var(--color-text);
}

#credits ul li a::before {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    position: absolute;
    left: -12px;
    top: calc(50% - 4px);
    border-width: 1px 1px 0 0;
    border-style: solid;
    border-color: var(--color-primary);
    transform: rotate(45deg);
}

#credits ul li a:hover { color: var(--color-green); }
#credits ul li a:hover::before { border-color: var(--color-green); }

/* =============================================
   24. GEBRUIKERSPROFIEL
   ============================================= */

ul.com-users-profile__edit li {
    list-style: none;
    padding-left: 0;
}

ul.com-users-profile__edit li a.btn {
    display: inline-block;
    line-height: 35px;
    font-size: 16px;
    color: #fff !important;
    background-color: var(--color-green);
    border-radius: 23px;
    text-align: center;
    margin: 0 15px 25px 0;
    padding: 5px 20px;
    font-weight: 500;
}

ul.com-users-profile__edit li a.btn:hover {
    background-color: var(--color-primary);
}

.profile fieldset,
#member-profile fieldset {
    border: 1px solid var(--color-primary);
    margin-bottom: 25px;
}

.profile legend,
#member-profile legend {
    color: var(--color-primary);
    padding: 0 10px;
    font-weight: 600;
    font-size: 16px;
}

.profile dt,
.profile dd,
#member-profile .control-label,
#member-profile .controls {
    display: inline-block;
    vertical-align: top;
}

.profile dt,
#member-profile .control-label {
    width: 150px;
    font-weight: 500;
}

.profile dd,
#member-profile .controls {
    width: calc(100% - 160px);
    margin: 0;
}

#member-profile .control-label,
#member-profile .controls {
    margin-bottom: 10px;
}

#member-profile input.form-control {
    padding: 4px 5px;
    border: 1px solid var(--color-text);
    border-radius: 3px;
    color: var(--color-text);
    font-size: 14px;
}

#member-profile button.input-password-toggle {
    color: #fff;
    border-radius: 3px;
    padding: 5px;
    background-color: var(--color-primary);
    border: none;
    cursor: pointer;
}

#member-profile button.input-password-toggle span.icon-eye::before {
    font-family: 'FontAwesome';
    content: "\f06e";
    font-size: 16px;
}

#member-profile button.input-password-toggle span.visually-hidden { display: none; }

/* =============================================
   25. TABEL-VARIANTEN / CONVERTFORMS / SORTPAGIBAR
   ============================================= */

table.weblinks,
table.category {
    margin: 10px 10px 20px 0;
    width: 100%;
}

table thead { background-color: var(--color-hover); }
table thead a { color: #333; font-weight: 600; }
tr.cat-list-row1,
.category tr.odd { background-color: #f2f2f2; }

article #content .convertforms { max-width: 100%; }

.convertforms form .cf-content-wrap,
.convertforms form .cf-form-wrap { padding: 20px 0; }

.convertforms form .cf-control-group { padding-top: 5px; }
.convertforms form .cf-control-group label.cf-label { margin-bottom: 0; }
.convertforms form .cf-control-group input.cf-input { padding: 5px; }

.sortPagiBar .span3,
.sortPagiBar .span9 {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}

.sortPagiBar .span9 { width: 74%; }

/* =============================================
   26. HDP HELPDESK PLUGIN
   ============================================= */

#hdp-container h1.hdp-page-title { font-size: 36px; font-weight: 600; }
#hdp-container a.hpd-add-new-ticket-link { font-size: 28px; }

#hdp-container fieldset.filters {
    border: none;
    padding: 0;
    margin-bottom: 20px;
}

#hdp-container .filter-search { display: inline-block; }

#hdp-container fieldset.filters #filter_search {
    padding: 5px;
    border-radius: 3px 0 0 3px;
    border: 1px solid #ccc;
    font-size: 18px;
}

#hdp-container .btn-group {
    display: inline-block;
    vertical-align: top;
    margin-left: -5px;
}

#hdp-container .btn-group:last-child {
    display: block;
    margin-top: 20px;
}

#hdp-container .btn-group button:last-child { display: none; }

#hdp-container .btn-group button {
    background-color: var(--color-hover);
    color: #fff;
    border: none;
    padding: 8px 12px 7px;
    border-radius: 0 3px 3px 0;
    cursor: pointer;
}

#hdp-container .btn-group button:hover { background-color: var(--color-primary); }

#hdp-container fieldset.filters select {
    display: inline-block;
    width: auto;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 7px 35px 7px 5px;
    font-size: 16px;
    margin-right: 15px;
}

#hdp-container tr:nth-child(odd) { background-color: #ccc; }

#hdp-container thead th {
    background-color: var(--color-hover);
    color: #000;
}

#hdp_ticket_attachments button.dz-button,
#hdp-container .btn-primary {
    background-color: var(--color-primary);
    border-color: transparent;
    padding: 8px 12px;
    border-radius: 0;
    font-weight: 500;
}

#hdp_ticket_attachments button.dz-button:hover,
#hdp-container .btn-primary:hover { background-color: var(--color-hover); }

#hdp-container .form-control-label { line-height: 38px; }
#hdp-container .form-actions { text-align: center; padding-left: 25%; }

@media screen and (max-width: 767px) {
    #hdp-container .form-actions { padding-left: 0; }
}

/* =============================================
   27. TOOLTIPS
   ============================================= */

body .tooltip-inner {
    position: relative;
    background-color: var(--color-primary);
    max-width: 150px;
    color: #fff;
    padding: 8px;
    text-align: center;
    border-radius: 5px;
}

body .bs-tooltip-top .tooltip-arrow::before,
body .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    border-top-color: var(--color-primary);
}

body .bs-tooltip-bottom .tooltip-arrow::before,
body .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    border-bottom-color: var(--color-primary);
}

body .bs-tooltip-start .tooltip-arrow::before,
body .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    border-left-color: var(--color-primary);
}

body .bs-tooltip-end .tooltip-arrow::before,
body .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
    border-right-color: var(--color-primary);
}

[role=tooltip]:not(.show) {
    right: 5em;
    z-index: 1070;
    display: none;
    max-width: 100%;
    padding: 0.5em;
    margin: 0.5em;
    color: black;
    background: white;
    border: 1px solid #6d757e;
    border-radius: 0.25rem;
    box-shadow: 0 0 0.5rem rgba(0,0,0,0.8);
}

[role=tooltip]:not(.show)[id^=editarticle-],
[role=tooltip]:not(.show)[id^=editcontact-] {
    right: auto;
    margin-inline-start: -10em;
}

:focus + [role=tooltip],
:hover + [role=tooltip] {
    position: absolute;
    display: block;
}

/* =============================================
   28. RESPONSIVE AANVULLINGEN (homepage + cookie)
   ============================================= */

@media screen and (max-width: 768px) {
    .block-offer .offer-image {
        display: block;
        width: 100%;
        margin-right: 0;
        border-radius: 0;
    }

    .block-offer .offer-image img {
        display: block;
        width: 100%;
        border-radius: 15px;
        margin-bottom: 20px;
    }

    .block-offer .offer-text {
        display: block;
        width: 100%;
    }

    .cookie-btns,
    .cookie-txt {
        display: block;
        width: 100%;
    }

    .cookie-btns { margin-top: 25px; }
}

@media screen and (max-width: 480px) {
    .block-offer {
        width: 100%;
        display: block;
        padding: 0;
        margin-bottom: 25px;
    }

    .block-offer:nth-child(odd) { padding: 0; margin-bottom: 0; }
    .block-offer::before { width: 100%; }

    .gordon-block {
        display: block;
        width: 100%;
    }

    .gordon-block.gordon-text {
        padding: 0;
        margin-bottom: 25px;
    }

    .gordon-block.gordon-image {
        background-image: none !important;
        border-radius: 0;
        border: none;
    }

    .gordon-block.gordon-image img {
        display: block;
        border-radius: 15px;
        border: 5px solid #fff;
    }

    #credits.three-columns .credit-box,
    #credits.two-columns .credit-box {
        width: 100%;
        margin-bottom: 20px;
        padding-right: 0;
    }
}

/* Artikellijst pedagogisch beleidsplan */
table.category {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
  background: transparent !important;
}

table.category tr {
  box-shadow: none !important;
  background: transparent !important;
}

table.category td,
table.category th {
  background-color: #f9f9f9 !important;
  color: #333 !important;
  border: 0 !important;
  border-bottom: 1px solid #e6e6e6 !important;
  padding: 13px 14px !important;
  font-size: 15px !important;
}

table.category th {
  background-color: transparent !important;
  color: #777 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

table.category a {
  color: #d94a1e !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

table.category tbody tr:hover td {
  background-color: #fff2ed !important;
}

/* Menu-items tonen zoals ingevoerd in Joomla */
.header-navigation .mod-menu a,
.header-nav-desktop .mod-menu a,
#gtsnav .mod-menu a,
#header-nav-mob .mod-menu a {
  text-transform: none !important;
}

/* Paginering artikellijst netjes tonen */
.com-content-category__pagination .pagination {
  display: flex !important;
  gap: 6px !important;
  list-style: none !important;
  padding-left: 0 !important;
  margin: 20px 0 !important;
}

.com-content-category__pagination .page-item {
  list-style: none !important;
  margin: 0 !important;
}

.com-content-category__pagination .page-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 6px 10px !important;
  border: 1px solid #e2e2e2 !important;
  background: #fff !important;
  color: #d94a1e !important;
  text-decoration: none !important;
  border-radius: 6px !important;
}

.com-content-category__pagination .active .page-link {
  background: #d94a1e !important;
  color: #fff !important;
  border-color: #d94a1e !important;
}

.com-content-category__pagination .disabled .page-link {
  color: #bbb !important;
  background: #f7f7f7 !important;
}

/* Paginering vorige/volgende leesbaar maken */
.com-content-category__pagination .icon-angle-double-left::before {
  content: "«";
}

.com-content-category__pagination .icon-angle-left::before {
  content: "‹";
}

.com-content-category__pagination .icon-angle-right::before {
  content: "›";
}

.com-content-category__pagination .icon-angle-double-right::before {
  content: "»";
}

/* Iets meer ruimte boven de paginering */
.com-content-category__navigation {
  margin-top: 22px !important;
}

/* Subcategorieën verbergen als er geen inhoud onder staat */
.cat-children {
  display: none !important;
}

/* Dropdown-pijltje zoals voorbeeld: één pijltje naast tekst
   (v0.2.0: pijl-opmaak alleen in de klassieke opmaak; Moderne opmaak
   tekent zijn eigen pijl in nuna-2026.css) */
.header-navigation .nav-item.has-sub > .sub_menu_icon {
  display: none !important;
}

body:not(.nuna-2026) .header-navigation .nav-item.has-sub > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body:not(.nuna-2026) .header-navigation .nav-item.has-sub > a::after {
  content: "" !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-right: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
  transform: rotate(45deg) translateY(-2px) !important;
  margin-left: 4px !important;
}