/*
Theme Name: Banon Zeraeen Child
Theme URI: https://banoonzeraeenhospital.com
Template: banon-base
Author: Banon Zeraeen Hospital Web Team
Description: الثيم الفرعي الخاص بمستشفى بنون الزراعيين — يحمل الهوية البصرية (الأخضر #237b34 والبرتقالي #dc6b33)، الخطوط، والإعدادات الافتراضية المستخرجة من الموقع الأصلي. هذا هو الثيم الذي يجب تفعيله على الموقع.
Version: 1.0.7
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: banon-zeraeen-child
*/

:root {
	--banon-color-primary: #237b34;      /* الأخضر الأساسي — من التصميم الأصلي */
	--banon-color-primary-alt: #108626;  /* أخضر ثانوي (تظليل/تدرج) */
	--banon-color-primary-dark: #032f0c; /* أخضر غامق (تذييل/خلفيات داكنة) */
	--banon-color-accent: #dc6b33;       /* البرتقالي — لون التمييز (شارات/حدود) */
	--banon-color-accent-btn: #b05528;       /* برتقالي أغمق، للأزرار التفاعلية فقط — نص أبيض = 5.03:1 (WCAG AA) */
	--banon-color-accent-btn-hover: #9a4a23; /* نفس اللون عند hover/focus/active — نص أبيض = 6.22:1 */
	--banon-color-heading: #222222;
	--banon-color-body: #6a6c72;
	--banon-color-bg-tint: #F8F8F8;
	--banon-color-bg-tint-2: #F1F5FE;
	--banon-color-border: #eeeeee;
	/* v1.0.2: no licensed font files are available yet (assets/fonts/ ships
	   empty — see session-16-status.md), so this uses a fast, reliable
	   Arabic-first system stack instead of @font-face requests that would
	   404. Tahoma renders Arabic well and ships on Windows; Segoe UI covers
	   modern Windows; Arial is the universal fallback on macOS/Android/iOS.
	   Re-add "Alexandria"/"DGShamael-Black" as the first entries once the
	   client supplies the real licensed font files and assets/css/fonts.css
	   is restored. */
	--banon-font-heading: Tahoma, Arial, "Segoe UI", sans-serif;
	--banon-font-body: Tahoma, Arial, "Segoe UI", sans-serif;
	--banon-radius: 10px;

	/* ====================================================================
	   v1.0.4 — premium color system (homepage redesign pass).
	   The original brand green/orange (--banon-color-primary,
	   --banon-color-accent, --banon-color-accent-btn) are UNCHANGED and
	   still used everywhere they already were (buttons, links, badges) —
	   this section only ADDS a deeper, richer supporting palette so
	   sections can alternate atmosphere instead of the whole page reading
	   as one flat pale-green/white surface. Every combination below is
	   verified >= 4.5:1 (see session-20-status.md for the contrast table).
	   ==================================================================== */
	--banon-emerald-950: #04180d;  /* near-black deep emerald — nav/footer/deep sections */
	--banon-emerald-900: #0a2e18;
	--banon-emerald-800: #123f21;
	--banon-emerald-700: #1c5c2f;  /* rich medical green — headings on light bg, deep-section mid-tone */
	--banon-teal-600: #0e766e;     /* teal highlight — dimension, alternates with emerald */
	--banon-teal-700: #0b5951;
	--banon-mint-50: #f4fbf6;      /* soft mint — supporting background only, never full sections */
	--banon-mint-100: #eaf6ee;
	--banon-warm-white: #fbfaf6;   /* warm off-white — replaces flat #fff on alternating sections */
	--banon-charcoal-green: #14231a; /* near-black green — premium heading/body color */
	--banon-gold-500: #c79a3d;     /* subtle gold — small accents only (on deep-emerald bg) */
	--banon-gold-700: #8a6a1f;     /* darker gold — small accents on light bg, AA-safe as text */

	/* Motion tokens (motion-language-designer skill scale, calibrated to a
	   calm/premium-but-responsive medical brand — restrained, not showy). */
	--banon-ease-standard: cubic-bezier(0.22, 1, 0.36, 1); /* one signature easing, used everywhere */
	--banon-duration-fast: 180ms;   /* hover/tap micro-feedback */
	--banon-duration-base: 320ms;   /* section/card reveals */
	--banon-duration-slow: 560ms;   /* hero, scene-level changes */
	--banon-distance-sm: 10px;      /* restrained travel distance for reveals */
	--banon-distance-md: 18px;
}

html {
	direction: rtl;
}

