/* SeniorSentry theme CSS — everything theme.json can't express.
   Budget: single stylesheet, ≤ 60KB. */

/* ---------- Text display rules (brand guide §2) ---------- */

body {
	-webkit-font-smoothing: antialiased;
}

/*
 * Max line length (brand rule: ≤70ch): the 720px content column enforces
 * ~68ch at body size, so no explicit max-width — an explicit rule here
 * would override the constrained-layout column and widen paragraphs.
 */

/* Links always underlined — seniors never guess what's clickable. */
a {
	text-underline-offset: 2px;
	text-decoration-thickness: 2px;
}

/* Never justified, never centered body copy. */
.entry-content p {
	text-align: left;
}

/* ---------- Buttons & tap targets ---------- */

.wp-block-button__link,
.wp-element-button {
	min-height: var(--wp--custom--button-min-height, 56px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	text-decoration: none;
}

a,
button,
input,
select,
summary {
	min-height: 0;
}

nav a,
.ss-utility-bar a,
summary {
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
}

/* Phone CTAs: amber is reserved for the phone action (brand rule). */
.ss-phone-cta .wp-block-button__link,
a.ss-phone-link {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--text);
	font-weight: 700;
}

.ss-phone-cta .wp-block-button__link:hover,
a.ss-phone-link:hover {
	background-color: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--text);
}

/* Secondary phone CTA (product cards, repeated CTAs): evergreen outline —
   still clearly a phone button, without competing with the amber moments. */
.ss-phone-cta--secondary .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

.ss-phone-cta--secondary .wp-block-button__link:hover {
	background: var(--wp--preset--color--surface-tint);
	color: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
}

/* Inline tel links: amber-ink, the darkest amber that passes AA (4.6:1)
   on the cream background. Amber-dark (2.8:1) is reserved for hovers on
   amber surfaces. */
a.ss-tel {
	font-weight: 700;
	color: var(--wp--preset--color--accent-ink);
	white-space: nowrap;
}

.has-primary-background-color a.ss-tel,
.has-primary-dark-background-color a.ss-tel {
	color: var(--wp--preset--color--accent);
}

/* ---------- Focus (WCAG 2.1 AA) ---------- */

:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.has-primary-background-color :focus-visible,
.has-primary-dark-background-color :focus-visible,
.ss-on-dark :focus-visible {
	outline-color: var(--wp--preset--color--accent);
}

/* Skip link: WP's native block-theme skip link is used; style its focus
   state to match the brand. */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	z-index: 100;
}

/* ---------- Cards (brand guide §4) ---------- */

.ss-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--card-radius, 16px);
	box-shadow: var(--wp--custom--card-shadow);
}

/* ---------- FAQ accordion: native <details>, zero JS ---------- */

.ss-faq details {
	background: var(--wp--preset--color--surface-tint);
	border-radius: 12px;
	padding: 0;
	margin-bottom: 1rem;
}

.ss-faq summary {
	cursor: pointer;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--heading-4);
	line-height: 1.3;
	padding: 1.25rem 1.5rem;
	min-height: var(--wp--custom--tap-target, 48px);
	list-style-position: outside;
}

.ss-faq summary::marker {
	color: var(--wp--preset--color--primary);
}

.ss-faq details > :not(summary) {
	padding: 0 1.5rem 1.25rem;
	max-width: 70ch;
}

/* ---------- Utility bar, header, footer ---------- */

.ss-utility-bar {
	color: var(--wp--preset--color--background);
	font-size: var(--wp--preset--font-size--small);
}

/* Sticky offsets for in-page anchors (compact header stays pinned). */
html {
	scroll-padding-top: 160px;
}

/*
 * Pinned header, all viewports: the template-part wrapper is sticky with a
 * negative top equal to the utility bar's fixed height, so the utility row
 * slides out of view on scroll and only the compact header row(s) stay
 * pinned — wordmark + call + nav on desktop, wordmark + Menu on mobile.
 * (Sticky must live on the wrapper: a sticky child can never outlast its
 * own parent's bounds. And CSS can't swap a "condensed" header on scroll,
 * but a negative offset gets the same effect for free.)
 */
:root {
	--ss-utility-h: 44px;
}

header.wp-block-template-part {
	position: sticky;
	top: calc(-1 * var(--ss-utility-h));
	z-index: 50;
}

.ss-utility-bar {
	height: var(--ss-utility-h);
	display: flex;
	align-items: center;
	overflow: hidden;
}

.ss-utility-bar__inner {
	flex: 1;
	padding-block: 0;
}

@media (min-width: 1024px) {
	/* Tight rows so the pinned stack stays lean (~120px once scrolled). */
	.ss-header__inner {
		padding-block: 0.5rem;
	}

	.ss-header a.ss-header__call {
		min-height: 48px;
		padding: 0.5rem 1.125rem;
	}

	.ss-nav {
		padding-top: 0.25rem;
	}

	.ss-nav > ul > li > a,
	.ss-nav-dropdown > summary {
		padding: 0.25rem 0.625rem 0.375rem;
	}

	.ss-mobile-call-bar {
		display: none;
	}
}

