/* ============================================================================
 * Fast Fuzzy Search — base + position modifiers
 *
 * Theme CSS files live at:
 *   css/minimal-light.css, css/minimal-dark.css
 *   css/material-light.css, css/material-dark.css, css/glassmorphic.css, css/brutal.css
 *
 * This file is always loaded first. It provides the BEM structure, layout,
 * spacing, and motion tokens. All colors, borders, shadows, and other
 * surface details come from the active theme file (loaded second).
 *
 * The conditional enqueue in fast-fuzzy-search.php loads:
 *   1. This file (always — tokens + BEM base)
 *   2. The active theme file (css/{aesthetic}.css)
 *   3. Admin Custom CSS via wp_add_inline_style (if set)
 *   4. Theme-file auto-discovery (if wp-content/themes/active/fast-fuzzy-search/custom.css exists)
 *
 * Each theme file overrides what it needs via the
 *   .fast-fuzzy-search--{aesthetic} block scope.
 *
 * ─── BEM contract: which elements each theme styles ───
 *
 *  button.php
 *    .fast-fuzzy-search__button         (full text "Search" button)
 *
 *  icon-button.php
 *    .fast-fuzzy-search__icon-button    (icon-only circular button)
 *
 *  input-button.php
 *    .fast-fuzzy-search__field          (the search field used as the trigger)
 *    .fast-fuzzy-search__icon           (icon column inside the field)
 *    .fast-fuzzy-search__icon-frame     (24×24 wrapper for the SVG icon)
 *
 *  input-field.php
 *    .fast-fuzzy-search__field          (the search field in the panel)
 *    .fast-fuzzy-search__icon           (icon column)
 *    .fast-fuzzy-search__icon-frame     (icon frame)
 *    .fast-fuzzy-search__input          (the text input)
 *    .fast-fuzzy-search__clear          (X button to clear)
 *    .fast-fuzzy-search__post-types     (post-type filter bar)
 *    .fast-fuzzy-search__chip-list      (filter chip list)
 *    .fast-fuzzy-search__chip-button    (each filter chip button)
 *    .fast-fuzzy-search__chip           (type label inside a result row)
 *    .fast-fuzzy-search__context        ("Searching in X" strip)
 *    .fast-fuzzy-search__results        (results <ul>)
 *    .fast-fuzzy-search__result-item    (each <li>)
 *    .fast-fuzzy-search__result-link    (the <a>)
 *    .fast-fuzzy-search__result-icon    (icon in the result row)
 *    .fast-fuzzy-search__result-image   (featured image)
 *    .fast-fuzzy-search__result-content (right side of the row)
 *    .fast-fuzzy-search__result-text    (title + secondary info stack)
 *    .fast-fuzzy-search__result-primary (title)
 *    .fast-fuzzy-search__result-secondary (secondary info)
 *    .fast-fuzzy-search__view-all       ("View all N results" button)
 *    .fast-fuzzy-search__view-all-icon  (chevron inside the button)
 *    .fast-fuzzy-search__empty          (empty + no-results state container)
 *    .fast-fuzzy-search__empty-title
 *    .fast-fuzzy-search__empty-description
 *    .fast-fuzzy-search__keyboard-shortcuts (footer)
 *    .fast-fuzzy-search__kbd            (individual key)
 *    .fast-fuzzy-search__kbd-sep        (separator dot)
 *    .fast-fuzzy-search__keyboard-shortcuts-text
 *    .fast-fuzzy-search__panel-close
 *
 *  search-panel.php
 *    .ffs-overlay                       (full-screen backdrop)
 *
 * Each theme file (css/themes-minimal/{slug}.css or css/themes-pro/{slug}.css)
 * provides the surface (color, border, shadow) for these elements, scoped
 * under .fast-fuzzy-search--{slug}.
 * ============================================================================
 */

/* ============================================================================
 * Design tokens (formerly _tokens.css) — shared across all themes
 * ============================================================================ */
