/**
 * Mobiel hamburgermenu voor Trekhaak Noord.
 *
 * De menu-items zijn in gesloten toestand zelf de streepjes van de hamburger
 * en vouwen open tot leesbare menuregels. De links komen uit het bestaande
 * Elementor-menu; zie assets/mobile-menu.js.
 */

.thn-menu {
    /* --- Hier tune je het menu --- */
    --thn-menu-line: #FAFAFA;        /* kleur van de streepjes en het kruisje */
    --thn-menu-color: #FFFFFF;       /* kleur van de menuteksten */
    --thn-menu-current: #FFC21A;     /* kleur van de pagina waar je nu bent */
    --thn-menu-backdrop: #0C2B3B;    /* achtergrond van het open menu */
    --thn-menu-width: 250px;         /* breedte van een menuregel */
    --thn-menu-row: 44px;            /* hoogte van een menuregel */
    --thn-menu-row-sub: 34px;        /* hoogte van een regel uit een submenu */
    --thn-menu-size: 22px;           /* tekstgrootte */
    --thn-menu-size-sub: 16px;
    --thn-menu-drop: 62px;           /* hoe ver het menu onder het icoon zakt */
    --thn-menu-edge: 12px;           /* afstand tot de rechterrand */
    --thn-menu-speed: .5s;
    --thn-menu-stagger: .05s;        /* vertraging per regel */

    position: fixed;
    inset: 0;
    z-index: 99990;
    pointer-events: none;            /* alleen de knop en het open menu vangen klikken */
    display: none;                   /* alleen zichtbaar zolang Elementor de hamburger toont */
}

body.thn-menu-active .thn-menu {
    display: block;
}

/* Het Elementor-icoon blijft staan voor de positie, maar is onzichtbaar. */
body.thn-menu-active .elementor-menu-toggle {
    visibility: hidden;
    pointer-events: none;
}

body.thn-menu-active nav.elementor-nav-menu--dropdown {
    display: none !important;
}

/* Het blauwe vlak achter het menu, over het hele scherm. */
.thn-menu .thn-menu__backdrop {
    position: absolute;
    inset: 0;
    background: var(--thn-menu-backdrop);
    opacity: 0;
    transition: opacity var(--thn-menu-speed) ease;
}

/* Kopie van het logo, precies op de plek van het echte logo in de header. */
.thn-menu .thn-menu__logo {
    position: absolute;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--thn-menu-speed) ease;
}

.thn-menu .thn-menu__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.thn-menu.is-open .thn-menu__logo {
    opacity: 1;
    pointer-events: auto;
}

/* Ligt precies op het Elementor-icoon; mobile-menu.js houdt de positie bij. */
.thn-menu .thn-menu__anchor {
    position: absolute;
    top: 0;
    left: 0;
    width: 45px;
    height: 45px;
}

/* ---------- De knop: hamburger dicht, kruisje open ---------- */

.thn-menu .thn-menu__button {
    position: absolute;
    inset: 0;
    padding: 0;
    background: transparent;
    background-image: none;
    border: 0;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

/* Het thema kleurt knoppen bij aanraken of focus geel; hier niet. */
.thn-menu .thn-menu__button:hover,
.thn-menu .thn-menu__button:focus,
.thn-menu .thn-menu__button:active,
.thn-menu .thn-menu__button:focus-visible {
    background: transparent;
    background-image: none;
    border: 0;
    box-shadow: none;
    outline: none;
}

/* Wel een zichtbare rand voor wie met het toetsenbord navigeert. */
.thn-menu .thn-menu__button:focus-visible {
    outline: 2px solid var(--thn-menu-line);
    outline-offset: 4px;
}

.thn-menu .thn-menu__button::before,
.thn-menu .thn-menu__button::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--thn-menu-line);
    transition: transform var(--thn-menu-speed) ease;
}

.thn-menu .thn-menu__button::before {
    transform: translateY(-50%) rotate(45deg) scale(0);
}

.thn-menu .thn-menu__button::after {
    transform: translateY(-50%) rotate(-45deg) scale(0);
}

