/* ==========================
   SEARCH BAR
   Reusable, solid (non-glass) search input + button — used in the hero
   and the Archive page. Deliberately not glass: glassmorphism is reserved
   for the header, where there's page content behind it to blur.
========================== */

.search-bar {
    display: flex;
    gap: 0.75rem;
}

.search-bar input[type="search"] {
    flex: 1 1 auto;
    padding: 0.95rem 1.15rem;
    border-radius: 999px;
    border: 1px solid rgba(60, 40, 30, 0.08);
    background: rgba(255, 255, 255, 0.95);
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--color-text);
    box-shadow: 0 6px 18px rgba(60, 40, 30, 0.04);
}

.search-bar input[type="search"]::placeholder {
    color: var(--color-text-light);
}

.search-bar input[type="search"]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}