/**
 * Ibn Al-Nafees Hospital: site chrome.
 *
 * The header (utility bar, masthead, desktop menu, search panel), the
 * "Find a Doctor" finder bar, the full-screen mobile menu and the footer.
 * Layout from the redesign (kept by request, polish Step 4b), set in the
 * original fonts on the shared tokens (tokens.css). Everything is scoped
 * to .site-header, .bcms-hd__finder, .mobile-menu or .site-footer so it
 * cannot clash with the original page styles (style.css). Logical
 * properties only, so RTL mirrors without overrides.
 *
 * @package ibnalnafees
 */

/* ============================================================
   Page-level helpers the chrome relies on
   ============================================================ */
.skip-link:focus {
	position: fixed !important;
	inset-block-start: var(--space-2);
	inset-inline-start: var(--space-2);
	z-index: var(--z-skip);
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--space-4) var(--space-6);
	clip: auto;
	clip-path: none;
	border-radius: var(--radius-sm);
	background: var(--color-white);
	box-shadow: var(--shadow-md);
	color: var(--color-primary-dark);
	font-size: var(--fs-16);
	font-weight: var(--fw-bold);
	white-space: normal;
}

.u-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* Progressive enhancement: html gets .js from an inline script in header.php. */
html:not(.js) .js-only,
html.js .no-js-only {
	display: none !important;
}

[hidden] {
	display: none !important;
}

.site-main:focus {
	outline: none;
}

html.has-menu-open {
	overflow: hidden;
}

/* ============================================================
   Shared chrome components (scoped): container, icons, buttons,
   icon buttons, inputs, search form, contact rows, link lists
   ============================================================ */
:where(.site-header, .bcms-hd__finder--bar, .mobile-menu, .site-footer) .container {
	width: var(--container);
	margin-inline: auto;
}

:where(.site-header, .bcms-hd__finder, .mobile-menu, .site-footer) :where(ul) {
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.site-header, .bcms-hd__finder, .mobile-menu, .site-footer) .icon {
	display: block;
	flex-shrink: 0;
}

[dir="rtl"] :where(.site-header, .bcms-hd__finder, .mobile-menu, .site-footer) .icon--dir {
	transform: scaleX(-1);
}

:where(.site-header, .mobile-menu, .site-footer) .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 48px;
	padding: var(--space-2) var(--space-6);
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	background: transparent;
	font-family: inherit;
	font-size: var(--fs-15);
	font-weight: var(--fw-bold);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

:where(.site-header, .mobile-menu, .site-footer) .btn--primary {
	background: var(--color-primary-dark);
	color: var(--color-white);
}

:where(.site-header, .mobile-menu, .site-footer) .btn--primary:hover {
	background: var(--color-heading);
	color: var(--color-white);
}

:where(.site-header, .mobile-menu, .site-footer) .btn--secondary {
	border-color: var(--color-primary-dark);
	color: var(--color-primary-dark);
}

:where(.site-header, .mobile-menu, .site-footer) .btn--secondary:hover {
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
}

:where(.site-header, .mobile-menu, .site-footer) .btn--block {
	width: 100%;
}

:where(.site-header, .mobile-menu, .site-footer) .icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tap-min);
	height: var(--tap-min);
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-heading);
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

:where(.site-header, .mobile-menu, .site-footer) .icon-btn:hover {
	background: var(--color-background-alt);
	color: var(--color-primary-dark);
}

:where(.site-header, .mobile-menu, .site-footer) .emergency-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-emergency-dark);
	font-weight: var(--fw-bold);
	text-underline-offset: 0.2em;
}

:where(.site-header, .mobile-menu, .site-footer) .emergency-link .icon {
	color: var(--color-emergency);
}

:where(.site-header, .mobile-menu, .site-footer) .emergency-link:hover,
:where(.site-header, .mobile-menu, .site-footer) .emergency-link:focus-visible {
	color: var(--color-emergency-dark);
	text-decoration: underline;
}

:where(.site-header, .mobile-menu, .site-footer) .input {
	width: 100%;
	min-height: 48px;
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-text-muted);
	border-radius: var(--radius-pill);
	background: var(--color-white);
	color: var(--color-heading);
	font: inherit;
	font-size: var(--fs-16);
	line-height: 1.4;
}

