/* ============================================================
 * Flo Geier — a11y.css
 * Owns focus rings, error/valid states, custom form chrome,
 * aria-current styling, mobile rescue overrides.
 * Layered with :where() to keep specificity low.
 * ============================================================ */

/* --------------------------------------------------------
 * 1. Visually hidden helper (used for headings AT only)
 * -------------------------------------------------------- */
:where(.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;
	white-space: nowrap !important;
	border: 0 !important;
}

/* --------------------------------------------------------
 * 2. Focus rings — keyboard only, branded rust, never browser default
 * -------------------------------------------------------- */
:where(a, button, input, textarea, select, [tabindex], summary):focus {
	outline: 0;
}
:where(a, button, input, textarea, select, [tabindex], summary):focus-visible {
	outline: 2px solid var(--rust);
	outline-offset: 3px;
	border-radius: 2px;
	transition: outline-offset 0.15s var(--ease-out-q);
}
/* Inputs deserve a tighter, inset-feeling ring */
:where(.kontakt__field input, .kontakt__field textarea, .kontakt__field select):focus-visible {
	outline-offset: 2px;
	border-color: var(--rust);
}
/* Mouse focus on buttons/links: no ring */
:where(a, button):focus:not(:focus-visible) {
	outline: 0;
}

/* --------------------------------------------------------
 * 3. Skip link — branded, slides in from above.
 * Uses .skip-link.skip-link to bump specificity above
 * typography.css's outline-color override.
 * -------------------------------------------------------- */
.skip-link {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.02em;
	background: var(--moss-900);
	color: var(--clay-50);
	padding: 12px 20px;
	border-radius: 2px;
	box-shadow: 0 4px 18px oklch(from var(--moss-900) l c h / 0.25);
}
.skip-link.skip-link:focus,
.skip-link.skip-link:focus-visible {
	top: 16px;
	outline: 2px solid var(--rust);
	outline-color: var(--rust);
	outline-offset: 3px;
}

/* main is a focus target after skip — hide its outline */
:where(#main):focus { outline: 0; }

/* --------------------------------------------------------
 * 4. aria-current — active nav indicator
 * -------------------------------------------------------- */
:where(.site-header__nav a)[aria-current='page'] {
	color: var(--rust);
}
:where(.site-header__nav a)[aria-current='page']::after {
	right: 0 !important;
	background: var(--rust);
}
:where(.site-header__mobile a)[aria-current='page'] {
	color: var(--rust);
}
:where(.site-header__mobile a)[aria-current='page']::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	background: var(--rust);
	margin-right: 12px;
	vertical-align: middle;
	transform: translateY(-2px);
}

/* --------------------------------------------------------
 * 5. KONTAKT — form a11y + branded chrome
 * -------------------------------------------------------- */
.kontakt__form-wrap { min-width: 0; }

/* Honeypot: invisible to humans, NOT display:none (some bots detect that). */
:where(.kontakt__hp) {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

/* Required asterisk treatment */
.kontakt__field label span[aria-hidden='true'] {
	color: var(--rust);
	margin-left: 2px;
}

/* Help / error microcopy */
.kontakt__help {
	font-size: 0.78rem;
	color: var(--ink-soft);
	margin: 4px 0 0;
	max-width: 50ch;
}
.kontakt__error {
	font-size: 0.84rem;
	color: var(--rust-dark);
	margin: 0;
	min-height: 0;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(-4px);
	transition: max-height 0.2s var(--ease-out-q), opacity 0.2s var(--ease-out-q), transform 0.2s var(--ease-out-q), margin-top 0.2s var(--ease-out-q);
}
.kontakt__field.is-invalid .kontakt__error {
	max-height: 4em;
	opacity: 1;
	transform: translateY(0);
	margin-top: 6px;
}

/* Invalid + valid input states */
.kontakt__field.is-invalid input,
.kontakt__field.is-invalid textarea,
.kontakt__field.is-invalid select {
	border-color: var(--rust);
	box-shadow: 0 1px 0 0 var(--rust);
}
.kontakt__field.is-valid input,
.kontakt__field.is-valid textarea,
.kontakt__field.is-valid select {
	border-color: var(--moss-200);
	box-shadow: inset 0 -2px 0 0 var(--moss-700);
}

/* --------------------------------------------------------
 * 6. Custom <select> chrome (drop ugly browser arrow)
 * -------------------------------------------------------- */
.kontakt__select-wrap {
	position: relative;
	display: block;
}
.kontakt__select-wrap select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: none;
	padding-right: 44px !important;
	width: 100%;
	cursor: pointer;
}
.kontakt__select-wrap select::-ms-expand { display: none; }
.kontakt__select-chevron {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--moss-700);
	pointer-events: none;
	transition: transform 0.2s var(--ease-out-q), color 0.2s var(--ease-out-q);
}
.kontakt__select-wrap select:focus + .kontakt__select-chevron,
.kontakt__select-wrap select:focus-visible + .kontakt__select-chevron {
	color: var(--rust);
	transform: translateY(-50%) rotate(180deg);
}

/* --------------------------------------------------------
 * 7. Custom checkbox (keep native input for AT, hide visually,
 *    paint a branded box from the sibling span)
 * -------------------------------------------------------- */
