/* ==========================================================================
   Naggalama Hospital — Design System Layer
   A restrained interaction/consistency layer on top of the existing
   Elementor theme. Targets real, stable Elementor-generated classes only
   (.e-con, .elementor-button, etc.) — never overrides content styling.
   ========================================================================== */

:root {
	--ds-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ds-fast: 200ms;
	--ds-base: 350ms;
	--ds-slow: 550ms;
	--ds-focus-ring: 0 0 0 3px rgba(0, 72, 168, 0.45);
}

/* Dark theme: the Kit's own body_background_color setting doesn't win the
   cascade against the theme's default body background (confirmed via
   inspect_design — computed style stayed #F8F8F8 despite the Kit setting
   correctly storing #001844), so it's forced directly here instead.
   This is now the SITE'S ONLY background paint: every individual section
   (hero, Trust Hub, department bands, footer, etc.) has had its own
   background stripped to transparent, so this one gradient — sized to the
   full body height, not tiled or viewport-fixed — is what actually shows
   through everywhere. Scrolling down the page moves through a different
   slice of this same gradient rather than crossing from one section's
   background into the next, which is what makes it read as one continuous
   canvas instead of a stack of separately-colored blocks. */
body {
	/* Toned-down navy: same 4-stop flow, desaturated and lightened so the
	   floor reads as muted slate-navy rather than near-black -- lets cards
	   go back to solid light panels instead of translucent glass. */
	background: linear-gradient(180deg, #35588F 0%, #2B4670 22%, #23395C 55%, #1C2E4A 100%) !important;
	background-attachment: scroll;
}

/* --------------------------------------------------------------------
   1. Accessible focus states — every interactive element gets a clear,
   consistent focus ring. Mandatory for a healthcare site.
   -------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.ekit-accordion--toggler:focus-visible {
	outline: none;
	box-shadow: var(--ds-focus-ring);
	border-radius: 4px;
}

/* --------------------------------------------------------------------
   2. Buttons — one consistent hover/active language sitewide, on the
   real Elementor button class so every "Call Us Now" / "Call Ambulance"
   / form-submit button behaves identically regardless of which page or
   widget instance created it.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.elementor-button,
	button[type="submit"],
	.elementskit-btn {
		transition: transform var(--ds-fast) var(--ds-ease),
			box-shadow var(--ds-fast) var(--ds-ease),
			filter var(--ds-fast) var(--ds-ease);
	}
	.elementor-button:hover,
	button[type="submit"]:hover {
		transform: translateY(-2px);
		box-shadow: 0 10px 24px -10px rgba(0, 102, 204, 0.55);
		filter: brightness(1.12);
	}
	.elementor-button:active,
	button[type="submit"]:active {
		transform: translateY(0);
		box-shadow: 0 4px 10px -6px rgba(0, 102, 204, 0.5);
		filter: brightness(1.05);
	}
}

/* --------------------------------------------------------------------
   3. Links inside body copy — underline-on-hover rather than always-on,
   reads calmer and more editorial.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.elementor-icon-list-item a,
	.elementor-widget-text-editor a {
		transition: opacity var(--ds-fast) var(--ds-ease);
	}
	.elementor-icon-list-item a:hover,
	.elementor-widget-text-editor a:hover {
		opacity: 0.75;
	}
}

/* --------------------------------------------------------------------
   3b. Card baseline shadow — Elementor's own box-shadow control on
   containers never renders (a platform quirk: valid box_shadow_box_shadow
   settings produce zero CSS output), so the "card" shadow token is
   defined here instead, applied to every known card container by its
   stable Elementor element ID. This also lets the JS layer's shadow
   auto-detection (below) pick these up for the hover-lift treatment.
   -------------------------------------------------------------------- */
.elementor-element-vmcard1,
.elementor-element-vmcard2,
.elementor-element-acccard1,
.elementor-element-acccard2,
.elementor-element-depcard0,
.elementor-element-depcard1,
.elementor-element-depcard2,
.elementor-element-depcard3,
.elementor-element-depcard4,
.elementor-element-depcard5,
.elementor-element-depcard6,
.elementor-element-depcard7 {
	/* Toned-down navy + solid light cards: a cool-tinted shadow anchored to
	   PRIMARY blue reads as "lifted off a colored floor" instead of a
	   generic black UI-kit shadow. */
	box-shadow: 0 20px 44px -28px rgba(0, 72, 168, 0.28) !important;
}

/* --------------------------------------------------------------------
   3c. Laboratory card photo row — same underlying Elementor quirk as
   the box-shadow fix above (a valid flex_direction:"row" setting still
   computes as column), forced directly here.
   -------------------------------------------------------------------- */
.elementor-element-labphotorow {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
}
.elementor-element-labphotowrap,
.elementor-element-bbphotowrap {
	flex: 1 1 260px !important;
	width: auto !important;
}

/* Accreditation cards (About page) — same quirk: valid flex_direction:"row"
   in the JSON still computes as column in the browser. */
.elementor-element-accrow {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
}
.elementor-element-acccard1,
.elementor-element-acccard2 {
	flex: 1 1 300px !important;
	width: auto !important;
}

/* Departments "big redesign" row containers (badge rows, clinic grids,
   icon-panel + content rows) — element IDs all share the "frow" prefix
   deliberately so this one rule covers all of them against the same
   flex_direction:"row"-not-rendering quirk, without needing an entry per ID. */
[class*="elementor-element-frow"] {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
}

/* --------------------------------------------------------------------
   4. Card hover lift — applied only to containers the JS layer has
   confirmed actually carry a shadow (i.e. are real "cards" we built:
   department cards, accreditation cards, founder/vision cards). Never
   applied blindly to every container, which would catch layout wrappers.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.ds-card {
		transition: transform var(--ds-base) var(--ds-ease),
			box-shadow var(--ds-base) var(--ds-ease);
	}
	.ds-card:hover {
		transform: translateY(-4px);
	}
	.ds-card .elementor-widget-image {
		overflow: hidden;
		border-radius: inherit;
	}
	.ds-card .elementor-widget-image img {
		transition: transform var(--ds-slow) var(--ds-ease);
	}
	.ds-card:hover .elementor-widget-image img {
		transform: scale(1.045);
	}
}

/* --------------------------------------------------------------------
   5. Scroll reveal — top-level Elementor sections fade/rise into view.
   Content is visible by default (progressive enhancement): only
   elements the JS has explicitly armed start hidden, so no-JS visitors
   and reduced-motion users see everything immediately.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.ds-reveal {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity var(--ds-slow) var(--ds-ease),
			transform var(--ds-slow) var(--ds-ease);
	}
	.ds-reveal.ds-reveal--in {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --------------------------------------------------------------------
   5b. Header polish
   - Logo column was rendering ~319px wide around a 62px logo (leftover
     flex-basis from the pre-resize logo), pushing the nav hard right
     and leaving a huge dead gap. Let it size to its actual content.
   - Nav row's own justify-content:space-between wasn't taking effect
     (same class of Elementor quirk as the box-shadow/flex-direction
     issues found earlier this session), forced here directly.
   -------------------------------------------------------------------- */
.elementor-element-174fd231 {
	flex: 0 0 auto !important;
	width: auto !important;
}
.elementor-element-41be9e93 > .e-con-inner {
	justify-content: space-between !important;
}
.elementor-element-7780a8e6 {
	padding-right: 4px;
	display: flex !important;
	align-items: center !important;
	gap: 18px;
}

.kn-emergency-inline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #ffffff;
	font-family: "Barlow", sans-serif;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
}
.kn-emergency-inline i {
	color: #0066CC;
}
.kn-emergency-inline:hover {
	color: #0066CC;
}
@media (max-width: 900px) {
	.kn-emergency-inline span {
		display: none;
	}
}

