/* ═══════════════════════════════════════════════════════════
       CUSTOM SEARCH ENGINE UI — index.php only
       All tokens from recipe-theme.css are available here.
       ═══════════════════════════════════════════════════════════ */

    /* ─── Hero: two-column desktop layout ─── */
    .search-hero {
        align-items: flex-start !important;
        text-align: left !important;
        min-height: clamp(480px, 62vh, 720px) !important;
        padding: 56px 52px 52px !important;
    }

    /* Fix centered top-border decoration — now spans full width */
    .search-hero::before {
        left: 0 !important;
        width: 100% !important;
        transform: none !important;
        opacity: 0.3 !important;
    }

    /* Shift glow left so it sits behind the search content, not dead centre */
    .hero-glow {
        left: 35% !important;
        top: 45% !important;
    }

    .hero-glow--secondary {
        left: 65% !important;
        top: 25% !important;
        opacity: 0.4 !important;
        width: 500px !important;
        height: 500px !important;
    }

    /* Two-column grid: left = search content, right = trending panel */
    .search-hero-inner {
        display: grid !important;
        grid-template-columns: 1fr 320px !important;
        gap: 44px !important;
        align-items: start !important;
        max-width: none !important;      /* was 780px — now full container width */
        width: 100% !important;
    }

    /* Hide the old CSE widget & old hints */
    .search-container,
    .search-hints,
    .quick-pills { display: none !important; }

    /* ─── Left column ─── */
    .hero-main {
        display: flex;
        flex-direction: column;
        min-width: 0;           /* prevent grid blowout */
    }

    /* h1: slightly smaller since column is narrower than old full-width inner */
    .search-hero h1 {
        font-size: clamp(2.4rem, 4.8vw, 4.4rem);
        margin: 0 0 6px;
        letter-spacing: -.02em;
    }

    .hero-tagline {
        margin: 0 0 28px;
        color: var(--muted);
        font-size: .98rem;
        letter-spacing: .01em;
        line-height: 1.6;
        max-width: 560px;
    }

    /* Remove max-width caps — let elements fill the column */
    .search-form-wrapper {
        position: relative;
        width: 100%;
    }

    /* ─── Custom Search Bar ─── */
    .search-bar {
        display: flex;
        align-items: stretch;
        height: 64px;
        border: 1.5px solid var(--border-hover);
        border-radius: var(--radius-md);
        background: rgba(2, 10, 14, 0.9);
        backdrop-filter: blur(32px);
        overflow: hidden;
        transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
        box-shadow: 0 8px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(22,238,255,.06);
    }

    .search-bar:focus-within {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(22,238,255,.1),
                    0 12px 48px rgba(0,0,0,.5),
                    inset 0 1px 0 rgba(22,238,255,.12);
    }

    .search-bar-icon {
        display: flex;
        align-items: center;
        padding: 0 4px 0 22px;
        color: rgba(22,238,255,.38);
        font-size: 1.3rem;
        flex-shrink: 0;
        pointer-events: none;
        transition: color .2s;
        line-height: 1;
        user-select: none;
    }

    .search-bar:focus-within .search-bar-icon { color: var(--accent); }

    .search-bar-input {
        flex: 1;
        min-width: 0;       /* lets flex shrink below the browser's intrinsic min-width */
        height: 100%;
        padding: 0 14px;
        background: none;
        border: none;
        outline: none;
        color: var(--text);
        font-family: "Courier New", monospace;
        font-size: 1.08rem;
        letter-spacing: .015em;
        caret-color: var(--accent);
    }

    .search-bar-input::placeholder {
        color: rgba(223,252,255,.28);
        font-style: italic;
        font-size: 1rem;
    }

    .search-bar-clear {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 0;
        overflow: hidden;
        background: none;
        border: none;
        color: var(--muted);
        font-size: 1rem;
        cursor: pointer;
        transition: width .2s var(--ease), color .15s;
        padding: 0;
    }

    .search-bar-clear.visible { width: 36px; padding: 0 4px; }
    .search-bar-clear:hover   { color: var(--text); }

    .search-bar-submit {
        flex-shrink: 0;
        height: 100%;
        padding: 0 30px;
        background: var(--accent);
        border: none;
        border-left: 1px solid rgba(22,238,255,.25);
        color: #000;
        font-family: "Courier New", monospace;
        font-size: .83rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        cursor: pointer;
        white-space: nowrap;
        transition: background .2s var(--ease), transform .12s;
    }

    .search-bar-submit:hover  { background: #4cf4ff; }
    .search-bar-submit:active { transform: scale(.97); }

    .search-bar-shortcut {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
        padding: 0 14px 0 6px;
        pointer-events: none;
        opacity: 1;
        transition: opacity .2s;
    }

    .search-bar-shortcut .shortcut-or {
        font-size: 0.7em;
        color: var(--muted);
        padding: 0 2px;
    }

    .search-bar-shortcut kbd {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 22px;
        min-width: 22px;
        padding: 0 5px;
        border: 1px solid rgba(22,238,255,.2);
        border-radius: 4px;
        background: rgba(22,238,255,.05);
        color: var(--muted);
        font-family: "Courier New", monospace;
        font-size: .7rem;
        letter-spacing: 0;
    }

    .search-bar.is-typing .search-bar-shortcut,
    .search-bar:focus-within .search-bar-shortcut { opacity: 0; }


    /* ─── Category Chips ─── */
    .category-strip {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 18px;
    }

    .cat-chip {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 7px 15px;
        border: 1px solid rgba(22,238,255,.18);
        border-radius: 999px;
        background: rgba(22,238,255,.04);
        color: var(--muted);
        font-family: "Courier New", monospace;
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .05em;
        cursor: pointer;
        transition: border-color .2s, background .2s, color .2s, transform .15s;
        white-space: nowrap;
    }

    .cat-chip:hover {
        border-color: var(--accent);
        background: rgba(22,238,255,.09);
        color: var(--text);
        transform: translateY(-1px);
    }

    .cat-chip.active {
        border-color: var(--accent);
        background: rgba(22,238,255,.14);
        color: var(--accent);
    }

    .cat-chip .chip-emoji { font-size: .9rem; line-height: 1; }

    /* ─── Stat strip ─── */
    .stat-strip {
        display: flex;
        align-items: center;
        gap: 0;
        margin-top: 22px;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: rgba(22,238,255,.025);
        overflow: hidden;
    }

    .stat-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 14px 10px;
        border-right: 1px solid var(--border);
        gap: 3px;
    }

    .stat-item:last-child { border-right: none; }

    .stat-val {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--accent);
        line-height: 1;
    }

    .stat-lbl {
        font-size: .67rem;
        color: var(--muted);
        letter-spacing: .1em;
        text-transform: uppercase;
    }


    /* ─── Responsive breakpoints ─── */

    /* 1080px: collapse hero to single column */
    @media (max-width: 1080px) {
        .search-hero-inner {
            grid-template-columns: 1fr !important;
            gap: 0 !important;
        }

        .hero-aside { display: none !important; }

        .search-hero {
            padding: 48px 36px 44px !important;
        }
    }

    /* 720px: center everything, compact bar */
    @media (max-width: 720px) {
        .search-hero {
            align-items: center !important;
            text-align: center !important;
            padding: 40px 20px 36px !important;
        }

        .search-hero-inner,
        .hero-main { align-items: center !important; }

        .hero-tagline { max-width: 100%; text-align: center; }

        .search-bar { height: 56px; }

        .search-bar-icon   { padding: 0 2px 0 16px; font-size: 1.1rem; }
        .search-bar-input  { font-size: .95rem; padding: 0 10px; }
        .search-bar-submit { padding: 0 18px; font-size: .78rem; }

        .search-bar-shortcut { display: none; }
        .category-strip { justify-content: center; }
        .stat-strip { display: none; }
    }

    /* Submit button: text visible by default, icon hidden */
    .submit-icon { display: none; }
    .submit-text { display: inline; }

    @media (max-width: 480px) {
        .search-bar-submit { padding: 0 14px; letter-spacing: .06em; }
        .cat-chip { font-size: .74rem; padding: 6px 12px; }
    }

    /* ≤420px: swap "Search" text for the ⌕ icon to reclaim ~30px of bar width */
    @media (max-width: 420px) {
        .submit-text { display: none; }
        .submit-icon {
            display: block;
            font-size: 1.2rem;
            line-height: 1;
        }
        .search-bar-submit { padding: 0 16px; letter-spacing: 0; }
        .search-bar-icon   { padding: 0 2px 0 12px; }
        .search-bar-input  { padding: 0 8px; }
    }

    /* ≤360px: shave hero side padding so the bar has maximum available width */
    @media (max-width: 360px) {
        .search-hero { padding: 32px 14px 28px !important; }
        .search-bar  { height: 52px; }
    }


    /* ── Syntax hint button (inside search bar) ── */
    .syntax-hint-btn {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        margin: 0 6px 0 0;
        border: 1px solid rgba(22,238,255,.2);
        border-radius: 50%;
        background: rgba(22,238,255,.04);
        color: var(--muted);
        font-family: "Courier New", monospace;
        font-size: .72rem;
        font-weight: 700;
        cursor: pointer;
        transition: border-color .2s, background .2s, color .2s;
        align-self: center;
    }

    .syntax-hint-btn:hover,
    .syntax-hint-btn[aria-expanded="true"] {
        border-color: var(--accent);
        background: rgba(22,238,255,.1);
        color: var(--accent);
    }

    @media (max-width: 480px) { .syntax-hint-btn { display: none; } }



@media (max-width: 720px) {
    .category-strip { gap: 6px; }
}