/* ════════════════════════════════════════════════════════════════════════
   SD LUX - NAVIGATION  (assets/css/sdx-nav.css)

   Loaded after sdx.css and supersedes its .sdxh / .sdxd blocks.

   WHAT WAS BROKEN
   ───────────────
   The site title grew from "Stephanie Doroteo" (17 chars) to
   "Stephanie Doroteo Las Vegas Real Estate" (39 chars). In sdx.css the brand
   is flex-shrink:0 and the title is white-space:nowrap with no min-width:0,
   so the brand block refuses to shrink and simply pushes its siblings out of
   the bar:

     - On a phone it shoved .sdxh__burger (margin-left:auto) past the right
       edge of the screen, so there was no way to open the menu at all. It
       reappeared in landscape only because the extra width happened to fit.
     - On a laptop the same overflow crushed the nav: the phone button landed
       on top of "Contact Us" and "Rental Property Form" ran off the edge.
       The old breakpoint was max-width:1365px, but eight nav items plus the
       phone button plus a 39-char brand need far more room than 1366px.

   WHAT THIS DOES
   ──────────────
   1. Everything in the bar may shrink; the burger never can. min-width:0 is
      the load-bearing part: a flex item will not shrink below its min-content
      width without it, whatever flex-shrink says. No title length can push
      the burger off-screen again.
   2. Brand title is capped and ellipsised, and hidden below 700px where the
      gold seal already reads "Stephanie Doroteo / Real Estate".
   3. Drop to the drawer at 1100px, and drop the phone button at 1240px, so
      the desktop bar is only shown at widths where it genuinely fits.
   4. One level of dropdown, opened on hover, on focus, and by the caret
      button. On mobile the same tree becomes a tap-to-expand accordion.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Bar ─────────────────────────────────────────────────────────────── */
/*
 * The frosted-glass blur is gone from the header, deliberately.
 *
 * sdx.css puts `backdrop-filter: blur(14px)` on .sdxh. That was harmless while
 * the header had no dropdown. It is not harmless now: with a backdrop-filter
 * anywhere in or beside the header, the dropdown panel (which carries its own
 * transform, so it gets its own compositing layer) fails to rasterise and the
 * menu renders as an empty black rectangle. Reproduced in Chromium: with the
 * blur present the panel area renders 8 flat colours; with it removed, 387.
 * Moving the filter to a ::before or to a sibling element does not help.
 *
 * The blur was buying close to nothing anyway: it sat behind a background that
 * is already 78% opaque, rising to 92% on scroll, over a near-black page. The
 * opacity is nudged up here to compensate, and the header is visually the same.
 */
.sdxh {
	position: fixed; inset: 0 0 auto 0; z-index: 120;
	height: var(--header-h);
	display: flex; align-items: center;
	background: linear-gradient(rgba(14,15,19,.90), rgba(14,15,19,.68));
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-bottom: 1px solid transparent;
	transition: border-color .4s var(--ease), background .4s var(--ease), transform .5s var(--ease);
}
.sdxh.is-hidden   { transform: translateY(-102%); }
.sdxh.is-scrolled { background: rgba(14,15,19,.96); border-bottom-color: var(--gold-faint); }

/* Keep the header down while a dropdown or the drawer is open, otherwise the
   auto-hide can yank an open panel off the screen mid-interaction. */
.sdxh.is-locked   { transform: none !important; }

.sdxh__progress {
	position: absolute; left: 0; top: 0; height: 2px; width: 100%;
	background: var(--gold);
	transform-origin: left; transform: scaleX(0);
}

.sdxh__bar {
	width: 100%; max-width: var(--shell); margin-inline: auto;
	padding-inline: var(--pad-x);
	display: flex; align-items: center; gap: 1.75rem;
	min-width: 0;                       /* let the children shrink */
}

/* ─── Brand ───────────────────────────────────────────────────────────── */
.sdxh__brand {
	display: inline-flex; align-items: center; gap: .9rem;
	text-decoration: none;
	flex: 0 1 auto;                     /* was flex-shrink:0, the original bug */
	min-width: 0;
	overflow: hidden;
}
.sdxh__seal { width: 46px; height: 46px; object-fit: cover; flex: 0 0 auto; }
.sdxh__name {
	font-family: var(--serif); font-size: 1.06rem; letter-spacing: .04em;
	color: var(--ivory);
	white-space: nowrap;
	min-width: 0;
	max-width: 22ch;                    /* never let the title dominate the bar */
	overflow: hidden; text-overflow: ellipsis;
}

