/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */

/*
 * DHC 2026 - main stylesheet
 * Depends on tokens.css for every value. No raw hex below this line.
 */

/* =========================================================================
 * 1. RESET AND BASE
 * ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	background: var(--dhc-surface);
	color: var(--dhc-text);
	font-family: var(--dhc-font-sans);
	font-size: var(--dhc-text-base);
	line-height: var(--dhc-leading-normal);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

h1, h2, h3, h4 {
	font-family: var(--dhc-font-display);
	font-weight: var(--dhc-weight-semibold);
	line-height: var(--dhc-leading-tight);
	letter-spacing: var(--dhc-tracking-tight);
	color: var(--dhc-text-strong);
	margin: 0 0 var(--dhc-space-sm);
	text-wrap: balance;
}

h1 { font-size: var(--dhc-text-4xl); }
h2 { font-size: var(--dhc-text-3xl); }
h3 { font-size: var(--dhc-text-2xl); }
h4 { font-size: var(--dhc-text-xl); }

h5 {
	font-family: var(--dhc-font-sans);
	font-size: var(--dhc-text-lg);
	font-weight: var(--dhc-weight-semibold);
	color: var(--dhc-text-strong);
	margin: 0 0 var(--dhc-space-2xs);
}

/* The eyebrow. Small caps sans over a serif heading is the one typographic
   move this theme repeats, and it comes straight off the logo lockup. */
h6, .dhc-eyebrow {
	font-family: var(--dhc-font-sans);
	font-size: var(--dhc-text-sm);
	font-weight: var(--dhc-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--dhc-tracking-caps);
	color: var(--dhc-text-muted);
	margin: 0 0 var(--dhc-space-2xs);
}

p { margin: 0 0 var(--dhc-space-sm); max-width: var(--dhc-measure); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--dhc-space-sm); padding-left: 1.25rem; max-width: var(--dhc-measure); }
li { margin-bottom: var(--dhc-space-3xs); }

a { color: var(--dhc-link); text-underline-offset: 0.18em; }
a:hover { color: var(--dhc-link-hover); }

strong, b { font-weight: var(--dhc-weight-semibold); }

/* Images never cause layout shift: dimensions come from the markup and the
   intrinsic ratio is preserved here. */
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

hr {
	border: 0;
	border-top: 1px solid var(--dhc-border-subtle);
	margin: var(--dhc-space-xl) 0;
}

/* =========================================================================
 * 2. FOCUS AND SKIP LINK
 * WCAG 2.4.11: the focused control must never sit under sticky chrome.
 * scroll-margin-top reserves the header height so anchored focus clears it.
 * ========================================================================= */

:focus-visible {
	outline: 3px solid var(--dhc-focus);
	outline-offset: 2px;
	border-radius: var(--dhc-radius-sm);
}

:focus:not(:focus-visible) { outline: none; }

a, button, input, select, textarea, summary, [tabindex] {
	scroll-margin-top: calc(var(--dhc-header-height) + var(--dhc-space-lg));
}

.dhc-skip-link {
	position: absolute;
	left: var(--dhc-space-sm);
	top: var(--dhc-space-sm);
	z-index: 999;
	transform: translateY(-200%);
	background: var(--dhc-accent);
	color: var(--dhc-accent-contrast);
	padding: var(--dhc-space-2xs) var(--dhc-space-md);
	border-radius: var(--dhc-radius-full);
	font-weight: var(--dhc-weight-semibold);
	text-decoration: none;
	transition: transform var(--dhc-duration-fast) var(--dhc-ease);
}

.dhc-skip-link:focus {
	transform: translateY(0);
	color: var(--dhc-accent-contrast);
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}

/* =========================================================================
 * 3. LAYOUT
 * ========================================================================= */

.dhc-wrap {
	width: 100%;
	max-width: var(--dhc-wide-width);
	margin-inline: auto;
	padding-inline: var(--dhc-gutter);
}

.dhc-wrap--narrow { max-width: calc(var(--dhc-content-width) + var(--dhc-gutter) * 2); }

.dhc-section { padding-block: var(--dhc-section-y); }

.dhc-section--sunken  { background: var(--dhc-surface-sunken); }
.dhc-section--raised  { background: var(--dhc-surface-raised); }

/* The inverse band is where the brand cyan and teal finally run at full
   strength. On white they measure 2.55:1 and 2.46:1 and are unusable; on
   this surface they reach 6.87:1 and 7.14:1. */
.dhc-section--inverse {
	background: var(--dhc-surface-inverse);
	color: var(--dhc-text-inverse);
}

