/*
 * Footer — Figma "Single resource page" footer section (node ~11522:22390).
 * Two-panel dark: brand/contact on left (sea-green-darkest), big editorial
 * link columns on right (sea-green-darker). Floral lineart band below with
 * language toggles. The floating sticky bar component sits above.
 */

.redesign .site-footer {
    position: relative;
    overflow: hidden;
    /* Override legacy rule in style.css:
     *   [role="contentinfo"] { padding: 44px 0 0; }
     * which otherwise leaves a 44 px white strip above the redesigned footer
     * (the download section ends flush and the parent .bg_light shows through).
     * The redesigned panels own their own top padding, so zero this out. */
    padding: 0;
}

/* Give the right panel room for the floral decoration without pushing content */
.redesign .site-footer__links {
    position: relative;
}

.redesign .site-footer__panels {
    display: flex;
    align-items: stretch;
    /* Shorter now that the right-hand link columns are 3 rows (was 4) —
     * brings the bottom band (and its wave) up a touch. */
    min-height: 520px;
}

.redesign .site-footer__brand {
    flex: 0 0 auto;
    width: 633px;                 /* Figma exact at 1920 frame */
    /* Brand panel sits DARKER than the link panel — Figma uses
     * dark-slate-darker on the left, dark-slate (medium) on the right
     * so the two-tone footer reads as `[brand surface][menu surface]`. */
    background: var(--brand-dark-slate-darker);
    /* Trimmed top + bottom (was 112 / 224) so the panel — which drives the
     * section height — is shorter and the copyright sits a drop higher. */
    padding: 96px 160px 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.redesign .site-footer__brand > * {
    width: 313px;                 /* Figma inner content width */
    max-width: 100%;
}

/* Center the logo within the brand panel */
.redesign .site-footer__logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.redesign .site-footer__logo img {
    height: 48px;
    width: auto;
    display: block;
    margin: 0 auto;
}

.redesign .site-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: center;
    color: var(--brand-offwhite-seagreen);
    font-size: 16px;
    line-height: 1.5;
}

.redesign .site-footer__contact a {
    color: inherit;
    text-decoration: none;
}

.redesign .site-footer__contact a:hover {
    color: var(--neutral-white);
    text-decoration: underline;
}

.redesign .site-footer__attribution {
    color: var(--brand-offwhite-seagreen);
    font-size: 14px;
    text-align: center;
    opacity: 0.64;
    margin-top: auto;
}

.redesign .site-footer__links {
    flex: 1 1 0;
    min-width: 0;
    /* Lighter than the brand panel on the left so the two-tone Figma
     * pattern reads (left = darker, right = medium dark slate). */
    background: var(--brand-dark-slate);
    padding: 96px 160px 180px;
    display: flex;
    gap: 32px;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* Below the 1920 Figma frame the brand panel hoards too much room and the
 * link panel’s 160 px side padding squeezes "My Courses" / "Helpline"
 * onto two lines. Scale both down in tiers so the 3 link columns keep
 * enough width to render on one line each. */
@media (max-width: 1600px) {
    .redesign .site-footer__brand { width: 480px; padding: 96px 96px 180px; }
    .redesign .site-footer__links { padding: 96px 96px 180px; }
}

@media (max-width: 1280px) {
    .redesign .site-footer__brand { width: 360px; padding: 80px 48px 160px; }
    .redesign .site-footer__brand > * { width: 100%; }
    .redesign .site-footer__links { padding: 80px 48px 160px; gap: 24px; }
    .redesign .site-footer__link { font-size: 24px; padding: 8px 4px; }
}

@media (max-width: 1100px) {
    .redesign .site-footer__brand { width: 320px; padding: 72px 32px 144px; }
    .redesign .site-footer__links { padding: 72px 32px 144px; gap: 16px; }
    .redesign .site-footer__link { font-size: 20px; padding: 6px 2px; }
}

.redesign .site-footer__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.redesign .site-footer__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;                /* Figma: p-[12px] */
    /* Pure white per Figma Text/Heading White token. */
    color: var(--text-heading-white);
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 32px;              /* Figma H4 — IvyJournal Light 32 */
    line-height: 1.3;
    text-decoration: none;
    transition: color var(--hover-dur) var(--hover-ease);
}

.redesign .site-footer__link:hover,
.redesign .site-footer__link:focus-visible {
    color: var(--neutral-white);
    text-decoration: none;
}

