/*
 * search-form-modern.css — Phase 1 of SEARCH-FORM-IMPLEMENTATION-PLAN.md
 *
 * Styles for the new #search-row / .search-row form.
 * All rules are scoped to .search-row (or inside @media).
 * CSS variables live on .search-row, NOT on :root (avoids global token collisions).
 *
 * Load order: after /style.css and /css/print.css, before SumoSelect CSS.
 */

/* ================================================================
   1. DESIGN TOKENS (scoped to .search-row)
   ================================================================ */

.search-row {
    --sf-blue:        #0070AE;
    --sf-orange:      #FC9F19;       /* borders, badges, fills only — not text */
    --sf-orange-text: #c5810f;       /* AA-compliant text on white (≥ 4.5:1) */
    --sf-gray-bg:     #f5f5f5;
    --sf-border:      #ddd;
    --sf-text:        #333;
    --sf-muted:       #666;
    --sf-light:       #999;
    --sf-radius:      3px;

    /* Uniform control geometry — applied identically to <input type="date"> and
       .SumoSelect .CaptionCont so date pickers and SumoSelect-rendered selects
       share the same outer dimensions. 2.6rem accommodates the native date-input
       chrome (calendar icon + text) in Chrome/Edge/Firefox without clipping. */
    --sf-control-height: 2.6rem;
    --sf-control-pad-y:  0.3rem;
    --sf-control-pad-x:  0.6rem;
}

/* ================================================================
   2. SECTION BASE
   ================================================================ */

.search-row {
    background: var(--sf-gray-bg);
    padding-bottom: 0.75rem;
}

.search-row .search-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sf-text);
    margin: 0.75rem 0 0.5rem;
    line-height: 1.3;
}

/* ================================================================
   3. PRIMARY ROW — 5-col CSS Grid
   Override the legacy float-based .col system for this row only.
   ================================================================ */

/* ID-prefixed selectors to defeat any legacy `.row .col` float rules without
   resorting to !important. #search-row IS the section; .search-primary-filters
   is the wrap inside the form. */
#search-row .search-primary-filters {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    /* DO NOT override margin-left/right — .wrap (grid.css:137) uses
       `margin: 0 auto` for centering; killing those margins left-aligns
       the primary row and breaks the page layout. */
}

/* Reset legacy .col float and width so grid controls layout */
#search-row .search-primary-filters > .col {
    float: none;
    width: auto;
    padding: 0;
    margin: 0;
}

/* Suppress the .group clearfix pseudo-elements on the primary-row grid.
   `.group::before` / `.group::after { content:""; display:table; }` (grid.css:1885)
   exists to clear floats — but inside a CSS Grid container, pseudo-elements with
   `content` BECOME GRID ITEMS, eating two tracks (one before all .col, one after).
   With repeat(5, 1fr) and 5 .col cells, the ::before takes track 1, pushing the
   first 4 cells into tracks 2-5 of row 1 and wrapping the 5th cell to row 2.
   Suppress them here — clearfix is irrelevant in grid layout anyway. */
#search-row .search-primary-filters::before,
#search-row .search-primary-filters::after {
    content: none;
    display: none;
}

/* ================================================================
   4. INPUT WRAPPERS (labels + inputs)
   ================================================================ */

.search-row .input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.search-row .input-wrapper label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sf-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    gap: 0.3em;
}

.search-row .input-wrapper label .far {
    color: var(--sf-blue);
}

/* #search-row prefix matches the specificity of legacy grid.css `#search-row
   input[type=date]` (line 360) — without the ID, the legacy rule's 1px border
   and 5px padding leak in and the date input renders taller than .CaptionCont
   even with `height` declared here. search-form-modern.css loads after grid.css
   in the cascade, so equal-specificity selectors here win cleanly.
   min-height/max-height clamp around `height` defeat browser intrinsic minimums
   that Chrome and Edge sometimes apply to native date inputs (the calendar-icon
   + text glyph cell wants ~30px of content area; without an explicit ceiling
   the input can grow taller than 2.6rem even with `height` set). */