.dhc-section--inverse h1,
.dhc-section--inverse h2,
.dhc-section--inverse h3,
.dhc-section--inverse h4,
.dhc-section--inverse h5 { color: var(--dhc-text-inverse); }

.dhc-section--inverse .dhc-eyebrow,
.dhc-section--inverse h6 { color: var(--dhc-cyan-400); }

.dhc-section--inverse a { color: var(--dhc-cyan-400); }
.dhc-section--inverse a:hover { color: var(--dhc-cyan-300); }

.dhc-main { flex: 1 0 auto; }

.dhc-stack > * + * { margin-top: var(--dhc-space-sm); }
.dhc-stack--lg > * + * { margin-top: var(--dhc-space-lg); }

.dhc-section-head {
	max-width: var(--dhc-measure);
	margin-bottom: var(--dhc-space-xl);
}

.dhc-section-head p {
	font-size: var(--dhc-text-lg);
	color: var(--dhc-text-muted);
}

/* =========================================================================
 * 4. BUTTONS
 * Every control clears the 44px touch target from the tokens, which is well
 * past the 24px WCAG 2.5.8 floor.
 * ========================================================================= */

.dhc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dhc-space-2xs);
	min-height: var(--dhc-target-min);
	padding: var(--dhc-space-2xs) var(--dhc-space-md);
	border: 2px solid transparent;
	border-radius: var(--dhc-radius-full);
	font-family: var(--dhc-font-sans);
	font-size: var(--dhc-text-base);
	font-weight: var(--dhc-weight-semibold);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dhc-duration-fast) var(--dhc-ease),
	            border-color var(--dhc-duration-fast) var(--dhc-ease),
	            color var(--dhc-duration-fast) var(--dhc-ease);
}

.dhc-btn--primary {
	background: var(--dhc-accent);
	color: var(--dhc-accent-contrast);
	border-color: var(--dhc-accent);
}

.dhc-btn--primary:hover,
.dhc-btn--primary:focus {
	background: var(--dhc-accent-hover);
	border-color: var(--dhc-accent-hover);
	color: var(--dhc-accent-contrast);
}

.dhc-btn--secondary {
	background: transparent;
	color: var(--dhc-link);
	border-color: var(--dhc-border-strong);
}

.dhc-btn--secondary:hover,
.dhc-btn--secondary:focus {
	background: var(--dhc-accent-quiet);
	border-color: var(--dhc-link);
	color: var(--dhc-link-hover);
}

.dhc-btn--danger {
	background: var(--dhc-danger);
	color: #FFFFFF;
	border-color: var(--dhc-danger);
}

.dhc-btn--danger:hover,
.dhc-btn--danger:focus {
	background: var(--dhc-danger-hover);
	border-color: var(--dhc-danger-hover);
	color: #FFFFFF;
}

/* On any dark band the accent flips up the ramp so it stays legible. The
   hero is included: at light-theme values, brand-700 on the dark hero is
   3.18:1, which fails AA for the secondary button's text. */
.dhc-section--inverse .dhc-btn--primary,
.dhc-hero .dhc-btn--primary {
	background: var(--dhc-cyan-400);
	border-color: var(--dhc-cyan-400);
	color: var(--dhc-indigo-950);
}

.dhc-section--inverse .dhc-btn--primary:hover,
.dhc-section--inverse .dhc-btn--primary:focus,
.dhc-hero .dhc-btn--primary:hover,
.dhc-hero .dhc-btn--primary:focus {
	background: var(--dhc-cyan-300);
	border-color: var(--dhc-cyan-300);
	color: var(--dhc-indigo-950);
}

.dhc-section--inverse .dhc-btn--secondary,
.dhc-hero .dhc-btn--secondary {
	color: var(--dhc-cyan-400);
	border-color: var(--dhc-slate-600);
}

.dhc-section--inverse .dhc-btn--secondary:hover,
.dhc-section--inverse .dhc-btn--secondary:focus,
.dhc-hero .dhc-btn--secondary:hover,
.dhc-hero .dhc-btn--secondary:focus {
	background: rgba(255, 255, 255, .08);
	border-color: var(--dhc-cyan-400);
	color: var(--dhc-cyan-300);
}

.dhc-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dhc-space-xs);
	margin-top: var(--dhc-space-md);
}

/* A tertiary action looks like a link, never like a button. */
.dhc-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--dhc-space-3xs);
	font-weight: var(--dhc-weight-semibold);
	text-decoration: underline;
	min-height: var(--dhc-target-min);
}

.dhc-link-arrow::after {
	content: "\2192";
	transition: transform var(--dhc-duration-fast) var(--dhc-ease);
}