:root {
    /* Spacing — 4px baseline grid */
    --ffs-space-1:  4px;
    --ffs-space-2:  8px;
    --ffs-space-3:  12px;
    --ffs-space-4:  16px;
    --ffs-space-5:  20px;
    --ffs-space-6:  24px;
    --ffs-space-7:  28px;
    --ffs-space-8:  32px;
    --ffs-space-10: 40px;
    --ffs-space-12: 48px;

    /* Radius — six-step scale */
    --ffs-radius-xs:   2px;
    --ffs-radius-sm:   4px;
    --ffs-radius-md:   8px;
    --ffs-radius-lg:  12px;
    --ffs-radius-xl:  16px;
    --ffs-radius-pill: 9999px;

    /* Type */
    --ffs-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

    /* Shadows */
    --ffs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --ffs-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.08);
    --ffs-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 32px rgba(0, 0, 0, 0.12);

    /* Motion */
    --ffs-easing:        cubic-bezier(0.4, 0, 0.2, 1);
    --ffs-duration-fast: 120ms;
    --ffs-duration:      200ms;

    /* Defaults that individual themes override */
    --ffs-border-color:          transparent;
    --ffs-scrollbar-thumb:        #747474;
    --ffs-scrollbar-thumb-hover:  #555;

    /* Neutral palette (themes can reference these as fallbacks) */
    --ffs-color-white:   #ffffff;
    --ffs-color-gray-50:  #fafafa;
    --ffs-color-gray-100: #f0f0f0;
    --ffs-color-gray-200: #e0e0e0;
    --ffs-color-gray-300: #dddddd;
    --ffs-color-gray-400: #cccccc;
    --ffs-color-gray-500: #aaaaaa;
    --ffs-color-gray-600: #949494;
    --ffs-color-gray-700: #757575;
    --ffs-color-gray-800: #2f2f2f;
    --ffs-color-gray-900: #1e1e1e;
    --ffs-color-black:   #000000;

    /* Semantic (themes can reference these) */
    --ffs-alert-red:     #d63638;
    --ffs-alert-yellow:  #dba617;
    --ffs-alert-green:   #00a32a;
    --ffs-info-blue:     #2271b1;
}

[x-cloak] { display: none !important; }

.fast-fuzzy-search,
.fast-fuzzy-search * {
    box-sizing: border-box;
}

.fast-fuzzy-search {
    z-index: 9999;
    display: flex;
    width: 31.25rem;
    max-width: 90%;
    flex-direction: column;
    font-family: var(--ffs-font-sans);
    color: inherit;
}

.fast-fuzzy-search button:not([disabled]) { cursor: pointer; }

/* ---------------------------------------------------------------------------
 * Scrollbar — 6px wide, theme-tinted via --ffs-scrollbar-thumb
 * ------------------------------------------------------------------------- */
.fast-fuzzy-search__scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.fast-fuzzy-search__scrollbar::-webkit-scrollbar-thumb {
    background: var(--ffs-scrollbar-thumb);
    border-radius: 6px;
}

.fast-fuzzy-search__scrollbar::-webkit-scrollbar-track { background: transparent; }

.fast-fuzzy-search__scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--ffs-scrollbar-thumb-hover);
}

/* ---------------------------------------------------------------------------
 * Search field + input
 * ------------------------------------------------------------------------- */
.fast-fuzzy-search__field {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    padding: 0;
    text-align: left;
}

.fast-fuzzy-search__field[data-has-query="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.fast-fuzzy-search__input {
    margin: 0;
    display: flex;
    height: 100%;
    width: 100%;
    flex-grow: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border: 0 !important;
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit;
    outline: none !important;
}

.fast-fuzzy-search__input:focus,
body .fast-fuzzy-search__input:focus {
    outline: none !important;
}

.fast-fuzzy-search__input:focus-visible {
    outline-color: var(--ffs-color-primary-600, currentColor);
}

.fast-fuzzy-search__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    align-self: stretch;
}

/* Standard 24x24 frame for icons inside the search field, clear button, etc. */
.fast-fuzzy-search__icon-frame {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.fast-fuzzy-search__icon-frame svg {
    width: 1.25em;
    height: 1.25em;
}

/* ---------------------------------------------------------------------------
 * Clear button (X) shown when the field has a query
 * ------------------------------------------------------------------------- */
.fast-fuzzy-search__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 100%;
    background: transparent;
    cursor: pointer;
}

.fast-fuzzy-search__clear button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: var(--ffs-radius-pill);
    cursor: pointer;
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search__clear button:focus-visible {
    outline: 2px solid var(--ffs-color-primary-600, currentColor);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Post-type filter chips
 * ------------------------------------------------------------------------- */
.fast-fuzzy-search__post-types {
    border-top: 0;
    border-bottom: 1px solid var(--ffs-border-color);
    padding: var(--ffs-space-3) var(--ffs-space-4);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.fast-fuzzy-search__chip-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ffs-space-2);
    white-space: nowrap;
}

