/*
 * Apple-style site footer.
 *
 * Hand-authored, no preprocessor. Shared design tokens live in
 * assets/css/tokens.css (loaded as the 'emo2026-tokens' stylesheet
 * dependency). Only footer-specific values, column count, narrow max
 * width, stack breakpoint, micro motion timings, stay local below.
 *
 * Structure mirrors template-parts/footer-apple.php top-to-bottom:
 *   .site-footer
 *     .site-footer__inner
 *       .site-footer__disclaimer
 *       .site-footer__columns
 *         .site-footer__column
 *           .site-footer__heading
 *           .site-footer__link-list > .site-footer__link-item > .site-footer__link
 *       .site-footer__shopline
 *       .site-footer__divider
 *       .site-footer__bottom
 *         .site-footer__copyright
 *         .site-footer__region
 */

:root {
	/* ---- Palette (footer-only mappings to shared palette) ----
	 * Apple footer is famously two greys and almost-black text. */
	--footer-bg:           var(--color-bg-elevated);
	--footer-text:         var(--color-text-secondary);   /* muted grey body */
	--footer-heading:      var(--color-text-primary);     /* near-black for headings */
	--footer-link:         var(--color-text-secondary);   /* same as body, links blend until hovered */
	--footer-link-hover:   var(--color-text-primary);
	--footer-divider:      var(--color-border-hairline);  /* Apple's hairline grey */
	--footer-disclaimer:   var(--color-text-muted);       /* even lighter grey for the legal line */

	/* Type scale, kept tiny on purpose; Apple's footer is 12 to 14px throughout. */
	--footer-fs-disclaimer: var(--font-size-12);
	--footer-fs-heading:    var(--font-size-12);
	--footer-fs-link:       var(--font-size-12);
	--footer-fs-shopline:   var(--font-size-12);
	--footer-fs-bottom:     var(--font-size-12);

	/* Layout tokens. */
	/* Apple uses ~980px, narrower than --layout-content-max-width on purpose. */
	--footer-max-width:     980px;
	--footer-pad-x:         var(--space-5);
	--footer-pad-y:         var(--space-6);
	--footer-col-gap:       var(--space-6);
	--footer-row-gap:       18px;  /* off-scale; sits between --space-4 (16) and --space-5 (22) */

	/* Mobile breakpoint matches the navbar (833px) so the whole site collapses together. */
	--footer-bp-stack:      833px;

	/* Micro-motion, 120ms is intentionally snappier than --motion-duration-fast
	 * (150ms); kept local so the footer's hover transitions stay distinct.
	 * ease-in-out is also footer-only (nav uses --motion-ease-standard cubic). */
	--footer-duration:      120ms;
	--footer-easing:        ease-in-out;
}

/* ---- root container ---------------------------------------------------- */

.site-footer {
	background-color: var(--footer-bg);
	color: var(--footer-text);
	font-family: var(--font-sans);
	font-size: var(--footer-fs-link);
	line-height: var(--line-height-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.site-footer__inner {
	max-width: var(--footer-max-width);
	margin: 0 auto;
	padding: var(--footer-pad-y) var(--footer-pad-x);
}

/* ---- 1. disclaimer ----------------------------------------------------- */

.site-footer__disclaimer {
	margin: 0 0 var(--space-5);
	padding: 0 0 18px;  /* 18px off-scale, matches --footer-row-gap rhythm */
	border-bottom: 1px solid var(--footer-divider);
	color: var(--footer-disclaimer);
	font-size: var(--footer-fs-disclaimer);
	line-height: var(--line-height-base);
}

/* ---- 2. column grid ---------------------------------------------------- */

.site-footer__columns {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--footer-row-gap) var(--footer-col-gap);
	margin: 0 0 var(--space-5);
}

.site-footer__column {
	min-width: 0; /* allow flex/grid children to wrap correctly */
}

.site-footer__heading {
	margin: 0 0 10px;  /* 10px off-scale, heading-to-list rhythm */
	color: var(--footer-heading);
	font-size: var(--footer-fs-heading);
	font-weight: 600;
	line-height: 1.4;  /* tighter than --line-height-base (1.5) on purpose */
	letter-spacing: var(--letter-spacing-base);
}

.site-footer__link-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__link-item {
	margin: 0 0 6px;  /* 6px off-scale, between-link spacing */
}

.site-footer__link-item:last-child {
	margin-bottom: 0;
}

.site-footer__link {
	display: inline-block;
	color: var(--footer-link);
	text-decoration: none;
	font-size: var(--footer-fs-link);
	line-height: var(--line-height-base);
	transition: color var(--footer-duration) var(--footer-easing);
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
	color: var(--footer-link-hover);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---- 3. shop sentence -------------------------------------------------- */

.site-footer__shopline {
	margin: 0 0 var(--space-5);
	color: var(--footer-text);
	font-size: var(--footer-fs-shopline);
	line-height: var(--line-height-base);
}

/* Company seal line (QM-15): greyscale and soft at rest like the
   reference logos, full colour on hover or focus. */
.site-footer__seal {
	margin: 0 0 var(--space-5);
	font-size: var(--footer-fs-shopline);
	line-height: var(--line-height-base);
}

.site-footer__seal-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	color: var(--footer-text);
	text-decoration: none;
}

.site-footer__seal-img {
	width: 40px;
	height: 40px;
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter var(--motion-duration-fast) var(--motion-ease-standard), opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

.site-footer__seal-link:hover .site-footer__seal-img,
.site-footer__seal-link:focus-visible .site-footer__seal-img {
	filter: none;
	opacity: 1;
}

.site-footer__seal-link:hover span,
.site-footer__seal-link:focus-visible span {
	color: var(--color-link);
}

@media (prefers-contrast: more) {
	.site-footer__seal-img {
		filter: none;
		opacity: 1;
	}
}

.site-footer__inline-link {
	color: var(--color-link);  /* Apple's accent blue, only used for inline copy links */
	text-decoration: none;
	transition: text-decoration-color var(--footer-duration) var(--footer-easing);
}

.site-footer__inline-link:hover,
.site-footer__inline-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---- 4. divider -------------------------------------------------------- */

.site-footer__divider {
	height: 0;
	margin: 0 0 var(--space-4);
	border: 0;
	border-top: 1px solid var(--footer-divider);
}

/* ---- 5. bottom row ----------------------------------------------------- */

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3) 18px;  /* 18px off-scale, matches --footer-row-gap */
	font-size: var(--footer-fs-bottom);
	color: var(--footer-text);
}

