/*
 * NOUW accessibility fixes (inc/nouw-a11y.php), loaded after app.css.
 * Audit ids in brackets: ~/Desktop/nouw-2026-backups/seo-a11y-audit.md
 */

/* Skip link (A8): first focusable element, visible only on focus */
.nouw-skip-link {
	position: absolute;
	top: 0;
	left: -9999px;
	z-index: 100000;
}

.nouw-skip-link:focus {
	left: 0.5rem;
	top: 0.5rem;
	padding: 0.6em 0.9em;
	background-color: #fff;
	color: #000;
	font-size: 16px;
	line-height: 1.2;
	text-decoration: underline;
	outline: 2px solid #000;
	outline-offset: 2px;
}

/* Targets of programmatic focus (skip link, drawer after "add to cart") */
main:focus,
#cart:focus {
	outline: none;
}

/* Shop filter (A13): the native selects are transparent over their label,
   so show the keyboard focus on the label (:has: Chrome/Safari/Firefox 121+) */
.product-filter span:has(> select:focus-visible) .select-label label {
	outline: 2px solid #000;
	outline-offset: 3px;
}

/* Colour/size swatches (A1): radios hidden visually only, so they stay
   reachable with Tab/arrow keys; the label shows the focus */
.single-product .select form input[type=radio] {
	display: block;
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

.single-product .select form input[type=radio]:focus-visible + label {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Sold-out values (A9): struck through (not colour alone); the label also
   carries a visually hidden "sold out". No reduced opacity: some swatch bar
   colours would then fall below 4.5:1. */
.single-product .select form label.out-of-stock,
.single-product .select form input[type=radio]:disabled + label {
	text-decoration: line-through;
	text-decoration-thickness: 0.08em;
}

.single-product .select form input[type=radio]:disabled + label {
	cursor: default;
}

.single-product .select form input[type=radio]:disabled + label:hover::after {
	content: none;
}

/* Stock messages (A16): were 30 % black/white (1.9-2.7:1) */
.woocommerce-variation-availability {
	color: #000;
}

.woocommerce-variation-availability.invert {
	color: #fff;
}

/* Newsletter (A15): visible label above the e-mail field */
#mc_embed_signup .nouw-newsletter-label {
	display: block;
	font-size: 75%;
	margin-bottom: 0.4em;
}

/* 404 (S1) */
.nouw-404 .text {
	background-color: #ebebeb;
}

/* 404 image on the left (Theme Settings → Seite nicht gefunden): the text page
   layout gives .text a min-height of 200 %, twice the image; match the image. */
.nouw-404 .flexible-image + .text {
	min-height: 100%;
}

.nouw-404 h1 {
	padding-bottom: var(--padding);
}

.nouw-404 ul {
	font-size: 75%;
	padding: 0;
	margin: 0;
}

.nouw-404 li {
	padding-bottom: 0.5em;
}

/* Closed menu and cart drawer (A7): js/nouw-a11y.js sets `inert` while
   closed. visibility: hidden does the same in browsers without inert and
   hides the off-screen panel from screen readers; it switches after the
   0.3 s slide-out, and at once when the panel opens. */
body > nav,
#cart {
	transition: transform 0.3s ease, visibility 0s linear 0s;
}

body > nav[inert],
#cart[inert] {
	visibility: hidden;
	transition: transform 0.3s ease, visibility 0s linear 0.3s;
}

/* ------------------------------------------------------------------
 * Reflow on phones (audit A3, WCAG 1.4.10): no sideways scrolling.
 * ------------------------------------------------------------------ */

/* Shop filter: the transparent native selects sat wider than their column
   (padding 1em, 16px font, no width limit) and pushed the whole shop page
   wider than the screen, taking the menu and cart buttons off-screen. */
.archive .product-filter select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.archive .product-filter {
	overflow-x: clip;
}

/* Cart/checkout: Stripe 11 puts an invisible input (#wc-stripe-hidden-style-input,
   position: absolute) into the card form to copy the input styling. With no
   positioned ancestor its width was the whole page, starting mid-page, so the
   cart page scrolled sideways (live, 2026-10-02). */
#wc-stripe-upe-form {
	position: relative;
}
#wc-stripe-hidden-style-input {
	max-width: 100%;
}

/* Cart/checkout selects (country, state): Safari ignores padding on native
   selects, so they were much flatter than the inputs next to them. Flat like
   the inputs, with a thin chevron. */
.woocommerce form .form-row select {
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
	line-height: normal;
	padding-right: 2.6em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M.5.5 6 6 11.5.5' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.3em center;
	background-size: 0.85em auto;
}

/* Cart page coupon form (opens under "Hast du einen Gutschein?"): it had no
   side padding and sat below the toggle's 3em gap. Pulled up under the link,
   indented like it; the 3em gap moves below the form (like the cart drawer,
   nouw-ajax-cart.css). */
main .woocommerce > form.checkout_coupon {
	margin: -2.25em 0 3em;
	padding: 0 0.44rem;
}

/* "Adresszusatz" has no visible label (WooCommerce keeps it for screen readers
   only), so its input sat a label higher than "Straße" next to it. Reserve the
   same space as a label (app.css .checkout .form-row label). */
.checkout #billing_address_2_field::before,
.checkout #shipping_address_2_field::before {
	content: "\00a0";
	display: block;
	font-size: 62%;
	margin-bottom: 0.4em;
}

/* Footer: the legal links are grouped (footer.php .footer-links). Desktop
   looks as before: copyright left, links + icons right. */
footer .footer-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-left: auto;
}
footer > a#insta,
footer .footer-links a:first-child {
	margin-left: 0; /* the theme's auto margin on the first footer link moved to .footer-links */
}

/* Phones (the theme's portrait layout): row 1 copyright + icons, row 2 the
   links, wrapping as needed, with taller tap areas. */
@media screen and (max-aspect-ratio: 800/1000) {
	footer.divider {
		height: auto;
		min-height: var(--divider-height);
		flex-wrap: wrap;
		row-gap: 0.6em;
	}
	footer.divider > span:first-child {
		flex: 1 1 auto;
	}
	footer.divider > a.footer-social {
		order: 2;
		padding: 0.35em 0 0.35em 0.6em;
	}
	footer.divider .footer-links {
		order: 3;
		flex: 1 0 100%;
		margin-left: 0;
		gap: 0 1.2em;
	}
	footer.divider .footer-links a:not(.button) {
		margin-right: 0;
		padding: 0.45em 0 0.2em;
	}
}