/*
Theme Name: AAH — Assisi Atonement Hospital
Theme URI: https://dom19.domanddom.com/
Description: Child theme of Hello Elementor for Assisi Atonement Hospital. Carries the original site's Tailwind design system, fonts and vendor libraries so Elementor-built pages render pixel-identically to the source site.
Author: DOM Technolabs
Version: 1.0.0
Template: hello-elementor
Text Domain: aah-child
Tags: elementor, hospital, healthcare
*/

/* Design-system CSS lives in assets/css/aah-tailwind-config.css and
   assets/css/aah-custom.css — see functions.php. Add overrides below. */


/* ---------------------------------------------------------------------------
   Conflicts between Hello Elementor's base CSS and the Tailwind utilities the
   design relies on. Each override is scoped as narrowly as the clash allows.
   --------------------------------------------------------------------------- */

/* Hello Elementor styles WordPress "sticky" posts with a bare `.sticky` rule
   (display:block; position:relative), which overrides Tailwind's `.sticky`
   position utility used by the site header. Give the utility back its meaning
   and keep the sticky-post styling on actual posts. */
.sticky {
	position: sticky;
}

article.sticky,
.post.sticky {
	display: block;
	position: relative;
}

/* Tailwind v4 emits its utilities inside `@layer utilities`. Elementor's
   frontend.min.css sets element defaults on unlayered rules, and unlayered
   declarations outrank every cascade layer no matter the specificity — so
   `.elementor img{height:auto}` was beating `.h-14`, `.h-[460px]` and friends,
   and `.elementor iframe{width:100%;margin:...}` was doing the same to the
   embedded maps.

   `revert-layer` rolls those declarations back to the value from the previous
   layer, i.e. whatever Tailwind resolved — its utility when the element has
   one, and Tailwind's own preflight default when it does not. */
.elementor img {
	height: revert-layer;
	max-width: revert-layer;
	border-radius: revert-layer;
}

.elementor embed,
.elementor iframe,
.elementor object,
.elementor video {
	width: revert-layer;
	max-width: revert-layer;
	margin: revert-layer;
	line-height: revert-layer;
}

/* ---------------------------------------------------------------------------
   Minimal scroll-reveal — applied automatically to every page section by
   aah-site.js (no changes needed to individual page content). The hero
   section is deliberately skipped so the page never opens looking empty.
   --------------------------------------------------------------------------- */
.aah-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.aah-reveal.aah-in-view {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.aah-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Mobile menu — off-canvas sidebar. Tailwind utility classes handle layout;
   this covers the one thing utilities can't: locking body scroll while open.
   --------------------------------------------------------------------------- */
body.aah-menu-open {
	overflow: hidden;
}