/* Navbar area search — header box, results dropdown, and the split-panel
   overlay it opens. Paired with js/nav-search.js; bump both ?v= together. */

/* ------------------------------------------------------------ nav search */

/* Sits in .header-inner between the logo and the nav. No `order` — the flex
   row follows DOM position, and an order value would shunt it to the end. */
.nsq-wrap {
    position: relative;
    flex: 1 1 auto; min-width: 0; max-width: 260px;
    margin: 0 20px 0 24px;
}

/* The header is already near-full between 1280 and 1500px, where the side-rail
   ads narrow --container-max, so the box gives ground before the nav links
   wrap onto a second line. */
.main-nav > ul { gap: 22px; }
.main-nav .nav-link { white-space: nowrap; }
@media (max-width: 1150px) { .nsq-wrap { max-width: 200px; margin: 0 12px 0 16px; } }

.nsq-box {
    display: flex; align-items: center; gap: 7px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 100px;
    padding: 0 6px 0 12px; height: 36px;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.nsq-box:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-dim);
}
.nsq-icon { color: var(--color-text-muted); flex-shrink: 0; }
.nsq-input {
    flex: 1; min-width: 0; height: 100%;
    background: none; border: none; outline: none;
    font-family: var(--font-main); font-size: 13px; color: var(--color-text);
}
.nsq-input::placeholder { color: var(--color-text-muted); }
.nsq-geo {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    color: var(--color-text-muted);
    transition: color var(--transition), background var(--transition);
}
.nsq-geo:hover { color: var(--color-primary); background: var(--color-primary-dim); }
.nsq-geo:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* Wider than the input it hangs off — a name like "Prince Edward County, VA"
   does not fit inside a 240px box — and aligned to its left edge, so results
   line up under the text being typed instead of trailing off to one side. */
.nsq-dropdown {
    position: absolute; top: calc(100% + 8px); left: 0; right: auto;
    min-width: 360px; max-width: 92vw;
    z-index: 1400; max-height: 340px; overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 4px;
}
.nsq-opt {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer;
    font-size: 13px; line-height: 1.3;
}
.nsq-opt:hover, .nsq-opt.is-active { background: var(--color-primary-dim); }
.nsq-opt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsq-opt-tag { color: var(--color-text-muted); font-weight: 400; }
.nsq-note { padding: 12px 10px; font-size: 13px; color: var(--color-text-muted); }
.nsq-note.is-error { color: var(--color-primary); }

/* ---------------------------------------------------------------- overlay */

/* Pinned, not just overflow-hidden: on touch devices `overflow:hidden` alone
   does not stop the page scrolling behind the overlay. `top` is set inline by
   nav-search.js to the scroll offset so the page does not jump while pinned. */
body.nsq-open {
    position: fixed;
    left: 0; right: 0; width: 100%;
    overflow: hidden;
}

.nsq-overlay { position: fixed; inset: 0; z-index: 9600; display: flex; }
.nsq-scrim {
    position: absolute; inset: 0;
    background: rgba(42, 38, 32, .45);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .22s ease;
}
.nsq-overlay.is-in .nsq-scrim { opacity: 1; }

.nsq-panel {
    position: relative; margin: auto;
    width: min(840px, calc(100vw - 32px));
    /* As tall as the window allows (16px clear top and bottom), so the ad and
       every game fit without scrolling — adRail() only picks the 600px unit
       when this cap leaves room for it. overflow stays as a last resort. */
    max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
    overflow-y: auto;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(42, 38, 32, .32);
    opacity: 0; transform: translateY(12px) scale(.985);
    transition: opacity .22s ease, transform .22s ease;
}
.nsq-overlay.is-in .nsq-panel { opacity: 1; transform: none; }
.nsq-panel:focus { outline: none; }

.nsq-split { display: flex; align-items: stretch; }
/* Top-aligned, not centred against the rail: centring a short list beside a
   600px ad opened a big empty gap above the games. */
.nsq-split-main {
    flex: 1; min-width: 0; padding: 20px 26px 22px;
    display: flex; flex-direction: column; justify-content: flex-start;
}
.nsq-split-side {
    position: relative; flex-shrink: 0; width: 332px;
    padding: 16px; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
    border-radius: 0 16px 16px 0;
}

.nsq-head { margin-bottom: 18px; }
/* Eyebrow left, Share + close right, on one line above the heading — the
   controls used to float over the corner and crowd the title. */
