/**
 * Hart 365 Search – Fluent UI Frontend Styles.
 *
 * Modern, accessible search widget styles based on the Microsoft Fluent UI
 * design language. All default colours pass WCAG 2.2 contrast ratio tests
 * (4.5:1 for normal text, 3:1 for large text and UI components).
 *
 * All base styles live inside @layer h365s-defaults so that Elementor's
 * generated CSS (which is unlayered) ALWAYS overrides these defaults
 * regardless of specificity or stylesheet load order.
 *
 * @since   1.4.0
 * @package Hart_365_Search
 */

/* ═══════════════════════════════════════════════════════════
   CSS Custom Properties – Fluent UI Design Tokens
   (Outside the layer — variable definitions have no specificity)
   ═══════════════════════════════════════════════════════════ */
:root {
    /* Neutral palette – text on white backgrounds */
    --h365s-color-neutral-foreground-1: #242424;
    --h365s-color-neutral-foreground-2: #424242;
    --h365s-color-neutral-foreground-3: #616161;
    --h365s-color-neutral-foreground-disabled: #bdbdbd;

    --h365s-color-neutral-background-1: #ffffff;
    --h365s-color-neutral-background-2: #fafafa;
    --h365s-color-neutral-background-3: #f5f5f5;
    --h365s-color-neutral-background-hover: #f0f0f0;

    --h365s-color-neutral-stroke-1: #d1d1d1;
    --h365s-color-neutral-stroke-2: #e0e0e0;
    --h365s-color-neutral-stroke-focus: #242424;

    /* Brand palette – Fluent blue */
    --h365s-color-brand-background: #0f6cbd;
    --h365s-color-brand-background-hover: #115ea3;
    --h365s-color-brand-background-pressed: #0e4775;
    --h365s-color-brand-foreground: #ffffff;

    /* Status */
    --h365s-color-status-success: #107c10;
    --h365s-color-status-danger: #bc2f32;

    /* Spacing – Fluent scale */
    --h365s-spacing-xxs: 2px;
    --h365s-spacing-xs: 4px;
    --h365s-spacing-s: 8px;
    --h365s-spacing-m: 12px;
    --h365s-spacing-l: 16px;
    --h365s-spacing-xl: 20px;
    --h365s-spacing-xxl: 24px;

    /* Border Radius */
    --h365s-radius-s: 4px;
    --h365s-radius-m: 6px;
    --h365s-radius-l: 8px;
    --h365s-radius-xl: 12px;
    --h365s-radius-circular: 50%;

    /* Shadows */
    --h365s-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 2px rgba(0, 0, 0, 0.06);
    --h365s-shadow-4: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.06);
    --h365s-shadow-8: 0 4px 8px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.06);
    --h365s-shadow-16: 0 8px 16px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.06);

    /* Motion */
    --h365s-duration-fast: 150ms;
    --h365s-duration-normal: 250ms;
    --h365s-duration-slow: 350ms;
    --h365s-easing-standard: cubic-bezier(0.33, 0, 0.67, 1);
    --h365s-easing-decelerate: cubic-bezier(0, 0, 0, 1);
    --h365s-easing-accelerate: cubic-bezier(1, 0, 1, 1);

    /* Typography */
    --h365s-font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --h365s-font-size-200: 12px;
    --h365s-font-size-300: 14px;
    --h365s-font-size-400: 16px;
    --h365s-font-size-500: 20px;
    --h365s-font-weight-regular: 400;
    --h365s-font-weight-semibold: 600;
    --h365s-line-height-300: 20px;
    --h365s-line-height-400: 24px;
}

/* ═══════════════════════════════════════════════════════════
   @layer h365s-defaults
   Everything inside this layer has LOWER cascade priority than
   any unlayered CSS (Elementor's generated styles, theme CSS, etc.).
   This guarantees that Elementor controls always work.
   ═══════════════════════════════════════════════════════════ */