/* ─── Desktop nav ─────────────────────────────────────────────────────── */
/* `display` is declared explicitly here because sdx.css still contains
   @media (max-width:1365px){ .sdxh__nav,.sdxh__tel{display:none} }. This file
   loads after it, but a rule can only beat another rule it actually overrides:
   without an explicit display, the old 1365px rule kept hiding the desktop nav
   all the way down from 1365 to 1101. */
.sdxh__nav  { display: block; margin-left: auto; min-width: 0; }
.sdxh__menu {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center;
	gap: clamp(.7rem, 1.15vw, 1.4rem);
	min-width: 0;
}
.sdxh__item { position: relative; display: flex; align-items: center; gap: .25rem; }

.sdxh__link {
	position: relative;
	font-size: .62rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
	color: var(--mist); text-decoration: none;
	padding: .35rem 0;
	white-space: nowrap;
	transition: color .25s var(--ease);
}
.sdxh__link::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 100%; height: 1px; background: var(--gold);
	transform: scaleX(0); transform-origin: left;
	transition: transform .35s var(--ease);
}
.sdxh__link:hover { color: var(--ivory); }
.sdxh__link:hover::after,
.sdxh__link.is-current::after { transform: scaleX(1); }
.sdxh__link.is-current { color: var(--gold); }

/* Caret is its own button, so the parent link stays navigable. */
.sdxh__caret {
	display: inline-flex; align-items: center; justify-content: center;
	width: 18px; height: 18px;
	color: var(--mist-2);
	transition: color .25s var(--ease), transform .35s var(--ease);
}
.sdxh__caret:hover { color: var(--gold); }
.sdxh__item.is-open > .sdxh__caret { color: var(--gold); transform: rotate(180deg); }
.sdxh__item.is-open > .sdxh__link  { color: var(--ivory); }
.sdxh__item.is-open > .sdxh__link::after { transform: scaleX(1); }

/* ─── Dropdown panel ──────────────────────────────────────────────────── */
.sdxh__panel {
	position: absolute; top: calc(100% + .85rem); left: -1.25rem;
	min-width: 264px;
	padding: .6rem 0;
	/* No backdrop-filter here. The panel is 98.5% opaque, so a blur behind it
	   contributes nothing visible, and backdrop-filter would make this element
	   clip its own overflowing children for the same reason the header did. */
	background: rgba(28, 31, 39, .985);   /* --ink-3, clearly distinct from the page ink */
	border: 1px solid var(--gold-dim);
	border-top: 2px solid var(--gold);
	box-shadow: 0 30px 70px -18px rgba(0,0,0,.9);
	opacity: 0; visibility: hidden; pointer-events: none;
	transform: translateY(-8px) scale(.985);
	transform-origin: top left;
	transition: opacity .32s var(--ease), transform .32s var(--ease), visibility 0s linear .32s;
	z-index: 5;
}

/* An invisible bridge across the gap, so the pointer can travel from the
   parent item down into the panel without it snapping shut. */
.sdxh__panel::before {
	content: ""; position: absolute; left: 0; right: 0; top: -.85rem; height: .85rem;
}

.sdxh__item.is-open > .sdxh__panel {
	opacity: 1; visibility: visible; pointer-events: auto;
	transform: translateY(0) scale(1);
	transition-delay: 0s;
}
@media (hover: hover) and (pointer: fine) {
	.sdxh__item--has-children:hover > .sdxh__panel,
	.sdxh__item--has-children:focus-within > .sdxh__panel {
		opacity: 1; visibility: visible; pointer-events: auto;
		transform: translateY(0) scale(1);
		transition-delay: 0s;
	}
	.sdxh__item--has-children:hover > .sdxh__caret,
	.sdxh__item--has-children:focus-within > .sdxh__caret { color: var(--gold); transform: rotate(180deg); }
	.sdxh__item--has-children:hover > .sdxh__link::after,
	.sdxh__item--has-children:focus-within > .sdxh__link::after { transform: scaleX(1); }
}

.sdxh__sub { list-style: none; margin: 0; padding: 0; }
.sdxh__subitem { display: block; }

.sdxh__sublink {
	display: block;
	padding: .58rem 1.5rem;
	font-family: var(--sans);
	font-size: .78rem; font-weight: 400; letter-spacing: .04em;
	color: var(--mist); text-decoration: none;
	white-space: nowrap;
	border-left: 1px solid transparent;
	/* Staggered entrance. --i is set per item by sdx-nav.js. */
	opacity: 0; transform: translateX(-6px);
	transition: opacity .3s var(--ease), transform .3s var(--ease),
	            color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), padding-left .2s var(--ease);
}
.sdxh__item.is-open .sdxh__sublink,
.sdxh__item--has-children:hover .sdxh__sublink,
.sdxh__item--has-children:focus-within .sdxh__sublink {
	opacity: 1; transform: none;
	transition-delay: calc(var(--i, 0) * 26ms);
}
.sdxh__sublink:hover,
.sdxh__sublink:focus-visible,
.sdxh__sublink.is-current {
	color: var(--ivory);
	background: var(--gold-faint);
	border-left-color: var(--gold);
	padding-left: 1.75rem;
}
.sdxh__sublink.is-current { color: var(--gold); }

