/*
 * Partners — the page sheet.
 *
 * Loads on top of pages.css when the template is page-partners-ds.php. Nearly all of the
 * page is one component repeated 61 times, so this sheet is mostly about that component
 * and the field it sits in.
 *
 * ── THE GRID IS A WINDOW CUT OUT OF THE RULED COLUMN ────────────────────────
 *
 * Every section here is .fc-section.fc-ruled, which pads itself to gutter + 40 so its copy
 * clears the two verticals the ruled column draws AT the gutter. The card rows then bleed
 * back out by exactly that 40 — .fc-fliprow below — so the grid's own outer lines land on
 * those verticals and the whole thing reads as one continuous field with the headings
 * inset from it. That is the design's entire idea for this page, and it is two negative
 * margins.
 *
 * The number appears twice, here and in layout.css, and they have to agree: when the
 * ruled inset halves to 20 at 820, the bleed halves with it. There is no way to say
 * "cancel my parent's padding" in CSS, so the pairing is stated instead.
 *
 * ── THE RULES ARE ONE OVERLAY, NOT A BORDER PER CARD ────────────────────────
 *
 * A card's front face is an opaque tile, and the design's grid is on a translucent
 * hairline. A border on the card would be painted over by the tile above it, so every rule
 * on the field — rows and columns both — is drawn on one absolutely-positioned element
 * above the grid, carrying three gradient layers: .fc-fliprow__rules. The row layer repeats
 * at the card height, which is why that height is a custom property the section sets once
 * (--fc-flip-h) rather than a number written in two places that could drift.
 *
 * The columns are there for a second reason, which the region filter found: the rules have
 * to describe the GRID and not the cards in it, or an emptied row takes the field's right
 * edge away with it. The note on .fc-fliprow__rules has that story.
 *
 * ── THE TWO GRID SHAPES ─────────────────────────────────────────────────────
 *
 * Six-up stepping 6 → 4 → 3 → 2, and the cloud section's pair stepping 2 → 1. Both come
 * off --fc-flip-cols, declared on the SECTION and stepped down by container queries.
 * Declared on the section and not inline in the markup, because an inline custom property
 * would beat every container query trying to step it down — the cascade has no answer to
 * a style attribute. So the markup names a shape and this sheet owns the numbers.
 *
 * Source order carries the pair: .fc-partners-sec--pair ties with .fc-partners-sec on
 * specificity, so it is written AFTER the step-downs and wins them all.
 *
 * ── THE FLIP NEEDS NO SCRIPT, AND MUST NOT TRAP A KEYBOARD ──────────────────
 *
 * :hover and :focus-within, together, always. The back face holds the card's only link,
 * and rotating on hover alone would leave that link focusable while it is turned away from
 * the viewer — reachable by tab, invisible on screen, which is worse than no link at all.
 * The pair of selectors is the accessibility fix, not a nicety.
 *
 * prefers-reduced-motion is already handled globally in tokens.css, which zeroes every
 * transition under body.fc-ds. The flip becomes instant rather than absent, which is the
 * correct reading: the rotation carries content, so it cannot simply be switched off.
 */

/*
 * THE PHOTO GALLERY IS NOT IN THIS FILE ANY MORE.
 *
 * The band of event photography that opens this page moved to THE PHOTO GALLERY in
 * assets/ds/layout.css on 2026-08-27, when the Customers page became its second caller and
 * asked for "the same style as the partners page, with the photos". Two callers make it a
 * component, which is the same bargain the head of this file makes about .fc-flip.
 *
 * One class changed in the move and it is the only one that could: the section was
 * .fc-partners-gallery-sec and is now .fc-gallery-sec. Everything inside it — .fc-gallery,
 * __track, __cell, __img, __word, __cursor — was already named as though it were shared, and
 * is unchanged. So is fluent_commerce_ds_partners_gallery_markup(), which is now a list of
 * seven frames handed to fluent_commerce_ds_gallery_markup() in inc/ds-blocks.php.
 *
 * If this page's gallery is a heap of photographs on the centre line, the environment is
 * serving post_content seeded before that date: run
 * fluent_commerce_ds_partners_resync( true ).
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * THE LEAD
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-partners-lead-sec {
	background: var(--fc-bone);
}

/*
 * align-items: end is the composition, not a detail. The headline is three lines of
 * 62px display and the paragraph is four of body; sitting them on a shared bottom edge
 * is what makes the pair read as one block instead of a heading with a note beside it.
 */
