/* =========================================
   MOBILE MENU - DEFINITIEVE STYLING
   ========================================= */

/* --- 1. VARIABELEN (Uit Design) --- */

:root {
    --seku-black: #222220;
    --seku-white: #ffffff;
    --seku-grey: #f2f2f2;
    --seku-border: #9c9c9c;
    --seku-font: "Archivo", sans-serif;
    /* Of jouw ingestelde font */
}
/* --- 2. MENU CONTAINER (De Overlay) --- */

.mobile-menu-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* FIX: Use dynamic height so it fits between browser bars */
    height: 100vh;
    /* Fallback */
    height: 100dvh;
    /* Dynamic Viewport Height */
    background-color: var(--seku-white);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    /* Enables scrolling */
    -webkit-overflow-scrolling: touch;
    /* Smooth scroll on iOS */
    /* Animation settings remain the same */
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: all 0.3s ease-in-out;
}
/* ANIMATIE EIND-STAAT (Zichtbaar - via JS) */

.mobile-menu-container.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
/* --- 3. TOP BAR (Binnenin Menu) --- */

.mobile-menu-top {
    padding: 32px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.5px solid var(--seku-border);
    flex-shrink: 0;
    /* Zorgt dat deze balk niet krimpt */
}
/* De ZWARTE Close Knop (Volgens design) */

.mobile-menu-close {
    background-color: var(--seku-black);
    width: 48px;
    height: 48px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s;
}
.mobile-menu-close:hover {
    opacity: 0.8;
}
/* Het kruisje zelf (Wit) */

.mobile-menu-close::after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-color: #ffffff;
    /* Wit kruisje */
    -webkit-mask: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.6 5.9C17.8 5.9 17.9 6 17.9 6.1C18 6.1 18.1 6.2 18.1 6.4C18.1 6.6 18 6.7 17.9 6.7L12.7 12L13 12.4L17.9 17.3C18 17.3 18.1 17.4 18.1 17.6C18.1 17.8 18 17.9 17.9 17.9C17.9 18 17.8 18.1 17.6 18.1C17.4 18.1 17.3 18 17.3 17.9L12.4 13L12 12.7L6.7 17.9C6.7 18 6.6 18.1 6.4 18.1C6.2 18.1 6.1 18 6.1 17.9C6 17.9 5.9 17.8 5.9 17.6C5.9 17.4 6 17.3 6.1 17.3L11.3 12L11 11.6L6.1 6.7C6 6.7 5.9 6.6 5.9 6.4C5.9 6.2 6 6.1 6.1 6.1C6.1 6 6.2 5.9 6.4 5.9C6.6 5.9 6.7 6 6.7 6.1L11.6 11L12 11.3L17.3 6.1C17.3 6 17.4 5.9 17.6 5.9Z" fill="white"/></svg>') no-repeat center;
    mask: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.6 5.9C17.8 5.9 17.9 6 17.9 6.1C18 6.1 18.1 6.2 18.1 6.4C18.1 6.6 18 6.7 17.9 6.7L12.7 12L13 12.4L17.9 17.3C18 17.3 18.1 17.4 18.1 17.6C18.1 17.8 18 17.9 17.9 17.9C17.9 18 17.8 18.1 17.6 18.1C17.4 18.1 17.3 18 17.3 17.9L12.4 13L12 12.7L6.7 17.9C6.7 18 6.6 18.1 6.4 18.1C6.2 18.1 6.1 18 6.1 17.9C6 17.9 5.9 17.8 5.9 17.6C5.9 17.4 6 17.3 6.1 17.3L11.3 12L11 11.6L6.1 6.7C6 6.7 5.9 6.6 5.9 6.4C5.9 6.2 6 6.1 6.1 6.1C6.1 6 6.2 5.9 6.4 5.9C6.6 5.9 6.7 6 6.7 6.1L11.6 11L12 11.3L17.3 6.1C17.3 6 17.4 5.9 17.6 5.9Z" fill="white"/></svg>') no-repeat center;
}
/* --- 4. MENU ITEMS --- */

.mobile-menu-content {
    padding: 32px 0;
    flex-grow: 1;
    /* Neemt beschikbare ruimte in */
}
.mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mobile-nav-list>li>a {
    display: flex;
    justify-content: space-between;
    /* Tekst links, pijl rechts */
    align-items: center;
    padding: 12px 24px;
    font-family: var(--seku-font);
    font-size: 18px;
    color: var(--seku-black);
    text-decoration: none;
    font-weight: 400;
}
/* Actieve / Hover staat */

.mobile-nav-list>li>a:hover, .mobile-nav-list>li.current-menu-item>a {
    background-color: #f9f9f9;
}
/* --- 5. DROPDOWN (ACCORDION STYLE) --- */

/* Pijltje voor items met submenu */