.site-footer__copyright {
	margin: 0;
	font-size: var(--footer-fs-bottom);
	line-height: var(--line-height-base);
}

.site-footer__region {
	/* Reset the button so it reads as a footer pill, not a form control. */
	display: inline-flex;
	align-items: center;
	gap: 6px;  /* 6px off-scale, icon-to-label gap */
	padding: var(--space-1) var(--space-2);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	color: var(--footer-text);
	font: inherit;
	font-size: var(--footer-fs-bottom);
	line-height: 1.4;  /* tighter than --line-height-base (1.5) on purpose */
	cursor: pointer;
	transition: border-color var(--footer-duration) var(--footer-easing), color var(--footer-duration) var(--footer-easing);
}

.site-footer__region:hover,
.site-footer__region:focus-visible {
	color: var(--footer-link-hover);
	border-color: var(--footer-divider);
	outline: none;
}

.site-footer__region-icon {
	font-size: var(--font-size-14);
	line-height: 1;
}

/* The globe is an inline SVG, not the emoji it used to be: wp-emoji swapped
 * the character for an image from s.w.org, a third-party request before any
 * consent (inc/emoji.php drops the loader too). */
.site-footer__region-icon {
	display: inline-flex;
	align-items: center;
}

.site-footer__region-svg {
	display: block;
	width: 16px;
	height: 16px;
}

/* No tablet step here on purpose. .site-footer__inner is capped at a flat
 * --footer-max-width (980px), so the five tracks compute to the same
 * 164.8px at 1024px, at 1920px and at 2560px: the footer's width does not
 * follow the viewport above 980px. A viewport breakpoint therefore cannot
 * be justified by "the columns get narrow here", they never do. If those
 * German labels ever need more room, widen the cap or drop to three tracks
 * at EVERY desktop width, do not add a breakpoint. Below 833px the block
 * further down collapses the grid, which is where the footer genuinely is
 * viewport-bound. */

/* ---- mobile: stack columns vertically --------------------------------- */

@media (max-width: 833px) {
	.site-footer__inner {
		padding: 24px 18px;  /* 24px / 18px off-scale, mobile-only padding rhythm */
	}

	/* Coarse pointers: footer links are 18px text with no padding, grow
	 * the tap area without changing the visual rhythm. */
	.site-footer__column a,
	.site-footer__bottom a {
		display: inline-block;
		padding-block: var(--space-2);
		margin-block: calc(var(--space-2) * -1);
	}

	.site-footer__columns {
		/* Two columns at small-tablet widths reads better than one when there
		   are 5 short link lists; collapse to one only on phones. */
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-5) 18px;  /* 18px off-scale, matches --footer-row-gap */
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;  /* 10px off-scale, tight stack */
	}
}

@media (max-width: 480px) {
	.site-footer__columns {
		grid-template-columns: 1fr;
		gap: 18px;  /* 18px off-scale, matches --footer-row-gap */
	}
}

/* ---- a11y: focus rings (visible, on-brand) -----------------------------
 * The footer rules above only color-shift on :focus-visible; keyboard users
 * also need a discrete outline so the focus indicator survives in the same
 * row as a hover-darkened link. Mirrors the navbar's focus-ring contract
 * (2px solid --color-link, 2px offset) so the chrome reads consistently.
 * Region pill keeps its border-color hover affordance AND gains an outline
 *, the existing rule explicitly set outline: none, which would have failed
 * WCAG 2.4.7. */
.site-footer__link:focus-visible,
.site-footer__inline-link:focus-visible,
.site-footer__region:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* ---- Reduced motion ----------------------------------------------------
 * Footer transitions are tiny (120ms color/border) but neutralizing them
 * still improves the experience for visitors with vestibular sensitivity. */
@media (prefers-reduced-motion: reduce) {
	.site-footer__link,
	.site-footer__inline-link,
	.site-footer__region {
		transition-duration: 0ms !important;
	}
}

/* ============================================================
 * Footer language switcher, replaces the "kommt bald" region
 * placeholder. Active language is a plain emphasized span, the
 * others are quiet links.
 * ============================================================ */

nav.site-footer__region {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	background: none;
	border: 0;
	padding: 0;
}

.site-footer__region a.site-footer__region-label {
	color: var(--color-text-secondary);
	text-decoration: none;
	transition: color var(--motion-duration-fast) var(--motion-ease-standard);
}

.site-footer__region a.site-footer__region-label:hover,
.site-footer__region a.site-footer__region-label:focus-visible {
	color: var(--color-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.site-footer__region .site-footer__region-label.is-active {
	color: var(--color-text-primary);
	font-weight: 600;
}