/* ==========================================================================
   Footer (D-58) — navy, reversed lockup, columns, legal bar; plus the cookie notice motion and the toast.
   The cookie notice box itself lives in components.css; here it only gets its enter/exit motion.
   ========================================================================== */

.site-footer {
	margin-top: var(--s-8);
	border-top: 1px solid color-mix(in srgb, var(--white) 14%, transparent); /* the dark footer is close to the page colour */
	background: var(--footer-bg);
	color: var(--on-navy-muted);
	font-size: var(--fs-6);
}

.footer-grid {
	display: grid;
	gap: var(--s-6);
	padding-block: var(--s-7);
	grid-template-columns: 1fr;
}

/* Tablet: the brand on its own row, then the link columns. Desktop: brand and columns side by side. */
@media (min-width: 768px) {
	.footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.footer-brand,
	.footer-col--news { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
	.footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
	.footer-grid--news { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr; }
	.footer-brand,
	.footer-col--news { grid-column: auto; }
}

.footer-brand { --logo-h: 44px; }

.footer-brand p {
	max-width: 36ch;
	margin-top: var(--s-4);
	line-height: var(--lh-ui);
}

.footer-col h2 {
	margin-bottom: var(--s-3);
	color: var(--white);
	font-size: var(--fs-6);
}

.footer-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer a { text-underline-offset: 0.25em; }

.footer-links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

@media (hover: hover) {
	.footer-links a:hover,
	.legal-links a:hover,
	.footer-imprint a:hover {
		color: var(--white);
		text-decoration: underline;
	}
}

.socials {
	display: flex;
	gap: var(--s-2);
	margin-top: var(--s-5);
	padding: 0;
	list-style: none;
}

.socials a {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid color-mix(in srgb, var(--white) 50%, transparent);
	border-radius: 50%;
	color: var(--white);
	--icon-size: 18px;
	transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-hover) ease;
}

.socials a:active { transform: scale(calc(1 - 0.05 * var(--m))); }
@media (hover: hover) { .socials a:hover { background: color-mix(in srgb, var(--white) 16%, transparent); } }

/* Newsletter (the footer prints it only when the page has no other form) */
.footer-col--news p { max-width: 36ch; }

.newsletter-form {
	display: grid;
	gap: var(--s-2);
	margin-top: var(--s-3);
}

.site-footer .newsletter-form--compact {
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
}

.site-footer .newsletter-form--compact .newsletter-form__status { grid-column: 1 / -1; }

.site-footer .newsletter-form input[type="email"] {
	min-width: 0;
	height: 44px;
	padding: 0 var(--s-3);
	border: 1px solid color-mix(in srgb, var(--white) 55%, transparent);
	border-radius: var(--radius-lg);
	background: color-mix(in srgb, var(--white) 8%, transparent);
	color: var(--white);
}

.site-footer .newsletter-form input[type="email"][aria-invalid="true"] { border-color: var(--white); box-shadow: 0 0 0 1px var(--white); }
.site-footer .newsletter-form input::placeholder { color: color-mix(in srgb, var(--white) 70%, transparent); }
.site-footer .newsletter-form .btn--primary { background: var(--white); color: var(--navy); }
@media (hover: hover) { .site-footer .newsletter-form .btn--primary:hover { background: var(--tint); } }
.site-footer .newsletter-form__status { color: var(--on-navy-muted); }
.site-footer .newsletter-form__status.is-error { color: var(--white); }

/* Legal bar */
.footer-bottom {
	border-top: 1px solid color-mix(in srgb, var(--white) 18%, transparent);
	font-size: var(--fs-7);
}

.footer-bottom__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3) var(--s-5);
	padding-block: var(--s-4);
}

.legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.legal-links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Imprint (Organisation settings): editor, publisher, registration, contact */
.footer-imprint {
	display: flex;
	flex-wrap: wrap;
	flex-basis: 100%;
	gap: var(--s-1) var(--s-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Phones: the compact footer (D-57). Sections and provinces are in the drawer, the newsletter is on the
   homepage and article pages; company links run inline. */
@media (max-width: 767px) {
	.footer-col--phone-hide { display: none; }
	.footer-grid { gap: var(--s-5); padding-block: var(--s-6); }
	.footer-col h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.footer-col .footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
}

/* Mobile sticky banner: phones only, dismissible (site.js) */
.sticky-ad {
	position: fixed;
	inset: auto 0 0;
	z-index: var(--z-sticky);
	padding: var(--s-1) var(--s-2) calc(var(--s-1) + env(safe-area-inset-bottom));
	background: var(--bg);
	box-shadow: var(--shadow-pop);
}
.sticky-ad .ad-slot { gap: 2px; }
.sticky-ad__close {
	position: absolute;
	top: -36px;
	right: var(--s-2);
	display: grid;
	place-items: center;
	width: 44px;
	height: 36px;
	border-radius: var(--radius) var(--radius) 0 0;
	background: var(--bg);
	box-shadow: var(--shadow-pop);
	color: var(--muted);
}
.sticky-ad__close .icon { width: 18px; height: 18px; }
.sticky-ad__close::after { content: ""; position: absolute; inset: -8px 0 0; } /* 36px tab, 44px target */
/* Mobile bottom clearance: keep clearance inside the footer so the dark navy background
   reaches the bottom of the screen seamlessly, with no blank body strip underneath. */
body:has(.sticky-ad:not([hidden])),
body:has(.cookie-notice:not([hidden])) {
	padding-bottom: 0;
}

body:has(.sticky-ad:not([hidden])) .footer-bottom__inner {
	padding-bottom: calc(var(--s-4) + 84px);
}

body:has(.cookie-notice:not([hidden])) .footer-bottom__inner {
	padding-bottom: calc(var(--s-4) + 72px);
}

@media (min-width: 1024px) {
	.sticky-ad { display: none; }
	body:has(.sticky-ad:not([hidden])) .footer-bottom__inner {
		padding-bottom: var(--s-4);
	}
}

@starting-style {
	.cookie-notice:not([hidden]) { opacity: 0; transform: translateY(calc(100% * var(--m))); }
}

.cookie-notice.is-leaving {
	opacity: 0;
	transform: translateY(calc(100% * var(--m)));
	transition-duration: 160ms;
}

@media (max-width: 639px) {
	.cookie-notice__more { display: none; }
}

/* Toast: short confirmations from the page ("Link copied"). window.ainn.toast() in site.js. */
.toast {
	position: fixed;
	left: 50%;
	bottom: calc(var(--s-6) + env(safe-area-inset-bottom));
	z-index: var(--z-toast);
	max-width: min(90vw, 420px);
	padding: var(--s-3) var(--s-5);
	border-radius: var(--radius-pill);
	background: var(--ink);
	color: var(--bg);
	font-size: var(--fs-6);
	font-weight: 700;
	text-align: center;
	box-shadow: var(--shadow-pop);
	opacity: 0;
	transform: translate(-50%, calc(8px * var(--m)));
	pointer-events: none;
	transition: opacity 160ms ease-out, transform 160ms ease-out;
}

.toast:empty { padding: 0; }

.toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
	transition-duration: 200ms;
}

/* Lift it above whichever bottom bar is showing. */
html:has(.cookie-notice:not([hidden])) .toast { bottom: calc(var(--s-6) + 72px); }
@media (max-width: 1023px) { /* the sticky ad is display:none from 1024px (above) */
	html:has(.sticky-ad:not([hidden])) .toast { bottom: calc(var(--s-6) + 84px); }
}