/* ─── Cardinal header ───
 * One sticky row on the page background: logo, condensed uppercase nav, outline CTA + solid call button,
 * then the three-line pinstripe (primary / page / heading). assets/main.js measures the row height into
 * --cardinal-nav-row-height so sticky page elements sit exactly below it.
 */
:root {
    --cardinal-utility-height: 0px;
    --cardinal-pinstripe-height: calc(var(--card-border-width) * 6.667);
    --cardinal-header-offset: calc(var(--ocf-header-height) + var(--cardinal-pinstripe-height));
    --cardinal-sticky-top: calc(var(--wp-admin-bar-offset) + var(--cardinal-nav-row-height, var(--ocf-header-height)) + var(--cardinal-pinstripe-height) + var(--ocf-grid-gap) * 1.5);
}

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

.nav-inner {
    display: flex;
    align-items: center;
    gap: calc(var(--ocf-grid-gap) * 1.333);
    min-height: var(--ocf-header-height);
}

.nav-logo { flex: 0 0 var(--ocf-logo-width); }
.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(calc(var(--ocf-grid-gap) * 0.75), 2.2vw, calc(var(--ocf-grid-gap) * 1.333));
    margin-inline: auto;
    font-family: var(--ocf-font-heading), system-ui, sans-serif;
    font-size: var(--cardinal-label-size);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.nav-link,
.nav-dropdown-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--ocf-space-unit) * 0.375);
    padding: calc(var(--ocf-grid-gap) * 0.75) 0;
    background: none;
    border: 0;
    color: inherit;
    white-space: nowrap;
}

.nav-dropdown-trigger svg { width: calc(var(--ocf-space-unit) * 0.75); height: calc(var(--ocf-space-unit) * 0.75); }

.nav-links .nav-link::after,
.nav-links .nav-dropdown-trigger::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: calc(var(--ocf-grid-gap) * 0.4);
    left: 0;
    height: calc(var(--card-border-width) * 2);
    background: var(--ocf-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration) var(--ease);
}

.nav-links .nav-link:hover,
.nav-links .nav-dropdown-trigger:hover,
.nav-links [aria-current="page"] { color: var(--ocf-link); }

.nav-links .nav-link:hover::after,
.nav-links .nav-dropdown-trigger:hover::after,
.nav-links [aria-current="page"]::after { transform: scaleX(1); }

/* Desktop dropdown: page-colored panel with a heading-colored frame, two columns of links. */
.nav-dropdown { position: relative; }

.nav-dropdown-panel {
    position: absolute;
    top: 100%;
    left: calc(var(--ocf-grid-gap) * -1);
    display: block;
    width: var(--ocf-nav-dropdown-width);
    padding: var(--ocf-grid-gap);
    border: calc(var(--card-border-width) * 1.333) solid var(--ocf-heading);
    background: var(--ocf-bg);
    color: var(--ocf-heading);
    box-shadow: 0 18px 34px -22px color-mix(in srgb, var(--ocf-heading) 45%, transparent);
    opacity: 0;
    visibility: hidden;
    font-family: var(--ocf-font-body), system-ui, sans-serif;
    font-size: var(--ocf-font-body-size);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0;
    text-transform: none;
}

.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: calc(var(--ocf-grid-gap) * 0.667);
}

.nav-dropdown-panel a {
    display: block;
    padding: calc(var(--ocf-space-unit) * 0.5) calc(var(--ocf-space-unit) * 0.625);
    border-bottom: var(--card-border-width) solid var(--ocf-border-light);
}

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

.nav-dropdown-panel > a.dropdown-item {
    margin-top: calc(var(--ocf-space-unit) * 0.75);
    padding-inline: calc(var(--ocf-space-unit) * 0.625);
    border-bottom: 0;
    color: var(--ocf-link);
    font-family: var(--ocf-font-heading), system-ui, sans-serif;
    font-size: var(--cardinal-label-size);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--cardinal-label-tracking);
    text-transform: uppercase;
}

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

.nav-right { display: flex; align-items: center; gap: calc(var(--ocf-space-unit) * 0.75); }

.nav-right .nav-cta,
.nav-right .nav-phone {
    min-height: calc(var(--ocf-space-unit) * 3);
    padding: calc(var(--ocf-space-unit) * 0.75) calc(var(--ocf-space-unit) * 1.25);
    white-space: nowrap;
}

.nav-right .nav-cta.btn-secondary { background: transparent; color: var(--ocf-heading); border-color: var(--ocf-heading); }
.nav-right .nav-cta.btn-secondary:hover { background: var(--ocf-heading); color: var(--ocf-bg); }
.nav-phone svg { width: calc(var(--ocf-space-unit) * 1); height: calc(var(--ocf-space-unit) * 1); }

.cardinal-pinstripe {
    display: block;
    height: var(--cardinal-pinstripe-height);
    background: linear-gradient(180deg, var(--ocf-primary) 0 40%, var(--ocf-bg) 40% 60%, var(--ocf-heading) 60% 100%);
}

.nav-mobile-btn { display: none; background: none; border: 0; color: inherit; }
.mobile-menu { display: none; }

/* Fit: assets/main.js adds .cardinal-nav-compact when the row overflows (long labels, wide customer fonts) — icon-only
 * call button, tighter nav — then .cardinal-nav-tight (outline CTA hidden), then .cardinal-nav-collapsed, which
 * switches to the menu button. The width breakpoints below are the no-JS fallback. */
