.sv-site-footer,
.sv-site-footer *,
.sv-site-footer *::before,
.sv-site-footer *::after {
	box-sizing: border-box;
}

.sv-site-footer {
	--sv-footer-bg: var(--sv-color-surface);
	padding-inline: var(--sv-gutter);
	background: var(--sv-footer-bg);
	color: var(--sv-color-text);
	font-size: var(--sv-size-small);
}

.sv-site-footer--background-background {
	--sv-footer-bg: var(--sv-color-background);
	border-block-start: 1px solid var(--sv-color-border);
	background: var(--sv-footer-bg);
}

.sv-site-footer--background-inverse {
	--sv-color-text: var(--sv-color-on-inverse);
	--sv-color-muted: color-mix(in srgb, var(--sv-color-on-inverse) 72%, transparent);
	--sv-color-border: color-mix(in srgb, var(--sv-color-on-inverse) 12%, transparent);
	--sv-footer-bg: var(--sv-color-inverse);
	background: var(--sv-footer-bg);
	color: var(--sv-color-on-inverse);
}

/* Accent color: its button (the newsletter's Subscribe) in the light color made for it, as in an accent section. */
.sv-site-footer--background-primary {
	--sv-color-text: var(--sv-color-on-primary);
	--sv-color-muted: var(--sv-color-on-primary);
	--sv-color-border: color-mix(in srgb, var(--sv-color-on-primary) 25%, transparent);
	--sv-button-main-bg: var(--sv-color-on-primary);
	--sv-button-main-text: var(--sv-color-primary);
	--sv-footer-bg: var(--sv-color-primary);
	background: var(--sv-footer-bg);
	color: var(--sv-color-on-primary);
}

/*
 * Accent gradient (ADR 0059): the footer in the page's color with the accent rising from its bottom —
 * 30% at the bottom, fading out a tenth of the footer's height above it, over the end of the page (a
 * layer that clicks pass through). The owner asked twice for lighter and shorter (60% and half above,
 * then 40% and a quarter). Text keeps the page's colors, its softer text a little stronger.
 */
.sv-site-footer--background-gradient {
	--sv-color-muted: color-mix(in srgb, var(--sv-color-text) 82%, transparent);
	--sv-color-border: color-mix(in srgb, var(--sv-color-text) 14%, transparent);
	--sv-footer-bg: var(--sv-color-background);
	position: relative;
	isolation: isolate;
	background: var(--sv-footer-bg);
}

/*
 * A light line at the top, as wide as the content like the bottom line (owner): the gradient has no
 * edge of its own. Not on a floating box, nor in One row with a right side (its menu has that line).
 */
.sv-site-footer--background-gradient:not(.sv-site-footer--shape-box) .sv-site-footer__inner {
	border-block-start: 1px solid var(--sv-color-border);
}

.sv-site-footer--background-gradient.sv-site-footer--layout-simple .sv-site-footer__inner:has(> .sv-site-footer__side) {
	border-block-start: 0;
}

.sv-site-footer--background-gradient::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: -1;
	block-size: 110%;
	background: linear-gradient(to top, color-mix(in srgb, var(--sv-color-primary) 30%, transparent), transparent);
	pointer-events: none;
}

/*
 * Floating (ADR 0057): the same box as the floating header, at the page's bottom — drawn by the inner
 * part, while the footer itself spans the page (its gaps around the box, and the Accent gradient).
 * 20px from the page's edges and bottom (12px on phones), 20px corners, a light shadow (Drop shadow),
 * in the footer's color. Width: Content width — the footer's contents line up with the page's content
 * and the box reaches past them by its room inside (still its gap from the page's edges where there
 * isn't room) — or Full width (the whole page less the gap).
 */
.sv-site-footer.sv-site-footer--shape-box {
	--sv-footer-gap: 20px;
	--sv-footer-pad: clamp(1rem, 2vw, 1.75rem);
	/* The page's content width (the site's Layout, or the page less its gutters). */
	--sv-footer-content: min(var(--sv-container-content, var(--sv-container-standard)), 100% - 2 * var(--sv-gutter));
	padding-inline: 0;
	padding-block-end: var(--sv-footer-gap);
	border-block-start: 0;
	background: none;
}

