/* ─── Aspen header ───
 * A primary utility bar (service area, phone, email; hidden below 641px) over one white row: logo, the nav and the
 * primary CTA. The whole bar is sticky with a negative top equal to the utility height, so the utility bar scrolls
 * away and the row stays. assets/main.js measures the row into --aspen-nav-row-height for sticky page elements.
 * Below 1080px the row shows an outline call button and the primary menu button.
 */
:root {
    --aspen-utility-height: 44px;
    --aspen-pinstripe-height: 0px;
    --aspen-header-offset: var(--ocf-header-height);
    --aspen-sticky-top: calc(var(--wp-admin-bar-offset) + var(--aspen-nav-row-height, var(--ocf-header-height)) + var(--ocf-grid-gap) * 1.5);
    --aspen-row-pad: clamp(20px, 5.2vw, 64px);
}

@media (max-width: 1023px) { :root { --aspen-utility-height: 40px; } }
@media (max-width: 640px) { :root { --aspen-utility-height: 0px; } }

.nav-bar {
    position: sticky;
    top: calc(var(--wp-admin-bar-offset) - var(--aspen-utility-height));
    z-index: 100;
    background: var(--ocf-bg);
    color: var(--ocf-heading);
}

.aspen-utility {
    height: var(--aspen-utility-height);
    background: var(--ocf-primary);
    color: var(--ocf-primary-contrast);
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    overflow: hidden;
}

.aspen-utility__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    height: 100%;
    padding-inline: var(--aspen-row-pad);
    white-space: nowrap;
}

.aspen-utility__inner > * { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.aspen-utility__inner > * > span { color: inherit; }
.aspen-utility svg { width: 16px; height: 16px; flex: none; }
.aspen-utility a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

@media (max-width: 1023px) { .aspen-utility { font-size: 14px; } .aspen-utility__inner { gap: 28px; } }
@media (max-width: 640px) { .aspen-utility { display: none; } }

.aspen-nav-row {
    border-bottom: var(--card-border-width) solid var(--ocf-border-light);
    background: var(--ocf-bg);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    min-height: var(--ocf-header-height);
    padding-inline: var(--aspen-row-pad);
}

.nav-logo { flex: 0 0 auto; display: flex; align-items: center; }
.nav-logo-img { width: var(--ocf-logo-width); height: var(--ocf-logo-height); object-fit: contain; object-position: left center; }

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(22px, 2.4vw, 34px);
    font-family: var(--ocf-font-body), system-ui, sans-serif;
    font-size: 17px;
    font-weight: var(--font-weight-medium);
    color: var(--ocf-heading);
}

.nav-link,
.nav-dropdown-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 0;
    background: none;
    border: 0;
    color: inherit;
    white-space: nowrap;
}

.nav-dropdown-trigger svg { width: 14px; height: 14px; stroke-width: 2.4; }

/* Hover and the current page only change the link color: no underline bar (Bennett, 10-31). */
.nav-links .nav-link:hover,
.nav-links .nav-dropdown-trigger:hover,
.nav-links [aria-current="page"] { color: var(--ocf-link); }

/* Desktop dropdown: a soft white card, two columns of links. */
.nav-dropdown { position: relative; }

.nav-dropdown-panel {
    position: absolute;
    top: 100%;
    left: -24px;
    display: block;
    width: var(--ocf-nav-dropdown-width);
    padding: 18px;
    border: var(--card-border-width) solid var(--ocf-border-light);
    border-radius: var(--card-radius);
    background: var(--ocf-bg);
    color: var(--ocf-heading);
    box-shadow: 0 24px 48px var(--aspen-shadow);
    opacity: 0;
    visibility: hidden;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
}

.nav-dropdown:focus-within > .nav-dropdown-panel { opacity: 1; visibility: visible; }

.nav-dropdown-panel .dropdown-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
}

.nav-dropdown-panel a {
    display: block;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
}

.nav-dropdown-panel a:hover { background: var(--aspen-bg-alt); color: var(--ocf-link); }

