/*
 * Compact header for Default Template pages that opt in.
 *
 * The standard header is two rows — the logo bar and .pdr-header-nav below it.
 * Here the logo bar is not rendered at all (see inc/templates/page-header.php)
 * and .pdr-header-nav becomes the whole header: one fixed 58px row holding the
 * logo, the same navigation, and an optional CTA button.
 *
 * Only overrides of header.css live here; everything not restated below — the
 * mega menus, the mobile panel, the hamburger animation — is inherited.
 */

/*
 * 58px, and the body reserves exactly that. .pdr-container fills the height
 * rather than setting its own so the two numbers cannot drift apart.
 *
 * header.css gives .pdr-header-nav a white top border to separate it from the
 * logo bar above. There is nothing above it here, so it would just be a stray
 * line along the top of the viewport.
 */
.pdr-header-nav-compact {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 58px;
    border-top: 0;
}

body.pdr-has-compact-header {
    padding-top: 58px !important;
}

/*
 * 1225px is what the navigation needs when it has the row to itself. Here it
 * shares the row with the logo and the CTA, so the row takes what the screen
 * gives it.
 */
.pdr-header-nav-compact .pdr-container {
    box-sizing: border-box;
    max-width: 1650px;
    height: 100%;
    padding: 0 25px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.pdr-header-nav-compact .pdr-header-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* 225px is sized for the logo bar's own row; too wide to sit beside the menu. */
.pdr-header-nav-compact .pdr-header-logo img {
    width: 155px;
}

/*
 * The back arrow swaps in for the logo inside the mobile menu (header-footer.js
 * fades one out and the other in). header.css offsets it upwards to centre it
 * in the taller logo bar, which would push it out of this row.
 */
.pdr-header-nav-compact .pdr-nav-back {
    top: 50%;
    transform: translateY(-50%);
}

/*
 * On its own row the menu is the full width of the container. Here it shares
 * the row with the logo and the CTA, so it takes whatever is left over and the
 * items stretch across that, at the same size they are everywhere else.
 */
.pdr-header-nav-compact .pdr-main-nav {
    width: auto;
    flex: 1 1 auto;
}

/* The links are 50px on the standard header; here they fill the 58px row so
 * the hover and active background covers it. */
.pdr-header-nav-compact .pdr-main-nav > li > a {
    height: 58px;
}

/* Room for the dropdown chevron, which is not part of the label's own width. */
.pdr-header-nav-compact .pdr-main-nav .pdr-has-dropdown span {
    padding-right: 18px;
}

.pdr-header-nav-cta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 22px;
    border-radius: 24px;
    background: #00ad3c;
    color: #fff;
    font-family: "Gotham", sans-serif;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.pdr-header-nav-cta:hover {
    background: #231f20;
    color: #fdd700;
}

/*
 * Below this the six labels no longer fit beside the logo and the button, so
 * the row hands over to the hamburger and the existing mobile panel. The
 * standard header only does this at 992px because its menu has a row to
 * itself. This is the same breakpoint the festival header switches at.
 */
@media only screen and (max-width: 1399px) {

    .pdr-header-nav-compact .pdr-main-nav {
        display: none;
    }

    .pdr-header-nav-compact .pdr-mobile-menu-open {
        display: block;
    }

    /* With the menu gone the button would drift to the middle of the row. */
    .pdr-header-nav-compact .pdr-header-nav-cta {
        margin-left: auto;
    }

    /*
     * The panel is only fixed below 992px, where it hangs under the 90px logo
     * bar. It has to overlay the page from this width down, under this row.
     */
    body.pdr-has-compact-header .pdr-header-nav-mobile {
        position: fixed;
        top: 58px;
        height: calc(100% - 58px);
        z-index: 20;
    }

}

/* header.css hides .pdr-header-nav here; there is no logo bar to replace it. */
@media only screen and (max-width: 992px) {

    .pdr-header-nav-compact {
        display: block;
    }

    body.pdr-has-compact-header {
        padding-top: 58px !important;
    }

}

@media only screen and (max-width: 767px) {

    .pdr-header-nav-compact .pdr-header-logo img {
        width: 45px;
    }

    .pdr-header-nav-cta {
        height: 32px;
        padding: 0 14px;
        font-size: 13px;
    }

}