.dhc-link-arrow:hover::after { transform: translateX(3px); }

/* =========================================================================
 * 5. EMERGENCY BAR
 * Not a banner, not dismissible, not sticky. It sits at the very top of the
 * document and scrolls away like content, because a fixed strip would eat
 * mobile viewport on every page and risk covering the focused control that
 * WCAG 2.4.11 says must stay visible. It is the first thing in the source
 * order so a screen reader reaches it before the navigation.
 * ========================================================================= */

.dhc-emergency {
	background: var(--dhc-red-800);
	color: #FFFFFF;
	font-size: var(--dhc-text-sm);
}

.dhc-emergency__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--dhc-space-2xs) var(--dhc-space-md);
	padding-block: var(--dhc-space-2xs);
	text-align: center;
}

.dhc-emergency strong { font-weight: var(--dhc-weight-bold); }

.dhc-emergency a {
	color: #FFFFFF;
	font-weight: var(--dhc-weight-semibold);
	text-decoration: underline;
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

.dhc-emergency a:hover { color: var(--dhc-red-100); }

.dhc-emergency :focus-visible { outline-color: #FFFFFF; }

/* =========================================================================
 * 6. UTILITY BAR
 * The transactional links live here so they do not compete for one of the
 * seven primary navigation slots (Hick's law, section 3.1).
 * ========================================================================= */

.dhc-utility {
	background: var(--dhc-surface-inverse);
	color: var(--dhc-slate-300);
	font-size: var(--dhc-text-sm);
}

.dhc-utility__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--dhc-space-md);
	min-height: 2.5rem;
	flex-wrap: wrap;
}

.dhc-utility a {
	color: var(--dhc-slate-200);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--dhc-space-3xs);
	padding-block: var(--dhc-space-3xs);
	min-height: 2.25rem;
}

.dhc-utility a:hover { color: #FFFFFF; text-decoration: underline; }
.dhc-utility :focus-visible { outline-color: var(--dhc-cyan-400); }

.dhc-utility__phone { margin-inline-end: auto; font-weight: var(--dhc-weight-semibold); }

@media (max-width: 47.99em) {
	.dhc-utility__inner { justify-content: center; gap: var(--dhc-space-sm); }
	.dhc-utility__phone { margin-inline-end: 0; }
}

/* =========================================================================
 * 7. HEADER AND PRIMARY NAVIGATION
 * ========================================================================= */

.dhc-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--dhc-surface-raised);
	border-bottom: 1px solid var(--dhc-border-subtle);
}

.dhc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dhc-space-md);
	min-height: var(--dhc-header-height);
}

.dhc-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--dhc-space-2xs);
	text-decoration: none;
	color: var(--dhc-text-strong);
	flex-shrink: 0;
}

.dhc-brand img { max-height: 2.75rem; width: auto; }

.dhc-brand__text {
	font-family: var(--dhc-font-display);
	font-size: var(--dhc-text-lg);
	font-weight: var(--dhc-weight-semibold);
	letter-spacing: var(--dhc-tracking-tight);
	line-height: 1.1;
}

/* ---- desktop nav ---- */

.dhc-nav { display: none; }

@media (min-width: 64em) {
	.dhc-nav { display: block; }
}

.dhc-nav__list {
	display: flex;
	align-items: center;
	gap: var(--dhc-space-3xs);
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}

.dhc-nav__list li { margin: 0; position: relative; }

.dhc-nav__list a,
.dhc-nav__submenu-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--dhc-space-3xs);
	min-height: var(--dhc-target-min);
	padding: var(--dhc-space-3xs) var(--dhc-space-xs);
	border: 0;
	background: none;
	border-radius: var(--dhc-radius-md);
	font-family: var(--dhc-font-sans);
	font-size: var(--dhc-text-base);
	font-weight: var(--dhc-weight-medium);
	color: var(--dhc-text);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.dhc-nav__list a:hover,
.dhc-nav__submenu-toggle:hover {
	background: var(--dhc-accent-quiet);
	color: var(--dhc-link-hover);
}

/* Current page is marked with weight and a rule, never with color alone. */
.dhc-nav__list .current-menu-item > a,
.dhc-nav__list .current-menu-ancestor > a,
.dhc-nav__list [aria-current="page"] {
	font-weight: var(--dhc-weight-semibold);
	color: var(--dhc-text-strong);
	box-shadow: inset 0 -3px 0 var(--dhc-accent);
}

/* ---- dropdown ----
   Opens on click, not hover. Touch devices do not hover (section 8), and a
   hover-only menu hides the whole Clinics branch from them. */

