/*
 * Navigation — multi-column dropdowns.
 *
 * Add the class `nav-columns` to a top-level menu item in Appearance → Menus
 * (the "CSS Classes" box, switched on under Screen Options) and its dropdown
 * becomes a panel running the full width of the screen.
 *
 * The second level then sets the columns — one column per item, each acting as
 * that column's heading — and anything nested a third level deep is listed
 * underneath its heading. Columns are equal width and share the site
 * container — its right-hand two thirds from 1280px up — so the editor decides
 * both how many there are and what goes in each one.
 *
 * Hand-written rather than added to resources/css/custom.css: the container
 * maths below can't be expressed with @apply, and being enqueued after
 * css/app.css lets it override the single-column dropdown rules in there.
 */

@media (min-width: 960px) {

    /* Static, so the panel is positioned against <header> — which spans the
       screen — instead of against the menu item it hangs off. */
    #primary-menu li.menu-item-has-children.nav-columns {
        position: static;
    }

    #primary-menu li.menu-item-has-children.nav-columns > ul.sub-menu {
        /* Matches the Tailwind container's max-width at this breakpoint. */
        --nav-container: 960px;
        --nav-gutter: max(2rem, calc((100% - var(--nav-container)) / 2 + 2rem));
        /* The container's own width, once the gutters either side are taken
           off — i.e. what the page content lines up with. */
        --nav-inner: calc(100% - 2 * var(--nav-gutter));

        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        border-radius: 0;

        /* Blue runs to both edges of the screen; the columns start where the
           page container starts. */
        padding: 2rem var(--nav-gutter);

        align-items: flex-start;
        gap: 2rem;
    }

    /* Only the display switch belongs on :hover — everything above is geometry
       that would otherwise override the ul.sub-menu { display: none } default
       and leave the panel on screen permanently. */
    #primary-menu li.menu-item-has-children.nav-columns:hover > ul.sub-menu {
        display: flex;
    }

    /* Second level — one equal-width column each. */
    #primary-menu li.nav-columns > ul.sub-menu > li {
        flex: 1 1 0;
        min-width: 0;

        /* Undo the flyout scaffolding the generic dropdown rules add to any
           item with children. */
        position: static;
        margin: 0;
        padding-bottom: 0;
    }

    #primary-menu li.nav-columns > ul.sub-menu > li > a {
        display: block;
        margin-bottom: 0.75rem;
    }

    /* Third level — a plain list under its heading rather than a flyout. */
    #primary-menu li.nav-columns > ul.sub-menu > li > ul.sub-menu,
    #primary-menu li.nav-columns > ul.sub-menu > li:hover > ul.sub-menu {
        display: block;
        position: static;
        width: auto;
        padding: 0;
        background: none;
        border-radius: 0;
    }

    #primary-menu li.nav-columns > ul.sub-menu > li > ul.sub-menu > li {
        margin: 0;
        padding: 0.375rem 0;
    }
}

@media (min-width: 1280px) {
    #primary-menu li.menu-item-has-children.nav-columns > ul.sub-menu {
        --nav-container: 1280px;

        /* From here on the container is wide enough that filling it leaves the
           columns looking oversized, so they take its right-hand two thirds
           instead: they still end where the container ends — under the right of
           the menu — and the spare third is absorbed as space on the left.
           Below this width the columns keep the whole container, which a
           four-column menu needs to stay readable. */
        padding-left: calc(var(--nav-gutter) + var(--nav-inner) / 3);
    }
}

@media (min-width: 1440px) {
    #primary-menu li.menu-item-has-children.nav-columns > ul.sub-menu {
        --nav-container: 1440px;
    }
}

@media (max-width: 960px) {
    /* The 50px hover bridge on li.menu-item-has-children is meant for the
       desktop flyouts, but it isn't scoped to them, so on the mobile accordion
       a sub-menu item with children overlaps the item below it by 50px. Only
       bites now that dropdowns can go three levels deep. */
    #primary-menu ul.sub-menu li.menu-item-has-children {
        position: static;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    /* The open panel ended flush with its last item, so the Donate button sat
       hard against the edge with the page showing through beneath it. */
    #primary-menu.active {
        padding-bottom: 1.5rem;
    }

    /* The navy panel and its white text were both hung off the .activated
       class the accordion script adds and removes as you drill in and back
       out, so a sub-menu could end up white on white. Set them outright. */
    #primary-menu.active ul.sub-menu {
        background-color: #00124D;
    }

    #primary-menu.active ul.sub-menu li,
    #primary-menu.active ul.sub-menu a {
        color: #fff;
    }

    /* The pink Donate item is a button, but the accordion lays every link out
       with its label pushed to one edge, and the button's left padding is
       stripped at this width, so the text sat hard against the left of the
       pill. `inner-bg-pink` is the class the site uses to make a menu item a
       button; `donate` is the theme's own name for the same thing. */
    #primary-menu.active > div > ul > li.inner-bg-pink > a,
    #primary-menu.active > div > ul > li.donate > a {
        justify-content: center;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* The drill-down arrows are drawn navy, which that panel swallows. */
    #primary-menu.active ul.sub-menu .mobile-nav-arrow svg path {
        fill: #fff;
    }
}