@layer h365s-defaults {

    /* ───── Base Widget Container ───── */
    .h365s-search-widget {
        position: relative;
        font-family: var(--h365s-font-family);
        font-size: var(--h365s-font-size-300);
        line-height: var(--h365s-line-height-300);
        color: var(--h365s-color-neutral-foreground-1);
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    .h365s-search-widget *,
    .h365s-search-widget *::before,
    .h365s-search-widget *::after {
        box-sizing: border-box;
    }

    /* ───── Search Bar ───── */
    .h365s-search-bar {
        position: relative;
    }

    .h365s-search-bar-inner {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: var(--h365s-spacing-s);
        background-color: var(--h365s-color-neutral-background-1);
        border-width: 1px;
        border-style: solid;
        border-color: var(--h365s-color-neutral-stroke-1);
        border-radius: var(--h365s-radius-l);
        padding: var(--h365s-spacing-xs) var(--h365s-spacing-s);
        box-shadow: var(--h365s-shadow-2);
        transition: border-color var(--h365s-duration-fast) var(--h365s-easing-standard),
            box-shadow var(--h365s-duration-fast) var(--h365s-easing-standard);
    }

    .h365s-search-bar-inner:focus-within {
        border-color: var(--h365s-color-brand-background);
        box-shadow: 0 0 0 1px var(--h365s-color-brand-background);
        outline: none;
    }

    /* Search icon inside the bar */
    .h365s-bar-icon {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        color: var(--h365s-color-neutral-foreground-3);
    }

    /* Search input */
    .h365s-search-input {
        flex: 1;
        min-width: 0;
        border-width: 0;
        border-style: solid;
        border-color: transparent;
        outline: none;
        background-color: transparent;
        font-family: var(--h365s-font-family);
        font-size: var(--h365s-font-size-300);
        line-height: var(--h365s-line-height-400);
        color: var(--h365s-color-neutral-foreground-1);
        padding: var(--h365s-spacing-s) var(--h365s-spacing-xs);
        min-height: 36px;
        height: auto;
        margin: 0;
    }

    .h365s-search-input::placeholder {
        color: var(--h365s-color-neutral-foreground-3);
    }

    .h365s-search-input::-webkit-search-cancel-button {
        -webkit-appearance: none;
    }

    /* Search submit button */
    .h365s-search-submit {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--h365s-spacing-xs);
        padding: var(--h365s-spacing-s) var(--h365s-spacing-l);
        border-width: 0;
        border-style: solid;
        border-color: transparent;
        border-radius: var(--h365s-radius-m);
        background-color: var(--h365s-color-brand-background);
        color: var(--h365s-color-brand-foreground);
        font-family: var(--h365s-font-family);
        font-size: var(--h365s-font-size-300);
        font-weight: var(--h365s-font-weight-semibold);
        line-height: var(--h365s-line-height-300);
        cursor: pointer;
        transition: background-color var(--h365s-duration-fast) var(--h365s-easing-standard);
        white-space: nowrap;
        margin: 0;
    }

    .h365s-search-submit:hover {
        background-color: var(--h365s-color-brand-background-hover);
    }

    .h365s-search-submit:active {
        background-color: var(--h365s-color-brand-background-pressed);
    }

    .h365s-search-submit:focus-visible {
        outline: 2px solid var(--h365s-color-neutral-stroke-focus);
        outline-offset: 2px;
    }

    /* ───── Icon-Only Mode ───── */
    .h365s-icon-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-width: 1px;
        border-style: solid;
        border-color: var(--h365s-color-neutral-stroke-1);
        border-radius: var(--h365s-radius-circular);
        background-color: var(--h365s-color-neutral-background-1);
        color: var(--h365s-color-neutral-foreground-2);
        cursor: pointer;
        box-shadow: var(--h365s-shadow-2);
        transition: all var(--h365s-duration-fast) var(--h365s-easing-standard);
    }

    .h365s-icon-trigger:hover {
        background-color: var(--h365s-color-neutral-background-hover);
        color: var(--h365s-color-neutral-foreground-1);
        box-shadow: var(--h365s-shadow-4);
    }

    .h365s-icon-trigger:focus-visible {
        outline: 2px solid var(--h365s-color-neutral-stroke-focus);
        outline-offset: 2px;
    }

    /* Expandable panel for icon mode */
    .h365s-expandable-panel {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1000;
        width: 400px;
        max-width: 90vw;
        background-color: var(--h365s-color-neutral-background-1);
        border-width: 1px;
        border-style: solid;
        border-color: var(--h365s-color-neutral-stroke-1);
        border-radius: var(--h365s-radius-l);
        box-shadow: var(--h365s-shadow-16);
        padding: var(--h365s-spacing-s);
        animation: h365s-slide-in var(--h365s-duration-normal) var(--h365s-easing-decelerate);
    }

    .h365s-expandable-panel[hidden] {
        display: none;
    }

    /* Close button */
    .h365s-close-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-width: 0;
        border-style: solid;
        border-color: transparent;
        border-radius: var(--h365s-radius-s);
        background-color: transparent;
        color: var(--h365s-color-neutral-foreground-3);
        cursor: pointer;
        flex-shrink: 0;
        transition: background-color var(--h365s-duration-fast) var(--h365s-easing-standard),
            color var(--h365s-duration-fast) var(--h365s-easing-standard);
    }

    .h365s-close-btn:hover {
        background-color: var(--h365s-color-neutral-background-hover);
        color: var(--h365s-color-neutral-foreground-1);
    }

    .h365s-close-btn:focus-visible {
        outline: 2px solid var(--h365s-color-neutral-stroke-focus);
        outline-offset: 2px;
    }

    /* ───── Full Mode – Filters Panel ───── */
    .h365s-filters-panel {
        margin-top: var(--h365s-spacing-m);
        padding: var(--h365s-spacing-m) var(--h365s-spacing-l);
        background-color: var(--h365s-color-neutral-background-2);
        border-width: 1px;
        border-style: solid;
        border-color: var(--h365s-color-neutral-stroke-2);
        border-radius: var(--h365s-radius-m);
    }

    .h365s-filter-row {
        display: flex;
        flex-wrap: wrap;
        gap: var(--h365s-spacing-m);
        align-items: flex-end;
    }

    .h365s-filter-group {
        display: flex;
        flex-direction: column;
        gap: var(--h365s-spacing-xs);
        flex: 1;
        min-width: 140px;
    }

    .h365s-filter-label {
        font-size: var(--h365s-font-size-200);
        font-weight: var(--h365s-font-weight-semibold);
        color: var(--h365s-color-neutral-foreground-2);
    }

    .h365s-filter-select,
    .h365s-filter-date {
        padding: var(--h365s-spacing-s) var(--h365s-spacing-m);
        border-width: 1px;
        border-style: solid;
        border-color: var(--h365s-color-neutral-stroke-1);
        border-radius: var(--h365s-radius-m);
        background-color: var(--h365s-color-neutral-background-1);
        font-family: var(--h365s-font-family);
        font-size: var(--h365s-font-size-300);
        color: var(--h365s-color-neutral-foreground-1);
        line-height: var(--h365s-line-height-300);
        transition: border-color var(--h365s-duration-fast) var(--h365s-easing-standard);
        width: 100%;
    }

    .h365s-filter-select:focus,
    .h365s-filter-date:focus {
        border-color: var(--h365s-color-brand-background);
        outline: none;
        box-shadow: 0 0 0 1px var(--h365s-color-brand-background);
    }

    .h365s-filter-actions {
        display: flex;
        flex-direction: row;
        gap: var(--h365s-spacing-s);
        align-items: flex-end;
        min-width: auto;
        flex: 0 0 auto;
    }

    .h365s-filter-apply {
        padding: var(--h365s-spacing-s) var(--h365s-spacing-l);
        border-width: 0;
        border-style: solid;
        border-color: transparent;
        border-radius: var(--h365s-radius-m);
        background-color: var(--h365s-color-brand-background);
        color: var(--h365s-color-brand-foreground);
        font-family: var(--h365s-font-family);
        font-size: var(--h365s-font-size-300);
        font-weight: var(--h365s-font-weight-semibold);
        cursor: pointer;
        transition: background-color var(--h365s-duration-fast) var(--h365s-easing-standard);
        white-space: nowrap;
    }

    .h365s-filter-apply:hover {
        background-color: var(--h365s-color-brand-background-hover);
    }

    .h365s-filter-apply:focus-visible {
        outline: 2px solid var(--h365s-color-neutral-stroke-focus);
        outline-offset: 2px;
    }

    .h365s-filter-clear {
        padding: var(--h365s-spacing-s) var(--h365s-spacing-l);
        border-width: 1px;
        border-style: solid;
        border-color: var(--h365s-color-neutral-stroke-1);
        border-radius: var(--h365s-radius-m);
        background-color: var(--h365s-color-neutral-background-1);
        color: var(--h365s-color-neutral-foreground-2);
        font-family: var(--h365s-font-family);
        font-size: var(--h365s-font-size-300);
        font-weight: var(--h365s-font-weight-semibold);
        cursor: pointer;
        transition: all var(--h365s-duration-fast) var(--h365s-easing-standard);
        white-space: nowrap;
    }

    .h365s-filter-clear:hover {
        background-color: var(--h365s-color-neutral-background-hover);
        color: var(--h365s-color-neutral-foreground-1);
    }

    .h365s-filter-clear:focus-visible {
        outline: 2px solid var(--h365s-color-neutral-stroke-focus);
        outline-offset: 2px;
    }

    /* ───── Results Panel ───── */
    .h365s-results-panel {
        position: absolute;
        left: 0;
        right: 0;
        z-index: 999;
        margin-top: var(--h365s-spacing-xs);
        background-color: var(--h365s-color-neutral-background-1);
        border-width: 1px;
        border-style: solid;
        border-color: var(--h365s-color-neutral-stroke-1);
        border-radius: var(--h365s-radius-l);
        box-shadow: var(--h365s-shadow-8);
        max-height: 420px;
        overflow-y: auto;
        animation: h365s-fade-in var(--h365s-duration-fast) var(--h365s-easing-decelerate);
    }

    .h365s-results-panel[hidden] {
        display: none;
    }

    /* Result item */
    .h365s-result-item {
        display: flex;
        gap: var(--h365s-spacing-m);
        padding: var(--h365s-spacing-m) var(--h365s-spacing-l);
        text-decoration: none;
        color: inherit;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: var(--h365s-color-neutral-stroke-2);
        transition: background-color var(--h365s-duration-fast) var(--h365s-easing-standard);
        cursor: pointer;
    }

    .h365s-result-item:last-child {
        border-bottom-width: 0;
    }

    .h365s-result-item:hover,
    .h365s-result-item:focus,
    .h365s-result-item[aria-selected="true"] {
        background-color: var(--h365s-color-neutral-background-hover);
        outline: none;
    }

    .h365s-result-item:focus-visible {
        outline: 2px solid var(--h365s-color-neutral-stroke-focus);
        outline-offset: -2px;
    }

    /* Result thumbnail */
    .h365s-result-thumb {
        flex-shrink: 0;
        width: 56px;
        height: 56px;
        border-radius: var(--h365s-radius-m);
        object-fit: cover;
        background-color: var(--h365s-color-neutral-background-3);
    }

    /* Result content */
    .h365s-result-content {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: var(--h365s-spacing-xxs);
    }

    .h365s-result-title {
        font-size: var(--h365s-font-size-300);
        font-weight: var(--h365s-font-weight-semibold);
        color: var(--h365s-color-neutral-foreground-1);
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .h365s-result-excerpt {
        font-size: var(--h365s-font-size-200);
        color: var(--h365s-color-neutral-foreground-2);
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .h365s-result-meta {
        display: flex;
        gap: var(--h365s-spacing-s);
        align-items: center;
        margin-top: var(--h365s-spacing-xxs);
    }

    .h365s-result-type {
        display: inline-block;
        padding: var(--h365s-spacing-xxs) var(--h365s-spacing-s);
        font-size: 11px;
        font-weight: var(--h365s-font-weight-semibold);
        line-height: 1.3;
        border-radius: var(--h365s-radius-s);
        background-color: var(--h365s-color-neutral-background-3);
        color: var(--h365s-color-neutral-foreground-2);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .h365s-result-date {
        font-size: var(--h365s-font-size-200);
        color: var(--h365s-color-neutral-foreground-3);
    }

    /* Status messages */
    .h365s-status-message {
        padding: var(--h365s-spacing-xl);
        text-align: center;
        color: var(--h365s-color-neutral-foreground-3);
        font-size: var(--h365s-font-size-300);
    }

    /* Results summary footer */
    .h365s-results-footer {
        padding: var(--h365s-spacing-m) var(--h365s-spacing-l);
        text-align: center;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: var(--h365s-color-neutral-stroke-2);
    }

    .h365s-load-more {
        display: inline-flex;
        align-items: center;
        gap: var(--h365s-spacing-xs);
        padding: var(--h365s-spacing-s) var(--h365s-spacing-l);
        border-width: 1px;
        border-style: solid;
        border-color: var(--h365s-color-neutral-stroke-1);
        border-radius: var(--h365s-radius-m);
        background-color: var(--h365s-color-neutral-background-1);
        color: var(--h365s-color-brand-background);
        font-family: var(--h365s-font-family);
        font-size: var(--h365s-font-size-300);
        font-weight: var(--h365s-font-weight-semibold);
        cursor: pointer;
        transition: all var(--h365s-duration-fast) var(--h365s-easing-standard);
    }

    .h365s-load-more:hover {
        background-color: var(--h365s-color-neutral-background-hover);
        border-color: var(--h365s-color-brand-background);
    }

    .h365s-load-more:focus-visible {
        outline: 2px solid var(--h365s-color-neutral-stroke-focus);
        outline-offset: 2px;
    }

    /* Spinner */
    .h365s-spinner {
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 2px solid var(--h365s-color-neutral-stroke-2);
        border-top-color: var(--h365s-color-brand-background);
        border-radius: 50%;
        animation: h365s-spin 0.6s linear infinite;
        margin: 0 auto;
    }

    /* ───── Responsive ───── */
    @media screen and (max-width: 768px) {
        .h365s-expandable-panel {
            width: 320px;
        }

        .h365s-filter-row {
            flex-direction: column;
        }

        .h365s-filter-group {
            min-width: 100%;
        }

        .h365s-filter-actions {
            flex-direction: row;
            width: 100%;
        }

        .h365s-filter-apply,
        .h365s-filter-clear {
            flex: 1;
        }
    }

    @media screen and (max-width: 480px) {
        .h365s-search-bar-inner {
            padding: var(--h365s-spacing-xxs) var(--h365s-spacing-xs);
        }

        .h365s-search-submit {
            padding: var(--h365s-spacing-s) var(--h365s-spacing-m);
            font-size: var(--h365s-font-size-200);
        }

        .h365s-expandable-panel {
            position: fixed;
            top: var(--h365s-spacing-s);
            left: var(--h365s-spacing-s);
            right: var(--h365s-spacing-s);
            width: auto;
            max-width: none;
        }

        .h365s-results-panel {
            max-height: 300px;
        }

        .h365s-result-item {
            padding: var(--h365s-spacing-s) var(--h365s-spacing-m);
        }

        .h365s-result-thumb {
            width: 40px;
            height: 40px;
        }
    }

}

/* END @layer h365s-defaults */

/* ═══════════════════════════════════════════════════════════
   Keyframes – outside layer (global by nature)
   ═══════════════════════════════════════════════════════════ */
@keyframes h365s-slide-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes h365s-fade-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* ═══════════════════════════════════════════════════════════
   Screen Reader & Live Region – outside layer (!important)
   ═══════════════════════════════════════════════════════════ */
.h365s-search-widget .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
}

.h365s-live-region {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   Accessibility – outside layer (uses !important)
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

    .h365s-search-widget *,
    .h365s-search-widget *::before,
    .h365s-search-widget *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode */
@media (forced-colors: active) {

    .h365s-search-bar-inner,
    .h365s-icon-trigger,
    .h365s-expandable-panel,
    .h365s-results-panel,
    .h365s-filter-select,
    .h365s-filter-date {
        border-color: ButtonText;
    }

    .h365s-search-submit,
    .h365s-filter-apply {
        background-color: ButtonText;
        color: ButtonFace;
        forced-color-adjust: none;
    }

    .h365s-result-item:hover,
    .h365s-result-item:focus,
    .h365s-result-item[aria-selected="true"] {
        background-color: Highlight;
        color: HighlightText;
    }
}