/* ==========================================================================
   Ideal Labzone Hospital — brand layer
   --------------------------------------------------------------------------
   Loaded AFTER style.css and css/custom.css. The legacy green (#006400) in the
   Mediplus stylesheet has already been swapped for the hospital maroon; this
   file adds the design tokens, the shared components and the accessibility
   fixes that the original template lacked.

   Palette is sampled from the official logo and letterhead:
     maroon  #761F0B     navy  #25253F
   ========================================================================== */

:root {
	--ilzh-maroon: #761f0b;
	--ilzh-maroon-dark: #5a1708;
	--ilzh-maroon-light: #8a2318;
	--ilzh-maroon-50: #fdf3f1;
	--ilzh-maroon-100: #f7e2de;

	--ilzh-navy: #25253f;
	--ilzh-navy-dark: #1a1a2e;
	--ilzh-navy-50: #f2f2f6;

	--ilzh-ink: #1f2029;
	--ilzh-body: #4a4d5a;
	--ilzh-muted: #7b7f8c;
	--ilzh-line: #e6e6ec;
	--ilzh-bg: #f6f7f9;
	--ilzh-white: #fff;

	--ilzh-success: #1f7a4d;
	--ilzh-success-bg: #e7f5ee;
	--ilzh-warning: #8a5a00;
	--ilzh-warning-bg: #fdf3e0;
	--ilzh-danger: #a41f1f;
	--ilzh-danger-bg: #fbeaea;
	--ilzh-info: #1f4e79;
	--ilzh-info-bg: #e8f0f8;

	--ilzh-radius: 8px;
	--ilzh-radius-sm: 5px;
	--ilzh-shadow-sm: 0 1px 2px rgba(31, 32, 41, 0.06), 0 1px 3px rgba(31, 32, 41, 0.04);
	--ilzh-shadow: 0 2px 8px rgba(31, 32, 41, 0.07), 0 1px 3px rgba(31, 32, 41, 0.05);
	--ilzh-shadow-lg: 0 8px 28px rgba(31, 32, 41, 0.1);
	--ilzh-ring: 0 0 0 3px rgba(118, 31, 11, 0.18);
	--ilzh-transition: 0.18s ease;
}

body {
	color: var(--ilzh-body);
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	color: var(--ilzh-ink);
	font-weight: 600;
	letter-spacing: -0.01em;
}

a {
	color: var(--ilzh-maroon);
	transition: color var(--ilzh-transition);
}

a:hover, a:focus {
	color: var(--ilzh-maroon-dark);
}

/* Visible keyboard focus everywhere — the original template removed outlines. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
	outline: 2px solid var(--ilzh-maroon);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
	border-radius: var(--ilzh-radius-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 11px 24px;
	transition: background-color var(--ilzh-transition), color var(--ilzh-transition),
		border-color var(--ilzh-transition), box-shadow var(--ilzh-transition),
		transform var(--ilzh-transition);
}

.btn:hover {
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0);
}

.btn:disabled, .btn.disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

/* Primary — the maroon used across the original template */
.btn,
.btn.primary,
.btn-success {
	background: var(--ilzh-maroon);
	border: 1px solid var(--ilzh-maroon);
	color: var(--ilzh-white);
}

.btn:hover,
.btn:focus,
.btn.primary:hover,
.btn.primary:focus,
.btn-success:hover,
.btn-success:focus {
	background: var(--ilzh-maroon-dark);
	border-color: var(--ilzh-maroon-dark);
	color: var(--ilzh-white);
}

/* Secondary — navy, for "download / view" style actions */
.btn.navy,
.btn-secondary {
	background: var(--ilzh-navy);
	border: 1px solid var(--ilzh-navy);
	color: var(--ilzh-white);
}

.btn.navy:hover, .btn.navy:focus,
.btn-secondary:hover, .btn-secondary:focus {
	background: var(--ilzh-navy-dark);
	border-color: var(--ilzh-navy-dark);
	color: var(--ilzh-white);
}

/* Outline */
.btn.outline,
.btn.outline-white {
	background: transparent;
	border: 1px solid var(--ilzh-maroon);
	color: var(--ilzh-maroon);
}

.btn.outline:hover, .btn.outline:focus {
	background: var(--ilzh-maroon);
	color: var(--ilzh-white);
}

.btn.outline-white {
	border-color: rgba(255, 255, 255, 0.85);
	color: #fff;
}

.btn.outline-white:hover, .btn.outline-white:focus {
	background: #fff;
	color: var(--ilzh-maroon);
}

/* Quiet */
.btn.quiet {
	background: var(--ilzh-white);
	border: 1px solid var(--ilzh-line);
	color: var(--ilzh-ink);
}

