/* ------------------------------ */
/* Global Site Header
/* ------------------------------ */

.devon__site-header {

    /* Utility links: search, login, calendar, etc */
    /* "Floats" visually in the blue area */
    .devon__site-header__utility {
        color: var(--wp--custom--color-primitives--white);
        padding: var(--wp--preset--spacing--small) var(--wp--custom--layout--root-padding);

        & ul.wp-block-navigation__container {
            gap: var(--wp--preset--spacing--base);
        }

        & a {
            color: var(--wp--custom--color-primitives--white);
            display: inline-block;
            padding: var(--wp--preset--spacing--small);
            &:hover,
            &:active,
            &:focus,
            &:focus-visible {
                text-decoration: underline;
            }
        }

        /* Search form & button */
        & form.wp-block-search {
            flex: max-content;
            .wp-block-search__inside-wrapper {
                align-items: center;
                justify-content: flex-end;
            }
        }
        .wp-element-button.wp-block-search__button {
            padding: var(--wp--preset--spacing--small);
            padding-left: var(--wp--preset--spacing--three-x-large-static);
            border: 0;
            color: var(--wp--custom--color-primitives--white);
            font-family: var(--wp--preset--font-family--cochin);
            font-size: var(--wp--preset--font-size--base);
            background-color: transparent;
            background-image: url(/wp-content/themes/devon-prep/assets/icons/search-white.svg);
            background-position: var(--wp--preset--spacing--small) center;
            background-repeat: no-repeat;
            &:hover,
            &:active,
            &:focus,
            &:focus-visible {
                text-decoration: underline;
            }
        }
    }

    /* Logo + Main Navigation area */
    .devon__site-header__logo-main-nav {
        background-color: var(--wp--custom--color-primitives--white);
        margin-block-start: 0;
        padding: var(--wp--preset--spacing--base) var(--wp--custom--layout--root-padding);
        justify-content: space-between;

        /* Logo */
        .wp-block-image {
            max-width: 9.375rem;
        }

        /* Main nav links */
        .wp-block-navigation {
            & ul.wp-block-navigation__container {
                gap: var(--wp--preset--spacing--base);
            }

            & a,
            & button.wp-block-navigation-item__content {
                display: inline-block;
                padding: var(--wp--preset--spacing--small);
                font-size: var(--wp--preset--font-size--medium);
            }
        }

        /* ------------------------------ */
        /* Global Nav Mobile Overlay
        /* ------------------------------ */

        .wp-block-navigation__overlay-container {
            min-height: 100vh;
            background-color: var(--wp--custom--color-primitives--blue-dark-muted);
            background-image: url(/wp-content/themes/devon-prep/assets/images/texture-mobile-nav-plaid.svg);
            background-position: bottom center;
            background-repeat: no-repeat;
            background-size: contain;
            color: var(--wp--custom--color-primitives--white);
            padding-top: var(--wp--preset--spacing--two-x-large);
            padding-bottom: var(--wp--preset--spacing--five-x-large);
            padding-right: var(--wp--preset--spacing--base);
            padding-left: var(--wp--preset--spacing--base);

            & a {
                /* _Why aren't you white?_
                /* Only the main nav links are white, and the "utility" area is
                /* designed to hold any number of nav blocks, which are yellow. So we
                /* set yellow as the default and vary on the Main Nav instead. */
                color: var(--wp--custom--color-primitives--bright-yellow);
            }

            /* Close Button */
            .wp-block-navigation-overlay-close {
                color: var(--wp--custom--color-primitives--white);
                align-self: flex-end;
            }

            /* Search inside the overlay */
            .wp-block-search {
                width: 100%;
                .wp-block-search__input {
                    background-image: url(/wp-content/themes/devon-prep/assets/icons/search-blue-primary.svg);
                    background-position: var(--wp--preset--spacing--small) center;
                    background-repeat: no-repeat;
                    padding: var(--wp--preset--spacing--base);
                    padding-left: var(--wp--preset--spacing--three-x-large-static);
                }
            }

            /* Top-level navigation items */
            .wp-block-navigation {
                width: 100%;
                & ul.wp-block-navigation__container {
                    gap: 0;
                    flex-flow: column nowrap;
                    & li.wp-block-navigation-item {
                        width: 100%;
                        align-items: flex-start;
                    }
                }
                & > ul > li {
                    border-bottom: var(--wp--custom--border-width--thin) var(--wp--custom--color-primitives--bright-yellow) solid;
                }
                &.devon__navigation-overlay__main-nav {
                    & > ul > li {
                        border-color: var(--wp--custom--color-primitives--white);
                        &:last-child {
                            border-bottom: 0;
                        }
                    }
                    & a {
                        padding: var(--wp--preset--spacing--base) 0;
                        color: var(--wp--custom--color-primitives--white);
                    }
                }
            }

            /* Any secondary menus in the overlay (currently, utility and action navs).
            /* These are wrapped in a no-block-gap group to appear visually as one list,
            /* but live in the DB as separate navs, since the action links only appear in the overlay. */
            .devon__navigation-overlay__utility-container {
                width: 100%;
                .wp-block-navigation:last-child ul li:last-child {
                    border: 0;
                }
            }

            /* Submenu Toggle Button */
            .wp-block-navigation-submenu__toggle {
                flex-grow: 1;
                height: 1em;
                width: 1em;
                text-align: right;
            }

            /* Submenus */
            .has-child {
                /* Let the submenu wrap to its own full row below the parent link & icon. */
                flex-flow: row wrap;

                /* Highlight the parent + icon if a submenu is open. */
                &:has(button[aria-expanded="true"]) {
                    & > a.wp-block-navigation-item__content,
                    &> button {
                        color: var(--wp--custom--color-primitives--bright-yellow);
                    }
                }
                /* Style the submenu itself (mostly override WP defaults) */
                .wp-block-navigation__submenu-container {
                    position: static;
                    width: 100%;
                    background-color: transparent;
                    border: 0;
                    & li {
                        &:last-child {
                            margin-bottom: var(--wp--preset--spacing--four-x-large);
                        }
                        & a {
                            padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--large);
                            font-size: var(--wp--preset--font-size--base);
                        }
                    }
                }
            }
        }
    }
}
/* Mobile behavior for Header/Main Nav:
/* - Prevent the nav list from wrapping until tablet-range.
/* - Center all content in the "midrange"  */
@media (600px <= width <= 1100px) {
    .devon__site-header .devon__site-header__logo-main-nav {
        flex-flow: column nowrap;

        .wp-block-navigation {
            & ul.wp-block-navigation__container {
                flex-flow: row nowrap;
            }
        }
    }
}
@media (600px <= width <= 800px) {
    .devon__site-header .devon__site-header__logo-main-nav .wp-block-navigation {
        & ul.wp-block-navigation__container {
            flex-flow: row wrap;
            justify-content: center;
        }
    }
}