.redesign .site-footer__link svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: currentColor;
}

/* Footer buttons (Resources / Education) — open the shared mega-menu
 * panels. Strip native <button> chrome so the `.site-footer__link`
 * rule (IvyJournal serif, 32px, 1.3 line-height) is what shows.
 * Avoid the `font: inherit` shorthand here — it would clobber the
 * font-family/size/weight set by `.site-footer__link`. */
.redesign .site-footer__link--trigger {
    /* Strip only the user-agent button chrome (background, border,
     * appearance, default margin) so the `.site-footer__link` rule
     * fully controls layout, padding, color, and font. */
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

/* Figma Footer vector container (node 11336:36663) — 4-layer wave that
 * sits at the TOP of the bottom band, transitioning from the dark link
 * panels above into the brighter sea-green band below. The PNG has a
 * transparent top (so the dark panels show through) and solid lighter
 * teal at the bottom (which merges into the band’s bg). */
.redesign .site-footer__band-wave {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    line-height: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-60%);  /* pull up so the wave crest bleeds into the dark panels */
    z-index: 1;
}

.redesign .site-footer__band-wave img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: cover;
    object-position: center bottom;
}

@media (max-width: 768px) {
    .redesign .site-footer__band-wave img { max-height: 120px; }
    .redesign .site-footer__band-wave { transform: translateY(-50%); }
}

/* The hand-drawn floral detail used to live absolutely-positioned in the
 * right link panel (.site-footer__flowers) but was visually duplicated
 * with the one in the bottom band, so it’s been removed from the markup.
 * The CSS rules have been deleted along with it — the band flower is
 * styled via .site-footer__band-graphic below. */

/* Bottom band — brighter sea-green per Figma, with wave transition at top.
 * Matches the sticky-footer bg from Figma node 11336:36662.
 * overflow is visible so the wave inside can bleed up into the dark panels
 * above; the parent .site-footer still clips anything outside the footer. */