.sv-site-footer--shape-box .sv-site-footer__inner {
	inline-size: min(calc(var(--sv-footer-content) + 2 * var(--sv-footer-pad)), calc(100% - 2 * var(--sv-footer-gap)));
	max-inline-size: none;
	margin-inline: auto;
	padding-inline: var(--sv-footer-pad);
	border-radius: 20px;
	background: var(--sv-footer-bg);
	box-shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 4px 12px -4px rgb(16 24 40 / 12%);
}

.sv-site-footer--shape-box.sv-site-footer--box-width-full .sv-site-footer__inner {
	inline-size: calc(100% - 2 * var(--sv-footer-gap));
}

/* Drop shadow off. */
.sv-site-footer--shape-box.sv-site-footer--shadow-none .sv-site-footer__inner {
	box-shadow: none;
}

/* Accent gradient: behind the box, as wide as the page, the accent at 60% at the page's bottom fading up. */
.sv-site-footer.sv-site-footer--shape-box.sv-site-footer--gradient-accent {
	background: linear-gradient(to top, color-mix(in srgb, var(--sv-color-primary) 60%, transparent), transparent);
}

@media (max-width: 767px) {
	.sv-site-footer.sv-site-footer--shape-box {
		--sv-footer-gap: 12px;
	}
}

.sv-site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.5rem;
	align-items: center;
	justify-content: space-between;
	/* The site's layout (Standard, Wide or Full width). */
	max-inline-size: var(--sv-container-content, var(--sv-container-standard));
	margin-inline: auto;
	padding-block: 2rem;
}

/* Height (Compact, Normal, Tall). */
.sv-site-footer--height-sm .sv-site-footer__inner {
	padding-block: 1.1rem;
}

.sv-site-footer--height-lg .sv-site-footer__inner {
	padding-block: 3.5rem;
}

.sv-site-footer__logo {
	display: block;
	inline-size: auto;
	max-inline-size: 12rem;
	block-size: 2.5rem;
	object-fit: contain;
	object-position: left center;
}

/* Logo size (Medium is the usual 2.5rem), like the header's. */
.sv-site-footer--logo-size-sm .sv-site-footer__logo {
	block-size: 2rem;
}

.sv-site-footer--logo-size-lg .sv-site-footer__logo {
	max-inline-size: 16rem;
	block-size: 3.5rem;
}

.sv-site-footer--logo-size-xl .sv-site-footer__logo {
	max-inline-size: 20rem;
	block-size: 4.75rem;
}

.sv-site-footer--layout-centered .sv-site-footer__logo {
	object-position: center;
}

:where([dir="rtl"]) .sv-site-footer__logo {
	object-position: right center;
}

.sv-site-footer__about {
	display: grid;
	gap: 0.5rem;
	max-inline-size: 26rem;
}

.sv-site-footer__name {
	margin: 0;
	font-family: var(--sv-font-heading);
	font-weight: var(--sv-font-heading-weight, 700);
	font-synthesis-weight: none;
	letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1));
	font-size: 1.1rem;
}

.sv-site-footer__text {
	margin: 0;
	color: var(--sv-color-muted);
}

.sv-site-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sv-site-footer__link {
	color: inherit;
	text-decoration: none;
	text-underline-offset: 0.3em;
}

/* Links in a row or list are at least 24px tall, easy to press on a phone (WCAG 2.5.8, ADR 0102). */
:is(.sv-site-footer__menu, .sv-site-footer__legals) .sv-site-footer__link {
	display: inline-flex;
	align-items: center;
	min-block-size: 24px;
}

.sv-site-footer__link:hover,
.sv-site-footer__link:focus-visible,
.sv-site-footer__link[aria-current="page"] {
	text-decoration: underline;
}

/* Line icons drawn inline (contact details, social links). */
.sv-site-footer__icon {
	flex: none;
	inline-size: 1.05em;
	block-size: 1.05em;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

/* Contact details (the social links are in the bottom line, ADR 0059). Hidden when empty. */
.sv-site-footer__connect {
	display: grid;
	gap: 0.9rem;
}

.sv-site-footer__connect:not(:has(.sv-site-footer__contact-item)) {
	display: none;
}

.sv-site-footer__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	font-style: normal;
}

.sv-site-footer__contact:empty {
	display: none;
}

.sv-site-footer__contact-item {
	display: inline-flex;
	gap: 0.45em;
	align-items: center;
}

/* Contact icons in the site's main color (the text color on colored footers). */
.sv-site-footer__contact-item .sv-site-footer__icon {
	color: var(--sv-color-primary);
}

