/* Other Numbers — classes/widgets/OtherNumbers/other-numbers.php
   vw on the 1440 canvas like hero.css; px from 1024 down.
   The Columns control writes --onm-cols for each breakpoint itself (4 / 3 / 2
   by default); the rules below only cover very narrow phones. */

.onm {
    --onm-ink: #16293a;
    --onm-number: #16293a;
    --onm-number-hover: #c9a961;
    --onm-card: #f5efe6;
    --onm-line: #ebe3d6;
    --onm-note: #8a94a6;
    --onm-field: #ffffff;
    --onm-field-ink: #16293a;
    --onm-field-line: #e6e8ee;
    --onm-accent: #e8b64a;
    --onm-cols: 4;
    box-sizing: border-box;
    width: 100%;
    font-family: var(--thm-body-font, "Sora", sans-serif);
}

.onm *,
.onm *::before,
.onm *::after {
    box-sizing: border-box;
}

.onm__title {
    margin: 0 0 1.75vw;
    font-family: var(--thm-body-font, "Sora", sans-serif);
    font-size: max(20px, 1.67vw);
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    color: var(--onm-ink);
}

.onm__card {
    padding: 2.5vw;
    background: var(--onm-card);
    border: 1px solid var(--onm-line);
    border-radius: .83vw;
}

/* Newspaper columns rather than a grid, so the list reads top to bottom in
   each column and every column stays the same length. */
.onm__list {
    margin: 0;
    padding: 0;
    list-style: none;
    column-count: var(--onm-cols);
    column-gap: 2.5vw;
}

.onm__item {
    break-inside: avoid;
    padding-block: .45vw;
}

.onm__number {
    display: inline-block;
    font-size: max(15px, 1.25vw);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--onm-number);
    text-decoration: none;
    transition: color .25s ease;
}

a.onm__number:hover,
a.onm__number:focus-visible {
    color: var(--onm-number-hover);
    text-decoration: none;
}

/* ===== Search ===== */

.onm__search {
    max-width: 40vw;
    margin: 0 auto 1.6vw;
}

/* visually hidden, still read out for the field */
.onm__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.onm__field {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--onm-field);
    border: 1px solid var(--onm-field-line);
    border-radius: 999px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.onm__field:focus-within {
    border-color: var(--onm-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--onm-accent) 25%, transparent);
}

.onm__search-icon {
    position: absolute;
    left: 1.25vw;
    width: max(18px, 1.39vw);
    height: max(18px, 1.39vw);
    color: var(--onm-note);
    pointer-events: none;
}

/* the theme styles bare inputs, so every visual property is set here */
.onm .onm__input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: max(48px, 3.9vw);
    margin: 0;
    padding: 0 3.4vw 0 3.3vw;
    background: transparent;
    border: 0;
    border-radius: inherit;
    box-shadow: none;
    outline: 0;
    font-family: inherit;
    font-size: max(15px, 1.18vw);
    font-weight: 500;
    color: var(--onm-field-ink);
    -webkit-appearance: none;
    appearance: none;
}

.onm .onm__input::placeholder {
    color: var(--onm-note);
    font-weight: 400;
    opacity: 1;
}

/* the browser's own clear cross; ours replaces it */
.onm .onm__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.onm .onm__clear {
    position: absolute;
    right: .6vw;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max(32px, 2.5vw);
    height: max(32px, 2.5vw);
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--onm-note);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.onm .onm__clear[hidden] {
    display: none;
}

.onm .onm__clear:hover,
.onm .onm__clear:focus-visible {
    background: var(--onm-card);
    color: var(--onm-field-ink);
}

.onm__clear svg {
    width: 45%;
    height: 45%;
}

.onm__status {
    margin: .8vw 0 0;
    font-size: max(13px, 1.04vw);
    line-height: 1.5;
    text-align: center;
    color: var(--onm-note);
}

.onm__status:empty {
    display: none;
}

.onm__number mark {
    padding: 0;
    background: none;
    color: inherit;
    font-weight: 700;
    box-shadow: inset 0 -.45em 0 color-mix(in srgb, var(--onm-accent) 45%, transparent);
}

.onm__item[hidden] {
    display: none;
}

/* Search First: the list stays out of sight until enough digits are typed.
   Done in CSS, not by the script, so the full list never flashes on load. */
.onm--search-first:not(.has-query) .onm__card,
.onm--search.is-empty .onm__card {
    display: none;
}

.onm__note {
    max-width: 38vw;
    margin: 1.75vw 0 0;
    font-size: max(13px, 1.11vw);
    font-style: italic;
    line-height: 1.7;
    color: var(--onm-note);
}

.onm__main {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    transition: color .25s ease;
}

.onm__main:hover,
.onm__main:focus-visible {
    color: var(--onm-number-hover);
}

/* Entrance — held at frame one by assets/css/reveal.css */
@media (prefers-reduced-motion: no-preference) {

    .onm--animated .onm__title,
    .onm--animated .onm__card,
    .onm--animated .onm__note {
        animation: onm-up .6s cubic-bezier(.22, 1, .36, 1) both;
    }

    .onm--animated .onm__card { animation-delay: .1s; }
    .onm--animated .onm__note { animation-delay: .2s; }
}

@keyframes onm-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 1024px) {

    .onm__title {
        margin-bottom: 20px;
        font-size: 22px;
    }

    .onm__card {
        padding: 28px;
        border-radius: 12px;
    }

    .onm__list {
        column-gap: 28px;
    }

    .onm__item {
        padding-block: 6px;
    }

    .onm__number {
        font-size: 16px;
    }

    .onm__search {
        max-width: 520px;
        margin-bottom: 20px;
    }

    .onm__search-icon {
        left: 18px;
    }

    .onm .onm__input {
        height: 52px;
        padding: 0 48px 0 48px;
        font-size: 16px;
    }

    .onm .onm__clear {
        right: 8px;
    }

    .onm__status {
        margin-top: 10px;
        font-size: 14px;
    }

    .onm__note {
        max-width: 560px;
        margin-top: 20px;
        font-size: 14px;
    }
}

@media (max-width: 600px) {

    .onm__title {
        margin-bottom: 16px;
        font-size: 20px;
    }

    .onm__card {
        padding: 20px 18px;
    }

    .onm__list {
        column-gap: 16px;
    }

    .onm__item {
        padding-block: 5px;
    }

    .onm__number {
        font-size: 15px;
    }

    .onm__search {
        max-width: none;
        margin-bottom: 16px;
    }

    /* 16px stops iOS zooming the page when the field takes focus */
    .onm .onm__input {
        height: 50px;
        padding: 0 44px;
        font-size: 16px;
    }

    .onm__search-icon {
        left: 16px;
    }

    .onm__status {
        font-size: 13px;
    }

    .onm__note {
        max-width: none;
        font-size: 13px;
    }
}

/* two columns of numbers no longer fit side by side */
@media (max-width: 340px) {

    .onm__list {
        column-count: 1;
    }
}