/**
 * Melody Magic — site nav (MM-007 P3 rebuild).
 *
 * Sticky header with backdrop blur, comp-fidelity mega menu (4 sections,
 * row-style program treatment, gradient top border), and an inline About
 * dropdown anchored under its trigger.
 *
 * Tokens-only — every value resolves through theme.json or
 * docs/.../colors_and_type.css (--mm-* foundation in block-styles.css).
 */

/* =====================================================================
   Header bar — sticky, backdrop blur
===================================================================== */

/* Sticky lives on the template-part wrapper, not .mm-nav itself: WP
   wraps parts in <header class="wp-block-template-part">, and that
   wrapper — not .mm-nav — is the body-level child whose height spans
   the page. position:sticky on .mm-nav alone is constrained by the
   wrapper's own (header-tall) height, so it un-sticks immediately. */
.wp-block-template-part:has(> .mm-nav) {
    position: sticky;
    top: 0;
    z-index: 40;
}

/* WP core injects `:where(.wp-site-blocks) > * { margin-block-start: 1rem }`,
   which puts a 16px paper-colored stripe between the sticky <header>
   template-part and <main> on every page. Zero it out site-wide so the
   header sits flush against page content. Mirrors the equivalent fix in
   site-footer.css for the footer template-part. */
.wp-site-blocks > main {
    margin-block-start: 0;
}

.mm-nav {
    background: rgba(250, 250, 247, 0.97);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
            backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--mm-line);
    transition: box-shadow var(--mm-dur) var(--mm-ease);
}

.mm-nav.is-scrolled {
    background: rgba(250, 250, 247, 1);
    box-shadow: var(--mm-shadow-sm);
}

.mm-nav__inner {
    position: relative;
    max-width: 1440px;
    height: 72px;
    margin-inline: auto;
    padding-inline: var(--mm-s-8);
    display: flex;
    align-items: center;
    gap: var(--mm-s-10);
}

/* =====================================================================
   Logo
===================================================================== */

.mm-nav__logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    text-decoration: none;
}

.mm-nav__logo img {
    display: block;
    height: 36px;
    width: auto;
    max-width: 220px;
}

/* =====================================================================
   Hamburger (visible <1024px)
===================================================================== */

.mm-nav__hamburger {
    display: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    background: transparent;
    border: 0;
    color: var(--mm-ink);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--mm-r-sm);
}

.mm-nav__hamburger:hover,
.mm-nav__hamburger:focus-visible {
    background-color: var(--mm-teal-50);
    color: var(--mm-teal-800);
}

.mm-nav__hamburger-icon--close { display: none; }

.mm-nav.is-mobile-open .mm-nav__hamburger-icon--open { display: none; }
.mm-nav.is-mobile-open .mm-nav__hamburger-icon--close { display: inline-flex; }

/* While the mobile drawer is open, kill backdrop-filter on the header.
   backdrop-filter establishes a containing block for fixed descendants,
   which traps the drawer (.mm-nav__primary, position:fixed) inside the
   65px-tall header instead of letting it span the viewport. Without
   this override the drawer collapses to its top+bottom padding, stranding
   About/Events/Testimonials behind the hero photo. The blur is for
   readability over scrolled content; with the drawer covering everything
   below, the blur isn't doing visible work anyway. */
.mm-nav.is-mobile-open {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* =====================================================================
   Primary nav (items + CTAs)
===================================================================== */

.mm-nav__primary {
    display: flex;
    align-items: center;
    gap: var(--mm-s-3);
    flex: 1;
}

.mm-nav__items {
    display: flex;
    list-style: none;
    margin: 0 0 0 var(--mm-s-3);
    padding: 0;
    gap: 2px;
    flex: 1;
}

.mm-nav__item {
    position: static;
    margin: 0;
}

.mm-nav__trigger,
.mm-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    font-family: var(--mm-font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--mm-ink);
    background-color: transparent;
    border: 0;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    line-height: 1.2;
    transition: background-color var(--mm-dur) var(--mm-ease), color var(--mm-dur) var(--mm-ease);
}

.mm-nav__trigger:hover,
.mm-nav__trigger:focus-visible,
.mm-nav__link:hover,
.mm-nav__link:focus-visible {
    color: var(--mm-teal-800);
    background-color: var(--mm-teal-50);
    text-decoration: none;
    outline: none;
}

.mm-nav__trigger[aria-expanded="true"] {
    color: var(--mm-teal-800);
    background-color: var(--mm-teal-50);
}

.mm-nav__chev {
    display: inline-flex;
    align-items: center;
    transition: transform var(--mm-dur) var(--mm-ease);
}

.mm-nav__trigger[aria-expanded="true"] .mm-nav__chev {
    transform: rotate(180deg);
}

/* =====================================================================
   CTAs
===================================================================== */

