/* ==========================================================================
   PES site-wide header — restyles the theme's existing header.php markup
   (structure/menu/offcanvas mobile nav untouched) to match the Figma "Menu"
   component: white main bar (118px) on top, dark-green reviews sub-bar
   (56px) below it. Loaded on every page (not just the two PES dev pages),
   so this file defines its own --u/tokens rather than relying on
   pes-pages.css, which only loads there. Same proportional-scaling model:
   --u is one "Figma pixel" as a share of the viewport, so calc(var(--u)*N)
   is exactly N px at the 1728px reference width and scales elsewhere,
   clamped to a sane floor for narrower desktop widths.
   ========================================================================== */

:root {
    --pes-header-u: calc(100vw / 1728);
    --pes-header-green-dark: #18453b;
    --pes-header-mint: #46d3b4;
    --pes-header-font-head: 'Optima', Georgia, serif;
    --pes-header-font-body: 'Source Sans Pro', 'Montserrat', sans-serif;
}

/* ---- main bar (Figma: "Menu", 118px, bg white, logo 152x85) ---- */

.main_toolbar,
.website_header.scrolled .main_toolbar {
    background-color: #fff;
    padding: clamp(12px, calc(var(--pes-header-u) * 16.5), 16.5px) clamp(20px, calc(var(--pes-header-u) * 50), 50px);
    /* base theme gives .secondary_toolbar z-index:99 — since it comes
       after .main_toolbar in source order, its layer painted on top of
       the nav's dropdown submenu (z-index:auto) wherever they overlapped.
       Explicitly outrank it so the menu (and its dropdowns) always sits
       above the reviews bar, not behind it. */
    position: relative;
    z-index: 100;
}

.toolbar_logo {
    left: 0;
}

.toolbar_logo img,
.website_header .toolbar_logo img {
    height: clamp(46px, calc(var(--pes-header-u) * 85), 85px);
}

.main_right {
    display: flex;
    align-items: center;
    gap: clamp(16px, calc(var(--pes-header-u) * 25), 25px);
}

.mainbar_nav ul li a {
    position: relative;
    color: var(--pes-header-green-dark);
    font-family: var(--pes-header-font-body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: 1.6px;
}

.mainbar_nav ul li a::after {
    content: '';
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 8px;
    height: 2px;
    background: var(--pes-header-mint);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

@media screen and (min-width: 75em) {
    .mainbar_nav ul li a::after {
        left: 10px;
        right: 10px;
    }
}

.mainbar_nav ul li:hover a {
    color: var(--pes-header-mint);
}

.mainbar_nav ul li:hover a::after {
    transform: scaleX(1);
}

.mainbar_nav ul li.menu-item-has-children:after {
    color: var(--pes-header-green-dark);
}

/* Both header CTAs reuse the site's real .pes-btn/.pes-btn--dark component
   (defined in pes-pages.css) rather than a one-off header style, just
   scaled down to fit the compact 118px header bar instead of .pes-btn's
   full hero-sized default (clamp(50px, .., 65px) tall, with a hover lift
   and shadow meant for open page backgrounds, not a fixed nav strip). */
.pes-header__cta-btn {
    display: none;
    flex: none;
    height: auto;
    min-width: 0;
    padding: 10px 20px;
    font-size: 1rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    box-shadow: none;
}

.pes-header__cta-btn:hover {
    box-shadow: none;
    transform: none;
}

@media print, screen and (min-width: 64em) {
    .pes-header__cta-btn {
        display: inline-flex;
    }
}

/* pre-existing gap in the base theme: the hamburger trigger hides at
   min-width:40em (640px) but .mainbar_nav doesn't take over until
   min-width:64em (1024px), leaving no navigation at all in between. Keep
   the hamburger through that range so every width has a way into the
   menu. */
@media print, screen and (min-width: 40em) and (max-width: 63.9375em) {
    #mobile_nav_trigga {
        display: inline-flex;
    }
}

/* ---- reviews sub-bar (Figma: "Sub Nav", 56px, bg #18453b) ---- */

.secondary_toolbar {
    height: clamp(44px, calc(var(--pes-header-u) * 56), 56px);
    padding: 0 clamp(20px, calc(var(--pes-header-u) * 50), 50px);
    background-color: var(--pes-header-green-dark);
    font-size: 1rem;
}

/* base theme only shows this bar at min-width:64em (see app.css) — match
   that same gate so the mobile-hidden behavior isn't accidentally undone */
@media print, screen and (min-width: 64em) {
    .secondary_toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.second_left,
.second_right {
    float: none;
    top: 0;
    display: flex;
    align-items: center;
    height: 100%;
}

.second_left {
    gap: 15px;
}

.second_right {
    gap: clamp(14px, calc(var(--pes-header-u) * 30), 30px);
}

.pes-header__pin {
    display: block;
    width: 18px;
    height: auto;
    flex: none;
}

.second_left span {
    font-family: var(--pes-header-font-head);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}

.pes-header__stars {
    display: block;
    width: clamp(90px, calc(var(--pes-header-u) * 129), 129px);
    height: auto;
    flex: none;
}

.pes-header__rating {
    font-family: var(--pes-header-font-head);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}

.pes-header__reviews-link {
    font-family: var(--pes-header-font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 2;
    text-transform: uppercase;
    color: var(--pes-header-mint) !important;
    white-space: nowrap;
    transition: opacity .2s ease;
}

.pes-header__reviews-link:hover {
    opacity: .7;
}