:where(.site-header, .mobile-menu, .site-footer) .input::placeholder {
	color: var(--color-text-muted);
	opacity: 1;
}

:where(.site-header, .mobile-menu, .site-footer) .input:hover {
	border-color: var(--color-heading);
}

:where(.site-header, .mobile-menu) .search-form__label {
	display: block;
	margin-block-end: var(--space-2);
	color: var(--color-heading);
	font-weight: var(--fw-semibold);
}

:where(.site-header, .mobile-menu) .search-form__row {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

:where(.site-header, .mobile-menu) .search-form__input {
	flex: 1 1 auto;
	min-width: 0;
}

.mobile-menu .contact-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-4);
	min-height: 56px;
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-heading);
	font-weight: var(--fw-semibold);
}

.mobile-menu .contact-row .icon {
	color: var(--color-primary-dark);
}

.mobile-menu .contact-row bdi {
	color: var(--color-text);
	font-weight: var(--fw-regular);
}

.mobile-menu .contact-row:hover {
	border-color: var(--color-primary-dark);
}

.mobile-menu .contact-row--emergency,
.mobile-menu .contact-row--emergency bdi {
	color: var(--color-emergency-dark);
	font-weight: var(--fw-bold);
}

.mobile-menu .contact-row--emergency .icon {
	color: var(--color-emergency);
}

:where(.site-header, .mobile-menu) .lang-switch {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

/* ============================================================
   Site header: utility bar + masthead. Sticky; once the page
   scrolls, the utility bar slides up under the viewport edge and
   the masthead stays (the "compact" state). CSS only, no layout
   shift: the header keeps its height in the flow.
   ============================================================ */
.site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--z-header);
	background: var(--color-white);
	font-family: var(--font-body);
}

@media (min-width: 768px) {
	.site-header {
		inset-block-start: calc(-1 * var(--utility-h));
	}
}

@media (min-width: 601px) {
	.admin-bar .site-header {
		inset-block-start: var(--wp-admin--admin-bar--height, 0px);
	}
}

@media (min-width: 768px) {
	.admin-bar .site-header {
		inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) - var(--utility-h));
	}
}

/* Utility bar: Emergency 24/7, phone, search, language (768 px and up) */
.site-header .utility-bar {
	display: none;
	border-block-end: 1px solid var(--color-border);
	background: var(--color-background);
	font-size: var(--fs-14);
}

@media (min-width: 768px) {
	.site-header .utility-bar {
		display: block;
	}
}

.site-header .utility-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	min-height: var(--utility-h);
}

.site-header .utility-bar__end {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	margin-inline-start: auto; /* stays at the end when the emergency link is switched off */
}

/* Top bar switched off (Hospital Settings → Header, nothing ticked): the
   sticky header no longer tucks a bar under the viewport edge, and the
   full-screen home banner subtracts the masthead only (122 px - 40 px). */
.no-utility-bar {
	--utility-h: 0px;
}

@media (min-width: 768px) {
	.no-utility-bar .bcms-hero {
		--hero-offset: 82px;
	}
}

.site-header .utility-bar__emergency,
.site-header .utility-bar__link {
	min-height: var(--utility-h);
}

.site-header .utility-bar__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-text);
	font-weight: var(--fw-medium);
	text-underline-offset: 0.2em;
}

.site-header .utility-bar__link:hover,
.site-header .utility-bar__link:focus-visible {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

.site-header .utility-bar__link .icon {
	color: var(--color-primary-dark);
}

/* Masthead: logo, primary menu, Book Appointment */
.site-header .masthead {
	border-block-end: 1px solid var(--color-border);
	background: var(--color-white);
	box-shadow: var(--shadow-sm);
}

.site-header .masthead__inner {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--header-h);
}

:where(.site-header, .mobile-menu) .masthead__logo {
	display: block;
	flex: 0 0 auto;
	margin-inline-end: auto;
	padding-block: var(--space-2);
}

:where(.site-header, .mobile-menu) .masthead__logo img {
	width: auto;
	height: 28px;
}

.site-header .masthead__actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--space-1);
}

.site-header .masthead__book {
	padding-inline: var(--space-4);
}

.site-header .masthead__book-long {
	display: none;
}