#search-row input[type="date"],
.search-row input[type="date"] {
    width: 100%;
    height: var(--sf-control-height);
    min-height: var(--sf-control-height);
    max-height: var(--sf-control-height);
    padding: var(--sf-control-pad-y) var(--sf-control-pad-x);
    border: 2px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: #fff;
    color: var(--sf-text);
    font-size: 0.9rem;
    line-height: 1.2;
    box-sizing: border-box;
    margin: 0;
    vertical-align: middle;
    /* Force native chrome (incl. WebKit calendar icon) — some legacy stylesheets
       in this repo set -webkit-appearance: none on inputs which can hide the
       icon. The vendor-prefixed `auto` is needed because the unprefixed
       `appearance: auto` doesn't override `-webkit-appearance: none` in WebKit. */
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}

/* Ensure the native calendar-picker icon stays visible and clickable on Chrome
   and Edge (WebKit/Blink). Forced with !important because some upstream styles
   in this project zero out the icon's opacity, and we cannot trace which.
   The icon itself is rendered by the user-agent — we are NOT styling its glyph. */
#search-row input[type="date"]::-webkit-calendar-picker-indicator,
.search-row input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    cursor: pointer !important;
    margin-left: 0.25rem;
    width: 1.2rem;
    height: 1.2rem;
    pointer-events: auto !important;
}

/* Also defeat any `appearance: none` that may leak in via legacy stylesheets,
   even with vendor prefixes. !important here matters because at least one
   upstream rule we have not been able to locate is removing the icon. */
#search-row input[type="date"],
.search-row input[type="date"] {
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
}

.search-row input[type="date"]:focus-visible {
    outline: 2px solid var(--sf-orange);
    outline-offset: 2px;
    border-color: var(--sf-blue);
}

/* ================================================================
   5. FILTER TOGGLE BUTTON
   ================================================================ */

.search-row .search-filter-toggle-row {
    margin-top: 0.5rem;
    padding-bottom: 0.25rem;
}

.search-row .btn-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.4rem 0.9rem;
    border: 2px solid var(--sf-orange);
    border-radius: var(--sf-radius);
    background: #fff;
    color: var(--sf-orange-text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    line-height: 1.4;
}

.search-row .btn-filter-toggle:hover,
.search-row .btn-filter-toggle:focus-visible {
    background: var(--sf-orange);
    color: #fff;
    outline: 2px solid var(--sf-orange-text);
    outline-offset: 2px;
}

.search-row .btn-filter-toggle[aria-expanded="true"] {
    background: var(--sf-orange);
    color: #fff;
}

.search-row .btn-filter-toggle .active-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3em;
    height: 1.3em;
    padding: 0 0.3em;
    border-radius: 999px;
    background: var(--sf-blue);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

/* Hidden when count is 0 — Phase 3 JS removes hidden attr when count > 0 */
.search-row .btn-filter-toggle .active-filter-count[hidden] {
    display: none;
}

/* ================================================================
   6. ADVANCED PANEL
   ================================================================ */

/* No-JS fallback: `hidden` attr keeps panel hidden when JS hasn't run.
   On JS init (search-form-handler.js) the `hidden` attr is removed and the
   panel switches to `.panel-collapsed` state, which can be animated. */
.search-row .advanced-filters-panel[hidden] {
    display: none;
}

.search-row .advanced-filters-panel {
    background: #fff;
    border-top: 2px solid var(--sf-orange);
    padding: 0.75rem 0 0.25rem;
    margin-top: 0.25rem;
    /* Phase 4: animate collapse via max-height. Generous cap accommodates
       the 7-cell advanced-panel content without clipping. ALL properties
       that differ between open/collapsed states must be in the transition
       list — without padding/margin/border-color here, those properties
       jump instantly when the class is toggled, producing a visible
       border-flicker artifact on close (the orange border disappeared a
       frame before max-height began to shrink). */
    overflow: hidden;
    max-height: 60rem;
    transition:
        max-height 220ms ease-out,
        padding-top 220ms ease-out,
        padding-bottom 220ms ease-out,
        margin-top 220ms ease-out,
        border-top-color 220ms ease-out;
}

/* Collapsed state (set on init + on close). max-height: 0 hides the panel
   visually; aria-hidden hides it from assistive tech (set by JS). */
.search-row .advanced-filters-panel.panel-collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    border-top-color: transparent;
}

