/* ─── Dakota header ───
 * One sticky row on the page background with a hairline underneath: logo, body-font nav with chevrons, the phone block
 * (gold badge, small label, bold number) and the primary-color CTA. assets/main.js measures the row height into
 * --dakota-nav-row-height so sticky page elements sit exactly below it.
 */
:root {
    --dakota-utility-height: 0px;
    --dakota-pinstripe-height: 0px;
    --dakota-header-offset: var(--ocf-header-height);
    --dakota-sticky-top: calc(var(--wp-admin-bar-offset) + var(--dakota-nav-row-height, var(--ocf-header-height)) + var(--ocf-grid-gap) * 1.5);
}

.nav-bar {
    position: sticky;
    top: var(--wp-admin-bar-offset);
    z-index: 100;
    border-bottom: var(--card-border-width) solid var(--ocf-border-light);
    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.875), 2.5vw, calc(var(--ocf-grid-gap) * 1.5));
    margin-inline: auto;
    font-family: var(--ocf-font-body), system-ui, sans-serif;
    font-size: var(--font-body-size);
    font-weight: var(--font-weight-medium);
}

.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;
    font: inherit;
    white-space: nowrap;
}

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

.nav-links .nav-link::after,
.nav-links .nav-dropdown-trigger::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: calc(var(--ocf-grid-gap) * 0.35);
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--ocf-secondary);
    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-heading); }

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

/* Desktop dropdown: soft card, two columns of links with arrow hints, then the "view all" link. */
.nav-dropdown { position: relative; }

.nav-dropdown-panel {
    position: absolute;
    top: calc(100% - 4px);
    left: calc(var(--ocf-grid-gap) * -1.25);
    display: block;
    width: var(--ocf-nav-dropdown-width);
    padding: calc(var(--ocf-grid-gap) * 1.167);
    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 -28px color-mix(in srgb, var(--ocf-heading) 48%, transparent);
    opacity: 0;
    visibility: hidden;
    font-size: var(--font-body-size);
    font-weight: var(--font-weight-semibold);
}

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

.nav-dropdown-panel .dropdown-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius);
}

.nav-dropdown-panel .dropdown-menu a::after {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    background: var(--ocf-primary);
    -webkit-mask: var(--dakota-arrow) center / contain no-repeat;
    mask: var(--dakota-arrow) center / contain no-repeat;
}

.nav-dropdown-panel .dropdown-menu a:hover { background: var(--dakota-bg-alt); }

.nav-dropdown-panel > a.dropdown-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: calc(var(--ocf-space-unit) * 0.75);
    padding: calc(var(--ocf-space-unit) * 0.875) 14px 0;
    border-top: var(--card-border-width) solid var(--ocf-border);
    color: var(--ocf-primary);
    font-size: calc(var(--font-body-size) * 0.9);
}

.nav-dropdown-panel > a.dropdown-item::after {
    content: "";
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: var(--dakota-arrow) center / contain no-repeat;
    mask: var(--dakota-arrow) center / contain no-repeat;
}

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

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

.nav-phone {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ocf-heading);
    white-space: nowrap;
}

.nav-phone__badge {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-full);
    background: var(--ocf-secondary);
    color: var(--ocf-secondary-contrast);
}

.nav-phone__badge svg { width: 18px; height: 18px; }

.nav-phone__text { display: grid; line-height: 1.25; }
.nav-phone__label { color: var(--ocf-body); font-size: var(--ocf-font-small-size); }
.nav-phone__number { font-size: calc(var(--font-body-size) * 1.0); font-weight: var(--font-weight-bold); }
.nav-phone:hover .nav-phone__number { color: var(--ocf-primary); }

.nav-right .nav-cta { white-space: nowrap; }

.nav-mobile-btn {
    display: none;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1.5px solid var(--ocf-heading);
    border-radius: var(--button-radius);
    background: none;
    color: inherit;
}

.mobile-menu { display: none; }

/* Fit: assets/main.js adds .dakota-nav-compact when the row overflows (long labels, wide customer fonts) — the phone
 * block shrinks to its badge — then .dakota-nav-tight (CTA hidden), then .dakota-nav-collapsed, which switches to the
 * menu button. The width breakpoints below are the no-JS fallback. */
.dakota-nav-compact .nav-inner { gap: calc(var(--ocf-grid-gap) * 0.75); }
.dakota-nav-compact .nav-links { gap: calc(var(--ocf-grid-gap) * 0.75); }
.dakota-nav-compact .nav-phone__text { display: none; }
.dakota-nav-tight .nav-right .nav-cta { display: none; }

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

.dakota-nav-collapsed .nav-links { display: none; }
.dakota-nav-collapsed .nav-mobile-btn { display: inline-grid; }
.dakota-nav-collapsed .nav-inner { justify-content: space-between; }
.dakota-nav-collapsed .nav-right { gap: 10px; }

@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,
    .nav-right .nav-cta { display: none; }
    .nav-right { gap: 10px; }
    .nav-mobile-btn { display: inline-grid; }
}

/* The open menu (base.js toggles an inline display) never shows while the full nav row is visible. */
@media (min-width: 1081px) {
    html:not(.dakota-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-light);
    background: var(--ocf-bg);
    max-height: calc(100dvh - var(--dakota-nav-row-height, var(--ocf-header-height-mobile)) - 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.75); }
.mobile-menu a,
.mobile-accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: calc(var(--ocf-space-unit) * 1.05) 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: clamp(1.15rem, 3.4vw, 1.5rem);
    font-weight: var(--ocf-font-h3-weight, 400);
    letter-spacing: 0;
    text-transform: none;
}
.mobile-menu svg { width: 20px; height: 20px; }
.mobile-accordion-panel { display: none; padding: 6px 0 10px; }
.mobile-accordion-panel a {
    padding: 10px 16px;
    border-bottom: 0;
    color: var(--ocf-body);
    font-family: var(--ocf-font-body), system-ui, sans-serif;
    font-size: var(--font-body-size);
    font-weight: var(--font-weight-medium);
}
.mobile-actions {
    display: grid;
    gap: calc(var(--ocf-space-unit) * 0.75);
    margin-top: calc(var(--ocf-space-unit) * 1.5);
    padding-top: calc(var(--ocf-space-unit) * 1.5);
    border-top: var(--card-border-width) solid var(--ocf-border-light);
}
.mobile-menu .mobile-cta,
.mobile-menu .mobile-phone {
    justify-content: center;
    gap: calc(var(--ocf-space-unit) * 0.625);
    min-height: calc(var(--ocf-space-unit) * 3.25);
    border: 0;
    border-radius: var(--button-radius);
    font-family: var(--ocf-font-heading), system-ui, sans-serif;
    font-size: var(--dakota-label-size);
    letter-spacing: var(--dakota-label-tracking);
    text-transform: uppercase;
}
.mobile-menu .mobile-cta { background: var(--ocf-secondary); color: var(--ocf-secondary-contrast); }
.mobile-menu .mobile-phone {
    color: var(--ocf-heading);
    font-family: var(--ocf-font-body), system-ui, sans-serif;
    font-size: calc(var(--font-body-size) * 1.06);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0;
    text-transform: none;
}
.mobile-phone-icon { color: var(--ocf-primary); }

@media (max-width: 420px) {
    .nav-phone__badge { width: 40px; height: 40px; }
    .nav-mobile-btn { width: 42px; height: 42px; }
}

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