.mm-nav__ctas {
    display: flex;
    align-items: center;
    gap: var(--mm-s-2);
    flex-shrink: 0;
}

.mm-nav__cta-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 999px;
    background-color: transparent;
    border: 0;
    color: var(--mm-teal-800);
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background-color var(--mm-dur) var(--mm-ease), color var(--mm-dur) var(--mm-ease);
}

.mm-nav__cta-ghost:hover,
.mm-nav__cta-ghost:focus-visible {
    background-color: var(--mm-teal-50);
    color: var(--mm-teal-900);
    text-decoration: none;
}

.mm-nav__cta-icon {
    display: inline-flex;
    align-items: center;
    color: currentColor;
}

.mm-nav__cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 999px;
    background-color: var(--mm-teal);
    color: #fff;
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(21, 92, 85, 0.18);
    transition: background-color var(--mm-dur) var(--mm-ease), transform var(--mm-dur) var(--mm-ease), box-shadow var(--mm-dur) var(--mm-ease);
}

.mm-nav__cta-primary:hover,
.mm-nav__cta-primary:focus-visible {
    background-color: var(--mm-teal-700);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -4px rgba(21, 92, 85, 0.28);
}

/* =====================================================================
   Panels (mega + dropdown)
===================================================================== */

.mm-nav__panel {
    background-color: var(--mm-white);
    border-top: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--mm-teal) 0%, var(--mm-teal) 55%, var(--mm-grape) 100%) 1;
    box-shadow: var(--mm-shadow-lg);
}

.mm-nav__panel[hidden] {
    display: none;
}

.mm-nav__panel--mega {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    width: 100%;
    z-index: 39;
}

.mm-nav__panel--dropdown {
    position: absolute;
    top: calc(100% + 4px);
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: auto;
    min-width: 240px;
    border-radius: var(--mm-r-md);
    box-shadow: var(--mm-shadow-md);
    z-index: 39;
}

/* =====================================================================
   Mega menu — sections + rows
===================================================================== */