body {
	font-family: var(--banon-font-body);
	color: var(--banon-color-body);
	font-size: 16px;
	line-height: 1.8;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.elementor-heading-title {
	font-family: var(--banon-font-heading);
	color: var(--banon-color-heading);
}

a {
	color: var(--banon-color-heading);
	transition: 0.3s;
}
a:hover,
a:focus {
	color: var(--banon-color-primary);
}

/* Buttons — reproduces the original site's primary CTA look.
   v1.0.3: the two "color: #ffffff" declarations below lost their
   "!important" (background-color was never !important and never needed
   to be). This is a deliberate, minimal fix for a real contrast bug found
   while building the Session 19 premium homepage redesign: with
   !important in place, EVERY Elementor Button widget was forced to white
   text no matter what an editor chose in the widget's own Style panel —
   so a legitimate "white background + dark green text" outline/ghost
   button (needed for buttons placed on light or white sections) rendered
   as invisible white-on-white. Elementor already writes each button's own
   colour choice into a highly specific, ID-scoped rule (e.g.
   ".elementor-element-<id> .elementor-button{color:...}"), which already
   beats this bare ".elementor-button" selector on specificity alone —
   !important was the only thing forcing it to lose anyway. Removing it
   restores normal cascade behaviour: any Button widget that sets its own
   colour keeps that exact colour (unchanged from before), and any Button
   widget that does NOT set an explicit colour still falls back to this
   same green background / white text default, exactly as before. No
   existing page's already-published buttons change appearance from this
   edit. .banon-btn (the plain, non-Elementor CSS class used by the PHP
   archive/search/404 templates, which has no per-instance colour system
   of its own) is unaffected in practice — nothing overrides it, so it
   keeps the same forced white text it always had. */
.banon-btn,
.elementor-button {
	background-color: var(--banon-color-primary);
	color: #ffffff;
	border-radius: var(--banon-radius);
	padding: 12px 30px;
	font-weight: 600;
	display: inline-block;
	border: none;
}
.banon-btn:hover,
.elementor-button:hover {
	background-color: var(--banon-color-primary-alt);
	color: #ffffff;
}

/* v1.0.2 — WCAG-safe orange for INTERACTIVE BUTTONS ONLY (e.g. Elementor
   Button widgets set to the site's Secondary/orange colour, such as the
   homepage "حجز موعد" / "اعرف عنا المزيد" hero buttons). White button text
   on the original orange (--banon-color-accent, #dc6b33) measures 3.39:1 —
   fails WCAG AA 4.5:1 for normal-size text. A dark identity-green text on
   that same orange was tested too (--banon-color-primary-dark) and only
   reaches 4.37:1 — also short of 4.5:1 — so per instruction this darkens
   the orange for buttons only. --banon-color-accent itself (#dc6b33) is
   completely untouched everywhere else: the logo, .banon-badge, borders
   and any other decorative use keep the original orange exactly as before.

   Mechanism: Elementor exposes each Global Colour as the CSS custom
   property --e-global-color-<slug> (e.g. --e-global-color-secondary) and a
   widget set to that Global Colour reads its background through that
   variable. Redefining it only inside .elementor-button scopes the safer
   shade strictly to button widgets using the Secondary colour — it cannot
   reach unrelated elements (badges, borders, wp-admin) that reference the
   same variable outside a button, and buttons using the Primary/green
   colour are completely unaffected (they don't read this variable).
   NOTE: this override could not be verified against the live rendered
   button in this pass (browser tooling was unavailable) — if this
   Elementor install does not expose --e-global-color-secondary (older
   versions bake a literal hex into the generated per-widget CSS instead),
   this rule is a harmless no-op and the button simply stays as it was
   before v1.0.2 — it cannot make anything render worse. See
   session-17-status.md for how to confirm/patch this after install. */
.elementor-button {
	--e-global-color-secondary: var(--banon-color-accent-btn);
}
.elementor-button:hover,
.elementor-button:focus-visible,
.elementor-button:active {
	--e-global-color-secondary: var(--banon-color-accent-btn-hover);
}
/* Disabled buttons: don't rely on a brand colour + opacity (opacity blends
   with whatever is behind the button and can silently drop below AA) —
   use the existing --banon-color-body identity token instead, which is
   independently confirmed at 5.25:1 with white text. */
.elementor-button[disabled],
.elementor-button.elementor-button-disabled,
.banon-btn[disabled] {
	background-color: var(--banon-color-body) !important;
	color: #ffffff !important;
	opacity: 1;
	cursor: not-allowed;
}

/* Accent badges (department tags, "جديد" labels, etc.) */
.banon-badge {
	color: var(--banon-color-accent);
	border: 2px solid var(--banon-color-accent);
	border-radius: 30px;
	padding: 4px 16px;
	font-size: 14px;
	display: inline-block;
}

/* ==========================================================================
   v1.0.4 — Header, complete redesign (premium homepage pass).
   Slim utility bar (unchanged structurally) + a real-logo, single-line,
   sticky-shrinking main nav with a real department dropdown. Every size
   below was chosen so the full 9-item menu + logo + CTA fits one line at
   desktop widths without wrapping; the hamburger threshold moved from
   767px to 1024px so tablet widths never see a cramped/wrapped bar.
   ========================================================================== */

/* Top contact bar */
.banon-topbar {
	background-color: var(--banon-emerald-950);
	color: #ffffff;
	font-size: 13px;
}
.banon-topbar-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 8px 20px;
}
.banon-topbar-contact {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}
.banon-topbar a,
.banon-topbar-hours {
	color: rgba(255, 255, 255, 0.88);
}
.banon-topbar a:hover,
.banon-topbar a:focus {
	color: #ffffff;
}
.banon-topbar-emergency a {
	color: var(--banon-gold-500);
	font-weight: 600;
}

/* Main header */
.site-header {
	background-color: #ffffff;
	box-shadow: 0 1px 0 rgba(4, 24, 13, 0.06);
	position: sticky;
	top: 0;
	z-index: 200;
	transition: box-shadow var(--banon-duration-base) var(--banon-ease-standard);
}
.site-header.is-scrolled {
	box-shadow: 0 8px 24px rgba(4, 24, 13, 0.12);
}
.banon-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 14px 20px;
	transition: padding var(--banon-duration-base) var(--banon-ease-standard);
}
.site-header.is-scrolled .banon-header-inner {
	padding: 8px 20px;
}
.site-branding {
	flex-shrink: 0;
}
.site-logo-link {
	display: inline-flex;
	align-items: center;
}
.site-branding img,
.banon-fallback-logo {
	max-height: 64px;
	width: auto;
	transition: max-height var(--banon-duration-base) var(--banon-ease-standard);
}
.site-header.is-scrolled .site-branding img,
.site-header.is-scrolled .banon-fallback-logo {
	max-height: 46px;
}
.main-navigation {
	flex: 1 1 auto;
	min-width: 0;
}
.main-navigation ul#primary-menu {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: nowrap;
}
.main-navigation ul#primary-menu > li {
	position: relative;
	flex-shrink: 0;
}
.main-navigation a {
	font-weight: 600;
	font-size: 15px;
	padding: 10px 12px;
	display: inline-block;
	border-radius: 6px;
	white-space: nowrap;
	transition: background-color var(--banon-duration-fast) var(--banon-ease-standard),
		color var(--banon-duration-fast) var(--banon-ease-standard);
}
.main-navigation a:hover,
.main-navigation a:focus-visible,
.main-navigation li.menu-item-has-children:hover > a {
	color: var(--banon-emerald-700);
	background-color: var(--banon-mint-100);
}
.main-navigation a:focus-visible {
	outline: 2px solid var(--banon-emerald-700);
	outline-offset: 2px;
}

