/*
    Omnibox search — the command-palette overlay opened by the header search
    the header magnifier, "/" or Cmd/Ctrl+K.

    Ported from the COMPILED joshua-tree style.css (the .ob-* block introduced
    by bb792f9), not from scss/header/_search.scss — compiled output is the
    truth per STYLES.md. Mechanical port: 2-space indent widened to 4, range
    media queries rewritten to min-width, and palette hexes swapped for their
    theme.json tokens. Five tints are theme.json settings.custom.search (wash, tile,
    ring, accent, mark). The rest (#ebf7f8, the scrim #00283a8c, the footer
    #f7f8f8) have no token and stay literal — the ported-legacy exception.

    This is the esa/omnibox block's own stylesheet (block.json "style").
    Markup: blocks-native/omnibox/render.php. Behavior: blocks-native/omnibox/view.js.
*/


body.omnibox-open {
    overflow: hidden;
}

.ob-overlay {
    z-index: 1200;
    position: fixed;
    inset: 0;
}

.ob-overlay__scrim {
    -webkit-backdrop-filter: blur(2px);
    background: #00283a8c;
    position: absolute;
    inset: 0;
}

.ob-overlay button {
    cursor: pointer;
}

.ob-overlay button:focus-visible, .ob-overlay a:focus-visible {
    outline-offset: 2px;
    outline: 2px solid var(--wp--preset--color--dark-teal);
}

.ob {
    z-index: 1;
    background: var(--wp--preset--color--white);
    border-radius: 8px;
    flex-direction: column;
    width: 760px;
    max-width: 94%;
    height: min(600px, 100% - 112px);
    display: flex;
    position: absolute;
    top: 64px;
    left: 50%;
    overflow: hidden;
    transform: translateX(-50%);
    box-shadow: 0 24px 64px #00283a59;
}

.ob__searchrow {
    border-bottom: 1px solid var(--wp--preset--color--light-gray);
    flex: none;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1.25rem;
    display: flex;
}

.ob__searchicon {
    color: var(--wp--preset--color--dark-gray);
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
}

.ob__inputwrap {
    flex: 1;
    min-width: 0;
    position: relative;
}

.ob__input {
    z-index: 1;
    color: var(--wp--preset--color--charcoal);
    background: none;
    border: 0;
    outline: 0;
    width: 100%;
    padding: 0;
    font-family: var(--wp--preset--font-family--raleway);
    font-size: var(--wp--preset--font-size--label-l);
    font-weight: 500;
    position: relative;
}

.ob__input::placeholder {
    color: var(--wp--preset--color--medium-gray);
}

.ob__input:placeholder-shown {
    color: var(--wp--preset--color--medium-gray);
}

.ob__ghost {
    white-space: pre;
    pointer-events: none;
    color: #0000;
    align-items: center;
    font-family: var(--wp--preset--font-family--raleway);
    font-size: var(--wp--preset--font-size--label-l);
    font-weight: 500;
    display: flex;
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.ob__ghost-rest {
    color: var(--wp--preset--color--medium-gray);
}

.ob__clear {
    color: var(--wp--preset--color--dark-gray);
    background: none;
    border: 0;
    border-radius: 999px;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    display: inline-flex;
}

.ob__clear:hover {
    color: var(--wp--preset--color--charcoal);
    background: var(--wp--preset--color--off-white);
}

.ob__clear svg {
    width: 1.125rem;
    height: 1.125rem;
}

.ob__clear[hidden] {
    visibility: hidden;
}

.ob__scopes {
    border-bottom: 1px solid var(--wp--preset--color--light-gray);
    flex-wrap: wrap;
    flex: none;
    gap: .5rem;
    padding: .625rem 1.25rem;
    display: flex;
}

.ob__results {
    flex-direction: column;
    flex: auto;
    min-height: 0;
    padding: .25rem 0;
    display: flex;
    overflow-y: auto;
}

.ob__results > .ob-group {
    flex: none;
}

.ob__empty {
    text-align: center;
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
}

.ob__empty-title {
    color: var(--wp--preset--color--charcoal);
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
}

.ob__empty-note {
    color: var(--wp--preset--color--dark-gray);
    margin: .375rem 0 0;
    font-size: .9375rem;
}

.ob__hero {
    text-align: center;
    flex-direction: column;
    flex: auto;
    justify-content: center;
    align-items: center;
    gap: .625rem;
    padding: 1.75rem var(--wp--preset--spacing--40) 2.25rem;
    display: flex;
}

.ob__hero-title {
    color: var(--wp--preset--color--charcoal);
    margin: 0;
    font-size: var(--wp--preset--font-size--large);
    font-weight: 700;
}

.ob__hero-note {
    color: var(--wp--preset--color--dark-gray);
    max-width: 28rem;
    margin: 0;
    font-size: .875rem;
    line-height: 1.55;
}

.ob__footer {
    background: #f7f8f8;
    border-top: 1px solid var(--wp--preset--color--light-gray);
    flex: none;
    justify-content: space-between;
    align-items: center;
    gap: var(--wp--preset--spacing--20);
    padding: .625rem 1.25rem;
    display: flex;
}

.ob__viewall {
    color: var(--wp--preset--color--dark-teal);
    align-items: center;
    gap: .375rem;
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
}

.ob__viewall svg {
    width: 1rem;
    height: 1rem;
}

.ob__viewall:hover {
    text-decoration: underline;
}

.ob [hidden]:not(.ob__clear) {
    display: none;
}

.ob__hints {
    gap: var(--wp--preset--spacing--20);
    display: flex;
}

.ob__hints span {
    color: var(--wp--preset--color--dark-gray);
    align-items: center;
    gap: .3125rem;
    font-size: .875rem;
    display: inline-flex;
}

.ob__hints span:nth-child(n+2) {
    display: none;
}

@media screen and (min-width: 992px) {
    .ob__hints span:nth-child(n+2) {
        display: inline-flex;
    }
}

.ob kbd {
    color: var(--wp--preset--color--dark-gray);
    background: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--light-gray);
    border-bottom-width: 2px;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .3125rem;
    font-family: var(--wp--preset--font-family--raleway);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
}