.nsq-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 10px; min-height: 32px;
}
.nsq-eyebrow {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--color-primary);
}
.nsq-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* redesign.css gives the pill a top margin for its old spot under the title */
.nsq-actions .sm-share-btn--pill { margin-top: 0; height: 32px; }
.nsq-title {
    font-size: clamp(1.35rem, 2.8vw, 1.75rem); font-weight: 900;
    letter-spacing: -.02em; color: var(--color-white); line-height: 1.15;
}
.nsq-sub { font-size: 13px; color: var(--color-text-muted); margin-top: 6px; }
.nsq-empty { font-size: 14px; color: var(--color-text-muted); }

/* In the results column's top bar, not over the ad rail: that is both an easy
   mis-tap and the worst place for a dismiss control, and the rail collapses
   on an unfilled impression while this has to survive it. */
.nsq-close {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
    background: rgba(32,30,29,.08); border: none;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--color-text); font-size: 12px;
    transition: color var(--transition), background var(--transition);
}
.nsq-close:hover { color: var(--color-bg); background: var(--color-primary); }

/* Each game is a card: crests, matchup, then a chevron — the whole card is
   the link to that game's map. */
.nsq-rows { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.nsq-row-link {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px 12px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: 12px;
    color: inherit; text-decoration: none;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.nsq-row-link:hover { border-color: var(--color-primary); }
.nsq-row-link:hover .nsq-row-game { color: var(--color-primary); }
.nsq-row-link:hover .nsq-row-go { color: var(--color-primary); transform: translateX(2px); }
.nsq-row-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Away + home crests, overlapping slightly like a scorebug. */
.nsq-row-logos { flex-shrink: 0; display: flex; align-items: center; }
.nsq-row-logos img {
    width: 44px; height: 44px; object-fit: contain; display: block;
    padding: 4px; border-radius: 50%;
    background: #fff; border: 1px solid var(--color-border);
}
.nsq-row-logos img + img { margin-left: -10px; }
.nsq-row-main { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nsq-row-game {
    font-size: 15px; font-weight: 700; color: var(--color-white); line-height: 1.3;
    transition: color var(--transition);
}
.nsq-row-slot {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--color-text-muted);
}
/* The game's colour on the map, to match the row to the legend after the jump. */
.nsq-row-swatch {
    flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
    background: var(--game-color);
}
.nsq-row-go {
    flex-shrink: 0; color: var(--color-text-muted);
    transition: color var(--transition), transform var(--transition);
}

/* Beside a 600px rail the column is taller than its content. Pin the coverage
   note to the bottom so the slack sits between list and note, not as a blank
   strip under everything. The list's margin keeps the minimum gap. */
.nsq-rows, .nsq-empty { margin-bottom: 18px; }
.nsq-split-main > .nsq-foot { margin-top: auto; }

.nsq-foot {
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
    font-size: 12px; line-height: 1.55; color: var(--color-text-muted);
}
.nsq-foot a { color: var(--color-primary); font-weight: 600; }

/* ------------------------------------------------------------------- ad */

.nsq-ad { width: 300px; display: flex; flex-direction: column; align-items: center; }
/* An explicit non-percentage width, because a Fixed-size unit here can still
   serve a native creative that ignores the declared size and blows the rail
   out (seen elsewhere on this site: a 900px box out of a 320x50 unit). */
.nsq-ad-unit { width: 300px !important; max-width: 300px; overflow: hidden; }

/* AdSense stamps data-ad-status="unfilled" when it has nothing to serve.
   Without this the panel keeps a 332px-wide blank column next to the results,
   which reads as a broken layout rather than a missing ad. Collapsing the
   whole aside lets the results column take the full panel width instead. */
.nsq-split-side:has(.nsq-ad-unit[data-ad-status="unfilled"]) { display: none; }
/* :has() is unsupported on older Safari/Firefox; there the rail just stays
   blank, which is the current behaviour and no worse than before. */

/* ------------------------------------------------------------ responsive */

/* Stack the rail under the results before the two columns get too narrow. */
@media (max-width: 860px) {
    .nsq-split { flex-direction: column; }
    .nsq-split-side {
        width: 100%; border-left: none; border-top: 1px solid var(--color-border);
        border-radius: 0 0 16px 16px; padding: 20px;
    }
}

/* Under 768px .main-nav becomes a slide-down drawer, so the header bar is just
   logo + search + hamburger. The search stays in the bar (always visible, no
   extra tap). 16px font so iOS does not zoom the page on focus. */
@media (max-width: 768px) {
    .nsq-wrap { flex: 1 1 auto; max-width: none; margin: 0 10px; }
    .nsq-box { height: 38px; padding-left: 10px; gap: 5px; }
    .nsq-input { font-size: 16px; }

    /* Touch targets. The crosshair is a 26px circle inside a 38px bar, well
       under the 44px minimum, and it sits right beside the text input — so a
       near miss silently focuses the field instead. Grow the hit area with a
       pseudo-element rather than the button, which would burst the bar. */
    .nsq-geo { position: relative; }
    .nsq-geo::after {
        content: ''; position: absolute; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 44px; height: 44px;
    }
    .nsq-close { width: 44px; height: 44px; font-size: 14px; }
    .nsq-actions .sm-share-btn--pill { height: 44px; padding: 0 16px 0 14px; }
    /* A result row is the primary target in the dropdown — give it a full
       thumb's worth of height instead of the desktop 8px padding. */
    .nsq-opt { padding: 13px 12px; }
    /* Anchored to the header bar and spanning the viewport rather than the
       ~150px box it hangs off; `top` is set from the header's real rect in JS. */
    .nsq-dropdown {
        position: fixed; left: 8px; right: 8px;
        min-width: 0; max-width: none; max-height: 60vh;
    }
    .site-header .logo-text { font-size: .95rem; }
}

/* Sheet-from-bottom on phones: thumb-reachable, no tiny centred box. */
@media (max-width: 560px) {
    .nsq-panel {
        margin: auto 0 0; width: 100vw; max-height: 90vh;
        border-radius: 18px 18px 0 0; border-bottom: none;
        transform: translateY(24px);
    }
    .nsq-split-main { padding: 16px 18px 12px; }
    .nsq-split-side { padding: 14px 18px calc(16px + env(safe-area-inset-bottom)); }
    .nsq-title { font-size: 1.3rem; }

    /* Tighten the result rows: the rail stacks underneath here, so every
       pixel the list gives back is a pixel of the ad that clears the fold.
       Rows stay ~50px tall, above the 44px touch minimum. */
    .nsq-head { margin-bottom: 10px; }
    .nsq-sub { margin-top: 2px; }
    .nsq-bar { margin-bottom: 6px; }
    .nsq-rows { gap: 6px; }
    .nsq-rows, .nsq-empty { margin-bottom: 10px; }
    /* Every card the same height, sized for a matchup that wraps to two
       lines (2 x 17.5px + 3px gap + 15px meta + 14px padding + 2px border),
       so short names like "Rams at Eagles" don't leave a ragged stack. */
    .nsq-row-link { padding: 7px 10px 7px 8px; gap: 10px; border-radius: 10px; min-height: 70px; box-sizing: border-box; }
    .nsq-row-logos img { width: 36px; height: 36px; padding: 3px; }
    .nsq-row-logos img + img { margin-left: -8px; }
    .nsq-row-game { font-size: 14px; line-height: 1.25; }
    .nsq-row-slot { font-size: 11.5px; line-height: 1.3; }
    .nsq-foot {
        padding-top: 9px;
        font-size: 11px; line-height: 1.45;
    }
}

/* At 390px (iPhone 14/15/16) the bar is logo + search + hamburger inside a
   48px-padded container. The logo keeps its natural width — squeezing it just
   clips the nowrap wordmark to "Sports Ma" — so the search absorbs the shrink. */
@media (max-width: 430px) {
    .site-header .logo { flex-shrink: 0; gap: 6px; }
    .site-header .logo-text { font-size: .88rem; }
    .nsq-wrap { max-width: 168px; margin: 0 8px; }
    .nsq-box { padding: 0 4px 0 9px; }
}

/* Below ~380px the magnifier costs 20px the placeholder needs more: the input
   is only 54px at 360px, where even the short form will not fit beside it.
   The placeholder now says "What's on" outright, so the icon is the redundant
   half — dropping it buys the words their room without touching the wordmark. */
@media (max-width: 380px) {
    .nsq-icon { display: none; }
    .nsq-box { gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
    .nsq-scrim, .nsq-panel { transition: none; }
}