/*
 * Mobile: number moves to a fixed bottom call bar; utility bar slims down to
 * the language toggle only and nothing sticks at the top.
 */
@media (max-width: 1023.98px) {
	html {
		scroll-padding-top: 100px; /* pinned wordmark/Menu row */
	}

	.ss-utility-bar__label {
		display: none; /* the number lives in the bottom bar */
	}

	.ss-utility-bar__inner {
		justify-content: flex-end;
	}

	/*
	 * The fixed bottom bar IS the phone action on small screens — the hero's
	 * inline button would sit directly above it on first load (two identical
	 * amber buttons stacked). Hide the hero one; mid-page and footer CTAs
	 * keep the number ≥3 times per page.
	 */
	.ss-hero .ss-phone-cta {
		display: none;
	}

	/* Higher specificity than the base rules, which appear later in this file. */
	.ss-header a.ss-header__call {
		display: none; /* the bottom bar is the call action */
	}

	/* Keep wordmark + Menu on a single line at 375px. */
	.ss-header .ss-wordmark {
		font-size: 1.375rem;
	}

	/* Room for the fixed bottom bar so content and footer stay reachable. */
	body {
		padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
	}

	.ss-mobile-call-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 70;
		background: var(--wp--preset--color--primary-dark);
		padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
	}

	.ss-mobile-call-bar__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		width: 100%;
		min-height: var(--wp--custom--button-min-height, 56px);
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--text);
		border-radius: 8px;
		font-size: var(--wp--preset--font-size--button);
		font-weight: 700;
		text-decoration: none;
	}

	.ss-mobile-call-bar__btn:hover,
	.ss-mobile-call-bar__btn:active {
		background: var(--wp--preset--color--accent-dark);
		color: var(--wp--preset--color--text);
	}
}

.ss-utility-bar__inner,
.ss-header__inner,
.ss-footer__inner {
	max-width: 1160px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.ss-utility-bar__inner {
	padding-block: 0.5rem;
}

.ss-utility-bar__phone {
	font-size: var(--wp--preset--font-size--phone-utility);
	letter-spacing: 0.01em;
	margin-inline-start: 0.5rem;
}

.ss-utility-bar a {
	color: var(--wp--preset--color--background);
}

.ss-utility-bar a.ss-tel {
	color: var(--wp--preset--color--accent);
}

.ss-lang-toggle {
	display: inline-flex;
	gap: 0.25rem;
	align-items: center;
}

.ss-lang-toggle a,
.ss-lang-toggle strong {
	padding: 0.375rem 0.5rem;
	min-width: var(--wp--custom--tap-target, 48px);
	text-align: center;
}

/* Cream, not white: the header is a text surface too — same anti-glare
   rationale as the page background. The evergreen utility bar and the border
   keep the pinned header clearly delineated. */
.ss-header {
	background: var(--wp--preset--color--background);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.ss-header__inner {
	padding-block: 1rem;
}

.ss-wordmark {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--heading-3);
	color: var(--wp--preset--color--text);
}

.ss-wordmark__icon {
	color: var(--wp--preset--color--primary);
	flex: none;
}

.ss-wordmark__sentry {
	color: var(--wp--preset--color--primary);
}

/* Header call button is evergreen, not amber: it's always on screen, so it
   stays calm — amber is rationed to one decision-point CTA per view (hero,
   CTA band, mobile bottom bar). */
a.ss-header__call {
	border-radius: 8px;
	padding: 0.75rem 1.25rem;
	min-height: var(--wp--custom--button-min-height, 56px);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--button);
	font-weight: 700;
	text-decoration: none;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}

a.ss-header__call:hover {
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--surface);
}

.ss-footer {
	color: var(--wp--preset--color--background);
	margin-top: var(--wp--preset--spacing--60);
}

.ss-footer__inner {
	padding-block: var(--wp--preset--spacing--50);
	align-items: flex-start;
}

.ss-footer a {
	color: var(--wp--preset--color--background);
}

.ss-footer__lockup {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
}

.ss-footer__address {
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.85;
}

/* Device photography (Senior Protection assets, licensed): product cutouts
   sit contained on a white card, not cropped like lifestyle photos. */
.ss-media--device {
	background: var(--wp--preset--color--surface);
}

.ss-media--device img {
	object-fit: contain;
	padding: 1.25rem;
}

.ss-box-strip .ss-media {
	aspect-ratio: 4 / 3;
}

/* Diagrams (response flow, fall-detection signal): responsive inline SVG. */
.ss-diagram {
	margin-block: var(--wp--preset--spacing--40);
}

