/* ==========================================================================
   AGDS Nav Search — zoek-icoon + zoekbalk met live suggesties (typeahead).
   Laadt alleen wanneer de Elementor-switcher "Zoekfunctie tonen" aan staat.
   - Desktop >=1200px: icoon rechts van de menu-items; open = menu-items
     onzichtbaar, zoekbalk op exact dezelfde plek (absolute overlay, dus
     geen layout shift); icoon wordt sluitkruis.
   - Mobiel <=1199px: icoon links naast de hamburger; open = zoekbalk over
     de volle breedte direct onder de header (top via --agds-search-top,
     gezet door de JS).
   Kleuren/vormen volgen het menu: wit -> #43007B bij sticky, accent
   #D100AF, dropdownpaneel wit met 6px radius + zachte schaduw.
   ========================================================================== */

/* ------- Toggle-knop: stijl van een menu-item ------- */
.agds-nav__search-toggle {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    background: none;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    position: relative;
    flex: 0 0 auto;
    line-height: 0;
    transition: color 0.3s ease;
}
/* Zelfde hover-onderstreping (roze) als de menu-items. */
.agds-nav__search-toggle::after {
    content: "";
    position: absolute;
    left: 16px; right: 16px; bottom: 6px;
    height: 2px;
    background-color: #D100AF;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.agds-nav__search-toggle:hover::after,
.agds-nav__search-toggle:focus-visible::after { opacity: 1; }
.agds-nav__search-toggle:focus-visible {
    outline: 2px solid #D100AF;
    outline-offset: 2px;
    border-radius: 3px;
}
/* Kleuromslag bij sticky header, identiek aan de menu-items. */
[data-elementor-type="header"].is-sticky .agds-nav__search-toggle { color: #43007B; }

/* Icoon-wissel: vergrootglas <-> kruis. */
.agds-nav__search-icon-close { display: none; }
.agds-nav.is-search-open .agds-nav__search-icon-open  { display: none; }
.agds-nav.is-search-open .agds-nav__search-icon-close { display: block; }

/* ------- Zoekpaneel (formulier + suggesties) ------- */
.agds-nav__search {
    opacity: 0;
    transform: translateY(-50%) translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.agds-nav__search.is-visible { opacity: 1; transform: translateY(-50%); }

.agds-nav__search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e7def2;
    border-radius: 999px;
    padding: 4px 4px 4px 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
/* Focus: subtiele borderverdonkering (geen roze ring — het paneel heeft al
   een eigen rand en de cursor in het veld is de primaire indicator). */
.agds-nav__search-form:focus-within { border-color: #c9b6e0; }
.agds-nav__search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    outline: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    color: #43007B;
    padding: 8px 0;
}
.agds-nav__search-input::placeholder { color: #9a8bad; font-weight: 500; }

/* ------- Suggestielijst: zelfde look als de dropdownpanelen ------- */
.agds-nav__search-results {
    position: absolute;
    top: 100%; left: 0; right: 0;
    margin-top: 8px;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    padding: 8px 0;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.agds-nav__search-result {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 18px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}
.agds-nav__search-result:hover,
.agds-nav__search-result.is-active { background: #f5f0fa; }
.agds-nav__search-result-type {
    flex: 0 0 auto;
    font-weight: 600;
    font-size: 11.5px;
    opacity: 0.55;
}
.agds-nav__search-empty {
    padding: 11px 18px;
    font-family: 'Poppins', sans-serif;
    font-size: 13.5px;
    font-style: italic;
    color: #6F6C8F;
}
/* "Alle resultaten tonen" — voetregel die naar de volledige zoekpagina
   linkt (suggesties zijn beperkt tot 6). Roze, met chevron rechts. */
.agds-nav__search-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    padding: 12px 18px;
    border-top: 1px solid #f0eaf5;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    color: #D100AF;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.agds-nav__search-all:hover,
.agds-nav__search-all:focus-visible,
.agds-nav__search-all.is-active {
    color: #D100AF;
    background: #f5f0fa;
}
/* Chevron staat rechts van de tekst en schuift subtiel mee op hover. */
.agds-nav__search-all-chevron {
    flex: 0 0 auto;
    width: 16px; height: 16px;
    transition: transform 0.2s ease;
}
.agds-nav__search-all:hover .agds-nav__search-all-chevron,
.agds-nav__search-all:focus-visible .agds-nav__search-all-chevron {
    transform: translateX(3px);
}
.agds-nav__search-all svg path { fill: currentColor; }
/* In het fullscreen-mobielpaneel blijft de voetregel onderaan plakken. */
@media (max-width: 1199px) {
    .agds-nav__search-all { position: sticky; bottom: 0; background: #ffffff; }
    .agds-nav__search-all:hover,
    .agds-nav__search-all:focus-visible,
    .agds-nav__search-all.is-active { background: #f5f0fa; }
}

/* ------- Desktop >=1200px ------- */
@media (min-width: 1200px) {
    /* Open: menu-items onzichtbaar maar ruimte blijft staan (geen layout
       shift); het zoekpaneel ligt als overlay op exact die plek. De 60px
       rechts houdt de toggle-knop (nu sluitkruis) vrij. */
    .agds-nav.is-search-open .agds-nav__list { visibility: hidden; }
    .agds-nav__search {
        position: absolute;
        top: 50%; left: 0; right: 60px;
        z-index: 110;   /* boven de dropdown-submenu's (100) */
    }
}

/* ------- Mobiel/tablet <=1199px ------- */
@media (max-width: 1199px) {
    /* Icoon links naast de hamburger; altijd donkerpaars op de witte balk. */
    .agds-nav__search-toggle,
    .agds-nav__search-toggle:hover,
    .agds-nav__search-toggle:focus {
        order: -1;
        color: #43007B !important;
        min-width: 44px; min-height: 44px;   /* touch target */
        padding: 8px;
    }
    .agds-nav__search-toggle::after { display: none; }

    /* Fullscreen-overlay onder de header: vult de hele viewport tot onderaan.
       --agds-search-top (door de JS = onderkant header) houdt de header met
       de sluitknop vrij bovenaan. De pagina erachter wordt scroll-locked
       (body.agds-search-open, zie onder). */
    .agds-nav__search {
        position: fixed;
        top: var(--agds-search-top, 64px);
        left: 0; right: 0; bottom: 0;
        z-index: 9970;   /* onder drawer (9990) en backdrop (9980) */
        display: flex;
        flex-direction: column;
        background: #ffffff;
        border-top: 1px solid #f0eaf5;
        box-shadow: 0 12px 24px rgba(20, 0, 40, 0.14);
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        transform: none !important;   /* wint van de desktop-basisregel (-50%) */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }
    .agds-nav__search.is-visible {
        opacity: 1;
        visibility: visible;
        transform: none !important;
        transition: opacity 0.2s ease, visibility 0s;   /* K-111: direct focusbaar */
    }
    .agds-nav__search-form { box-shadow: none; flex: 0 0 auto; }
    /* Minimaal 16px: kleinere invoervelden laten iOS automatisch inzoomen
       bij focus, waardoor de vaste header breder dan de (ingezoomde)
       viewport wordt en er horizontale scroll ontstaat. */
    .agds-nav__search-input { font-size: 16px; }
    /* Suggesties vullen de resterende hoogte en scrollen intern. */
    .agds-nav__search-results {
        position: static;
        margin-top: 12px;
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        box-shadow: none;
        border: none;
        overflow-y: auto;
    }
}

/* Pagina achter een open overlay (menu-drawer of zoek) niet scrollbaar.
   Op mobiel/tablet; op desktop is de zoekbalk een kleine inline-overlay. */
@media (max-width: 1199px) {
    body.agds-search-open { overflow: hidden; }
}

/* ==========================================================================
   OVERRIDES — afschermen van kit-/themastyling (zelfde aanpak als het menu):
   geen knop-achtergrond of pill-radius op de toggle, en — les van de
   drawer-iconen — expliciete SVG-maten mét !important, anders klapt een
   brede themaregel de classloze SVG's in tot 0px breed.
   ========================================================================== */
.agds-nav .agds-nav__search-toggle,
.agds-nav .agds-nav__search-toggle:hover,
.agds-nav .agds-nav__search-toggle:focus {
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.agds-nav .agds-nav__search-toggle svg {
    width: 22px !important; height: 22px !important; flex: 0 0 auto;
}
/* Zoekknop: zelfde stijl als de primaire button (site-header__cta /
   btn--primary): radial-gradient uit de kit + tweede gradient die op hover
   overvloeit (::before) + dezelfde schaduw. Alleen de -3px-lift is
   weggelaten: binnen de compacte zoekpill oogt dat verspringerig. */
.agds-nav .agds-nav__search-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    overflow: hidden;
    width: 40px !important; height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: radial-gradient(63.81% 165.62% at 50% 161.46%, var(--button-gradient-2, #D100AF) 0%, var(--button-gradient-1, #43007B) 100%) !important;
    color: #ffffff !important;
    cursor: pointer;
    line-height: 0;
    transition: box-shadow 0.3s ease;
}
.agds-nav .agds-nav__search-submit::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    background: radial-gradient(69.16% 132.29% at 50% 103.12%, var(--button-gradient-2, #D100AF) 10.43%, var(--button-gradient-1, #43007B) 100%);
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}
.agds-nav .agds-nav__search-submit:hover::before,
.agds-nav .agds-nav__search-submit:focus-visible::before { opacity: 1; }
.agds-nav .agds-nav__search-submit:hover,
.agds-nav .agds-nav__search-submit:focus-visible {
    color: #ffffff !important;
    box-shadow: 0 8px 16px rgba(143, 0, 120, 0.2) !important;
}
.agds-nav .agds-nav__search-submit svg {
    width: 18px !important; height: 18px !important; flex: 0 0 auto;
}
.agds-nav .agds-nav__search-toggle svg path,
.agds-nav .agds-nav__search-submit svg path {
    fill: currentColor !important;
}
/* Invoerveld: géén eigen rand/vlak — de omliggende pill heeft de rand al.
   !important omdat het parent theme (Hello Elementor) input[type=text] een
   eigen border en achtergrond geeft. */
.agds-nav .agds-nav__search-input,
.agds-nav .agds-nav__search-input:focus,
.agds-nav .agds-nav__search-input:hover {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}
/* Suggestie-links altijd merkpaars, ook tegen de kit-linkkleur in. */
.agds-nav .agds-nav__search-result,
.agds-nav .agds-nav__search-result:hover { color: #43007B !important; }

/* "Alle resultaten tonen" altijd merk-roze, tegen de kit-linkkleur in;
   chevron tekent in currentColor. */
.agds-nav .agds-nav__search-all,
.agds-nav .agds-nav__search-all:hover,
.agds-nav .agds-nav__search-all:focus-visible,
.agds-nav .agds-nav__search-all.is-active { color: var(--link-hover, #D100AF) !important; }
.agds-nav .agds-nav__search-all svg path { fill: currentColor !important; }

/* Suggestietitels: body-tekstkleur uit de kit; hover/toetsenbord-actief in
   de roze linkkleur van de huisstijl. Fallbacks voor het geval de
   kit-variabelen ooit hernoemd worden. */
.agds-nav .agds-nav__search-result .agds-nav__search-result-title {
    color: var(--body-dark, #5D4B6C) !important;
    transition: color 0.2s ease;
}
.agds-nav .agds-nav__search-result:hover .agds-nav__search-result-title,
.agds-nav .agds-nav__search-result:focus-visible .agds-nav__search-result-title,
.agds-nav .agds-nav__search-result.is-active .agds-nav__search-result-title {
    color: var(--link-hover, #D100AF) !important;
}

/* Alleen-voor-screenreaders (site heeft geen eigen sr-only-klasse). */
.agds-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ==========================================================================
   MOBIEL/TABLET — zoekknop als omlijnde icoonknop (secundaire-buttonstijl,
   zelfde patroon als de menu-knop). Ná het overrides-blok: overschrijft
   bewust de kit-neutralisatie hierboven.
   ========================================================================== */
@media (max-width: 1199px) {
    /* Border óók op :hover/:focus/:focus-visible, anders zet het
       overrides-blok (border:0 op :hover/:focus) hem op 0 nadat de zoekbalk
       sluit en de JS focus() teruggeeft aan de knop. */
    .agds-nav .agds-nav__search-toggle,
    .agds-nav .agds-nav__search-toggle:hover,
    .agds-nav .agds-nav__search-toggle:focus,
    .agds-nav .agds-nav__search-toggle:focus-visible {
        width: 44px; height: 44px;
        padding: 0 !important;
        border: 2px solid #43007B !important;
        border-radius: 50% !important;
        background: transparent !important;
        transition: color 0.3s ease, border-color 0.3s ease;
    }
    /* Hover / toetsenbord-focus: alléén kleuromslag donkerpaars -> roze. */
    .agds-nav .agds-nav__search-toggle:hover,
    .agds-nav .agds-nav__search-toggle:focus-visible {
        color: #D100AF !important;
        border-color: #D100AF !important;
    }
}