.dhc-nav__submenu {
	position: absolute;
	top: calc(100% + var(--dhc-space-3xs));
	left: 0;
	min-width: 16rem;
	margin: 0;
	padding: var(--dhc-space-3xs);
	list-style: none;
	background: var(--dhc-surface-raised);
	border: 1px solid var(--dhc-border-subtle);
	border-radius: var(--dhc-radius-lg);
	box-shadow: var(--dhc-shadow-lg);
	z-index: 110;
}

.dhc-nav__submenu[hidden] { display: none; }

.dhc-nav__submenu a {
	display: flex;
	width: 100%;
	white-space: normal;
}

.dhc-nav__submenu-toggle[aria-expanded="true"] {
	background: var(--dhc-accent-quiet);
	color: var(--dhc-accent-hover);
}

.dhc-nav__caret {
	width: .6em;
	height: .6em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--dhc-duration-fast) var(--dhc-ease);
}

.dhc-nav__submenu-toggle[aria-expanded="true"] .dhc-nav__caret {
	transform: rotate(-135deg) translate(-2px, -2px);
}

/* ---- mobile nav ---- */

.dhc-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--dhc-space-2xs);
	min-height: var(--dhc-target-min);
	min-width: var(--dhc-target-min);
	padding: var(--dhc-space-2xs) var(--dhc-space-xs);
	background: transparent;
	border: 2px solid var(--dhc-border-strong);
	border-radius: var(--dhc-radius-full);
	font-family: var(--dhc-font-sans);
	font-size: var(--dhc-text-sm);
	font-weight: var(--dhc-weight-semibold);
	color: var(--dhc-text-strong);
	cursor: pointer;
}

.dhc-nav__toggle:hover { background: var(--dhc-accent-quiet); border-color: var(--dhc-accent); }

/* Declared after the toggle's own display rule so source order does not
   defeat it. The button is hidden on desktop, where the full nav is shown. */
@media (min-width: 64em) {
	.dhc-nav__toggle { display: none; }
}

.dhc-burger { display: grid; gap: 4px; width: 18px; }
.dhc-burger span { display: block; height: 2px; background: currentColor; border-radius: 2px; }

.dhc-mobile-nav {
	display: block;
	border-top: 1px solid var(--dhc-border-subtle);
	background: var(--dhc-surface-raised);
	max-height: calc(100vh - var(--dhc-header-height));
	overflow-y: auto;
}

.dhc-mobile-nav[hidden] { display: none; }

@media (min-width: 64em) {
	.dhc-mobile-nav { display: none; }
}

.dhc-mobile-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}

.dhc-mobile-nav li { margin: 0; border-bottom: 1px solid var(--dhc-border-subtle); }
.dhc-mobile-nav li:last-child { border-bottom: 0; }

.dhc-mobile-nav a {
	display: flex;
	align-items: center;
	min-height: var(--dhc-target-min);
	padding: var(--dhc-space-2xs) 0;
	color: var(--dhc-text);
	font-weight: var(--dhc-weight-medium);
	text-decoration: none;
}

.dhc-mobile-nav a:hover { color: var(--dhc-accent); }

.dhc-mobile-nav .sub-menu { padding-left: var(--dhc-space-md); }
.dhc-mobile-nav .sub-menu a { font-weight: var(--dhc-weight-normal); }

/* ---- theme toggle ---- */

.dhc-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dhc-space-3xs);
	min-height: 2.25rem;
	padding: 0 var(--dhc-space-2xs);
	background: transparent;
	border: 1px solid var(--dhc-slate-700);
	border-radius: var(--dhc-radius-full);
	color: var(--dhc-slate-200);
	font-family: var(--dhc-font-sans);
	font-size: var(--dhc-text-xs);
	cursor: pointer;
}

.dhc-theme-toggle:hover { color: #FFFFFF; border-color: var(--dhc-cyan-400); }

/* =========================================================================
 * 8. FOOTER
 * ========================================================================= */

.dhc-footer {
	background: var(--dhc-surface-inverse);
	color: var(--dhc-slate-300);
	padding-block: var(--dhc-space-2xl) var(--dhc-space-lg);
	margin-top: var(--dhc-space-3xl);
}

.dhc-footer h2, .dhc-footer h3 { color: var(--dhc-slate-50); font-size: var(--dhc-text-sm); }

.dhc-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--dhc-space-xl);
}

.dhc-footer__col h2,
.dhc-footer__col h3 {
	font-family: var(--dhc-font-sans);
	font-size: var(--dhc-text-sm);
	font-weight: var(--dhc-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--dhc-tracking-caps);
	color: var(--dhc-cyan-400);
	margin-bottom: var(--dhc-space-xs);
}

