/*
 * Author: TomL
 * Date: 2026-07-07
 * Purpose: Create the Resilient Structures mega menu layout using standard WordPress menu classes.
 */

@media (min-width: 1025px) {
    /*
     * Author: TomL
     * Date: 2026-07-07
     * Purpose: Establish positioning for desktop mega menu parent items.
     */
    .header-navigation .menu > li.rs-mega-menu {
        position: relative;
    }

    /*
     * Author: TomL
     * Date: 2026-07-07
     * Purpose: Style Resilient Structures mega menu dropdown containers without forcing them open.
     */
    .header-navigation .menu > li.rs-mega-menu > ul.sub-menu {
        gap: 0;
        width: min(720px, calc(100vw - 2rem));
        padding: 0;
        overflow: hidden;
        background: #ffffff;
        border-top: 3px solid #005ea8;
        border-radius: 0.375rem;
        box-shadow: 0 1.25rem 2.5rem rgba(0, 36, 73, 0.16);
    }

    /*
     * Author: TomL
     * Date: 2026-07-07
     * Purpose: Only apply the grid layout when a mega menu is open through hover, focus, or Kadence states.
     */
    .header-navigation .menu > li.rs-mega-menu:hover > ul.sub-menu,
    .header-navigation .menu > li.rs-mega-menu:focus-within > ul.sub-menu,
    .header-navigation .menu > li.rs-mega-menu.menu-item--toggled-on > ul.sub-menu,
    .header-navigation .menu > li.rs-mega-menu.menu-item-hover > ul.sub-menu {
        display: grid;
    }

    /*
     * Author: TomL
     * Date: 2026-07-07
     * Purpose: Set the two-column mega menu structure with intro panel and link column.
     */
    .header-navigation .menu > li.rs-mega-menu.rs-mega-menu--2-col > ul.sub-menu {
        grid-template-columns: 300px minmax(320px, 1fr);
        width: min(760px, calc(100vw - 2rem));
    }

    /*
     * Author: TomL
     * Date: 2026-07-07
     * Purpose: Set the three-column mega menu structure with intro panel and two link columns.
     */
    .header-navigation .menu > li.rs-mega-menu.rs-mega-menu--3-col > ul.sub-menu {
        grid-template-columns: 300px minmax(250px, 1fr) minmax(250px, 1fr);
        width: min(960px, calc(100vw - 2rem));
    }

    /*
     * Author: TomL
     * Date: 2026-07-07
     * Purpose: Reset top-level submenu item spacing before applying the custom grid layout.
     */
    .header-navigation .menu > li.rs-mega-menu > ul.sub-menu > li.menu-item {
        width: auto;
        margin: 0;
        padding: 0;
    }

    /*
     * Author: TomL
     * Date: 2026-07-07
     * Purpose: Add spacing for standard mega menu link items.
     */
    .header-navigation .menu > li.rs-mega-menu > ul.sub-menu > li.menu-item:not(.rs-mega-menu__intro) {
        grid-column: 2;
        padding: 0.45rem 2rem;
    }

    /*
     * Author: TomL
     * Date: 2026-07-07
     * Purpose: Start the third column at the top of three-column mega menus.
     */
    .header-navigation .menu > li.rs-mega-menu.rs-mega-menu--3-col > ul.sub-menu > li.rs-mega-menu__column-break {
        grid-column: 3;
        grid-row: 1;
        padding-top: 1.55rem;
    }

    /*
     * Author: TomL
     * Date: 2026-07-07
     * Purpose: Keep all menu items after the column break in the third column.
     */
    .header-navigation .menu > li.rs-mega-menu.rs-mega-menu--3-col > ul.sub-menu > li.rs-mega-menu__column-break ~ li.menu-item {
        grid-column: 3;
    }

    /*
     * Author: TomL
     * Date: 2026-07-07
     * Purpose: Prevent CSS grid auto-placement from pushing third-column items downward.
     */
    .header-navigation .menu > li.rs-mega-menu.rs-mega-menu--3-col > ul.sub-menu > li.rs-mega-menu__column-break + li.menu-item {
        grid-row: 2;
    }

    .header-navigation .menu > li.rs-mega-menu.rs-mega-menu--3-col > ul.sub-menu > li.rs-mega-menu__column-break + li.menu-item + li.menu-item {
        grid-row: 3;
    }

    .header-navigation .menu > li.rs-mega-menu.rs-mega-menu--3-col > ul.sub-menu > li.rs-mega-menu__column-break + li.menu-item + li.menu-item + li.menu-item {
        grid-row: 4;
    }

    .header-navigation .menu > li.rs-mega-menu.rs-mega-menu--3-col > ul.sub-menu > li.rs-mega-menu__column-break + li.menu-item + li.menu-item + li.menu-item + li.menu-item {
        grid-row: 5;
    }

    /*
     * Author: TomL
     * Date: 2026-07-07
     * Purpose: Style the left intro panel inside Resilient Structures mega menus.
     */
    .header-navigation .menu > li.rs-mega-menu > ul.sub-menu > li.rs-mega-menu__intro {
        grid-column: 1;
        grid-row: 1 / span 20;
        padding: 2rem 1.75rem;
        background: #f8fafc;
        border-right: 1px solid rgba(0, 36, 73, 0.1);
    }

    /*
     * Author: TomL
     * Date: 2026-07-07
     * Purpose: Style the clickable intro panel for Resilient Structures mega menus.
     */
    .header-navigation .menu > li.rs-mega-menu > ul.sub-menu > li.rs-mega-menu__intro > a,
    .header-navigation .menu > li.rs-mega-menu > ul.sub-menu > li.rs-mega-menu__intro > a:hover,
    .header-navigation .menu > li.rs-mega-menu > ul.sub-menu > li.rs-mega-menu__intro > a:focus {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        height: 100%;
        padding: 0;
        color: #002449;
        text-decoration: none;
        white-space: normal;
        background: transparent;
    }

    /*
     * Author: TomL
     * Date: 2026-07-07
     * Purpose: Stack the generated intro title, description, and CTA.
     */
    .header-navigation .rs-mega-menu__intro-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        height: 100%;
    }

    /*
     * Author: TomL
     * Date: 2026-07-07
     * Purpose: Style the intro panel title.
     */
    .header-navigation .rs-mega-menu__intro-title {
        display: block;
        margin-bottom: 0.85rem;
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 1.25;
        color: #002449;
    }

    /*
     * Author: TomL
     * Date: 2026-07-07
     * Purpose: Style the intro panel description.
     */
    .header-navigation .rs-mega-menu__intro-description {
        display: block;
        max-width: 13.5rem;
        margin-bottom: 2rem;
        font-size: 0.95rem;
        font-weight: 400;
        line-height: 1.55;
        color: #334155;
    }

    /*
     * Author: TomL
     * Date: 2026-07-07
     * Purpose: Style the intro panel CTA link text.
     */
    .header-navigation .rs-mega-menu__intro-cta {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: auto;
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1.2;
        color: #005ea8;
    }

    /*
     * Author: TomL
     * Date: 2026-07-07
     * Purpose: Animate the intro CTA arrow when the intro panel link is hovered or focused.
     */
    .header-navigation .rs-mega-menu__intro-cta-arrow {
        line-height: 1;
        transition: transform 0.2s ease-in-out;
    }

    .header-navigation .menu > li.rs-mega-menu > ul.sub-menu > li.rs-mega-menu__intro > a:hover .rs-mega-menu__intro-cta-arrow,
    .header-navigation .menu > li.rs-mega-menu > ul.sub-menu > li.rs-mega-menu__intro > a:focus .rs-mega-menu__intro-cta-arrow {
        transform: translateX(3px);
    }

    /*
     * Author: TomL
     * Date: 2026-07-07
     * Purpose: Style standard mega menu links to match the Resilient Structures prototype.
     */
    .header-navigation .menu > li.rs-mega-menu > ul.sub-menu > li.rs-mega-menu__item > a {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 3rem;
        padding: 0.35rem 0;
        font-size: .95rem;
        font-weight: 700;
        line-height: 1.25;
        color: #002449;
        text-decoration: none;
        white-space: nowrap;
    }

    /*
     * Author: TomL
     * Date: 2026-07-07
     * Purpose: Add the hover and focus treatment for standard mega menu links.
     */
    .header-navigation .menu > li.rs-mega-menu > ul.sub-menu > li.rs-mega-menu__item > a:hover,
    .header-navigation .menu > li.rs-mega-menu > ul.sub-menu > li.rs-mega-menu__item > a:focus {
        color: #005ea8;
    }

    /*
     * Author: TomL
     * Date: 2026-07-07
     * Purpose: Add top and bottom breathing room to the first and last visible link items.
     */
    .header-navigation .menu > li.rs-mega-menu > ul.sub-menu > li.rs-mega-menu__intro + li.rs-mega-menu__item {
        padding-top: 1.55rem;
    }

