/* =============================================================================
   Federated Search Banner  —  fed-search-banner.css  (v1.0.5)
   Matches Figma node 2495-7345: full-width blue (#1181c4) top bar.
   Search: pill-shaped input with search icon LEFT, text MIDDLE, × RIGHT.
   Pill: white background, dark slate text/icons (#425563, 7.75:1 on white ✔).
   ============================================================================= */

/* ── CSS custom property defaults (overridable via Avada builder param inline styles) ── */
.fed-search-banner {
    --fed-sb-bg:            #1181c4;   /* banner background                          */
    --fed-sb-color:         #ffffff;   /* banner-level elements: toggle icon, FR link */
    --fed-sb-pill-bg:       #ffffff;   /* pill fill                                   */
    --fed-sb-pill-color:    #425563;   /* pill icons + text — 7.75:1 on white (AA ✔)   */
    --fed-sb-input-width:   260px;
    --fed-sb-input-height:  36px;
    --fed-sb-margin-top:    0;
    --fed-sb-margin-bottom: 0;
}

/* ── Banner wrapper ─────────────────────────────────────────────────────────── */
.fed-search-banner {
    background-color: var(--fed-sb-bg);
    margin-top:       var(--fed-sb-margin-top);
    margin-bottom:    var(--fed-sb-margin-bottom);
    position:         relative;   /* anchor for the results portal */
    width:            100%;
}

/* ── Inner bar: flex row, items packed to the right ─────────────────────────── */
.fed-search-banner__bar {
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    padding:         8px 24px;
    flex-wrap:       nowrap;
    position:        relative;
}

/* ── Search section: icon + pill wrapper ────────────────────────────────────── */
.fed-search-banner__search {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
}

/* ── Toggle icon button (the magnifying-glass visible when collapsed) ────────── */
.fed-search-banner__icon {
    background:      transparent;
    border:          none;
    color:           var(--fed-sb-color);
    cursor:          pointer;
    padding:         4px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    line-height:     1;
    flex-shrink:     0;
    transition:      opacity 0.15s;
    /* sit to the LEFT of the pill when both are visible during transition */
    order:           0;
}

.fed-search-banner__icon:hover { opacity: 0.75; }

.fed-search-banner__icon svg {
    width:  20px;
    height: 20px;
    display: block;
}

/* Hide the standalone icon while the pill is open */
.fed-search-banner.is-search-open .fed-search-banner__icon {
    display: none;
}

/* ── Pill slide-in wrapper (grid 0fr → 1fr trick) ───────────────────────────── *
 *  Using grid-template-columns allows us to animate from 0 to auto width
 *  without overflow:hidden on the OUTER container, which would clip the
 *  results portal.  The INNER div carries overflow:hidden to clip the pill
 *  content only during the transition.
 * ──────────────────────────────────────────────────────────────────────────── */
.fed-search-banner__form-wrap {
    display:               grid;
    grid-template-columns: 0fr;
    transition:            grid-template-columns 0.28s ease;
    order:                 1;
}

.fed-search-banner.is-search-open .fed-search-banner__form-wrap {
    grid-template-columns: 1fr;
}

.fed-search-banner__form-inner {
    overflow: hidden;
    min-width: 0;
}

/* ── Pill: the visual capsule containing [icon] [input] [×] ─────────────────── */
/*  White fill + banner-blue border.  Pill interior text/icons use --fed-sb-pill-color
 *  (#425563) which achieves 7.75:1 on white — WCAG 1.4.3 AA for 14 px normal text. */
.fed-search-banner__pill {
    display:         flex;
    align-items:     center;
    height:          var(--fed-sb-input-height);
    width:           var(--fed-sb-input-width);
    background:      var(--fed-sb-pill-bg);
    border:          1px solid #1181c4;
    border-radius:   999px;
    box-sizing:      border-box;
    transition:      width 0.25s ease;
}

/* Expand pill width slightly when the search is open */
.fed-search-banner.is-search-open .fed-search-banner__pill {
    width: calc(var(--fed-sb-input-width) + 80px);
}