:is(.sv-site-footer--background-inverse, .sv-site-footer--background-primary, .sv-site-footer--background-gradient) .sv-site-footer__contact-item .sv-site-footer__icon {
	color: inherit;
}

/* Social links: icons in circles of the main color. */
.sv-site-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.sv-site-footer__social:empty {
	display: none;
}

.sv-site-footer__social-link {
	display: inline-grid;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border-radius: 50%;
	background: var(--sv-color-primary);
	color: var(--sv-color-on-primary);
	transition: filter 0.15s ease, translate 0.15s ease;
}

.sv-site-footer__social-link:hover,
.sv-site-footer__social-link:focus-visible {
	filter: brightness(0.9);
	translate: 0 -1px;
}

.sv-site-footer__social-link .sv-site-footer__icon {
	inline-size: 1.1rem;
	block-size: 1.1rem;
}

.sv-site-footer--background-primary .sv-site-footer__social-link {
	background: var(--sv-color-on-primary);
	color: var(--sv-color-primary);
}

/* Copyright line, then the legal pages. */
.sv-site-footer__bottom {
	display: flex;
	flex-basis: 100%;
	flex-wrap: wrap;
	gap: 0.35rem 1.25rem;
	align-items: center;
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--sv-color-border);
	color: var(--sv-color-muted);
}

.sv-site-footer__copy {
	margin: 0;
	margin-inline-end: auto;
	/* A line typed in another script (e.g. English on a Persian site) reads in its own direction. */
	unicode-bidi: plaintext;
}

.sv-site-footer__legals {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.25rem;
	align-items: center;
}

.sv-site-footer__legals:empty {
	display: none;
}

/*
 * The social links in the bottom line (One row, Columns; ADR 0059): in its middle, the copyright
 * line at its start and the legal links at its end. On phones one under the other.
 */
@media (min-width: 768px) {
	.sv-site-footer:not(.sv-site-footer--layout-centered) .sv-site-footer__bottom:has(> .sv-site-footer__social:not(:empty)) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		gap: 0.75rem 1.5rem;
	}

	.sv-site-footer:not(.sv-site-footer--layout-centered) .sv-site-footer__bottom > .sv-site-footer__copy {
		grid-column: 1;
	}

	.sv-site-footer:not(.sv-site-footer--layout-centered) .sv-site-footer__bottom > .sv-site-footer__social {
		grid-column: 2;
	}

	.sv-site-footer:not(.sv-site-footer--layout-centered) .sv-site-footer__bottom > .sv-site-footer__legals {
		grid-column: 3;
		justify-content: flex-end;
	}
}

@media (max-width: 767px) {
	.sv-site-footer:not(.sv-site-footer--layout-centered) .sv-site-footer__bottom:has(> .sv-site-footer__social:not(:empty)) {
		flex-direction: column;
		gap: 0.75rem;
		align-items: flex-start;
	}
}

/* One row: name, menu and contact share the first row. */
.sv-site-footer--layout-simple .sv-site-footer__text {
	display: none;
}

/* Centered */
.sv-site-footer--layout-centered .sv-site-footer__inner {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.sv-site-footer--layout-centered .sv-site-footer__about,
.sv-site-footer--layout-centered .sv-site-footer__connect,
.sv-site-footer--layout-centered .sv-site-footer__bottom {
	justify-items: center;
	justify-content: center;
	align-self: stretch;
	max-inline-size: none;
}

.sv-site-footer--layout-centered .sv-site-footer__copy {
	margin-inline-end: 0;
}

.sv-site-footer--layout-centered :is(.sv-site-footer__menu, .sv-site-footer__contact, .sv-site-footer__social, .sv-site-footer__legals) {
	justify-content: center;
}

/* Centered: the social links above the line, then the copyright line and the legal links (as before ADR 0059). */
.sv-site-footer--layout-centered .sv-site-footer__bottom:has(> .sv-site-footer__social:not(:empty)) {
	padding-block-start: 0;
	border-block-start: 0;
}

.sv-site-footer--layout-centered .sv-site-footer__social {
	flex-basis: 100%;
	order: -1;
	margin-block-end: 0.65rem;
	padding-block-end: 1rem;
	border-block-end: 1px solid var(--sv-color-border);
}

/*
 * Columns: about | menu | contact, copyright below. The menu's column is as wide as it needs when
 * pages with sub-pages add columns of their own; a newsletter widens the right side (ADR 0059).
 */
.sv-site-footer--layout-columns .sv-site-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, var(--sv-footer-start, 2fr)) var(--sv-footer-middle, minmax(0, 1fr)) minmax(0, var(--sv-footer-end, 1fr));
	align-items: start;
	padding-block: var(--sv-space-md);
}

