/*
    Rouse Refresh header search
    Used by Views/Partials/RouseRefresh/Search-new.cshtml (header-new.cshtml).
    Scoped to header.rr-header .rr-search, so the old search (#search-form, Partials/Search.cshtml) is untouched.

    Figma "Mega Menu - Insights - XLarge" (1440) / "Large" (1025):
    - Masthead while open: #F9F9F9, 1px bottom border #171245 30%, close icon in place of the search icon.
    - Search row: 24px under the masthead, full content width (72px sides, 40px on Large),
      #171245 30% with a 1px #171245 30% border (drawn solid as #B5B4C3 so the page does not show through),
      radius 16, padding 20px 24px, 16px gap. Panel #F9F9F9, 24px above / 40px below; it grows with the suggestions.
      16x16 search icon, Archivo Medium 32px / 105% #171245, 16x16 up arrow at 30% (100% / 1.5px while the list is open).
    - Suggestions (open): row radius 16/16/0/0, list right under it with radius 0/0/16/16: #F9F9F9, 1px #171245 30% border,
      shadow 0 12px 24px #171245 10%. Rows 54px, padding 18px 24px, 16px gap, 1px #E8E8E8 divider,
      search icon at 60%, Archivo 16px / 115% (typed part Bold, rest Regular), right arrow at 30%.
      Active row: #171245 30%, arrow at 80%.

    Figma "Medium" (768) / "Small" (375), 1024px and below:
    - Full-screen #171245 panel under the masthead (like the burger menu), 16px top / 40px bottom padding.
    - Search row: 8px 24px around it (4px 20px on Small), #FFFFFF 6%, 1px #FFFFFF 10% border, radius 12 (8 on Small),
      padding 16px 20px (12px 16px), gap 16px (12px), Archivo Medium 24px (20px) #F9F9F9. No up arrow on Small.
    - Suggestions: always shown under the row, 16px gap, 4px between rows. Rows 45px, padding 14px 20px,
      Archivo 16px / 105% #F9F9F9 (typed part Bold, rest Medium), icons #F9F9F9 at 60% / 30%.
      Active row: #FFFFFF 5%, arrow at 100%.
*/

header.rr-header .rr-search {
    --rr-search-navy: #171245;
    --rr-search-light: #F9F9F9;
    --rr-search-accent: #6A59FD;
    --rr-search-font: 'Archivo', 'Noto Sans', 'Segoe UI', Arial, sans-serif;

    /* Static so the panel positions against .rr-header__inner (full header width). */
    position: static;
    display: flex;
    align-items: center;
}

/* ---------- Icons ---------- */

header.rr-header .rr-search__icon {
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Search / close button in the masthead ---------- */

header.rr-header .rr-search__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rr-header-text);
    cursor: pointer;
}

    header.rr-header .rr-search__trigger:hover {
        color: var(--rr-header-hover);
    }

    header.rr-header .rr-search__trigger:focus {
        outline: none;
    }

    header.rr-header .rr-search__trigger:focus-visible {
        outline: 2px solid var(--rr-search-accent);
        outline-offset: 2px;
    }

header.rr-header .rr-search__icon--close,
header.rr-header .rr-search__trigger[aria-expanded="true"] .rr-search__icon--search {
    display: none;
}

header.rr-header .rr-search__trigger[aria-expanded="true"] .rr-search__icon--close {
    display: block;
}

/* ---------- Masthead while the search is open ---------- */

header.rr-header.rr-header--search-open {
    --rr-header-text: #171245;
    --rr-header-hover: #6A59FD;
    background-color: #F9F9F9;
    border-bottom-color: rgba(23, 18, 69, 0.3);
}

    /* Logo in #6A59FD, same as the solid header (see the logo rules in header-new.css). */
    header.rr-header.rr-header--search-open #logo a {
        position: relative;
    }

        header.rr-header.rr-header--search-open #logo a::after {
            content: "";
            position: absolute;
            inset: 0;
            background-color: #6A59FD;
            -webkit-mask: var(--rr-logo-mask) center / contain no-repeat;
            mask: var(--rr-logo-mask) center / contain no-repeat;
            pointer-events: none;
        }

    header.rr-header.rr-header--search-open #logo img.rr-header__logo-img {
        visibility: hidden;
    }