.nav-dropdown-panel > a.dropdown-item {
    margin-top: 8px;
    padding-top: 14px;
    border-top: var(--card-border-width) solid var(--ocf-border-light);
    border-radius: 0;
    color: var(--ocf-link);
    font-weight: var(--font-weight-semibold);
}

.dropdown-item-icon { display: none; }

.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-right .nav-cta { white-space: nowrap; }

/* Square icon buttons (call, menu) below 1080px. */
.nav-right .nav-phone,
.nav-mobile-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: var(--button-radius);
}

.nav-right .nav-phone svg { width: 20px; height: 20px; }

.nav-mobile-btn {
    border: var(--button-border-width) solid var(--ocf-primary);
    background: var(--ocf-primary);
    color: var(--ocf-primary-contrast);
}

.nav-mobile-btn:hover,
.nav-mobile-btn[aria-expanded="true"] { background: var(--ocf-primary-hover); border-color: var(--ocf-primary-hover); }

.mobile-menu { display: none; }

/* Fit: assets/main.js adds .aspen-nav-compact when the row overflows (long labels, wide customer fonts) — tighter
 * nav — then .aspen-nav-tight (smaller CTA), then .aspen-nav-collapsed, which switches to the menu button.
 * The width breakpoints below are the no-JS fallback. */
.aspen-nav-compact .nav-inner { gap: 20px; }
.aspen-nav-compact .nav-links { gap: 20px; font-size: 16px; }
.aspen-nav-tight .nav-right .nav-cta { padding-inline: 16px; }

.aspen-nav-collapsed .nav-links,
.aspen-nav-collapsed .nav-right .nav-cta { display: none; }
.aspen-nav-collapsed .nav-mobile-btn,
.aspen-nav-collapsed .nav-right .nav-phone { display: inline-flex; }

@media (max-width: 1080px) {
    .nav-inner { min-height: 84px; gap: 16px; }
    .nav-links,
    .nav-right .nav-cta { display: none; }
    .nav-mobile-btn,
    .nav-right .nav-phone { display: inline-flex; }
}

@media (max-width: 640px) {
    .nav-inner { min-height: var(--ocf-header-height-mobile); }
    .nav-logo-img { width: var(--ocf-logo-width-mobile); height: var(--ocf-logo-height-mobile); }
}

/* The open menu (base.js toggles an inline display) never shows while the full nav row is visible. */
@media (min-width: 1081px) {
    html:not(.aspen-nav-collapsed) .mobile-menu { display: none !important; }
}

/* Mobile menu panel (only visible once opened). */
.mobile-menu.is-open,
.mobile-menu.open { display: block; }
.mobile-menu {
    border-bottom: var(--card-border-width) solid var(--ocf-border-light);
    background: var(--ocf-bg);
    box-shadow: 0 24px 40px var(--aspen-shadow);
    max-height: calc(100dvh - var(--aspen-nav-row-height, var(--ocf-header-height-mobile)) - var(--wp-admin-bar-offset, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
}
.mobile-menu-inner { padding: 8px var(--container-pad) 24px; }
.mobile-menu a,
.mobile-accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 0;
    border: 0;
    border-bottom: var(--card-border-width) solid var(--ocf-border-light);
    background: none;
    color: var(--ocf-heading);
    font-family: var(--ocf-font-body), system-ui, sans-serif;
    font-size: 18px;
    font-weight: var(--font-weight-medium);
}
.mobile-menu svg { width: 16px; height: 16px; }
.mobile-accordion-panel { display: none; padding-left: 16px; }
.mobile-accordion-panel a { font-size: 16px; color: var(--ocf-body); }
.mobile-actions { display: grid; gap: 12px; margin-top: 20px; }
.mobile-menu .mobile-cta,
.mobile-menu .mobile-phone {
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    border: var(--button-border-width) solid var(--ocf-heading);
    border-radius: var(--button-radius);
    background: transparent;
    font-weight: var(--font-weight-semibold);
}
.mobile-menu .mobile-cta { border-color: var(--ocf-primary); background: var(--ocf-primary); color: var(--ocf-primary-contrast); }
.mobile-menu .mobile-cta span { color: inherit; }