body.fc-ds .fc-partners-lead {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--sp-72);
	align-items: end;
}

body.fc-ds .fc-partners-lead__title {
	margin: 0;
}

body.fc-ds .fc-partners-lead__copy {
	max-width: 46ch;
}

body.fc-ds .fc-partners-lead__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-16);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * A PARTNER SECTION
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-partners-sec {
	--fc-flip-cols: 6;
	--fc-flip-lines: 6;
	background: var(--fc-bone);
	/* The section's own top hairline. --fc-rule flips to bone under .fc-ruled--dark. */
	border-top: var(--stroke-1) solid var(--fc-rule);
	/* "Find one" jumps to #solution, and the nav is fixed over the top of it. */
	scroll-margin-top: var(--nav-height);
}

body.fc-ds .fc-partners-sec--dark {
	background: var(--fc-ink-12);
}

body.fc-ds .fc-partners-sec__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

body.fc-ds .fc-partners-sec__title {
	margin: 0;
}

/* The display roles in layout.css set no colour, so a dark section has to say. */
body.fc-ds .fc-partners-sec--dark .fc-partners-sec__title {
	color: var(--text-on-dark);
}

body.fc-ds .fc-partners-sec__blurb {
	margin: var(--sp-24) 0 0;
	/*
	 * Half the measure, so the blurb reads as a caption under the heading rather than a
	 * paragraph of body copy. It goes full width once the grid is down to three columns —
	 * at that point half the column is about 30 characters.
	 */
	max-width: 50%;
}

