/* ============================================================================
 * Ordolio Index page — page-specific styling
 *
 * Loaded only by main/templates/index.html (rendered by AppStartPage at `/`).
 * All rules scoped under `body.index-2026` so this file is dead weight on
 * every other page.
 *
 * This is Ordolio's first-contact surface for prospects who land on
 * ordolio.com/ without knowing their club's slug. Layout primitives,
 * surfaces, form controls, and buttons come from the ui-v2 library.
 *
 * Page-specific bits:
 *   - .ip-search-form wrapper (autocomplete dropdown positioning + custom
 *     styling overrides for the legacy auto-complete.css colors)
 *   - .ip-divider tussen primary search-org en secondary create-org actions
 *   - .ip-secondary section wrapper with its own typography
 *   - .ip-link tertiary "geen activatiemail" link
 *
 * DOM hooks preserved (initBackgroundImage + autoComplete JS depend on):
 *   #searchId, name="search", name="organisation_id", #organisationIdInput
 *   name="hidden" (honeypot)
 * ========================================================================== */

/* Search form takes full form-width */
body.index-2026 .ip-search-form {
    margin: 0;
}

/* The autocomplete dropdown attaches to body, but we need to make it look
   like part of our form. Token-restyle the legacy auto-complete.css output. */
body.index-2026 .autocomplete-suggestions,
.autocomplete-suggestions {
    /* the legacy class lives on a body-level div; we restyle globally
       here because autoComplete creates the dropdown outside body.index-2026
       containment. */
}

/* Restyle the autocomplete dropdown under body.index-2026.
   Because the dropdown is attached to body (outside our scoped tree)
   we apply via :has() / focus path on the input. Pragmatic: restyle
   globally with safe defaults — these classes only appear on pages
   that load auto-complete.css, which is index-2026 today. */
body.index-2026 + .autocomplete-suggestions,
body.index-2026 ~ .autocomplete-suggestions,
.autocomplete-suggestions {
    border: 1px solid var(--ordolio-border-default);
    border-top: 0;
    border-radius: 0 0 var(--ordolio-radius-md) var(--ordolio-radius-md);
    background: var(--ordolio-bg-surface);
    box-shadow: var(--ordolio-shadow-md);
    font-family: var(--ordolio-font-body);
}
.autocomplete-suggestion {
    padding: var(--ordolio-space-2) var(--ordolio-space-4);
    line-height: 1.4;
    font-size: var(--ordolio-text-sm);
    color: var(--ordolio-fg-default);
    border-bottom: 1px solid var(--ordolio-border-subtle);
}
.autocomplete-suggestion:last-child {
    border-bottom: 0;
}
.autocomplete-suggestion.selected,
.autocomplete-suggestion:hover {
    background: color-mix(in srgb, var(--ordolio-bg-surface), var(--ordolio-default-primary) 6%);
    color: var(--ordolio-default-primary-dark);
}
.autocomplete-suggestion b {
    color: var(--ordolio-default-primary);
    font-weight: var(--ordolio-weight-semibold);
}

/* Buttons inside the form should be full-width — single column layout */
body.index-2026 .uv2-form .btn {
    width: 100%;
}

/* Search submit button gets a top margin to separate from input */
body.index-2026 .ip-search-form .btn {
    margin-top: var(--ordolio-space-2);
}

/* Visual divider tussen primary action + secondary section */
body.index-2026 .ip-divider {
    display: flex;
    align-items: center;
    gap: var(--ordolio-space-3);
    margin: var(--ordolio-space-8) 0;
    color: var(--ordolio-fg-subtle);
    font-size: var(--ordolio-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--ordolio-tracking-caps);
}
body.index-2026 .ip-divider::before,
body.index-2026 .ip-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--ordolio-border-subtle);
}

/* Secondary CTA section */
body.index-2026 .ip-secondary__title {
    font-family: var(--ordolio-font-display);
    font-size: var(--ordolio-text-xl);
    font-weight: var(--ordolio-weight-semibold);
    letter-spacing: var(--ordolio-tracking-tight);
    color: var(--ordolio-fg-default);
    margin: 0 0 var(--ordolio-space-2);
}
body.index-2026 .ip-secondary__lead {
    font-size: var(--ordolio-text-sm);
    color: var(--ordolio-fg-muted);
    line-height: var(--ordolio-leading-relaxed);
    margin: 0 0 var(--ordolio-space-5);
}
body.index-2026 .ip-secondary-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ordolio-space-3);
}

/* Tertiary "geen activatiemail" link below the secondary actions */
body.index-2026 .ip-link {
    display: inline-block;
    margin-top: var(--ordolio-space-4);
    color: var(--ordolio-default-primary);
    font-size: var(--ordolio-text-sm);
    text-decoration: none;
}
body.index-2026 .ip-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Make sure form group margin doesn't accumulate weirdly */
body.index-2026 .ip-search-form .form-group {
    margin-bottom: var(--ordolio-space-3);
}

/* Brand row blijft zichtbaar op mobile — er is geen org-context in de hero
   die het Ordolio-merk al toont, dus de ui-v2 mobile-hide moet hier weg. */
@media (max-width: 899px) {
    body.index-2026 .uv2-form__brand {
        display: flex;
        position: static;
        margin-bottom: var(--ordolio-space-6);
    }
}