/* --------------------------------------------------------------------
   6. Sticky header — the phone/email utility bar and the nav row are
   now a single merged row (id 41be9e93), sticky from the top of every
   page. The full contact list (Maternity/OPD/Private Wing numbers,
   consultation email) lives on the Contact page; only the Emergency
   number stays inline in the header, alongside Call Us Now.
   -------------------------------------------------------------------- */
.ds-sticky-nav {
	position: sticky;
	top: 0;
	z-index: 999;
	background: linear-gradient(160deg, #0048A8 0%, #001844 100%);
}
@media (prefers-reduced-motion: no-preference) {
	.ds-sticky-nav {
		transition: box-shadow var(--ds-base) var(--ds-ease),
			padding var(--ds-base) var(--ds-ease);
	}
}
.ds-sticky-nav.ds-scrolled {
	box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.55);
}
.ds-sticky-nav.ds-scrolled .e-con-inner {
	--padding-block-start: 8px;
	--padding-block-end: 8px;
}

/* --------------------------------------------------------------------
   7. Specialist Clinics — weekly schedule grid (Departments page)
   Built as two text-editor widgets per day column (raw HTML pills)
   rather than one Elementor widget per clinic, since per-widget
   flex_direction/box-shadow settings have proven unreliable this
   session — full styling control kept here instead.
   -------------------------------------------------------------------- */
