/**
 * Accessibility layer — Sound District
 *
 * WCAG 2.1 — 2.4.7 Focus Visible (Level AA)
 * WCAG 2.1 — 1.4.4 Resize Text (Level AA)
 * WCAG 2.1 — 1.4.10 Reflow (Level AA)
 * WCAG 2.1 — 1.4.12 Text Spacing (Level AA)
 * WCAG 2.1 — 2.3.3 Animation from Interactions (Level AAA, cheap to honour)
 *
 * Design constraint: this file must not change how the site looks in its
 * default state. Everything here is either invisible until a keyboard user
 * focuses something, or scoped to a user preference (reduced motion, forced
 * colours, zoom). The one intentional visual addition is the focus indicator,
 * which is unavoidable — 2.4.7 requires a visible focus state and the theme
 * currently suppresses it in several places.
 */

/* -------------------------------------------------------------------------
 * Visually hidden utility
 *
 * Used by the injected form labels. Deliberately not `display:none` or
 * `visibility:hidden`, both of which would also hide the text from assistive
 * technology and defeat the point.
 * ---------------------------------------------------------------------- */
.sd-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Allow a visually hidden element to become visible when focused, which is how
   the skip link works. */
.sd-visually-hidden:focus,
.sd-visually-hidden:focus-within {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	white-space: normal !important;
}

/* -------------------------------------------------------------------------
 * 2.4.7 Focus Visible
 *
 * A two-tone ring: a bright yellow outline for contrast against the site's
 * dark surfaces, plus a dark outer ring so the indicator still reads against
 * light sections and images. Applied only to :focus-visible, so pointer users
 * see no change at all and the design is untouched for them.
 * ---------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="link"], .elementor-button):focus-visible {
	outline: 3px solid #ffdd00 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.85) !important;
	border-radius: 2px;
}

/* Elementor and Astra both zero out focus styling on several controls.
   Re-assert it rather than trying to unpick their specificity individually. */
.elementor a:focus-visible,
.elementor button:focus-visible,
.elementor .elementor-button:focus-visible,
.ast-container a:focus-visible {
	outline: 3px solid #ffdd00 !important;
	outline-offset: 2px !important;
}

/* The main landmark is focused programmatically by the skip link. Showing a
   ring around the entire page body would be disorienting and communicates
   nothing, so it is suppressed here only — never on interactive elements. */
main.sd-main-content:focus,
main.sd-main-content:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* -------------------------------------------------------------------------
 * Skip link
 *
 * Astra renders it with .screen-reader-text. Make sure it is genuinely visible
 * and legible once focused, above Elementor's sticky header z-index.
 * ---------------------------------------------------------------------- */
.skip-link.screen-reader-text:focus {
	position: absolute !important;
	top: 8px !important;
	left: 8px !important;
	z-index: 100000 !important;
	display: block !important;
	width: auto !important;
	height: auto !important;
	padding: 14px 22px !important;
	clip: auto !important;
	clip-path: none !important;
	background: #ffffff !important;
	color: #0b0b0f !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-decoration: underline !important;
	border-radius: 4px !important;
	box-shadow: 0 0 0 3px #ffdd00, 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

/* -------------------------------------------------------------------------
 * 2.3.3 / prefers-reduced-motion
 *
 * The page leans on Elementor entrance animations and animated content. For a
 * user who has asked their OS to reduce motion, hold everything still. The
 * `animation-name: none` reset is needed because Elementor's entrance classes
 * set opacity:0 in the keyframes' starting state — merely shortening the
 * duration would leave content invisible.
 * ---------------------------------------------------------------------- */
@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;
	}

	.elementor-invisible,
	.elementor-animated-content,
	[data-settings*="animation"] {
		animation-name: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}
}

/* -------------------------------------------------------------------------
 * 1.4.10 Reflow (Level AA)
 * 1.4.12 Text Spacing (Level AA)
 *
 * At 320 CSS px — what 400% zoom on a 1280px screen produces — the site forced
 * horizontal scrolling on two pages: the homepage by 43px and the privacy
 * policy by 169px. Both were caused by long Romanian compounds that cannot fit
 * a narrow column and were not allowed to break: "confidențialitate" in the
 * policy <h1>, and a label in the programme section. Two-dimensional scrolling
 * is exactly what 1.4.10 prohibits.
 *
 * Allowing those words to wrap costs nothing at normal widths — a word only
 * breaks when it genuinely cannot fit — and it also covers 1.4.12, where forced
 * letter- and word-spacing widens text enough to clip fixed-height containers.
 *
 * Verified with scripts/a11y-reflow.mjs at 320px, 640px and with the text
 * spacing overrides applied.
 * ---------------------------------------------------------------------- */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-icon-box .elementor-icon-box-content,
.elementor-widget-image-box .elementor-image-box-content,
.elementor-widget-icon-list .elementor-icon-list-text,
.e-n-accordion-item-title-text,
.entry-content,
h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------
 * Forced-colours mode (Windows High Contrast)
 *
 * Keeps the focus ring present when the OS replaces the palette.
 * ---------------------------------------------------------------------- */
@media (forced-colors: active) {
	:where(a, button, input, select, textarea, [tabindex]):focus-visible {
		outline: 3px solid Highlight !important;
		outline-offset: 2px !important;
	}
}

/* -------------------------------------------------------------------------
 * Heading levels — visual compensation
 *
 * WCAG 2.1 — 1.3.1 Info and Relationships (Level A)
 *
 * The programme section's day label ("Muzică & Dans") was an <h5> sitting
 * directly under an <h2>, which is a level jump. It is a real subsection, so it
 * became an <h3>.
 *
 * Heading *widgets* can change level for free, because Elementor styles them
 * through .elementor-heading-title and none of its generated selectors is
 * qualified by tag. This one is hand-written HTML inside a text-editor widget,
 * where headings ARE styled by tag — so h3 would render noticeably larger.
 * Pinning it back to the measured h5 values keeps the change structural only.
 * ---------------------------------------------------------------------- */
.elementor-widget-text-editor h3 {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	margin-block: 0 20px;
}