.sv-site-footer--layout-columns .sv-site-footer__inner:has(.sv-site-footer__group) {
	--sv-footer-middle: auto;
}

/* Pages with sub-pages (Columns, ADR 0059): a column each after the menu's — the page, then its sub-pages. */
.sv-site-footer__group {
	display: none;
}

.sv-site-footer--layout-columns .sv-site-footer__nav:has(.sv-site-footer__group) {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2.5rem;
	align-items: flex-start;
}

.sv-site-footer--layout-columns .sv-site-footer__nav > * {
	min-inline-size: 7rem;
	max-inline-size: 14rem;
}

.sv-site-footer--layout-columns .sv-site-footer__group {
	display: grid;
	gap: 0.6rem;
}

.sv-site-footer--layout-columns .sv-site-footer__parent,
.sv-site-footer--layout-columns .sv-site-footer__nav > .sv-site-footer__menu:not(:has(> li:not(.sv-site-footer__parent))) {
	display: none;
}

.sv-site-footer__group-title {
	margin: 0;
	color: var(--sv-color-text);
	font-weight: 600;
}

.sv-site-footer--layout-columns.sv-site-footer--height-sm .sv-site-footer__inner {
	padding-block: var(--sv-space-sm);
}

.sv-site-footer--layout-columns.sv-site-footer--height-lg .sv-site-footer__inner {
	padding-block: var(--sv-space-lg);
}

.sv-site-footer--layout-columns :is(.sv-site-footer__menu, .sv-site-footer__contact) {
	flex-direction: column;
}

.sv-site-footer--layout-columns .sv-site-footer__bottom {
	grid-column: 1 / -1;
}

@media (max-width: 767px) {
	.sv-site-footer--layout-columns .sv-site-footer__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.sv-site-footer--layout-simple .sv-site-footer__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/*
 * Partner logos (ADR 0058): a small heading and up to three logos — about two thirds of the footer
 * logo's height (owner: three quarters was a little big), in their own colors — on the footer's right side; the contact details then
 * move under the logo and text (with the newsletter above them, ADR 0059). One row and Columns only,
 * never in the Centered design.
 */
.sv-site-footer__partners {
	display: grid;
	gap: 0.75rem;
	align-content: start;
}

.sv-site-footer--layout-centered .sv-site-footer__partners {
	display: none;
}

.sv-site-footer__partners-title {
	margin: 0;
	color: var(--sv-color-muted);
	font-size: calc(var(--sv-size-small) * 0.85);
	font-weight: 600;
	letter-spacing: calc(0.04em * var(--sv-tracking, 1));
	text-transform: var(--sv-uppercase, uppercase);
}

.sv-site-footer__partners-logos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	align-items: center;
}

.sv-site-footer__partner {
	display: block;
	line-height: 0;
	transition: opacity 0.2s ease;
}

a.sv-site-footer__partner:is(:hover, :focus-visible) {
	opacity: 0.8;
}

.sv-site-footer__partner-logo {
	display: block;
	inline-size: auto;
	max-inline-size: 7rem;
	block-size: 1.6rem;
	object-fit: contain;
}

.sv-site-footer--logo-size-sm .sv-site-footer__partner-logo {
	block-size: 1.3rem;
}

.sv-site-footer--logo-size-lg .sv-site-footer__partner-logo {
	max-inline-size: 8rem;
	block-size: 2.2rem;
}

.sv-site-footer--logo-size-xl .sv-site-footer__partner-logo {
	max-inline-size: 9rem;
	block-size: 3rem;
}

/*
 * The right side (ADR 0058, 0059): the newsletter, then the partner logos. With it, the logo and text,
 * then the contact details, are on the left. Columns: the menu between them; a newsletter widens both
 * outer columns. One row: the menu moves to the top, centered in one row over a light line.
 */
/* minmax(0, 1fr): the side's width, never its email field's own (a narrow column narrows the field). */
.sv-site-footer__side {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.75rem;
	align-content: start;
}