/* Real department dropdown — desktop: hover/focus reveal; keyboard-reachable. */
.main-navigation .banon-sub-menu,
.main-navigation .sub-menu {
	list-style: none;
	margin: 0;
	padding: 10px;
	position: absolute;
	inset-inline-start: 0;
	top: 100%;
	min-width: 240px;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 20px 40px rgba(4, 24, 13, 0.16);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--banon-duration-fast) var(--banon-ease-standard),
		transform var(--banon-duration-fast) var(--banon-ease-standard),
		visibility 0s linear var(--banon-duration-fast);
	z-index: 10;
}
.main-navigation li.menu-item-has-children:hover > .banon-sub-menu,
.main-navigation li.menu-item-has-children:focus-within > .banon-sub-menu,
.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}
.main-navigation .banon-sub-menu li,
.main-navigation .sub-menu li {
	width: 100%;
}
.main-navigation .banon-sub-menu a,
.main-navigation .sub-menu a {
	display: block;
	width: 100%;
	font-size: 14px;
	font-weight: 500;
	padding: 9px 12px;
}
.main-navigation .banon-sub-menu-all a {
	color: var(--banon-emerald-700);
	font-weight: 700;
	border-top: 1px solid var(--banon-color-border);
	margin-top: 4px;
	padding-top: 12px;
}

.banon-header-cta {
	white-space: nowrap;
	flex-shrink: 0;
	padding: 12px 22px;
}
.banon-nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--banon-color-border);
	border-radius: 8px;
	padding: 9px 11px;
	cursor: pointer;
	flex-shrink: 0;
}
.banon-nav-toggle:focus-visible {
	outline: 2px solid var(--banon-emerald-700);
	outline-offset: 2px;
}
.banon-nav-toggle-bars,
.banon-nav-toggle-bars::before,
.banon-nav-toggle-bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--banon-charcoal-green);
	position: relative;
	transition: transform var(--banon-duration-fast) var(--banon-ease-standard);
}
.banon-nav-toggle-bars::before {
	content: "";
	position: absolute;
	top: -7px;
}
.banon-nav-toggle-bars::after {
	content: "";
	position: absolute;
	top: 7px;
}
.banon-nav-toggle[aria-expanded="true"] .banon-nav-toggle-bars {
	background: transparent;
}
.banon-nav-toggle[aria-expanded="true"] .banon-nav-toggle-bars::before {
	transform: rotate(45deg) translate(-5px, 5px);
}
.banon-nav-toggle[aria-expanded="true"] .banon-nav-toggle-bars::after {
	transform: rotate(-45deg) translate(-5px, -5px);
}

/* Hamburger breakpoint moved to 1024px — see the @media(max-width:1024px)
   block below for the mobile/tablet nav-panel rules (replaces the old
   767px rules further down, which are removed). */
@media (min-width: 1025px) {
	/* Slightly tighten spacing on the narrower end of desktop so all 9
	   items + logo + CTA are guaranteed to stay on one line down to
	   1025px, matching the "no wrapping ever" requirement. */
	.main-navigation ul#primary-menu {
		gap: 0;
	}
	.main-navigation a {
		padding: 10px 10px;
		font-size: 14.5px;
	}
}

/* Footer */
.site-footer {
	background-color: var(--banon-color-primary-dark);
	color: #ffffff;
	padding: 60px 0 20px;
}
.site-footer a {
	color: #ffffff;
}
.site-footer a:hover {
	color: var(--banon-color-accent);
}
.banon-footer-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.banon-footer-col h3 {
	color: #ffffff;
	font-size: 16px;
	margin-bottom: 16px;
}
.banon-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.banon-footer-col li {
	margin-bottom: 10px;
}
.banon-footer-logo img {
	max-height: 60px;
	margin-bottom: 15px;
}
.banon-footer-more {
	display: inline-block;
	margin-top: 10px;
	font-weight: 600;
	color: var(--banon-color-accent);
}
.site-info {
	padding-top: 20px;
	font-size: 13px;
	text-align: center;
	opacity: 0.85;
}

/* Skip link (accessibility) */
.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--banon-color-primary);
	color: #fff;
	padding: 10px 20px;
	z-index: 100000;
}
.skip-link:focus {
	top: 0;
}

/* Visible, high-contrast focus states for keyboard navigation (WCAG 2.1 AA).
   v1.0.2: upgraded to a two-tone "halo" ring (solid outline + companion
   box-shadow ring in the opposite tone) instead of a single accent-colour
   outline. A single colour cannot pass 3:1 against every real background
   this site uses (white pages, the light grey page-banner tint, the green
   primary buttons, and the dark-green footer/top bar) — verified with the
   WCAG relative-luminance formula for every pairing below:
     dark ring (--banon-color-primary-dark #032f0c) vs white:      14.83:1
     dark ring vs page-banner tint (#F8F8F8):                       13.97:1
     white halo vs green button bg (--banon-color-primary #237b34):  5.31:1
   The outline is never removed without this replacement — every element
   that had a visible outline before still has one, just tuned per context
   immediately below. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.elementor-button:focus-visible,
.banon-btn:focus-visible {
	outline: 3px solid var(--banon-color-primary-dark);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.95);
	border-radius: 2px;
}
/* On dark backgrounds (top contact bar, footer) the dark-green outline
   above would disappear into the background it sits on, so those two
   areas get the ring inverted: white outline + dark-green halo. Scoped
   strictly to .banon-topbar/.site-footer descendants — does not touch
   Elementor's own widgets, other page content, or wp-admin. */
