/* Desktop primary navigation: visible ≥1024px except body.page-xyz / body.page-compact-nav (hamburger + back only).
   header.site-header matches index .header band: 80px height, 40px horizontal inset. */
:root {
--site-nav-desktop-bp: 1024px;
--site-nav-link-pad-y: 8px;
--site-nav-link-pad-x: 12px;
--site-header-band-height: 80px;
--site-header-inline-pad: 40px;
}

/* site-header back control: full placement at every width. xyz.html also gets .back-button{position:fixed} from xyz-optimized.css;
   listofall does not — without this, desktop only had top/left and the arrow sat in normal flow (wrong). */
header.site-header .back-button {
position: fixed;
top: calc(env(safe-area-inset-top, 0px) + var(--site-header-band-height) / 2);
left: calc(var(--site-header-inline-pad) + env(safe-area-inset-left, 0px));
transform: translateY(-50%);
z-index: 30000;
}

.site-nav-desktop {
display: none;
}

@media (min-width: 1024px) {
.site-nav-desktop {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 2px;
list-style: none;
margin: 0;
padding: 0;
pointer-events: auto;
}

.site-nav-desktop a {
font-family: 'Inter', system-ui, sans-serif;
font-size: 15px;
font-weight: 500;
letter-spacing: 0.02em;
text-decoration: none;
color: #ffffff;
padding: var(--site-nav-link-pad-y) var(--site-nav-link-pad-x);
border-radius: 8px;
line-height: 1.2;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.site-nav-desktop a:hover {
background-color: rgba(255, 255, 255, 0.12);
}

.site-nav-desktop a:focus-visible {
outline: 2px solid rgba(33, 201, 238, 0.85);
outline-offset: 2px;
}

.site-nav-desktop a[aria-current="page"] {
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-thickness: 2px;
}

body.nav-dark .site-nav-desktop a {
color: #0d3b66;
}

body.nav-dark .site-nav-desktop a:hover {
background-color: rgba(13, 59, 102, 0.08);
}

body.nav-dark .site-nav-desktop a:focus-visible {
outline-color: #0d3b66;
}

header.site-header .site-nav-desktop {
position: fixed;
top: 0;
right: 0;
z-index: 30000;
height: var(--site-header-band-height);
max-height: var(--site-header-band-height);
padding-right: calc(var(--site-header-inline-pad) + env(safe-area-inset-right, 0px));
padding-left: 12px;
box-sizing: border-box;
align-items: center;
justify-content: flex-end;
max-width: min(72vw, 560px);
}

.header .site-nav-desktop {
position: fixed;
top: 0;
right: 0;
z-index: 30000;
height: var(--site-header-band-height);
max-height: var(--site-header-band-height);
padding-right: calc(var(--site-header-inline-pad) + env(safe-area-inset-right, 0px));
padding-left: 12px;
box-sizing: border-box;
align-items: center;
justify-content: flex-end;
max-width: min(72vw, 560px);
}

/* Horizontal nav is visible in this block; hide hamburger on desktop except property + properties list. */
body:not(.page-xyz):not(.page-compact-nav) .hamburger-menu {
display: none !important;
}
body.page-xyz header.site-header .site-nav-desktop,
body.page-compact-nav header.site-header .site-nav-desktop {
display: none !important;
}

/* Compact chrome (property + properties list): hamburger stays on the right at ≥1024px — mobile rules only apply ≤1023px. */
body.page-xyz header.site-header .hamburger-menu,
body.page-compact-nav header.site-header .hamburger-menu {
position: fixed;
top: calc(env(safe-area-inset-top, 0px) + var(--site-header-band-height) / 2);
right: calc(14px + env(safe-area-inset-right, 0px));
transform: translateY(-50%);
left: auto;
z-index: 30000;
}

/* Property pages ship large bundles (e.g. xyz-optimized.css); pin metrics so global nav does not reflow. */
header.site-header nav.site-nav-desktop a {
font-size: 15px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.02em;
}

header.site-header nav.site-nav-desktop a[aria-current="page"] {
font-weight: 500;
}
}

/* Nav link typography: load after page bundles so Inter wins over page body fonts. */
@media (min-width: 1024px) {
.header nav.site-nav-desktop a,
header.site-header nav.site-nav-desktop a,
nav.site-nav-desktop a {
font-family: 'Inter', system-ui, sans-serif;
font-size: 15px;
font-weight: 500;
letter-spacing: 0.02em;
}

header.site-header .site-nav-desktop a[href="#contact"],
header.site-header .site-nav-desktop a[href="index.html#contact"],
.header .site-nav-desktop a[href="#contact"],
.header .site-nav-desktop a[href="index.html#contact"] {
background-color: #001f3f;
color: #ffffff;
border-radius: 2px;
padding: 8px 16px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}

header.site-header .site-nav-desktop a[href="#contact"]:hover,
header.site-header .site-nav-desktop a[href="index.html#contact"]:hover,
.header .site-nav-desktop a[href="#contact"]:hover,
.header .site-nav-desktop a[href="index.html#contact"]:hover,
header.site-header .site-nav-desktop a[href="#contact"]:focus-visible,
header.site-header .site-nav-desktop a[href="index.html#contact"]:focus-visible,
.header .site-nav-desktop a[href="#contact"]:focus-visible,
.header .site-nav-desktop a[href="index.html#contact"]:focus-visible {
background-color: #001f3f;
color: #ffffff;
opacity: 0.88;
}
}

@media (max-width: 1023px) {
.mobile-menu a {
font-family: 'Inter', system-ui, sans-serif;
font-weight: 500;
}
}

/* Mobile header chrome (≤1023px): hamburger, menu-logo; site-nav-ux.js owns toggle behavior. */
@media (max-width: 1023px) {
.hamburger-menu {
position: fixed;
top: calc(env(safe-area-inset-top, 0px) + var(--site-header-band-height) / 2);
right: calc(14px + env(safe-area-inset-right, 0px));
transform: translateY(-50%);
left: auto;
z-index: 30000;
}

.menu-logo {
position: fixed;
top: calc(env(safe-area-inset-top, 0px) + (var(--site-header-band-height) - 17px) / 2);
left: calc(16px + var(--site-header-inline-pad) + env(safe-area-inset-left, 0px));
z-index: 20004;
}

/* Inner pages with site-header (listofall, xyz) hide .menu-logo in page CSS; show it here on mobile only. */
header.site-header .menu-logo {
display: block;
}

.menu-logo img {
display: block;
height: 17px;
width: auto;
}
}

/* Top band: same height and horizontal insets on home and inner pages (all viewports). */
.header.header--home,
.header:not(.header--home),
header.site-header {
height: var(--site-header-band-height);
min-height: var(--site-header-band-height);
padding-left: calc(var(--site-header-inline-pad) + env(safe-area-inset-left, 0px));
padding-right: calc(var(--site-header-inline-pad) + env(safe-area-inset-right, 0px));
box-sizing: border-box;
}