/**
 * Reusable route-backed overlay (Phase 3).
 *
 * Presentation for the single shared overlay shell inc/route-overlay.php
 * renders once in footer.php (docs/technical-spec.md §11.1/§18.1's
 * Cart/Contact overlay concept, reused for Class/Event per the approved
 * pending decision). Deliberately generic — no Class/Event-specific
 * selector here, since a later Cart/Contact implementation reuses this
 * same shell rather than introducing a parallel one.
 *
 * z-index sits above the header bar (header.css's own 1100) so an open
 * overlay covers the full page, matching the mobile off-canvas panel's own
 * `position: fixed; inset: 0;` pattern (header.css's `.ld-mobile-nav`).
 */

.ld-route-overlay {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow-y: auto;
	padding: 40px 20px;
}

/* Explicit override: this rule's own unconditional `display: flex` above
 * would otherwise win the cascade over the user-agent `[hidden] { display:
 * none; }` default (an author rule always beats a UA rule of equal
 * specificity) — the same cascade defect this project has already found
 * and fixed for `.ld-occurrence-row[hidden]` and
 * `.ld-occurrence-selector__filters[hidden]` (category-page.css). */
.ld-route-overlay[ hidden ] {
	display: none;
}

.ld-route-overlay__backdrop {
	position: fixed;
	inset: 0;
	background: rgba( 26, 26, 26, 0.6 ); /* --ld-color-black at reduced opacity. */
}

.ld-route-overlay__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	background: var( --ld-color-white );
	color: var( --ld-color-black );
	font-family: var( --ld-font-inter );
}

.ld-route-overlay__panel:focus-visible {
	outline: none;
}

.ld-route-overlay__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 2px solid var( --ld-color-black );
	border-radius: 50%;
	background: var( --ld-color-white );
	color: var( --ld-color-black );
	cursor: pointer;
}

.ld-route-overlay__close svg {
	width: 16px;
	height: 16px;
}

.ld-route-overlay__close:focus-visible {
	outline: 2px solid var( --ld-color-black );
	outline-offset: 2px;
}

.ld-route-overlay__body {
	padding: 0 0 20px;
}

/* The overlay body renders whichever destination's own [data-ld-overlay-
 * content] markup was fetched (e.g. single-ld_class.php's <article>) —
 * that content's own hero/section-colour styling already carries its full
 * presentation via its own template's CSS (assets/css/class-page.css), so
 * no destination-specific rule belongs here. Prevents the page behind the
 * overlay from scrolling while it is open. */
body.ld-route-overlay-open {
	overflow: hidden;
}