.redesign .site-footer__band {
    /* Bottom band sits LIGHTER than the link panels — Figma uses
     * dark-slate-lighter (#53696f) so the page closes on a softer
     * shade that's still in the dark-slate family (not the brighter
     * full slate). */
    background: var(--brand-dark-slate-lighter);
    padding: 96px var(--container-pad-inline) 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.redesign .site-footer__band-inner {
    display: flex;
    align-items: center;
    gap: 32px;
    max-width: 978px;
    width: 100%;
    position: relative;
    z-index: 2;
}

.redesign .site-footer__band-text {
    flex: 1 1 0;
    min-width: 0;
    color: var(--brand-offwhite-seagreen);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.redesign .site-footer__band-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 32px;
    line-height: 1.3;
    margin: 0;
    color: var(--neutral-white);
}

.redesign .site-footer__band-sub {
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    color: var(--brand-offwhite-seagreen);
}

/* Decorative graphic LEFT of the band text (Figma places it before the copy) */
.redesign .site-footer__band-graphic {
    width: 64px;
    height: auto;
    opacity: 0.8;
    flex-shrink: 0;
    order: -1;                    /* ensure it renders first on any flex reorder */
}

/* Inline sticky bar shown inside the footer band (always visible;
 * the floating fixed variant is hidden when the footer is in view).
 *
 * Width matches `.site-footer__band-inner` (max-width 978 px) so the
 * pill's left/right edges line up with the band's flower SVG (left)
 * and the language buttons (right). No inline padding here — the
 * parent `.site-footer__band` already supplies the horizontal padding;
 * adding it again would indent the pill an extra 64 px on each side
 * and the search would then collide with the Education button below
 * about 1085 px. */
.redesign .site-footer__sticky-inline {
    max-width: 978px;
    width: 100%;
    margin: 32px auto 0;
    position: relative;
    z-index: 3;
    box-sizing: border-box;
}

.redesign .stickybar--inline {
    position: relative;
    width: 100%;
    pointer-events: auto;
}

.redesign .stickybar--inline .stickybar__pill {
    padding: 8px 12px;
    background: var(--brand-sea-green);
    border: 1px solid var(--opacity-white-15);
    border-radius: var(--radius-pill);
    box-shadow: 0 12px 40px rgba(32, 52, 60, 0.24);
}

.redesign .stickybar--inline .stickybar__helpline {
    background: transparent;
    backdrop-filter: none;
    padding: 12px 16px;
}

.redesign .stickybar--inline .stickybar__search {
    padding: 10px 16px;
    min-width: 260px;
    max-width: 320px;
    background: var(--opacity-white-10);
}

/* Inline sticky bar — intermediate width (901–1230 px). The full
 * helpline (icon + "PURE Helpline" + divider + 833-4MIKVAH) is what
 * makes the row overflow into a wrap. Drop the divider + phone number
 * so the chip shrinks to icon + "PURE Helpline", and the helpline +
 * actions + search keep sharing a single row down to the mobile-stack
 * breakpoint at 900 px. */
@media (min-width: 901px) and (max-width: 1230px) {
    .redesign .stickybar--inline .stickybar__helpline span:last-of-type,
    .redesign .stickybar--inline .stickybar__helpline .stickybar__divider {
        display: none;
    }
    .redesign .stickybar--inline .stickybar__helpline {
        padding: 8px 12px;
        gap: 8px;
    }
}

/* Tiny-phone helpline collapse — at ≤410 px the "PURE Helpline |
 * 833-4MIKVAH" label is too long for a single-line centered chip.
 * Drop the divider + phone-number span so only "PURE Helpline"
 * remains (the chip is still a link to /helpline so the number is one
 * tap away). */
@media (max-width: 410px) {
    .redesign .stickybar__helpline .stickybar__divider,
    .redesign .stickybar__helpline span:last-child {
        display: none;
    }
}

/* The inline sticky bar sits at the bottom of the footer band on mobile
 * too, per Figma node 11493:679 — full-width stacked pills (Purity
 * Helpline chip + Start Learning + Explore Resources + search). The
 * FIXED floating variant is still hidden on mobile (sticky-bar.css). */
@media (max-width: 900px) {
    .redesign .stickybar--inline {
        padding: 0;
        margin: 24px 0 0;
        max-width: none;
        width: 100%;
    }
    .redesign .stickybar--inline .stickybar__pill {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        /* Same outer pill look as the 901–1100 intermediate
         * breakpoint: squarer white-bordered box around the stacked
         * chips for visual consistency across all smaller viewports. */
        padding: 16px;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.32);
        border-radius: 32px;
        box-shadow: none;
    }
    .redesign .stickybar--inline .stickybar__col {
        width: 100%;
        justify-content: center;
    }
    /* Override the hero-variant mobile ordering (left=3, center=1,
     * right=none) — Figma inline order is helpline → actions → search
     * top-to-bottom. */
    .redesign .stickybar--inline .stickybar__col--left   { order: 1; }
    .redesign .stickybar--inline .stickybar__col--center { order: 2; }
    .redesign .stickybar--inline .stickybar__col--right  { order: 3; display: flex; }
    /* All inline pills share the same white-bordered translucent look
     * (Figma). border-radius: pill, 1 px rgba white border, faint wash. */
    .redesign .stickybar--inline .stickybar__helpline,
    .redesign .stickybar--inline .stickybar__search {
        width: 100%;
        max-width: none;                   /* cancel desktop 320 px cap so search is full-width */
        min-width: 0;                      /* cancel desktop 260 px min that could force overflow */
        display: flex;                     /* override 1100 px `display: none` on search */
        justify-content: center;
        align-items: center;
        padding: 14px 20px;
        background: rgba(194, 210, 216, 0.16);
        border: 1px solid rgba(255, 255, 255, 0.32);
        border-radius: var(--radius-pill);
        box-sizing: border-box;
    }
    .redesign .stickybar--inline .stickybar__search input {
        flex: 1;
        min-width: 0;
    }
    .redesign .stickybar--inline .stickybar__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
    }
    .redesign .stickybar--inline .stickybar__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

.redesign .site-footer__lang {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-shrink: 0;
}

.redesign .site-footer__lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background: var(--opacity-white-32);
    color: var(--neutral-white);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    text-decoration: none;
    transition: background-color var(--hover-dur) var(--hover-ease);
}

.redesign .site-footer__lang-btn:hover {
    background: rgba(255, 255, 255, 0.44);
    color: var(--neutral-white);
    text-decoration: none;
}

