/* =============================================================================
   Header Search Overlay
   Trigger button in the header right-cluster + slide-down command-palette
   overlay that mounts SearchBarWidget (hero layout).
   ========================================================================== */

/* ---------- Trigger button --------------------------------------------------- */

.header-search-trigger {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    padding: 0.4375rem 0.5rem 0.4375rem 0.75rem;
    background: rgba(127, 127, 127, 0.08);
    border: 1px solid rgba(127, 127, 127, 0.15);
    color: var(--text-secondary, inherit);
    border-radius: 999px;
    cursor: pointer;
    line-height: 1;
    transition: background-color 140ms ease-out, color 140ms ease-out,
                border-color 140ms ease-out, transform 140ms ease-out,
                box-shadow 140ms ease-out;
}

/* Diagonal shine sweep on hover - same mechanic as .ai-content-link-btn::after,
   kept neutral (not gold) since this trigger isn't an AI affordance. Color
   comes from the --color-primary-*-rgb design tokens (variables.css #13),
   not a hardcoded/Bootstrap blue - light theme reads the 500 step, dark
   theme reads the 400 step below, matching the --focus-ring-shadow token. */
.header-search-trigger::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg,
        transparent 0%,
        rgba(var(--color-primary-500-rgb), 0.35) 50%,
        transparent 100%);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

.header-search-trigger:hover::after,
.header-search-trigger:focus-visible::after {
    left: 125%;
}

.header-search-trigger:hover,
.header-search-trigger:focus-visible {
    background-color: rgba(var(--color-primary-500-rgb), 0.1);
    border-color: rgba(var(--color-primary-500-rgb), 0.35);
    color: var(--text-primary, inherit);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--color-primary-500-rgb), 0.18);
    outline: none;
}

.header-search-trigger:focus-visible {
    box-shadow: var(--focus-ring-shadow, 0 0 0 3px rgba(var(--color-primary-500-rgb), 0.25));
}

[data-theme="dark"] .header-search-trigger::after {
    background: linear-gradient(120deg,
        transparent 0%,
        rgba(var(--color-primary-400-rgb), 0.35) 50%,
        transparent 100%);
}

[data-theme="dark"] .header-search-trigger:hover,
[data-theme="dark"] .header-search-trigger:focus-visible {
    background-color: rgba(var(--color-primary-400-rgb), 0.12);
    border-color: rgba(var(--color-primary-400-rgb), 0.4);
    box-shadow: 0 4px 12px rgba(var(--color-primary-400-rgb), 0.2);
}

.header-search-trigger .fa-search {
    font-size: 0.875rem;
    opacity: 0.85;
}

.header-search-label {
    display: none;
    font-size: 0.8125rem;
    line-height: 1;
    white-space: nowrap;
}

.header-search-shortcut-hint {
    display: none;
    align-items: center;
    gap: 0.0625rem;
    padding-left: 0.0625rem;
    font-size: 0.6875rem;
    line-height: 1;
}

.header-search-shortcut-hint kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.25rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-primary, inherit);
    background: var(--bg-primary, #fff);
    border: 1px solid rgba(127, 127, 127, 0.25);
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.header-search-shortcut-hint kbd + kbd {
    margin-left: 0.125rem;
}

@media (min-width: 1200px) {
    .header-search-trigger {
        padding-right: 0.875rem;
    }

    .header-search-label {
        display: inline;
    }

    .header-search-shortcut-hint {
        display: inline-flex;
    }
}

/* ---------- Field variant (after the brand) --------------------------------
   A fake input: icon + "Search" + a discreet Cmd/Ctrl+K hint on the right.
   Type size and family follow the main menu links ("Razišči", "Skupnosti"),
   so the field reads as part of the navigation row. header-search.js fits
   it into the gap before the centered menu: .is-narrow drops the hint,
   .is-compact hugs the label, .is-icon is a round button.                 */

.header-nav-after-brand {
    align-items: center;
    margin-left: var(--space-3, 1rem);
    min-width: 0;
}

.header-nav-after-brand > .nav-item {
    min-width: 0;
}

.header-search-trigger.is-field {
    gap: 0.625rem;
    width: clamp(180px, 18vw, 280px);
    padding: 0.5rem 0.625rem 0.5rem 0.875rem;
    font-family: var(--font-family-menu-right, inherit);
    font-size: 1rem;
    text-align: left;
    background: rgba(127, 127, 127, 0.07);
    border-color: rgba(127, 127, 127, 0.2);
    /* No width transition: header-search.js measures the width to fit the
       field before the menu, and an animating width reads wrong. */
}

.header-search-trigger.is-field .fa-search {
    flex: 0 0 auto;
    font-size: 0.9375rem;
}

.header-search-field-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text-secondary, inherit);
}