/* The filter's dead end. Revealed by partners.js and by nothing else. */
body.fc-ds .fc-partners-sec__empty {
	margin: var(--sp-54) 0 0;
	max-width: 46ch;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE REGION FILTER
 * A native select and a native label. inc/ds-partners.php ships it with `hidden` on
 * it and partners.js removes that, so with no script there is no dead control.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-partners-filter {
	display: flex;
	align-items: center;
	gap: var(--sp-16);
}

/* After the rule above, so the attribute wins on source order rather than specificity. */
body.fc-ds .fc-partners-filter[hidden] {
	display: none;
}

/*
 * Label and control at the same size, which is the standing rule for this site's form
 * controls: --fc-field-size, and any visible label beside one matches it.
 */
body.fc-ds .fc-partners-filter__label {
	font-size: var(--fc-field-size);
	font-weight: var(--fw-semibold);
	color: var(--text-on-light);
	white-space: nowrap;
}

body.fc-ds .fc-partners-filter__field {
	position: relative;
	display: inline-flex;
}

body.fc-ds .fc-partners-filter__select {
	appearance: none;
	height: 44px;
	/* Right padding clears the chevron, which is 11px wide sitting 18px in. */
	padding: 0 46px 0 20px;
	border: var(--stroke-1) solid var(--fc-rule);
	border-radius: 200px;
	background: transparent;
	font-family: var(--font-core);
	font-size: var(--fc-field-size);
	font-weight: var(--fw-medium);
	color: var(--text-on-light);
	cursor: pointer;
	transition: border-color var(--dur-base) var(--ease-out);
}

body.fc-ds .fc-partners-filter__select:hover {
	border-color: var(--fc-ink-12);
}

/*
 * The dropdown itself is drawn by the platform and inherits almost nothing, so the two
 * colours it does take are stated. Without them a dark-mode OS paints white-on-white.
 */
body.fc-ds .fc-partners-filter__select option {
	background: var(--fc-white);
	color: var(--fc-ink-12);
}

body.fc-ds .fc-partners-filter__chevron {
	position: absolute;
	top: 50%;
	right: 18px;
	transform: translateY(-50%);
	color: var(--text-on-light);
	pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * A TIER
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-partners-tier {
	margin-top: var(--sp-72);
	display: flex;
	flex-direction: column;
	gap: var(--sp-24);
}

/* partners.js hides a tier the filter has emptied. Same source-order note as above. */
body.fc-ds .fc-partners-tier[hidden] {
	display: none;
}

body.fc-ds .fc-partners-tier__head {
	display: flex;
	align-items: baseline;
	gap: var(--sp-16);
}

body.fc-ds .fc-partners-tier__label {
	font-size: var(--type-body-16);
	font-weight: var(--fw-semibold);
	color: var(--text-on-light);
}

body.fc-ds .fc-partners-sec--dark .fc-partners-tier__label {
	color: var(--text-on-dark);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE ROW
 * See THE GRID IS A WINDOW at the head of this sheet for the two margins.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-fliprow {
	position: relative;
	margin-left: -40px;
	margin-right: -40px;
	border-top: var(--stroke-1) solid var(--fc-rule);
	border-bottom: var(--stroke-1) solid var(--fc-rule);
}

/*
 * z-index above the grid so an opaque logo tile cannot paint over the rules, and
 * pointer-events none so it cannot eat the hover that flips the card underneath it.
 *
 * BOTH sets of rules are drawn here, and the columns are here for a second reason on top of
 * the opaque-tile one at the head of this sheet: the field has to stay a closed rectangle
 * when the region filter empties part of it. Drawn as a border on each card, the right-hand
 * edge of the field existed only when the last row happened to be exactly full — filter to
 * MEA, get three cards in a six-wide row, and the field ran off into nothing. Drawn here,
 * the rules describe the grid rather than the cards in it, so how many are showing cannot
 * take an edge away.
 */
body.fc-ds .fc-fliprow__rules {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-image:
		/* The rows: a line every card-height, which is why that height is a property. */
		repeating-linear-gradient(
			to bottom,
			var(--fc-rule) 0 var(--stroke-1),
			transparent var(--stroke-1) var(--fc-flip-h)
		),
		/*
		 * The columns: a line at the END of every column, so the last one drawn IS the field's
		 * right edge and lands exactly where the last card's border used to.
		 */
		repeating-linear-gradient(
			to right,
			transparent 0 calc(100% / var(--fc-flip-cols) - var(--stroke-1)),
			var(--fc-rule) calc(100% / var(--fc-flip-cols) - var(--stroke-1))
				calc(100% / var(--fc-flip-cols))
		),
		/* And the left edge, which no column-end can draw. */
		linear-gradient( to right, var(--fc-rule) 0 var(--stroke-1), transparent var(--stroke-1) );
}

/*
 * No border-left here and none on the card: every vertical is in the overlay above, so the
 * grid's own width divides by --fc-flip-cols cleanly and the lines land on the track edges.
 */
body.fc-ds .fc-flipgrid {
	display: grid;
	grid-template-columns: repeat(var(--fc-flip-cols), minmax(0, 1fr));
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE CARD
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-flip {
	/* Named because the face swap below has to land at exactly half of it. */
	--fc-flip-dur: 420ms;
	height: var(--fc-flip-h, 240px);
	perspective: 1200px;
}

/* partners.js hides a card the filter has excluded. */
body.fc-ds .fc-flip[hidden] {
	display: none;
}

body.fc-ds .fc-flip__inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform var(--fc-flip-dur) var(--ease-out);
}

/*
 * :focus-within is not optional here — see THE FLIP NEEDS NO SCRIPT at the head of this
 * sheet. Without it the link on the back face is tabbable while facing away.
 */
body.fc-ds .fc-flip:hover .fc-flip__inner,
body.fc-ds .fc-flip:focus-within .fc-flip__inner {
	transform: rotateY(180deg);
}

body.fc-ds .fc-flip__face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/*
 * BACKFACE-VISIBILITY IS NOT ENOUGH ON ITS OWN — FIREFOX PAINTS THE FRONT FACE ANYWAY.
 *
 * The back face carries its own rotateY(180deg), so Firefox honours backface-visibility on
 * it and it stays hidden at rest. The front face has no transform of its own — its 180deg
 * is inherited from the rotating parent — and Firefox keeps painting it, mirrored, while it
 * faces away. Chrome and Safari hide it, which is why this only ever showed up in Firefox.
 *
 * It went unnoticed for 59 of the 61 cards because their back face is an opaque white tile
 * that paints over the turned-away front. The cloud pair is the exception: it is the page's
 * one dark section, where the back face is rgb(242 241 237 / 6%) — 94% transparent — so the
 * mirrored AWS wordmark reads straight through the blurb sitting on top of it. The GCP mark
 * is a symmetrical cloud glyph, so mirroring it looks like nothing happened.
 *
 * Rather than trust a property one engine applies differently, the away-facing face is taken
 * out of the paint by the same selectors that rotate the card. backface-visibility stays: it
 * does this correctly and continuously wherever it works, and this is the floor under it.
 *
 * opacity and not visibility, because visibility: hidden takes the back face's link out of
 * the tab order, and :focus-within — the keyboard's only way into this card — would then
 * never fire. See THE FLIP NEEDS NO SCRIPT at the head of this sheet.
 *
 * The swap is a hard step at half the rotation, where the card is edge-on and neither face
 * has any width to see, so there is nothing to notice. It is on the face rather than on a
 * state so that it runs both ways, and it is gated on (hover: hover) as the exact complement
 * of the NO POINTER, NO FLIP block below — where both faces are in normal flow and neither
 * is hiding behind anything.
 */
@media (hover: hover) {
	body.fc-ds .fc-flip__face {
		transition: opacity 0s linear calc(var(--fc-flip-dur) / 2);
	}

	body.fc-ds .fc-flip__back {
		opacity: 0;
	}

	body.fc-ds .fc-flip:hover .fc-flip__front,
	body.fc-ds .fc-flip:focus-within .fc-flip__front {
		opacity: 0;
	}

	body.fc-ds .fc-flip:hover .fc-flip__back,
	body.fc-ds .fc-flip:focus-within .fc-flip__back {
		opacity: 1;
	}

	/*
	 * tokens.css zeroes transition-duration under reduced motion but says nothing about
	 * delay, and a delay on its own would hold both faces on screen for 210ms after an
	 * otherwise instant rotation. The flip is instant, so the swap is too.
	 */
	@media (prefers-reduced-motion: reduce) {
		body.fc-ds .fc-flip__face {
			transition-delay: 0s;
		}
	}
}

body.fc-ds .fc-flip__front {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-32) var(--sp-24);
	background: var(--fc-white);
}

/*
 * On ink the tile is the section's own surface, so the front face reads as the grid
 * itself with a logo in it rather than as a card sitting on top of one.
 */
body.fc-ds .fc-partners-sec--dark .fc-flip__front {
	background: var(--fc-ink-12);
}

/*
 * A FIXED box with object-fit, not the logo's intrinsic size. 61 logos arrive at 61
 * aspect ratios and 61 pixel widths, and left to themselves a small file would draw small
 * and a large one would draw large for no reason a reader could see. One box and contain
 * gives every logo the same optical weight; the sources are pre-trimmed of transparent
 * margin so that promise actually holds.
 */
body.fc-ds .fc-flip__logo {
	/*
	 * Height is the design's number; width is given more room than it. The design drew a
	 * square box, which is right for a square mark and wrong for the two thirds of this
	 * list that are wordmarks: a 5:1 wordmark constrained by a square box draws a fifth of
	 * the height the square mark beside it does. Widening only the width fixes the
	 * wordmarks and leaves every square mark exactly where the design put it.
	 */
	width: 82%;
	height: var(--fc-flip-scale, 70%);
	object-fit: contain;
	object-position: center;
}

/* The fallback when there is no file on disk: the name, set as the logo would be. */
body.fc-ds .fc-flip__name {
	font-size: var(--type-body-16);
	font-weight: var(--fw-semibold);
	color: var(--text-on-light);
	text-align: center;
}

body.fc-ds .fc-flip__back {
	transform: rotateY(180deg);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--sp-16);
	padding: var(--sp-24);
	background: var(--fc-white);
}

body.fc-ds .fc-partners-sec--dark .fc-flip__back {
	background: rgb(242 241 237 / 6%);
}

/*
 * The clamp is the honest answer to real copy in a fixed tile. The blurbs are the live
 * site's own and run from 28 to 311 characters; the card is sized for the middle of that
 * range, so the long tail is cut at a line boundary rather than allowed to spill over the
 * link below it. --fc-flip-lines is what the taller cloud cards raise.
 */
body.fc-ds .fc-flip__note {
	margin: 0;
	font-weight: var(--fw-medium);
	line-height: 1.45;
	color: var(--text-on-light);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--fc-flip-lines, 6);
	overflow: hidden;
}