/* Once the open transition completes, `.panel-overflowable` lets the
   absolutely-positioned SumoSelect dropdowns extend below the panel without
   being clipped at the panel boundary. JS adds this class on transitionend
   (max-height) and removes it before starting the close animation so the
   shrinking max-height correctly clips content during the transition. */
.search-row .advanced-filters-panel.panel-overflowable {
    overflow: visible;
}

/* Honour user motion preference — skip the transition entirely for users
   who set `prefers-reduced-motion: reduce`. They still get the visual
   collapse/expand, just instantly. */
@media (prefers-reduced-motion: reduce) {
    .search-row .advanced-filters-panel {
        transition: none;
    }
}

/* Advanced panel — 4-column CSS Grid (mirrors the primary-row approach).
   Replaces the legacy float-based `.col.slot-25` (23.8% width + 1.6% left margin
   except first-child) which left every wrap-row's first item offset by 1.6%
   because it was not :first-child of the parent. Grid lets every row start at
   column 1 cleanly. */
#search-row .advanced-filters-panel > .wrap.group {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

/* Suppress .group clearfix pseudo-elements — same reason as the primary row:
   they would become extra grid items and shift the first .col into column 2. */
#search-row .advanced-filters-panel > .wrap.group::before,
#search-row .advanced-filters-panel > .wrap.group::after {
    content: none;
    display: none;
}

/* Reset legacy float / width / margin on .col.slot-25 inside the panel so the
   grid can size each cell uniformly. */
#search-row .advanced-filters-panel .col.slot-25 {
    float: none;
    width: auto;
    padding: 0;
    margin: 0;
}

/* ================================================================
   7. SUMOSELECT OVERRIDES (scoped to .search-row)
   Re-skin to match the new design language without touching sumoselect.css.
   ================================================================ */

/* Selector strategy: the SumoSelect plugin's wrapper <div class="SumoSelect">
   does NOT carry the original <select>'s `sumo-select-multi` / `sumo-select-simple`
   class — the plugin copies that class to an inner span instead. So the older
   `.search-row .SumoSelect.sumo-select-multi > .CaptionCont` selectors never
   matched at runtime and the rendered CaptionCont fell back to sumoselect.css
   defaults (1px border, 14px min-height, padding 5px 8px from .SelectBox).
   Diagnostic page (debug-control-height.php) measured 31.44px instead of the
   2.6rem (41.6px) we want. Drop the sub-class qualifier; #search-row prefix
   matches grid.css `#search-row …` specificity tier and wins cleanly. */
#search-row .SumoSelect > .CaptionCont,
.search-row .SumoSelect > .CaptionCont {
    border: 2px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: #fff;
    height: var(--sf-control-height);
    min-height: var(--sf-control-height);
    max-height: var(--sf-control-height);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: var(--sf-control-pad-y) var(--sf-control-pad-x);
    margin: 0;
}

#search-row .SumoSelect > .CaptionCont > span,
.search-row .SumoSelect > .CaptionCont > span {
    color: var(--sf-text);
    font-size: 0.9rem;
}

/* Open state — highlight border with brand blue */
#search-row .SumoSelect.open > .CaptionCont,
.search-row .SumoSelect.open > .CaptionCont {
    border-color: var(--sf-blue);
    border-radius: var(--sf-radius) var(--sf-radius) 0 0;
}

/* Dropdown panel */
.search-row .SumoSelect > .optWrapper {
    border: 2px solid var(--sf-blue);
    border-top: none;
    border-radius: 0 0 var(--sf-radius) var(--sf-radius);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    z-index: 200;
}

/* Checkmark / highlight colour for selected items */
.search-row .SumoSelect > .optWrapper > .options li.opt.selected span i,
.search-row .SumoSelect > .optWrapper > .options li.opt:hover span i {
    background: var(--sf-orange);
    border-color: var(--sf-orange);
}

/* Focus-visible ring on the SumoSelect caption */
.search-row .SumoSelect > .CaptionCont:focus-visible {
    outline: 2px solid var(--sf-orange);
    outline-offset: 2px;
}

/* Fallback focus ring on the native select (shown when SumoSelect is absent) */
.search-row select:focus-visible {
    outline: 2px solid var(--sf-orange);
    outline-offset: 2px;
}

/* Hidden option used by Phase 3 JS cascade (data-hidden attribute on option elements) */
.search-row .SumoSelect .options li.opt[data-hidden] {
    display: none;
}