.cardinal-nav-tight .nav-right .nav-cta { display: none; }
.cardinal-nav-compact .nav-inner { gap: calc(var(--ocf-grid-gap) * 0.75); }
.cardinal-nav-compact .nav-links { gap: calc(var(--ocf-grid-gap) * 0.75); letter-spacing: 0.02em; }
.cardinal-nav-compact .nav-right .nav-phone span { display: none; }
.cardinal-nav-compact .nav-right .nav-phone { padding-inline: calc(var(--ocf-space-unit) * 0.875); }

@media (max-width: 1279px) {
    .nav-right .nav-cta { display: none; }
}

.cardinal-nav-collapsed .nav-links { display: none; }
.cardinal-nav-collapsed .nav-mobile-btn { display: flex; padding: calc(var(--ocf-space-unit) * 0.5); }
.cardinal-nav-collapsed .nav-inner { justify-content: space-between; }

@media (max-width: 1080px) {
    .nav-inner { justify-content: space-between; min-height: var(--ocf-header-height-mobile); gap: calc(var(--ocf-grid-gap) * 0.5); }
    .nav-logo { flex-basis: var(--ocf-logo-width-mobile); }
    .nav-logo-img { width: var(--ocf-logo-width-mobile); height: var(--ocf-logo-height-mobile); }
    .nav-links { display: none; }
    .nav-mobile-btn { display: flex; padding: calc(var(--ocf-space-unit) * 0.5); }
}

/* The open menu (base.js toggles an inline display) never shows while the full nav row is visible. */
@media (min-width: 1081px) {
    html:not(.cardinal-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-top: var(--card-border-width) solid var(--ocf-border);
    background: var(--ocf-bg);
    max-height: calc(100dvh - var(--cardinal-nav-row-height, var(--ocf-header-height-mobile)) - var(--cardinal-pinstripe-height) - var(--wp-admin-bar-offset, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
}
.mobile-menu-inner { padding: calc(var(--ocf-space-unit) * 0.5) var(--container-pad) calc(var(--ocf-space-unit) * 1.5); }
.mobile-menu a,
.mobile-accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: calc(var(--ocf-space-unit) * 0.875) 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-heading), system-ui, sans-serif;
    font-size: calc(var(--cardinal-label-size) * 1.111);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.mobile-menu svg { width: calc(var(--ocf-space-unit) * 1); height: calc(var(--ocf-space-unit) * 1); }
.mobile-accordion-panel { display: none; padding-left: calc(var(--ocf-space-unit) * 1); }
.mobile-accordion-panel a { font-family: var(--ocf-font-body), system-ui, sans-serif; font-size: var(--ocf-font-body-size); font-weight: var(--font-weight-medium); letter-spacing: 0; text-transform: none; }
.mobile-actions { display: grid; gap: calc(var(--ocf-space-unit) * 0.75); margin-top: calc(var(--ocf-space-unit) * 1.25); }
.mobile-menu .mobile-cta,
.mobile-menu .mobile-phone {
    justify-content: center;
    gap: calc(var(--ocf-space-unit) * 0.5);
    min-height: calc(var(--ocf-space-unit) * 3.25);
    border: var(--button-border-width) solid var(--ocf-heading);
    border-radius: var(--button-radius);
}
.mobile-menu .mobile-cta { border-color: var(--ocf-primary); background: var(--ocf-primary); color: var(--ocf-primary-contrast); }

@media (max-width: 560px) {
    .nav-right .nav-phone span { display: none; }
    .nav-right .nav-phone { min-height: calc(var(--ocf-space-unit) * 2.75); padding: calc(var(--ocf-space-unit) * 0.625); }
}

@media (prefers-reduced-motion: reduce) {
    .nav-links .nav-link::after,
    .nav-links .nav-dropdown-trigger::after { transition: none; }
}

/* Dark mode: the heading color turns light, so the pinstripe's bottom line uses the border color instead. */
html[data-theme="dark"] .cardinal-pinstripe {
    background: linear-gradient(180deg, var(--ocf-primary) 0 40%, var(--ocf-bg) 40% 60%, var(--ocf-border) 60% 100%);
}

/* OCF_AGENT_BLOCK:logo-rounded-corners-15 START */
/* Stylized brand mark with softly rounded corners. */
.nav-logo-img {
    border-radius: 15%;
}
/* OCF_AGENT_BLOCK:logo-rounded-corners-15 END */

/* OCF_AGENT_BLOCK:navy-header-contrast-buttons START */
/* Navy brand header with high-contrast controls. Dropdown and mobile-menu panels retain their existing surface styles. */
.nav-bar {
    background: #102F5C;
    color: #FFFFFF;
}

.nav-links > .nav-link,
.nav-links > .nav-dropdown-trigger,
.nav-links > .nav-dropdown > .nav-dropdown-trigger {
    color: #FFFFFF;
}

.nav-links > .nav-link:hover,
.nav-links > .nav-dropdown-trigger:hover,
.nav-links > .nav-dropdown > .nav-dropdown-trigger:hover,
.nav-links > .nav-link[aria-current="page"],
.nav-links > .nav-dropdown > .nav-dropdown-trigger[aria-current="page"] {
    color: #FFFFFF;
}

.nav-right .nav-cta.btn-secondary,
.nav-right .nav-cta.btn-secondary:hover,
.nav-right .nav-cta.btn-secondary:focus-visible {
    background: #FFD400;
    border-color: #FFD400;
    color: #102F5C;
}

.nav-right .nav-phone {
    background: #FFD400;
    border-color: #FFD400;
    color: #102F5C;
}

.nav-right .nav-phone:hover,
.nav-right .nav-phone:focus-visible {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: #102F5C;
}
/* OCF_AGENT_BLOCK:navy-header-contrast-buttons END */