.elementor-element-clinicalcalscroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid #D9E5F3;
	border-radius: 10px;
	background: #F5F9FE;
}
.elementor-element-clinicalcalrow {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	min-width: 700px;
}
.elementor-element-clinicalcalrow > .elementor-element {
	border-right: 1px solid #D9E5F3;
}
.elementor-element-clinicalcalrow > .elementor-element:last-child {
	border-right: none;
}
[class*="elementor-element-clcol-"] {
	display: flex !important;
	flex-direction: column !important;
}
.ds-cal-daylabel {
	display: block;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ffffff;
	background: #0066CC;
	padding: 12px 6px;
}
[class*="elementor-element-clcol-sat"] .ds-cal-daylabel,
[class*="elementor-element-clcol-sun"] .ds-cal-daylabel {
	background: #EAF1FB;
	color: #667085;
}
[class*="elementor-element-clbody-"] {
	padding: 12px 8px;
	min-height: 220px;
}
[class*="elementor-element-clbody-"] .elementor-widget-container {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: stretch;
}
.ds-cal-pill {
	display: block;
	font-size: 12px;
	line-height: 1.35;
	color: #172033;
	background: #FFFFFF;
	border: 1px solid #D9E5F3;
	border-radius: 6px;
	padding: 7px 8px;
	text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
	.ds-cal-pill {
		transition: transform var(--ds-fast) var(--ds-ease),
			background var(--ds-fast) var(--ds-ease),
			color var(--ds-fast) var(--ds-ease);
	}
	.ds-cal-pill:hover {
		background: #0066CC;
		border-color: #0066CC;
		color: #ffffff;
		transform: translateY(-1px);
	}
}
.ds-cal-empty {
	display: block;
	font-size: 12px;
	font-style: italic;
	color: #98A2B3;
	text-align: center;
	padding: 8px 4px;
}
/* "Today" highlight, applied client-side by design-system.js */
[class*="elementor-element-clcol-"].ds-cal-today {
	background: rgba(0, 102, 204, 0.18);
}
[class*="elementor-element-clcol-"].ds-cal-today .ds-cal-daylabel {
	background: #0048A8;
	color: #ffffff;
}
@media (max-width: 767px) {
	[class*="elementor-element-clcol-"] {
		width: 132px !important;
		flex: 0 0 132px !important;
	}
}

/* --------------------------------------------------------------------
   9. MetForm dark-mode overrides (Contact + Departments booking forms)
   — MetForm ships its own light-theme input styling (white fields, dark
   borderless-looking inputs) that doesn't adapt to the site's own color
   system, so it's overridden directly by MetForm's stable CSS classes.
   -------------------------------------------------------------------- */
.mf-input-label {
	color: #ffffff !important;
}
.mf-input-required-indicator {
	color: #0066CC !important;
}
.mf-input {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	color: #ffffff !important;
}
.mf-input::placeholder {
	color: rgba(255, 255, 255, 0.45) !important;
}
.metform-submit-btn {
	background: #0048A8 !important;
	color: #ffffff !important;
	border: none !important;
}
@media (prefers-reduced-motion: no-preference) {
	.metform-submit-btn {
		transition: background var(--ds-fast) var(--ds-ease), filter var(--ds-fast) var(--ds-ease);
	}
}
.metform-submit-btn:hover {
	background: #0066CC !important;
	filter: brightness(1.1);
}

/* --------------------------------------------------------------------
   11. Vision & Mission (About page) — same recurring quirk as every
   other flex_direction:"row" fix this session: valid in the JSON,
   renders as column in the browser. Cards already carry width:48% in
   their own JSON, so only the parent's row direction needs forcing.
   -------------------------------------------------------------------- */
.elementor-element-5b6843f3 {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
}
.elementor-element-vmcard1,
.elementor-element-vmcard2 {
	flex: 1 1 320px !important;
	width: auto !important;
}

/* --------------------------------------------------------------------
   12. Kinetic nav overlay — the old ElementsKit nav-menu widget is
   hidden (never deleted) in favor of the new full-screen kinetic menu
   triggered from .kn-menu-toggle-btn (see mu-plugins/kinetic-nav).
   Reversible: delete this rule to restore the original nav instantly.
   -------------------------------------------------------------------- */
.elementor-element-1f06b7da {
	display: none !important;
}

/* --------------------------------------------------------------------
   13. ElementsKit "header info" widget (Departments' "Top-Rated Hospital"
   banner) ships its own white background baked into the plugin's CSS,
   outside Elementor's own background controls — same class of problem as
   MetForm's default input styling. Forced transparent so it joins the
   single continuous body gradient instead of showing as a white stripe.
   -------------------------------------------------------------------- */
.elementor-widget-elementskit-header-info .ekit-wid-con,
.elementor-widget-elementskit-header-info .ekit-header-info {
	background: transparent !important;
}

/* Respect reduced motion globally as a final guard */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}