/* ================================================================
   8. ACTION ROW
   ================================================================ */

.search-row .search-action-row {
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.search-row .search-action-row .col.slot-50.ta-right p {
    margin: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Reset button — subtle link style */
.search-row .btn-reset {
    background: none;
    border: none;
    padding: 0;
    color: var(--sf-muted);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.search-row .btn-reset:hover,
.search-row .btn-reset:focus-visible {
    color: var(--sf-blue);
    outline: 2px solid var(--sf-orange);
    outline-offset: 2px;
}

/* Submit button — reuses site-wide .button--primary; minor spacing tweak */
.search-row .gobalsearch-submit {
    padding: 0.5rem 1.25rem;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* ================================================================
   9. ACTIVE FILTER CHIPS
   ================================================================ */

.search-row .active-filters-row[hidden] {
    display: none;
}

.search-row .active-filters-row {
    padding: 0.4rem 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.search-row .filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    flex: 1;
}

.search-row .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--sf-blue);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Recognized-term chip — Phase 5. White bg, blue text, dashed border.
   ::after adds " (aus Suchtext)" to visually distinguish auto-recognised chips. */
.search-row .filter-chip--recognized {
    background: #fff;
    color: var(--sf-blue);
    border: 1px dashed var(--sf-blue);
}

.search-row .filter-chip--recognized::after {
    content: " (aus Suchtext)";
    font-size: .75em;
    opacity: .7;
}

.search-row .filter-chip button {
    background: none;
    border: none;
    color: inherit;
    padding: 0 0 0 0.15em;
    cursor: pointer;
    font-size: 1em;
    line-height: 1;
    opacity: 0.8;
    flex-shrink: 0;
}

.search-row .filter-chip button:hover {
    opacity: 1;
}

/* ================================================================
   10. SCREEN-READER ONLY UTILITY
   ================================================================ */

.search-row .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ================================================================
   11. LOADING SPINNER (Phase 3 will add/remove .results-loading class)
   ================================================================ */

.search-row .results-loading::after {
    content: '';
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    border: 2px solid var(--sf-border);
    border-top-color: var(--sf-blue);
    border-radius: 50%;
    animation: sf-spin 0.6s linear infinite;
    vertical-align: middle;
    margin-left: 0.5em;
}

@keyframes sf-spin {
    to { transform: rotate(360deg); }
}

/* ================================================================
   12. RESPONSIVE BREAKPOINTS
   ================================================================ */

/* Tablet: 2-column primary + advanced rows */
@media (max-width: 1086px) {
    #search-row .search-primary-filters,
    #search-row .advanced-filters-panel > .wrap.group {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: single-column */
@media (max-width: 768px) {
    #search-row .search-primary-filters,
    #search-row .advanced-filters-panel > .wrap.group {
        grid-template-columns: 1fr;
    }

    .search-row .search-action-row .col.slot-50 {
        width: 100%;
        text-align: left;
        margin-bottom: 0.5rem;
    }

    .search-row .search-action-row .col.slot-50.ta-right p {
        justify-content: flex-start;
    }

    .search-row .btn-filter-toggle {
        width: 100%;
        justify-content: center;
    }
}

/* ================================================================
     Z-INDEX FIX FOR ADVANCED-PANEL DROPDOWNS
     ================================================================
     The advanced filter panel's bottom-row SumoSelect dropdowns open
     downward and extend past the panel into the .search-action-row's
     area (when .panel-overflowable removes overflow:hidden after the
     open animation). Without explicit stacking, the action-row paints
     on top because it's later in DOM order. Lift the panel above the
     action-row when ANY dropdown inside it is open.
     ================================================================ */

  .search-row .advanced-filters-panel {
      position: relative;
      z-index: 10;
  }

  .search-row .search-action-row {
      position: relative;
      z-index: 1;
  }

  /* Defense-in-depth: ensure dropdowns are never clipped when the panel is open.
     The .panel-overflowable class should handle this via a transitionend handler,
     but on prod that handler isn't firing reliably. This rule covers all cases:
     any panel that isn't .panel-collapsed allows overflow. */
  .search-row .advanced-filters-panel:not(.panel-collapsed) {
      overflow: visible;
  }