/*
Theme Name: Hello Elementor Child (Enno Nuy)
Theme URI: 
Description: Custom child theme voor de website van Enno Nuy.
Author: Antigravity AI
Template: hello-elementor
Version: 1.0.7
Text Domain: hello-elementor-child
*/

:root {
    --primary-color: #313f30;
    --primary-hover: #232d22;
    --text-color: #1a1a1a;
    --bg-color: #ffffff;
    --box-bg: #f4efeb;
    --accent-color: #c07858;
    --border-color: #e5dcd3;
    /* Elementor definieert --border-color zelf op .e-con, waardoor onze waarde
       binnen containers wegvalt en border-shorthands ongeldig worden.
       Gebruik daarom --enno-rand in alles wat in Elementor gerenderd wordt. */
    --enno-rand: #e5dcd3;
    /* Leesletter voor de artikelen: een echte boekletter naast de
       interfaceletter Inter. Terugdraaien = deze regel op Inter zetten. */
    --font-lees: 'EB Garamond', Georgia, serif;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-color);
    font-weight: normal;
}

a {
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

/* ==========================================================================
   Header Styling (Fix Parent Theme 1140px Max-Width Limitation)
   ========================================================================== */
body .site-header,
body .site-header:not(.dynamic-header) {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 999 !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

body .header-container {
    max-width: 1450px !important;
    margin: 0 auto !important;
    width: 100% !important;
    padding: 35px 40px 20px !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

.header-logo {
    justify-self: start;
}

.main-navigation {
    justify-self: center;
}

.header-actions {
    justify-self: end;
}

.header-logo a {
    display: flex;
    align-items: center;
    gap: 12px;
}

.feather-logo {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.header-logo-text {
    display: flex;
    flex-direction: column;
}

.header-logo-text .title {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: 2px;
    color: #111;
    font-weight: 600;
}

.header-logo-text .subtitle {
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 3.5px;
    color: #555;
    margin-top: 4px;
    display: block;
}

.main-navigation ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    /* Negen items vragen bij 35px tussenruimte precies de volle breedte; met
       26px is er marge en hoeft geen enkel label af te breken. */
    gap: 26px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

.main-navigation a {
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.95rem;
    position: relative;
    padding-bottom: 4px;
    color: var(--primary-color);
}

.main-navigation .current-menu-item > a::after,
.main-navigation .current_page_item > a::after,
/* Zit je in een categorie onder Boeken of Essays, dan wordt ook het
   bovenliggende item gemarkeerd. */
.main-navigation .current-menu-ancestor > a::after,
.main-navigation a:hover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
}

/* Bij hover wordt de tekst goudbruin; het streepje loopt mee. De actieve
   pagina houdt het donkergroen. */
.main-navigation a:hover::after {
    background-color: var(--accent-color);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 25px;
}

.search-icon {
    display: flex;
    align-items: center;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #fff;
    padding: 12px 24px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    color: #fff;
}

/* ==========================================================================
   Hero + weblog-banner: verhuisd naar Elementor (homepage, post 9).
   De styling zit nu in de Elementor-widgets, niet meer hier.
   ========================================================================== */

/* ==========================================================================
   Footer Styling
   ========================================================================== */
/* theme.css perst .site-footer:not(.dynamic-footer) in 1140px, net als bij de
   header. De voet moet dezelfde contentbreedte houden; de 1450px wordt door
   .footer-container geregeld. */
body .site-footer,
body .site-footer:not(.dynamic-footer) {
    max-width: 100% !important;
    width: 100% !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    padding: 60px 0 20px !important;
    background-color: #ffffff;
    font-size: 0.9rem;
}

body .footer-container {
    max-width: 1450px !important;
    margin: 0 auto !important;
    width: 100% !important;
    padding: 0 40px !important;
    box-sizing: border-box !important;
}

.newsletter-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.footer-newsletter {
    background-color: var(--box-bg);
    border-radius: 4px;
    padding: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 24px 30px;
    margin-bottom: 60px;
}

/* De uitleg over wat je krijgt en hoe je er weer af komt. */
.footer-newsletter .newsletter-klein {
    max-width: 52ch;
    margin-top: 10px;
    font-size: 0.82rem;
    line-height: 1.55;
    color: #7b7268;
}

/* De uitkomst van een aanmelding, een bevestiging of een afmelding. Hij staat
   op een eigen regel onder het formulier. */
.footer-newsletter .newsletter-melding {
    flex: 1 0 100%;
    margin: 0;
    padding: 12px 16px;
    border-left: 3px solid var(--primary-color);
    background: #fffdf9;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #3c382f;
}

.footer-newsletter .newsletter-melding.is-fout {
    border-left-color: var(--accent-color);
}

.footer-newsletter h3 {
    margin: 0;
    font-size: 1.8rem;
}

.footer-newsletter p {
    margin: 0;
    color: #555;
}

.newsletter-text {
    flex: 1 1 460px;
    max-width: 620px;
}

.newsletter-form {
    display: flex;
    flex: 0 1 auto;
    max-width: 100%;
}

.newsletter-form input[type="email"] {
    padding: 12px 20px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    /* Krimpt mee op smalle schermen; een vaste 250px liep samen met de knop
       buiten beeld. */
    width: 250px;
    min-width: 0;
    flex: 1 1 auto;
    outline: none;
}

.newsletter-form input[type="email"]:focus {
    border-color: var(--primary-color);
    box-shadow: inset 0 0 0 1px var(--primary-color);
}

.newsletter-form button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.newsletter-form button:hover,
.newsletter-form button:focus {
    background-color: var(--accent-color);
}

.footer-widgets {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

/* Het colofon links in de voet: onder het logo een korte toelichting, de
   cijfers uit de database en een verwijzing naar de biografie. */
.footer-about-tekst {
    margin: 14px 0 0;
    font-size: 0.86rem;
    line-height: 1.65;
    color: #6f665b;
}

.footer-cijfers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    margin: 20px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--enno-rand);
}

.footer-cijfers dt {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    line-height: 1;
    color: var(--primary-color);
}

.footer-cijfers dd {
    margin: 4px 0 0;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #a09589;
}

.footer-about-sinds {
    margin: 18px 0 0;
    font-size: 0.8rem;
    line-height: 1.6;
    color: #8a8075;
}

.footer-about-sinds a {
    display: inline-block;
    color: var(--accent-color);
    white-space: nowrap;
}

.footer-about-sinds a:hover {
    color: var(--primary-color);
}

.footer-socials {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

.footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #ccc;
    border-radius: 50%;
    color: var(--text-color);
}

.footer-socials a:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.footer-widget h4 {
    font-family: var(--font-body);
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-widget ul li {
    margin-bottom: 10px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: #666;
}

.footer-bottom-right {
    display: flex;
    align-items: center;
}

.footer-bottom-links a {
    margin-left: 20px;
    color: #666;
}

.back-to-top {
    background-color: var(--primary-color);
    color: white;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-left: 30px;
}

/* Override Parent Theme Max-Width Contraints on site-header */
@media (min-width: 576px) {
    body .site-header,
    body .site-header:not(.dynamic-header) {
        max-width: 100% !important;
    }
}

/* Responsive Overrides */
@media (max-width: 1100px) {
    body .header-container { grid-template-columns: 1fr auto !important; padding: 20px !important; }
    .main-navigation { display: none; }
}
@media (max-width: 992px) {
    .footer-widgets { grid-template-columns: 1fr 1fr; }
    .footer-newsletter { flex-direction: column; text-align: center; gap: 20px; }
    .newsletter-text { flex: 0 1 auto; max-width: 100%; }
    .newsletter-form { width: 100%; }
}

/* Op een telefoon vielen veld en knop samen terug tot 119px voor het adres.
   Onder elkaar heeft allebei de volle breedte. */
@media (max-width: 640px) {
    .newsletter-form {
        flex-wrap: wrap;
        gap: 10px;
    }

    .newsletter-form input[type="email"],
    .newsletter-form button {
        flex: 1 1 100%;
        border-radius: 4px;
    }

    .footer-newsletter .newsletter-klein {
        font-size: 0.78rem;
        margin-top: 8px;
    }

    .footer-newsletter .newsletter-melding {
        text-align: left;
    }
}
/* De Elementor-secties gaan onder 768px van 40px naar 20px zijmarge; de voet
   volgt dat, zodat de inhoud op elke breedte gelijk uitlijnt. */
@media (max-width: 767px) {
    body .footer-container { padding: 0 20px !important; }
}

@media (max-width: 768px) {
    /* Zelfde selectorgewicht als de basisregel hierboven, die ook !important
       gebruikt; anders wint die met zijn :not(.dynamic-footer). */
    body .site-footer,
    body .site-footer:not(.dynamic-footer) { padding-top: 22px !important; }
    .footer-newsletter { margin-bottom: 34px; }
    .footer-widgets { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: 15px; text-align: center; }
}

/* ==========================================================================
   Parent-thema ontroze-en
   --------------------------------------------------------------------------
   reset.css van hello-elementor zet #c36 (roze) op elke button: op de rand,
   de tekstkleur en de achtergrond bij hover en focus. Ook links krijgen die
   kleur. Hier vervangen door het accent uit de huisstijl.

   Specificiteit: reset gebruikt button:hover (0,1,1), dus body button:hover
   (0,1,2) is nodig om er bovenuit te komen.
   ========================================================================== */
/* Alleen de hover- en focuskleur overschrijven. De rustkleur laten we aan de
   componenten zelf; die zetten hun eigen rand en tekstkleur.

   Precies dezelfde selectors als reset.css, dus met hetzelfde gewicht: dit
   bestand laadt later en wint daarom. Een zwaardere selector (body ervoor)
   zou ook de eigen knopstijlen verslaan, en dan verliest de actieve knop
   zijn donkergroen zodra hij focus of hover krijgt. */
[type="button"]:focus,
[type="button"]:hover,
[type="submit"]:focus,
[type="submit"]:hover,
button:focus,
button:hover {
    background-color: var(--accent-color);
    color: #fff;
}

body a:active,
body a:hover {
    color: var(--accent-color);
}

/* De nieuwsbriefknop is donkergroen; die houdt zijn eigen hover. */
body .newsletter-form button:hover,
body .newsletter-form button:focus {
    background-color: var(--primary-hover);
    color: #fff;
}

/* ==========================================================================
   Uitklapmenu in de header
   --------------------------------------------------------------------------
   Met elf pagina's paste de navigatie niet meer op één regel (1342px nodig,
   1053px beschikbaar). Twee items hebben nu onderliggende pagina's; die klappen
   uit bij hover en bij toetsenbordfocus.
   ========================================================================== */
.main-navigation li {
    position: relative;
}

.main-navigation .menu-item-has-children > a::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 7px;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid currentColor;
    vertical-align: 0.15em;
    opacity: 0.55;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.main-navigation .menu-item-has-children:hover > a::before,
.main-navigation .menu-item-has-children:focus-within > a::before {
    opacity: 1;
}

.main-navigation ul ul.sub-menu {
    display: block !important;
    position: absolute;
    top: 100%;
    left: -18px;
    z-index: 1000;
    min-width: 230px;
    margin: 0 !important;
    padding: 8px 0 !important;
    background: #fff;
    border: 1px solid var(--enno-rand);
    border-top: 2px solid var(--accent-color);
    box-shadow: 0 24px 40px -26px rgba(60, 50, 35, 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.main-navigation li:hover > ul.sub-menu,
.main-navigation li:focus-within > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* De uitklaplijst staat onder elkaar, niet naast elkaar zoals het hoofdmenu. */
.main-navigation ul ul.sub-menu {
    display: block !important;
    gap: 0 !important;
}

.main-navigation ul.sub-menu li {
    display: block;
}

.main-navigation ul.sub-menu a {
    display: block;
    padding: 9px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--text-color);
}

.main-navigation ul.sub-menu a:hover,
.main-navigation ul.sub-menu a:focus {
    background: var(--box-bg);
    color: var(--primary-color);
}

/* Het onderstreepje van het hoofdmenu hoort niet in de uitklaplijst. */
.main-navigation ul.sub-menu a::after,
.main-navigation ul.sub-menu .current-menu-item > a::after,
.main-navigation ul.sub-menu .current-menu-ancestor > a::after {
    content: none;
}

/* Een bovenliggend item zonder eigen pagina mag geen aanwijzer krijgen. */
.main-navigation .menu-item-has-children > a[href="#"],
.main-navigation .menu-item-has-children > a[href$="/#"] {
    cursor: default;
}

@media (max-width: 1100px) {
    .main-navigation ul ul.sub-menu { display: none !important; }
}

/* ==========================================================================
   Mobiel menu
   --------------------------------------------------------------------------
   Onder 1100px bestaat de balk uit het logo en een hamburger. De rest van de
   header verhuist naar een paneel dat van rechts inschuift: logo, zoekveld,
   het volledige menu, de aanmeldknop en de contactgegevens.

   Vormgeving volgt de leespagina's: warm papierwit met een spoor textuur,
   Playfair voor de menuregels, haarlijnen in een warme tint en het terracotta
   accent voor het merkteken bij de huidige pagina.
   ========================================================================== */
button.enno-mobielknop {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(180, 165, 140, 0.55);
    border-radius: 2px;
    background: #fffdf9;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.enno-mobielknop-streep {
    display: block;
    width: 19px;
    height: 1.5px;
    background: var(--primary-color);
    transition: transform 0.3s ease, opacity 0.2s ease;
}

/* De middelste streep is korter; dat leest rustiger dan drie gelijke strepen. */
.enno-mobielknop-streep:nth-child(2) { width: 13px; margin-right: 6px; }

button.enno-mobielknop:hover,
button.enno-mobielknop:focus {
    background: var(--box-bg);
    border-color: var(--accent-color);
}

button.enno-mobielknop[aria-expanded="true"] .enno-mobielknop-streep:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
button.enno-mobielknop[aria-expanded="true"] .enno-mobielknop-streep:nth-child(2) {
    opacity: 0;
}
button.enno-mobielknop[aria-expanded="true"] .enno-mobielknop-streep:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ---------- het paneel ---------- */
.enno-mobieloverlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(28, 24, 18, 0.55);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.enno-mobielmenu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    width: min(420px, 88vw);
    /* Zelfde papier als de leespagina's, met twee flauwe lichtvlekken. */
    background-color: #fffdf9;
    background-image:
        radial-gradient(circle at 88% 8%, rgba(192, 120, 88, 0.055) 0, transparent 42%),
        radial-gradient(circle at 6% 92%, rgba(160, 140, 110, 0.06) 0, transparent 46%);
    box-shadow: -26px 0 60px -34px rgba(40, 34, 24, 0.55);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Een smalle gouden bies op de rand waar het paneel aanschuift. */
.enno-mobielmenu::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: linear-gradient(to bottom, rgba(192, 120, 88, 0.85), rgba(192, 120, 88, 0.15));
}

/* hidden weghalen gebeurt in de JS; deze klassen regelen de beweging */
body.enno-menu-open .enno-mobieloverlay { opacity: 1; }
body.enno-menu-open .enno-mobielmenu { transform: translateX(0); }

/* De scrollvergrendeling geldt alleen waar het paneel bestaat. Blijft de klasse
   na het verbreden van het venster staan, dan is de pagina toch scrollbaar. */
@media (max-width: 1100px) {
    body.enno-menu-open { overflow: hidden; }
}

/* ---------- kop van het paneel ---------- */
.enno-mobielmenu-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 26px 17px;
    border-bottom: 1px solid rgba(180, 165, 140, 0.4);
}

.enno-mobielmenu-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.enno-mobielmenu-logo .feather-logo {
    width: 31px;
    height: 31px;
    flex-shrink: 0;
}

.enno-mobielmenu-logo .header-logo-text { display: flex; flex-direction: column; }

.enno-mobielmenu-logo .title {
    font-size: 1.16rem;
    letter-spacing: 2px;
    white-space: nowrap;
}

.enno-mobielmenu-logo .subtitle {
    font-size: 0.55rem;
    letter-spacing: 3px;
    margin-top: 4px;
    color: var(--accent-color);
    white-space: nowrap;
}

button.enno-mobielmenu-sluit {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(180, 165, 140, 0.5);
    border-radius: 2px;
    background: transparent;
    color: #6f665b;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

button.enno-mobielmenu-sluit:hover,
button.enno-mobielmenu-sluit:focus {
    background: var(--box-bg);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* ---------- zoeken ---------- */
/* Geen dichtgetimmerd blok maar een onderstreept veld; dat past bij de
   ingetogen typografie van de rest. */
.enno-mobielmenu-zoek {
    padding: 15px 26px 13px;
    border-bottom: 1px solid rgba(180, 165, 140, 0.4);
}

.enno-mobielmenu-zoek form {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(180, 165, 140, 0.55);
    transition: border-color 0.25s ease;
}

.enno-mobielmenu-zoek form:focus-within { border-bottom-color: var(--accent-color); }

.enno-mobielmenu-zoek input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: var(--font-lees);
    font-size: 1.02rem;
    color: var(--text-color);
    outline: none;
}

.enno-mobielmenu-zoek input[type="search"]::placeholder {
    color: #a09589;
    font-style: italic;
}

.enno-mobielmenu-zoek button {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--accent-color);
    cursor: pointer;
    transition: color 0.25s ease;
}

.enno-mobielmenu-zoek button:hover,
.enno-mobielmenu-zoek button:focus {
    background: transparent;
    color: var(--primary-color);
}

/* ---------- het menu ---------- */
.enno-mobielmenu-nav {
    flex: 1 1 auto;
    padding: 6px 0 2px;
}

ul.enno-mobiellijst,
ul.enno-mobiellijst ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Haarlijn iets ingesprongen, zodat hij fijner leest dan een volle streep. */
ul.enno-mobiellijst > li + li > a::before {
    content: '';
    position: absolute;
    top: 0;
    right: 26px;
    left: 26px;
    height: 1px;
    background: rgba(180, 165, 140, 0.32);
}

.enno-mobiellijst > li > a { position: relative; }

.enno-mobiellijst a {
    display: block;
    padding: 12px 26px;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.2px;
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.25s ease, padding-left 0.25s ease;
}

.enno-mobiellijst > li > a:hover,
.enno-mobiellijst > li > a:focus {
    color: var(--accent-color);
    padding-left: 32px;
}

/* De huidige pagina krijgt een ruitje in het accent. */
.enno-mobiellijst > li.current-menu-item > a,
.enno-mobiellijst > li.current-menu-ancestor > a { color: var(--accent-color); }

.enno-mobiellijst > li.current-menu-item > a::after,
.enno-mobiellijst ul.sub-menu li.current-menu-item > a::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 11px;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    background: var(--accent-color);
    transform: rotate(45deg);
}

.enno-mobiellijst ul.sub-menu li > a { position: relative; }

/* Een item met onderliggende pagina's: de link links, de uitvouwknop rechts. */
.enno-mobiellijst .menu-item-has-children > a { padding-right: 62px; }
.enno-mobiellijst .menu-item-has-children { position: relative; }

button.enno-mobiel-vouw {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 45px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: rgba(160, 149, 137, 0.9);
    cursor: pointer;
    transition: color 0.25s ease;
}

button.enno-mobiel-vouw:hover,
button.enno-mobiel-vouw:focus {
    background: none;
    color: var(--accent-color);
}

.enno-mobiel-vouw svg { transition: transform 0.3s ease; }
button.enno-mobiel-vouw[aria-expanded="true"] svg { transform: rotate(180deg); }
button.enno-mobiel-vouw[aria-expanded="true"] { color: var(--accent-color); }

/* De onderliggende lijst: geen vlak eronder, maar een verticale haarlijn die
   het rijtje bij het bovenliggende item houdt. */
ul.enno-mobiellijst ul.sub-menu {
    display: none;
    margin: 0 26px 12px;
    padding-left: 16px;
    border-left: 1px solid rgba(192, 120, 88, 0.3);
}

ul.enno-mobiellijst li.is-open > ul.sub-menu { display: block; }

ul.enno-mobiellijst ul.sub-menu a {
    padding: 7px 0;
    font-family: var(--font-lees);
    font-size: 1.02rem;
    line-height: 1.4;
    letter-spacing: 0;
    color: #4a453d;
}

ul.enno-mobiellijst ul.sub-menu a:hover,
ul.enno-mobiellijst ul.sub-menu a:focus {
    color: var(--accent-color);
    padding-left: 5px;
}

ul.enno-mobiellijst ul.sub-menu li.current-menu-item > a { color: var(--accent-color); }
ul.enno-mobiellijst ul.sub-menu li.current-menu-item > a::after { left: -21px; }

/* ---------- voet van het paneel ---------- */
.enno-mobielmenu-voet {
    position: relative;
    padding: 22px 26px 24px;
    background: linear-gradient(to bottom, rgba(244, 239, 235, 0.55), rgba(244, 239, 235, 0.95));
}

/* Verlopende haarlijn met een ruitje in het midden, zoals de scheidingen
   elders op de site. */
.enno-mobielmenu-voet::before {
    content: '';
    position: absolute;
    top: 0;
    right: 26px;
    left: 26px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(160, 140, 110, 0.7), transparent);
}