.banon-topbar a:focus-visible,
.site-footer a:focus-visible {
	outline-color: #ffffff;
	box-shadow: 0 0 0 5px var(--banon-color-primary-dark);
}

/* Department / doctor / service cards — shared component look.
   v1.0.4: richer shadow/radius + a thin directional accent bar (green→teal)
   along the leading edge, echoing .banon-card-layered-accent, so the real
   department/doctor/service grids (rendered via shortcode, not raw
   Elementor markup — can't take Elementor's per-widget CSS-classes field)
   still read as "premium layered cards" rather than plain boxes. */
.banon-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--banon-color-border);
	border-radius: 16px;
	overflow: hidden;
	/* v1.0.5: ".elementor a { box-shadow: none }" (Elementor frontend.min.css)
	   outranks a bare ".banon-card" on specificity (class+tag beats class
	   alone), silently zeroing this box-shadow on every shortcode-rendered
	   card (they render as <a>). Every box-shadow declaration below is
	   duplicated onto the ".elementor .banon-card..." form (2 classes) to
	   win regardless of source order. */
	box-shadow: 0 10px 26px -18px rgba(4, 24, 13, 0.28);
	transition: transform var(--banon-duration-base) var(--banon-ease-standard),
		box-shadow var(--banon-duration-base) var(--banon-ease-standard);
}
.elementor .banon-card {
	box-shadow: 0 10px 26px -18px rgba(4, 24, 13, 0.28);
}
.banon-card::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(180deg, var(--banon-color-primary), var(--banon-teal-600));
	opacity: 0;
	transition: opacity var(--banon-duration-fast) var(--banon-ease-standard);
}
.banon-card:hover,
.banon-card:focus-within {
	box-shadow: 0 26px 44px -20px rgba(4, 24, 13, 0.32);
	transform: translateY(-6px);
}
.elementor .banon-card:hover,
.elementor .banon-card:focus-within {
	box-shadow: 0 26px 44px -20px rgba(4, 24, 13, 0.32);
}
.banon-card:hover::before,
.banon-card:focus-within::before {
	opacity: 1;
}
.banon-card img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform var(--banon-duration-slow) var(--banon-ease-standard);
}
.banon-card:hover img {
	transform: scale(1.04);
}
.banon-card .banon-card-body {
	padding: 20px;
}

/* Prevent layout shift on hero/media images (performance requirement) */
img {
	max-width: 100%;
	height: auto;
}

/* Shared page container (matches Elementor's default boxed content width
   so PHP-templated archive/single pages line up visually with Elementor
   Page-type content). */
.banon-container {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Page banner — shared H1 + breadcrumbs header used by every PHP
   archive/single template (template-parts/page-banner.php). */
.banon-page-banner {
	background-color: var(--banon-color-bg-tint);
	border-bottom: 1px solid var(--banon-color-border);
	padding: 40px 0;
	margin-bottom: 40px;
	text-align: center;
}
.banon-page-banner-inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
}
.banon-page-banner h1 {
	margin: 0 0 10px;
	font-size: 30px;
}
.banon-breadcrumbs,
.banon-page-banner nav[aria-label] {
	font-size: 14px;
	color: var(--banon-color-body);
}
.banon-breadcrumbs a {
	color: var(--banon-color-body);
}
.banon-breadcrumbs a:hover {
	color: var(--banon-color-primary);
}

/* Specialty filter bar on the doctors archive */
.banon-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 30px;
}
.banon-filter-bar a {
	border: 1px solid var(--banon-color-border);
	border-radius: 30px;
	padding: 8px 20px;
	font-size: 14px;
	color: var(--banon-color-heading);
}
.banon-filter-bar a:hover,
.banon-filter-bar a.is-active {
	background-color: var(--banon-color-primary);
	border-color: var(--banon-color-primary);
	color: #ffffff;
}

