/**
 * Header and main navigation (GeneratePress header + GP Premium sticky nav).
 * Colors: --header-* in colors.css (white bar by default). A GP header element with "navigation colors" set
 * overrides these with its own inline CSS.
 *
 * Expected structure (GP elements in the base site):
 *   .site-header .inside-header  > .site-logo | .main-navigation | .social-icons (GP hook element after the navigation)
 *   .main-navigation .inside-navigation > .main-nav | .quick-link
 *   #mobile-header                 GP mobile header
 *   .header-info-banner            optional GB container hooked above the header
 * The off-canvas menu is styled in slideout-menu.css.
 *
 * GP Premium renames #site-navigation to #sticky-navigation when the bar
 * sticks. Link colors, the current item, sub menus and link padding list both
 * ids; the centering and the on-hero colors stay on #site-navigation only.
 *
 * Tuning: --header-menu-inset (160px) is the room kept free for the logo and
 *   the search on each side of the centered menu (from 990px).
 */

:root {
    --header-menu-inset: 160px;
}

#mobile-header {
    padding-left: var(--mobile-side-padding);
    padding-right: var(--mobile-side-padding);
    background-color: var(--header-bg-clr);
    color: var(--header-font-clr);
}

/* GP Premium wraps a merged (transparent) header and the hero in .header-wrap;
   the mobile header sits outside .site-header, so it is made transparent here. */
.header-wrap #mobile-header:not(.navigation-stick) {
    background-color: transparent;
}

#mobile-header .site-logo,
#mobile-header .menu-toggle {
    padding: 0;
    margin: 0;
}

/* Mobile header: logo left, search and menu toggle together on the right.
   The bar is space-between with three items (logo, the search modal trigger
   in .menu-bar-items, the toggle), so without this the search sits in the
   middle. */
#mobile-header .menu-bar-items {
    order: 1;
    margin-left: auto;
    margin-right: 16px;
}

#mobile-header .menu-toggle {
    order: 2;
}

/* The header paints the background; the navigation bars inside it (main and
   mobile) are transparent. A GP header element merged with the page hero
   sets .site-header transparent with a more specific rule, and the nav bars
   then stay see-through too. The sticky bar paints its own background. */
.site-header {
    background-color: var(--header-bg-clr);
    color: var(--header-font-clr);
}

.site-header .main-navigation {
    background-color: transparent;
    color: var(--header-font-clr);
}

.site-header .inside-navigation {
    width: 100%;
}

.inside-header .main-navigation {
    flex: 4;
}

.inside-header .site-logo {
    flex: 1;
}

.quick-link {
    flex: 1;
    background-color: unset;
}

/* Header merged with the page hero (GP Premium wraps it in .header-wrap):
   text and links use the on-hero colors from colors.css. The stuck bar is
   excluded: GP renames #site-navigation to #sticky-navigation and adds
   .navigation-stick, so it falls back to the normal header colors. Sub
   menus keep their own background and the normal link color. */
.header-wrap .site-header,
.header-wrap #mobile-header:not(.navigation-stick) {
    color: var(--header-on-hero-font-clr);
}

.header-wrap #site-navigation .main-nav > ul > li > a,
.header-wrap #site-navigation .quick-link a,
.header-wrap #site-navigation .menu-bar-items,
.header-wrap #mobile-header:not(.navigation-stick) .menu-toggle,
.header-wrap #mobile-header:not(.navigation-stick) .menu-bar-items,
.header-wrap .mobile-menu-control-wrapper .menu-toggle {
    color: var(--header-on-hero-link-clr);
}

.header-wrap #site-navigation .main-nav > ul > li > a:hover,
.header-wrap #site-navigation .main-nav > ul > li.current-menu-item > a,
.header-wrap #site-navigation .quick-link a:hover,
.header-wrap #site-navigation .menu-bar-item:hover > a,
.header-wrap #mobile-header:not(.navigation-stick) .menu-toggle:hover,
.header-wrap #mobile-header:not(.navigation-stick) .menu-bar-item:hover > a {
    color: var(--header-on-hero-link-hover-clr);
}

.header-wrap #site-navigation .main-nav ul li .sub-menu li a {
    color: var(--header-link-clr);
}

/* Sticky bar (GP Premium adds .navigation-stick when the nav sticks) */
.main-navigation.navigation-stick,
.site-header .main-navigation.navigation-stick,
#mobile-header.navigation-stick {
    background-color: var(--header-bg-clr);
}

.main-navigation .menu-toggle {
    font-size: 25px;
}

.main-navigation .menu-toggle:hover {
    color: var(--header-link-hover-clr);
}

.sticky-nav-scrolling-up .menu-toggle {
    color: var(--header-font-clr);
}

.sticky-nav-scrolling-up .menu-toggle:hover {
    color: var(--header-link-hover-clr);
}

/* Social icons in the header (social-icons block in a GP hook element on
   generate_after_navigation): transparent buttons in the header colors. */
.mobile-header .inside-navigation .social-icons {
    display: none;
}