.enno-mobielmenu-voet::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    background: var(--accent-color);
    transform: rotate(45deg);
}

.enno-mobielmenu-cta {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 20px;
    border-radius: 2px;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-align: center;
}

.enno-mobielmenu-gegevens {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    font-family: var(--font-body);
    font-size: 0.86rem;
    color: #5c554b;
}

.enno-mobielmenu-gegevens a,
.enno-mobielmenu-gegevens span {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #5c554b;
    text-decoration: none;
    transition: color 0.25s ease;
}

.enno-mobielmenu-gegevens a:hover,
.enno-mobielmenu-gegevens a:focus { color: var(--accent-color); }

.enno-mobielmenu-gegevens svg {
    flex-shrink: 0;
    color: var(--accent-color);
    opacity: 0.85;
}

/* ---------- de regels komen na elkaar in beeld ---------- */
.enno-mobielmenu-kop,
.enno-mobielmenu-zoek,
ul.enno-mobiellijst > li,
.enno-mobielmenu-voet {
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.enno-menu-open .enno-mobielmenu-kop,
body.enno-menu-open .enno-mobielmenu-zoek,
body.enno-menu-open ul.enno-mobiellijst > li,
body.enno-menu-open .enno-mobielmenu-voet {
    opacity: 1;
    transform: translateX(0);
}

body.enno-menu-open .enno-mobielmenu-kop { transition-delay: 0.06s; }
body.enno-menu-open .enno-mobielmenu-zoek { transition-delay: 0.11s; }
body.enno-menu-open ul.enno-mobiellijst > li:nth-child(1) { transition-delay: 0.15s; }
body.enno-menu-open ul.enno-mobiellijst > li:nth-child(2) { transition-delay: 0.18s; }
body.enno-menu-open ul.enno-mobiellijst > li:nth-child(3) { transition-delay: 0.21s; }
body.enno-menu-open ul.enno-mobiellijst > li:nth-child(4) { transition-delay: 0.24s; }
body.enno-menu-open ul.enno-mobiellijst > li:nth-child(5) { transition-delay: 0.27s; }
body.enno-menu-open ul.enno-mobiellijst > li:nth-child(6) { transition-delay: 0.3s; }
body.enno-menu-open ul.enno-mobiellijst > li:nth-child(7) { transition-delay: 0.33s; }
body.enno-menu-open ul.enno-mobiellijst > li:nth-child(8) { transition-delay: 0.36s; }
body.enno-menu-open ul.enno-mobiellijst > li:nth-child(9) { transition-delay: 0.39s; }
body.enno-menu-open .enno-mobielmenu-voet { transition-delay: 0.42s; }

/* Wie beweging liever mist, krijgt alles meteen en zonder schuiven. */
@media (prefers-reduced-motion: reduce) {
    .enno-mobielmenu,
    .enno-mobieloverlay,
    .enno-mobielmenu-kop,
    .enno-mobielmenu-zoek,
    ul.enno-mobiellijst > li,
    .enno-mobielmenu-voet,
    .enno-mobielknop-streep,
    .enno-mobiel-vouw svg {
        transition: none !important;
    }
    .enno-mobielmenu-kop,
    .enno-mobielmenu-zoek,
    ul.enno-mobiellijst > li,
    .enno-mobielmenu-voet {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   De balk onder 1100px
   ========================================================================== */
@media (max-width: 1100px) {
    button.enno-mobielknop { display: flex; }

    /* Zoekicoon en aanmeldknop staan in het paneel. */
    body .header-actions .search-icon,
    body .header-actions .btn-primary { display: none; }

    body .header-actions { gap: 0; }

    /* Het logo mag niet over drie regels vallen. */
    .header-logo-text .title,
    .header-logo-text .subtitle { white-space: nowrap; }
    .header-logo-text .title { font-size: 1.24rem; letter-spacing: 1.6px; }
    .header-logo-text .subtitle { font-size: 0.6rem; letter-spacing: 2.6px; }
    .feather-logo { width: 32px; height: 32px; }
}

@media (max-width: 400px) {
    .header-logo-text .title { font-size: 1.1rem; letter-spacing: 1.2px; }
    .header-logo-text .subtitle { font-size: 0.54rem; letter-spacing: 2.2px; }
    .enno-mobielmenu-kop,
    .enno-mobielmenu-zoek { padding-left: 20px; padding-right: 20px; }
    .enno-mobiellijst a { padding-left: 20px; padding-right: 20px; }
    .enno-mobiellijst .menu-item-has-children > a { padding-right: 58px; }
    ul.enno-mobiellijst > li + li > a::before { right: 20px; left: 20px; }
    ul.enno-mobiellijst ul.sub-menu { margin-left: 20px; margin-right: 20px; }
    .enno-mobielmenu-voet { padding-left: 20px; padding-right: 20px; }
    .enno-mobielmenu-voet::before { right: 20px; left: 20px; }
    .enno-mobiellijst a { font-size: 1.14rem; }
}

/* Boven 1100px bestaat het paneel niet. */
@media (min-width: 1101px) {
    .enno-mobielmenu,
    .enno-mobieloverlay { display: none !important; }
}

/* ==========================================================================
   Het gedicht bij het logo en bij de kop op de voorpagina
   --------------------------------------------------------------------------
   Eén venster dat door de JavaScript bij de aanwijzer wordt gezet. Het staat
   onderin de body en zweeft daarboven; position: absolute met de paginascroll
   erin verrekend, zodat het bij de aanwijzer blijft staan tijdens het scrollen.
   ========================================================================== */
.enno-gedichtvenster {
    position: absolute;
    z-index: 120;
    width: min(340px, calc(100vw - 24px));
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.24s ease, transform 0.24s ease;
    pointer-events: none;
}

.enno-gedichtvenster.is-open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.enno-gedichtvenster-binnen {
    position: relative;
    padding: 30px 32px 26px;
    background: var(--primary-color);
    border-radius: 3px;
    box-shadow: 0 30px 60px -28px rgba(20, 26, 19, 0.75);
    text-align: center;
    color: #f2efe9;
}

/* Een dun randje in het accent, als de kaft van een bundel. */
.enno-gedichtvenster-binnen::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(242, 239, 233, 0.16);
    border-radius: 2px;
    pointer-events: none;
}

.enno-gedichtvenster-kop {
    margin: 0 0 18px;
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--accent-color);
}

.enno-gedichtvenster-tekst {
    margin: 0;
    font-family: var(--font-lees);
    font-size: 1.12rem;
    font-style: italic;
    line-height: 1.85;
    color: #f2efe9;
}

.enno-gedichtvenster-dichter {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(242, 239, 233, 0.18);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.6px;
    color: rgba(242, 239, 233, 0.62);
}

button.enno-gedichtvenster-sluit {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: rgba(242, 239, 233, 0.5);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

button.enno-gedichtvenster-sluit:hover,
button.enno-gedichtvenster-sluit:focus-visible {
    background: rgba(242, 239, 233, 0.12);
    color: #f2efe9;
}

/* De aanwijzers: een hint dat er iets achter zit, zonder dat het schreeuwt. */
.header-logo a[aria-expanded],
.elementor-element-hheroTtl[aria-expanded] {
    cursor: help;
}

@media (prefers-reduced-motion: reduce) {
    .enno-gedichtvenster {
        transition: none;
        transform: none;
    }
}

@media (max-width: 640px) {
    .enno-gedichtvenster-binnen { padding: 26px 22px 22px; }
    .enno-gedichtvenster-tekst { font-size: 1.04rem; line-height: 1.75; }
}

/* ==========================================================================
   Schuifbalken
   --------------------------------------------------------------------------
   De grijze balk van het besturingssysteem staat vloekend naast de warme
   kleuren van de site. Twee opzetten naast elkaar: scrollbar-color is de
   nieuwe, die Firefox en Chrome vanaf 121 volgen, en de ::-webkit-regels
   vangen oudere Chrome en Safari op. Dezelfde kleuren, zodat het overal
   hetzelfde oogt; alleen het oplichten bij aanwijzen kan de nieuwe opzet niet.
   ========================================================================== */
:root {
    /* Donker genoeg om tegen de baan uit te komen: 3,2:1. Bij #b3a897 was
       dat 2,1:1 en dan zie je de balk op een licht scherm nauwelijks. */
    --enno-balk: #8f8578;
    --enno-balk-baan: #f4efeb;
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--enno-balk) var(--enno-balk-baan);
}

* {
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

*::-webkit-scrollbar-track {
    background: var(--enno-balk-baan);
}

*::-webkit-scrollbar-thumb {
    background: var(--enno-balk);
    border: 3px solid var(--enno-balk-baan);
    border-radius: 6px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* De hoek waar een liggende en een staande balk elkaar raken. */
*::-webkit-scrollbar-corner {
    background: var(--enno-balk-baan);
}

/* Op donkere vlakken hoort de balk mee te kleuren. */
.enno-gedichtvenster-inhoud,
.site-footer {
    --enno-balk: #8d8377;
    --enno-balk-baan: #efe9e3;
}

/* ==========================================================================
   Koptekst op de voorpagina
   --------------------------------------------------------------------------
   Daar ligt de koptekst over de hero met de diavoorstelling, en die is donker.
   Logo, menu en zoekicoon gaan daar mee naar wit. Alleen op de voorpagina: op
   de andere pagina's staat de koptekst op een lichte ondergrond en zou wit
   onzichtbaar zijn.

   De schaduw is er voor het lichte beeld van de twee; op het donkere valt hij
   niet op. Het uitklapmenu blijft donker op wit, want dat is een eigen paneel.
   ========================================================================== */
body.home .site-header {
    --enno-kop-tekst: #ffffff;
    --enno-kop-zacht: rgba(255, 255, 255, 0.74);
    --enno-kop-schaduw: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* De veer is een svg met stroke="#111" als attribuut; een css-eigenschap wint
   daarvan, want presentatieattributen wegen het lichtst van alles. */
body.home .header-logo svg,
body.home .search-icon svg {
    stroke: var(--enno-kop-tekst);
}

body.home .header-logo .title {
    color: var(--enno-kop-tekst);
    text-shadow: var(--enno-kop-schaduw);
}

body.home .header-logo .subtitle {
    color: var(--enno-kop-zacht);
    text-shadow: var(--enno-kop-schaduw);
}

/* Alleen het bovenste niveau: de links in het uitklapmenu staan op een wit
   paneel en moeten donker blijven. */
body.home .main-navigation .menu > li > a {
    color: var(--enno-kop-tekst);
    text-shadow: var(--enno-kop-schaduw);
}

body.home .main-navigation .menu > li > a:hover,
body.home .main-navigation .menu > li.current-menu-item > a {
    color: #f0d2be;
}

body.home .main-navigation .menu > li.current-menu-item > a {
    border-bottom-color: #f0d2be;
}

/* De groene knop verdwijnt bijna in een donkere foto; een dun randje geeft hem
   weer een vorm. */
body.home .header-actions .btn-primary {
    border: 1px solid rgba(255, 255, 255, 0.28);
}

/* De hamburger op smalle schermen ligt op dezelfde foto. */
body.home .enno-mobielknop-streep {
    background: var(--enno-kop-tekst);
}