/*
 * Keyboard accessibility (audit 2026-11-07, C1 and I5). Loads last. No visual change for mouse users.
 *
 * Focus ring: a 3px cream (#fcf6ef) band around the element and a 2px ink (#131313) outline outside it, so the ring
 * shows on light and dark backgrounds alike. :focus-visible means mouse clicks do not show it. !important overrides
 * the parent theme's `a:focus { outline: 0 }` and similar rules.
 *
 * Text fields, text areas and dropdowns are left out on purpose (owner 2026-11-08: no box around form fields):
 * they keep their own underline focus style and the text cursor. The custom dropdown button (.wx-dd__btn) looks
 * like a field, so it is left out too.
 */
:where(a[href], button, input:is([type=checkbox], [type=radio], [type=file], [type=submit], [type=button], [type=range]), summary, [tabindex]:not([tabindex="-1"]), [role=button], [role=tab], [role=menuitem], [contenteditable=true]):not(.wx-dd__btn):focus-visible {
	outline: 2px solid #131313 !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px #fcf6ef !important;
}

/* Skip link: hidden until it gets keyboard focus, then a black pill at the top left (DESIGN.md primary button). */
.wx-skip-link {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 100000;
	padding: 12px 20px;
	border-radius: 999px;
	background: #131313;
	color: #fcf6ef !important;
	font-family: "Manrope", sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transform: translateY(-200%);
}

.wx-skip-link:focus,
.wx-skip-link:focus-visible {
	transform: none;
}

/* the main content, the skip link's target, is not hidden under the fixed header */
#wx-main {
	display: block;
	height: 0;
	scroll-margin-top: 100px;
}

#wx-main:focus {
	outline: none !important;
	box-shadow: none !important;
}

/* I2 (2026-11-08): a dropdown opened from the keyboard (menu.js adds .wx-open) shows exactly as on hover
   (theme: opacity 1, visible; child custom.css: 49px below, normal and sticky header) */
.orea-desktop-menu ul.box-nav li.menu-item.default-dropdown.wx-open > .sub-menu,
header.orea-header-section.sticky .orea-desktop-menu ul.box-nav li.menu-item.default-dropdown.wx-open > .sub-menu {
	top: 49px;
	opacity: 1;
	visibility: visible;
}
.orea-desktop-menu ul.box-nav li.menu-item.default-dropdown.wx-open > a {
	opacity: .7;
}

/* I2: menu and close buttons get a 48x48 tap area; an invisible layer, so the icons look the same */
.orea-mobile-menu-bar,
.orea-desktop-menu-bar,
.mobile-menu-bar-close {
	position: relative;
}
.orea-mobile-menu-bar::after,
.orea-desktop-menu-bar::after,
.mobile-menu-bar-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 48px;
	height: 48px;
	transform: translate(-50%, -50%);
}

/* M1 (2026-11-08): text for screen readers only (WordPress's standard class; until now only the
   legacy Elementor pages defined it) */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	word-wrap: normal !important;
}