/* Search pickers: one design for every search box on the site (Digant 2026-10-12 21:12, "make sure all these search
   pickers follow the same design across the board so it'd be easy to update them all at once, just like calculator").
   Used by /grade-conversion/ (country search), /gpa-scale/ (school scale picker), /admissions/ (college finder) and
   the College GPA calculator page's university search. Change a value here (or a --gpa-search-* token) and every
   picker follows. The calculators' own pickers inside a calculator card use the calculator core (calc-core.css).

   Parts:
   .gpa-tool-card        the raised card for a page's top tool (calculator card look: border, radius, shadow)
   .gpa-search           a picker (position: relative, for the dropdown)
   .gpa-search__title    its heading line; .gpa-search--inline makes it the smaller in-content size
   .gpa-search__label    a field's own label (several fields in one picker)
   .gpa-search__sub      one line under the title
   .gpa-search__field    the field wrapper, with the search icon (an <svg> as first child)
   .gpa-search__input    the input
   .gpa-search__list     an inline list of result links (filtered on the page)
   .calc-suggest         the floating suggestion list (calc-core.js createSuggest) inside a picker
   .gpa-search__popular  "Popular:" chips under the field; .gpa-search__chip, .gpa-search__chip-meta
   .gpa-search__empty    the "nothing found" line
   Loaded on every page with the core (functions.php gpa_design_tokens). */

:root {
    --gpa-search-h: 56px;
    --gpa-search-border-w: 2px;
    --gpa-search-border: var(--gpa-calc-border);
    --gpa-search-focus: var(--gpa-calc-focus);
    --gpa-search-radius: var(--gpa-radius-md);
    --gpa-search-icon: 20px;
    --gpa-search-chip-h: 40px;
    --gpa-search-row-h: 44px;
}

/* ---------- The raised card for a page's top tool ---------- */
#page .entry-content .gpa-tool-card {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    max-width: var(--gpa-content-max);
    margin: 0 auto 32px;
    padding: var(--gpa-calc-pad, 32px) var(--gpa-calc-pad, 32px) 24px;
    border: 1px solid var(--gpa-calc-border);
    border-radius: var(--gpa-calc-radius-card, 16px);
    background: var(--gpa-calc-bg, #fff);
    box-shadow: var(--gpa-calc-shadow);
    color: var(--gpa-text);
    text-align: left;
}
/* the card is the top of the white column: no column padding above it */
#page #main .entry-content:has(> .gpa-tool-card:first-child, > style:first-child + .gpa-tool-card, > div:first-child > .gpa-tool-card:first-child) { padding-top: 0 !important; }
@media (max-width: 640px) {
    #page .entry-content .gpa-tool-card { padding: 20px 16px 12px; }
}

/* ---------- The picker ---------- */
#page .entry-content .gpa-search { position: relative; box-sizing: border-box; text-align: left; }
#page .entry-content .gpa-search * { box-sizing: border-box; }
#page .entry-content .gpa-search [hidden] { display: none !important; }
#page .entry-content .gpa-search .gpa-search__title {
    display: block;
    margin: 0 0 4px;
    color: var(--gpa-heading);
    font-size: var(--gpa-h2-size);
    line-height: 1.25;
    font-weight: var(--gpa-h2-weight);
    scroll-margin-top: 80px;
}
#page .entry-content .gpa-search--inline .gpa-search__title,
#page .entry-content .gpa-search .gpa-search__label { font-size: 20px; line-height: 1.3; font-weight: 700; }
#page .entry-content .gpa-search .gpa-search__label { display: block; margin: 0 0 8px; color: var(--gpa-heading); }
#page #main .entry-content .gpa-search p.gpa-search__sub { margin: 0 0 16px !important; color: var(--gpa-text-secondary); font-size: var(--gpa-ui-size); line-height: 1.6; }
#page .entry-content .gpa-search__field { position: relative; }
#page .entry-content .gpa-search__field > svg:first-child {
    position: absolute;
    left: 16px;
    top: calc(var(--gpa-search-h) / 2);
    width: var(--gpa-search-icon);
    height: var(--gpa-search-icon);
    margin-top: calc(var(--gpa-search-icon) / -2);
    color: var(--gpa-text-muted);
    pointer-events: none;
    z-index: 1;
}
#page .entry-content .gpa-search input.gpa-search__input {
    display: block;
    width: 100%;
    height: var(--gpa-search-h);
    min-height: var(--gpa-search-h);
    margin: 0;
    padding: 0 16px 0 48px;
    border: var(--gpa-search-border-w) solid var(--gpa-search-border);
    border-radius: var(--gpa-search-radius);
    background: var(--gpa-surface);
    color: var(--gpa-text-strong);
    font: inherit;
    font-size: var(--gpa-body-size);
    line-height: 1.4;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}