@media (min-width: 360px) {
	:where(.site-header, .mobile-menu) .masthead__logo img {
		height: 36px;
	}

	.site-header .masthead__actions {
		gap: var(--space-2);
	}
}

@media (min-width: 600px) {
	.site-header .masthead__book {
		padding-inline: var(--space-6);
	}

	.site-header .masthead__book-long {
		display: inline;
	}

	.site-header .masthead__book-short {
		display: none;
	}
}

@media (min-width: 768px) {
	.site-header .masthead__inner {
		gap: var(--space-6);
	}

	:where(.site-header, .mobile-menu) .masthead__logo img {
		height: 48px;
	}

	/* The phone number sits in the utility bar from here up. */
	.site-header .masthead__call {
		display: none;
	}
}

@media (min-width: 1200px) {
	.site-header .masthead__menu,
	html:not(.js) .site-header .masthead__menu {
		display: none !important;
	}
}

/* Primary menu (desktop, 1200 px and up) */
.site-header .primary-nav {
	display: none;
}

@media (min-width: 1200px) {
	.site-header .primary-nav {
		display: block;
	}
}

.site-header .nav__list--desktop {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.site-header .primary-nav .nav__item {
	position: relative;
}

.site-header .primary-nav .nav__link,
.site-header .primary-nav .nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-height: var(--tap-min);
	padding-inline: var(--space-3);
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-heading);
	font-family: inherit;
	font-size: var(--fs-15);
	font-weight: var(--fw-semibold);
	white-space: nowrap;
	cursor: pointer;
	text-underline-offset: 0.45em;
	text-decoration-thickness: 2px;
}

.site-header .primary-nav .nav__link:hover,
.site-header .primary-nav .nav__toggle:hover,
.site-header .primary-nav .nav__toggle[aria-expanded="true"] {
	background: var(--color-background);
	color: var(--color-primary-dark);
}

.site-header .primary-nav .is-current > .nav__link,
.site-header .primary-nav .is-current > .nav__toggle span {
	color: var(--color-primary-dark);
	text-decoration: underline;
	text-decoration-color: var(--color-primary);
}

/* Room for longer (Arabic) labels between 1200 and 1359 px */
@media (max-width: 1359px) {
	.site-header .primary-nav .nav__link,
	.site-header .primary-nav .nav__toggle {
		padding-inline: var(--space-2);
	}
}

:where(.site-header, .mobile-menu) .nav__toggle .icon {
	transition: transform var(--transition-fast);
}

:where(.site-header, .mobile-menu) .nav__toggle[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

.site-header .primary-nav .nav__sub {
	display: none;
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	z-index: var(--z-dropdown);
	min-width: 264px;
	padding: var(--space-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-white);
	box-shadow: var(--shadow-md);
}

.site-header .primary-nav .nav__toggle[aria-expanded="true"] + .nav__sub,
html:not(.js) .site-header .primary-nav .nav__item--has-sub:focus-within > .nav__sub {
	display: block;
}

@media (hover: hover) {
	.site-header .primary-nav .nav__item--has-sub:hover > .nav__sub {
		display: block;
	}
}

:where(.site-header, .mobile-menu) .nav__sublink {
	display: flex;
	align-items: center;
	min-height: var(--tap-min);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-size: var(--fs-15);
	font-weight: var(--fw-medium);
}

:where(.site-header, .mobile-menu) .nav__sublink:hover {
	background: var(--color-background);
	color: var(--color-heading);
}

:where(.site-header, .mobile-menu) .nav__sublink[aria-current="page"] {
	color: var(--color-primary-dark);
	font-weight: var(--fw-bold);
}

/* Masthead search button and language switcher (768 px and up; phones
   have both in the mobile menu). One row: logo, menu, search, language,
   Book, all centred on the same line. */
.site-header .masthead__search,
.site-header .masthead__lang {
	display: none;
}

@media (min-width: 768px) {
	.site-header .masthead__search {
		display: inline-flex;
	}

	html:not(.js) .site-header .masthead__search.js-only {
		display: none;
	}

	.site-header .masthead__lang {
		display: inline-flex;
	}
}

.site-header .masthead__search[aria-expanded="true"] {
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
}

.site-header .masthead__lang {
	align-items: center;
	gap: var(--space-1);
	min-height: var(--tap-min);
	padding-inline: var(--space-2);
	border-radius: var(--radius-pill);
	color: var(--color-heading);
	font-size: var(--fs-15);
	font-weight: var(--fw-semibold);
	white-space: nowrap;
}

.site-header .masthead__lang .icon {
	color: var(--color-primary-dark);
}

.site-header .masthead__lang:hover {
	background: var(--color-background);
	color: var(--color-primary-dark);
}

.site-header .masthead__actions > * {
	align-self: center;
}

/* Search panel: full width under the masthead; [hidden] and inert when closed */
.site-header .site-search {
	padding-block: var(--space-7);
	border-block-end: 1px solid var(--color-border);
	background: var(--color-white);
	box-shadow: var(--shadow-md);
}

.site-header .site-search__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--space-4) var(--space-6);
}