/* ---------- De menuregels, die dicht de streepjes vormen ---------- */

.thn-menu .thn-menu__nav {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -12px;               /* de drie streepjes rond het midden */
    text-align: right;
    transition: transform var(--thn-menu-speed) ease;
}

.thn-menu .thn-menu__item {
    display: block;
    position: relative;
    width: 26px;
    height: 2px;
    margin: 0 0 7px auto;
    overflow: hidden;
    color: transparent;
    font-family: "Poppins", sans-serif;
    font-size: var(--thn-menu-size);
    font-weight: 500;
    letter-spacing: -0.3px;
    line-height: 2px;
    text-decoration: none;
    white-space: nowrap;
    transition:
        width var(--thn-menu-speed) ease,
        height var(--thn-menu-speed) ease,
        line-height var(--thn-menu-speed) ease,
        margin var(--thn-menu-speed) ease,
        color .3s ease,
        opacity .25s ease;
}

/* Het streepje zelf. */
.thn-menu .thn-menu__item::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    background: var(--thn-menu-line);
    transition: opacity .3s ease;
}

/* Alleen de eerste drie regels vormen de hamburger; de rest zit verstopt. */
.thn-menu .thn-menu__item:nth-child(2) { width: 18px; }

.thn-menu .thn-menu__item:nth-child(n + 4) {
    height: 0;
    margin-bottom: 0;
    opacity: 0;
}

/* ---------- Open ---------- */

.thn-menu.is-open {
    pointer-events: auto;
}

.thn-menu.is-open .thn-menu__backdrop {
    opacity: .97;
}

.thn-menu.is-open .thn-menu__button::before {
    transform: translateY(-50%) rotate(45deg) scale(1);
}

.thn-menu.is-open .thn-menu__button::after {
    transform: translateY(-50%) rotate(-45deg) scale(1);
}

/* De regels zakken onder de knop zodat ze het kruisje vrijlaten. */
.thn-menu.is-open .thn-menu__nav {
    transform: translateY(var(--thn-menu-drop));
}

.thn-menu.is-open .thn-menu__item {
    width: var(--thn-menu-width);
    height: var(--thn-menu-row);
    line-height: var(--thn-menu-row);
    margin-bottom: 2px;
    color: var(--thn-menu-color);
    opacity: 1;
}

.thn-menu.is-open .thn-menu__item::before {
    opacity: 0;
}

.thn-menu.is-open .thn-menu__item--sub {
    height: var(--thn-menu-row-sub);
    line-height: var(--thn-menu-row-sub);
    font-size: var(--thn-menu-size-sub);
    opacity: .75;
}

.thn-menu.is-open .thn-menu__item--current {
    color: var(--thn-menu-current);
}

/* Regels verschijnen en verdwijnen na elkaar; mobile-menu.js zet de volgorde. */
.thn-menu .thn-menu__item {
    transition-delay: calc(var(--thn-menu-index, 0) * var(--thn-menu-stagger));
}

.thn-menu .thn-menu__item::before {
    transition-delay: calc(var(--thn-menu-index, 0) * var(--thn-menu-stagger));
}

.thn-menu.is-open .thn-menu__item,
.thn-menu.is-open .thn-menu__item::before {
    transition-delay: calc(var(--thn-menu-index-open, 0) * var(--thn-menu-stagger));
}

/* Direct sluiten zonder animatie: bij het volgen van een link, en als Safari
   een bewaarde pagina terugzet. Anders blijft de animatie halverwege hangen. */
.thn-menu.is-instant,
.thn-menu.is-instant *,
.thn-menu.is-instant *::before,
.thn-menu.is-instant *::after {
    transition: none !important;
}

/* Geen scrollen achter het open menu. */
body.thn-menu-open {
    overflow: hidden;
}

/* Minder beweging: alles direct, zonder overgangen. */
@media (prefers-reduced-motion: reduce) {
    .thn-menu * {
        transition-duration: .01s !important;
        transition-delay: 0s !important;
    }
}