/*
 * Mobile drawer — June 2026 editorial redesign.
 *
 * Was: flat white sheet with peach-filled accordion rows (Figma "Menu"
 * frame 11499:4705). Now: a warm offwhite-peach sheet where the
 * top-level nav is set in the display serif (Cormorant) at editorial
 * scale — the menu reads like a magazine contents page rather than a
 * settings list. Hierarchy is carried by type, not fills:
 *   • top-level items: 26px serif, chestnut hairline rules between
 *   • expanded sections: a 2px peach "spine" rule down the left edge
 *     instead of a background fill
 *   • sublinks: quiet Manrope, slate on hover/active
 *   • Donate: the single dark-slate pill — the one strong CTA,
 *     matching the site's primary .btn
 *   • footer: hairline-ruled helpline row on the sheet itself
 *
 * Markup + JS hooks unchanged (drawer__trigger / data-drawer-item /
 * .is-open) — this is a reskin, mechanics live in redesign.js.
 *
 * Slides in from the right; JS adds .is-open and locks body scroll.
 */

.redesign .drawer {
    position: fixed;
    inset: 0;
    /* Warm gradient sheet — near-white at the top deepening into soft
     * peach at the bottom, so the menu has atmosphere instead of a
     * flat fill */
    background: linear-gradient(172deg,
        #fffdfc 0%,
        var(--brand-offwhite-peach) 42%,
        #fde9e0 100%);
    color: var(--text-heading);
    /* Above all page-level sticky UI (e.g. the /helpline tab bar) —
     * only the drawer backdrop sits beneath it */
    z-index: 1100;
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(0.32, 0.72, 0.28, 1);
    display: flex;
    flex-direction: column;
    visibility: hidden;
    overscroll-behavior: contain;
}

.redesign .drawer.is-open {
    transform: translateX(0);
    visibility: visible;
}

/* Header block — compact logo + slate-ringed close, search pill grouped
 * in, the whole block closed off by a chestnut hairline so it reads as
 * one deliberate unit on the sheet */
.redesign .drawer__top {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 24px 18px;
    border-bottom: 1px solid rgba(208, 176, 156, 0.4);
    flex-shrink: 0;
}

/* Masthead row — logo centered like a magazine nameplate, close ring
 * floating at the right edge */
.redesign .drawer__top-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

.redesign .drawer__brand img {
    height: 38px;
    width: auto;
}

.redesign .drawer__top-row .drawer__close {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Close — thin slate ring */
.redesign .drawer__close {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--brand-dark-slate);
    border: 1px solid rgba(40, 65, 75, 0.32);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: border-color var(--hover-dur) var(--hover-ease),
                background-color var(--hover-dur) var(--hover-ease);
}

.redesign .drawer__close:hover {
    background: var(--neutral-white);
    border-color: var(--brand-dark-slate);
    color: var(--brand-dark-slate);
}

.redesign .drawer__close svg {
    width: 18px;
    height: 18px;
}

.redesign .drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Search — white pill lifted off the warm sheet */
.redesign .drawer__search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    background: var(--neutral-white);
    border: 1px solid var(--brand-peach-darker);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--hover-dur) var(--hover-ease);
}

.redesign .drawer__search:focus-within {
    border-color: var(--brand-dark-slate);
}

.redesign .drawer__search svg {
    width: 20px;
    height: 20px;
    color: var(--text-heading);
    flex-shrink: 0;
    opacity: 0.55;
}

/* Serif italic input — same editorial voice as the desktop header
 * search overlay. 17px keeps iOS from zooming the field on focus. */
.redesign .drawer__search input {
    flex: 1;
    background: transparent;
    border: 0;
    color: var(--text-heading);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 17px;
    outline: none;
    min-width: 0;
}

/* Placeholder flies away on focus (mirrors the desktop search) */
.redesign .drawer__search input::placeholder {
    color: var(--text-paragraph);
    opacity: 0.8;
    transition: opacity 200ms ease, transform 200ms ease;
}

.redesign .drawer__search input:focus::placeholder {
    opacity: 0;
    transform: translateX(16px);
}

.redesign .drawer__menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Chestnut hairlines between top-level entries — the contents-page rule */
.redesign .drawer__item {
    border-bottom: 1px solid rgba(208, 176, 156, 0.4);
}

.redesign .drawer__item:last-child {
    border-bottom: 0;
}

/* Top-level entries — editorial serif, the drawer's one bold move */
.redesign .drawer__trigger,
.redesign .drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 2px;
    background: transparent;
    border: 0;
    color: var(--text-heading);
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.2px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--hover-dur) var(--hover-ease);
}

.redesign .drawer__trigger:hover,
.redesign .drawer__link:hover {
    background: transparent;
    color: var(--brand-dark-slate);
    text-decoration: none;
}

/* Open trigger: ink shifts to dark slate — no fill, type carries it */
.redesign .drawer__item.is-open .drawer__trigger {
    background: transparent;
    color: var(--brand-dark-slate);
}

.redesign .drawer__chev {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 200ms ease, color var(--hover-dur) var(--hover-ease);
    color: var(--brand-chestnut);
}

.redesign .drawer__chev::before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    margin: 3px auto 0;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}

/* Scoped to the item's own trigger so nested sub-item chevrons don't
 * inherit the flip when their parent section expands */
.redesign .drawer__item.is-open > .drawer__trigger .drawer__chev {
    transform: rotate(180deg);
    color: var(--brand-dark-slate);
}