/* Individual doctor profile */
.banon-doctor-profile {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 40px;
	align-items: start;
	padding-bottom: 60px;
}
.banon-doctor-photo img {
	border-radius: var(--banon-radius);
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
.banon-doctor-photo-placeholder {
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: var(--banon-radius);
	background-color: var(--banon-color-bg-tint);
	border: 1px dashed var(--banon-color-border);
}
.banon-doctor-title {
	color: var(--banon-color-primary);
	font-weight: 600;
	font-size: 18px;
}
.banon-doctor-bio,
.banon-doctor-qualifications {
	margin-top: 20px;
	line-height: 1.9;
}
.banon-doctor-schedule {
	margin-top: 30px;
}
.banon-doctor-schedule table {
	width: 100%;
	border-collapse: collapse;
}
.banon-doctor-schedule th,
.banon-doctor-schedule td {
	border: 1px solid var(--banon-color-border);
	padding: 10px 14px;
	text-align: right;
}
.banon-doctor-schedule th {
	background-color: var(--banon-color-bg-tint);
}
.banon-doctor-details .banon-btn {
	margin-top: 30px;
}

/* Department / service single pages */
.banon-department-body,
.banon-service-body {
	padding-bottom: 60px;
}
.banon-department-photo img,
.banon-service-photo img {
	width: 100%;
	border-radius: var(--banon-radius);
	margin-bottom: 20px;
}
.banon-department-summary,
.banon-service-summary {
	font-size: 18px;
	color: var(--banon-color-heading);
}
.banon-department-content,
.banon-service-content {
	line-height: 1.9;
	margin: 20px 0;
}
.banon-department-doctors,
.banon-department-services {
	margin-top: 40px;
}
.banon-department-services-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.banon-department-services-list li {
	border-bottom: 1px solid var(--banon-color-border);
	padding: 12px 0;
}
.banon-service-department {
	margin: 15px 0;
}

/* Blog archive + article */
.banon-card-date,
.banon-card-type {
	display: block;
	font-size: 13px;
	color: var(--banon-color-accent);
	margin-bottom: 6px;
}
.banon-card-reviewer {
	display: block;
	font-size: 12px;
	color: var(--banon-color-body);
	margin-top: 8px;
}
.banon-article {
	padding-bottom: 60px;
	max-width: 820px;
}
.banon-article-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	font-size: 14px;
	color: var(--banon-color-body);
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--banon-color-border);
}
.banon-article-photo img {
	width: 100%;
	border-radius: var(--banon-radius);
	margin-bottom: 20px;
}
.banon-article-content {
	line-height: 2;
}
.banon-article-content h2,
.banon-article-content h3 {
	margin-top: 30px;
}
.banon-article-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
}
.banon-article-content table th,
.banon-article-content table td {
	border: 1px solid var(--banon-color-border);
	padding: 8px 12px;
}
.banon-medical-disclaimer {
	background-color: var(--banon-color-bg-tint);
	border-right: 4px solid var(--banon-color-accent);
	border-radius: 6px;
	padding: 16px 20px;
	margin: 30px 0;
	font-size: 14px;
}

/* Search results + 404 */
.banon-search-suggestions,
.banon-404-links {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.banon-search-suggestions li a,
.banon-404-links li a {
	border: 1px solid var(--banon-color-border);
	border-radius: 30px;
	padding: 8px 20px;
	display: inline-block;
}
.banon-404-body {
	text-align: center;
	padding: 40px 0 80px;
}
.banon-404-body .search-form {
	max-width: 420px;
	margin: 20px auto;
	display: flex;
	gap: 8px;
}
.banon-404-body .search-form input[type="search"] {
	flex: 1;
	padding: 10px 14px;
	border: 1px solid var(--banon-color-border);
	border-radius: var(--banon-radius);
}

/* Pagination */
.banon-pagination {
	margin-top: 30px;
	display: flex;
	justify-content: center;
	gap: 10px;
}
.banon-pagination .page-numbers {
	border: 1px solid var(--banon-color-border);
	border-radius: 6px;
	padding: 8px 14px;
}
.banon-pagination .page-numbers.current {
	background-color: var(--banon-color-primary);
	color: #ffffff;
	border-color: var(--banon-color-primary);
}

/* Contact form ([banon_contact_form]) */
.banon-contact-form {
	max-width: 560px;
}
.banon-contact-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}
.banon-contact-form input[type="text"],
.banon-contact-form input[type="tel"],
.banon-contact-form input[type="email"],
.banon-contact-form textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--banon-color-border);
	border-radius: var(--banon-radius);
	font-family: inherit;
	font-size: 15px;
}
.banon-contact-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.banon-contact-result {
	border-radius: var(--banon-radius);
	padding: 12px 16px;
	margin-top: 10px;
}
.banon-contact-result.is-success {
	background-color: rgba(35, 123, 52, 0.1);
	color: var(--banon-color-primary);
}
.banon-contact-result.is-error {
	background-color: rgba(220, 53, 69, 0.1);
	color: #dc3545;
}

/* Gallery ([banon_gallery]) */
.banon-gallery-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.banon-gallery-item {
	display: block;
	border-radius: var(--banon-radius);
	overflow: hidden;
}
.banon-gallery-item img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
	transition: 0.3s;
}
.banon-gallery-item:hover img {
	transform: scale(1.04);
}

/* Insurance / contracted organizations grid */
.banon-insurance-group {
	margin-bottom: 40px;
}
.banon-insurance-card .banon-card-body h4 {
	margin: 0 0 8px;
	font-size: 15px;
}
.banon-insurance-notes {
	font-size: 13px;
	color: var(--banon-color-body);
}

/* Tablet */
@media (max-width: 991px) {
	.banon-doctor-profile {
		grid-template-columns: 260px 1fr;
		gap: 30px;
	}
}

@media (max-width: 991px) {
	.banon-footer-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   v1.0.4 — header hamburger breakpoint, raised from 767px to 1024px so
   tablet widths (768-1024) get the mobile nav panel instead of a cramped
   one-line squeeze. Covers 1024/900/768/767/390/360 all at once since
   they're all <= 1024px.
   ========================================================================== */
@media (max-width: 1024px) {
	.banon-nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.main-navigation {
		display: none;
		width: 100%;
		order: 3;
		flex-basis: 100%;
	}
	.main-navigation.is-open {
		display: block;
		animation: banonNavPanelReveal var(--banon-duration-base) var(--banon-ease-standard);
	}
	.main-navigation ul#primary-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		max-height: 70vh;
		overflow-y: auto;
	}
	.main-navigation ul#primary-menu > li {
		width: 100%;
	}
	.main-navigation li {
		border-bottom: 1px solid var(--banon-color-border);
	}
	.main-navigation a {
		width: 100%;
		padding: 14px 12px;   /* >=44px touch target */
		font-size: 16px;
		border-radius: 0;
	}
	/* On touch/mobile the dropdown is a static, always-expanded sub-list
	   (no hover state exists to reveal it) — real content, always reachable. */
	.main-navigation .banon-sub-menu,
	.main-navigation .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border-radius: 0;
		background: var(--banon-mint-50);
		padding: 4px 0 4px 20px;
	}
	.banon-header-inner {
		flex-wrap: wrap;
	}
	.banon-header-cta {
		order: 2;
	}
}