/* WCAG 2.4.7 Focus Visible — glow ring when keyboard focus is inside the pill */
.fed-search-banner__pill:focus-within {
    box-shadow: 0 0 0 3px rgba(17, 129, 196, 0.45); /* blue ring outside the white pill */
    outline:    none; /* outline can't follow border-radius; box-shadow used instead */
}

/* ── Form inside the pill ───────────────────────────────────────────────────── */
.fed-search-banner__form {
    display:    flex;
    align-items: center;
    flex:        1;
    min-width:   0;
    height:      100%;
}

/* ── Submit / search icon — LEFT side of pill ───────────────────────────────── */
.fed-search-banner__pill-submit {
    background:  transparent;
    border:      none;
    color:       var(--fed-sb-pill-color);
    cursor:      pointer;
    display:     flex;
    align-items: center;
    justify-content: center;
    padding:     0 8px 0 12px;
    height:      100%;
    flex-shrink: 0;
    transition:  opacity 0.15s;
}

.fed-search-banner__pill-submit:hover { opacity: 0.75; }

.fed-search-banner__pill-submit svg {
    width:   16px;
    height:  16px;
    display: block;
}

/* ── Search text input — MIDDLE of pill ─────────────────────────────────────── */
.fed-search-banner__input {
    flex:                    1;
    min-width:               0;
    background:              transparent !important;
    border:                  none !important;
    border-bottom:           none !important;
    outline:                 none !important;
    box-shadow:              none !important;
    /* Hardcoded rather than var() — Avada's dynamically injected <style> block
     * appears after our stylesheet in the DOM and overrides CSS variable
     * declarations.  #425563 on #ffffff = 7.75:1 (WCAG 1.4.3 AA ✔).          */
    color:                   #425563 !important;
    -webkit-text-fill-color: #425563 !important;
    font-size:               14px;
    line-height:             1;
    padding:                 0 !important;
    height:                  100%;
    -webkit-appearance:      none;
}

.fed-search-banner__input:focus {
    background:              transparent !important;
    color:                   #425563 !important;
    -webkit-text-fill-color: #425563 !important;
}

.fed-search-banner__input::placeholder {
    /* Same hardcoded colour: 7.75:1 on white at full opacity — WCAG 1.4.3 AA ✔ */
    color:                   #425563 !important;
    -webkit-text-fill-color: #425563 !important;
    opacity:                 1 !important;
}

/* Hide webkit search decorations */
.fed-search-banner__input::-webkit-search-decoration,
.fed-search-banner__input::-webkit-search-cancel-button,
.fed-search-banner__input::-webkit-search-results-button,
.fed-search-banner__input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    display: none;
}

/* ── Close (×) button — RIGHT side of pill ──────────────────────────────────── */
.fed-search-banner__close {
    background:  transparent;
    border:      none;
    color:       var(--fed-sb-pill-color);
    cursor:      pointer;
    display:     flex;
    align-items: center;
    justify-content: center;
    padding:     0 12px 0 6px;
    height:      100%;
    flex-shrink: 0;
    transition:  opacity 0.15s;
}

.fed-search-banner__close:hover { opacity: 0.75; }

.fed-search-banner__close svg {
    width:   13px;
    height:  13px;
    display: block;
}

/* WCAG 2.4.7 Focus Visible — keyboard focus rings on all standalone icon buttons */
.fed-search-banner__icon:focus-visible,
.fed-search-banner__pill-submit:focus-visible,
.fed-search-banner__close:focus-visible {
    outline:        2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 2px;
    border-radius:  4px;
}

/* ── Loading spinner (visible while AJAX is in-flight) ────────────────────── */
.fed-search-banner__loading {
    display:      none;
    width:        14px;
    height:       14px;
    border:       2px solid rgba(66, 85, 99, 0.25);
    border-top-color: var(--fed-sb-pill-color);
    border-radius: 50%;
    animation:    fed-sb-spin 0.7s linear infinite;
    flex-shrink:  0;
    margin-right: 4px;
}

.fed-search-banner.is-loading .fed-search-banner__loading { display: block; }

/* Submit/search icon stays visible during loading — spinner beside the close
 * button is sufficient feedback; hiding the icon was confusing. */

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

