/* Bleed-through-neutralizers voor klassen die in beide CSS-bestanden voorkomen.
 *
 * Probleem: hulp.css (nieuwe layout) heeft regels voor `.hero`, `.flow__steps`,
 * `.flow__step`, `.flow__step + .flow__step::before` etc. De gescoopte legacy
 * (.legacy-landing .X) wint op specificity voor properties die beide bestanden
 * zetten — maar voor properties die ALLEEN in hulp.css staan (zoals
 * `text-align: center` op `.hero` of de driehoek-pseudo's), is er geen
 * legacy-tegenwicht en bleed dat door.
 *
 * Deze file wordt geladen NA hulp-scoped.css en bevat alleen overrides voor
 * de specifieke gevallen waar new-layout-CSS in de legacy-landing markup
 * lekt. Specificity ≥ (0,2,0) zodat we de single-class new-rules verslaan
 * en gelijkstand met scoped-legacy hebben (waar legacy zelf geen waarde zet
 * voor de property — anders zou de cascade-volgorde beslissen).
 */

/* HERO — hulp.css line 344: `.hero { text-align: center }`
   Legacy zet text-align niet op .hero zelf, dus center bleed door en
   centreert paragraaf + zoekformulier in de hero. Reset naar links. */
.legacy-landing .hero {
    text-align: left;
}

/* FLOW — hulp.css line 486: triangle pseudo-element tussen flow-steps.
   Legacy heeft eigen step-separators op .flow__steps (niet op de items),
   dus de nieuwe driehoekjes zijn een dubbele/foute toevoeging. */
.legacy-landing .flow__step + .flow__step::before {
    content: none;
}

/* FLOW SPACING — hulp.css zet `gap` op .flow__steps en .flow__step.
   Legacy gebruikt margins voor spacing (margin-left: 11% op step+step).
   `gap` komt daar bovenop = te veel ruimte. Reset. */
.legacy-landing .flow__steps {
    gap: 0;
}
.legacy-landing .flow__step {
    gap: 0;
}

/* CITY-AUTOCOMPLETE — minimale positionering zodat de Alpine-dropdown
   onder het postcode-input verschijnt. Het zoekveld zelf behoudt zijn
   legacy uiterlijk; alleen de results-lijst en no-result-melding
   krijgen hier een werkbare layout. */
