/*
 * Top navigation — Figma "Navigation / Light BG" frame (11444:3396).
 *
 * Layout: logo (left flex 1) | nav links (center) | actions (right flex 1).
 * Sticky variant adds a blurred translucent background on scroll.
 * Dropdown menus open on hover (desktop) / focus-within (keyboard).
 */

.redesign .site-nav {
    background: var(--neutral-white);
    position: relative;
    z-index: 50;
    padding: 0;           /* override legacy [role="banner"]{padding-top:3px} from style.css */
    width: 100%;
    border: 0;
}

.redesign .site-nav__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Symmetric 16px padding — top and bottom match so the sticky
     * header reads as a clean centered row. The hero wave separator
     * underneath the nav is still its own 32px-tall element. */
    padding: 16px var(--container-pad-inline);
    width: 100%;
}

.redesign .site-nav__row {
    display: flex;
    align-items: center;
    gap: 32px;
    width: 100%;
    max-width: var(--container-max);
    /* Anchor for the inline-search overlay form (`.site-nav__search`)
     * which sits as an absolute child of the row. */
    position: relative;
}

/* Logo + Resources/Education stay tight on the left — `flex: 0 0 auto`
 * lets the brand take its intrinsic width and the nav links sit
 * immediately next to it via the 32 px row gap. Without this, the brand
 * would expand to fill flex space whenever the four secondary links
 * (Shop / Courses / About / Contact) drop out at compact widths and
 * push Resources/Education toward the center of the row. */
.redesign .site-nav__brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
}

/* Let the logo scale naturally from its intrinsic aspect ratio —
 * we control its width via the brand wrapper and keep height: auto
 * so the SVG/PNG never stretches out of proportion.
 *
 * Logo size + vertical padding bumped per Figma comment #38 (May 2026).
 * The new SVG ships its own drop-shadow filter so we don't need to add
 * box-shadow on the wrapper. The shadow extends ~6px past the visible
 * glyph bounds — leave breathing room around the logo. */
/* Explicit height (not max-height) so the SVG — which ships with a
 * viewBox but no width/height attributes — derives a concrete pixel
 * width from height × viewBox ratio. Without this, the brand container
 * (now `flex: 0 0 auto`) collapses to 0 in browsers that resolve
 * `width: auto` on an unsized replaced element to 0, and the logo
 * disappears. 56 px matches Figma 11717:4236. */
.redesign .site-nav__brand img {
    width: auto;
    height: 56px;
    display: block;
}

/* Logo only shrinks once we're in hamburger (phone) mode — at intermediate
 * widths we'd rather drop secondary nav links than make the logo smaller. */
@media (max-width: 640px) {
    .redesign .site-nav__brand img { height: 44px; }
}

.redesign .site-nav__links {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.redesign .site-nav__item {
    position: relative;
    display: flex;
    align-items: center;
}

.redesign .site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    color: var(--brand-sea-green-darker);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--hover-dur) var(--hover-ease);
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 500;
}

.redesign .site-nav__link:hover,
.redesign .site-nav__link:focus-visible {
    color: var(--brand-sea-green);
    text-decoration: none;
}

.redesign .site-nav__chev {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 140ms ease;
}

.redesign .site-nav__chev::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    margin: 2px auto 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.redesign .site-nav__item[aria-expanded="true"] > .site-nav__link .site-nav__chev,
.redesign .site-nav__item.is-open > .site-nav__link .site-nav__chev {
    transform: rotate(180deg);
}

/* Actions take up the remaining row — the brand + links sit on the left
 * as natural-width groups, and the actions stretch out to push Donate
 * (and the hamburger at phone widths) to the right edge. */
.redesign .site-nav__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
    gap: 12px;
}

/* Donate CTA — solid helpline-blue per Figma comment #42.
 * Inner pages (light nav) keep slate so it doesn't fight the dark logo;
 * the homepage overlay variant goes solid peach for visibility over the
 * water hero.
 *
 * Sizing: the Donate sits in the nav row, not as a hero CTA, so it uses
 * a more compact, softer-rect shape than the standard pill .btn. The
 * -6px lift optically centers it against the taller nav row. Both
 * variants share the shape; only colors diverge. */
.redesign .site-nav__donate {
    height: 40px;          /* matches the 40 px search circle exactly */
    padding: 0 18px;       /* vertical centering is handled by .btn's flex */
    font-size: 14px;
    border-radius: 30px;
}