.btn.quiet:hover, .btn.quiet:focus {
	background: var(--ilzh-bg);
	border-color: #d5d5de;
	color: var(--ilzh-ink);
}

.btn.danger {
	background: var(--ilzh-danger);
	border: 1px solid var(--ilzh-danger);
	color: #fff;
}

.btn.danger:hover, .btn.danger:focus {
	background: #8a1919;
	border-color: #8a1919;
	color: #fff;
}

.btn.sm, .btn-sm {
	padding: 7px 14px;
	font-size: 13px;
}

.btn.lg, .btn-lg {
	padding: 14px 32px;
	font-size: 16px;
}

.btn.block {
	display: block;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Hero entrance timings
   --------------------------------------------------------------------------
   style.css staggers the hero with
       h1      -> fadeInUp   1s, delay 0.6s
       p       -> fadeInUp   1s, delay 1.0s
       .button -> fadeInDown 1s, delay 1.5s

   Two problems with that, both of which make the hero look broken:

   1. Each used `animation-fill-mode: both`, so the element holds the
      animation's *start* state — opacity 0 — until its delay has elapsed. The
      slider advances every 3.5s, so the call-to-action buttons were invisible
      for the first 1.5s of every slide and only settled at 2.5s: roughly one
      second in three where "Get Appointment" could be read, and it re-animated
      on every loop.
   2. More seriously, `both` means the content is invisible for as long as the
      animation is pending. Anything that stops the animation advancing — a
      background tab, a throttled or paused animation, a low-powered device —
      leaves the headline and the buttons permanently invisible. Measured on a
      414px viewport the button row sat at `opacity: 0` nine seconds after load.

   The fix is to animate POSITION, never opacity. The hero text is then legible
   at every instant and merely slides into place. The stagger is kept because it
   looks good, compressed so everything has settled within half a second.
   -------------------------------------------------------------------------- */

@keyframes ilzh-rise-in {
	from {
		transform: translate3d(0, 18px, 0);
	}

	to {
		transform: none;
	}
}

.owl-item.active .single-slider h1 {
	animation: ilzh-rise-in 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s both;
}

.owl-item.active .single-slider p {
	animation: ilzh-rise-in 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.18s both;
}

.owl-item.active .single-slider .button {
	animation: ilzh-rise-in 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.31s both;
}

/* --------------------------------------------------------------------------
   Feature cards — the template's connector rule
   --------------------------------------------------------------------------
   style.css draws a 118px dotted maroon rule at `right:-72px; top:60px` on every
   .single-features except the last, meant to link one card's icon to the next
   across a four-up row. This row is three columns, so the rule started ~46px
   inside the card and ended in the gutter — a short dotted fragment floating in
   white space that read as a rendering fault rather than a connector.

   There is no column count for which the fixed 72/118px offsets line up, and the
   cards read cleanly without them, so the ornament is dropped rather than
   re-tuned to a magic number.
   -------------------------------------------------------------------------- */

.Feautes .single-features::before {
	content: none;
}

/* --------------------------------------------------------------------------
   Photo overlays — brand colour, and above the content, not under it
   --------------------------------------------------------------------------
   normalize.css ships:

       .overlay:before { background:#006400; opacity:.8; }

   which painted the template's original green across every `.overlay` section
   — the "fun facts" band and the emergency call-to-action on the homepage both
   came out bright green instead of the hospital's brand colour.

   Two corrections here, not just a colour swap:
     * the tint is the brand navy, so white text on it keeps a 14.8:1 contrast
       ratio (WCAG AAA) rather than sitting on a mid-tone;
     * the overlay is pushed behind the content with z-index. As a positioned
       pseudo-element with no z-index it painted in the positioned layer, i.e.
       ON TOP of the section's own text and buttons.
   -------------------------------------------------------------------------- */

.overlay::before {
	background: var(--ilzh-navy);
	opacity: 0.82;
	z-index: 0;
}

/* Guarantee the content sits above the tint, whatever the section markup is. */
.overlay > * {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */

.topbar {
	background: var(--ilzh-navy) !important;
	border-bottom: 0 !important;
	color: #d9d9e4;
}

.topbar a, .topbar span {
	color: #d9d9e4 !important;
}

.topbar a:hover {
	color: #fff !important;
}

/* The clock / phone / envelope glyphs in the topbar were #8a2318 on the navy
   bar: a contrast ratio of 1.65:1, i.e. effectively invisible. */
.topbar i {
	color: #ffffff !important;
	opacity: 0.85;
}

.header-inner {
	background: var(--ilzh-white) !important;
	border-bottom: 1px solid var(--ilzh-line);
	box-shadow: var(--ilzh-shadow-sm);
}

.logo-text {
	color: var(--ilzh-ink) !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em;
}

.logo-text span, .logo-text .brand-accent {
	color: var(--ilzh-maroon) !important;
}

.header-inner img.logo-img {
	max-height: 62px;
	width: auto;
}

.main-menu {
	background: var(--ilzh-maroon) !important;
	border-radius: var(--ilzh-radius-sm) !important;
	box-shadow: var(--ilzh-shadow-sm);
}

.main-menu .nav.menu li a:hover,
.main-menu .nav.menu li a:focus,
.main-menu .nav.menu li.active > a {
	background: var(--ilzh-white) !important;
	color: var(--ilzh-maroon) !important;
}

.main-menu .nav.menu .dropdown {
	background: var(--ilzh-maroon-dark) !important;
}

.main-menu .nav.menu .dropdown li a:hover,
.main-menu .nav.menu .dropdown li a:focus {
	background: #fff !important;
	color: var(--ilzh-maroon) !important;
}

.btn.appointment-btn {
	background: var(--ilzh-maroon) !important;
	border: 2px solid var(--ilzh-maroon) !important;
	color: #fff !important;
}

.btn.appointment-btn:hover,
.appointment-btn:hover {
	background: var(--ilzh-maroon-dark) !important;
	border-color: var(--ilzh-maroon-dark) !important;
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   Cards & sections
   -------------------------------------------------------------------------- */

/* Cards that sit on a light page background.
   NOTE: .single-footer is deliberately NOT in this list. A footer column lives
   inside the dark .footer-top band, so giving it a white card background left
   every footer column as a white box while its text stayed light (#fff, #c9cad6)
   — white text on white, effectively invisible. Footer columns are not cards. */
.single-service,
.single-features,
.single-table,
.single-blog,
.single-news,
.team-item,
.department-item {
	background: var(--ilzh-white);
	border: 1px solid var(--ilzh-line);
	border-radius: var(--ilzh-radius);
	box-shadow: var(--ilzh-shadow-sm);
	transition: box-shadow var(--ilzh-transition), transform var(--ilzh-transition),
		border-color var(--ilzh-transition);
}

.single-service:hover,
.single-features:hover,
.single-table:hover,
.team-item:hover,
.department-item:hover {
	box-shadow: var(--ilzh-shadow-lg);
	transform: translateY(-3px);
	border-color: var(--ilzh-maroon-100);
}

/* --------------------------------------------------------------------------
   Equal-height cards
   --------------------------------------------------------------------------
   The card grids were ragged. Card titles wrap to one or two lines depending on
   how long the name is, the descriptions differ in length, and the icons are
   different glyphs at different optical sizes — so every element below the
   title landed at a different y, the "Learn More" buttons floated at different
   heights, and the card borders did not line up. On /services the Pharmacy
   title sat higher than Imaging and Pathology because its icon is a smaller
   glyph; on the homepage the third blog card was ~25px shorter than the other
   two.

   The fix is to make each card a flex column and pin the rows:
     * the Bootstrap .col-* already stretches to the tallest sibling, so the
       card takes height:100% and fills it;
     * the icon sits in a fixed-height slot, so a big glyph and a small one
       occupy the same space;
     * the title reserves two lines' worth of height, so one- and two-line
       names start their description at the same y;
     * the description absorbs the slack (flex:1);
     * the action is pushed to the bottom with margin-top:auto.
   -------------------------------------------------------------------------- */

.single-service,
.single-blog,
.single-features,
.single-table,
.department-item,
.team-item {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* The service card's icon.

   The template absolutely positions it at the card's left edge and reserves
   room with `padding-left:70px` — but that padding is scoped to
   `.services .single-service`, so on the standalone /services page the icon sat
   on top of the title ("Imaging" read as "naging"). The icon is therefore taken
   out of absolute positioning entirely and put in normal flow on its own line
   above the title, which behaves identically on every page.

   It gets an explicit square because the icon is a glyph whose natural width is
   its own advance width; without one the circular badge became an ellipse. */
.single-service {
	padding-left: 0;
}

.single-service > i {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	font-size: 40px;
	height: 56px;
	justify-content: center;
	line-height: 1;
	margin: 0 0 14px;
	position: static;
	width: 56px;
}

/* .signle-icon is a different element and is already in normal flow (the
   "why choose us" cards), so it just needs a flex slot. */
.signle-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	height: 62px;
	line-height: 1;
}

/* Title: reserve two lines so the row below always starts at the same y. */
.single-service > h4,
.single-blog .blog-title,
.department-item > h4,
.team-item > h4 {
	flex: 0 0 auto;
	min-height: 2.8em;
	margin-bottom: 8px;
}

.single-service > h4 a {
	color: inherit;
	text-decoration: none;
}

.single-service > h4 a:hover {
	color: var(--ilzh-maroon);
}

/* Description takes up whatever is left. */
.single-service > p,
.single-blog .text,
.department-item > p,
.team-item > p {
	flex: 1 1 auto;
}

/* Action pinned to the bottom edge of every card. */
.single-service > .btn,
.single-blog .blog-content > a,
.department-item > .btn,
.team-item > .btn {
	align-self: flex-start;
	flex: 0 0 auto;
	margin-top: auto;
	padding-top: 14px;
}

/* The blog card image keeps a consistent aspect so the rows beneath it line up. */
.single-blog .blog-head {
	flex: 0 0 auto;
	overflow: hidden;
}

.single-blog .blog-head img {
	display: block;
	height: 190px;
	object-fit: cover;
	width: 100%;
}

.signle-icon,
.single-service > i,
.single-blog .icon {
	background: var(--ilzh-maroon-50);
	border-radius: 50%;
	color: var(--ilzh-maroon);
	transition: background-color var(--ilzh-transition), color var(--ilzh-transition);
}

.single-service:hover .signle-icon {
	background: var(--ilzh-maroon);
	color: #fff;
}

.section-title h2 {
	color: var(--ilzh-ink);
}

.section-title img {
	opacity: 0.9;
}

.list li i.fa-caret-right {
	color: var(--ilzh-maroon);
}

/* --------------------------------------------------------------------------
   Footer — navy, matching the letterhead's corner band
   -------------------------------------------------------------------------- */

.footer-top {
	background: var(--ilzh-navy) !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
	color: #c9cad6;
}

.footer .single-footer h2,
.footer .footer-title {
	color: #fff !important;
}

.footer .single-footer p,
.footer-text {
	color: #c9cad6 !important;
}

.footer .single-footer ul li a,
.footer-links a {
	color: #c9cad6 !important;
}

.footer .single-footer ul li a:hover,
.footer-links a:hover {
	color: #fff !important;
}

.footer .time-sidual li.day {
	color: #fff;
}

.footer .time-sidual li.day span {
	color: var(--ilzh-maroon-light);
}

.footer .social a {
	color: #c9cad6;
}

.footer .social a:hover {
	color: #fff;
	transform: translateY(-2px);
}

.copyright {
	background: var(--ilzh-navy-dark) !important;
	border-top: 3px solid var(--ilzh-maroon);
	color: #b9bac6 !important;
}

.copyright .copyright-content a {
	color: #fff;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="search"], input[type="date"], input[type="datetime-local"],
select, textarea {
	border: 1px solid var(--ilzh-line);
	border-radius: var(--ilzh-radius-sm);
	color: var(--ilzh-ink);
	padding: 11px 14px;
	transition: border-color var(--ilzh-transition), box-shadow var(--ilzh-transition);
	width: 100%;
}

input:focus, select:focus, textarea:focus {
	border-color: var(--ilzh-maroon);
	box-shadow: var(--ilzh-ring);
	outline: none;
}

input::placeholder, textarea::placeholder {
	color: var(--ilzh-muted);
}

input.error, select.error, textarea.error,
.has-error input, .has-error select, .has-error textarea {
	border-color: var(--ilzh-danger);
}

.field-error {
	color: var(--ilzh-danger);
	display: block;
	font-size: 13px;
	margin-top: 5px;
}

.field-hint {
	color: var(--ilzh-muted);
	display: block;
	font-size: 13px;
	margin-top: 5px;
}

label {
	color: var(--ilzh-ink);
	font-weight: 500;
}

.form-control.is-invalid, .was-validated .form-control:invalid {
	border-color: var(--ilzh-danger);
}

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */

.alert {
	border: 1px solid transparent;
	border-left-width: 4px;
	border-radius: var(--ilzh-radius-sm);
	padding: 14px 18px;
}

.alert-success {
	background: var(--ilzh-success-bg);
	border-color: var(--ilzh-success);
	color: #14512f;
}

.alert-danger, .alert-error {
	background: var(--ilzh-danger-bg);
	border-color: var(--ilzh-danger);
	color: #7a1717;
}

.alert-warning {
	background: var(--ilzh-warning-bg);
	border-color: var(--ilzh-warning);
	color: #6b4500;
}

.alert-info {
	background: var(--ilzh-info-bg);
	border-color: var(--ilzh-info);
	color: #163a5c;
}

/* --------------------------------------------------------------------------
   Badges (payment status)
   -------------------------------------------------------------------------- */

.badge {
	border-radius: 999px;
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	padding: 6px 12px;
	white-space: nowrap;
}

.badge-paid {
	background: var(--ilzh-success-bg);
	color: var(--ilzh-success);
}

.badge-partial {
	background: var(--ilzh-warning-bg);
	color: var(--ilzh-warning);
}

.badge-due {
	background: var(--ilzh-danger-bg);
	color: var(--ilzh-danger);
}

.badge-cancelled {
	background: #ececf1;
	color: #5a5d6e;
	text-decoration: line-through;
}

.badge-neutral {
	background: var(--ilzh-navy-50);
	color: var(--ilzh-navy);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

table.table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}

table.table th {
	background: var(--ilzh-navy-50);
	border-bottom: 2px solid var(--ilzh-line);
	color: var(--ilzh-ink);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 12px 14px;
	text-transform: uppercase;
	white-space: nowrap;
}

table.table td {
	border-bottom: 1px solid var(--ilzh-line);
	color: var(--ilzh-body);
	padding: 12px 14px;
	vertical-align: middle;
}

table.table tbody tr {
	transition: background-color var(--ilzh-transition);
}

table.table tbody tr:hover {
	background: var(--ilzh-maroon-50);
}

table.table tbody tr:last-child td {
	border-bottom: 0;
}

.table-empty {
	color: var(--ilzh-muted);
	padding: 40px 20px;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Page hero & breadcrumbs
   -------------------------------------------------------------------------- */

.page-hero {
	background: linear-gradient(135deg, var(--ilzh-navy) 0%, #343455 100%);
	padding: 52px 0;
	position: relative;
}

.page-hero::after {
	background: var(--ilzh-maroon);
	bottom: 0;
	content: "";
	height: 4px;
	left: 0;
	position: absolute;
	right: 0;
}

.page-hero h1 {
	color: #fff;
	font-size: 30px;
	margin: 0 0 6px;
}

.page-hero .breadcrumb {
	background: transparent;
	margin: 0;
	padding: 0;
}

.page-hero .breadcrumb-item,
.page-hero .breadcrumb-item a {
	color: #b9bac6;
	font-size: 14px;
}

.page-hero .breadcrumb-item.active {
	color: #fff;
}

.page-hero .breadcrumb-item::before {
	color: var(--ilzh-maroon-light);
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.ilzh-card {
	background: var(--ilzh-white);
	border: 1px solid var(--ilzh-line);
	border-radius: var(--ilzh-radius);
	box-shadow: var(--ilzh-shadow-sm);
	padding: 24px;
}

.ilzh-muted { color: var(--ilzh-muted); }
.ilzh-ink { color: var(--ilzh-ink); }
.ilzh-maroon { color: var(--ilzh-maroon); }
.ilzh-navy { color: var(--ilzh-navy); }
.ilzh-strong { font-weight: 600; }
.ilzh-mono { font-variant-numeric: tabular-nums; }
.ilzh-amount { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ilzh-amount-lg { font-size: 22px; }
.ilzh-nowrap { white-space: nowrap; }

.ilzh-divider {
	background: var(--ilzh-line);
	height: 1px;
	margin: 20px 0;
}

.ilzh-empty {
	color: var(--ilzh-muted);
	padding: 48px 20px;
	text-align: center;
}

.ilzh-empty i {
	color: #c9cad6;
	display: block;
	font-size: 40px;
	margin-bottom: 12px;
}

.skip-link {
	background: var(--ilzh-maroon);
	color: #fff;
	left: -9999px;
	padding: 12px 20px;
	position: absolute;
	top: 0;
	z-index: 9999;
}

.skip-link:focus {
	color: #fff;
	left: 0;
}

.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* --------------------------------------------------------------------------
   Long-form page content (rendered from the `pages` table)
   -------------------------------------------------------------------------- */

.prose-legacy {
	color: var(--ilzh-body);
	font-size: 16px;
	line-height: 1.8;
}

.prose-legacy h2 {
	font-size: 24px;
	margin: 34px 0 14px;
	padding-bottom: 10px;
	position: relative;
}

.prose-legacy h2::after {
	background: var(--ilzh-maroon);
	bottom: 0;
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	width: 54px;
}

.prose-legacy h3 {
	font-size: 19px;
	margin: 26px 0 10px;
}

.prose-legacy > *:first-child { margin-top: 0; }

.prose-legacy p { margin-bottom: 16px; }

.prose-legacy ul,
.prose-legacy ol {
	margin: 0 0 18px;
	padding-left: 22px;
}

.prose-legacy li { margin-bottom: 8px; }

.prose-legacy li::marker { color: var(--ilzh-maroon); }

.prose-legacy strong { color: var(--ilzh-ink); }

.prose-legacy a {
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.prose-legacy blockquote {
	background: var(--ilzh-maroon-50);
	border-left: 4px solid var(--ilzh-maroon);
	border-radius: 0 var(--ilzh-radius-sm) var(--ilzh-radius-sm) 0;
	color: var(--ilzh-ink);
	font-size: 17px;
	font-style: italic;
	margin: 22px 0;
	padding: 18px 22px;
}

.prose-legacy table {
	margin-bottom: 20px;
	width: 100%;
}

.prose-legacy table th,
.prose-legacy table td {
	border: 1px solid var(--ilzh-line);
	padding: 10px 12px;
	text-align: left;
}

.prose-legacy table th { background: var(--ilzh-navy-50); color: var(--ilzh-ink); }

/* --------------------------------------------------------------------------
   Header / brand / navigation
   --------------------------------------------------------------------------
   Written from scratch rather than reused from the Mediplus template, because
   the template's markup could not satisfy two hard requirements: the hospital
   name must be real text beside the logo, and the mobile menu must be a real
   collapsible menu with an accessible name.
   -------------------------------------------------------------------------- */

.ilzh-header {
	position: relative;
	z-index: 5;
}

.header-inner {
	background: var(--ilzh-white);
	border-bottom: 1px solid var(--ilzh-line);
	box-shadow: var(--ilzh-shadow-sm);
	padding: 14px 0;
}

/* The legacy template styled .header, .main-menu and .mobile-nav against a
   different markup shape. Those elements no longer exist in the masthead — the
   header is built from .ilzh-* classes below — so the old rules are cancelled
   here rather than left to cascade unpredictably over the new structure. */
.ilzh-header .main-menu,
.ilzh-header .mobile-nav {
	display: none;
}

/* ── Brand ─────────────────────────────────────────────────────────── */

.ilzh-brand {
	align-items: center;
	color: var(--ilzh-ink);
	display: inline-flex;
	gap: 12px;
	max-width: 100%;
	text-decoration: none;
}

.ilzh-brand:hover,
.ilzh-brand:focus {
	color: var(--ilzh-ink);
	text-decoration: none;
}

.ilzh-brand__logo {
	flex: 0 0 auto;
	height: 48px;
	width: auto;
	max-width: 64px;
	object-fit: contain;
}

.ilzh-brand__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* The name is real text: visible, selectable and indexable. */
.ilzh-brand__name {
	color: var(--ilzh-ink);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.15;
	white-space: nowrap;
}

.ilzh-brand__tagline {
	color: var(--ilzh-maroon);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.3;
	margin-top: 1px;
	white-space: nowrap;
}

.ilzh-brand:hover .ilzh-brand__name {
	color: var(--ilzh-maroon);
}

/* ── Desktop navigation ────────────────────────────────────────────── */

.ilzh-nav__list {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ilzh-nav__item {
	position: relative;
}

/* Inactive items are dark text on the white masthead — a menu, not a row of
   buttons. Filling every item left the "which page am I on" state almost
   invisible, because six maroon pills looked alike and only the active one
   differed. Now only the current page is filled, so the active state is
   unmistakable. Inactive text is #1f2029 on #fff = 16.2:1 (WCAG AAA). */
.ilzh-nav__link {
	align-items: center;
	background: transparent;
	border-radius: var(--ilzh-radius-sm);
	color: var(--ilzh-ink);
	display: inline-flex;
	font-size: 14.5px;
	font-weight: 500;
	gap: 4px;
	padding: 9px 13px;
	text-decoration: none;
	transition: background-color var(--ilzh-transition), color var(--ilzh-transition);
	white-space: nowrap;
}

.ilzh-nav__item:hover > .ilzh-nav__link,
.ilzh-nav__item:focus-within > .ilzh-nav__link {
	background: var(--ilzh-maroon-50);
	color: var(--ilzh-maroon);
}

/* The current page. Filled maroon with white text = 10.7:1, and the only
   filled item in the bar, so it is obvious at a glance. */
.ilzh-nav__item.is-active > .ilzh-nav__link {
	background: var(--ilzh-maroon);
	color: #fff;
	font-weight: 600;
}

.ilzh-nav__caret {
	color: var(--ilzh-maroon);
	font-size: 12px;
	opacity: 0.75;
}

.ilzh-nav__item.is-active > .ilzh-nav__link .ilzh-nav__caret {
	color: #fff;
	opacity: 0.9;
}

.ilzh-nav__dropdown {
	background: var(--ilzh-navy);
	border-radius: var(--ilzh-radius-sm);
	box-shadow: var(--ilzh-shadow-lg);
	display: none;
	left: 0;
	list-style: none;
	margin: 0;
	min-width: 240px;
	padding: 6px;
	position: absolute;
	top: calc(100% + 6px);
	z-index: 20;
}

.ilzh-nav__item:hover > .ilzh-nav__dropdown,
.ilzh-nav__item:focus-within > .ilzh-nav__dropdown {
	display: block;
}

.ilzh-nav__dropdown li {
	list-style: none;
}

.ilzh-nav__dropdown a {
	border-radius: 4px;
	color: #d9d9e4;
	display: block;
	font-size: 14px;
	padding: 9px 12px;
	text-decoration: none;
}

.ilzh-nav__dropdown a:hover,
.ilzh-nav__dropdown a:focus {
	background: var(--ilzh-maroon);
	color: #fff;
}

/* ── Mobile bar ────────────────────────────────────────────────────── */

.ilzh-header__mobile-bar {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: space-between;
	padding-top: 12px;
}

.ilzh-burger {
	align-items: center;
	background: var(--ilzh-maroon);
	border: 1px solid var(--ilzh-maroon);
	border-radius: var(--ilzh-radius-sm);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	gap: 9px;
	padding: 9px 14px;
}

.ilzh-burger:hover {
	background: var(--ilzh-maroon-dark);
}

.ilzh-burger__box {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	width: 20px;
}

.ilzh-burger__bar {
	background: #fff;
	border-radius: 2px;
	display: block;
	height: 2px;
	transition: transform var(--ilzh-transition), opacity var(--ilzh-transition);
	width: 100%;
}

.ilzh-burger[aria-expanded="true"] .ilzh-burger__bar:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.ilzh-burger[aria-expanded="true"] .ilzh-burger__bar:nth-child(2) {
	opacity: 0;
}

.ilzh-burger[aria-expanded="true"] .ilzh-burger__bar:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

.ilzh-burger__text {
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
}

.ilzh-burger__cta {
	padding: 9px 16px;
}

/* ── Mobile panel ──────────────────────────────────────────────────── */

.ilzh-mobile-nav {
	background: var(--ilzh-navy);
	border-top: 3px solid var(--ilzh-maroon);
	left: 0;
	padding: 8px 0 18px;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 40;
}

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

.ilzh-mobile-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ilzh-mobile-nav__item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ilzh-mobile-nav__link,
.ilzh-mobile-nav__toggle {
	align-items: center;
	background: none;
	border: 0;
	color: #e6e6ee;
	display: flex;
	font-size: 15.5px;
	justify-content: space-between;
	padding: 13px 4px;
	text-align: left;
	text-decoration: none;
	width: 100%;
}

.ilzh-mobile-nav__link:hover,
.ilzh-mobile-nav__toggle:hover,
.ilzh-mobile-nav__link[aria-current="page"] {
	color: #fff;
}

.ilzh-mobile-nav__sub {
	list-style: none;
	margin: 0;
	padding: 0 0 10px 14px;
}

.ilzh-mobile-nav__sub[hidden] {
	display: none;
}

.ilzh-mobile-nav__sub a {
	border-left: 2px solid var(--ilzh-maroon);
	color: #c9cad6;
	display: block;
	font-size: 14.5px;
	padding: 8px 12px;
	text-decoration: none;
}

.ilzh-mobile-nav__sub a:hover,
.ilzh-mobile-nav__sub a[aria-current="page"] {
	color: #fff;
}

.ilzh-mobile-nav__contact {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 14px;
	padding-top: 14px;
}

.ilzh-mobile-nav__contact a {
	color: #d9d9e4;
	font-size: 14.5px;
	text-decoration: none;
}

.ilzh-mobile-nav__contact a:hover {
	color: #fff;
}

/* Stop the page scrolling behind an open menu. */
body.ilzh-menu-open {
	overflow: hidden;
}

/* ── Responsive header ─────────────────────────────────────────────── */

@media (max-width: 1199px) {
	.ilzh-nav__link {
		font-size: 13.5px;
		padding: 8px 10px;
	}

	.ilzh-brand__name {
		font-size: 17px;
	}
}

@media (max-width: 991px) {
	/* Desktop nav and CTA are replaced by the burger bar below it. */
	.ilzh-header__nav {
		display: none;
	}

	.ilzh-brand__logo {
		height: 44px;
		max-width: 56px;
	}

	.ilzh-brand__name {
		font-size: 18px;
	}
}

@media (max-width: 420px) {
	/* Allow the name to wrap rather than push the logo off-screen. */
	.ilzh-brand__name {
		font-size: 16px;
		white-space: normal;
	}

	.ilzh-brand__tagline {
		font-size: 10.5px;
	}

	.ilzh-brand__logo {
		height: 38px;
		max-width: 46px;
	}

	.ilzh-burger__text {
		display: none;
	}

	.ilzh-burger {
		padding: 10px 12px;
	}
}

/* ── Footer contact block ──────────────────────────────────────────── */

.ilzh-footer__contact {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.ilzh-footer__contact li {
	color: #c9cad6;
	font-size: 14px;
	line-height: 1.7;
}

.ilzh-footer__contact strong {
	color: #fff;
	display: block;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.ilzh-footer__contact a {
	color: #c9cad6;
	text-decoration: none;
	word-break: break-word;
}

.ilzh-footer__contact a:hover {
	color: #fff;
	text-decoration: underline;
}

/* Outlined call to action for the public receipt verifier. Replaces an inline
   style so it can be tuned in one place and stays legible on the dark band. */
.ilzh-footer__verify {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--ilzh-radius-sm);
	color: #fff;
	display: block;
	font-size: 14.5px;
	font-weight: 500;
	margin-top: 18px;
	padding: 10px 14px;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--ilzh-transition), border-color var(--ilzh-transition);
}

.ilzh-footer__verify:hover,
.ilzh-footer__verify:focus {
	background: #fff;
	border-color: #fff;
	color: var(--ilzh-maroon);
	text-decoration: none;
}

.ilzh-footer__brand {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 14px;
}

.ilzh-footer__brand img {
	height: 40px;
	width: auto;
	max-width: 52px;
	object-fit: contain;
}

.ilzh-footer__brand span {
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
}

/* ── Admin pages use the same public layout, so they get these too ──── */

.admin-ilzh-mobile-note {
	display: none;
}

/* ── Hero headline ────────────────────────────────────────────────────
   The homepage slider repeats one headline across its slides. The template
   styles it with an element selector (.single-slider h1 in style.css and
   responsive.css), which cannot be reused by a different tag — so the
   duplicate slides use .hero-title and these rules reproduce the template's
   look at every breakpoint. brand.css is the last stylesheet loaded, so
   these win over responsive.css without needing !important.
   ---------------------------------------------------------------------- */

.slider .single-slider .hero-title {
	color: #2c2d3f;
	font-size: 38px;
	font-weight: 700;
	line-height: 42px;
	margin: 0;
	padding: 0;
}

.slider .single-slider .hero-title span {
	color: var(--ilzh-maroon);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.slider .single-slider .hero-title {
		font-size: 28px;
		font-weight: 600;
		line-height: 35px;
	}
}

@media only screen and (max-width: 767px) {
	.slider .single-slider .hero-title {
		font-size: 28px;
		font-weight: 600;
		line-height: 35px;
	}
}

@media only screen and (max-width: 450px) {
	.slider .single-slider .hero-title {
		font-size: 20px;
		font-weight: 600;
		line-height: 25px;
	}
}

/* ── Sign-off panel shown instead of a [TODO] marker ──────────────── */

.ilzh-signoff {
	background: var(--ilzh-navy-50);
	border: 1px solid var(--ilzh-line);
	border-left: 4px solid var(--ilzh-maroon);
	border-radius: var(--ilzh-radius-sm);
	margin-top: 28px;
	padding: 20px 24px;
	position: relative;
}

.ilzh-signoff__mark {
	color: var(--ilzh-maroon);
	font-size: 30px;
	opacity: 0.25;
	position: absolute;
	right: 18px;
	top: 12px;
}

.ilzh-signoff__text {
	color: var(--ilzh-ink);
	font-size: 15px;
	margin: 0 0 6px;
}

.ilzh-signoff__meta {
	color: var(--ilzh-muted);
	font-size: 14px;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Preloader

   The overlay itself is only a backdrop; the guarantee that it cannot outlive
   the page lives in components/preloader.blade.php, which removes it on window
   load, on DOMContentLoaded, and after a hard 1.2s timeout.
   -------------------------------------------------------------------------- */

.preloader {
	background: var(--ilzh-white);
	z-index: 99999;
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		/* The delay must go too. The hero uses `animation-fill-mode: both`, so a
		   retained delay holds the element at the animation's start state —
		   opacity 0 — which would leave the headline and the call-to-action
		   buttons invisible rather than merely un-animated. */
		animation-delay: 0ms !important;
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
	}

	.btn:hover,
	.single-service:hover,
	.single-features:hover,
	.single-table:hover {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
	.main-menu {
		background: transparent !important;
		box-shadow: none;
	}

	.page-hero {
		padding: 36px 0;
	}

	.page-hero h1 {
		font-size: 24px;
	}
}

@media (max-width: 575px) {
	.btn {
		padding: 10px 18px;
	}

	.ilzh-card {
		padding: 18px;
	}
}