.inside-header .social-icons {
    flex: 1;
    justify-content: flex-end;
    --social-icons-bg: transparent;
    --social-icons-clr: var(--header-font-clr);
    --social-icons-hover-bg: transparent;
    --social-icons-hover-clr: var(--header-link-hover-clr);
}

.header-wrap .inside-header .social-icons {
    --social-icons-clr: var(--header-on-hero-font-clr);
    --social-icons-hover-clr: var(--header-on-hero-link-hover-clr);
}

/* Info banner above the header */
.header-info-banner.color-section {
    padding: 10px 0;
    background-color: var(--bg-clr);
    color: var(--font-clr);
}

/* Quick link next to the menu */
.inside-navigation .quick-link a {
    font-size: 10px;
    margin-right: 20px;
}

@media only screen and (min-width: 768px) {
    .main-navigation.has-sticky-branding:not(.grid-container) .inside-navigation:not(.grid-container) .navigation-branding {
        margin: 0;
        padding: 0;
    }

    #mobile-header.navigation-stick.has-sticky-branding .inside-navigation.grid-container {
        padding: 0;
    }

    .mobile-header .inside-navigation .social-icons {
        display: flex;
    }
}

@media only screen and (min-width: 990px) {
    .menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }

    .site-header {
        padding-left: var(--mobile-side-padding);
        padding-right: var(--mobile-side-padding);
    }

    .site-header .inside-header {
        padding: 0;
        position: relative;
    }

    .site-header .header-image {
        height: 60px;
        width: auto;
        padding: 10px 0;
        margin: 10px 0;
    }

    .inside-header .main-navigation {
        flex: 7;
    }

    .site-header .main-nav {
        display: flex;
    }

    /* Center the menu on the header container instead of the nav's own free
       space: the logo sits outside the nav and the quick-link inside it, so
       in-flow centering is always off by the difference of the two.
       width: max-content, because an absolute box at left: 50% only gets the
       right half of the header and would wrap a longer menu; the max-width
       keeps --header-menu-inset free for the logo and the search, so a menu
       that does not fit wraps instead of covering them. Scoped to
       #site-navigation: the sticky bar keeps the menu on the right. For a
       menu on the right in the main header too, drop this rule and the
       position: static below. */
    #site-navigation .main-nav {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: max-content;
        max-width: calc(100% - 2 * var(--header-menu-inset));
    }

    /* position: static overrides GP's .inside-navigation{position:relative}
       so the absolute .main-nav centers on .inside-header. */
    #site-navigation .inside-navigation {
        justify-content: flex-end;
        position: static;
    }

    #site-navigation .main-nav > ul > li > a,
    .main-navigation .main-nav > ul > li > a {
        color: var(--header-font-clr);
        transition: color 0.3s ease;
        padding: 0 10px;
    }

    #site-navigation .main-nav ul li a:hover,
    #sticky-navigation .main-nav ul li a:hover {
        color: var(--header-link-hover-clr);
    }

    #site-navigation .main-nav ul li.current-menu-item > a,
    #sticky-navigation .main-nav ul li.current-menu-item > a {
        color: var(--header-link-hover-clr);
        text-decoration: underline;
    }

    /* Sub menu */
    #site-navigation .main-nav ul li .sub-menu li a,
    #sticky-navigation .main-nav ul li .sub-menu li a {
        background-color: var(--submenu-bg-clr);
        text-transform: none;
        font-size: 12px;
        padding: 10px 20px;
    }

    /* Sticky nav */
    #sticky-navigation {
        padding-left: var(--mobile-side-padding);
        padding-right: var(--mobile-side-padding);
    }

    #sticky-navigation .inside-navigation {
        justify-content: space-between;
        max-width: var(--container-width);
        margin: 0 auto;
    }

    #sticky-navigation .inside-navigation .main-nav {
        flex-grow: unset;
    }

    /* In the main header the search sits apart from the centered menu; in
       the sticky bar it follows the last link. */
    #sticky-navigation .menu-bar-items {
        margin-left: 16px;
    }

    .sticky-navigation-transition .navigation-branding {
        flex: 1;
        margin: 0;
        padding: 0;
    }

    .sticky-navigation-transition .main-nav {
        flex-grow: 2;
    }

    .sticky-navigation-transition .social-icons {
        flex: 1;
    }

    .inside-navigation .quick-link a {
        font-size: 12px;
        color: var(--header-link-clr);
    }

    .inside-navigation .quick-link a:hover {
        color: var(--header-link-hover-clr);
    }
}

/* The side gutter (--mobile-side-padding, 40px from here) stays on
   .site-header and #sticky-navigation; the inner bar adds none of its own. */
@media only screen and (min-width: 1280px) {
    .inside-header {
        padding-left: 0;
        padding-right: 0;
    }

    .inside-header .main-navigation {
        flex: 6;
    }

    #site-navigation .main-nav > ul > li > a,
    #sticky-navigation .main-nav > ul > li > a {
        padding: 0 20px;
    }
}