/* The logo and the contact details stay together when the menu or the right side is taller. */
.sv-site-footer--layout-columns .sv-site-footer__inner:has(> .sv-site-footer__side) {
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"about nav side"
		"connect nav side"
		"bottom bottom bottom";
}

/*
 * With a right side the first column is as wide as the logo and contact details need, and the menu
 * sits centered in the space between them and the side: the same free space on both sides (owner).
 */
@media (min-width: 768px) {
	.sv-site-footer--layout-columns .sv-site-footer__inner:has(> .sv-site-footer__side) {
		grid-template-columns: fit-content(22rem) 1fr fit-content(22rem);
	}

	.sv-site-footer--layout-columns .sv-site-footer__inner:has(> .sv-site-footer__side > .sv-site-footer__newsletter) {
		grid-template-columns: fit-content(22rem) 1fr minmax(0, 26rem);
	}

	.sv-site-footer--layout-columns .sv-site-footer__inner:has(> .sv-site-footer__side) > .sv-site-footer__nav {
		justify-self: center;
	}
}

.sv-site-footer--layout-simple .sv-site-footer__inner:has(> .sv-site-footer__side) {
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas:
		"about side"
		"connect side"
		"bottom bottom";
	align-items: start;
}

.sv-site-footer--layout-simple .sv-site-footer__inner:has(> .sv-site-footer__side):has(> .sv-site-footer__nav) {
	grid-template-rows: auto auto 1fr auto;
	grid-template-areas:
		"nav nav"
		"about side"
		"connect side"
		"bottom bottom";
}

/* The menu between two light lines (owner), and more room around what follows, up to the bottom line. */
.sv-site-footer--layout-simple .sv-site-footer__inner:has(> .sv-site-footer__side) > .sv-site-footer__nav {
	margin-block-end: 1rem;
	padding-block: 1rem;
	border-block: 1px solid var(--sv-color-border);
}

/* More room above the bottom line when there is a right side (One row and Columns, owner). */
:is(.sv-site-footer--layout-simple, .sv-site-footer--layout-columns) .sv-site-footer__inner:has(> .sv-site-footer__side) > .sv-site-footer__bottom {
	margin-block-start: 1rem;
}

.sv-site-footer--layout-simple .sv-site-footer__inner:has(> .sv-site-footer__side) > .sv-site-footer__nav .sv-site-footer__menu {
	justify-content: center;
}

.sv-site-footer--layout-simple .sv-site-footer__side {
	justify-self: end;
	inline-size: min(100%, 26rem);
}

/*
 * One row with both the newsletter and partner logos (owner): the logos move under the contact details
 * on the left and the newsletter keeps the right side. Wide screens only; phones stack everything.
 */
@media (min-width: 768px) {
	.sv-site-footer--layout-simple .sv-site-footer__inner:has(> .sv-site-footer__side > .sv-site-footer__newsletter + .sv-site-footer__partners) {
		grid-template-rows: auto auto 1fr auto;
		grid-template-areas:
			"about news"
			"connect news"
			"partners news"
			"bottom bottom";
	}

	.sv-site-footer--layout-simple .sv-site-footer__inner:has(> .sv-site-footer__nav):has(> .sv-site-footer__side > .sv-site-footer__newsletter + .sv-site-footer__partners) {
		grid-template-rows: auto auto auto 1fr auto;
		grid-template-areas:
			"nav nav"
			"about news"
			"connect news"
			"partners news"
			"bottom bottom";
	}

	.sv-site-footer--layout-simple .sv-site-footer__side:has(> .sv-site-footer__newsletter + .sv-site-footer__partners) {
		display: contents;
	}

	.sv-site-footer--layout-simple .sv-site-footer__side > .sv-site-footer__newsletter:has(+ .sv-site-footer__partners) {
		grid-area: news;
		justify-self: end;
		inline-size: min(100%, 26rem);
	}

	.sv-site-footer--layout-simple .sv-site-footer__side > .sv-site-footer__newsletter + .sv-site-footer__partners {
		grid-area: partners;
		margin-block-start: 0.75rem;
	}
}

.sv-site-footer__inner:has(> .sv-site-footer__side) > .sv-site-footer__about {
	grid-area: about;
}

.sv-site-footer__inner:has(> .sv-site-footer__side) > .sv-site-footer__nav {
	grid-area: nav;
}

