/* FAQ page search and category grouping. Accordion lives in core.css. */
.faq-page .hero::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(oklch(1 0 0 / 0.05) 1px, transparent 1px),
        linear-gradient(90deg, oklch(1 0 0 / 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 1;
    mask-image: radial-gradient(circle at 50% 50%, black, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black, transparent 80%);
}

/* === FAQ PAGE === */
.faq-hero {
    background: linear-gradient(oklch(0.208 0.04 265.755 / 0.78), oklch(0.208 0.04 265.755 / 0.78)), url('/assets/editorial/warehouse.jpg');
    background-size: cover;
    background-position: center;
}

.faq-search-wrapper {
    max-width: 600px;
    margin: 0 auto;
}

.faq-search-box {
    position: relative;
    background: white;
    border-radius: var(--border-radius);
    padding: 0.5rem 1.5rem;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 25px -5px oklch(0 0 0 / 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.faq-search-box:focus-within,
.faq-search-box.has-value {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px oklch(0 0 0 / 0.4);
}

.faq-search-box .search-icon {
    color: var(--color-accent);
    margin-right: 1rem;
}

.faq-search-box input {
    border: none;
    background: transparent;
    width: 100%;
    padding: 0.75rem 0;
    font-size: 1.1rem;
    color: var(--color-primary);
    outline: none;
}

.faq-search-box input::placeholder {
    color: oklch(0.711 0.035 256.788);
}

/* FAQ Categories */
.faq-category {
    margin-bottom: 2.5rem;
}

.faq-category:last-of-type {
    margin-bottom: 0;
}

.faq-category-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-accent);
}

/* Hide empty categories during search */
.faq-category.hidden {
    display: none;
}

main .site-hero.hero .site-hero__extra .faq-search-wrapper {
    margin: 2rem 0 0;
    max-width: 35rem;
}

@media (max-width: 767px) {
    main .site-hero.hero .site-hero__extra .faq-search-box {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}