/* First entry in the panel reads as the section index. */
.sdxh__subitem:first-child .sdxh__sublink {
	font-family: var(--serif);
	font-size: .92rem;
	letter-spacing: .05em;
	color: var(--ivory);
	padding-block: .7rem;
	border-bottom: 1px solid var(--gold-faint);
	margin-bottom: .35rem;
}

/* ─── Phone button ────────────────────────────────────────────────────── */
.sdxh__tel {
	display: inline-block;              /* see the note on .sdxh__nav above */
	flex: 0 0 auto;
	margin-left: .25rem;
	font-size: .67rem; font-weight: 600; letter-spacing: .16em;
	color: var(--gold); text-decoration: none;
	border: 1px solid var(--gold-dim);
	padding: .62rem 1.15rem;
	white-space: nowrap;
	transition: border-color .3s var(--ease), background .3s var(--ease);
}
.sdxh__tel:hover { border-color: var(--gold); background: var(--gold-faint); }

/* ─── Burger ──────────────────────────────────────────────────────────── */
.sdxh__burger {
	display: none;
	flex: 0 0 auto;                     /* never shrink, never get pushed */
	flex-direction: column; gap: 7px;
	padding: .6rem .2rem;
	margin-left: auto;
}
.sdxh__burger span {
	display: block; width: 26px; height: 1px; background: var(--ivory);
	transition: transform .35s var(--ease), opacity .25s var(--ease), background .25s;
}
.sdxh__burger:hover span { background: var(--gold); }

body.sdx-drawer-open .sdxh__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.sdx-drawer-open .sdxh__burger span:nth-child(2) { opacity: 0; }
body.sdx-drawer-open .sdxh__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ─── Drawer ──────────────────────────────────────────────────────────── */
.sdxd {
	position: fixed; inset: 0; z-index: 110;
	background: rgba(14,15,19,.985);    /* opaque instead of blurred, see the note on .sdxh */
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	display: flex; flex-direction: column;
	justify-content: center;
	justify-content: safe center;       /* falls back to top-align when it overflows */
	padding: calc(var(--header-h) + 1rem) var(--pad-x) 3rem;
	overflow-y: auto;                   /* the old drawer could not scroll at all */
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .45s var(--ease), visibility 0s linear .45s;
}
.sdxd.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }

body.sdx-drawer-open { overflow: hidden; }

.sdxd__list, .sdxd__sub { list-style: none; margin: 0; padding: 0; }
.sdxd__item { border-bottom: 1px solid rgba(243,238,227,.06); }
.sdxd__item:last-child { border-bottom: 0; }

.sdxd__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.sdxd__link {
	flex: 1 1 auto; min-width: 0;
	font-family: var(--serif);
	font-size: clamp(1.55rem, 6vw, 2.5rem);
	line-height: 1.3;
	color: var(--ivory); text-decoration: none;
	display: inline-flex; align-items: baseline; gap: .85rem;
	padding: .5rem 0;
	opacity: 0; transform: translateY(18px);
	transition: opacity .55s var(--ease), transform .55s var(--ease), color .3s var(--ease);
}
.sdxd.is-open .sdxd__link {
	opacity: 1; transform: none;
	transition-delay: calc(.06s + var(--i, 0) * 55ms);
}
.sdxd__link:hover, .sdxd__link.is-current { color: var(--gold); }
.sdxd__index { font-family: var(--sans); font-size: .62rem; letter-spacing: .3em; color: var(--gold-deep); flex: 0 0 auto; }