.kontakt__check {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	align-items: start;
	cursor: pointer;
	font-weight: 400;
	color: var(--ink-soft) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	font-size: 0.92rem !important;
	line-height: 1.55;
	position: relative;
}
.kontakt__check input[type='checkbox'] {
	position: absolute;
	opacity: 0;
	width: 22px;
	height: 22px;
	margin: 0;
	cursor: pointer;
	left: 0;
	top: 0;
}
.kontakt__check-box {
	width: 22px;
	height: 22px;
	border: 1.5px solid var(--moss-700);
	border-radius: 2px;
	background: var(--clay-50);
	display: inline-grid;
	place-items: center;
	transition: background 0.18s var(--ease-out-q), border-color 0.18s var(--ease-out-q);
	flex: none;
	margin-top: 1px;
	position: relative;
}
.kontakt__check-box::after {
	content: '';
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--clay-50);
	border-bottom: 2px solid var(--clay-50);
	transform: rotate(-45deg) scale(0);
	transform-origin: center;
	transition: transform 0.18s var(--ease-out-q);
	margin-top: -2px;
}
.kontakt__check input:checked + .kontakt__check-box {
	background: var(--moss-900);
	border-color: var(--moss-900);
}
.kontakt__check input:checked + .kontakt__check-box::after {
	transform: rotate(-45deg) scale(1);
}
.kontakt__check input:focus-visible + .kontakt__check-box {
	outline: 2px solid var(--rust);
	outline-offset: 3px;
}
.kontakt__field--check.is-invalid .kontakt__check-box {
	border-color: var(--rust);
	box-shadow: 0 0 0 3px oklch(from var(--rust) l c h / 0.15);
}
.kontakt__check-text a {
	color: var(--moss-900);
	border-bottom: 1px solid var(--rust);
	transition: color 0.2s var(--ease-out-q);
}
.kontakt__check-text a:hover { color: var(--rust); }

/* --------------------------------------------------------
 * 8. Form status + success card
 * -------------------------------------------------------- */
.kontakt__status:empty { display: none; }
.kontakt__status {
	font-size: 0.92rem;
	color: var(--rust-dark);
	margin: 8px 0 0;
}

.kontakt__success {
	padding: 36px 32px;
	background: var(--clay-100);
	border-left: 3px solid var(--moss-700);
	border-radius: 2px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	animation: flogeier-success-in 0.4s var(--ease-out-q) both;
}
.kontakt__success h2 {
	font-size: clamp(1.6rem, 2.8vw, 2.2rem);
	margin: 0;
}
.kontakt__success p { color: var(--ink-soft); max-width: 56ch; }
.kontakt__success h2:focus { outline: 0; }

@keyframes flogeier-success-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Submit loading inline state */
[data-submit][disabled] {
	opacity: 0.7;
	cursor: progress;
	transform: none !important;
}

/* --------------------------------------------------------
 * 9. Tap targets — minimum 44x44 on small screens
 * -------------------------------------------------------- */
@media (max-width: 880px) {
	:where(.site-header__nav a, .site-footer a, .link-arrow) {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
	:where(.kontakt__field input, .kontakt__field textarea, .kontakt__field select) {
		min-height: 48px;
		font-size: 16px; /* prevents iOS zoom-on-focus */
	}
	:where(.btn) { min-height: 48px; }
	:where(.site-header__menu-toggle) {
		min-width: 44px;
		min-height: 44px;
	}
}

/* --------------------------------------------------------
 * 10. Mobile rescue — narrow-viewport overrides
 * -------------------------------------------------------- */
@media (max-width: 480px) {
	:where(.page-hero) {
		grid-template-columns: 1fr;
		padding-top: clamp(48px, 8vh, 80px);
		padding-bottom: clamp(28px, 4vh, 48px);
	}
	:where(.page-hero__num) { grid-column: 1; }
	:where(.section-head) {
		grid-template-columns: 1fr;
	}
	:where(.section-head__num) { grid-column: 1; }
	:where(.editorial-row__text h3, .leistung-block__text h2, .projekt-detail__title) {
		max-width: 100%;
	}
	:where(.kontakt__sidebar) { padding: 24px; }
	:where(.kontakt__form button[type='submit']) { width: 100%; }

	/* Hero CTA stack */
	:where(.hero__actions) { flex-direction: column; align-items: stretch; }
	:where(.hero__actions .btn) { width: 100%; }

	/* Footer base — stack copy + badge cleanly */
	:where(.site-footer__base) { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* Fix horizontal scroll on tiny viewports — kill any overflow leakage */
:where(html, body) { overflow-x: clip; }

/* --------------------------------------------------------
 * 11. Reduced motion — keep functional micro-feedback,
 *     drop everything else
 * -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	:where(.kontakt__error,
	       .kontakt__select-chevron,
	       .kontakt__check-box,
	       .kontakt__check-box::after,
	       .kontakt__success) {
		transition: none !important;
		animation: none !important;
	}
	:where(.skip-link) { transition: none !important; }
}

/* --------------------------------------------------------
 * 12. <time>/<address> microformatting
 * -------------------------------------------------------- */
:where(time) { font-feature-settings: 'tnum'; }
:where(address) { font-style: normal; }