@keyframes banonNavPanelReveal {
	from {
		opacity: 0;
		transform: translateY(calc(-1 * var(--banon-distance-sm)));
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Mobile */
@media (max-width: 767px) {
	body {
		font-size: 15px;
	}
	.banon-doctor-profile {
		grid-template-columns: 1fr;
	}
	.banon-doctor-photo {
		max-width: 260px;
		margin: 0 auto;
	}
	.banon-page-banner {
		padding: 25px 0;
	}
	.banon-page-banner h1 {
		font-size: 24px;
	}
	.banon-doctor-schedule {
		overflow-x: auto;
	}
	.banon-article-content table {
		display: block;
		overflow-x: auto;
	}
	.banon-topbar-inner {
		justify-content: center;
		text-align: center;
	}
	.banon-footer-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   v1.0.2 additions — Phase 2/3 UI-UX pass (design tokens already existed
   above and are reused as-is; this block only adds what was missing):
   1) Breadcrumb trail presentation (the semantic <nav><ol><li> markup is
      rendered by the banon-seo plugin and was already correct/accessible —
      this only adds the visual trail styling that markup never had, so it
      stopped rendering as a bare numbered list).
   2) A default style for links inside real text content (Elementor text
      widgets / post content) — scoped narrowly so it can never touch
      Elementor's own chrome, wp-admin, buttons, the header/topbar or the
      footer (those already have their own dedicated rules above).
   None of this changes button colours, header colours or footer colours.
   ========================================================================== */

/* 1) Breadcrumbs: semantic <ol> kept, default list numbering/markers
   replaced with a horizontal trail + "/" separators. RTL-safe because it
   only relies on normal inline flow (direction: rtl is already set on
   <html>), not on any left/right-specific property. */
.banon-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	gap: 6px;
}
.banon-breadcrumbs li {
	display: flex;
	align-items: center;
	gap: 6px;
}
.banon-breadcrumbs li:not(:first-child)::before {
	content: "/";
	color: var(--banon-color-border);
}
.banon-breadcrumbs a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.banon-breadcrumbs a:hover,
.banon-breadcrumbs a:focus-visible {
	color: var(--banon-color-primary);
}
/* The current page is a <span> with aria-current="page", not a link —
   give it its own non-link styling so it visually reads as "you are here". */
.banon-breadcrumbs li[aria-current="page"] span {
	color: var(--banon-color-heading);
	font-weight: 600;
	text-decoration: none;
}

/* 2) Links inside real article/page text content. Deliberately scoped to
   content-area classes only (never a bare "a" — that base rule already
   exists near the top of this file and is untouched) so this can never
   cascade into Elementor's own UI, wp-admin, or this theme's already-styled
   buttons/header/topbar/footer links. --banon-color-primary on white/tint
   backgrounds is 5.31:1 (passes WCAG AA 4.5:1 for normal text); the hover/
   focus colour --banon-color-primary-alt is 4.71:1 — both pass. Elementor
   widgets that already set an explicit local text-colour on a link keep
   that colour (their own inline/ID-scoped rule has higher specificity than
   this class selector), so no editor-authored choice is overridden. */
