/*
 Theme Name:   Domyn Child DGO
 Template:     domyn-theme
 Description:  Child theme for Domyn used for client-specific customizations.
 Author:       DOMYN
 Version:      1.0.0
 Text Domain:  domyn-theme-child-dgo
*/

.dmn-page-hero-inner .rank-math-breadcrumb {
    margin-top: -20px !important;
}

.header-logo .custom-logo[src$='.svg'],
.header-logo img.custom-logo {
	height: 50px !important;
	width: auto !important;
}

.header-nav a {
    font-weight: 500;
    letter-spacing: -0.5px;
}

.header-nav ul {
    gap: 40px;
}

/* Account/inlog-icoon in de header — eigen styling (geen .header-search-icon
   class, want die opent de zoek-popup). Matcht visueel het zoekicoon. */
.header-account-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: #fff;
    border: none;
    border-radius: var(--dmn-image-radius);
    color: var(--dmn-text, #111);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}
.header-account-icon:hover {
    color: var(--dmn-primary, #793185);
    background: color-mix(in srgb, var(--dmn-primary, #793185) 10%, transparent);
}
.header-account-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* ============================================================
   Page header (hero) — zachte lichtpaarse band (optie A)
   Ronding altijd; lichte tint + donkere titel alleen als er GEEN
   achtergrondafbeelding is (hero mét afbeelding houdt wit/overlay).
   ============================================================ */

/* Afgeronde onderhoeken (altijd) */
.dmn-page-hero {
    border-radius: 0 0 var(--dmn-image-radius, 16px) var(--dmn-image-radius, 16px);
    overflow: hidden;
}

/* Hoogte — specifieker dan parent's 150px-regel */
body .dmn-page-hero {
    height: 135px !important;
    min-height: 100px !important;
}

/* Titel kleiner — past bij de compacte hero (overschrijft parent --dmn-h1-size) */
.dmn-page-hero .dmn-page-hero-title {
    font-size: clamp(22px, 2.4vw, 30px) !important;
    line-height: 1.2 !important;
}

/* Mobiel: fixed header is hoger dan de gereserveerde 80px -> meer ruimte
   reserveren zodat niets onder de nav valt, en de hero compact houden. */
@media (max-width: 768px) {
    body {
        padding-top: 90px !important; /* >= werkelijke header-hoogte */
    }
    body .dmn-page-hero {
        height: auto !important;
        min-height: 0 !important;
        margin-top: 0 !important;
        padding: 18px 16px;
    }
    .dmn-page-hero .dmn-page-hero-title {
        font-size: clamp(20px, 5.5vw, 24px) !important;
    }
}

/* Geen afbeelding -> lichte paarstint i.p.v. de verzadigde gradient */
.dmn-page-hero-bg[style*="background-image: url('')"],
.dmn-page-hero-bg[style="background-image: url();"] {
    background: color-mix(in srgb, var(--dmn-primary, #793185) 10%, #fff) !important;
}

/* Geen afbeelding -> overlay uit (de tint moet licht blijven) */
.dmn-page-hero-bg[style*="background-image: url('')"] .dmn-page-hero-overlay,
.dmn-page-hero-bg[style="background-image: url();"] .dmn-page-hero-overlay {
    background: none !important;
}

/* Geen afbeelding -> donkere titel + paarse breadcrumb i.p.v. wit */
.dmn-page-hero:has(.dmn-page-hero-bg[style*="background-image: url('')"]) .dmn-page-hero-title,
.dmn-page-hero:has(.dmn-page-hero-bg[style="background-image: url();"]) .dmn-page-hero-title {
    color: var(--dmn-primary, #793185) !important;
    text-shadow: none !important;
}
.dmn-page-hero:has(.dmn-page-hero-bg[style*="background-image: url('')"]) .dmn-page-hero-inner .rank-math-breadcrumb,
.dmn-page-hero:has(.dmn-page-hero-bg[style*="background-image: url('')"]) .dmn-page-hero-inner .rank-math-breadcrumb a,
.dmn-page-hero:has(.dmn-page-hero-bg[style*="background-image: url('')"]) .dmn-page-hero-inner .breadcrumbs,
.dmn-page-hero:has(.dmn-page-hero-bg[style*="background-image: url('')"]) .dmn-page-hero-inner .breadcrumbs a {
    color: var(--dmn-primary, #793185) !important;
}
.dmn-page-hero:has(.dmn-page-hero-bg[style*="background-image: url('')"]) .dmn-page-hero-inner .rank-math-breadcrumb span,
.dmn-page-hero:has(.dmn-page-hero-bg[style*="background-image: url('')"]) .dmn-page-hero-inner .breadcrumbs span {
    color: rgba(31, 20, 48, 0.6) !important;
}
.dmn-page-hero:has(.dmn-page-hero-bg[style*="background-image: url('')"]) .dmn-page-hero-subtitle {
    color: var(--dmn-primary, #793185) !important;
}

/* ============================================================
   Content-wrapper: full-width tot de site-width.
   Zij-padding (10px) eruit zodat blokken tot de site-width-randen lopen;
   verticale 50px blijft als ademruimte tussen hero/secties/footer.
   ============================================================ */
.default-content {
    padding: 50px 0 !important;
}

/* Mobiel: zij-gutter (20px) terug zodat content niet tegen de schermranden
   plakt. Desktop blijft full-width tot de site-width. Dekt de pagina-content
   én de blog-/single-leeskolommen; de uitgelichte single-afbeelding zit buiten
   een .container en wordt apart ingesnoerd. */
@media (max-width: 768px) {
    .default-content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .dmn-archive .container,
    .dmn-single-post .container,
    .site-footer .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    .dmn-single-post .post-hero-image {
        width: calc(100% - 40px);
        margin-left: auto;
        margin-right: auto;
    }
}

/* Footer sluit direct aan (geen ruimte erboven) */
.site-footer {
    margin-top: 0 !important;
}

/* Footer-kolommen links uitlijnen */
.footer-grid {
    text-align: left !important;
}

.footer-text {
    max-width: 300px!important;
}

.footer-logo {
    margin-left: -10px !important;
}

/* ============================================================
   Hoofdmenu submenu (dropdown)
   ============================================================ */
/* Dropdown onder het juiste item i.p.v. relatief aan de hele menubalk
   (parent zet position:relative op .primary-menu zelf). */
.primary-menu li {
    position: relative;
}
/* Subitems links uitlijnen + nette padding */
.primary-menu .sub-menu {
    text-align: left;
}
.primary-menu .sub-menu a {
    display: block;
    text-align: left;
    padding: 8px 16px;
    white-space: nowrap;
}

/* ============================================================
   "Lid worden" CTA-band boven de footer (site-breed)
   ============================================================ */
.dgo-membership-cta {
    background: var(--dmn-primary, #793185);
    color: #fff;
    padding: clamp(32px, 5vw, 56px) 20px;
    text-align: center;
}
.dgo-membership-cta-inner {
    max-width: 720px;
    margin: 0 auto;
}
.dgo-membership-cta-title {
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp(22px, 2.6vw, 32px);
    line-height: 1.2;
}
.dgo-membership-cta-text {
    margin: 0 0 22px;
    font-size: clamp(15px, 1.6vw, 18px);
    opacity: 0.92;
}
.dgo-membership-cta-btn {
    display: inline-block;
    text-decoration: none;
    font-weight: 700;
    background: #fff;
    color: var(--dmn-primary, #793185);
    padding: 14px 30px;
    border-radius: var(--dmn-image-radius, 16px);
    font-size: 16px;
    transition: all 0.2s ease;
}
.dgo-membership-cta-btn:hover {
    background: rgba(255, 255, 255, 0.88);
    color: var(--dmn-primary, #793185);
}


/* ============================================================
   Documenten ([documenten]) — gegroepeerd per categorie
   ============================================================ */
.dgo-documenten { max-width: var(--dmn-site-width, 1100px); margin: 0 auto; }
.dgo-documenten--locked p { color: var(--dmn-text-medium, #6b7280); }
.dgo-documenten--locked a { color: var(--dmn-primary, #793185); font-weight: 600; }

.dgo-doc-cat { margin-bottom: clamp(28px, 4vw, 44px); }
.dgo-doc-cat-title {
    margin: 0 0 14px;
    font-family: var(--dmn-h2-font, var(--dmn-font-heading, inherit));
    font-size: var(--dmn-h2-size, 1.4rem);
    color: var(--dmn-h2-color, var(--dmn-primary, #793185));
}
.dgo-doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.dgo-doc-link {
    display: flex; align-items: center; gap: 14px;
    text-decoration: none; color: var(--dmn-text-dark, #1f1430);
    padding: 12px 16px;
    border: 1px solid var(--dmn-border-color, #e7e5ec);
    border-radius: var(--dmn-image-radius, 12px);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dgo-doc-link:hover {
    border-color: var(--dmn-primary, #793185);
    box-shadow: var(--dmn-box-shadow, 0 4px 18px rgba(0,0,0,0.06));
}
.dgo-doc-icon { flex-shrink: 0; width: 34px; height: auto; display: block; }
.dgo-doc-name { flex: 1; font-weight: 600; }
.dgo-doc-meta {
    display: flex; gap: 12px; flex-shrink: 0;
    font-size: 13px; color: var(--dmn-text-medium, #6b7280);
}
@media (max-width: 560px) {
    .dgo-doc-meta { display: none; }
}

/* Nieuwsbrieven — lijst in dezelfde stijl als documenten, losse brief in een kader */
.dgo-nieuwsbrieven { max-width: var(--dmn-site-width, 1100px); margin: 0 auto; }
.dgo-nb-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dgo-nb-link {
    display: flex; align-items: center; gap: 14px;
    text-decoration: none; color: var(--dmn-text-dark, #1f1430);
    padding: 12px 16px;
    border: 1px solid var(--dmn-border-color, #e7e5ec);
    border-radius: var(--dmn-image-radius, 12px);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dgo-nb-link:hover {
    border-color: var(--dmn-primary, #793185);
    box-shadow: var(--dmn-box-shadow, 0 4px 18px rgba(0,0,0,0.06));
}
.dgo-nb-naam { flex: 1; font-weight: 600; }
.dgo-nb-datum { font-size: 13px; color: var(--dmn-text-medium, #6b7280); }
p.dgo-nb-datum { margin: -6px 0 16px; }
.dgo-nb-pijl { color: var(--dmn-primary, #793185); }
.dgo-nb-terug a { color: var(--dmn-primary, #793185); font-weight: 600; text-decoration: none; }
.dgo-nb-frame {
    display: block; width: 100%; min-height: 600px; border: 0;
    border-radius: var(--dmn-image-radius, 12px); background: #fff;
}

/* Documenten — weergave-toggle + grid */
.dgo-doc-viewtoggle { display: flex; justify-content: flex-end; gap: 4px; margin-bottom: 18px; }
.dgo-doc-view {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 34px; border-radius: var(--dmn-button-radius, 8px);
    border: 1px solid var(--dmn-border-color, #e7e5ec); color: var(--dmn-text-medium, #6b7280);
    background: #fff; text-decoration: none; transition: all 0.15s ease;
}
.dgo-doc-view:hover { color: var(--dmn-primary, #793185); border-color: var(--dmn-primary, #793185); }
.dgo-doc-view.is-active { background: var(--dmn-primary, #793185); color: #fff; border-color: var(--dmn-primary, #793185); }

/* Grid-weergave: documenten in kolommen i.p.v. volle-breedte rijen */
.dgo-documenten.is-grid .dgo-doc-list {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* Grid-weergave: document als verticaal kaartje (grootte blijft binnen het vak) */
.dgo-documenten.is-grid .dgo-doc-link {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.dgo-documenten.is-grid .dgo-doc-name { flex: none; }
.dgo-documenten.is-grid .dgo-doc-meta { margin-top: auto; }

/* ============================================================
   Blog — archief + single in DGO-stijl (prikbord-achtig)
   ============================================================ */

/* ---- Archief ---- */
.dmn-archive .archive-header { padding: clamp(1.25rem, 4vw, 2.25rem) 0 0; }
.dmn-archive .archive-title {
    font-family: var(--dmn-h1-font, var(--dmn-font-heading, inherit));
    color: var(--dmn-h1-color, var(--dmn-primary, #793185));
    margin: 0 0 .4rem;
}
.dmn-archive .archive-description { color: var(--dmn-text-medium, #6b7280); margin: 0 0 1rem; }

.archive-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .archive-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .archive-grid { grid-template-columns: 1fr 1fr 1fr; } }

.archive-item {
    display: flex; flex-direction: column; overflow: hidden; background: #fff;
    border: 1px solid var(--dmn-border-color, #e7e5ec);
    border-radius: var(--dmn-image-radius, 14px);
    transition: box-shadow .2s ease, transform .2s ease;
}
.archive-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--dmn-box-shadow, 0 10px 30px color-mix(in srgb, var(--dmn-primary, #793185) 14%, transparent));
}
/* Beeld: stack-archive.css zet hier padding-top:60% + absolute img; neutraliseren
   zodat alleen onze aspect-ratio geldt (anders een gebroken beeldverhouding). */
.dmn-archive .archive-item-image { display: block; position: relative; aspect-ratio: 16 / 10; padding-top: 0; overflow: hidden; background: color-mix(in srgb, var(--dmn-primary, #793185) 7%, #fff); }
.dmn-archive .archive-item-image img { position: static; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.dmn-archive .archive-item:hover .archive-item-image img { transform: scale(1.04); }
.archive-item-content { display: flex; flex-direction: column; flex: 1; padding: 18px 20px; }
.archive-item-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.archive-item-type {
    font-size: 11.5px; font-weight: var(--dmn-font-weight-bold, 700); letter-spacing: .04em; text-transform: uppercase;
    color: var(--dmn-primary, #793185);
    background: color-mix(in srgb, var(--dmn-primary, #793185) 10%, transparent);
    padding: 4px 10px; border-radius: var(--dmn-button-radius, 8px);
}
.archive-item-date { font-size: 13px; color: var(--dmn-text-medium, #6b7280); margin-left: auto; }
.archive-item-title { margin: 0 0 8px; font-family: var(--dmn-h3-font, var(--dmn-font-heading, inherit)); font-size: var(--dmn-h3-size, clamp(17px, 1.6vw, 21px)); line-height: 1.25; }
.archive-item-title a { color: var(--dmn-h3-color, var(--dmn-primary, #793185)); text-decoration: none; }
.archive-item-excerpt { font-size: 14px; line-height: 1.55; color: var(--dmn-text-medium, #4b5563); margin: 0 0 14px; }
.archive-item-link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--dmn-primary, #793185); text-decoration: none; }
.archive-item-link:hover { gap: 9px; }

.archive-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 32px; }
.archive-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    min-width: 38px; height: 38px; padding: 0 12px;
    border-radius: var(--dmn-button-radius, 10px); border: 1px solid var(--dmn-border-color, #e7e5ec);
    color: var(--dmn-text-dark, #1f1430); text-decoration: none; font-weight: 600;
}
.archive-pagination .page-numbers.current,
.archive-pagination .page-numbers:hover { background: var(--dmn-primary, #793185); color: #fff; border-color: var(--dmn-primary, #793185); }
.archive-empty { text-align: center; padding: 60px 0; color: var(--dmn-text-medium, #6b7280); }
.archive-empty svg { color: color-mix(in srgb, var(--dmn-primary, #793185) 35%, #cccccc); }

.dmn-page-hero-inner {
    padding-left: 15px;
    padding-right: 15px;
}

/* ---- Single (prikbord-achtig artikel) ---- */
/* Bovenrij in de hero-content: terug-link links, categorie-pill rechts.
   (Via script ingevoegd; de pill wordt in deze rij geplaatst.) */
.dmn-single-post .dmn-single-tophead {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px; margin-top:50px;
}
.dmn-single-post .dmn-single-back {
    display: inline-block; text-decoration: none; font-weight: 400;
    color: var(--dmn-primary, #793185);
}
.dmn-single-post .dmn-single-back:hover { text-decoration: underline; }

/* Hele single als nette, gecentreerde leeskolom; thema-.container is center-
   uitgelijnd, hier links forceren. */
.dmn-single-post .container { max-width: 840px; text-align: left; }

/* Kop = plat: badge, titel, meta. De uitgelichte afbeelding komt er ONDER in de
   leeskolom (zoals een prikbord-item), niet als hero-achtergrond. */
.dmn-single-post .post-hero {
    position: static; display: flex; flex-direction: column;
    min-height: 0; background: none; border-radius: 0; overflow: visible;
    max-width: 840px; margin: 0 auto;
}
.dmn-single-post .post-hero-overlay { display: none; }
.dmn-single-post .post-hero-content {
    order: 1; position: static; z-index: auto; width: 100%; padding: 0;
    color: var(--dmn-text-dark, #1f1430);
}
.dmn-single-post .post-category-badge {
    display: block; width: fit-content; margin-left: auto; /* rechts uitlijnen */
    text-decoration: none;
    background: color-mix(in srgb, var(--dmn-primary, #793185) 10%, transparent);
    color: var(--dmn-primary, #793185);
    padding: 5px 12px; border-radius: var(--dmn-button-radius, 8px);
    font-size: 12px; font-weight: var(--dmn-font-weight-bold, 700); letter-spacing: .04em; text-transform: uppercase;
}
.dmn-single-post .post-title {
    color: var(--dmn-h1-color, var(--dmn-primary, #793185)); margin: .6rem 0 .4rem;
    font-family: var(--dmn-h1-font, var(--dmn-font-heading, inherit));
    font-size: var(--dmn-h1-size, clamp(26px, 3.4vw, 38px)); line-height: 1.2;
}
.dmn-single-post .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 14px; color: var(--dmn-text-medium, #6b7280); margin-top: 6px; }
.dmn-single-post .post-meta-item { display: inline-flex; align-items: center; gap: 6px; }
/* Alleen leestijd tonen; datum (1e) en auteur (3e) verbergen. */
.dmn-single-post .post-meta-item:nth-child(1),
.dmn-single-post .post-meta-item:nth-child(3) { display: none; }

/* Uitgelichte afbeelding als blok in de leeskolom (na titel/meta, vóór content) */
.dmn-single-post .post-hero-image {
    order: 2; position: static; inset: auto;
    width: 100%; height: auto; margin: clamp(18px, 3vw, 26px) 0 0;
    aspect-ratio: 16 / 9; background-size: cover; background-position: center;
    border-radius: var(--dmn-image-radius, 16px);
}

/* Content + onderdelen vullen de leeskolom (geen eigen smallere cap meer). */
.dmn-single-post .post-content { max-width: none; margin: clamp(1.25rem, 3vw, 1.75rem) 0 0; font-size: 1.05rem; line-height: 1.75; color: var(--dmn-text-dark, #1f1430); }
.dmn-single-post .post-content > :first-child { margin-top: 0; }

.dmn-single-post .post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; }
.dmn-single-post .post-tag { font-size: 13px; padding: 5px 12px; border-radius: var(--dmn-button-radius, 8px); border: 1px solid var(--dmn-border-color, #e7e5ec); color: var(--dmn-text-dark, #374151); text-decoration: none; }
.dmn-single-post .post-tag:hover { border-color: var(--dmn-primary, #793185); color: var(--dmn-primary, #793185); }

.dmn-single-post .post-author-box { display: flex; gap: 16px; align-items: center; margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; padding: 20px; background: color-mix(in srgb, var(--dmn-primary, #793185) 6%, #fff); border-radius: var(--dmn-image-radius, 14px); }
.dmn-single-post .author-avatar { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; }
.dmn-single-post .author-name { margin: 0 0 4px; }
.dmn-single-post .author-bio { margin: 0; font-size: 14px; color: var(--dmn-text-medium, #6b7280); }

.dmn-single-post .post-navigation { display: grid; gap: 12px; grid-template-columns: 1fr; margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; }
@media (min-width: 600px) { .dmn-single-post .post-navigation { grid-template-columns: 1fr 1fr; } }
.dmn-single-post .post-nav-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--dmn-border-color, #e7e5ec); border-radius: var(--dmn-image-radius, 12px); text-decoration: none; color: var(--dmn-text-dark, #1f1430); transition: border-color .15s ease; }
.dmn-single-post .post-nav-link:hover { border-color: var(--dmn-primary, #793185); }
.dmn-single-post .post-nav-next { text-align: right; justify-content: flex-end; }
.dmn-single-post .post-nav-label { display: block; font-size: 12px; color: var(--dmn-text-medium, #6b7280); }
.dmn-single-post .post-nav-title { font-weight: 600; }
.dmn-single-post .post-nav-link svg { flex-shrink: 0; color: var(--dmn-primary, #793185); }

/* ---- Gerelateerd ---- */
/* Breekt uit de 840px-leeskolom naar de volle site-breedte (3 koloms).
   De kaart-styling zelf komt uit de stack (blog-templates.css) — incl. de
   categorie-badge over de afbeelding — dus die NIET overschrijven. */
.dmn-single-post .related-posts { margin-top: clamp(2rem, 5vw, 3.5rem); }
.dmn-single-post .related-posts .container { max-width: var(--dmn-site-width, 1280px); }
.dmn-single-post .related-posts-title { font-family: var(--dmn-h2-font, var(--dmn-font-heading, inherit)); color: var(--dmn-h2-color, var(--dmn-primary, #793185)); margin: 0 0 18px; }

/* ============================================================
   Zij-gutter voor alle vensterbreedtes (10-09-2026)
   ============================================================
   Gemeten op de nieuwbouw: op 768px stond er 20px marge, maar vanaf 800px viel
   die weg en raakte de tekst beide schermranden, tot en met 1400px. Op 1024px
   begon de tekst op 12 van de 16 pagina's op exact 0px.

   Oorzaak: --dmn-site-width staat voor DGO op 1400px en de containers doen
   `width/max-width: min(100%, var(--dmn-site-width))` met `margin: 0 auto` en
   geen zijpadding. Onder die 1400px valt er dus niets te centreren. De 20px die
   er wél was, stond overal binnen een `@media (max-width: 768px)`.

   De regel voor .container en .header-inner komt uit het PARENT-thema
   (domyn-theme/style.css r180) en geldt voor elke Domyn-site. Hier alleen voor
   DGO overschreven. .dmn-cc-container en .card-overview-inner zijn wel bij de
   bron aangepast, in blocks.css van dit child-thema.

   Eén knop om aan te draaien: --dgo-gutter. Wat de huidige waarde oplevert:
       375px -> 20px    769px -> 31px    1024px -> 41px    1200px en breder -> 48px */

:root {
    --dgo-gutter: clamp(20px, 4vw, 48px);
}

.container,
.header-inner,
.footer-grid,
.footer-bottom {
    box-sizing: border-box;
    padding-left: var(--dgo-gutter);
    padding-right: var(--dgo-gutter);
}

/* De hero had als enige al een gutter (parent r613: `padding: 0 20px`).
   Gelijktrekken zodat hij niet uit de pas loopt met de rest. */
body .dmn-hero-inner {
    padding-left: var(--dgo-gutter);
    padding-right: var(--dgo-gutter);
}

/* Losse inhoud direct in <main>, zoals de uitvoer van een shortcode: het
   inschrijfformulier op /ik-wil-lid-worden/ en de diëtistenzoeker op
   /vind-een-dietist/. Die zit niet in een blok-container en bleef daardoor op
   0px staan, ook nadat de containers hierboven waren gerepareerd.

   Bewust `:not(section)`: de blok-secties eromheen hebben hun eigen container
   én lopen met een achtergrondkleur van rand tot rand. Die mogen niet mee
   ingesnoerd worden, anders krijgt zo'n gekleurde band ineens witte randen. */
main.default-content > *:not(section) {
    box-sizing: border-box;
    padding-left: var(--dgo-gutter);
    padding-right: var(--dgo-gutter);
}

/* ============================================================
   Mobiel menu tot en met 1024px (10-09-2026)
   ============================================================
   Het parent-thema zet het hamburgermenu pas in bij 768px. Op een iPad staand
   (768) en liggend (1024) past het uitgeklapte menu niet meer netjes naast het
   logo, dus de omslag gaat hier naar 1024.

   Alleen de menuregels zijn overgenomen. Het blok in het parent-thema
   (@media max-width: 768px, r1206 t/m r1505) is 299 regels waarin het menu
   vermengd zit met mobiele hero-, kaart- en typografie-tweaks; die als geheel
   naar 1024 tillen zou een tablet er mobiel uit laten zien.

   Bewust NIET overgenomen: `.site-header { position: fixed }` met de
   bijbehorende `body { padding-top: 80px }`. Dat maakt de header op tablet
   plakkend, en dat is een andere keuze dan waar dit over ging. Wil je dat wel,
   dan horen die twee regels er samen bij; los werkt het niet. */

@media (max-width: 1024px) {

    .mobile-menu-toggle {
        display: block !important;
        background: #fff !important;
    }

    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }

    /* Nav wordt een uitschuifpaneel rechts. */
    .header-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background: var(--dmn-header-bg);
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        padding: 80px 20px 20px;
        transition: right 0.3s ease;
        z-index: 999;
        display: flex;
        flex-direction: column;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .header-nav.active {
        right: 0;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .header-nav ul {
        flex-direction: column;
        gap: 20px;
        text-align: left;
        padding: 5px;
    }

    .mobile-menu-close {
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
        background: #fff !important;
        border: none;
        font-size: 32px;
        font-weight: 300;
        cursor: pointer;
        color: var(--dmn-menu-link);
        line-height: 1;
    }

    .primary-menu {
        order: 1;
    }

    /* Submenu's uitklappen in de kolom in plaats van zwevend ernaast. */
    .primary-menu .sub-menu {
        position: static;
        box-shadow: none;
        padding-left: 0px;
        margin-top: 5px;
        background: transparent;
    }

    .primary-menu li.menu-item-has-children > a::after {
        float: right;
    }

    /* De CTA verhuist van de balk naar het paneel. */
    .mobile-cta {
        display: block;
        order: 2;
        width: 100%;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    .mobile-cta .button {
        display: block;
        width: 100%;
        text-align: center;
        padding: 14px 24px;
    }

    .mobile-cta a {
        color: var(--dmn-neutral) !important;
    }

    .header-cta .button-small,
    .header-cta .button {
        display: none !important;
    }
}