.dhc-footer ul { list-style: none; margin: 0; padding: 0; }
.dhc-footer li { margin-bottom: var(--dhc-space-3xs); }

.dhc-footer a {
	color: var(--dhc-slate-200);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
}

.dhc-footer a:hover { color: #FFFFFF; text-decoration: underline; }
.dhc-footer :focus-visible { outline-color: var(--dhc-cyan-400); }

.dhc-footer__brand img { max-height: 3rem; width: auto; margin-bottom: var(--dhc-space-sm); }

.dhc-footer__legal {
	margin-top: var(--dhc-space-xl);
	padding-top: var(--dhc-space-md);
	border-top: 1px solid var(--dhc-slate-800);
	display: flex;
	flex-wrap: wrap;
	gap: var(--dhc-space-xs) var(--dhc-space-md);
	align-items: center;
	justify-content: space-between;
	font-size: var(--dhc-text-sm);
	color: var(--dhc-slate-400);
}

.dhc-footer__legal p { max-width: none; margin: 0; }

.dhc-footer__legal p:last-child {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dhc-space-xs) var(--dhc-space-md);
}

.dhc-footer__disclaimer {
	margin-top: var(--dhc-space-sm);
	font-size: var(--dhc-text-xs);
	color: var(--dhc-slate-400);
	max-width: var(--dhc-measure);
}

/* =========================================================================
 * 9. HERO
 * One promise, one primary action, both above the fold on a phone.
 * ========================================================================= */

.dhc-hero {
	position: relative;
	background: var(--dhc-surface-inverse);
	color: var(--dhc-text-inverse);
	overflow: hidden;
}

.dhc-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.dhc-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* A solid-to-transparent scrim rather than a flat overlay: the text side
   stays at full contrast while the photograph survives on the other. Checked
   against paper-50 text at the darkest point, not averaged. */
.dhc-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		var(--dhc-indigo-950) 0%,
		var(--dhc-indigo-950) 42%,
		rgba(23, 34, 41, .82) 62%,
		rgba(23, 34, 41, .55) 100%
	);
}

.dhc-hero__inner {
	position: relative;
	z-index: 1;
	padding-block: clamp(3rem, 2rem + 6vw, 7rem);
	max-width: 40rem;
}

.dhc-hero h1 {
	color: var(--dhc-slate-50);
	font-size: var(--dhc-text-5xl);
	margin-bottom: var(--dhc-space-md);
}

.dhc-hero__lede {
	font-size: var(--dhc-text-lg);
	color: var(--dhc-slate-200);
	max-width: var(--dhc-measure-short);
	margin-bottom: var(--dhc-space-lg);
}

.dhc-hero .dhc-eyebrow { color: var(--dhc-cyan-400); }

/* brand-600 focus ring measures 4.21:1 on the band, so it stays visible. */
.dhc-hero :focus-visible,
.dhc-section--inverse :focus-visible { outline-color: var(--dhc-cyan-400); }

/* =========================================================================
 * 10. BENTO TASK GRID
 * Section 7.3: bento works when it expresses grouping. One primary tile,
 * supporting tiles, then a quiet row. It fails when every tile shouts, so
 * exactly one tile carries the accent fill.
 * ========================================================================= */

.dhc-bento {
	display: grid;
	gap: var(--dhc-space-sm);
	grid-template-columns: 1fr;
}