/* ── Responsive ──
 * Desktop (>1024 px): the base rules lay brand + links side-by-side
 * in a single flex row with padding 112 / 160.
 * ≤1024 px: panels stack vertically and the link panel becomes a
 * 3-col flex row — Resources/About/Socials side-by-side, all the way
 * down to mobile. At narrow widths (≤520 px) the socials column drops
 * its text labels so the icons stay but the freed width flows back to
 * the Resources/About columns. */
@media (max-width: 1024px) {
    .redesign .site-footer__panels {
        flex-direction: column;
        min-height: 0;
    }
    .redesign .site-footer__brand,
    .redesign .site-footer__links {
        width: 100%;
        padding: 64px 32px;
        overflow: visible;                 /* FIX: cancel desktop overflow:hidden clip */
        box-sizing: border-box;
    }
    .redesign .site-footer__brand {
        gap: 32px;
        padding-bottom: 64px;
    }
    /* Flex (not grid) so the socials column can shrink to icons-only at
     * narrower widths while Resources/About absorb the freed width. */
    .redesign .site-footer__links {
        display: flex;
        flex-wrap: nowrap;
        gap: 24px;
        align-items: flex-start;
        /* The wave (in the band below) bleeds up into this panel, so the
         * flat 64 px bottom padding leaves almost no clear space under the
         * last link row. Bump it so the gap below the links visually
         * matches the 64 px above them once the wave is accounted for. */
        padding-bottom: 130px;
    }
    .redesign .site-footer__col {
        flex: 1 1 0;
        min-width: 0;
    }
    /* Socials column is content-sized so it doesn't claim a third of
     * the row; cols 1 & 2 keep more room for "My Courses" / "About Us". */
    .redesign .site-footer__col:nth-child(3) {
        flex: 0 1 auto;
    }
    /* Keep the full 32 px serif size in the stacked layout — it only
     * drops once the columns can no longer hold it (see ≤640 px below). */
}

@media (max-width: 768px) {
    /* Tablet→mobile — keep the 3-col layout + 24 px serif font from the
     * 1024 rule. Only tighten paddings/gap and the link tap target. The
     * font drop happens later (≤400 px) so the footer menu still reads
     * confidently on most phones. */
    .redesign .site-footer__brand,
    .redesign .site-footer__links {
        padding: 48px 20px;
    }
    .redesign .site-footer__links {
        gap: 16px;
        /* Wave shrinks here (max-height 120, pulled up 50%), so it bleeds
         * less into this panel — keep enough bottom padding that the
         * clear space under the links still reads like the 48 px top. */
        padding-bottom: 80px;
    }
    .redesign .site-footer__link {
        padding: 6px 0;                    /* tighter tap target */
    }

    /* Band — lighter sea-green under the wave */
    .redesign .site-footer__band {
        padding: 64px 20px 32px;
    }
    .redesign .site-footer__band-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    .redesign .site-footer__band-text { width: 100%; }

    /* Figma mobile hides the branch/flower SVG and the subtitle. */
    .redesign .site-footer__band-graphic { display: none; }
    .redesign .site-footer__band-sub { display: none; }

    .redesign .site-footer__band-title {
        font-size: 32px;
        text-align: left;
    }

    /* Language buttons: full-width stacked on mobile per Figma. */
    .redesign .site-footer__lang {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
    }
    .redesign .site-footer__lang-btn {
        width: 100%;
        padding: 16px 20px;
        font-size: 16px;
    }
}

/* The IvyJournal 32 px size holds across desktop + tablet widths. Only
 * here — where the 3 columns can no longer keep "My Courses" and the
 * social labels on one line — does the footer menu step down to 24 px. */
@media (max-width: 600px) {
    .redesign .site-footer__link { font-size: 24px; }
}

/* Narrow phones — Facebook/Instagram/YouTube labels start crowding the
 * Resources/About columns, so drop the labels and keep just the icons.
 * The socials column collapses to ~24 px wide and Resources/About get
 * the freed width. Labels stay in the DOM (visually-hidden) so screen
 * readers still announce them. */
@media (max-width: 520px) {
    .redesign .site-footer__col:nth-child(3) .site-footer__link {
        gap: 0;
    }
    .redesign .site-footer__col:nth-child(3) .site-footer__link-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* Very narrow phones — drop the link font a touch so "My Courses" /
 * "About Us" don't wrap to two lines on small handsets. */
@media (max-width: 400px) {
    .redesign .site-footer__link { font-size: 20px; }
}