/* Discreet hint: no key caps, just faint small text ("Ctrl K"). */
.header-search-trigger.is-field .header-search-shortcut-hint {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.1875rem;
    padding: 0;
    opacity: 0.55;
    transition: opacity 140ms ease-out;
}

.header-search-trigger.is-field:hover .header-search-shortcut-hint,
.header-search-trigger.is-field:focus-visible .header-search-shortcut-hint {
    opacity: 0.85;
}

.header-search-trigger.is-field .header-search-shortcut-hint kbd {
    min-width: 0;
    height: auto;
    padding: 0.0625rem 0.3125rem;
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-secondary, inherit);
    background: transparent;
    border: 1px solid rgba(127, 127, 127, 0.3);
    border-radius: 5px;
    box-shadow: none;
    gap: 0.25em; /* "Ctrl K" - the base kbd rule is inline-flex, which eats the space */
}

.header-search-trigger.is-field .header-search-shortcut-hint kbd + kbd {
    margin-left: 0;
}

.header-search-trigger.is-field.is-narrow .header-search-shortcut-hint,
.header-search-trigger.is-field.is-compact .header-search-shortcut-hint {
    display: none;
}

.header-search-trigger.is-field.is-compact {
    width: auto;
    padding-right: 0.875rem;
}

.header-search-trigger.is-field.is-icon {
    width: 2.375rem;
    height: 2.375rem;
    padding: 0;
    justify-content: center;
}

.header-search-trigger.is-field.is-icon .header-search-field-text,
.header-search-trigger.is-field.is-icon .header-search-shortcut-hint {
    display: none;
}

/* Follow the menu when the header shrinks on scroll. */
.header-shrink-on-scroll .navbar.shrunk .header-search-trigger.is-field {
    font-size: 0.8125rem;
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
}

/* ---------- Overlay --------------------------------------------------------- */

.header-search-overlay {
    position: fixed;
    inset: 0;
    /* Sit above Bootstrap dropdowns / popovers (--z-popover: 1060) so any
       open header dropdowns (language, theme, user) don't bleed through. */
    z-index: 1075;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease-out;
}

.header-search-overlay[hidden] {
    display: none;
}

.header-search-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.header-search-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

@supports not (backdrop-filter: blur(8px)) {
    .header-search-backdrop {
        background: rgba(0, 0, 0, 0.75);
    }
}

/* ---------- Panel ----------------------------------------------------------- */

.header-search-panel {
    position: absolute;
    top: 6vh;
    left: 50%;
    transform: translate(-50%, -16px);
    width: min(720px, 92vw);
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, inherit);
    border: 1px solid rgba(var(--bg-secondary-rgb, 0, 0, 0), 0.08);
    border-radius: var(--radius-xl, 1rem);
    box-shadow: var(--shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, 0.4));
    opacity: 0;
    overflow: hidden;
    transition:
        transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 200ms ease-out;
}

.header-search-overlay.is-open .header-search-panel {
    transform: translate(-50%, 0);
    opacity: 1;
}

.header-search-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem 0.5rem;
}

.header-search-panel-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #6b7280);
}

.header-search-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: 0;
    color: var(--text-secondary, #6b7280);
    border-radius: var(--radius-md, 0.5rem);
    cursor: pointer;
    transition: background-color 140ms ease-out, color 140ms ease-out;
}