.redesign .site-nav__donate,
.redesign .site-nav__donate:hover,
.redesign .site-nav__donate:focus-visible {
    background: var(--brand-slate);
    color: var(--neutral-white);
    border-color: var(--brand-slate);
}

/* Solid peach-darker on the homepage overlay nav — Figma-style warm
 * Donate pill that reads strongly over the deep blue water. */
body.nav-overlay .site-nav__donate {
    background: var(--brand-peach-darker);
    border-color: var(--brand-peach-darker);
    color: var(--brand-dark-slate-darker);
}

body.nav-overlay .site-nav__donate:hover,
body.nav-overlay .site-nav__donate:focus-visible {
    background: var(--brand-peach);
    border-color: var(--brand-peach);
    color: var(--brand-dark-slate-darker);
}

/* Inline search — circular toggle right of Donate that expands into a
 * full-width input overlay when clicked. Mirrors the find-mikvah hero
 * search visual language (translucent surface, magnifier on left, large
 * input) so the affordance reads as familiar.
 *
 * Hidden on phone (≤ 640 px) because the drawer already exposes a
 * search input — duplicating it in the row would crowd the hamburger. */
.redesign .site-nav__search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;       /* never shrink — fixed across all breakpoints */
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border-primary);
    color: var(--brand-dark-slate);
    cursor: pointer;
    padding: 0;
    transition: background-color var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease), border-color var(--hover-dur) var(--hover-ease), transform 140ms ease;
}

/* Hover/focus — fill with offwhite-peach so the search button picks up
 * the warm accent on interaction without competing with the slate Donate
 * pill next to it. Border darkens to peach to give the state a defined
 * edge. (Figma spec leaves hover open; this is the project-side choice.) */
.redesign .site-nav__search-toggle:hover,
.redesign .site-nav__search-toggle:focus-visible {
    background: var(--brand-offwhite-peach);
    border-color: var(--brand-border-peach);
    color: var(--brand-dark-slate-darker);
}

.redesign .site-nav__search-toggle svg {
    width: 20px;
    height: 20px;
}

/* Search overlay — absolute-positioned form that overlays the entire
 * row (logo, links, actions) when expanded. The transition slides the
 * form in from the left so the icon visually "grows" into the input.
 *
 * `visibility` is delayed on close so the form keeps receiving clicks
 * until the slide-out completes; on open, visibility flips immediately
 * so the input can be focused on the first frame. */
/* Search overlay — full-bleed cover of the header (anchored to
 * `.site-nav` which is `position: relative`). When open, the form sits
 * on top of the entire header surface, hiding the logo, nav links,
 * Donate CTA, and the toggle itself. Inner `.site-nav__search-row`
 * re-applies the container gutter + max-width so the magnifier lines
 * up with where the logo would be.
 *
 * Border-bottom (off-white sea-green hairline) gives the open state a
 * defined edge against the page so it doesn't look like the input is
 * just floating on the page background.
 *
 * NOTE on specificity: the legacy stylesheet ships
 *   [role="banner"] [role="search"]:not(.type_3) { width: 93%; ... }
 * which matches this form and constrains its width to 86–93% (the
 * narrower value applies at ≤ 992 px). That rule has specificity
 * 0,3,0 — higher than `.redesign .site-nav__search` (0,2,0) — so the
 * width override needs an ID selector to win. The dedicated
 * `.redesign #site-nav-search` block below carries the geometry
 * overrides; this base rule just handles paint + transition. */
.redesign .site-nav__search {
    position: absolute;
    inset: 0;
    margin: 0;
    background: var(--neutral-white);
    border-bottom: 1px solid var(--brand-border-peach);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-12px);
    transition:
        opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0ms 220ms;
    z-index: 10;
}

/* Geometry override for the legacy [role="banner"] [role="search"]
 * rules. Selector specificity = 1,1,0 (id + class), which beats both
 * the legacy base rule (0,3,0) and the ≤ 992 px media-query variant
 * (also 0,3,0).
 *
 * `position` and `top` use `!important` because the ≤ 767 px legacy
 * media query carries its own `!important` (forcing the form back to
 * `position: relative` so it sits in flow on phone) — without the bang
 * we lose the override below 767 px and the form's in-flow height
 * inflates the header by ~40 px. */
.redesign #site-nav-search {
    position: absolute !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.redesign .site-nav__search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad-inline);
}

/* When the nav is stuck on scroll, match its translucent-white + blur
 * surface so the bar still feels lightweight rather than punching a
 * solid white plate through the blur. */