.entry-content a,
.elementor-widget-text-editor a,
.elementor-widget-theme-post-content a {
	color: var(--banon-color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.entry-content a:hover,
.elementor-widget-text-editor a:hover,
.elementor-widget-theme-post-content a:hover {
	color: var(--banon-color-primary-alt);
}

/* ==========================================================================
   v1.0.4 — premium homepage component system.
   Utility classes applied per-element via Elementor's own "CSS Classes"
   advanced field during the redesign (no shortcodes, no custom widgets —
   these are pure presentational hooks on top of Elementor's native
   containers). Grouped by purpose; every animation here is transform/
   opacity only and is neutralised by the prefers-reduced-motion block
   below it.
   ========================================================================== */

/* ---- Section atmospheres (alternate backgrounds instead of one flat
   pale-green/white page) -------------------------------------------------- */
.banon-atmo-warm { background-color: var(--banon-warm-white); }
.banon-atmo-mint { background-color: var(--banon-mint-100); }
.banon-atmo-white { background-color: #ffffff; }
.banon-atmo-emerald {
	background: linear-gradient(160deg, var(--banon-emerald-900) 0%, var(--banon-emerald-950) 100%);
	color: rgba(255, 255, 255, 0.92);
}
.banon-atmo-emerald h1,
.banon-atmo-emerald h2,
.banon-atmo-emerald h3,
.banon-atmo-emerald h4,
.banon-atmo-emerald .elementor-heading-title {
	color: #ffffff;
}
.banon-atmo-emerald p,
.banon-atmo-emerald .elementor-widget-text-editor {
	color: rgba(255, 255, 255, 0.82);
}

/* Charcoal-green premium heading tone (opt-in, doesn't change the global
   heading color used site-wide, only where explicitly applied). */
.banon-heading-premium {
	color: var(--banon-charcoal-green) !important;
	letter-spacing: -0.01em;
}

/* ---- Full-width hero -------------------------------------------------------
   v1.0.7 (mandatory correction): the Hero is now a genuine full-bleed
   section. Architecture is two layers on ONE Elementor container, not two
   nested containers:
     1. OUTER layer = this section's own box (.banon-hero-full / element
        fc6a588). content_width:full, padding cleared in the Elementor panel
        so it can't reintroduce a competing declaration (see the .banon-card
        specificity note earlier in this file) — every padding value below
        lives here, in CSS, as the single source of truth. Its BACKGROUND
        (the ::before gradient/lighting layer below) paints across the full
        padding+border box edge-to-edge regardless of that padding, because
        padding sits *inside* the box in the normal CSS box model — it never
        clips backgrounds. That's what keeps the visual full-bleed while the
        text still gets inset.
     2. INNER layer = .banon-hero-content (element 527f824, the only
        remaining child — the old boxed image-placeholder child, 7df598b,
        was deleted outright rather than restyled: no amount of CSS makes a
        bordered, intrinsically-sized box read as a full-bleed media layer).
        It carries its own max-width and is the ONLY thing this file insets
        from the edge — the H1/paragraph/buttons live inside it. Because it
        is a lone flex child in an RTL row (html[dir=rtl] + flex-direction
        row = main-axis starts on the right), it naturally hugs the right
        edge with no extra alignment rules needed, leaving the left ~55%
        of the section showing nothing but the full-bleed background — that
        empty zone IS the "future image" placeholder area (focal point
        left, text-safe zone right), per spec.
   To drop in the real photo later: set this element's Background (Style
   tab) to an image, Position "center left" (or similar), Size "cover" —
   the ::before gradient can stay underneath as a permanent legibility
   scrim for the text zone, or be removed once the photo supplies its own
   contrast. A mobile-specific crop can be swapped in with a
   `background-image` override inside the existing 767px media query below. */
.banon-hero-full {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	/* 720px floor covers short/zoomed laptop windows where 80vh alone would
	   compute under the spec's ~720px minimum; 80vh still governs on taller
	   windows, landing in the requested 78-85vh band on common laptop
	   heights (800-950px logical). */
	min-height: max(720px, 80vh);
	padding-top: 56px;
	padding-bottom: 56px;
	/* Responsive edge padding: stays at a comfortable 64px minimum on normal
	   screens, grows past that only once the viewport is wide enough that a
	   flat 64px would let the hero sprawl past a ~1440px working width —
	   this is what keeps the section's OWN box a true 100vw/no-max-width
	   full-bleed box (verified via getBoundingClientRect) while still
	   giving the single text child a sane home at very wide viewports. */
	padding-right: max(64px, calc((100% - 1440px) / 2));
	padding-left: max(64px, calc((100% - 1440px) / 2));
}
.banon-hero-full::before {
	/* Premium full-bleed visual placeholder: soft emerald lighting + a
	   restrained orange accent glow, plus a left-to-right legibility scrim
	   (near-transparent over the left "future photo" zone, warming to a
	   soft mint/white wash under the right "text" zone) so copy stays
	   readable both now and once a real photo replaces this gradient. */
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(238, 246, 240, 0) 0%, rgba(238, 246, 240, 0) 42%, rgba(251, 250, 246, 0.55) 62%, rgba(251, 250, 246, 0.92) 100%),
		radial-gradient(48% 60% at 18% 30%, rgba(35, 123, 52, 0.20) 0%, rgba(35, 123, 52, 0) 65%),
		radial-gradient(38% 46% at 10% 82%, rgba(220, 107, 51, 0.16) 0%, rgba(220, 107, 51, 0) 60%),
		radial-gradient(55% 50% at 88% 8%, rgba(35, 123, 52, 0.12) 0%, rgba(35, 123, 52, 0) 60%);
	pointer-events: none;
	z-index: 0;
}
/* Admin-only reference label for the still-blank future hero photo — never
   shown to a signed-out visitor (WordPress core only ever adds body.logged-in
   for an authenticated session), no dashed box, no public filename. */
.banon-hero-full::after {
	content: "🖼 hero image slot — home-hero-family-hospital.webp — 2560×1200 desktop / 1350×1080 mobile";
	display: none;
	position: absolute;
	bottom: 14px;
	left: 14px;
	z-index: 2;
	max-width: 48%;
	font-size: 11px;
	line-height: 1.5;
	background: rgba(4, 24, 13, 0.62);
	color: #ffffff;
	padding: 5px 10px;
	border-radius: 6px;
	pointer-events: none;
}
body.logged-in .banon-hero-full::after {
	display: block;
}
.banon-hero-full > * {
	position: relative;
	z-index: 1;
}
@media (max-width: 1024px) {
	/* Tablet: still full-bleed (same section, same ::before background —
	   nothing here reintroduces a boxed/card look), just a shorter target
	   height than desktop. */
	.banon-hero-full { min-height: max(600px, 68vh); padding-right: 40px; padding-left: 40px; }
}
@media (max-width: 767px) {
	/* Mobile: dedicated height band (spec: ~680-780px) rather than
	   content-driven "auto" — keeps the full-bleed background visually
	   substantial instead of collapsing to a thin strip behind short copy,
	   while still growing if real content ever needs more room. */
	.banon-hero-full {
		min-height: 720px;
		padding-top: 48px;
		padding-bottom: 48px;
		padding-right: 20px;
		padding-left: 20px;
	}
}

.banon-hero-content {
	max-width: 640px;
	width: 100%;
}
@media (max-width: 767px) {
	.banon-hero-content { max-width: 100%; }
}

.banon-hero-glass-panel {
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 20px;
}

/* ---- Premium 3D quick-action / feature cards ------------------------------ */
.banon-card-3d {
	position: relative;
	background: linear-gradient(180deg, #ffffff 0%, var(--banon-mint-50) 100%);
	border-radius: 18px;
	padding: 30px 24px;
	box-shadow: 0 2px 4px rgba(4, 24, 13, 0.04), 0 16px 32px -16px rgba(4, 24, 13, 0.18);
	border: 1px solid rgba(4, 24, 13, 0.05);
	transition: transform var(--banon-duration-base) var(--banon-ease-standard),
		box-shadow var(--banon-duration-base) var(--banon-ease-standard);
	will-change: transform;
	height: 100%;
}
.banon-card-3d::before {
	/* decorative directional glow, green/orange, very subtle */
	content: "";
	position: absolute;
	top: -30%;
	inset-inline-end: -20%;
	width: 60%;
	height: 60%;
	background: radial-gradient(circle, rgba(35, 123, 52, 0.14) 0%, rgba(35, 123, 52, 0) 70%);
	border-radius: 50%;
	pointer-events: none;
}
.banon-card-3d:hover,
.banon-card-3d:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 8px 12px rgba(4, 24, 13, 0.06), 0 28px 48px -20px rgba(4, 24, 13, 0.28);
}
.banon-card-3d-icon {
	width: 72px;
	height: 72px;
	border-radius: 16px;
	background: var(--banon-mint-100);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}
.banon-card-3d-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--banon-emerald-700);
	font-weight: 700;
	transition: gap var(--banon-duration-fast) var(--banon-ease-standard);
}
.banon-card-3d:hover .banon-card-3d-arrow {
	gap: 12px;
}