.redesign .drawer__submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 240ms ease;
}

.redesign .drawer__item.is-open .drawer__submenu {
    max-height: 4000px;
    padding-bottom: 14px;
}

.redesign .drawer__submenu--nested {
    background: transparent;
}

/* Section rows (Find a Mikvah, TH Instructor Directory, …) */
.redesign .drawer__sub-item {
    list-style: none;
    padding-left: 14px;
}

.redesign .drawer__sub-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 11px 8px 11px 0;
    background: transparent;
    border: 0;
    color: var(--text-heading);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    transition: color var(--hover-dur) var(--hover-ease);
}

.redesign .drawer__sub-trigger:hover {
    background: transparent;
    color: var(--brand-dark-slate);
}

.redesign .drawer__sub-item.is-open .drawer__sub-trigger {
    background: transparent;
    color: var(--brand-dark-slate);
}

.redesign .drawer__chev--small {
    width: 16px;
    height: 16px;
}

.redesign .drawer__chev--small::before {
    width: 7px;
    height: 7px;
}

.redesign .drawer__sub-item.is-open .drawer__chev--small {
    transform: rotate(180deg);
}

.redesign .drawer__sub-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 240ms ease;
    padding: 0 8px 0 2px;
}

.redesign .drawer__sub-item.is-open .drawer__sub-content {
    max-height: 1600px;
    padding-bottom: 6px;
}

/* Column group — heading + its links behind a short peach rule. Each
 * group gets its own rule segment (broken between groups) so the
 * heading↔links relationship is explicit. */
.redesign .drawer__sub-group {
    border-left: 2px solid var(--brand-peach-darker);
    padding: 2px 0 2px 14px;
    margin: 8px 0 18px;
}

.redesign .drawer__sub-group:last-child {
    margin-bottom: 8px;
}

/* Column headings (e.g. AMERICAN INSTRUCTORS) — tagline caps in the
 * lighter slate so they whisper, not shout */
.redesign .drawer__sub-heading {
    margin: 0 0 2px;
    padding: 0;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    line-height: var(--lh-tagline);
    letter-spacing: var(--ls-tagline);
    color: var(--brand-dark-slate-lighter);
    text-transform: uppercase;
}

.redesign .drawer__sub-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Links sit a step deeper than their heading */
.redesign .drawer__sub-list .drawer__sublink {
    padding: 9px 8px 9px 12px;
    font-size: 15px;
}

.redesign .drawer__sublink {
    display: block;
    padding: 10px 8px 10px 12px;
    color: var(--text-paragraph);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    background: transparent;
    transition: color var(--hover-dur) var(--hover-ease);
}

.redesign .drawer__sublink:hover,
.redesign .drawer__sublink:focus-visible {
    background: transparent;
    color: var(--brand-dark-slate);
    text-decoration: none;
}

.redesign .drawer__sublink.is-active,
.redesign .drawer__sublink[aria-current="page"] {
    color: var(--brand-dark-slate);
    font-weight: 600;
}

/* View-all pills — saturated peach so they register against the
 * offwhite-peach sheet (the old offwhite fill would vanish here) */
.redesign .drawer__sub-viewall {
    display: inline-flex;
    align-items: center;
    margin: 10px 0 4px;
    padding: 9px 16px;
    color: var(--text-heading);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius-full);
    background: var(--brand-peach);
    transition: background-color var(--hover-dur) var(--hover-ease);
}

.redesign .drawer__sub-viewall:hover {
    background: var(--brand-peach-darker);
    color: var(--text-heading);
    text-decoration: none;
}

/* Column-level view-all pill — appended after a column's links in the
 * drawer (see `mobile_view_all` in HeaderComposer). Indented to the
 * group's link gutter. */
.redesign .drawer__sub-viewall--col {
    margin: 4px 0 2px 12px;
}

/* Donate CTA — the drawer's one dark anchor; mirrors the site's
 * primary dark-slate .btn */
.redesign .drawer__donate {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 14px 0 0;
    padding: 16px 32px;
    background: var(--brand-dark-slate);
    color: var(--neutral-white);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.4px;
    line-height: 1.5;
    text-decoration: none;
    border-radius: var(--radius-full);
    transition: background-color var(--hover-dur) var(--hover-ease);
}

.redesign .drawer__donate:hover,
.redesign .drawer__donate:focus-visible {
    background: var(--brand-dark-slate-darker);
    color: var(--neutral-white);
    text-decoration: none;
}

/* Helpline strip — sits on the sheet's peach gradient (transparent bg)
 * with type + icon in the /helpline page's deep blue (#2d6a8f), so the
 * row carries the helpline brand without breaking the warm sheet */
.redesign .drawer__footer {
    padding: 18px 24px;
    background: transparent;
    border-top: 1px solid rgba(45, 106, 143, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-shrink: 0;
}

.redesign .drawer__footer svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #2d6a8f;
}

.redesign .drawer__footer a {
    color: #2d6a8f;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.redesign .drawer__footer a:hover {
    color: #1f4f6e;
    text-decoration: none;
}

.redesign .drawer__divider {
    width: 1px;
    height: 16px;
    background: rgba(45, 106, 143, 0.3);
}

.redesign .drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(32, 52, 60, 0.5);
    z-index: 1090;
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms ease;
}

.redesign .drawer-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

body.drawer-locked {
    overflow: hidden;
}

@media (min-width: 1025px) {
    .redesign .drawer,
    .redesign .drawer-backdrop {
        display: none;
    }
}