@media (min-width: 40em) {
	.dhc-bento { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
	.dhc-bento { grid-template-columns: repeat(4, 1fr); }
	.dhc-bento__tile--primary { grid-column: span 2; grid-row: span 2; }
}

.dhc-bento__tile {
	display: flex;
	flex-direction: column;
	gap: var(--dhc-space-2xs);
	padding: var(--dhc-space-md);
	min-height: 9rem;
	background: var(--dhc-surface-raised);
	border: 1px solid var(--dhc-border-subtle);
	border-radius: var(--dhc-radius-lg);
	color: var(--dhc-text);
	text-decoration: none;
	transition: border-color var(--dhc-duration-fast) var(--dhc-ease),
	            box-shadow var(--dhc-duration-fast) var(--dhc-ease),
	            transform var(--dhc-duration-fast) var(--dhc-ease);
}

.dhc-bento__tile:hover {
	border-color: var(--dhc-accent);
	box-shadow: var(--dhc-shadow-md);
	transform: translateY(-2px);
	color: var(--dhc-text);
}

@media (prefers-reduced-motion: reduce) {
	.dhc-bento__tile:hover { transform: none; }
}

.dhc-bento__tile h2,
.dhc-bento__tile h3 {
	font-size: var(--dhc-text-xl);
	margin: 0;
}

.dhc-bento__tile p {
	color: var(--dhc-text-muted);
	font-size: var(--dhc-text-base);
	margin: 0;
}

.dhc-bento__tile--primary {
	background: var(--dhc-surface-feature);
	border-color: var(--dhc-border-feature);
	color: var(--dhc-text-inverse);
	justify-content: flex-end;
	min-height: 14rem;
}

.dhc-bento__tile--primary h2,
.dhc-bento__tile--primary h3 {
	color: var(--dhc-slate-50);
	font-size: var(--dhc-text-2xl);
}

.dhc-bento__tile--primary p { color: var(--dhc-slate-200); }
.dhc-bento__tile--primary .dhc-eyebrow { color: var(--dhc-cyan-400); }
.dhc-bento__tile--primary:hover { border-color: var(--dhc-cyan-400); color: var(--dhc-text-inverse); }

.dhc-bento__icon {
	width: 2.25rem;
	height: 2.25rem;
	color: var(--dhc-accent);
	flex-shrink: 0;
}

.dhc-bento__tile--primary .dhc-bento__icon { color: var(--dhc-cyan-400); }

/* =========================================================================
 * 11. CARDS
 * ========================================================================= */

.dhc-grid {
	display: grid;
	gap: var(--dhc-space-md);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.dhc-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }

.dhc-card {
	display: flex;
	flex-direction: column;
	background: var(--dhc-surface-raised);
	border: 1px solid var(--dhc-border-subtle);
	border-radius: var(--dhc-radius-lg);
	overflow: hidden;
	height: 100%;
}

.dhc-card__media {
	aspect-ratio: 3 / 2;
	background: var(--dhc-surface-sunken);
	overflow: hidden;
}

.dhc-card__media img { width: 100%; height: 100%; object-fit: cover; }

.dhc-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--dhc-space-2xs);
	padding: var(--dhc-space-md);
	flex: 1;
}

.dhc-card__body h2,
.dhc-card__body h3 { font-size: var(--dhc-text-xl); margin: 0; }
.dhc-card__body p { color: var(--dhc-text-muted); margin: 0; }

/* The whole card is clickable, but only the heading link is in the tab order,
   so keyboard users get one stop per card rather than three. */
.dhc-card__link { text-decoration: none; color: var(--dhc-text-strong); }
.dhc-card__link::after { content: ""; position: absolute; inset: 0; }
.dhc-card { position: relative; }
.dhc-card:has(.dhc-card__link:hover) { border-color: var(--dhc-accent); }
.dhc-card:has(.dhc-card__link:focus-visible) {
	outline: 3px solid var(--dhc-focus);
	outline-offset: 2px;
}
.dhc-card__link:focus-visible { outline: none; }

.dhc-card__meta {
	margin-top: auto;
	padding-top: var(--dhc-space-2xs);
	font-size: var(--dhc-text-sm);
	color: var(--dhc-text-muted);
}

/* ---- provider card ---- */

.dhc-provider-card .dhc-card__media { aspect-ratio: 1 / 1; }

.dhc-provider-card__credentials {
	font-size: var(--dhc-text-sm);
	color: var(--dhc-text-muted);
	font-weight: var(--dhc-weight-medium);
}

/* Availability is shown with a word plus a shape, never color alone. */
.dhc-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--dhc-space-3xs);
	padding: 2px var(--dhc-space-2xs);
	border-radius: var(--dhc-radius-full);
	font-size: var(--dhc-text-xs);
	font-weight: var(--dhc-weight-semibold);
	border: 1px solid transparent;
	width: fit-content;
}

.dhc-badge--open {
	background: var(--dhc-success-quiet);
	color: var(--dhc-success);
	border-color: var(--dhc-success);
}

.dhc-badge--closed {
	background: var(--dhc-surface-sunken);
	color: var(--dhc-text-muted);
	border-color: var(--dhc-border-strong);
}

.dhc-badge__dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }

/* =========================================================================
 * 12. FORMS
 * Visible labels always. Placeholder is never a label (section 16).
 * ========================================================================= */

.dhc-field { margin-bottom: var(--dhc-space-md); }

.dhc-field label,
.dhc-label {
	display: block;
	margin-bottom: var(--dhc-space-3xs);
	font-size: var(--dhc-text-sm);
	font-weight: var(--dhc-weight-semibold);
	color: var(--dhc-text-strong);
}