@media (hover: hover) and (pointer: fine) {
	.banon-card-3d-tilt {
		transform-style: preserve-3d;
		perspective: 800px;
	}
}

/* ---- Department / service cards (layered, distinctive) ------------------- */
.banon-card-layered {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 14px 28px -18px rgba(4, 24, 13, 0.22);
	transition: transform var(--banon-duration-base) var(--banon-ease-standard),
		box-shadow var(--banon-duration-base) var(--banon-ease-standard);
	height: 100%;
}
.banon-card-layered:hover,
.banon-card-layered:focus-within {
	transform: translateY(-5px);
	box-shadow: 0 24px 40px -18px rgba(4, 24, 13, 0.30);
}
.banon-card-layered-media {
	position: relative;
	background: linear-gradient(135deg, var(--banon-mint-100), var(--banon-warm-white));
}
.banon-card-layered-accent {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(180deg, var(--banon-color-primary), var(--banon-teal-600));
}

/* ---- Editorial split sections (About / Patient care) ---------------------- */
.banon-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
@media (max-width: 900px) {
	.banon-split { grid-template-columns: 1fr; gap: 28px; }
}
.banon-split-shape {
	position: absolute;
	border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
	background: var(--banon-mint-100);
	z-index: 0;
}

/* ---- Insurance / partners logo rail ---------------------------------------- */
.banon-logo-rail {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: center;
}
.banon-logo-rail-item {
	background: #ffffff;
	border: 1px solid var(--banon-color-border);
	border-radius: 12px;
	padding: 14px 20px;
	font-weight: 600;
	color: var(--banon-emerald-700);
}

/* ---- Testimonial quote cards ----------------------------------------------- */
.banon-quote-card {
	position: relative;
	background: #ffffff;
	border-radius: 18px;
	padding: 34px 28px 28px;
	box-shadow: 0 14px 30px -18px rgba(4, 24, 13, 0.22);
	height: 100%;
}
.banon-quote-mark {
	font-family: Georgia, serif;
	font-size: 56px;
	line-height: 1;
	color: var(--banon-mint-100);
	position: absolute;
	top: 12px;
	inset-inline-end: 20px;
}

/* ---- Buttons: premium hover/tap feedback (adds to, does not replace, the
   existing .banon-btn/.elementor-button rules above) ------------------------
   v1.0.5: ".elementor a{box-shadow:none}" (Elementor frontend.min.css, class+
   tag = higher specificity than a bare ".elementor-button" class) was found
   to silently zero this hover shadow on every real Elementor Button widget
   (they render as <a class="elementor-button">) while testing the
   .banon-card fix below — same root cause, same ".elementor <selector>"
   specificity bump applied here too. */
.banon-btn,
.elementor-button {
	transition: transform var(--banon-duration-fast) var(--banon-ease-standard),
		background-color var(--banon-duration-fast) var(--banon-ease-standard),
		box-shadow var(--banon-duration-fast) var(--banon-ease-standard);
}
.banon-btn:hover,
.elementor-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -8px rgba(4, 24, 13, 0.30);
}
.elementor .banon-btn:hover,
.elementor .elementor-button:hover {
	box-shadow: 0 10px 20px -8px rgba(4, 24, 13, 0.30);
}
.banon-btn:active,
.elementor-button:active {
	transform: translateY(0);
}

/* ---- Motion utility classes (paired with Elementor's native "Entrance
   Animation" is fine too, but these give finer per-element stagger control
   where needed) ---------------------------------------------------------- */
@keyframes banonFadeUp {
	from { opacity: 0; transform: translateY(var(--banon-distance-md)); }
	to { opacity: 1; transform: translateY(0); }
}
.banon-fade-up {
	animation: banonFadeUp var(--banon-duration-base) var(--banon-ease-standard) both;
}
.banon-delay-1 { animation-delay: 60ms; }
.banon-delay-2 { animation-delay: 120ms; }
.banon-delay-3 { animation-delay: 180ms; }
.banon-delay-4 { animation-delay: 240ms; }

/* ==========================================================================
   v1.0.3 — reduced motion support (Session 19 premium homepage redesign).
   Elementor's own entrance/hover animations (used sparingly on the new
   homepage: soft card elevation, gentle hero entrance) do not respect
   prefers-reduced-motion on their own in the Free version. This is the
   standard, widely-used safe pattern: it neutralises animation/transition
   duration and disables smooth-scroll for anyone whose OS/browser is set
   to reduce motion, without hiding or removing any content — everything
   stays visible and fully usable, it just stops moving. Scoped to the
   whole document (not just Elementor) so it also covers the theme's own
   hover/focus transitions above. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}