.mobile-nav-list .menu-item-has-children>a::after {
    content: '';
    width: 24px;
    height: 24px;
    background-color: var(--seku-black);
    transition: transform 0.3s ease;
    /* Chevron SVG mask */
    -webkit-mask: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z" fill="black"/></svg>') no-repeat center;
    mask: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z" fill="black"/></svg>') no-repeat center;
}
/* Submenu zelf (standaard verborgen) */

.mobile-nav-list .sub-menu {
    display: none;
    /* JS toggelt dit */
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}
.mobile-nav-list .sub-menu a {
    padding-left: 40px;
    /* Inspringen */
    font-size: 16px;
    color: #555;
    padding-top: 10px;
    padding-bottom: 10px;
}
/* JS STATE: Als parent de class 'open' heeft */

.mobile-nav-list .menu-item-has-children.open .sub-menu {
    display: block;
    /* Toon submenu */
    max-width: calc(100% - 3rem);
    margin: 0.5rem auto;
}
.mobile-nav-list .menu-item-has-children.open>a::after {
    transform: rotate(180deg);
    /* Draai pijltje */
}
/* --- 6. FOOTER (ZOEKEN) --- */

.mobile-menu-footer {
    padding: 0 24px 32px 24px;
    margin-top: auto;
}
.search-title {
    font-family: var(--seku-font);
    font-size: 18px;
    color: var(--seku-black);
    margin-bottom: 16px;
    font-weight: 400;
}
.mobile-search-form .text-input {
    background-color: var(--seku-grey);
    /* Grijs vlak */
    border-radius: 4px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.mobile-search-form .search-field {
    background: transparent;
    border: none;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.6);
    width: 100%;
    outline: none;
}
.mobile-search-form .search-icon {
    opacity: 0.5;
}
/* =========================================
   HAMBURGER TOGGLE FIX (Design Match)
   ========================================= */

/* We targeten specifiek de knop in de mobiele balk */

.topnav-mobile .menu-toggle {
    /* 1. Vorm & Rand */
    border: 1px solid #222220;
    /* Donker lijntje uit design */
    border-radius: 4px !important;
    /* Forceer 4px hoeken i.p.v. rondje */
    background-color: transparent;
    /* 2. Afmetingen */
    padding: 12px;
    width: 50px;
    /* 24px icoon + 2x12px padding + 2px border = ~50px */
    height: 50px;
    /* 3. Positie */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
/* Hover state (optioneel, voor desktop/touch feedback) */

.topnav-mobile .menu-toggle:hover {
    background-color: #f9f9f9;
    border-color: #F37021;
    /* SEKU Oranje randje bij hover */
}
/* Zorg dat het icoontje binnenin goed staat */

.topnav-mobile .menu-toggle img, .topnav-mobile .menu-toggle svg {
    width: 24px;
    height: 24px;
    display: block;
}
/* =========================================
   MOBILE SUBMENU STYLING (Figma Match)
   ========================================= */

/* 1. Submenu Container (The Grey Box) */

body .site .mobile-nav-list .sub-menu {
    background-color: var(--grey-seku, #f2f2f2);
    /* Figma: #f2f2f2 */
    border-radius: 4px;
    padding: 28px 24px;
    /* Figma: padding-top/bottom 28px, left/right 24px */
    margin-top: 10px;
    /* Space between parent link and submenu */
    margin-bottom: 10px;
    display: none;
    /* Hidden by default, toggled via JS */
    flex-direction: column;
    gap: 0;
    /* Gaps handled by padding/borders */
    padding-top: 0;
    padding-bottom: 0;
}
/* 2. Submenu Items (LI) */

body .site .mobile-nav-list .sub-menu li {
    width: 100%;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--dark-grey-seku, #9c9c9c);
    /* Figma: line-6, line-7, etc. */
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    /* 1.9125rem */
}
/* Remove border from the last item */

body .site .mobile-nav-list .sub-menu li:last-child {
    border-bottom: none;
}
/* 3. Submenu Links (A) */

body .site .mobile-nav-list .sub-menu li a {
    display: block;
    padding: 24px 0;
    /* Figma: gap 24px implies spacing around text */
    color: var(--black-seku, #222220);
    font-family: var(--font-body, "Archivo", sans-serif);
    font-size: 16px;
    /* Figma: vastgoedonderhoud2 font-size */
    line-height: 170%;
    font-weight: 400;
    /* Regular */
    text-decoration: none;
    background: transparent;
    /* Ensure no white bg from parent */
}
/* Hover State for Submenu Links */

body .site .mobile-nav-list .sub-menu li a:hover {
    color: var(--orange-seku, #f05a22);
    /* Optional interaction feedback */
}
body .mobile-nav-list>li>a:hover {
    background-color: #fff;
}
body .mobile-nav-list>li.current-menu-item>a {
    background-color: #fff;
}