/*     .header-navigation .menu > li.rs-mega-menu > ul.sub-menu > li.rs-mega-menu__item:last-child {
        padding-bottom: 1.55rem;
    } */

    /*
     * Author: TomL
     * Date: 2026-07-07
     * Purpose: Preserve clear keyboard focus indicators inside Resilient Structures mega menus.
     */
    .header-navigation .menu > li.rs-mega-menu > ul.sub-menu a:focus-visible {
        outline: 2px solid #005ea8;
        outline-offset: 3px;
        border-radius: 0.25rem;
    }
}

/*
 * Author: TomL
 * Date: 2026-07-07
 * Purpose: Keep mobile and tablet menus simple so Kadence can handle the collapsed navigation.
 */
@media (max-width: 1024px) {
    .header-navigation .menu > li.rs-mega-menu > ul.sub-menu {
        display: block;
        width: auto;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    .header-navigation .menu > li.rs-mega-menu > ul.sub-menu > li.rs-mega-menu__intro {
        padding: 0;
        background: transparent;
        border-right: 0;
    }

    .header-navigation .rs-mega-menu__intro-description,
    .header-navigation .rs-mega-menu__intro-cta {
        display: none;
    }
    /*
 * Author: TomL
 * Date: 2026-07-07
 * Purpose: Style Resilient Structures mobile menu submenus for clearer hierarchy.
 */
    @media (max-width: 1024px) {
        .mobile-navigation .menu > li.rs-mega-menu > ul.sub-menu,
        .header-navigation .menu > li.rs-mega-menu > ul.sub-menu {
            background: #f8fafc;
            border-top: 1px solid rgba(0, 36, 73, 0.14);
            border-bottom: 1px solid rgba(0, 36, 73, 0.14);
        }

        .mobile-navigation .menu > li.rs-mega-menu > ul.sub-menu > li,
        .header-navigation .menu > li.rs-mega-menu > ul.sub-menu > li {
            border-bottom: 1px solid rgba(0, 36, 73, 0.12);
        }

        .mobile-navigation .menu > li.rs-mega-menu > ul.sub-menu > li:last-child,
        .header-navigation .menu > li.rs-mega-menu > ul.sub-menu > li:last-child {
            border-bottom: 0;
        }

        .mobile-navigation .menu > li.rs-mega-menu > ul.sub-menu > li > a,
        .header-navigation .menu > li.rs-mega-menu > ul.sub-menu > li > a {
            padding: 0.85rem 1rem;
            color: #002449;
            text-decoration: none;
        }

        .mobile-navigation .menu > li.rs-mega-menu > ul.sub-menu > li.rs-mega-menu__intro > a,
        .header-navigation .menu > li.rs-mega-menu > ul.sub-menu > li.rs-mega-menu__intro > a {
            display: block;
            padding: 1rem;
            background: #ffffff;
        }

        .mobile-navigation .rs-mega-menu__intro-content,
        .header-navigation .rs-mega-menu__intro-content {
            display: block;
        }

        .mobile-navigation .rs-mega-menu__intro-title,
        .header-navigation .rs-mega-menu__intro-title {
            display: block;
            margin-bottom: 0.35rem;
            font-weight: 700;
            color: #002449;
        }

        .mobile-navigation .rs-mega-menu__intro-description,
        .header-navigation .rs-mega-menu__intro-description {
            display: block;
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
            line-height: 1.45;
            color: #334155;
        }

        .mobile-navigation .rs-mega-menu__intro-cta,
        .header-navigation .rs-mega-menu__intro-cta {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.95rem;
            font-weight: 700;
            color: #005ea8;
        }

        .mobile-navigation .menu a:focus-visible,
        .mobile-navigation .dropdown-nav-special-toggle:focus-visible,
        .header-navigation .menu a:focus-visible,
        .header-navigation .dropdown-nav-special-toggle:focus-visible {
            outline: 2px solid #005ea8;
            outline-offset: 3px;
        }
    }
}