.fast-fuzzy-search__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ffs-radius-pill);
    padding: 2px var(--ffs-space-2);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
                color var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search__chip-button {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: var(--ffs-space-1);
    border-radius: var(--ffs-radius-pill);
    border: 1px solid currentColor;
    padding: 6px var(--ffs-space-3);
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--ffs-duration-fast) var(--ffs-easing),
                background-color var(--ffs-duration-fast) var(--ffs-easing),
                border-color var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search__chip-button:focus-visible {
    outline: 2px solid var(--ffs-color-primary-600, currentColor);
    outline-offset: 2px;
}

.fast-fuzzy-search__chip-button svg {
    width: 0.75em;
    height: 0.75em;
}

/* ---------------------------------------------------------------------------
 * Context strip (shown when searching inside a specific post-type)
 * ------------------------------------------------------------------------- */
.fast-fuzzy-search__context {
    margin: var(--ffs-space-3) 0 var(--ffs-space-1);
    padding: var(--ffs-space-2);
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

/* ---------------------------------------------------------------------------
 * Results list
 * ------------------------------------------------------------------------- */
.fast-fuzzy-search__results {
    margin: 0;
    height: 24rem;
    width: 100%;
    flex-grow: 1;
    list-style: none;
    overflow-y: auto;
    padding: var(--ffs-space-1) var(--ffs-space-2);
    animation: ffs-results-fade-in var(--ffs-duration, 200ms) var(--ffs-easing);
}

@keyframes ffs-results-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fast-fuzzy-search__result-item { width: 100%; }

.fast-fuzzy-search__result-link {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    padding: var(--ffs-space-3) var(--ffs-space-4);
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    border-radius: var(--ffs-radius-sm);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
                border-color var(--ffs-duration-fast) var(--ffs-easing),
                transform var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search__result-link:focus-visible {
    outline: 2px solid var(--ffs-color-primary-600, currentColor);
    outline-offset: -2px;
}

.fast-fuzzy-search__result-link:active {
    transform: scale(0.997);
}

.fast-fuzzy-search__result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    margin-right: var(--ffs-space-4);
    padding: var(--ffs-space-2);
    border-radius: var(--ffs-radius-sm);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
                color var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search__result-image {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    margin-right: var(--ffs-space-4);
    border-radius: var(--ffs-radius-sm);
    object-fit: cover;
}

.fast-fuzzy-search__result-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ffs-space-2);
    flex: 1;
    min-width: 0;
}

.fast-fuzzy-search__result-text {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

.fast-fuzzy-search__result-primary {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.fast-fuzzy-search__result-secondary {
    font-size: 12px;
    line-height: 16px;
    margin-top: var(--ffs-space-1);
    opacity: 0.8;
}

/* ---------------------------------------------------------------------------
 * Empty / no-results state
 * ------------------------------------------------------------------------- */
.fast-fuzzy-search__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ffs-space-3);
    width: 100%;
    min-height: 12rem;
    padding: var(--ffs-space-6) var(--ffs-space-4);
    text-align: center;
    font-size: 14px;
    line-height: 20px;
}

.fast-fuzzy-search__empty svg {
    width: 32px;
    height: 32px;
    opacity: 0.6;
}

.fast-fuzzy-search__empty-title {
    font-size: 15px;
    font-weight: 600;
}

.fast-fuzzy-search__empty-description {
    font-size: 13px;
    opacity: 0.75;
    max-width: 24rem;
}

/* ---------------------------------------------------------------------------
 * Keyboard shortcut hints footer
 * ------------------------------------------------------------------------- */
.fast-fuzzy-search__keyboard-shortcuts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ffs-space-2);
    padding: var(--ffs-space-3) var(--ffs-space-4);
    border-top: 1px solid var(--ffs-border-color);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: inherit;
    white-space: nowrap;
}

.fast-fuzzy-search__keyboard-shortcuts-text {
    margin-right: var(--ffs-space-1);
    opacity: 0.75;
}

.fast-fuzzy-search__keyboard-shortcuts-sep {
    opacity: 0.4;
    margin: 0 var(--ffs-space-1);
}

/* Keyboard key visual — themes tweak the surface */
.fast-fuzzy-search__kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border: 1px solid var(--ffs-kbd-border, var(--ffs-border-color, currentColor));
    border-bottom-width: 2px;
    border-radius: var(--ffs-radius-sm, 4px);
    background: var(--ffs-kbd-bg, transparent);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.fast-fuzzy-search__kbd svg {
    width: 12px;
    height: 12px;
}

/* ---------------------------------------------------------------------------
 * View all results button
 *
 * Sits below the results list. Hidden when there are 6 or fewer results
 * or when the list is already expanded. Each theme tweaks the surface
 * to match its aesthetic.
 * ------------------------------------------------------------------------- */
