/* Kunst in Kaart — Permanente zoekbalk in de header
   Mobiel (<992px): balk onder de header, scrollt mee weg (bewust niet sticky).
     Markup: template-parts/header/header-mobile-search.php
   Desktop (>=992px): logo links, balk midden, iconen rechts, menu eronder.
     Markup: template-parts/header/header-desktop-search.php */

.kik-mobile-search,
.kik-desktop-search {
    display: none;
}

/* Zoekbalk als subtiele pill (bol.com-stijl): volledig ronde hoeken,
   zacht randje, vergrootglas ín de balk i.p.v. donker blok erachter */
.kik-mobile-search .dgwt-wcas-search-input,
.kik-desktop-search .dgwt-wcas-search-input {
    height: 42px !important;
    background: #fff !important;
    border: 1px solid #ddd9d1 !important;
    border-radius: 999px !important;
    padding-left: 20px !important;
    padding-right: 52px !important;
    box-shadow: none !important;
}

.kik-mobile-search .dgwt-wcas-search-input:focus,
.kik-desktop-search .dgwt-wcas-search-input:focus {
    border-color: #141414 !important;
    box-shadow: none !important;
}

.kik-mobile-search .dgwt-wcas-search-submit,
.kik-desktop-search .dgwt-wcas-search-submit {
    background: transparent !important;
    width: 48px;
    height: 42px;
    border-radius: 0 999px 999px 0;
}

.kik-mobile-search .dgwt-wcas-search-submit:hover,
.kik-desktop-search .dgwt-wcas-search-submit:hover {
    background: transparent !important;
}

.kik-mobile-search .dgwt-wcas-search-submit::before,
.kik-desktop-search .dgwt-wcas-search-submit::before {
    display: none !important;
}

.kik-mobile-search .dgwt-wcas-search-submit svg,
.kik-desktop-search .dgwt-wcas-search-submit svg,
.kik-mobile-search .dgwt-wcas-search-submit svg path,
.kik-desktop-search .dgwt-wcas-search-submit svg path {
    fill: #141414 !important;
}

/* Vergrootglas-icoon overal verbergen: de balk staat er nu altijd al */
.nm-menu-search {
    display: none !important;
}

@media all and (max-width: 991px) {
    .kik-mobile-search {
        display: block;
        background: #fff;
        padding: 4px 15px 10px;
        border-bottom: 1px solid #ebebeb;
    }

    .kik-mobile-search .dgwt-wcas-search-wrapp {
        max-width: none;
        margin: 0;
    }
}

@media all and (min-width: 992px) {
    /* Logo/zoekbalk-rij krijgt een eigen band (warm lichtgrijs); de menurij
       eronder blijft wit via een full-bleed pseudo-element (Coolblue/bol-patroon) */
    body:not(.header-transparency) .nm-header.stacked-centered {
        background: #f6f5f2;
        padding-bottom: 0;
    }

    .nm-header.stacked-centered .nm-header-col {
        display: grid;
        grid-template-columns: 1fr minmax(280px, 520px) 1fr;
        grid-template-areas:
            "logo search right"
            "menu menu menu";
        align-items: center;
        column-gap: 30px;
    }

    .nm-header.stacked-centered .nm-header-left {
        grid-area: logo;
        width: auto;
        justify-content: flex-start;
    }

    .kik-desktop-search {
        display: block;
        grid-area: search;
        width: 100%;
        min-width: 0;
    }

    .kik-desktop-search .dgwt-wcas-search-wrapp {
        max-width: 520px;
        margin: 0 auto;
    }

    .nm-header.stacked-centered .nm-right-menu {
        grid-area: right;
        justify-self: center;
    }

    body .nm-header.stacked-centered .nm-main-menu {
        grid-area: menu;
        justify-self: stretch;
        text-align: center;
        position: relative;
        margin-top: 10px;
        padding: 2px 0 4px;
    }

    /* Compactere menurij: minder boven- en onderruimte op de menu-links */
    .nm-header.stacked-centered .nm-main-menu > ul > li > a {
        padding-top: 9px;
        padding-bottom: 9px;
    }

    /* De menurij is gecentreerd, maar binnen de uitklapmenu's (mega-menu's
       zoals Materialen/Info) moet de inhoud gewoon links uitgelijnd blijven */
    body .nm-header.stacked-centered .nm-main-menu .sub-menu {
        text-align: left;
    }

    /* Taalvlaggetje (GTranslate) verhuist via JS naar de band rechtsboven;
       in het hoofdmenu verbergen zodat de menu-items gecentreerd staan */
    .nm-main-menu .menu-item-gtranslate {
        display: none;
    }

    .nm-right-menu .menu-item-gtranslate .sub-menu {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        min-width: 0;
        width: 64px;
        padding: 10px 0;
    }

    .nm-right-menu .menu-item-gtranslate .sub-menu li a {
        display: block;
        text-align: center;
        padding: 8px 0;
    }

    .nm-header.stacked-centered .nm-main-menu::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -100vw;
        right: -100vw;
        background: #fff;
        z-index: -1;
    }
}

/* Smallere desktops: compactere menu-items zodat alles op één regel blijft */
@media all and (min-width: 992px) and (max-width: 1280px) {
    .nm-header.stacked-centered .nm-main-menu > ul > li > a {
        padding-left: 9px;
        padding-right: 9px;
        font-size: 15px;
    }
}