.sv-site-footer__inner:has(> .sv-site-footer__side) > .sv-site-footer__connect {
	grid-area: connect;
}

.sv-site-footer__inner:has(> .sv-site-footer__side) > .sv-site-footer__side {
	grid-area: side;
}

.sv-site-footer__inner:has(> .sv-site-footer__side) > .sv-site-footer__bottom {
	grid-area: bottom;
}

/* Centered: only the newsletter, centered under the contact details (no partner logos there). */
.sv-site-footer--layout-centered .sv-site-footer__side {
	justify-items: center;
	inline-size: min(100%, 28rem);
	margin-block: 0.5rem;
}

.sv-site-footer--layout-centered .sv-site-footer__side:not(:has(> .sv-site-footer__newsletter)) {
	display: none;
}

@media (max-width: 767px) {
	.sv-site-footer--layout-columns .sv-site-footer__inner:has(> .sv-site-footer__side) {
		grid-template-rows: none;
		grid-template-areas:
			"about"
			"connect"
			"nav"
			"side"
			"bottom";
	}

	.sv-site-footer--layout-simple .sv-site-footer__inner:has(> .sv-site-footer__side),
	.sv-site-footer--layout-simple .sv-site-footer__inner:has(> .sv-site-footer__side):has(> .sv-site-footer__nav) {
		grid-template-rows: none;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"nav"
			"about"
			"connect"
			"side"
			"bottom";
	}

	.sv-site-footer--layout-simple .sv-site-footer__side {
		justify-self: stretch;
		inline-size: auto;
	}
}

/*
 * Newsletter sign-up (ADR 0059): a heading, an optional line, then the email field with the Subscribe
 * button inside its frame: the site's button (Accent color), the frame's corners following the
 * button's (round buttons make a pill). The field is the page's color on light footers, a light tint
 * on Dark and Accent color ones.
 */
.sv-site-footer__newsletter {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem;
	inline-size: 100%;
}

.sv-site-footer__newsletter-title {
	margin: 0;
	color: var(--sv-color-text);
	font-family: var(--sv-font-heading);
	font-size: 1.25rem;
	font-weight: var(--sv-font-heading-weight, 700);
	font-synthesis-weight: none;
	letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1));
	line-height: 1.3;
}

.sv-site-footer__newsletter-text {
	margin: 0;
	color: var(--sv-color-muted);
}

.sv-site-footer__subscribe {
	margin: 0;
	margin-block-start: 0.4rem;
}

.sv-site-footer__subscribe-row {
	--sv-subscribe-inset: 4px;
	display: flex;
	gap: 0.25rem;
	align-items: center;
	padding: var(--sv-subscribe-inset);
	border: 1px solid var(--sv-color-border);
	border-radius: calc(var(--sv-radius-button, 10px) + min(var(--sv-radius-button, 10px), var(--sv-subscribe-inset)));
	background: var(--sv-color-background);
	color: var(--sv-color-text);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

:is(.sv-site-footer--background-inverse, .sv-site-footer--background-primary) .sv-site-footer__subscribe-row {
	background: color-mix(in srgb, var(--sv-color-text) 8%, transparent);
}

.sv-site-footer__subscribe-row:focus-within {
	border-color: var(--sv-color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sv-color-primary) 18%, transparent);
}

:is(.sv-site-footer--background-inverse, .sv-site-footer--background-primary) .sv-site-footer__subscribe-row:focus-within {
	border-color: var(--sv-color-text);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sv-color-text) 18%, transparent);
}

.sv-site-footer__subscribe-field {
	flex: 1 1 auto;
	min-inline-size: 0;
	margin: 0;
	padding-block: 0.55rem;
	padding-inline: 0.85rem;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	/* 16px or more: phones do not zoom in on the field. */
	font-size: max(1rem, var(--sv-size-small));
	text-align: start;
}

.sv-site-footer__subscribe-field:focus {
	outline: none;
}

.sv-site-footer__subscribe-field::placeholder {
	color: var(--sv-color-muted);
	opacity: 1;
}

/* An Arabic or Persian placeholder reads from the right; a typed address stays left to right. */
:where([dir="rtl"]) .sv-site-footer__subscribe-field:placeholder-shown {
	direction: rtl;
}

/* The header's button size (ADR 0057): its words the menu's size. */
.sv-site-footer__subscribe-button {
	flex: none;
}