.dhc-field__hint {
	margin: var(--dhc-space-3xs) 0 0;
	font-size: var(--dhc-text-sm);
	color: var(--dhc-text-muted);
}

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="number"], input[type="date"], input[type="time"],
input[type="password"], select, textarea {
	width: 100%;
	min-height: var(--dhc-target-min);
	padding: var(--dhc-space-2xs) var(--dhc-space-xs);
	background: var(--dhc-surface-raised);
	color: var(--dhc-text);
	font-family: var(--dhc-font-sans);
	font-size: var(--dhc-text-base);
	border: 1px solid var(--dhc-border-strong);
	border-radius: var(--dhc-radius-md);
}

textarea { min-height: 8rem; resize: vertical; }

select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
	                  linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: var(--dhc-space-xl);
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 3px solid var(--dhc-focus);
	outline-offset: 1px;
	border-color: var(--dhc-accent);
}

/* Errors carry text and an icon, not color alone (section 9.2). */
.dhc-field--error input,
.dhc-field--error select,
.dhc-field--error textarea { border-color: var(--dhc-danger); border-width: 2px; }

.dhc-field__error {
	display: flex;
	align-items: flex-start;
	gap: var(--dhc-space-3xs);
	margin: var(--dhc-space-3xs) 0 0;
	font-size: var(--dhc-text-sm);
	font-weight: var(--dhc-weight-medium);
	color: var(--dhc-danger);
}

.dhc-field__error::before { content: "\26A0"; flex-shrink: 0; }

.dhc-required { color: var(--dhc-danger); font-weight: var(--dhc-weight-bold); }

fieldset {
	border: 1px solid var(--dhc-border-subtle);
	border-radius: var(--dhc-radius-md);
	padding: var(--dhc-space-md);
	margin: 0 0 var(--dhc-space-md);
}

legend {
	padding-inline: var(--dhc-space-2xs);
	font-weight: var(--dhc-weight-semibold);
	color: var(--dhc-text-strong);
}

/* ---- filter bar on the provider directory ---- */

.dhc-filters {
	background: var(--dhc-surface-sunken);
	border: 1px solid var(--dhc-border-subtle);
	border-radius: var(--dhc-radius-lg);
	padding: var(--dhc-space-md);
	margin-bottom: var(--dhc-space-xl);
}

.dhc-filters__row {
	display: grid;
	gap: var(--dhc-space-sm);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	align-items: end;
}

.dhc-filters .dhc-field { margin-bottom: 0; }

.dhc-filters__actions { display: flex; gap: var(--dhc-space-2xs); flex-wrap: wrap; }

.dhc-result-count {
	font-size: var(--dhc-text-base);
	color: var(--dhc-text-muted);
	margin-bottom: var(--dhc-space-md);
}

/* =========================================================================
 * 13. TABLES
 * Hours are a table because hours are tabular. Horizontal scroll is the
 * mobile strategy and it gets a visible hint (section 10).
 * ========================================================================= */

.dhc-table-scroll { overflow-x: auto; }

table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

caption {
	text-align: left;
	font-weight: var(--dhc-weight-semibold);
	color: var(--dhc-text-strong);
	padding-bottom: var(--dhc-space-2xs);
}

th, td {
	text-align: left;
	padding: var(--dhc-space-2xs) var(--dhc-space-xs);
	border-bottom: 1px solid var(--dhc-border-subtle);
}

th { font-weight: var(--dhc-weight-semibold); color: var(--dhc-text-strong); }

tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

.dhc-hours-table td:last-child { text-align: right; white-space: nowrap; }
.dhc-hours-table .is-closed { color: var(--dhc-text-muted); }

/* =========================================================================
 * 14. PROSE, PAGINATION, AND ODDS AND ENDS
 * ========================================================================= */

.dhc-prose > * + * { margin-top: var(--dhc-space-sm); }
.dhc-prose h2 { margin-top: var(--dhc-space-xl); }
.dhc-prose h3 { margin-top: var(--dhc-space-lg); }
.dhc-prose img { border-radius: var(--dhc-radius-lg); }

.dhc-breadcrumbs {
	font-size: var(--dhc-text-sm);
	color: var(--dhc-text-muted);
	padding-block: var(--dhc-space-sm);
}

.dhc-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dhc-space-3xs);
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}

.dhc-breadcrumbs li { margin: 0; display: flex; align-items: center; gap: var(--dhc-space-3xs); }
.dhc-breadcrumbs li + li::before { content: "/"; color: var(--dhc-border-strong); }

.dhc-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dhc-space-2xs);
	margin-top: var(--dhc-space-xl);
}

