/* ============================================================
   zeal · Full-width mega menu  —  core Navigation block
   Faithful to the zeal Design System spec
   (mega-menu/zeal-mega-menu.html). No markup change required:
   add child links to a top-level menu item and, optionally, a
   Description to each child.
   ============================================================ */

:root {
    --zeal-mega-header-h: var(--zeal-header-height, 78px);
    --zeal-mega-max: var(--wp--style--global--wide-size, 1200px);

    --zeal-plum-ink: var(--plum-900, #2f2935);
    --zeal-plum-700: var(--plum-700, #534761);
    --zeal-plum-600: var(--plum-600, #685a76);
    --zeal-plum-500: var(--plum-500, #7c6a86);
    --zeal-plum-300: var(--plum-300, #b3a6bb);
    --zeal-plum-050: var(--plum-050, #f6f3f8);
    --zeal-grey-600: var(--grey-600, #6e6e6e);
    --zeal-grey-400: var(--grey-400, #9a9a9a);
    --zeal-grey-200: var(--grey-200, #e2e2e2);
    --zeal-white: var(--white, #ffffff);
    --zeal-serif: var(--serif, "Lora", "Times New Roman", serif);
}

header.wp-block-template-part nav {
    flex-grow: 1;
}

/* The header is the full-width positioning anchor; let the band escape every box. */
header.wp-block-template-part,
header.wp-block-template-part .wp-block-group,
header.wp-block-template-part .wp-block-navigation,
header.wp-block-template-part .wp-block-navigation__responsive-container:not(.has-modal-open),
header.wp-block-template-part .wp-block-navigation__responsive-container-content,
header.wp-block-template-part .wp-block-navigation__container {
    overflow: visible !important;
}

/* Neutralise every positioning context between the fixed header and the band
   so the submenu resolves its left:0/right:0 against the full-width header
   (NOT the narrower nav wrapper). The header itself stays the anchor. */
header.wp-block-template-part .wp-block-group,
header.wp-block-template-part .wp-block-navigation,
header.wp-block-template-part .wp-block-navigation__responsive-container:not(.has-modal-open),
header.wp-block-template-part .wp-block-navigation__responsive-container-content,
header.wp-block-template-part .wp-block-navigation__container {
    position: static;
}

/* A top-level parent goes static so its submenu can break out to full width. */
header.wp-block-template-part .wp-block-navigation-item.has-child {
    position: static;
}

/* Vertically centre the logo + nav on the fixed header bar. */
header.wp-block-template-part .header > .wp-block-group {
    align-items: center;
    min-height: var(--zeal-mega-header-h);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

header.wp-block-template-part .wp-block-navigation__container {
    display: flex;
    align-items: center;
    gap: 36px;
}

/* ---------- top-level items ---------- */
header.wp-block-template-part .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    font-family: var(--zeal-serif);
    font-size: 1.0625rem;
    color: var(--zeal-white) !important;
    display: flex;
    align-items: center;
    gap: 7px;
    height: var(--zeal-mega-header-h);
    cursor: pointer;
    border: 0;
    background: none;
    padding: 0;
    text-decoration: none;
}

/* hide WP's default submenu chevron — we draw our own to match the spec */
header.wp-block-template-part .wp-block-navigation__container > .wp-block-navigation-item.has-child .wp-block-navigation__submenu-icon {
    display: none;
}

/* thin rotating caret on parent items (matches design system) */
header.wp-block-template-part .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid rgba(255, 255, 255, 0.8);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.8);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

header.wp-block-template-part .wp-block-navigation__container > .wp-block-navigation-item.has-child:hover > .wp-block-navigation-item__content::after,
header.wp-block-template-part .wp-block-navigation__container > .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation-item__content::after {
    transform: translateY(1px) rotate(225deg);
}

/* ============================================================
   Full-width mega band
   ============================================================ */
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container {
    list-style: none;
    margin: 0;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: var(--zeal-mega-header-h);
    width: 100%;
    max-width: none;
    min-width: 0;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 56px;
    row-gap: 2px;
    padding: 44px max(28px, calc((100% - var(--zeal-mega-max)) / 2)) 52px;

    /* force white over WP's overlayBackgroundColor:contrast */
    background: #ffffff !important;
    color: var(--zeal-plum-ink);
    border: 0;
    border-top: 1px solid rgba(124, 106, 134, 0.22);
    box-shadow: 0 24px 48px rgba(47, 41, 53, 0.16);
    z-index: 130;

    /* hidden until opened */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.24s;
}

/* open on hover, keyboard focus, or click (aria-expanded toggle) */
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container,
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}

/* ---------- editorial rail (spans all columns) ---------- */
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container > li.zeal-mega-rail {
    grid-column: 1 / -1;
    list-style: none;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 8px;
    padding: 0 16px 14px;
    border-bottom: 1px solid var(--zeal-grey-200);
}

header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container > li.zeal-mega-rail .zeal-mega-rail__ov {
    font-family: var(--zeal-serif);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--zeal-plum-500);
}

header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container > li.zeal-mega-rail .zeal-mega-rail__lk {
    font-family: var(--zeal-serif);
    font-size: 0.875rem;
    font-style: italic;
    color: var(--zeal-plum-600) !important;
    text-decoration: none;
    white-space: nowrap;
}

header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container > li.zeal-mega-rail .zeal-mega-rail__lk:hover {
    text-decoration: underline;
}

/* ---------- each submenu entry ---------- */
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item {
    position: relative;
    background: transparent;
    border-radius: 8px;
}

/* Stack label over description. Core renders both inside this anchor for
   post-type links and can resolve it to a horizontal flex row, so force an
   explicit vertical column. */
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item {
    display: block;
}

header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start;
    height: auto;
    padding: 14px 16px;
    border-radius: 8px;
    border: 0;
    text-decoration: none;
    color: var(--zeal-plum-ink) !important;
    transition: background 0.18s ease;
}

header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
    display: block;
    width: 100%;
    font-family: var(--zeal-serif);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--zeal-plum-ink) !important;
    letter-spacing: -0.005em;
    line-height: 1.3;
    margin-bottom: 3px;
    text-align: left;
}

header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__description {
    display: block;
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.55;
    font-weight: 400;
    color: var(--zeal-grey-600);
    text-align: left;
}

header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover,
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:focus-visible {
    background: var(--zeal-plum-050);
    outline: none;
}

header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:focus-visible .wp-block-navigation-item__label {
    color: var(--zeal-plum-600) !important;
}

/* Spec parity: submenu cards are text-only. */
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container img {
    display: none !important;
}

/* ============================================================
   Mobile drawer (<=1000px): full-screen branded list.
   Mirrors the zeal Design System "mobile view" (section 02):
   sticky plum header + close, section overlines from the
   top-level labels, and rows reusing the desktop label +
   description treatment.
   ============================================================ */

/* The branded header is injected as the first <li> of the menu;
   it only ever shows inside the open slide-in overlay. */
.zeal-m-header {
    display: none;
}

/* Hamburger (open) button sits on the plum bar. */
header.wp-block-template-part button.wp-block-navigation__responsive-container-open {
    color: var(--zeal-white);
}

@media (max-width: 1000px) {
    /* ---- overlay surface: a white scrolling list ---- */
    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open {
        background-color: #ffffff !important;
    }

    /* full-bleed list: clear WP's modal centring + the theme's right-justify */
    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-dialog,
    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-content {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-content {
        align-items: stretch;
    }

    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__container {
        display: block;
        width: 100%;
        max-width: none;
        margin: 0;
        gap: 0;
        padding: 0 8px;
    }

    /* ---- plum branded header (scrolls with the list) ---- */
    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open .zeal-m-header {
        display: flex;
        align-items: center;
        gap: 11px;
        margin: 0 -8px 4px;
        padding: 16px 20px;
        list-style: none;
        background: var(--zeal-plum-500);
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open .zeal-m-brand {
        display: flex;
        align-items: center;
        gap: 11px;
        text-decoration: none;
    }

    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open .zeal-m-header img {
        display: block !important;
        height: 42px;
        width: auto;
        max-width: 160px;
        object-fit: contain;
    }

    /* ---- close button: plain X over the plum header ---- */
    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-close {
        position: absolute;
        top: 18px;
        right: 18px;
        z-index: 6;
        width: 42px;
        height: 42px;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: none;
        color: #ffffff;
    }

    /* ---- hide submenu toggles & default chevrons (sections stay open) ---- */
    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-submenu__toggle:not(.wp-block-navigation-item__content),
    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-icon {
        display: none;
    }

    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::after {
        content: none;
    }

    /* ---- section overline = the top-level parent label ---- */
    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__container > .wp-block-navigation-item {
        display: block;
    }

    /* the parent label is replaced by the editorial rail (the section header) */
    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
        display: none;
    }

    /* ---- submenu: always-open stacked list ---- */
    header.wp-block-template-part .wp-block-navigation .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container {
        position: static;
        width: 100%;
        display: block;
        padding: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        box-shadow: none;
        border-top: 0;
        background: transparent !important;
    }

    /* hide sub-item images in the drawer */
    header.wp-block-template-part .wp-block-navigation .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container img {
        display: none;
    }

    /* the editorial rail becomes the mobile section header: overline + right-aligned link */
    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container > li.zeal-mega-rail {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin: 0 4px;
        padding: 18px 16px 10px;
        border-top: 1px solid var(--zeal-grey-200);
        border-bottom: 0;
    }

    /* first section: no divider above the rail */
    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open .zeal-m-header + .wp-block-navigation-item.has-child .zeal-mega-rail {
        border-top: 0;
        padding-top: 14px;
    }

    /* ---- each row: label + description + chevron ---- */
    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container > .wp-block-navigation-item {
        border-radius: 10px;
    }

    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
        display: grid !important;
        grid-template-columns: 1fr 9px;
        column-gap: 14px;
        align-items: center;
        margin: 0 4px;
        padding: 14px 16px;
        border-radius: 10px;
        text-align: left;
    }

    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:active {
        background: var(--zeal-plum-050);
    }

    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 3px;
    }

    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container .wp-block-navigation-item__description {
        grid-column: 1;
        grid-row: 2;
        display: block;
        font-size: 0.875rem;
        line-height: 1.5;
        color: var(--zeal-grey-600);
    }

    /* right chevron, shared by submenu rows and plain top-level items */
    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container a.wp-block-navigation-item__content::after,
    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__container > .wp-block-navigation-item:not(.has-child) > a.wp-block-navigation-item__content::after {
        content: "";
        width: 9px;
        height: 9px;
        align-self: center;
        border-right: 1.6px solid var(--zeal-plum-300);
        border-bottom: 1.6px solid var(--zeal-plum-300);
        transform: rotate(-45deg);
    }

    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container a.wp-block-navigation-item__content::after {
        grid-column: 2;
        grid-row: 1 / 3;
    }

    /* ---- plain top-level item (no children), e.g. Contact ---- */
    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__container > .wp-block-navigation-item:not(.has-child) > a.wp-block-navigation-item__content {
        display: grid;
        grid-template-columns: 1fr 9px;
        column-gap: 14px;
        align-items: center;
        height: auto;
        margin: 0 4px;
        padding: 16px;
        border-top: 1px solid var(--zeal-grey-200);
        font-family: var(--zeal-serif);
        font-weight: 700;
        font-size: 1.0625rem;
        color: var(--zeal-plum-ink) !important;
        text-align: left;
    }

    /* ---- closing footer line ---- */
    header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__container::after {
        content: "zeal — sustainable strategy since 1980";
        display: block;
        padding: 26px 20px 34px;
        text-align: center;
        font-family: var(--zeal-serif);
        font-style: italic;
        font-size: 0.78rem;
        color: var(--zeal-grey-400);
    }
}