/* =========================================================
   mofli Site-wide Accessibility
   STEP1.12-D-8-D-5-2
   ========================================================= */

/*
 * Keyboard-only skip link.
 * Normally hidden outside the viewport and shown when focused.
 */
.mofli-skip-link {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 1000000;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 16px;
	color: #fff;
	background: #4a403a;
	border: 3px solid #fff;
	border-radius: 8px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.24);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	transform: translateY(calc(-100% - 24px));
	transition: transform 0.12s ease;
}

.mofli-skip-link:focus,
.mofli-skip-link:focus-visible {
	color: #fff;
	transform: translateY(0);
	outline: 3px solid #9b3f37;
	outline-offset: 3px;
	text-decoration: none;
}


/*
 * Common main-content target.
 * Keeps anchor navigation clear of sticky/fixed headers.
 */
#mofli-main-content {
	scroll-margin-top: 96px;
}


/*
 * Do not suppress browser focus indicators site-wide.
 * This rule gives interactive controls a reliable fallback
 * on mofli-managed pages while allowing page-specific focus
 * designs to remain in force.
 */
:where(
	a,
	button,
	input,
	select,
	textarea,
	summary,
	[role="button"],
	[tabindex]
):focus-visible {
	outline-offset: 3px;
}


/*
 * Pointer target baseline for primary interactive controls.
 * Inputs such as checkboxes/radios are intentionally excluded
 * because their associated <label> can provide the larger target.
 */
:where(
	button,
	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	select
) {
	min-height: 44px;
}


/*
 * Respect reduced-motion preferences for the common accessibility UI.
 */
@media (prefers-reduced-motion: reduce) {

	.mofli-skip-link {
		transition: none;
		scroll-behavior: auto;
	}
}


@media (max-width: 600px) {

	.mofli-skip-link {
		top: 8px;
		left: 8px;
		max-width: calc(100vw - 16px);
	}

	#mofli-main-content {
		scroll-margin-top: 80px;
	}
}