.site-header .site-search__form {
	max-width: 880px;
}

.site-header .site-search__input {
	min-height: 56px;
	padding-inline: var(--space-6);
	font-size: var(--fs-18);
}

.site-header .site-search__form .btn {
	min-height: 56px;
}

.site-header .site-search__close {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	margin-block-end: var(--space-1);
}

.site-header .site-search__quick {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	font-size: var(--fs-15);
}

.site-header .site-search__quick-label {
	color: var(--color-text-muted);
	font-weight: var(--fw-semibold);
}

.site-header .site-search__quick a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding-inline: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	color: var(--color-primary-dark);
	font-weight: var(--fw-semibold);
}

.site-header .site-search__quick a:hover,
.site-header .site-search__quick a:focus-visible {
	border-color: var(--color-primary-dark);
	background: var(--color-primary-light);
}

/* ============================================================
   "Find a Doctor" finder (original bcms-hd__finder). On the home page
   only, as a green band directly under the banner (every width); every
   page has the same form inside the mobile menu. The label sits on the
   container's start edge and the form on its end edge, so the band
   lines up with the sections below it.
   The band uses the dark green (#177C61) so its white label passes
   AA (the original #1FA681 gave 3.1:1).
   ============================================================ */
.bcms-hd__finder {
	font-family: var(--font-body);
}

.bcms-hd__finder--bar {
	background: var(--color-primary-dark);
}

.bcms-hd__finder-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-6);
}

.bcms-hd__finder--bar .bcms-hd__finder-inner {
	justify-content: space-between;
	min-height: 104px;
	padding-block: var(--space-6);
}

.bcms-hd__finder--bar .bcms-hd__finder-fields {
	flex: 1 1 480px;
	max-width: 880px;
}

@media (max-width: 767px) {
	.bcms-hd__finder--bar .bcms-hd__finder-inner {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
	}

	.bcms-hd__finder--bar .bcms-hd__finder-fields {
		flex-basis: auto;
		max-width: none;
	}
}

@media (max-width: 480px) {
	.bcms-hd__finder--bar .bcms-hd__finder-fields-inner {
		flex-direction: column;
		align-items: stretch;
		padding: var(--space-2);
		border-radius: var(--radius-lg);
	}

	.bcms-hd__finder--bar .bcms-hd__finder-fields-inner .bcms-hd__select:first-child {
		border-inline-end: 0;
		border-block-end: 1px solid var(--color-border);
	}

	.bcms-hd__finder--bar .bcms-hd__finder-fields-inner .bcms-hd__select {
		flex: 0 0 auto;
	}
}

.bcms-hd__finder-label {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	color: var(--color-white);
	font-size: var(--fs-18);
	font-weight: var(--fw-bold);
	white-space: nowrap;
}

.bcms-hd__finder-label .icon {
	color: var(--color-secondary-light);
}

.bcms-hd__finder-fields {
	flex: 1 1 260px;
	min-width: 0;
	max-width: 560px;
	margin: 0;
}

.bcms-hd__finder-fields-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	padding: var(--space-1);
	border-radius: var(--radius-pill);
	background: var(--color-white);
}

.bcms-hd__select {
	flex: 1 1 130px;
	min-width: 0;
	min-height: var(--tap-min);
	padding-block: var(--space-2);
	padding-inline: var(--space-4) var(--space-7);
	border: 0;
	border-radius: var(--radius-pill);
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right var(--space-3) center;
	background-repeat: no-repeat;
	color: var(--color-heading);
	font-family: inherit;
	font-size: var(--fs-14);
	font-weight: var(--fw-semibold);
	cursor: pointer;
	appearance: none;
}