.fast-fuzzy-search__view-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ffs-space-2);
    width: 100%;
    padding: var(--ffs-space-3) var(--ffs-space-4);
    background: transparent;
    border: 0;
    border-top: 1px solid var(--ffs-border-color);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ffs-color-primary-600, #2271b1);
    cursor: pointer;
    text-align: left;
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
                color var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search__view-all:hover {
    background: var(--ffs-color-gray-100, #f0f0f0);
}

.fast-fuzzy-search__view-all:focus-visible {
    outline: 2px solid var(--ffs-color-primary-600, currentColor);
    outline-offset: -2px;
}

.fast-fuzzy-search__view-all:active {
    background: var(--ffs-color-gray-200, #e0e0e0);
}

.fast-fuzzy-search__view-all-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search__view-all:hover .fast-fuzzy-search__view-all-icon {
    transform: translateX(2px);
}

/* ---------------------------------------------------------------------------
 * Trigger buttons (icon-only, full-button, input-field variant)
 *
 * The base only sets layout + transition. Each theme owns the surface
 * (background, border, color, shadow) so the trigger matches the panel.
 * ------------------------------------------------------------------------- */
.fast-fuzzy-search__icon-button,
.fast-fuzzy-search__button {
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3.5rem;
    padding: 0;
    cursor: pointer;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: color var(--ffs-duration-fast) var(--ffs-easing),
                background-color var(--ffs-duration-fast) var(--ffs-easing),
                box-shadow var(--ffs-duration-fast) var(--ffs-easing),
                transform var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search__icon-button { width: 3.5rem; }
.fast-fuzzy-search__button      { gap: var(--ffs-space-2); padding: 0 var(--ffs-space-4); width: auto; }

.fast-fuzzy-search__icon-button:focus-visible,
.fast-fuzzy-search__button:focus-visible {
    outline: 2px solid var(--ffs-color-primary-600, currentColor);
    outline-offset: 2px;
}

/* Inline / scrolled states */
.fast-fuzzy-search--inline { /* used in input-field.php when is_inline=true; theme sets spacing */ }
.fast-fuzzy-search--scrolled { pointer-events: none; opacity: 0; }

/* Position variants */
.fast-fuzzy-search--bottom-center {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    max-height: 90vh;
    transform: translateX(-50%);
}

.fast-fuzzy-search--bottom-left {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    max-height: 90vh;
}

.fast-fuzzy-search--bottom-right {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    max-height: 90vh;
}

/* ---------------------------------------------------------------------------
 * Panel close (X) button — base position; themes refine the colors
 * ------------------------------------------------------------------------- */
.fast-fuzzy-search__panel-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    width: 2.5rem;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: transparent;
    transition: color var(--ffs-duration-fast) var(--ffs-easing),
                background-color var(--ffs-duration-fast) var(--ffs-easing),
                transform var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search__panel-close:focus-visible {
    outline: 2px solid var(--ffs-color-primary-600, currentColor);
    outline-offset: 2px;
}

.fast-fuzzy-search__panel-close:active {
    transform: scale(0.94);
}

/* ---------------------------------------------------------------------------
 * Overlay backdrop (used by search-panel.php)
 * ------------------------------------------------------------------------- */
.ffs-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 4rem 0;
    background-color: rgb(0 0 0 / 0.5);
}

@media (min-width: 640px) {
    .ffs-overlay { padding: 4rem 0; }
}

/* ---------------------------------------------------------------------------
 * Alpine.js enter/leave transitions
 * ------------------------------------------------------------------------- */
.fast-fuzzy-search__transition-enter .fast-fuzzy-search { opacity: 0; transform: translateY(5rem); }

.fast-fuzzy-search__transition-leave {
    transition: opacity 400ms var(--ffs-easing), transform 400ms var(--ffs-easing);
}

.fast-fuzzy-search__transition-leave-start { opacity: 1; }
.fast-fuzzy-search__transition-leave-end   { opacity: 0; }

.fast-fuzzy-search__transition-leave-start .fast-fuzzy-search { opacity: 1; transform: scale(1); }
.fast-fuzzy-search__transition-leave-end   .fast-fuzzy-search { opacity: 0; transform: scale(0.95); }

.fast-fuzzy-search__transition-enter .fast-fuzzy-search__panel-close,
.fast-fuzzy-search__transition-leave .fast-fuzzy-search__panel-close {
    opacity: 0;
    transform: scale(0.5);
}