/* =============================================================================
   hc-dropdown.css — the homepage hero search drop-down, reused verbatim on
   every frontend page so all select fields look identical.

   The hero control is a <button> + <ul role="listbox"> pair rather than a
   native <select>: `appearance: none` stops this Chromium build from painting
   the selected option, which left an empty box. The markup below is therefore
   reproduced exactly, plus a bordered standalone wrapper for use outside the
   hero's floating search pill.
   ========================================================================== */

:root {
    --hc-teal: var(--site-base, #09a9b7);
    --hc-teal-dark: var(--site-base-dark, #087e8b);
    --hc-navy: var(--site-secondary, #0d1c51);
    --hc-text: #24355e;
    --hc-muted: #6b7897;
    --hc-line: #dfeaf0;
    --hc-soft: var(--site-base-tint, #eaf9fb);
    --hc-white: #fff;
    --hc-radius: 16px;
}

/* ============================================================ standalone box */
/* Used wherever a select is not sitting inside the hero search pill. */
.hcdd {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 46px;
    padding: 0 13px;
    background: #fff;
    border: 1px solid var(--hc-line);
    border-radius: 12px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.hcdd:hover {
    border-color: #c9e2ea;
}

.hcdd:focus-within,
.hcdd.is-open {
    border-color: var(--hc-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-base) 12%, transparent);
}

.hcdd > svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    color: var(--hc-teal) !important;
    stroke: var(--hc-teal) !important;
}

/* The box carries a 1px border on top and bottom, so the button has to be
   2px shorter or the box grows past its own min-height and the control
   sits proud inside it. Base: 46px box = 44px button + 2px border.
   This override must stay *below* `.hcdd .hc-dd__btn` — equal specificity,
   so the later rule wins. */
.hcdd--sm {
    min-height: 42px;
}

.hcdd--sm .hc-dd__btn {
    font-size: 14.5px;
    }

/* Inside a hero-style search bar the drop-down sits on a shared white pill, so
   it drops its own box and borrows the surrounding field's divider instead. */
.hcdd.hcdd--bare {
    min-height: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.hcdd--bare:hover,
.hcdd--bare:focus-within,
.hcdd--bare.is-open {
    border-color: transparent;
    box-shadow: none;
}

/* Inside a labelled form row the surrounding .rg-in / .fd-lab style already
   provides the box, so the drop-down goes borderless and transparent. */
.hcdd--plain {
    min-height: 42px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.hcdd--plain:hover,
.hcdd--plain:focus-within,
.hcdd--plain.is-open {
    border-color: transparent;
    box-shadow: none;
}

/* ================================================================== trigger */
/* Identical to the hero trigger: text node + one chevron span, both in flow.
   An absolutely-positioned arrow plus a ::before highlight layer was tried
   first and proved fragile to layer here. */
.hc-dd__btn {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 90px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.1px;
    color: var(--hc-navy);
    text-align: left;
    cursor: pointer;
}

.hc-dd__btn > .hc-dd__chev {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-left: auto;
    margin-right: 4px;
    border-right: 2px solid var(--hc-teal);
    border-bottom: 2px solid var(--hc-teal);
    border-radius: 1px;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease, border-color .2s ease;
}

.hc-dd__btn:hover,
.hc-dd.is-open .hc-dd__btn {
    color: var(--hc-teal-dark);
}

.hc-dd__btn:hover .hc-dd__chev,
.hc-dd.is-open .hc-dd__chev {
    border-color: var(--hc-teal-dark);
    transform: rotate(225deg) translate(-1px, -1px);
}

.hc-dd__btn:focus-visible {
    outline: 2px solid var(--hc-teal);
    outline-offset: 3px;
    border-radius: 8px;
}

.hcdd .hc-dd__btn {
    height: auto;
    min-height: 44px;
    /* the placeholder reads as muted, a chosen value reads as real content */
    color: var(--hc-navy);
}

/* Compact variant for sidebars and form rows. Must stay *below* the rule
   above — equal specificity, so the later declaration wins. */
.hcdd--sm .hc-dd__btn {
    height: 40px;
    min-height: 40px;
    font-size: 14.5px;
}

/* The label is a real element so it can be given min-width:0 and ellipsis —
   an anonymous flex item cannot, so a long value wrapped and pushed the
   chevron out of place. The chevron keeps margin-left:auto so it stays
   pinned to the right edge of the trigger whatever the label length. */
.hcdd .hc-dd__btn > .hc-dd__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hcdd .hc-dd__btn > .hc-dd__chev {
    flex: 0 0 auto;
    margin-left: auto;
}

.hc-dd__btn > .hc-dd__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hcdd .hc-dd__btn[data-hc-dd-empty="1"] {
    color: var(--hc-muted);
    font-weight: 500;
}

/* the field reacts as a whole when the menu is open or hovered */
.hc-field--select::before {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    top: 6px;
    bottom: 6px;
    z-index: 1;
    border-radius: 10px;
    background: var(--hc-soft);
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

.hc-field--select:hover::before,
.hc-field--select:focus-within::before,
.hc-dd.is-open::before {
    opacity: 1;
}

.hc-field--select > svg,
.hc-field--select .hc-dd__btn {
    position: relative;
    z-index: 2;
}

/* ================================================================== listbox */
.hc-dd__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 40;
    margin: 0;
    padding: 6px;
    list-style: none;
    /* the trigger can sit in a narrow flex row (a "Sort by" control), so the
       menu needs a floor of its own or the labels wrap to two words per line */
    min-width: max(100%, 230px);
    max-height: 288px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid var(--hc-line);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(20, 70, 100, .16);
}

.hc-dd__menu[hidden] {
    display: none;
}

.hc-dd__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 9px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--hc-navy);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, padding-left .15s ease;
}

.hc-dd__opt:hover {
    background: var(--hc-soft);
    color: var(--hc-teal-dark);
    font-weight: 600;
    padding-left: 18px;
}

.hc-dd__opt.is-on {
    background: var(--hc-soft);
    color: var(--hc-teal-dark);
    font-weight: 700;
}

.hc-dd__opt.is-on::after {
    content: "\2713";
    flex: 0 0 auto;
    font-weight: 800;
    font-size: 14px;
}

/* light, slim scrollbar — the browser default read as a heavy black bar */
.hc-dd__menu {
    scrollbar-width: thin;
    scrollbar-color: #bfe2ea transparent;
}

.hc-dd__menu::-webkit-scrollbar {
    width: 7px;
}

.hc-dd__menu::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 8px;
}

.hc-dd__menu::-webkit-scrollbar-thumb {
    background: #c4e4ec;
    border-radius: 8px;
}

.hc-dd__menu::-webkit-scrollbar-thumb:hover {
    background: #9fd2de;
}

/* ======================================================== native select fix */
/* Any <select> that is not converted keeps a native control, but is repainted
   so it matches: teal chevron, soft focus ring and the shared radius. */
.hc-native {
    width: 100%;
    min-height: 46px;
    padding: 0 38px 0 13px;
    background: #fff
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2309a9b7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        no-repeat right 14px center;
    border: 1px solid var(--hc-line);
    border-radius: 12px;
    color: var(--hc-navy);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.hc-native:hover {
    border-color: #c9e2ea;
}

.hc-native:focus,
.hc-native:focus-visible {
    border-color: var(--hc-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-base) 12%, transparent);
    outline: 0;
}

.hc-native option {
    color: var(--hc-navy);
    font-size: 15px;
}

/* the native control falls back to its own arrow when the background fails */
@supports not (background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3C/svg%3E")) {
    .hc-native {
        padding-right: 13px;
    }
}