/* Hide search in the utility nav once hamburger engages.
/* A search field is inside the overlay.  */
@media (width < 600px) {
    .devon__site-header .devon__site-header__utility {
        & > * {
            display: none;
        }
    }
}


/* ------------------------------ */
/* Global Site Footer
/* ------------------------------ */

.devon__site-footer {
    .devon__site-footer__grid {
        border-top: var(--wp--custom--color-primitives--blue-primary) var(--wp--custom--border-width--thin) solid;
        background-color: var(--wp--custom--color-primitives--white);
        background-image: url(/wp-content/themes/devon-prep/assets/images/texture-seal-footer.svg);
        background-repeat: no-repeat;
        background-position: center right;
        background-size: contain;
        padding-top: var(--wp--preset--spacing--five-x-large);
        padding-bottom: var(--wp--preset--spacing--six-x-large);
        padding-left: var(--wp--custom--layout--root-padding);
        padding-right: var(--wp--custom--layout--root-padding);

        .devon__site-footer__logo {
            max-width: 20rem;
            grid-column: span 12;
        }

        .wp-block-group:nth-child(2) {
            grid-column: span 4;
        }

        .wp-block-navigation {
            grid-column: span 3;
            font-family: var(--wp--preset--font-family--factoria);
            font-size: var(--wp--preset--font-size--alternate-extra-large);
            gap: var(--wp--preset--spacing--base);
            a {
                text-decoration: underline;
                color: var(--wp--custom--color-semantic--link--text);
                &:hover {
                    color: var(--wp--custom--color-semantic--link--hover);
                }
                &:active {
                    color: var(--wp--custom--color-semantic--link--active);
                }
                &:focus,
                &:focus-visible {
                    color: var(--wp--custom--color-semantic--link--focus);
                }
            }
        }
    }
    .devon__site-footer__copyright {
        background-color: var(--wp--custom--color-primitives--blue-secondary);
        padding: var(--wp--preset--spacing--two-x-large) var(--wp--custom--layout--root-padding);
        margin-block-start: 0;
        border-bottom: var(--wp--custom--color-primitives--blue-primary) var(--wp--preset--spacing--extra-large) solid;
    }
}

@media (1000px <= width <= 1300px) {
    .devon__site-footer .devon__site-footer__grid {
        .wp-block-group:nth-child(2) {
            grid-column: span 3;
        }
        .wp-block-navigation {
            font-size: var(--wp--preset--font-size--base);
        }
    }
}

@media (width < 1000px) {
    .devon__site-footer {
        .devon__site-footer__grid {
            background-image: none;

            .wp-block-group:nth-child(2),
            .wp-block-navigation {
                grid-column: span 12;
            }

            nav.wp-block-navigation:first-of-type {
                margin-top: var(--wp--preset--spacing--four-x-large);
            }
        }
    }
}