/* Danznik Header v2. Owned styles, external + cacheable (no inline kit payload).
   CONSUMES the site's Core Framework tokens (colors, spacing, radius, type scale,
   weights) with px fallbacks for off-site rendering. The CF type/space tokens are
   rem-based and calibrated to the site's html{font-size:10px} root, so they
   resolve to the correct real sizes (raw rem values here would not; that trap is
   why fallbacks are px). Menu typography matches the ORIGINAL header nav
   (Poppins 14px semibold, antialiased, ink #121218; measured live 2026-07-11). */

.dz-header {
	--dzh-red: var(--primary, #ab1718);
	--dzh-red-dark: var(--primary-dark, #8b1314);    /* proposed CF token: --primary-dark */
	--dzh-red-tint: var(--primary-10, rgba(171, 23, 24, .1));
	--dzh-ink: var(--text-dark, #121218);            /* proposed CF token: --text-dark */
	--dzh-slate: var(--bg-base, #565676);
	--dzh-muted: var(--text-muted, #6B7280);
	--dzh-faint: var(--text-light, #9CA3AF);
	--dzh-line: var(--bg-light, #F3F4F6);
	--dzh-r-s: var(--radius-xs, 4px);
	--dzh-r-m: var(--radius-m, 8px);
	--dzh-shadow: 0 1px 2px rgba(18, 18, 24, .06), 0 10px 28px rgba(18, 18, 24, .10);
	--dzh-fs-xs: var(--text-xs, 12px);
	--dzh-fs-s: var(--text-s, 14px);
	--dzh-fs-m: var(--text-m, 16px);
	--dzh-w-med: var(--font-medium, 500);
	--dzh-w-semi: var(--font-semibold, 600);
	--dzh-w-bold: var(--font-bold, 700);
	--dzh-sp-3xs: var(--space-3xs, 4px);
	--dzh-sp-2xs: var(--space-2xs, 8px);
	--dzh-sp-xs: var(--space-xs, 12px);
	--dzh-sp-s: var(--space-s, 16px);
	--dzh-sp-m: var(--space-m, 20px);
	--dzh-sp-l: var(--space-l, 24px);
	--dzh-container: var(--container-width, 1200px); /* proposed CF token: --container-width */
	font-size: 16px;
	line-height: 1.5;
	background: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.dz-header *, .dz-header *::before, .dz-header *::after { box-sizing: border-box; }
.dz-header a { text-decoration: none; }
.dz-header ul { list-style: none; margin: 0; padding: 0; }
.dz-header p { margin: 0; }
.dz-header :focus-visible { outline: 2px solid var(--dzh-red); outline-offset: 2px; }

/* Content-width inner containers; crown/bar backgrounds stay full-bleed. */
.dz-crown__inner, .dz-bar__inner {
	max-width: var(--dzh-container); width: 100%; margin: 0 auto;
	display: flex; align-items: center;
}

/* Location visibility: the root attribute decides which location's variants show. */
.dz-header[data-current-location="nyc"] [data-loc="westchester"] { display: none !important; }
.dz-header[data-current-location="westchester"] [data-loc="nyc"] { display: none !important; }

/* ---------- Crown (identical both breakpoints) ---------- */
.dz-crown { background: var(--dzh-slate); color: #fff; padding: 0 var(--dzh-sp-l); }
.dz-crown__inner { justify-content: space-between; min-height: 34px; font-size: var(--dzh-fs-xs); }
.dz-crown__group { display: flex; align-items: center; gap: var(--dzh-sp-s); }
.dz-crown__label {
	font-size: 10.5px; font-weight: var(--dzh-w-bold); letter-spacing: .09em;
	text-transform: uppercase; opacity: .8;
}
.dz-crown__loc {
	color: #fff; opacity: .85; padding: var(--dzh-sp-2xs) 13px;
	font-weight: var(--dzh-w-semi); font-size: 13px;
}
.dz-crown__loc:hover { opacity: 1; }
.dz-header .dz-crown__loc--active {
	background: #fff; color: var(--dzh-ink); opacity: 1; font-weight: var(--dzh-w-bold);
	text-decoration: underline; text-underline-offset: 3px;
}
.dz-header .dz-crown__phone, .dz-header .dz-crown__contact {
	color: #fff; font-size: 13px; font-weight: var(--dzh-w-semi);
	text-decoration: underline; text-underline-offset: 3px;
}
.dz-header .dz-crown__phone:hover, .dz-header .dz-crown__contact:hover { opacity: .85; }

/* ---------- Bar ---------- */
.dz-bar {
	position: relative;
	background: #fff; border-bottom: 1px solid var(--dzh-line);
	padding: var(--dzh-sp-xs) var(--dzh-sp-l);
}
.dz-bar__inner { gap: var(--dzh-sp-2xs); }
.dz-bar__logo { display: inline-flex; margin-right: var(--dzh-sp-xs); flex: none; }
.dz-bar__logo img { height: 44px; width: auto; max-width: none; }
.dz-bar__actions { display: flex; align-items: center; gap: var(--dzh-sp-2xs); margin-left: auto; }

.dz-btn {
	display: inline-block; font-size: var(--dzh-fs-s); font-weight: var(--dzh-w-bold);
	padding: var(--dzh-sp-2xs) var(--dzh-sp-s); border-radius: var(--dzh-r-s);
	border: 1.5px solid transparent; white-space: nowrap; line-height: 1.4;
}
.dz-btn--outline { border-color: var(--dzh-muted); color: var(--dzh-ink); } /* 3:1 non-text contrast */
.dz-btn--outline:hover { border-color: var(--dzh-ink); }
.dz-btn--primary { background: var(--dzh-red); color: #fff; }
.dz-btn--primary:hover { background: var(--dzh-red-dark); color: #fff; }

.dz-bar__burger {
	display: none; background: none; border: 0; padding: 6px; cursor: pointer;
	color: var(--dzh-ink); line-height: 0;
}

/* ---------- Desktop nav ---------- */
.dz-nav { flex: 1; min-width: 0; }
.dz-nav__list { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.dz-nav__item { position: relative; }
.dz-nav__link, .dz-nav__toggle {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 9px 11px; border: 0; background: none; cursor: pointer;
	font: inherit; font-size: var(--nav-link-size, 14px); font-weight: var(--dzh-w-semi);
	color: var(--dzh-ink); border-radius: var(--dzh-r-s); white-space: nowrap;
}
.dz-nav__link:hover, .dz-nav__toggle:hover,
.dz-nav__toggle[aria-expanded="true"] { background: var(--dzh-line); color: var(--dzh-red-dark); }
.dz-nav__toggle--here, .dz-nav__link--here {
	color: var(--dzh-red-dark);
	box-shadow: inset 0 -2px 0 var(--dzh-red);
	border-radius: var(--dzh-r-s) var(--dzh-r-s) 0 0;
}
.dz-menu a.dz-is-current { color: var(--dzh-red-dark); font-weight: var(--dzh-w-bold); }
.dz-menu a.dz-is-current::before {
	content: ""; display: inline-block; width: 5px; height: 5px;
	border-radius: 50%; background: var(--dzh-red); margin-right: 7px; vertical-align: 2px;
}
.dz-sheet a.dz-is-current { color: var(--dzh-red-dark); }
.dz-caret { transition: transform .15s; }
.dz-nav__toggle[aria-expanded="true"] .dz-caret { transform: rotate(180deg); }

.dz-menu {
	position: absolute; left: -11px; top: calc(100% + 13px); z-index: 1050;
	width: max-content; max-width: calc(100vw - 48px);
	background: #fff; border: 1px solid var(--dzh-line);
	border-radius: var(--dzh-r-m); box-shadow: var(--dzh-shadow);
	padding: var(--dzh-sp-m) var(--dzh-sp-l) var(--dzh-sp-s);
}
.dz-menu--right { left: auto; right: -11px; }
.dz-menu--narrow { min-width: 300px; }
.dz-menu[hidden] { display: none; }
.dz-menu__cols { display: flex; gap: var(--space-2xl, 40px); }
.dz-menu__col { min-width: 170px; }
.dz-menu__title {
	font-size: 11px; font-weight: var(--dzh-w-bold); letter-spacing: .1em;
	text-transform: uppercase; color: var(--dzh-muted); margin: 0 0 var(--dzh-sp-2xs);
}
/* Menu links: the ORIGINAL header's nav texture (Poppins 14px semibold ink). */
.dz-menu__col a {
	display: inline-block; padding: 5.5px 0;
	font-size: var(--dzh-fs-s); font-weight: var(--dzh-w-semi); color: var(--dzh-ink);
}
.dz-menu__col a:hover { color: var(--dzh-red-dark); }
.dz-menu__xlink {
	font-size: 13px !important; color: var(--dzh-muted) !important;
	font-weight: var(--dzh-w-med) !important;
	border-top: 1px dashed var(--dzh-faint); margin-top: 7px; padding-top: 9px !important;
}
.dz-menu__xlink:hover { color: var(--dzh-red-dark) !important; }
.dz-tag {
	font-size: 10px; font-weight: var(--dzh-w-bold); letter-spacing: .04em;
	background: var(--dzh-red-tint); color: var(--dzh-red-dark);
	border-radius: var(--radius-full, 99px); padding: 1px 7px; margin-left: 6px;
	vertical-align: 1px; white-space: nowrap;
}
.dz-promo {
	background: var(--dzh-red-tint); border: 1px solid var(--primary-20, rgba(171, 23, 24, .2));
	border-radius: var(--dzh-r-m); padding: var(--dzh-sp-s); max-width: 240px;
}
.dz-promo p.dz-promo__title { font-weight: var(--dzh-w-bold); font-size: var(--dzh-fs-m); color: var(--dzh-red-dark); margin: 0; }
.dz-promo p { font-size: 12.5px; font-weight: var(--dzh-w-med); color: var(--dzh-ink); margin: 5px 0 9px; }
.dz-promo a { font-size: 13px; font-weight: var(--dzh-w-bold); color: var(--dzh-red); }

.dz-menu__scope {
	display: flex; gap: 6px; align-items: center; margin-top: var(--dzh-sp-s);
	padding: var(--dzh-sp-xs) 0 2px; border-top: 1px solid var(--dzh-line);
	font-size: var(--dzh-fs-xs); color: var(--dzh-muted);
}
.dz-menu__scope b { color: var(--dzh-ink); }
.dz-menu__flip {
	background: none; border: 0; padding: 0; margin-left: var(--dzh-sp-3xs); cursor: pointer;
	font: inherit; font-size: var(--dzh-fs-xs); font-weight: var(--dzh-w-semi); color: var(--dzh-red-dark);
}
.dz-menu__flip:hover { text-decoration: underline; }

/* ---------- Mobile sheet ---------- */
.dz-sheet {
	display: none; background: #fff; border-bottom: 1px solid var(--dzh-line);
	padding: var(--dzh-sp-3xs) var(--dzh-sp-s) calc(var(--space-2xl, 40px) + env(safe-area-inset-bottom));
	/* dvh tracks visible viewport as mobile browser chrome shows/hides; plain 100vh
	   measures the LARGEST viewport on iOS, so Chrome's persistent bottom bar covered
	   the sheet's last rows (reported on iPhone Chrome 2026-07-11). vh line = fallback. */
	max-height: calc(100vh - 110px);
	max-height: calc(100dvh - 110px); /* no-JS fallback; JS sets an exact height on open */
	overflow-y: auto;
	overscroll-behavior: contain;
}
.dz-sheet[hidden] { display: none !important; }
.dz-sheet__sec { margin-top: var(--dzh-sp-m); }
.dz-sheet__h {
	font-size: 10.5px; font-weight: var(--dzh-w-bold); letter-spacing: .1em;
	text-transform: uppercase; color: var(--dzh-muted); margin: 0 0 var(--dzh-sp-3xs);
}
.dz-sheet__row {
	display: flex; justify-content: space-between; align-items: center;
	padding: var(--dzh-sp-xs) 2px; font-size: var(--dzh-fs-s);
	font-weight: var(--dzh-w-semi); color: var(--dzh-ink);
	border-bottom: 1px solid var(--dzh-line);
}
.dz-sheet__row:hover { color: var(--dzh-red-dark); }
.dz-sheet__row--quiet { font-weight: var(--dzh-w-med); color: var(--dzh-muted); }
.dz-sheet__sub { font-size: 11px; font-weight: var(--dzh-w-med); color: var(--dzh-muted); }
.dz-chips { display: flex; flex-wrap: wrap; gap: var(--dzh-sp-2xs); padding: var(--dzh-sp-xs) 0 2px; }
.dz-chip {
	font-size: 12.5px; font-weight: var(--dzh-w-semi);
	background: var(--dzh-line); border-radius: var(--radius-full, 99px);
	padding: 5px 12px; color: var(--dzh-ink);
}
.dz-chip:hover { background: var(--dzh-red-tint); color: var(--dzh-red-dark); }
.dz-sheet__note { display: block; font-size: var(--dzh-fs-xs); color: var(--dzh-muted); padding: var(--dzh-sp-2xs) 0 2px; }
.dz-sheet__note:hover { color: var(--dzh-red-dark); }
.dz-sheet__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--dzh-sp-s); padding-top: var(--dzh-sp-3xs); }
.dz-sheet__grid a {
	display: block; padding: var(--dzh-sp-2xs) 0; font-size: 13.5px;
	font-weight: var(--dzh-w-med); color: var(--dzh-muted);
	border-bottom: 1px solid var(--dzh-line);
}
.dz-sheet__grid a:hover { color: var(--dzh-red-dark); }

/* ---------- Breakpoints (991px matches the site) ---------- */
@media (max-width: 991px) {
	.dz-nav, .dz-bar__account { display: none; }
	.dz-bar__burger { display: inline-flex; }
	.dz-bar { padding: 10px var(--dzh-sp-s); }
	.dz-bar__logo img { height: 38px; }
	.dz-bar__cta { font-size: 12.5px; padding: 7px var(--dzh-sp-xs); }
	.dz-crown { padding: 0 var(--dzh-sp-s) 0 var(--dzh-sp-3xs); }
	.dz-crown__phone, .dz-crown__label { display: none; }
	/* Open sheet = fixed overlay pinned to the viewport bottom. The browser keeps
	   bottom:0 glued to the VISIBLE edge through chrome show/hide, so neither the
	   iOS bottom bar can cover rows nor the underlying page can peek: both prior
	   height-math approaches (dvh offset, innerHeight at open) went stale when
	   Safari/Chrome collapsed their bars after open. JS measures only the top. */
	.dz-header--open .dz-sheet {
		display: block;
		position: fixed; left: 0; right: 0; bottom: 0;
		top: 93px; /* no-JS fallback; JS measures the real header bottom on open */
		max-height: none;
		z-index: 1080;
		border-bottom: 0;
	}
}
@media (min-width: 992px) {
	.dz-bar__cta { display: inline-block; }
	.dz-sheet { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	.dz-header * { transition: none !important; }
}