.mm-mega {
    background: linear-gradient(180deg, var(--mm-teal-50) 0%, var(--mm-white) 70%);
    border-bottom: 6px solid var(--mm-teal);
    box-shadow: 0 24px 32px -16px rgba(14, 63, 58, 0.18);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Walkthrough #2: dropdown panels (About, Account) inherit the same
   teal-tinted background + thick teal end-cap as the Programs mega menu
   for visual consistency, just at a smaller width.

   5/21 review: About + Account upgraded to mega-list (full-width panel)
   per Katherine's "I want all of the drop-downs to open just like the
   programs - mega menu style." Rules below keep working for any future
   .mm-nav__panel--dropdown consumer; the mega-list variant has its own
   block below. */
.mm-nav__panel--dropdown .mm-dropdown {
    background: linear-gradient(180deg, var(--mm-teal-50) 0%, var(--mm-white) 70%);
    border-bottom: 6px solid var(--mm-teal);
    box-shadow: 0 24px 32px -16px rgba(14, 63, 58, 0.18);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding: 18px 22px 22px;
    min-width: 240px;
}

/* Mega-list variant: full-width panel like Programs, but the body is a
   centered single-row link list instead of the rich card grid. Used by
   About and Account where 4–5 simple links don't warrant a mega card
   layout but should still open as a full-width drop. The link row sits
   inside the same max-width inner wrap as .mm-mega__inner so the visual
   rhythm matches the Programs mega menu underneath the header. */
.mm-nav__panel--mega-list {
    background: linear-gradient(180deg, var(--mm-teal-50) 0%, var(--mm-white) 70%);
    border-bottom: 6px solid var(--mm-teal);
    box-shadow: 0 24px 32px -16px rgba(14, 63, 58, 0.18);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.mm-nav__panel--mega-list .mm-dropdown {
    max-width: 1440px;
    margin-inline: auto;
    padding: 22px var(--mm-s-8) 26px;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}

.mm-nav__panel--mega-list .mm-dropdown__list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 4px;
    min-width: 0;
}

.mm-nav__panel--mega-list .mm-dropdown__link {
    padding: 10px 18px;
    font-size: 15px;
}

.mm-mega__inner {
    max-width: 1440px;
    margin-inline: auto;
    padding: 28px var(--mm-s-8) 32px;
}

.mm-mega__section { margin-top: 18px; }
.mm-mega__section--first { margin-top: 0; }

.mm-mega__label-row {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.mm-mega__label {
    font-family: var(--mm-font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mm-ink-3);
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mm-mega__label-row .mm-mega__label { margin-bottom: 0; }

.mm-mega__label-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: var(--mm-teal);
    display: inline-block;
}

.mm-mega__view-all {
    font-family: var(--mm-font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--mm-teal);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.mm-mega__view-all:hover,
.mm-mega__view-all:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mm-mega__view-all-arrow {
    transition: transform 160ms ease;
}

.mm-mega__view-all:hover .mm-mega__view-all-arrow,
.mm-mega__view-all:focus-visible .mm-mega__view-all-arrow {
    transform: translateX(2px);
}

.mm-mega__section--grape .mm-mega__label { color: var(--mm-grape-700); }
.mm-mega__section--grape .mm-mega__label-dot { background-color: var(--mm-grape-700); }
.mm-mega__section--grape .mm-mega__view-all { color: var(--mm-grape-700); }

.mm-mega__section--rose .mm-mega__label { color: var(--mm-rose-800); }
.mm-mega__section--rose .mm-mega__label-dot { background-color: var(--mm-rose); }
.mm-mega__section--rose .mm-mega__view-all { color: var(--mm-rose-800); }

.mm-mega__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

/* Compact variant — About + Account menus.
   Same chrome as Programs, but a single section with a 2-col x 2-row
   card grid. Inner panel is narrower (4 cards don't need the full
   1440px width) and each row uses an eyebrow/name/desc body stack
   without the age-chip meta column on the right. */
.mm-mega--compact .mm-mega__inner {
    max-width: 840px;
    padding: 24px var(--mm-s-8) 28px;
}
.mm-mega--compact .mm-mega__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.mm-mega--compact .mm-mega__row {
    grid-template-columns: 40px 1fr;
}

/* Row */

.mm-mega__row {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--mm-line);
    background-color: var(--mm-white);
    cursor: pointer;
    transition: border-color 180ms var(--mm-ease), background-color 180ms var(--mm-ease), transform 180ms var(--mm-ease);
    position: relative;
    text-decoration: none;
    color: inherit;
}

.mm-mega__row:hover,
.mm-mega__row:focus-visible {
    border-color: var(--mm-teal-300);
    background-color: var(--mm-teal-50);
    transform: translateY(-1px);
    outline: none;
    text-decoration: none;
}

.mm-mega__row:focus-visible {
    box-shadow: 0 0 0 3px var(--mm-focus-ring);
}

.mm-mega__row-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: var(--mm-teal-50);
    color: var(--mm-teal-700);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mm-mega__section--grape .mm-mega__row-icon {
    background-color: var(--mm-grape-100);
    color: var(--mm-grape-700);
}

.mm-mega__section--rose .mm-mega__row-icon {
    background-color: var(--mm-rose-100);
    color: var(--mm-rose-800);
}

.mm-mega__row-body { min-width: 0; }

.mm-mega__row-eyebrow {
    display: block;
    font-family: var(--mm-font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mm-teal-700);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mm-mega__section--grape .mm-mega__row-eyebrow { color: var(--mm-grape-700); }
.mm-mega__section--rose  .mm-mega__row-eyebrow { color: var(--mm-rose-800); }

.mm-mega__row-name {
    display: block;
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mm-ink);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mm-mega__row-desc {
    display: block;
    font-family: var(--mm-font-body);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--mm-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mm-mega__row-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.mm-mega__age {
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mm-ink-2);
    background-color: var(--mm-paper-2);
    padding: 4px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Featured star */

.mm-mega__row-star {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background-color: var(--mm-grape-700);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(95, 44, 117, 0.3);
    z-index: 1;
}

/* Badge (Coming Fall 2026 / NEW) */

.mm-mega__badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-family: var(--mm-font-display);
    font-weight: 800;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8A6B0A;
    background-color: var(--mm-butter);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Footer — bottom of mega menu. Primary "See all programs" pill is
   centered + sized as the dominant action; the helper text + Text us
   CTA sit below it as a quieter secondary row. */

.mm-mega__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--mm-line);
    font-family: var(--mm-font-body);
    font-size: 13px;
    color: var(--mm-ink-3);
    gap: 14px;
}

.mm-mega__footer-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--mm-s-3);
    text-align: center;
}

.mm-mega__footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--mm-teal-700);
    text-decoration: none;
}

.mm-mega__footer-cta:hover,
.mm-mega__footer-cta:focus-visible {
    color: var(--mm-teal-800);
    text-decoration: underline;
}

.mm-mega__footer-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 999px;
    background-color: var(--mm-teal);
    border: 1px solid var(--mm-teal);
    font-family: var(--mm-font-display);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: #fff;
    text-decoration: none;
    box-shadow: var(--mm-shadow-xs);
    transition: background-color var(--mm-dur) var(--mm-ease), border-color var(--mm-dur) var(--mm-ease), color var(--mm-dur) var(--mm-ease), transform var(--mm-dur) var(--mm-ease), box-shadow var(--mm-dur) var(--mm-ease);
}

.mm-mega__footer-link:hover,
.mm-mega__footer-link:focus-visible {
    background-color: var(--mm-teal-800);
    border-color: var(--mm-teal-800);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--mm-shadow-md);
    text-decoration: none;
}