.ob-scope {
    color: var(--wp--preset--color--charcoal);
    background: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--light-gray);
    border-radius: 999px;
    align-items: center;
    gap: .3125rem;
    padding: .1875rem .5625rem;
    font-family: var(--wp--preset--font-family--raleway);
    font-size: .8125rem;
    font-weight: 600;
    transition: background .1s, border-color .1s, color .1s;
    display: inline-flex;
}

.ob-scope:hover {
    background: var(--wp--custom--search--wash);
    border-color: var(--wp--preset--color--teal);
}

.ob-scope.is-active {
    color: var(--wp--preset--color--white);
    background: var(--wp--preset--color--dark-teal);
    border-color: var(--wp--custom--search--accent);
}

.ob-scope__count {
    opacity: .75;
    font-weight: 500;
}

.ob-group {
    padding-block: .25rem;
}

.ob-group + .ob-group {
    border-top: 1px solid var(--wp--preset--color--off-white);
}

.ob-group__head {
    justify-content: space-between;
    align-items: center;
    padding: .5rem 1.25rem .25rem;
    display: flex;
}

.ob-group__title {
    color: var(--wp--preset--color--charcoal);
    align-items: center;
    gap: .4375rem;
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 700;
    display: inline-flex;
}

.ob-group__title svg {
    color: var(--wp--preset--color--dark-gray);
    width: 1rem;
    height: 1rem;
}

.ob-group__count {
    color: var(--wp--preset--color--dark-gray);
    font-size: .875rem;
}

.ob-row {
    color: var(--wp--preset--color--charcoal);
    cursor: pointer;
    align-items: center;
    gap: .875rem;
    padding: .375rem 1.25rem;
    text-decoration: none;
    transition: none;
    display: flex;
}

.ob-row:hover, .ob-row.is-active {
    background: #ebf7f8;
}

.ob-row:hover .ob-row__chevron, .ob-row.is-active .ob-row__chevron {
    opacity: 1;
}

.ob-row__lead {
    color: var(--wp--preset--color--dark-teal);
    background: var(--wp--custom--search--tile);
    border-radius: 8px;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    overflow: hidden;
}

.ob-row__lead svg {
    width: 1.125rem;
    height: 1.125rem;
}

.ob-row__lead img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.ob-row__lead--people {
    letter-spacing: .02em;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 700;
}

.ob-row__body {
    flex-direction: column;
    flex: 1;
    min-width: 0;
    display: flex;
}

.ob-row__title {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 600;
    overflow: hidden;
}

.ob-row__title mark {
    color: inherit;
    background: var(--wp--custom--search--mark);
    border-radius: 2px;
    padding: 0 1px;
}

.ob-row__sub {
    color: var(--wp--preset--color--dark-gray);
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
    font-size: .8125rem;
    overflow: hidden;
}

.ob-row__chevron {
    color: var(--wp--preset--color--dark-teal);
    opacity: 0;
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    transition: opacity .1s;
}