[dir="rtl"] .bcms-hd__select {
	background-position: left var(--space-3) center;
}

.bcms-hd__select:disabled {
	color: var(--color-text-muted);
	cursor: not-allowed;
}

.bcms-hd__select:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 0;
}

.bcms-hd__finder-fields-inner .bcms-hd__select:first-child {
	border-inline-end: 1px solid var(--color-border);
}

html:not(.js) .bcms-hd__finder-fields-inner .bcms-hd__select:first-child {
	border-inline-end: 0;
}

.bcms-hd__finder-btn {
	flex-shrink: 0;
	min-height: var(--tap-min);
	padding: var(--space-2) var(--space-6);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-primary-dark);
	color: var(--color-white);
	font-family: inherit;
	font-size: var(--fs-14);
	font-weight: var(--fw-bold);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.bcms-hd__finder-btn:hover {
	background: var(--color-heading);
}

/* Inside the mobile menu: a light panel instead of the green bar. */
.bcms-hd__finder--menu {
	padding: var(--space-4);
	border-radius: var(--radius-lg);
	background: var(--color-primary-light);
}

.bcms-hd__finder--menu .bcms-hd__finder-label {
	color: var(--color-heading);
}

.bcms-hd__finder--menu .bcms-hd__finder-label .icon {
	color: var(--color-primary-dark);
}

.bcms-hd__finder--menu .bcms-hd__finder-fields {
	flex-basis: 100%;
	max-width: none;
}

@media (max-width: 480px) {
	.bcms-hd__finder--menu .bcms-hd__finder-fields-inner {
		flex-direction: column;
		align-items: stretch;
		padding: var(--space-2);
		border-radius: var(--radius-lg);
	}

	.bcms-hd__finder--menu .bcms-hd__finder-fields-inner .bcms-hd__select:first-child {
		border-inline-end: 0;
		border-block-end: 1px solid var(--color-border);
	}

	.bcms-hd__finder--menu .bcms-hd__finder-fields-inner .bcms-hd__select {
		flex: 0 0 auto;
	}
}

/* ============================================================
   Mobile menu: full-screen dialog (below 1200 px)
   ============================================================ */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: var(--z-menu);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--color-white);
	font-family: var(--font-body);
}

.mobile-menu__top {
	position: sticky;
	inset-block-start: 0;
	z-index: 1;
	border-block-end: 1px solid var(--color-border);
	background: var(--color-white);
}

.mobile-menu__top-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: var(--header-h);
}

.mobile-menu__body {
	display: grid;
	gap: var(--space-7);
	padding-block: var(--space-6) var(--space-9);
}

.mobile-nav .nav__list {
	border-block-start: 1px solid var(--color-border);
}

.mobile-nav .nav__item {
	border-block-end: 1px solid var(--color-border);
}

.mobile-nav .nav__link,
.mobile-nav .nav__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	width: 100%;
	min-height: 56px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-heading);
	font-family: inherit;
	font-size: var(--fs-18);
	font-weight: var(--fw-semibold);
	text-align: start;
	cursor: pointer;
}

.mobile-nav .nav__sub {
	display: none;
	padding-block-end: var(--space-4);
}

.mobile-nav .nav__toggle[aria-expanded="true"] + .nav__sub {
	display: block;
}

.mobile-nav .nav__sublink {
	padding-inline: var(--space-4);
}

.mobile-nav .is-current > .nav__link,
.mobile-nav .is-current > .nav__toggle {
	color: var(--color-primary-dark);
}

.mobile-menu__contact {
	display: grid;
	gap: var(--space-2);
}

.mobile-menu__lang {
	justify-self: start;
	min-height: var(--tap-min);
	color: var(--color-heading);
	font-weight: var(--fw-semibold);
}

.mobile-menu__lang .icon {
	color: var(--color-primary-dark);
}

/* ============================================================
   Footer: brand + contact, four link columns, newsletter,
   legal line and social links. Light (fixes 3, replacing the navy
   of round 2): the soft mint tint (--color-mint, #F4F8F6) with a
   thin top border; the bottom bar a shade darker (--color-mint-strong)
   across the full width. Headings near-black, labels dark gold
   (#825D27), body text and links dark grey, links green on hover,
   the emergency number #B81118 (AA on the mint). Normal logo.
   ============================================================ */