/* ---------- Panel (desktop: bar under the masthead) ---------- */

header.rr-header .rr-search__panel {
    position: absolute;
    /* Under the masthead and its 1px border. */
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    box-sizing: border-box;
    /* #F9F9F9 panel from Figma; it grows with the suggestions list (the list is in the flow, not overlaid). */
    padding: 24px var(--rr-header-padding-x) 40px;
    background: var(--rr-search-light);
    color: var(--rr-search-navy);
    font-family: var(--rr-search-font);
    text-align: left;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 10;
}

    header.rr-header .rr-search__panel[hidden] {
        display: none;
    }

/* Keeps the 1440 design on wider screens: the row stays 1296px (1440 - 72px sides), centred. */
header.rr-header .rr-search__form {
    position: relative;
    display: block;
    width: 100%;
    max-width: 1296px;
    margin: 0 auto;
    padding: 0;
}

header.rr-header .rr-search__box {
    position: relative;
}

/* ---------- Search row ---------- */

header.rr-header .rr-search__row {
    display: flex;
    align-items: center;
    gap: 16px;
    box-sizing: border-box;
    width: 100%;
    /* Figma border is inside the 74px row: 20px 24px padding minus the 1px border. */
    padding: 19px 23px;
    border: 1px solid rgba(23, 18, 69, 0.3);
    border-radius: 16px;
    /* Solid: #171245 at 30% over #F9F9F9, so page content behind the row does not show through. */
    background: #B5B4C3;
    color: var(--rr-search-navy);
}

/* Suggestions open: only the bottom corners go square, where the list joins the row. */
header.rr-header .rr-search__box--open .rr-search__row {
    border-radius: 16px 16px 0 0;
}

header.rr-header .rr-search__input,
header.rr-header .rr-search__input:focus {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    /* 6px taller than the 34px Figma text box so descenders (g, p, y) are not clipped;
       the -3px margins keep the row at 74px. */
    height: 40px;
    margin: -3px 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
    color: var(--rr-search-navy);
    /* !important: _base.css forces Noto Sans on every input with !important; Figma uses Archivo. */
    font-family: var(--rr-search-font) !important;
    font-size: 32px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: 0;
    -webkit-appearance: none;
    appearance: none;
}

    header.rr-header .rr-search__input::placeholder {
        color: var(--rr-search-navy);
        opacity: 0.5;
    }

    header.rr-header .rr-search__input::-webkit-search-cancel-button,
    header.rr-header .rr-search__input::-webkit-search-decoration {
        -webkit-appearance: none;
        display: none;
    }

header.rr-header .rr-search__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rr-search-navy);
    opacity: 0.3;
    cursor: pointer;
}

    header.rr-header .rr-search__toggle:focus {
        outline: none;
    }

    header.rr-header .rr-search__toggle:focus-visible {
        outline: 2px solid var(--rr-search-accent);
        outline-offset: 2px;
    }

    header.rr-header .rr-search__toggle[aria-expanded="true"] {
        opacity: 1;
    }

        header.rr-header .rr-search__toggle[aria-expanded="true"] .rr-search__icon {
            stroke-width: 1.5;
        }

    header.rr-header .rr-search__toggle[disabled] {
        cursor: default;
    }

/* ---------- Suggestions (desktop: dropdown under the row) ---------- */

header.rr-header .rr-search__list {
    position: static;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid rgba(23, 18, 69, 0.3);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    background: var(--rr-search-light);
    box-shadow: 0 12px 24px rgba(23, 18, 69, 0.1);
    z-index: 1;
}

    header.rr-header .rr-search__list[hidden] {
        display: none;
    }

header.rr-header .rr-search__option {
    margin: 0;
    padding: 0;
}