.mm-mega__footer-link-arrow {
    transition: transform var(--mm-dur) var(--mm-ease);
}

.mm-mega__footer-link:hover .mm-mega__footer-link-arrow,
.mm-mega__footer-link:focus-visible .mm-mega__footer-link-arrow {
    transform: translateX(2px);
}

/* =====================================================================
   Dropdown (About)
===================================================================== */

.mm-dropdown {
    background-color: var(--mm-white);
    padding: var(--mm-s-3);
    border-radius: var(--mm-r-md);
}

.mm-dropdown__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 220px;
}

.mm-dropdown__list li { margin: 0; }

.mm-dropdown__link {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    font-family: var(--mm-font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--mm-ink);
    text-decoration: none;
    transition: background-color var(--mm-dur) var(--mm-ease), color var(--mm-dur) var(--mm-ease);
}

.mm-dropdown__link:hover,
.mm-dropdown__link:focus-visible {
    background-color: var(--mm-teal-50);
    color: var(--mm-teal-800);
    text-decoration: none;
    outline: none;
}

/* =====================================================================
   Tablet (768–1023px) — condensed: hide items, show hamburger
===================================================================== */

@media (max-width: 1023px) {
    .mm-nav__inner {
        gap: var(--mm-s-4);
    }
    .mm-nav__primary {
        display: none;
    }
    .mm-nav__hamburger {
        display: inline-flex;
        order: 3;
        margin-left: 0;
    }
    /* Phone CTA hidden in tablet — Try a Class stays */
    .mm-nav__ctas .mm-nav__cta-ghost {
        display: none;
    }
    .mm-nav__ctas {
        margin-left: auto;
        order: 2;
    }
}

/* =====================================================================
   Mobile (<768px) — tighter padding
===================================================================== */

@media (max-width: 767px) {
    .mm-nav__inner {
        height: 64px;
        padding-inline: var(--mm-s-4);
        gap: var(--mm-s-3);
    }
    .mm-nav__logo img {
        height: 32px;
    }
    .mm-nav__cta-primary {
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* =====================================================================
   Mobile overlay state — full-screen accordion
===================================================================== */

.mm-nav.is-mobile-open .mm-nav__primary {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    inset: 72px 0 0 0;
    background-color: var(--mm-white);
    padding: var(--mm-s-6) var(--mm-s-4) var(--mm-s-12);
    overflow-y: auto;
    z-index: 39;
    gap: var(--mm-s-3);
}

@media (max-width: 767px) {
    .mm-nav.is-mobile-open .mm-nav__primary {
        inset-block-start: 64px;
    }
}

.mm-nav.is-mobile-open .mm-nav__items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: 0;
    width: 100%;
}

.mm-nav.is-mobile-open .mm-nav__trigger,
.mm-nav.is-mobile-open .mm-nav__link {
    width: 100%;
    justify-content: space-between;
    padding: var(--mm-s-3) var(--mm-s-4);
    font-size: 16px;
}

.mm-nav.is-mobile-open .mm-nav__panel {
    position: static;
    background-color: transparent;
    box-shadow: none;
    border-image: none;
    border-top: 0;
    border-radius: 0;
    inset: auto;
    width: 100%;
    min-width: 0;
}

.mm-nav.is-mobile-open .mm-mega__inner {
    padding: var(--mm-s-3) var(--mm-s-2) var(--mm-s-6);
}

.mm-nav.is-mobile-open .mm-mega__grid {
    grid-template-columns: 1fr;
}

.mm-nav.is-mobile-open .mm-mega__footer {
    flex-direction: column;
    align-items: stretch;
}

.mm-nav.is-mobile-open .mm-mega__footer-link {
    width: 100%;
    justify-content: center;
}

.mm-nav.is-mobile-open .mm-nav__ctas {
    flex-direction: column;
    align-items: stretch;
    margin-top: var(--mm-s-6);
    padding-top: var(--mm-s-6);
    border-top: 1px solid var(--mm-line);
}

.mm-nav.is-mobile-open .mm-nav__cta-ghost,
.mm-nav.is-mobile-open .mm-nav__cta-primary {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    padding: var(--mm-s-3) var(--mm-s-5);
}

/* Lock body scroll while overlay is open */
.mm-nav.is-mobile-open ~ * {
    overflow: hidden;
}

/* =====================================================================
   Reduced motion
===================================================================== */

@media (prefers-reduced-motion: reduce) {
    .mm-nav,
    .mm-nav__trigger,
    .mm-nav__link,
    .mm-nav__cta-primary,
    .mm-nav__chev,
    .mm-mega__row,
    .mm-dropdown__link {
        transition: none;
    }
    .mm-mega__row:hover,
    .mm-nav__cta-primary:hover {
        transform: none;
    }
}