#page .entry-content .gpa-search input.gpa-search__input::placeholder { color: var(--gpa-text-muted); opacity: 1; }
@media (hover: hover) { #page .entry-content .gpa-search input.gpa-search__input:hover { border-color: var(--gpa-search-focus); } }
#page .entry-content .gpa-search input.gpa-search__input:focus { outline: 2px solid var(--gpa-focus-ring); outline-offset: 2px; border-color: var(--gpa-search-focus); }
#page .entry-content .gpa-search input.gpa-search__input::-webkit-search-cancel-button { cursor: pointer; }

/* Inline list of result links (the page holds every link; the script filters it) */
#page .entry-content .gpa-search .gpa-search__list { list-style: none !important; margin: 8px 0 0 !important; padding: 0 !important; max-height: 288px; overflow-y: auto; overscroll-behavior: contain; border: 0; background: none; }
#page .entry-content .gpa-search .gpa-search__list li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
#page .entry-content .gpa-search .gpa-search__list li::before,
#page .entry-content .gpa-search .gpa-search__list li::marker { content: none !important; }
#page .entry-content .gpa-search .gpa-search__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--gpa-search-row-h);
    padding: 10px 12px;
    border-radius: var(--gpa-radius-sm);
    color: var(--gpa-text-strong);
    font-size: var(--gpa-ui-size);
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none !important;
}
#page .entry-content .gpa-search .gpa-search__list a::after { content: "\2192"; color: var(--gpa-link); flex: 0 0 auto; }
#page .entry-content .gpa-search .gpa-search__list a.is-active { background: var(--gpa-tint-indigo); color: var(--gpa-link); }
@media (hover: hover) { #page .entry-content .gpa-search .gpa-search__list a:hover { background: var(--gpa-tint-indigo); color: var(--gpa-link); } }
#page .entry-content .gpa-search .gpa-search__list a:focus-visible { outline: 2px solid var(--gpa-focus-ring); outline-offset: -2px; }

/* Floating suggestions (calc-core.js createSuggest) */
#page .entry-content .gpa-search .calc-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--gpa-search-h) + 4px);
    z-index: 40;
    margin: 0 !important;
    padding: 6px !important;
    list-style: none !important;
    max-height: 360px;
    overflow-y: auto;
    background: var(--gpa-surface);
    border: 1px solid var(--gpa-search-border);
    border-radius: var(--gpa-search-radius);
    box-shadow: var(--gpa-calc-shadow-pop, 0 8px 24px rgba(15, 23, 42, .12));
}
#page .entry-content .gpa-search .calc-suggest[hidden] { display: none !important; }
#page .entry-content .gpa-search .calc-suggest li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--gpa-search-row-h);
    margin: 0 !important;
    padding: 8px 12px !important;
    list-style: none !important;
    border-radius: var(--gpa-radius-sm);
    color: var(--gpa-text-strong);
    font-size: var(--gpa-ui-size);
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
}
#page .entry-content .gpa-search .calc-suggest li::before,
#page .entry-content .gpa-search .calc-suggest li::marker { content: none !important; display: none !important; }
#page .entry-content .gpa-search .calc-suggest li:hover,
#page .entry-content .gpa-search .calc-suggest li[aria-selected="true"] { background: var(--gpa-tint-indigo); }
#page .entry-content .gpa-search .calc-suggest-hint { flex: none; font-size: 13px; font-weight: 600; color: var(--gpa-text-muted); white-space: nowrap; }

/* "Popular:" chips */
#page #main .entry-content .gpa-search .gpa-search__popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 4px !important; font-size: var(--gpa-ui-size); line-height: 1.4; }
#page .entry-content .gpa-search .gpa-search__popular > span:first-child { margin-right: 2px; color: var(--gpa-text-secondary); }
#page #main .entry-content .gpa-search :is(a, button).gpa-search__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--gpa-search-chip-h);
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--gpa-indigo-200);
    border-radius: 999px;
    background: var(--gpa-surface);
    color: var(--gpa-link);
    font: inherit;
    font-size: var(--gpa-ui-size);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    box-shadow: none;
    cursor: pointer;
}
#page #main .entry-content .gpa-search :is(a, button).gpa-search__chip * { text-decoration: none !important; }
@media (hover: hover) { #page #main .entry-content .gpa-search :is(a, button).gpa-search__chip:hover { border-color: var(--gpa-accent); background: var(--gpa-tint-indigo); } }
#page #main .entry-content .gpa-search :is(a, button).gpa-search__chip:focus-visible { outline: 2px solid var(--gpa-focus-ring); outline-offset: 2px; }
#page .entry-content .gpa-search .gpa-search__chip-meta { font-size: 13px; font-weight: 600; color: var(--gpa-text-muted); }
#page #main .entry-content .gpa-search p.gpa-search__empty { margin: 12px 0 0 !important; color: var(--gpa-text-secondary); }

@media (max-width: 640px) {
    #page .entry-content .gpa-search--inline .gpa-search__title,
    #page .entry-content .gpa-search .gpa-search__label { font-size: 18px; }
    #page .entry-content .gpa-search .gpa-search__list { max-height: 264px; }
    #page #main .entry-content .gpa-search :is(a, button).gpa-search__chip { padding: 0 10px; }
}