.ss-diagram svg {
	width: 100%;
	height: auto;
	display: block;
}

/* "The math that matters" callout on home — the value-prop punchline. */
.ss-math-card {
	margin-top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-left: 6px solid var(--wp--preset--color--accent);
	max-width: 820px;
	margin-inline: auto;
}

.ss-math-card h3 {
	margin-top: 0;
}

/* ---------- Primary nav (no JS: native details for drawer + dropdown) ---------- */

.ss-nav-drawer > summary {
	display: none; /* desktop: nav always visible */
	cursor: pointer;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	list-style: none;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	min-height: var(--wp--custom--tap-target, 48px);
}

.ss-nav-drawer > summary::-webkit-details-marker {
	display: none;
}

.ss-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1rem;
}

.ss-nav a {
	text-decoration: none;
	font-weight: 600;
	color: var(--wp--preset--color--text);
	display: inline-block;
	border-radius: 8px;
}

.ss-nav a:hover {
	color: var(--wp--preset--color--primary-dark);
	background: var(--wp--preset--color--surface-tint);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Current page: bold + thick evergreen underline, so "where am I" is
   answered at a glance and links read distinct from plain bold text. */
.ss-nav a[aria-current="page"],
.ss-nav-dropdown.ss-is-current > summary {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 8px;
	text-decoration-color: var(--wp--preset--color--primary);
}

.ss-nav-dropdown {
	position: relative;
}

.ss-nav-dropdown > summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	border-radius: 8px;
}

.ss-nav-dropdown > summary:hover {
	color: var(--wp--preset--color--primary-dark);
	background: var(--wp--preset--color--surface-tint);
}

.ss-nav-dropdown > summary::-webkit-details-marker {
	display: none;
}

.ss-nav-dropdown[open] > summary svg {
	transform: rotate(180deg);
}

.ss-nav-dropdown > ul {
	display: block;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	box-shadow: var(--wp--custom--card-shadow);
	padding: 0.5rem;
	min-width: 220px;
}

.ss-nav-dropdown > ul a {
	display: block;
	padding: 0.625rem 0.75rem;
	border-radius: 8px;
}

.ss-nav-dropdown > ul a:hover {
	background: var(--wp--preset--color--surface-tint);
}

@media (min-width: 1024px) {
	.ss-nav-drawer {
		display: none; /* desktop: nav always visible, no toggle */
	}

	/* Two-row header: wordmark + call button on top, nav on its own row. */
	.ss-nav {
		order: 4;
		flex-basis: 100%;
		border-top: 1px solid var(--wp--preset--color--border);
		padding-top: 0.75rem;
	}

	.ss-nav-dropdown > ul {
		position: absolute;
		top: calc(100% + 0.5rem);
		left: 0;
		z-index: 60;
	}
}

@media (max-width: 1023.98px) {
	.ss-nav-drawer > summary {
		display: inline-flex;
	}

	.ss-nav {
		display: none;
	}

	.ss-nav-drawer[open] + .ss-nav {
		display: block;
		order: 4;
		flex-basis: 100%;
	}

	.ss-nav-drawer {
		order: 3;
	}

	.ss-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-block: 0.5rem;
	}

	/* Hairline separators: rows read as a tappable list, not a text block. */
	.ss-nav > ul > li + li {
		border-top: 1px solid var(--wp--preset--color--border);
	}

	.ss-nav a,
	.ss-nav-dropdown > summary {
		display: block;
		padding: 0.75rem 0.5rem;
	}

	.ss-nav-dropdown > ul {
		border: none;
		box-shadow: none;
		background: var(--wp--preset--color--surface-tint);
		margin-inline-start: 1rem;
	}
}

/* ---------- Media slots (lifestyle photos; tint placeholders until licensed) ---------- */

.ss-media {
	margin: 0;
	border-radius: var(--wp--custom--card-radius, 16px);
	overflow: hidden;
	background: var(--wp--preset--color--surface-tint);
	display: grid;
	place-items: center;
}

.ss-media picture {
	display: block;
	width: 100%;
	height: 100%;
}

.ss-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ss-media__note {
	padding: 1rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	text-align: center;
}

.ss-hero__media {
	aspect-ratio: 4 / 3;
	/* On the evergreen band the tint block would glow — soften it. */
	background: rgb(255 255 255 / 0.1);
}

.ss-hero__media .ss-media__note {
	color: rgb(250 247 240 / 0.75);
}

/* Framed inside the card padding, radius one step tighter than the card. */
.ss-fork__media {
	aspect-ratio: 3 / 2;
	margin-bottom: 1rem;
	border-radius: 12px;
}

@media (max-width: 781px) {
	/* Columns stack: keep the hero photo below the CTA, modest height. */
	.ss-hero__media {
		aspect-ratio: 16 / 9;
	}
}