header.rr-header .rr-search__link {
    display: flex;
    align-items: center;
    gap: 16px;
    box-sizing: border-box;
    min-height: 54px;
    /* 1px #E8E8E8 divider inside the 54px row. */
    padding: 18px 24px 17px;
    border-bottom: 1px solid #E8E8E8;
    color: var(--rr-search-navy);
    font-family: var(--rr-search-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 115%;
    letter-spacing: 0;
    text-decoration: none;
}

    header.rr-header .rr-search__link:hover,
    header.rr-header .rr-search__link:focus {
        /* Outrank the global important purple hover rule in _base.css. */
        color: var(--rr-search-navy) !important;
        text-decoration: none;
        outline: none;
    }

header.rr-header .rr-search__option--active .rr-search__link {
    background: rgba(23, 18, 69, 0.3);
}

header.rr-header .rr-search__link-icon {
    opacity: 0.6;
}

header.rr-header .rr-search__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    header.rr-header .rr-search__text strong {
        font-weight: 700;
    }

header.rr-header .rr-search__arrow {
    opacity: 0.3;
}

header.rr-header .rr-search__option--active .rr-search__arrow {
    opacity: 0.8;
}

/* ---------- Large (1025 - 1280): same layout, 40px sides from header-new.css ---------- */

/* ---------- Medium / Small (1024px and below): full-screen panel like the burger menu ---------- */

@media (max-width: 1024px) {
    /* Page behind the open search does not scroll. */
    html.rr-search-is-open,
    html.rr-search-is-open body {
        overflow: hidden;
    }

    header.rr-header .rr-search__panel {
        position: fixed;
        top: calc(var(--rr-header-height) + 1px);
        bottom: 0;
        padding: 16px 0 40px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background: var(--rr-search-navy);
        color: var(--rr-search-light);
        box-shadow: none;
        z-index: 999;
    }

    header.rr-header .rr-search__form {
        max-width: none;
    }

    header.rr-header .rr-search__box {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    header.rr-header .rr-search__row,
    header.rr-header .rr-search__box--open .rr-search__row {
        width: calc(100% - 48px);
        margin: 8px 24px;
        padding: 15px 19px;
        border-color: rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.06);
        color: var(--rr-search-light);
    }

    header.rr-header .rr-search__input,
    header.rr-header .rr-search__input:focus {
        height: 31px;
        color: var(--rr-search-light);
        font-size: 24px;
        line-height: 31px;
    }

        header.rr-header .rr-search__input::placeholder {
            color: var(--rr-search-light);
        }

    header.rr-header .rr-search__toggle {
        color: var(--rr-search-light);
        opacity: 1;
    }

    header.rr-header .rr-search__list {
        position: static;
        display: flex;
        flex-direction: column;
        gap: 4px;
        border: 0;
        border-radius: 0;
        overflow: visible;
        background: transparent;
        box-shadow: none;
    }

    header.rr-header .rr-search__link {
        min-height: 45px;
        padding: 14px 20px;
        border-bottom: 0;
        color: var(--rr-search-light);
        font-weight: 500;
        line-height: 105%;
    }

        header.rr-header .rr-search__link:hover,
        header.rr-header .rr-search__link:focus {
            color: var(--rr-search-light) !important;
        }

    header.rr-header .rr-search__option--active .rr-search__link {
        background: rgba(255, 255, 255, 0.05);
    }

    header.rr-header .rr-search__option--active .rr-search__arrow {
        opacity: 1;
    }
}

@media (max-width: 767px) {
    header.rr-header .rr-search__row,
    header.rr-header .rr-search__box--open .rr-search__row {
        width: calc(100% - 40px);
        margin: 4px 20px;
        gap: 12px;
        padding: 11px 15px;
        border-radius: 8px;
    }

    header.rr-header .rr-search__input,
    header.rr-header .rr-search__input:focus {
        height: 27px;
        font-size: 20px;
        line-height: 27px;
    }

    header.rr-header .rr-search__toggle {
        display: none;
    }
}