/* ── Live-search results portal ─────────────────────────────────────────────── *
 *  Positioned absolute relative to .fed-search-banner.
 *  Lives outside the overflow:hidden form-inner so it is never clipped.
 * ──────────────────────────────────────────────────────────────────────────── */
.fed-search-banner__results {
    position:      absolute;
    top:           100%;
    left:          auto;           /* JS sets this dynamically via positionResults() */
    right:         0;              /* fallback if JS hasn't run yet */
    width:         var(--fed-sb-input-width); /* fallback; JS overrides to match pill */
    max-height:    360px;
    overflow-y:    auto;
    background:    #ffffff;
    border:        1px solid #d0d0d0;
    border-top:    none;
    border-radius: 0 0 6px 6px;
    box-shadow:    0 6px 18px rgba(0, 0, 0, 0.14);
    z-index:       9999;
    display:       none;
    overscroll-behavior: contain;
}

.fed-search-banner__results.is-visible { display: block; }

/* ─── Individual result row ─────────────────────────────────────────────────── */
.fed-sb-result {
    display:         flex;
    align-items:     center;
    padding:         10px 14px;
    text-decoration: none;
    color:           #222222;
    border-bottom:   1px solid #f0f0f0;
    gap:             10px;
    transition:      background 0.1s;
}

.fed-sb-result:last-child  { border-bottom: none; }
.fed-sb-result:hover,
.fed-sb-result:focus { background: #f4f8fc; outline: none; }

/* WCAG 2.4.7 — show a visible outline on keyboard focus (suppressed on mouse via :focus-visible) */
.fed-sb-result:focus-visible {
    outline:        2px solid #1181c4;
    outline-offset: -2px;
}

.fed-sb-result__img {
    width:         40px;
    height:        40px;
    object-fit:    cover;
    border-radius: 2px;
    flex-shrink:   0;
}

.fed-sb-result__body {
    display:        flex;
    flex-direction: column;
    min-width:      0;
}

.fed-sb-result__title {
    font-size:     14px;
    line-height:   1.35;
    color:         #222222;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.fed-sb-result__type {
    font-size:      11px;
    color:          #888888;
    margin-top:     3px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fed-sb-result--empty {
    padding:    14px;
    color:      #888888;
    font-size:  14px;
    display:    block;
    text-align: center;
    cursor:     default;
}

/* ── WPML language switcher ─────────────────────────────────────────────────── */
.fed-search-banner__lang {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
}

.fed-search-banner__lang-sep {
    color:       rgba(255, 255, 255, 0.55);
    padding:     0 10px;
    font-size:   18px;
    line-height: 1;
    user-select: none;
}

/* Direct link to the alternate language (e.g. "FR" on English pages) */
.fed-search-banner__lang-link,
.fed-search-banner__lang-link:visited {
    color:           var(--fed-sb-color) !important;
    text-decoration: none !important;
    font-size:       16px;
    font-weight:     700;
    letter-spacing:  0.04em;
    font-family:     'Century Gothic Pro', 'CenturyGothic', 'Century Gothic', 'Futura', sans-serif;
    line-height:     1;
    padding:         4px 2px;
    opacity:         1;
    transition:      opacity 0.15s;
}

.fed-search-banner__lang-link:hover,
.fed-search-banner__lang-link:focus {
    color:           var(--fed-sb-color) !important;
    text-decoration: none !important;
    opacity:         0.75;
}

.fed-search-banner__lang-link:focus-visible {
    opacity:        1;
    outline:        2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 3px;
    border-radius:  2px;
}

/* Separate multiple lang links with a small gap if there are more than two languages */
.fed-search-banner__lang-link + .fed-search-banner__lang-link {
    margin-left: 8px;
}

/* ── Visually-hidden helper (mirrors WordPress core .screen-reader-text) ─────── *
 *  Defined here so the label works even if the active theme does not include it.
 * ──────────────────────────────────────────────────────────────────────────── */
.fed-search-banner .screen-reader-text {
    border:    0;
    clip:      rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height:    1px;
    margin:    -1px;
    overflow:  hidden;
    padding:   0;
    position:  absolute;
    width:     1px;
    word-wrap: normal !important;
}