body.fc-ds .fc-partners-sec--dark .fc-flip__note {
	color: var(--text-on-dark);
}

/* position: relative because .fc-sr inside it is absolute with no offsets. */
body.fc-ds .fc-flip__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: var(--sp-8);
	font-size: var(--type-mono-14);
	font-weight: var(--fw-semibold);
	color: var(--text-on-light);
	text-decoration: none;
	transition: color var(--dur-base) var(--ease-out);
}

body.fc-ds .fc-partners-sec--dark .fc-flip__link {
	color: var(--text-on-dark);
}

body.fc-ds .fc-flip__link:hover {
	color: var(--fc-violet);
}

body.fc-ds .fc-partners-sec--dark .fc-flip__link:hover {
	color: var(--fc-violet-bright);
}

body.fc-ds .fc-flip__arrow {
	flex: none;
	transition: transform var(--dur-base) var(--ease-out);
}

body.fc-ds .fc-flip__link:hover .fc-flip__arrow {
	transform: translate(2px, -2px);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE STEP-DOWNS
 * 6 → 4 → 3 → 2, and the pair AFTER them so it survives all three.
 * ────────────────────────────────────────────────────────────────────────── */
@container page (max-width: 1400px) {
	body.fc-ds .fc-partners-sec {
		--fc-flip-cols: 4;
	}
}

@container page (max-width: 1100px) {
	body.fc-ds .fc-partners-lead {
		grid-template-columns: 1fr;
		gap: var(--sp-32);
		align-items: start;
	}

	body.fc-ds .fc-partners-lead__copy {
		max-width: none;
	}

	body.fc-ds .fc-partners-sec__blurb {
		max-width: none;
	}
}

@container page (max-width: 1000px) {
	body.fc-ds .fc-partners-sec {
		--fc-flip-cols: 3;
	}
}

@container page (max-width: 820px) {
	/* Follows layout.css halving the ruled inset to 20 at this same width. */
	body.fc-ds .fc-fliprow {
		margin-left: -20px;
		margin-right: -20px;
	}

	/*
	 * The head row stops being a row: a 62px display heading and a 44px pill will not
	 * share a line here, and the wrap they would do leaves the select stranded right.
	 */
	body.fc-ds .fc-partners-sec__head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sp-24);
	}

	body.fc-ds .fc-partners-tier {
		margin-top: var(--sp-54);
	}
}