.sdxd__toggle {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;          /* full-size touch target */
	color: var(--mist-2);
	border: 1px solid var(--gold-faint);
	opacity: 0;
	transition: opacity .55s var(--ease), transform .35s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.sdxd.is-open .sdxd__toggle { opacity: 1; transition-delay: calc(.06s + var(--i, 0) * 55ms); }
.sdxd__toggle .sdx-chev { width: 13px; height: 8px; }
.sdxd__toggle:hover { color: var(--gold); border-color: var(--gold-dim); }
.sdxd__item.is-open > .sdxd__row > .sdxd__toggle { transform: rotate(180deg); color: var(--gold); border-color: var(--gold-dim); }

/* Accordion. Height is animated via a max-height that JS sets from scrollHeight,
   so it works without hardcoding a guess. */
.sdxd__panel {
	max-height: 0;
	overflow: hidden;
	visibility: hidden;                 /* collapsed links must not stay Tab-reachable */
	transition: max-height .45s var(--ease), visibility 0s linear .45s;
}
.sdxd__item.is-open > .sdxd__panel {
	visibility: visible;
	transition: max-height .45s var(--ease), visibility 0s linear 0s;
}
.sdxd__sub { padding: .25rem 0 .9rem 2.35rem; }

.sdxd__sublink {
	display: block;
	padding: .45rem 0;
	font-family: var(--sans);
	font-size: .95rem; letter-spacing: .03em;
	color: var(--mist-2); text-decoration: none;
	transition: color .22s var(--ease), transform .22s var(--ease);
}
.sdxd__sublink:hover, .sdxd__sublink.is-current { color: var(--gold); transform: translateX(6px); }

/* ─── Breakpoints ─────────────────────────────────────────────────────── */

/* Below 1240px the phone button is the first thing to go; it is repeated in
   the drawer footer and in the site footer. */
@media (max-width: 1240px) {
	.sdxh__tel { display: none !important; }
}

/* Below 1100px the bar cannot hold the menu honestly, so use the drawer. */
@media (max-width: 1100px) {
	.sdxh__nav    { display: none !important; }
	.sdxh__burger { display: inline-flex; }
}

@media (max-width: 700px) {
	.sdxh__name { display: none; }      /* the seal already carries the name */
	.sdxh__bar  { gap: 1rem; }
}

/* ─── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.sdxh, .sdxh__panel, .sdxh__sublink, .sdxh__caret,
	.sdxd, .sdxd__link, .sdxd__toggle, .sdxd__panel, .sdxd__sublink {
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
	.sdxh__panel, .sdxh__sublink, .sdxd__link, .sdxd__toggle { transform: none !important; }
	.sdxh.is-hidden { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   HOME PAGE: LAS VEGAS LEAD BLOCK + SEPARATE LOS ANGELES BLOCK
   Styles for the markup this release's SQL writes into page 1097.
   .sdx-markets is the ivory plate, so this block is dark-on-light.
   ════════════════════════════════════════════════════════════════════════ */

/* The Las Vegas row: map card on the left, neighborhood links on the right. */
.sdx-markets__grid--lead { grid-template-columns: 1.05fr .95fr; align-items: start; }

.sdx-hoods { display: flex; flex-direction: column; gap: 1.15rem; }
.sdx-hoods .sdx-eyebrow { color: var(--gold-deep); }

.sdx-hoods__grid { display: flex; flex-wrap: wrap; gap: .55rem; }

.sdx-hood {
	display: inline-block;
	padding: .5rem 1rem;
	font-family: var(--sans);
	font-size: .8rem; letter-spacing: .03em;
	color: #2A2722; text-decoration: none;
	border: 1px solid rgba(111, 106, 94, .3);
	background: transparent;
	white-space: nowrap;
	transition: background .25s var(--ease), border-color .25s var(--ease),
	            color .25s var(--ease), transform .25s var(--ease);
}
.sdx-hood:hover,
.sdx-hood:focus-visible {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--gold);
	transform: translateY(-2px);
}
.sdx-hoods__all { align-self: flex-start; margin-top: .35rem; }

/* Los Angeles: its own dark plate under the Las Vegas block, so the second
   market reads as separate rather than as an equal half of a two-up grid. */
.sdx-la {
	background: var(--ink-2);
	color: var(--mist);
	padding-block: clamp(3.25rem, 6vw, 5.5rem);
	border-top: 1px solid var(--gold-faint);
}
.sdx-la__inner {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 4.5vw, 4rem);
	align-items: center;
}
.sdx-la__copy  { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.sdx-la__title { color: var(--ivory); }
.sdx-la__note  { max-width: 46ch; }
.sdx-la__media { overflow: hidden; border: 1px solid var(--gold-faint); }
.sdx-la__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }

@media (max-width: 960px) {
	.sdx-markets__grid--lead,
	.sdx-la__inner { grid-template-columns: 1fr; }
	.sdx-la__media { order: -1; }
}

/* ─── No-JS fallback nav ──────────────────────────────────────────────── */
.sdx-noscript-nav {
	padding: calc(var(--header-h) + .75rem) var(--pad-x) 1rem;
	border-bottom: 1px solid var(--gold-faint);
	background: var(--ink-2);
}
.sdx-noscript-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.sdx-noscript-nav ul ul { width: 100%; padding-left: 1rem; opacity: .75; }
.sdx-noscript-nav a {
	font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--mist); text-decoration: none;
}
.sdx-noscript-nav a:hover { color: var(--gold); }