.header-search-close:hover,
.header-search-close:focus-visible {
    background-color: rgba(var(--bg-secondary-rgb, 0, 0, 0), 0.08);
    color: var(--text-primary, inherit);
    outline: none;
}

.header-search-panel-body {
    padding: 0.75rem 1.25rem 1rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* The mounted SearchBarWidget dropdown renders in-flow inside the panel
   instead of absolute-positioned (no need - we ARE the overlay). */
.header-search-panel-body .search-bar-widget .search-dropdown {
    position: relative;
    box-shadow: none;
    border: 1px solid rgba(var(--bg-secondary-rgb, 0, 0, 0), 0.08);
    margin-top: 0.75rem;
    max-height: 50vh;
}

/* Hide the submit + back buttons inside the overlay. The submit button gets
   visually misplaced because it's anchored to the input-wrapper (which now
   also contains the in-flow dropdown), and Enter-to-submit makes it
   redundant in a command-palette UX. */
.header-search-panel-body .search-bar-widget .search-bar-btn,
.header-search-panel-body .search-bar-widget .search-bar-back-btn {
    display: none !important;
}

/* Reserve room on the right for the clear (X) button and on the left for the
   smart-search help (?) button. The submit button is hidden in command-
   palette mode. */
.header-search-panel-body .search-bar-widget.search-bar-hero .search-bar-input {
    padding-right: 3rem;
    padding-left: 3rem;
}

/* Re-anchor the clear (X) button to the input row, not the wrapper center
   (the wrapper now also contains the in-flow dropdown). */
.header-search-panel-body .search-bar-widget .search-bar-clear-btn {
    top: 1.875rem;
    right: 1rem;
    transform: translateY(-50%);
}

/* Re-anchor the smart-search help (?) button the same way - to the input row,
   not the wrapper centre. Sits on the LEFT of the input. */
.header-search-panel-body .search-bar-widget .search-bar-help-btn {
    top: 1.875rem;
    left: 1rem;
    transform: translateY(-50%);
}

/* The hero layout caps its own width for the homepage; inside the palette
   the bar, tabs and results always span the panel (it widens for the
   preview pane, and the input must line up with the results below). */
.header-search-panel-body .search-bar-widget.search-bar-hero {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* ---------- Command palette: filter tabs + Near me -------------------------
   SearchBarWidget renders its tab row above the input; in the palette it is
   a compact, scrollable chip row with the Near me chip pushed to the end. */

.header-search-panel-body .search-bar-tabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 0.375rem;
    margin-bottom: 0.75rem !important;
    padding-bottom: 2px;
}

.header-search-panel-body .search-bar-tabs::-webkit-scrollbar {
    display: none;
}

.header-search-panel-body .search-bar-tab {
    flex: 0 0 auto;
    padding: 0.3125rem 0.75rem;
    font-size: 0.8125rem;
}

/* Sticks to the right edge of the scrolling chip row so it never scrolls
   out of reach; the solid background hides chips passing underneath. */
.search-bar-near {
    position: sticky;
    right: 0;
    z-index: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: auto;
    /* A solid 10px strip of panel colour + a soft fade on its left, so the
       chips scrolling underneath never touch the chip. */
    box-shadow: -10px 0 0 var(--bg-primary, #fff), -22px 0 12px -6px var(--bg-primary, #fff);
    background: var(--bg-primary, #fff) !important;
    padding: 0.3125rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
    border: 1px dashed rgba(127, 127, 127, 0.45);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 140ms ease-out, color 140ms ease-out, border-color 140ms ease-out;
}

.search-bar-near:hover,
.search-bar-near:focus-visible {
    color: var(--text-primary, inherit);
    border-color: rgba(var(--color-primary-500-rgb), 0.6);
    outline: none;
}

/* On: a solid primary fill with white text - clearly "on", unlike the
   outlined filter tabs - plus a soft halo. */
.search-bar-near.is-active,
.search-bar-near.is-active:hover,
.search-bar-near.is-active:focus-visible {
    color: #fff;
    background: var(--color-primary-600, #2b8ec4) !important;
    border-style: solid;
    border-color: var(--color-primary-600, #2b8ec4);
    box-shadow: -10px 0 0 var(--bg-primary, #fff), -22px 0 12px -6px var(--bg-primary, #fff),
                0 0 0 3px rgba(var(--color-primary-500-rgb), 0.22);
    font-weight: 600;
}

.search-bar-near.is-busy i {
    animation: header-search-pulse 1s ease-in-out infinite;
}

@keyframes header-search-pulse {
    50% { opacity: 0.35; }
}

[data-theme="dark"] .search-bar-near.is-active {
    color: #fff;
    background: var(--color-primary-500, #3aa8e0) !important;
    border-color: var(--color-primary-500, #3aa8e0);
}

/* ---------- Command palette: workspace band --------------------------------
   "Your workspace" (actions, pages, own records) reads as its own surface:
   tinted band, accent rule on the left, a "Go" hint on the active row.
   "Discover on Eventure" below keeps the plain public-result look. */

.search-band {
    padding: 0.25rem 0 0.5rem;
}

.search-band + .search-band {
    border-top: 1px solid rgba(var(--bg-secondary-rgb, 0, 0, 0), 0.08);
    margin-top: 0.25rem;
}

.search-band-label {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.625rem 1rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary, #6b7280);
}

.search-band--workspace {
    position: relative;
    margin: 0.5rem 0.5rem 0.25rem;
    border-radius: var(--radius-lg, 0.75rem);
    background: rgba(var(--color-primary-500-rgb), 0.05);
    box-shadow: inset 3px 0 0 rgba(var(--color-primary-500-rgb), 0.55);
}

.search-band--workspace .search-band-label {
    color: var(--color-primary-700, #1d74a3);
}

[data-theme="dark"] .search-band--workspace {
    background: rgba(var(--color-primary-400-rgb), 0.08);
    box-shadow: inset 3px 0 0 rgba(var(--color-primary-400-rgb), 0.6);
}

[data-theme="dark"] .search-band--workspace .search-band-label {
    color: var(--color-primary-300, #8fd0f2);
}

.search-band--workspace .search-result-item {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.search-band--workspace .search-result-thumb-wrap,
.search-band--workspace .search-result-icon,
.search-band--workspace .search-result-thumb {
    width: 32px;
    height: 32px;
}

.search-result-item.is-workspace .search-result-icon {
    background: rgba(var(--color-primary-500-rgb), 0.12);
    color: var(--color-primary-700, #1d74a3);
    font-size: 0.875rem;
}

[data-theme="dark"] .search-result-item.is-workspace .search-result-icon {
    background: rgba(var(--color-primary-400-rgb), 0.16);
    color: var(--color-primary-300, #8fd0f2);
}

.search-result-item.is-ws-actions .search-result-title {
    font-weight: 600;
}

.search-band--workspace .search-result-item:hover,
.search-band--workspace .search-result-item.is-highlighted {
    background: var(--bg-primary, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.search-result-go {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
}

.search-result-go kbd {
    padding: 0.0625rem 0.3125rem;
    font-family: inherit;
    font-size: 0.6875rem;
    color: var(--text-primary, inherit);
    background: var(--bg-secondary, #f3f4f6);
    border: 1px solid rgba(127, 127, 127, 0.25);
    border-radius: 4px;
}

.search-result-item.is-workspace.is-highlighted .search-result-go,
.search-result-item.is-workspace:hover .search-result-go {
    display: inline-flex;
}

.search-result-badge {
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0.0625rem 0.4375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: 1px;
    color: #8a5a00;
    background: rgba(245, 180, 40, 0.18);
    border-radius: 999px;
}

[data-theme="dark"] .search-result-badge {
    color: #f5c86a;
    background: rgba(245, 180, 40, 0.16);
}

.search-command-hint {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.5rem 1rem 0.75rem;
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
}

.search-command-hint kbd {
    padding: 0.0625rem 0.375rem;
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-primary, inherit);
    background: var(--bg-primary, #fff);
    border: 1px solid rgba(127, 127, 127, 0.25);
    border-radius: 4px;
}

/* Command mode (">"): tint the input so the mode switch is obvious. */
.header-search-bar.is-command .search-bar-input {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    border-color: rgba(var(--color-primary-500-rgb), 0.55);
}

/* ---------- Command palette: preview pane ----------------------------------
   Wide screens only: results left, the highlighted result's card right. */

.header-search-panel.is-wide {
    width: min(1040px, 94vw);
}

.header-search-panel-body .search-dropdown.has-preview {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: start;
    max-height: 62vh;
}

.search-results-main {
    min-width: 0;
}

.search-preview {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0.5rem 0.5rem 0.5rem 0;
    padding: 0.75rem;
    min-height: 12rem;
    border-radius: var(--radius-lg, 0.75rem);
    background: var(--bg-secondary, #f3f4f6);
    border: 1px solid rgba(127, 127, 127, 0.14);
}

.search-preview:empty {
    display: none;
}

.search-preview-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-md, 0.5rem);
    background: var(--bg-secondary, #f3f4f6);
}

.search-preview-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.search-preview-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-lg, 0.75rem);
    font-size: 1.5rem;
    color: var(--color-primary-700, #1d74a3);
    background: rgba(var(--color-primary-500-rgb), 0.12);
}

.search-preview-body {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    min-width: 0;
}

.search-preview-kicker {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary, #6b7280);
}

.search-preview-title {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary, inherit);
    overflow-wrap: anywhere;
}

.search-preview-meta {
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
}

.search-preview-meta i {
    width: 1rem;
    opacity: 0.8;
}

.search-preview-excerpt {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-primary, inherit);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-preview-open {
    align-self: flex-start;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary-700, #1d74a3);
    text-decoration: none;
}

.search-preview-open:hover {
    text-decoration: underline;
}

[data-theme="dark"] .search-preview-open,
[data-theme="dark"] .search-preview-icon {
    color: var(--color-primary-300, #8fd0f2);
}

/* Below 576px the panel is full-screen (Mobile sizing rule) - leave it be. */
@media (min-width: 576px) and (max-width: 991.98px) {
    .header-search-panel.is-wide {
        width: min(720px, 92vw);
    }
}

@media (max-width: 991.98px) {
    .header-search-panel-body .search-dropdown.has-preview {
        display: block;
    }

    .search-preview {
        display: none;
    }
}

/* ---------- Footer hint row ------------------------------------------------- */

.header-search-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.625rem 1.25rem;
    background: rgba(var(--bg-secondary-rgb, 0, 0, 0), 0.04);
    border-top: 1px solid rgba(var(--bg-secondary-rgb, 0, 0, 0), 0.08);
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
}

.header-search-footer-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.header-search-footer kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0.125rem 0.375rem;
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-primary, inherit);
    background: var(--bg-primary, #fff);
    border: 1px solid rgba(var(--bg-secondary-rgb, 0, 0, 0), 0.15);
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

@media (max-width: 575px) {
    .header-search-footer {
        gap: 0.875rem;
        flex-wrap: wrap;
    }
    .header-search-footer-item span {
        display: none;
    }
}

/* ---------- Body scroll lock when overlay is open --------------------------- */

body.header-search-active {
    overflow: hidden;
}

/* ---------- Mobile sizing --------------------------------------------------- */

@media (max-width: 575px) {
    .header-search-panel {
        top: 0;
        width: 100vw;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }
}

@media (max-width: 575px) {
    .header-search-panel.is-wide {
        width: 100vw;
    }
}

/* ---------- Reduced motion -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .header-search-overlay,
    .header-search-panel,
    .header-search-trigger,
    .header-search-trigger::after,
    .search-bar-near,
    .header-search-close {
        transition-duration: 0.01ms !important;
    }
}