/*
 * rooster/cta-row (now a variant of the library: BRIEF-2026-11-01-BLOCK-LIBRARY.md) (BRIEF-2026-11-01-LANDINGS-BY-TEMPLATE.md, order 2): the legacy Rooster One landing's button row
 * (themes/om-portal-theme/templates/landing-rooster-one.php, `.r1-ctas`, `.r1-dl`, `.r1-cta-2`, `.r1-cta-3`,
 * `.hero-foot`), complete on its own: the row centred and wrapping, 12 px apart, its buttons stretched to the
 * tallest; each 15 px semibold, 15 px over and 26 px aside, 10 px corners, its icon 10 px before the words, a 1 px
 * lift on hover (none with reduced motion); the download button's gradient and glow, its second line 11 px; the small
 * print 18 px under the row. Colours are the template's own palette as custom tokens (`--wp--custom--rooster-one--*`)
 * with the legacy's light and dark values as fallbacks; the brand blue and the ink are the legacy's in both schemes.
 * Lucide's cloud-download is a mask of this sheet. Compiled by build/blocks-css.mjs.
 */

@import "../../theme.css";

/*
 * The Rooster One template's palette, defined here for this recipe (the legacy's light and dark pairs): nothing
 * reads an undefined custom property. `:where()`: a block's tone (its own sheet) re-maps the brand over it.
 */
:where(.rooster-cta-row) {
	--wp--custom--rooster-one--ink: light-dark(#212222, #eff0f0);
	--wp--custom--rooster-one--ink-2: light-dark(#3d454e, #d1d6db);
	--wp--custom--rooster-one--mute: light-dark(#5b6168, #d3d6d9);
	--wp--custom--rooster-one--line: light-dark(#d5dbe3, rgb(255 255 255 / 12%));
	--wp--custom--rooster-one--surface: light-dark(#ffffff, rgb(255 255 255 / 4%));
	--wp--custom--rooster-one--brand: #1e63ce;
	--wp--custom--rooster-one--brand-deep: #164ea6;
	--wp--custom--rooster-one--panel: #212222;
}

.rooster-cta-row {
	--rooster-cta-row-ink: var(--wp--custom--rooster-one--ink);
	--rooster-cta-row-text: var(--wp--custom--rooster-one--ink-2);
	--rooster-cta-row-mute: var(--wp--custom--rooster-one--mute);
	--rooster-cta-row-line: var(--wp--custom--rooster-one--line);
	--rooster-cta-row-surface: var(--wp--custom--rooster-one--surface);
	--rooster-cta-row-blue: var(--wp--custom--rooster-one--brand);
	--rooster-cta-row-blue-deep: var(--wp--custom--rooster-one--brand-deep);
	--rooster-cta-row-dark: var(--wp--custom--rooster-one--panel);
	--rooster-cta-row-on: var(--wp--preset--color--on-accent, #ffffff);
	box-sizing: border-box;
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	text-align: center;
	overflow-wrap: normal;
	word-break: normal;
}

.rooster-cta-row *,
.rooster-cta-row *::before,
.rooster-cta-row *::after {
	box-sizing: border-box;
}

.rooster-cta-row .rooster-cta-row__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: 12px;
}

.rooster-cta-row--left {
	text-align: left;
}

.rooster-cta-row--left .rooster-cta-row__buttons {
	justify-content: flex-start;
}

.rooster-cta-row .rooster-cta-row__button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 15px 26px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.rooster-cta-row .rooster-cta-row__button:hover {
	transform: translateY(-1px);
}

.rooster-cta-row .rooster-cta-row__button:focus-visible {
	outline: 2px solid var(--rooster-cta-row-blue);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.rooster-cta-row .rooster-cta-row__button {
		transition: none;
	}

	.rooster-cta-row .rooster-cta-row__button:hover {
		transform: none;
	}
}

.rooster-cta-row .rooster-cta-row__button.is-download {
	background: linear-gradient(135deg, var(--rooster-cta-row-blue) 0%, var(--rooster-cta-row-blue-deep) 100%);
	color: #ffffff;
	box-shadow: 0 6px 18px rgb(30 99 206 / 28%);
}

.rooster-cta-row .rooster-cta-row__button.is-download:hover {
	box-shadow: 0 10px 26px rgb(30 99 206 / 38%);
}

.rooster-cta-row .rooster-cta-row__button.is-dark {
	background: var(--rooster-cta-row-dark);
	color: #ffffff;
	box-shadow: inset 0 0 0 1px light-dark(transparent, rgb(255 255 255 / 22%));
}

.rooster-cta-row .rooster-cta-row__button.is-light {
	border: 1px solid var(--rooster-cta-row-line);
	background: var(--rooster-cta-row-surface);
	color: var(--rooster-cta-row-text);
}

.rooster-cta-row .rooster-cta-row__icon {
	display: block;
	flex: none;
	width: 15px;
	height: 15px;
	background-color: currentColor;
}

.rooster-cta-row .is-download .rooster-cta-row__icon {
	width: 20px;
	height: 20px;
}

.rooster-cta-row .rooster-cta-row__icon--cloud-download {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13v8l-4-4'/%3E%3Cpath d='m12 21 4-4'/%3E%3Cpath d='M4.393 15.269A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.436 8.284'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13v8l-4-4'/%3E%3Cpath d='m12 21 4-4'/%3E%3Cpath d='M4.393 15.269A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.436 8.284'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rooster-cta-row .rooster-cta-row__words {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.15;
}

.rooster-cta-row .rooster-cta-row__label {
	display: block;
}

/* The words a screen reader hears after a button that opens a new tab (package E2), out of sight. */
.rooster-cta-row .rooster-cta-row__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.rooster-cta-row .rooster-cta-row__small {
	display: block;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.02em;
	opacity: 0.82;
}

.rooster-cta-row .rooster-cta-row__note {
	margin: 18px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--rooster-cta-row-mute);
}

.rooster-cta-row .rooster-cta-row__note strong {
	font-weight: 600;
	color: var(--rooster-cta-row-ink);
}