@container page (max-width: 700px) {
	body.fc-ds .fc-partners-sec {
		--fc-flip-cols: 2;
	}

	/* Two-up on a phone leaves about 150px of card, so the tile padding comes in. */
	body.fc-ds .fc-flip__front {
		padding: var(--sp-24) var(--sp-16);
	}

	body.fc-ds .fc-flip__back {
		padding: var(--sp-16);
		gap: var(--sp-8);
	}
}

@container page (max-width: 440px) {
	body.fc-ds .fc-partners-filter {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sp-8);
	}

	body.fc-ds .fc-partners-filter__field,
	body.fc-ds .fc-partners-filter__select {
		width: 100%;
	}
}

/*
 * THE PAIR — the cloud section. Last, so it wins every step-down above on source order.
 * Two 320px cards hold blurbs three times the length of the rest, hence the raised clamp.
 */
body.fc-ds .fc-partners-sec--pair {
	--fc-flip-cols: 2;
	--fc-flip-lines: 9;
}

@container page (max-width: 700px) {
	body.fc-ds .fc-partners-sec--pair {
		--fc-flip-cols: 1;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
 * NO POINTER, NO FLIP
 *
 * A finger cannot hover, so on a touch device the rotation would never happen and 61
 * blurbs and 61 outbound links would be on the page and unreachable. The design has no
 * answer for this — it is a desktop prototype, and the live site's answer is a modal this
 * page does not have.
 *
 * So the card stops being a card and becomes what it always was underneath: a logo tile
 * with a blurb and a link below it. Both faces come out of their 3D stack and into normal
 * flow, the clamp comes off because nothing is constraining the height any more, and the
 * row overlay is replaced by a border on each card — the gradient repeats at a fixed card
 * height, and these cards no longer have one.
 *
 * It makes the page long. That is the honest cost of a 61-partner directory on a phone,
 * and it is a better cost than content nobody can get at. Nothing here needs a script.
 * ────────────────────────────────────────────────────────────────────────── */
@media (hover: none) {
	body.fc-ds .fc-flip {
		/* The tile keeps a fixed height; the card as a whole grows with its blurb. */
		--fc-flip-h: 132px;
		height: auto;
		perspective: none;
		border-bottom: var(--stroke-1) solid var(--fc-rule);
	}

	body.fc-ds .fc-flip__inner {
		height: auto;
		transform: none !important;
		transform-style: flat;
		transition: none;
	}

	body.fc-ds .fc-flip__face {
		position: static;
		backface-visibility: visible;
		-webkit-backface-visibility: visible;
		transform: none;
	}

	body.fc-ds .fc-flip__front {
		height: var(--fc-flip-h);
		padding: var(--sp-24) var(--sp-16);
	}

	body.fc-ds .fc-flip__back {
		/* No longer a face behind another one, so it takes the section's own surface. */
		background: transparent;
		justify-content: flex-start;
		padding: 0 var(--sp-16) var(--sp-24);
	}

	body.fc-ds .fc-partners-sec--dark .fc-flip__back {
		background: transparent;
	}

	/* Nothing is constraining the height now, so nothing has to be cut. */
	body.fc-ds .fc-flip__note {
		display: block;
		-webkit-line-clamp: none;
	}

	/*
	 * The overlay stays, minus its row layer: the cards no longer share a height, so a
	 * gradient repeating at one is wrong, and each card's own border-bottom draws that line
	 * instead. The two column layers are unchanged and still close the field.
	 */
	body.fc-ds .fc-fliprow__rules {
		background-image:
			repeating-linear-gradient(
				to right,
				transparent 0 calc(100% / var(--fc-flip-cols) - var(--stroke-1)),
				var(--fc-rule) calc(100% / var(--fc-flip-cols) - var(--stroke-1))
					calc(100% / var(--fc-flip-cols))
			),
			linear-gradient( to right, var(--fc-rule) 0 var(--stroke-1), transparent var(--stroke-1) );
	}

	/* A tap target, not a hover target: 44px of it, and the underline says it is a link. */
	body.fc-ds .fc-flip__link {
		min-height: 44px;
		align-items: flex-end;
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 3px;
	}
}