.site-footer {
	--footer-line: var(--color-border);
	border-block-start: 1px solid var(--footer-line);
	background: var(--color-mint);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-15);
	line-height: var(--lh-body);
}

.site-footer p {
	margin: 0;
}

.site-footer__main {
	display: grid;
	gap: var(--space-9);
	padding-block: var(--space-10) var(--space-9);
}

@media (min-width: 1024px) {
	.site-footer__main {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		gap: var(--space-10);
	}
}

.site-footer__logo {
	display: inline-block;
}

.site-footer__logo img {
	width: auto;
	height: 48px;
}

.site-footer__tagline {
	max-width: 40ch;
	margin-block: var(--space-6) !important;
}

.site-footer__contact {
	display: grid;
	gap: var(--space-4);
}

.site-footer__contact li {
	display: grid;
}

.site-footer__label {
	color: var(--color-secondary-dark);
	font-size: var(--fs-13);
}

.site-footer__contact a {
	justify-self: start;
	color: var(--color-heading);
	font-weight: var(--fw-semibold);
	text-underline-offset: 0.2em;
}

.site-footer__contact a:hover {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

.site-footer__contact .emergency-link,
.site-footer__contact .emergency-link:hover,
.site-footer__contact .emergency-link:focus-visible {
	color: var(--color-emergency-dark);
	font-weight: var(--fw-bold);
}

.site-footer__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-9) var(--space-7);
}

