/*
 * _menu.css
 *
 * USED BY:
 *   - menu.html
 */

.menu-search {
    padding: 1rem var(--pad) 0;
}

.menu-search,
.menu-tabs {
    background-color: #FDF7F0;
}

.menu-search .field {
    padding-left: 2.5rem;
    background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23424242' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zM9.5 14A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/%3E%3C/svg%3E") 0.85rem center no-repeat;
}

.menu-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem var(--pad) 0.5rem;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.15rem;
}

.menu-tabs a {
    padding: 0 1rem;
    color: var(--black);
}

.menu-tabs a.active {
    color: var(--red);
    font-style: italic;
}

.menu-tabs span {
    color: var(--black);
    font-size: 1.1rem;
}

.menu-list {
    padding: 0.75rem var(--pad);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.menu-section {
    display: none;
    flex-direction: column;
    gap: 1rem;
}

.menu-section.active {
    display: flex;
}