.redesign .site-nav.is-stuck .site-nav__search {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.redesign .site-nav.is-searching .site-nav__search {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition:
        opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0ms 0ms;
}

/* Magnifier icon on the left of the input — sized + colored to match
 * the toggle button so the transition feels continuous. */
.redesign .site-nav__search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-sea-green-darker);
    flex-shrink: 0;
}

.redesign .site-nav__search-icon svg {
    width: 22px;
    height: 22px;
}

.redesign .site-nav__search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    background: transparent;
    border: 0;
    outline: 0;
    padding: 0 8px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: 22px;
    line-height: 1;
    color: var(--text-heading);
}

.redesign .site-nav__search-input::placeholder {
    color: var(--text-paragraph);
    opacity: 0.7;
    transition: opacity 200ms ease, transform 200ms ease;
}

/* Placeholder flies away on focus — paired with the same effect on
 * the mobile drawer search */
.redesign .site-nav__search-input:focus::placeholder {
    opacity: 0;
    transform: translateX(16px);
}

.redesign .site-nav__search-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    color: var(--brand-sea-green-darker);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background-color var(--hover-dur) var(--hover-ease);
}

.redesign .site-nav__search-close:hover,
.redesign .site-nav__search-close:focus-visible {
    background: var(--brand-offwhite-peach);
}

.redesign .site-nav__search-close svg {
    width: 20px;
    height: 20px;
}

/* Hide the inline search affordance on the homepage — the hero already
 * carries a prominent Find-a-Mikvah search, and a second search icon
 * floating beside it competes for attention. `body.nav-overlay` is the
 * homepage-only marker (set in layouts/app.blade.php), so the rule is
 * safe to scope this way. The form is hidden too so it doesn't paint
 * if a hash-link or stale state ever tried to open it on home. */
body.nav-overlay .site-nav__search-toggle,
body.nav-overlay .site-nav__search {
    display: none;
}

/* Hamburger — shown only below desktop breakpoint */
.redesign .site-nav__hamburger {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--brand-sea-green-darker);
}

.redesign .site-nav__hamburger svg {
    width: 28px;
    height: 28px;
}

/* Dropdown menu — attached to a nav item, shown on hover or keyboard open */
.redesign .site-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    padding: 8px 0;
    background: var(--neutral-white);
    box-shadow: var(--shadow-md);
    border-radius: 8px;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
    z-index: 60;
}

.redesign .site-nav__item:hover > .site-nav__dropdown,
.redesign .site-nav__item:focus-within > .site-nav__dropdown,
.redesign .site-nav__item.is-open > .site-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.redesign .site-nav__dropdown a {
    display: block;
    padding: 10px 20px;
    color: var(--text-heading);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease);
}

.redesign .site-nav__dropdown a:hover,
.redesign .site-nav__dropdown a:focus-visible {
    background: var(--brand-offwhite-peach);
    color: var(--brand-sea-green);
    text-decoration: none;
}

.redesign .site-nav__dropdown--right {
    left: auto;
    right: 0;
}

/* Sticky variant — activated by JS adding .is-stuck when scrolled */
.redesign .site-nav.is-stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    animation: redesign-slide-down 200ms ease-out;
}