.sv-site-footer__subscribe-button .sv-button__control {
	padding-block: 0.6em;
	padding-inline: 1.25em;
	font-size: calc(var(--sv-size-body) - 1px);
	white-space: nowrap;
}

@supports (text-box: trim-both cap alphabetic) {
	.sv-site-footer__subscribe-button .sv-button__control {
		--sv-button-pad: 0.8em;
		padding-block: calc(var(--sv-button-pad) - 0.08em) calc(var(--sv-button-pad) + 0.08em);
	}
}

.sv-site-footer__subscribe-button .sv-button__control:disabled {
	cursor: progress;
	opacity: 0.7;
}

.sv-site-footer__subscribe-status {
	margin: 0;
	margin-block-start: 0.5rem;
	color: var(--sv-color-text);
	font-weight: 500;
}

.sv-site-footer__subscribe-status:empty {
	display: none;
}

.sv-site-footer__subscribe-status--error {
	color: #c62828;
}

:is(.sv-site-footer--background-inverse, .sv-site-footer--background-primary) .sv-site-footer__subscribe-status--error {
	color: inherit;
}

/*
 * The sign-up's answer (ADR 0060): a pop-up in the site's look (view.js makes a native <dialog> on the
 * page) — the page's color, fonts and large corners, a round icon tinted with the Accent color (red for
 * a problem), and the site's main button. A light, short shadow over a softly dimmed page.
 */
.sv-newsletter-dialog {
	box-sizing: border-box;
	inline-size: min(26rem, calc(100% - 2rem));
	max-inline-size: none;
	margin: auto;
	padding: 2rem 1.75rem 1.75rem;
	border: 0;
	border-radius: var(--sv-radius-lg, 20px);
	background: var(--sv-color-background);
	color: var(--sv-color-text);
	box-shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 12px 32px -8px rgb(16 24 40 / 22%);
	font-family: var(--sv-font-body);
	font-size: var(--sv-size-body);
	text-align: center;
}

/* The pop-up takes the focus itself (view.js): no ring around the whole box. */
.sv-newsletter-dialog:focus {
	outline: none;
}

.sv-newsletter-dialog::backdrop {
	background: rgb(15 23 42 / 45%);
	backdrop-filter: blur(2px);
}

.sv-newsletter-dialog[open] {
	animation: sv-newsletter-dialog-in 0.2s ease-out;
}

@keyframes sv-newsletter-dialog-in {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.98);
	}
}

.sv-newsletter-dialog__icon {
	display: inline-grid;
	place-items: center;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	margin-block-end: 1rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--sv-color-primary) 12%, var(--sv-color-background));
	color: var(--sv-color-primary);
}

.sv-newsletter-dialog[data-kind="error"] .sv-newsletter-dialog__icon {
	background: color-mix(in srgb, #c62828 10%, var(--sv-color-background));
	color: #c62828;
}

.sv-newsletter-dialog__icon svg {
	inline-size: 1.6rem;
	block-size: 1.6rem;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

.sv-newsletter-dialog__title {
	margin: 0;
	color: var(--sv-color-text);
	font-family: var(--sv-font-heading);
	font-size: 1.35rem;
	font-weight: var(--sv-font-heading-weight, 700);
	font-synthesis-weight: none;
	letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1));
	line-height: 1.3;
}

.sv-newsletter-dialog__text {
	margin: 0;
	margin-block-start: 0.6rem;
	color: var(--sv-color-muted);
	line-height: 1.6;
}

.sv-newsletter-dialog__button {
	margin: 0;
	margin-block-start: 1.5rem;
}

.sv-newsletter-dialog__button .sv-button__control {
	min-inline-size: 8rem;
}

@media (prefers-reduced-motion: reduce) {
	.sv-newsletter-dialog[open] {
		animation: none;
	}
}

/* Without JavaScript the page comes back to #sv-newsletter-sent (or -failed). */
.sv-site-footer__subscribe-note {
	display: none;
	margin: 0;
	font-weight: 500;
}

.sv-site-footer__subscribe-note:target {
	display: block;
}

.sv-site-footer__subscribe-note--error {
	color: #c62828;
}

:is(.sv-site-footer--background-inverse, .sv-site-footer--background-primary) .sv-site-footer__subscribe-note--error {
	color: inherit;
}

/* For screen readers only: the field's label, and the field robots fill in. */
.sv-site-footer__hidden {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.sv-site-footer__social-link {
		transition: none;
	}
}