@media (min-width: 768px) {
	.site-footer__nav {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.site-footer__title {
	margin: 0 0 var(--space-4);
	color: var(--color-heading);
	font-family: inherit;
	font-size: var(--fs-16);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: 0;
}

.site-footer .link-list {
	display: grid;
	gap: var(--space-1);
}

.site-footer .link-list a {
	display: inline-block;
	padding-block: var(--space-1);
	color: var(--color-text);
	text-underline-offset: 0.2em;
}

.site-footer .link-list a:hover,
.site-footer .link-list a:focus-visible,
.site-footer .link-list a[aria-current="page"] {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

.site-footer__newsletter {
	display: grid;
	gap: var(--space-6);
	padding-block: var(--space-7);
	border-block-start: 1px solid var(--footer-line);
}

.site-footer__newsletter .site-footer__title {
	margin-block-end: var(--space-1);
}

@media (min-width: 1024px) {
	.site-footer__newsletter {
		grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
		align-items: center;
	}
}

.site-footer .newsletter-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.site-footer .newsletter-form .input {
	flex: 1 1 220px;
}

.site-footer .newsletter-form__msg {
	flex-basis: 100%;
	font-size: var(--fs-14);
}

.site-footer .newsletter-form__msg:empty {
	display: none;
}

.site-footer .newsletter-form__msg.is-error {
	color: var(--color-emergency-dark);
	font-weight: var(--fw-semibold);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-7);
	padding-block: var(--space-6);
	border-block-start: 1px solid var(--footer-line);
	background: var(--color-mint-strong);
	box-shadow: 0 0 0 100vmax var(--color-mint-strong);
	clip-path: inset(0 -100vmax);
	font-size: var(--fs-14);
}

.site-footer__copyright {
	margin-inline-end: auto !important;
}

.site-footer__legal {
	color: var(--color-text);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.site-footer__social {
	display: flex;
	gap: var(--space-1);
}

.site-footer__social .icon-btn {
	color: var(--color-heading);
}

.site-footer__social .icon-btn:hover {
	background: var(--color-white);
	color: var(--color-primary-dark);
}



/* ============================================================
   Footer, new layout (template-parts/footer/footer-refined.php;
   Hospital Settings → Footer → Footer layout). Everything here is
   scoped to .site-footer--refined, so "Previous layout" keeps the
   rules above unchanged.

   One strong element, the contact bar: a single white panel whose
   cells are whole links (the emergency one marked in red). Below it
   the brand column (logo, text, address, hours, social) is about as
   tall as the link columns, the newsletter sits on one line, and the
   bottom bar carries only the legal line.
   ============================================================ */

/* 1. Contact bar. The 1 px grid gap over the border colour draws the
   dividers, so they stay correct however the cells wrap. */
.site-footer--refined .footer-desk {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	margin: var(--space-9) 0 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
	border: 1px solid var(--footer-line);
	border-radius: var(--radius-md);
	background: var(--footer-line);
}

@media (min-width: 600px) {
	.site-footer--refined .footer-desk {
		grid-template-columns: repeat(min(var(--desk-cols, 4), 2), minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.site-footer--refined .footer-desk {
		grid-template-columns: repeat(var(--desk-cols, 4), minmax(0, 1fr));
	}
}

.site-footer--refined .footer-desk__cell {
	display: flex;
	background: var(--color-white);
}

.site-footer--refined .footer-desk__link {
	display: grid;
	flex: 1;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: var(--space-4);
	align-items: center;
	padding: var(--space-5) var(--space-6);
	color: var(--color-heading);
	text-decoration: none;
	transition: background-color var(--transition-fast);
}

.site-footer--refined .footer-desk__icon {
	display: inline-flex;
	grid-row: 1 / span 2;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
}

.site-footer--refined .footer-desk__label {
	color: var(--color-text-muted);
	font-size: var(--fs-13);
	line-height: var(--lh-snug);
}

.site-footer--refined .footer-desk__value {
	overflow-wrap: break-word;
	font-size: var(--fs-18);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
}

.site-footer--refined .footer-desk__cell--email .footer-desk__value {
	font-size: var(--fs-16);
}

.site-footer--refined .footer-desk__link:hover,
.site-footer--refined .footer-desk__link:focus-visible {
	background: var(--color-primary-light);
}

.site-footer--refined .footer-desk__link:hover .footer-desk__value,
.site-footer--refined .footer-desk__link:focus-visible .footer-desk__value {
	color: var(--color-primary-dark);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.site-footer--refined .footer-desk__link:hover .footer-desk__icon,
.site-footer--refined .footer-desk__link:focus-visible .footer-desk__icon {
	background: var(--color-white);
}

.site-footer--refined .footer-desk__link:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -4px;
}

/* Emergency: red edge, red icon, red number (#B81118: 6.7:1 on white). */
.site-footer--refined .footer-desk__cell--emergency {
	box-shadow: inset 3px 0 0 var(--color-emergency);
}

[dir="rtl"] .site-footer--refined .footer-desk__cell--emergency {
	box-shadow: inset -3px 0 0 var(--color-emergency);
}

.site-footer--refined .footer-desk__cell--emergency .footer-desk__icon {
	background: color-mix(in srgb, var(--color-emergency) 10%, var(--color-white));
	color: var(--color-emergency-dark);
}

.site-footer--refined .footer-desk__cell--emergency .footer-desk__value,
.site-footer--refined .footer-desk__cell--emergency .footer-desk__link:hover .footer-desk__value,
.site-footer--refined .footer-desk__cell--emergency .footer-desk__link:focus-visible .footer-desk__value {
	color: var(--color-emergency-dark);
}

.site-footer--refined .footer-desk__cell--emergency .footer-desk__link:hover,
.site-footer--refined .footer-desk__cell--emergency .footer-desk__link:focus-visible {
	background: color-mix(in srgb, var(--color-emergency) 6%, var(--color-white));
}

/* 2. Brand column and link columns. */
.site-footer--refined .site-footer__main {
	padding-block: var(--space-10) var(--space-9);
}

/* Brand beside the columns from 1200 px; above them on narrower screens
   (the base rule puts them side by side from 1024 px, too tight here). */
.site-footer--refined .site-footer__main {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1200px) {
	.site-footer--refined .site-footer__main {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		gap: var(--space-11);
	}
}

/* Tablets (768–1199 px): the brand column spans the width above the
   links, so it splits in two: logo, text and social | address and hours. */
@media (min-width: 768px) and (max-width: 1199px) {
	.site-footer--refined .site-footer__brand {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"logo    info"
			"tagline info"
			"social  info";
		align-items: start;
		column-gap: var(--space-9);
	}

	.site-footer--refined .site-footer__logo { grid-area: logo; justify-self: start; }
	.site-footer--refined .site-footer__tagline { grid-area: tagline; }
	.site-footer--refined .site-footer__social { grid-area: social; }

	.site-footer--refined .footer-info {
		grid-area: info;
		margin-block: var(--space-2) 0;
	}
}

.site-footer--refined .site-footer__tagline {
	margin-block: var(--space-5) var(--space-6) !important;
	color: var(--color-text);
}

.site-footer--refined .footer-info {
	display: grid;
	gap: var(--space-4);
	margin: 0 0 var(--space-6);
	padding: 0;
	list-style: none;
	font-size: var(--fs-14);
	line-height: var(--lh-snug);
}

.site-footer--refined .footer-info li {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: var(--space-3);
	align-items: start;
}

.site-footer--refined .footer-info svg {
	margin-block-start: 2px;
	color: var(--color-secondary);
}

.site-footer--refined .footer-info a {
	color: var(--color-heading);
	font-weight: var(--fw-semibold);
	text-underline-offset: 0.2em;
}

.site-footer--refined .footer-info a:hover,
.site-footer--refined .footer-info a:focus-visible {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

.site-footer--refined .site-footer__social {
	margin: 0;
	margin-inline-start: calc(-1 * var(--space-2)); /* line the icons up with the text edge */
	padding: 0;
	list-style: none;
}

.site-footer--refined .site-footer__social .icon-btn {
	color: var(--color-primary-dark);
}

.site-footer--refined .site-footer__title {
	margin-block-end: var(--space-3);
	padding-block-end: var(--space-3);
	border-block-end: 1px solid var(--footer-line);
}

.site-footer--refined .link-list {
	gap: 0;
}

.site-footer--refined .link-list a {
	font-size: var(--fs-15);
}

/* 3. Newsletter: text beside a one-line form (email, language, button),
   consent underneath. Rows are placed explicitly and the row gap is 0,
   so the error summary and status rows take no space while empty. */
.site-footer--refined .site-footer__newsletter {
	padding-block: var(--space-8);
}

@media (min-width: 1024px) {
	.site-footer--refined .site-footer__newsletter {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: var(--space-11);
	}
}

.site-footer--refined .site-footer__newsletter .site-footer__title {
	margin-block-end: var(--space-2);
	padding-block-end: 0;
	border-block-end: 0;
	font-size: var(--fs-18);
}

.site-footer--refined .site-footer__newsletter-text p {
	max-width: 44ch;
	color: var(--color-text);
}

@media (min-width: 768px) {
	.site-footer.site-footer--refined .newsletter-form.inh-form {
		grid-template-columns: minmax(0, 1fr) minmax(0, 170px) auto;
		row-gap: 0;
	}

	.site-footer.site-footer--refined .newsletter-form .inh-form__summary {
		grid-row: 1;
		margin-block-end: var(--space-3);
	}

	.site-footer.site-footer--refined .newsletter-form .inh-form__field--email,
	.site-footer.site-footer--refined .newsletter-form .inh-form__field--select,
	.site-footer.site-footer--refined .newsletter-form .newsletter-form__form-footer {
		grid-row: 2;
	}

	.site-footer.site-footer--refined .newsletter-form .newsletter-form__form-footer {
		grid-column: 3;
	}

	.site-footer.site-footer--refined .newsletter-form .inh-form__consent {
		grid-row: 3;
		margin-block-start: var(--space-3);
	}

	.site-footer.site-footer--refined .newsletter-form .inh-form__status {
		grid-row: 4;
	}
}

.site-footer.site-footer--refined .newsletter-form__form-footer .btn {
	min-height: 48px;
}

/* 4. Bottom bar: the legal line only (social links moved up). */
.site-footer--refined .site-footer__bottom {
	justify-content: space-between;
	padding-block: var(--space-5);
}

.site-footer--refined .site-footer__copyright {
	margin-inline-end: 0 !important;
}

/* Phones: tighter spacing. */
@media (max-width: 599px) {
	.site-footer--refined .footer-desk {
		margin-block-start: var(--space-7);
	}

	.site-footer--refined .footer-desk__link {
		padding: var(--space-4) var(--space-5);
	}

	.site-footer--refined .site-footer__main {
		gap: var(--space-8);
		padding-block: var(--space-8) var(--space-7);
	}

	.site-footer--refined .site-footer__nav {
		gap: var(--space-7) var(--space-6);
	}
}