/* ─── Portola header ───
 * A primary utility bar (city, phone, email) that scrolls away, then one sticky white row: logo, nav and the
 * primary CTA (the phone moves into the row as a square icon button below 1081px). assets/main.js measures the row height into --portola-nav-row-height so sticky
 * page elements sit exactly below it.
 */
:root {
    --portola-utility-height: 44px;
    --portola-pinstripe-height: 0px;
    --portola-header-offset: calc(var(--ocf-header-height) + var(--portola-pinstripe-height));
    --portola-sticky-top: calc(var(--wp-admin-bar-offset) + var(--portola-nav-row-height, var(--ocf-header-height)) + var(--portola-pinstripe-height) + var(--ocf-grid-gap) * 1.5);
}

.nav-bar {
    position: sticky;
    top: calc(var(--wp-admin-bar-offset) - var(--portola-utility-height));
    box-shadow: 0 1px 0 var(--ocf-border);
    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(--portola-label-size);
    font-weight: var(--font-weight-semibold);
}

.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: 1px solid var(--ocf-border);
    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(--portola-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(--portola-label-size);
    font-weight: var(--font-weight-semibold);
}

.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) * 2.875);
    padding: calc(var(--ocf-space-unit) * 0.625) calc(var(--ocf-space-unit) * 1.125);
    font-size: calc(var(--portola-label-size) * 0.95);
    white-space: nowrap;
}

.nav-phone svg { width: calc(var(--ocf-space-unit) * 1); height: calc(var(--ocf-space-unit) * 1); }

/* Utility bar: primary gradient, centered contact details. */
.portola-ubar {
    background: var(--portola-grad);
    color: var(--ocf-primary-contrast);
}

.portola-ubar__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--ocf-space-unit) * 2.5);
    height: var(--portola-utility-height);
    font-family: var(--ocf-font-heading), system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.portola-ubar__item { display: inline-flex; align-items: center; gap: 8px; color: inherit; white-space: nowrap; }
.portola-ubar__item svg { width: 15px; height: 15px; flex: none; }

/* Desktop: the phone lives in the utility bar, so the row shows only the CTA. */
@media (min-width: 1081px) {
    .nav-right .nav-phone { display: none; }
}

@media (max-width: 1023px) {
    .portola-ubar__email { display: none; }
    .portola-ubar__row { gap: calc(var(--ocf-space-unit) * 1.75); font-size: 13px; }
}

@media (max-width: 767px) {
    :root { --portola-utility-height: 0px; }
    .portola-ubar { display: none; }
}

.nav-mobile-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: calc(var(--ocf-space-unit) * 2.875);
    height: calc(var(--ocf-space-unit) * 2.875);
    border: 0;
    border-radius: var(--button-radius);
    background: var(--portola-grad);
    color: var(--ocf-primary-contrast);
}
.mobile-menu { display: none; }

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

@media (max-width: 1279px) {
    .nav-right .nav-phone span { display: none; }
    .nav-right .nav-phone { padding-inline: calc(var(--ocf-space-unit) * 0.75); }
}

.portola-nav-collapsed .nav-links { display: none; }
.portola-nav-collapsed .nav-mobile-btn { display: flex; }
.portola-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; }
}

/* The open menu (base.js toggles an inline display) never shows while the full nav row is visible. */
@media (min-width: 1081px) {
    html:not(.portola-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(--portola-nav-row-height, var(--ocf-header-height-mobile)) - var(--portola-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(--portola-label-size) * 1.111);
    font-weight: var(--font-weight-semibold);
}
.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(--portola-ink);
    border-radius: var(--button-radius);
    background: transparent;
}
.mobile-menu .mobile-cta { border-color: transparent; background: var(--portola-grad); color: var(--ocf-primary-contrast); }

@media (max-width: 1080px) {
    .nav-right .nav-cta { display: none; }
    .nav-right .nav-phone { width: calc(var(--ocf-space-unit) * 2.875); min-height: calc(var(--ocf-space-unit) * 2.875); padding: 0; }
}

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

/* OCF_AGENT_BLOCK:foundry-inspired-header START */
.nav-bar .nav-links,.nav-bar .portola-ubar__row,.nav-bar .mobile-menu a,.nav-bar .mobile-accordion-trigger,.nav-bar .nav-dropdown-panel > a.dropdown-item { font-family:var(--ocf-font-body),sans-serif; }
.nav-bar .nav-links { font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;gap:clamp(16px,2vw,30px); }
.nav-bar .portola-ubar { background:var(--ocf-bg-dark);color:var(--ocf-heading-alt); }
.nav-bar .portola-ubar__row { font-size:12px;letter-spacing:.03em; }
.nav-bar .nav-inner { gap:26px; }
.nav-bar .nav-right .nav-cta { border-color:var(--ocf-primary);background:var(--ocf-primary);color:var(--ocf-primary-text);font-size:11px;padding-inline:20px; }
.nav-bar .nav-links .nav-link::after,.nav-bar .nav-links .nav-dropdown-trigger::after { height:1px; }
.nav-bar .nav-right .nav-cta:hover { background:var(--ocf-primary-hover);border-color:var(--ocf-primary-hover); }
.nav-bar .nav-mobile-btn,.nav-bar .mobile-menu .mobile-cta { background:var(--ocf-primary);color:var(--ocf-primary-text); }
.nav-bar .nav-dropdown-panel { letter-spacing:0;font-size:15px; }
@media(max-width:1080px) { .nav-bar .nav-inner { gap:12px; } }
/* OCF_AGENT_BLOCK:foundry-inspired-header END */

/* OCF_AGENT_BLOCK:header-youtube-video-links START */
.nav-bar .portola-ubar__social { display:flex; align-items:center; justify-content:center; gap:10px; flex-shrink:0; }
.nav-bar .portola-ubar__social:empty { display:none; }
.nav-bar .portola-ubar__social a { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:40px; color:inherit; font-family:var(--ocf-font-body),sans-serif; font-size:11px; line-height:1.2; white-space:nowrap; text-decoration:none; }
.nav-bar .portola-ubar__social svg { width:18px; height:18px; flex:none; }
.nav-bar .portola-ubar__social a:hover { color:var(--ocf-primary); }
.nav-bar .portola-ubar__social a:focus-visible { outline:2px solid var(--ocf-primary); outline-offset:2px; }
@media (min-width:768px) and (max-width:1180px) { .nav-bar:has(.portola-ubar__social a) .portola-ubar__email { display:none; } }
@media (max-width:767px) {
  :root:has(.portola-ubar__social a) { --portola-utility-height:44px; }
  .nav-bar:has(.portola-ubar__social a) .portola-ubar { display:block; }
  .nav-bar:has(.portola-ubar__social a) .portola-ubar__item { display:none; }
  .nav-bar:has(.portola-ubar__social a) .portola-ubar__row { justify-content:center; gap:0; }
  .nav-bar .portola-ubar__social { width:100%; justify-content:space-between; gap:4px; }
  .nav-bar .portola-ubar__social a { min-height:44px; font-size:11px; gap:4px; }
}
/* OCF_AGENT_BLOCK:header-youtube-video-links END */