.dhc-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--dhc-target-min);
	min-height: var(--dhc-target-min);
	padding-inline: var(--dhc-space-2xs);
	border: 1px solid var(--dhc-border-strong);
	border-radius: var(--dhc-radius-md);
	text-decoration: none;
	color: var(--dhc-text);
}

.dhc-pagination .page-numbers:hover { background: var(--dhc-accent-quiet); border-color: var(--dhc-accent); }

.dhc-pagination .page-numbers.current {
	background: var(--dhc-accent);
	border-color: var(--dhc-accent);
	color: var(--dhc-accent-contrast);
	font-weight: var(--dhc-weight-semibold);
}

.dhc-empty {
	padding: var(--dhc-space-xl);
	text-align: center;
	background: var(--dhc-surface-sunken);
	border: 1px dashed var(--dhc-border-strong);
	border-radius: var(--dhc-radius-lg);
}

.dhc-empty p { margin-inline: auto; }

.dhc-definition-list { display: grid; gap: var(--dhc-space-sm); margin: 0; }

@media (min-width: 40em) {
	.dhc-definition-list { grid-template-columns: auto 1fr; gap: var(--dhc-space-2xs) var(--dhc-space-md); }
}

.dhc-definition-list dt {
	font-size: var(--dhc-text-sm);
	font-weight: var(--dhc-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--dhc-tracking-caps);
	color: var(--dhc-text-muted);
}

.dhc-definition-list dd { margin: 0; }

.dhc-tag-list { display: flex; flex-wrap: wrap; gap: var(--dhc-space-3xs); list-style: none; margin: 0; padding: 0; }

.dhc-tag {
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
	padding: 0 var(--dhc-space-2xs);
	background: var(--dhc-surface-sunken);
	border: 1px solid var(--dhc-border-subtle);
	border-radius: var(--dhc-radius-full);
	font-size: var(--dhc-text-sm);
	color: var(--dhc-text);
	text-decoration: none;
}

.dhc-tag:hover { background: var(--dhc-accent-quiet); border-color: var(--dhc-link); color: var(--dhc-link-hover); }

@media print {
	.dhc-utility, .dhc-nav, .dhc-nav__toggle, .dhc-mobile-nav, .dhc-skip-link { display: none !important; }
	.dhc-header { position: static; }
	body { background: #FFF; color: #000; }
}

/* =========================================================================
 * 15. MONOGRAM
 * Stands in for a portrait that has not been supplied. A directory of empty
 * gray squares reads as broken; a monogram reads as deliberate.
 * ========================================================================= */

.dhc-monogram {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 8rem;
	background: var(--dhc-accent-quiet);
	color: var(--dhc-secondary);
	font-family: var(--dhc-font-display);
	font-size: clamp(2rem, 1.2rem + 4vw, 3.25rem);
	font-weight: var(--dhc-weight-semibold);
	letter-spacing: var(--dhc-tracking-wide);
	line-height: 1;
	user-select: none;
}

.dhc-card__media--portrait { aspect-ratio: 1 / 1; }

.dhc-provider-portrait {
	max-width: 20rem;
	aspect-ratio: 1 / 1;
	border-radius: var(--dhc-radius-lg);
	overflow: hidden;
	background: var(--dhc-surface-sunken);
}

.dhc-provider-portrait img { width: 100%; height: 100%; object-fit: cover; }
.dhc-provider-portrait .dhc-monogram { border-radius: var(--dhc-radius-lg); }

/* =========================================================================
 * 16. FOOTER CTA
 * A visuaFUSION call to action in the footer brand column. Deliberately not
 * in the Patients list: mixing a sales link into patient navigation on a
 * hospital site reads badly and would sit under the wrong heading.
 * ========================================================================= */

.dhc-footer__cta {
	margin-top: var(--dhc-space-md);
}

.dhc-footer__cta a {
	display: inline-flex;
	align-items: center;
	gap: var(--dhc-space-3xs);
	min-height: var(--dhc-target-min);
	padding: var(--dhc-space-3xs) var(--dhc-space-sm);
	border: 1px solid var(--dhc-cyan-400);
	border-radius: var(--dhc-radius-full);
	color: var(--dhc-cyan-400);
	font-size: var(--dhc-text-sm);
	font-weight: var(--dhc-weight-semibold);
	text-decoration: none;
}

.dhc-footer__cta a::after {
	content: "\2192";
	transition: transform var(--dhc-duration-fast) var(--dhc-ease);
}

.dhc-footer__cta a:hover {
	background: var(--dhc-cyan-400);
	color: var(--dhc-indigo-950);
	text-decoration: none;
}

.dhc-footer__cta a:hover::after { transform: translateX(3px); }