@keyframes redesign-slide-down {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* Reserve space to prevent content jump when nav becomes fixed */
.redesign .site-nav__spacer {
    display: none;
    height: 88px;
}

.redesign .site-nav.is-stuck + .site-nav__spacer {
    display: block;
}

/* Responsive — three states:
 *   (a) Full desktop (≥ 1101 px)    All 6 nav links + Donate + logo
 *   (b) Compact      (641–1100 px)  Resources, Education, Donate + logo;
 *                                   the four secondary links (Shop, My
 *                                   Courses, About us, Contact) drop out
 *                                   and the Resources mega-menu exposes
 *                                   them under a "Main Resources" tab.
 *   (c) Phone        (≤ 640 px)     Logo + hamburger only; drawer takes
 *                                   over everything (Donate included).
 *
 * The compact state replaces the old "collapse to hamburger at 1024 px"
 * behaviour — at 1024 px the nav still has plenty of room for 3 links
 * + Donate, and shrinking the whole site to a hamburger that early made
 * the laptop view feel mobile.
 */
@media (max-width: 1100px) {
    .redesign .site-nav__item--compact-hide {
        display: none;
    }
}

/* Tight zone — between compact (1100 px) and hamburger (640 px) there's
 * a window where Resources + Education + Donate + Search can crowd the
 * row. Search is fixed at 40 px (flex: 0 0 40px above), so Donate is the
 * thing that gives way: smaller padding/font compacts it so the search
 * keeps its full hit-target right up to the hamburger handoff. */
@media (max-width: 820px) {
    .redesign .site-nav__donate {
        padding: 6px 14px;
        font-size: 13px;
    }
    .redesign .site-nav__actions {
        gap: 8px;
    }
}

@media (max-width: 640px) {
    .redesign .site-nav__links,
    .redesign .site-nav__actions .btn,
    .redesign .site-nav__search-toggle {
        display: none;
    }
    .redesign .site-nav__hamburger {
        display: inline-flex;
    }
    .redesign .site-nav__actions {
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .redesign .site-nav__inner {
        padding: 12px 20px;
    }
}

/* ── Overlay mode ─────────────────────────────────────────────────── */
/* Used on the homepage: the nav floats over the hero video with white
 * text and transparent background, then swaps to the normal solid
 * sticky style the moment the user scrolls past the hero.
 *
 * Activated by `body.nav-overlay` (set in layouts/app.blade.php from the
 * view's @extends data). */

body.nav-overlay .site-nav {
    position: relative;  /* keep z-index effective so hero paints below */
    z-index: 50;
    /* Figma node 11372:34783 — subtle offwhite-seagreen wash on the nav row
     * so the menu items read over darker spots of the water photo without
     * fully obscuring the image behind them. */
    background: rgba(194, 210, 216, 0.16);
}

body.nav-overlay .site-nav__link {
    color: var(--neutral-white);
}

body.nav-overlay .site-nav__link:hover,
body.nav-overlay .site-nav__link:focus-visible {
    color: var(--brand-offwhite-seagreen);
}

body.nav-overlay .site-nav__hamburger {
    color: var(--neutral-white);
}

/* Pull the hero up so it begins at Y=0 under the transparent nav.
 * Nav is now 88px tall (16 + 56 logo + 16) — match that. */
body.nav-overlay main {
    margin-top: -88px;
}

@media (max-width: 767px) {
    body.redesign.nav-overlay.has-ticker .site-nav .site-nav__inner {
        padding-top: 16px;
    }

    body.nav-overlay.has-ticker main {
        margin-top: -88px;
    }
}

@media (max-width: 640px) {
    body.nav-overlay.has-ticker main {
        margin-top: -76px;
    }

    body.nav-overlay.has-ticker .hero__wave {
        top: 68px;
    }

    /* Drop the offwhite-seagreen wash behind the logo + hamburger at
     * phone widths — the row is just a wordmark and a single icon, so
     * the wash adds visual weight without protecting any text. The
     * hero photo reads better with the nav fully transparent here. */
    body.nav-overlay .site-nav {
        background: transparent;
    }
}

@media (max-width: 480px) {
    body.redesign.nav-overlay.has-ticker .site-nav .site-nav__inner {
        padding-top: 12px;
    }

    body.nav-overlay.has-ticker main {
        margin-top: -68px;
    }

    body.nav-overlay.has-ticker .hero__wave {
        top: 60px;
    }
}

/* The hero now sets its own fixed height (994px) — no overrides needed
 * in overlay mode. The negative main margin above still pulls the hero
 * up under the nav so the water fills the viewport top edge. */

/* When scrolled past the hero, the nav becomes the normal solid sticky.
 * Override the overlay colors so the stuck state stays readable on
 * white content backgrounds. */
body.nav-overlay .site-nav.is-stuck {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

body.nav-overlay .site-nav.is-stuck .site-nav__link {
    color: var(--brand-sea-green-darker);
}

body.nav-overlay .site-nav.is-stuck .site-nav__link:hover {
    color: var(--brand-sea-green);
}

body.nav-overlay .site-nav.is-stuck .site-nav__hamburger {
    color: var(--brand-sea-green-darker);
}

/* Logo: in overlay mode the header partial picks the light variant.
 * The SVG ships its own drop shadow so it reads against any water tone
 * underneath. Legacy raster fallback inverts to white if the SVG is
 * missing. Once the nav becomes stuck on scroll the dark logo is
 * fetched from the picker, so we drop the invert there. */
body.nav-overlay .site-nav img[src*="logo.png"]:not([src*="logos/logo-"]),
body.nav-overlay .site-nav img[src*="logo_new.png"] {
    filter: brightness(0) invert(1);
}

body.nav-overlay .site-nav.is-stuck img {
    filter: none;
}