/* ---------- Hero ---------- */

.ss-hero {
	background: var(--wp--preset--gradient--hero-evergreen);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
	position: relative;
}

/* Topographic-line motif, 2% opacity, hero + footer only (brand §4). */
.ss-hero::before,
.ss-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.02;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1.5'%3E%3Cpath d='M0 80 Q100 40 200 80 T400 80'/%3E%3Cpath d='M0 130 Q100 90 200 130 T400 130'/%3E%3Cpath d='M0 180 Q100 140 200 180 T400 180'/%3E%3Cpath d='M0 230 Q100 190 200 230 T400 230'/%3E%3Cpath d='M0 280 Q100 240 200 280 T400 280'/%3E%3Cpath d='M0 330 Q100 290 200 330 T400 330'/%3E%3C/g%3E%3C/svg%3E");
}

.ss-hero > * {
	position: relative;
}

.ss-hero h1,
.ss-hero .ss-lede {
	color: var(--wp--preset--color--background);
}

.ss-hero a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--background);
}

.ss-phone-hero {
	font-size: var(--wp--preset--font-size--phone-hero);
	font-weight: 700;
}

/* ---------- Product cards & fork cards ---------- */

.ss-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.ss-product-card,
.ss-fork__card {
	padding: var(--wp--preset--spacing--30);
}

/* Fork cards: H2 for document outline, H3 visual size. */
.ss-fork__card h2 {
	font-size: var(--wp--preset--font-size--heading-3);
}

.ss-product-card h3 a {
	text-decoration: none;
	color: var(--wp--preset--color--text);
}

.ss-product-card h3 a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.ss-icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background: var(--wp--preset--color--surface-tint);
	color: var(--wp--preset--color--primary);
}

.ss-best-for {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin-block: 0.5rem 0;
}

.ss-from-price {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Steps ---------- */

.ss-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--40);
	counter-reset: ss-step;
}

.ss-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--heading-4);
}

/* ---------- Comparison table (stacks below 768px) ---------- */

.ss-compare {
	overflow-x: auto;
}

.ss-compare__table {
	width: 100%;
	border-collapse: collapse;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
}

.ss-compare__table th,
.ss-compare__table td {
	padding: 0.875rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--border);
	vertical-align: top;
}

.ss-compare__table thead th {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}

.ss-compare__table thead th:nth-child(2) {
	background: var(--wp--preset--color--primary-dark);
}

.ss-compare__table tbody th[scope="row"] {
	font-weight: 700;
	background: var(--wp--preset--color--surface-tint);
}

.ss-compare__stamp {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

@media (max-width: 767.98px) {
	.ss-compare__table thead {
		position: absolute;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		overflow: hidden;
		width: 1px;
		height: 1px;
	}

	.ss-compare__table,
	.ss-compare__table tbody,
	.ss-compare__table tr,
	.ss-compare__table th,
	.ss-compare__table td {
		display: block;
	}

	.ss-compare__table tr {
		border-bottom: 2px solid var(--wp--preset--color--border);
	}

	.ss-compare__table td::before {
		content: attr(data-label);
		display: block;
		font-weight: 700;
		color: var(--wp--preset--color--primary);
	}
}

/* ---------- Testimonial ---------- */

.ss-testimonial {
	padding: var(--wp--preset--spacing--30);
}

.ss-testimonial__quote {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lede);
}

.ss-testimonial__attribution {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- CTA band ---------- */

.ss-cta-band {
	color: var(--wp--preset--color--background);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
	text-align: center;
}

.ss-cta-band__inner {
	max-width: 720px;
	margin-inline: auto;
}

.ss-cta-band h2 {
	color: var(--wp--preset--color--background);
}

.ss-cta-band .wp-block-button {
	display: inline-block;
	margin-block: var(--wp--preset--spacing--30);
}

.ss-cta-band a.ss-cta-band__callback {
	color: var(--wp--preset--color--background);
}

/* ---------- Footer columns ---------- */

.ss-footer {
	position: relative;
}

.ss-footer__inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}

@media (max-width: 1023.98px) {
	.ss-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 599.98px) {
	.ss-footer__inner {
		grid-template-columns: 1fr;
	}
}

.ss-footer__wordmark {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--heading-3);
	margin: 0;
}

.ss-footer__wordmark span {
	color: var(--wp--preset--color--accent);
}

.ss-footer__heading {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	color: var(--wp--preset--color--background);
	margin-block: 0 0.75rem;
}

.ss-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ss-footer__col li {
	margin-block: 0.5rem;
}

.ss-footer__legal {
	border-top: 1px solid rgb(255 255 255 / 0.15);
	padding: 1rem var(--wp--preset--spacing--30);
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	position: relative;
}

.ss-footer__legal p {
	margin: 0;
}

/* ---------- Motion: nothing moves unless the user asks ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}