/* ─── 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; }
}

/* OCF_AGENT_BLOCK:lonestar-text-wordmark START */
/* Text-only fallback wordmark when no uploaded logo is configured. */
.ocf-brand-wordmark {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    max-width: 100%;
    overflow: hidden;
    color: var(--ocf-primary);
    font-family: var(--ocf-font-heading), Roboto, sans-serif;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.ocf-brand-wordmark__top { font-size: 17px; font-weight: 800; letter-spacing: .12em; }
.ocf-brand-wordmark__bottom { font-size: 10px; font-weight: 700; letter-spacing: .28em; }
.nav-logo .ocf-brand-wordmark { width: var(--ocf-logo-width); height: var(--ocf-logo-height); }
@media (max-width: 1080px) {
    .nav-logo .ocf-brand-wordmark { width: var(--ocf-logo-width-mobile); height: var(--ocf-logo-height-mobile); }
}
/* OCF_AGENT_BLOCK:lonestar-text-wordmark END */

/* OCF_AGENT_BLOCK:lonestar-header-theme-toggle START */
.nav-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 11px;
    border: 1px solid var(--ocf-border);
    border-radius: var(--radius-full);
    background: var(--ocf-bg-alt);
    color: var(--ocf-heading);
    font: 600 13px/1 var(--ocf-font-body), Roboto, sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--duration), border-color var(--duration), color var(--duration);
}
.nav-theme-toggle:hover { border-color: var(--ocf-primary); background: var(--ocf-bg); }
.nav-theme-toggle:focus-visible { outline: 3px solid var(--ocf-secondary); outline-offset: 3px; }
.nav-theme-toggle__icon { width: 17px; height: 17px; flex: 0 0 auto; }
.nav-theme-toggle__icon--sun { display: none; }
html[data-theme="dark"] .nav-theme-toggle__icon--moon { display: none; }
html[data-theme="dark"] .nav-theme-toggle__icon--sun { display: block; }
.nav-right { gap: clamp(8px, 1vw, calc(var(--ocf-grid-gap) * 1.1)); }
@media (max-width: 1080px) {
    .nav-theme-toggle { min-height: 38px; padding-inline: 10px; }
    .nav-right { gap: 8px; }
}
@media (max-width: 420px) {
    .nav-theme-toggle { min-height: 36px; padding-inline: 8px; gap: 5px; font-size: 12px; }
    .nav-theme-toggle__icon { width: 16px; height: 16px; }
    .nav-logo { flex-basis: min(150px, 42vw); }
    .nav-logo-img, .nav-logo .ocf-brand-wordmark { width: min(150px, 42vw); }
}
@media (max-width: 350px) { .nav-theme-toggle__label { display: none; } }
/* OCF_AGENT_BLOCK:lonestar-header-theme-toggle END */

/* OCF_AGENT_BLOCK:lonestar-readable-wordmark START */
.nav-logo .ocf-brand-wordmark { color: #617DA1; gap: 5px; }
.nav-logo .ocf-brand-wordmark__top { font-size: 23px; letter-spacing: .08em; }
.nav-logo .ocf-brand-wordmark__bottom { font-size: 13px; letter-spacing: .22em; }
html[data-theme="dark"] .nav-logo .ocf-brand-wordmark { color: #fff; }
@media (max-width: 1080px) {
    .nav-logo .ocf-brand-wordmark__top { font-size: 19px; letter-spacing: .05em; }
    .nav-logo .ocf-brand-wordmark__bottom { font-size: 11px; letter-spacing: .18em; }
}
@media (max-width: 420px) {
    .nav-logo .ocf-brand-wordmark__top { font-size: 17px; }
    .nav-logo .ocf-brand-wordmark__bottom { font-size: 10px; }
}
/* OCF_AGENT_BLOCK:lonestar-readable-wordmark END */

/* OCF_AGENT_BLOCK:lonestar-original-logo-header START */
.nav-inner > .nav-logo {
    display: flex !important;
    align-items: center;
    flex: 0 0 320px !important;
    width: 320px !important;
    max-width: 320px !important;
    min-width: 320px;
    box-sizing: border-box;
}
.nav-inner > .nav-logo > .nav-logo-img {
    display: block;
    flex: 0 0 auto;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain;
    object-position: left center;
}
html[data-theme="dark"] .nav-inner > .nav-logo {
    padding: 4px 6px;
    border-radius: 6px;
    background: #F4F7FA;
}
@media (max-width: 1400px) {
    .nav-inner { justify-content: space-between; gap: 8px; }
    .nav-links,
    .nav-right .nav-cta { display: none !important; }
    .nav-mobile-btn { display: inline-grid; }
    .nav-right { flex: 0 0 auto; gap: 8px; }
}
@media (max-width: 1080px) {
    .nav-inner > .nav-logo {
        flex: 0 0 min(230px, 54vw) !important;
        width: min(230px, 54vw) !important;
        max-width: 230px !important;
        min-width: 0;
    }
    .nav-inner > .nav-logo > .nav-logo-img { max-width: 100% !important; }
}
@media (max-width: 420px) {
    .nav-inner > .nav-logo {
        flex-basis: min(230px, 54vw) !important;
        width: min(230px, 54vw) !important;
    }
    .nav-theme-toggle__label { display: none; }
}
@media (max-width: 350px) {
    .nav-inner > .nav-logo {
        flex-basis: min(170px, 50vw) !important;
        width: min(170px, 50vw) !important;
    }
    .nav-phone { display: none; }
}
/* OCF_AGENT_BLOCK:lonestar-original-logo-header END */