.legacy-landing .postal-code-search {
    position: relative;
}
.legacy-landing .city-search__results,
.legacy-landing .city-search__no-result {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    margin: 4px 0 0;
    padding: 4px 0;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    list-style: none;
    text-align: left;
    max-height: 320px;
    overflow-y: auto;
}
.legacy-landing .city-search__result {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.legacy-landing .city-search__result:hover,
.legacy-landing .city-search__result--active {
    background: #f5f5f5;
}
.legacy-landing .city-search__result small {
    color: #999;
    margin-left: auto;
}
.legacy-landing .city-search__no-result {
    padding: 8px 12px;
    color: #666;
}

/* Tekst in de dropdown-items leesbaar maken. `.legacy-landing .city-search__result`
   gebruikt `font: inherit` en zit binnen `.postal-code-search` dat in
   hulp-scoped.css `font-size: 0` krijgt (legacy whitespace-collapse-trick).
   Zonder onderstaande override worden stadsnamen op 0px gerenderd. */
.legacy-landing .city-search__result,
.legacy-landing .city-search__no-result {
    font-size: 1rem;
    line-height: 1.4;
}

/* ZOEKBALK BREEDTE — overgenomen van /oppas-gezocht/ (.serp-searchbar).
   Layout per breakpoint, identiek aan oppas-gezocht:
   - Hero (--category-landing): tablet 48em–64em wrap (hero__content is daar
     50% breed, te smal voor naast elkaar); desktop ≥64em naast elkaar
     met max-width 600px, input flex:1, knop auto-breed.
   - Final-CTA (--final-cta): op ALLE breakpoints flex naast elkaar,
     max-width 600px, gecentreerd onder de title. */

/* === HERO (--category-landing) — alleen vanaf 48em (mobile blijft de
       bestaande hulp-scoped.css stack-layout met max-width 22.5rem). === */
@media only screen and (min-width: 48em) {
    .legacy-landing .postal-code-search--category-landing {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        max-width: 600px;
        margin-left: 0;
        margin-right: auto;
    }
    .legacy-landing .postal-code-search--category-landing .postal-code-search__postal-code {
        flex: 1;
        width: auto;
        max-width: none;
        margin: 0;
    }
    .legacy-landing .postal-code-search--category-landing .postal-code-search__submit {
        flex-shrink: 0;
        width: auto;
        max-width: none;
        margin: 0;
        min-width: 0;
    }
}

@media only screen and (min-width: 48em) and (max-width: 63.99em) {
    .legacy-landing .postal-code-search--category-landing {
        flex-wrap: wrap;
    }
    .legacy-landing .postal-code-search--category-landing .postal-code-search__postal-code {
        flex: 1 1 100%;
    }
    .legacy-landing .postal-code-search--category-landing .postal-code-search__submit {
        align-self: flex-start;
        min-width: 14rem;
    }
}

/* === FINAL-CTA (--final-cta) — exact overgenomen van /oppas-gezocht/
       (.oppas-gezocht .final-cta .serp-searchbar). Per breakpoint:
       - Mobile  (<768): flex-column (knop onder), max-width 480px, gap 1rem
       - Tablet  (768-1023): flex-row, max-width 448px, gap 12px
       - Desktop (≥1024):   flex-row, max-width 560px, gap 12px
       Hoogtes input/knop: ~48px mobile, ~64px tablet+desktop. === */
.legacy-landing .postal-code-search--final-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    margin-right: auto;
}
.legacy-landing .postal-code-search--final-cta .postal-code-search__postal-code {
    flex: 1;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
}
.legacy-landing .postal-code-search--final-cta .postal-code-search__postal-code input {
    width: 100%;
}
.legacy-landing .postal-code-search--final-cta .postal-code-search__submit {
    flex-shrink: 0;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
}
.legacy-landing .postal-code-search--final-cta input {
    margin-bottom: 0;
}

/* Mobile: kolom, knop onder het zoekvlak (full-width), max 480px. */
@media (max-width: 47.99em) {
    .legacy-landing .postal-code-search--final-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        max-width: 480px;
    }
    .legacy-landing .postal-code-search--final-cta .postal-code-search__submit {
        width: 100%;
    }
}

/* Tablet (768–1023px): naast elkaar, max-width 448px. */
@media only screen and (min-width: 48em) and (max-width: 63.99em) {
    .legacy-landing .postal-code-search--final-cta {
        max-width: 448px;
    }
}

/* Desktop (≥1024px): naast elkaar, max-width 560px. */
@media only screen and (min-width: 64em) {
    .legacy-landing .postal-code-search--final-cta {
        max-width: 560px;
    }
}

/* Vanaf tablet: input + knop op ~64px hoogte, exact zoals oppas-gezocht
   (font-size 1.25rem, line-height 1.2em, padding-y 1em). */
@media only screen and (min-width: 48em) {
    .legacy-landing .postal-code-search--final-cta .postal-code-search__postal-code input {
        padding: calc(1em - 1px) 1em;
        font-size: 1.25rem;
        line-height: 1.2em;
    }
    .legacy-landing .postal-code-search--final-cta .postal-code-search__submit {
        padding: 1em 1.2em;
        font-size: 1.25rem;
        line-height: 1.2em;
    }
}
.legacy-landing .postal-code-search--final-cta .postal-code-search__submit {
    flex-shrink: 0;
    width: auto;
    max-width: none;
    margin: 0;
    min-width: 0;
}