/*
 * The library's sheet of the sections (the page agents' gaps, package E1; docs/BLOCK-LIBRARY.md section 4): what a
 * section draws beyond its core blocks' own attributes, registered as `rooster-lib-section` and loaded only on a page
 * that renders such a section (AIEO_Engine_Blocks::section_sheet(), from the section group's or the pill's class); the
 * folder has no block.json: a section is core's group, compiled by Rooster One's page compiler.
 *
 * - A semantic tone on a section (`rooster-section--tone-<tone>`: neutral, success, warning, danger): the accent
 *   presets mapped to the palette's colour, as a family's `is-style-accent-<slug>` maps them to the family's (the
 *   theme's Design::accent_css()). `--rooster-accent` is the tone (the theme's `[class*="is-style-accent-"]` rule reads
 *   it: the heading's accent rule among them); its text shade (the eyebrow) no lighter than OKLCH 0.5 in the light
 *   scheme and no darker than 0.78 in the dark, so it reads 4.5:1 on the page and on the subtle surface (the
 *   warning's text shade is its ink, the palette's warning-ink, theme 1.3.8, made for both); the text on
 *   it white on a dark fill and black on a light one (the fill's OKLCH lightness). The buttons keep the page's accent:
 *   the button tokens derived from the accent are not re-declared.
 * - The pill heading (`heading_style: pill`, `.rooster-section__pill`: the legacy LMS landing's `.lmsl-pill`): as wide
 *   as its words, 44 px tall at the least, 8 px over and 16 px aside, fully rounded. Its fill and its words are the
 *   accent presets' classes on the group (the section's tone, else the page's accent), its icon and heading the
 *   group's flex row 8 px apart.
 * - A button's own icon and the words a screen reader hears after a button that opens a new tab (package E2; loaded
 *   with such a button, AIEO_Engine_Blocks::button()). Compiled by build/blocks-css.mjs.
 */

@import "../theme.css";

.rooster-section--tone-success {
	--rooster-tone: var(--wp--preset--color--success, light-dark(#15803d, #4ade80));
	--rooster-tone-text: light-dark(oklch(from var(--rooster-tone) min(l, 0.5) c h), oklch(from var(--rooster-tone) max(l, 0.78) c h));
}

/* The warning's text shade is its ink (the palette's warning-ink, theme 1.3.8: 4.5:1 on the page and on subtle). */
.rooster-section--tone-warning {
	--rooster-tone: var(--wp--preset--color--warning, light-dark(#b45309, #fbbf24));
	--rooster-tone-text: var(--wp--preset--color--warning-ink, light-dark(#896610, #fbbf24));
}

.rooster-section--tone-danger {
	--rooster-tone: var(--wp--preset--color--danger, light-dark(#b91c1c, #f87171));
	--rooster-tone-text: light-dark(oklch(from var(--rooster-tone) min(l, 0.5) c h), oklch(from var(--rooster-tone) max(l, 0.78) c h));
}

.rooster-section--tone-neutral {
	--rooster-tone: var(--wp--preset--color--muted, light-dark(#525252, #a3a3a3));
	--rooster-tone-text: light-dark(oklch(from var(--rooster-tone) min(l, 0.5) c h), oklch(from var(--rooster-tone) max(l, 0.78) c h));
}

:is(.rooster-section--tone-success, .rooster-section--tone-warning, .rooster-section--tone-danger, .rooster-section--tone-neutral) {
	--rooster-accent: var(--rooster-tone);
	--rooster-accent-text: var(--rooster-tone-text);
	--rooster-accent-on: oklch(from var(--rooster-tone) clamp(0, (0.62 - l) * 1000, 1) 0 0);
	--wp--preset--color--accent: var(--rooster-accent);
	--wp--preset--color--accent-text: var(--rooster-accent-text);
	--wp--preset--color--on-accent: var(--rooster-accent-on);
}

/*
 * The words on the fill: black or white, whichever reads better on it (the fill's relative luminance against 0.1791,
 * where both read alike), so the pill reads 4.5:1 or more on any accent of either scheme (the theme's on-accent is
 * the family's button text: #1a1a1a on the LMS green reads 4.27).
 */
.rooster-section__pill {
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	min-height: 44px;
	padding: 8px 16px;
	border-radius: 999px;
	color: color(from var(--wp--preset--color--accent) xyz-d65 calc(clamp(0, (0.1791 - y) * 1000, 1) * 0.9505) calc(clamp(0, (0.1791 - y) * 1000, 1)) calc(clamp(0, (0.1791 - y) * 1000, 1) * 1.089));
}

.rooster-section__pill > .wp-block-heading {
	color: inherit;
}

/*
 * A button's own icon (`rooster-button-icon-<slug>` on core's button, the page agents' gaps package E2: the legacy
 * LANSA landing's "Request a quote" and "Read the manual"): the theme's mask before the words, 8 px apart, 1.125 em
 * square, in the words' colour (AIEO_Engine_Blocks::button() draws it), as the theme's Arrow style lays its arrow out.
 */
[class*="rooster-button-icon-"] > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.wp-block-button__link > .rooster-button__icon {
	width: 1.125em;
	height: 1.125em;
}

/*
 * A centred landing hero (`align: center`, package E2: the legacy LANSA hero): its chips and its family crumb (the
 * theme's flex rows, which a paragraph's or a list's alignment does not move) centred as its words are.
 */
.rooster-hero--center :is(.wp-block-list.is-style-chips, .rooster-crumb) {
	justify-content: center;
}

/*
 * The hero panel's aside (package E2: the legacy LMS hero's `.lmsl-cta2`): its rule across the panel's width (the
 * panel is core's vertical flex, whose items keep their own width; core has no attribute for one item's stretch).
 */
.rooster-hero__panel > .rooster-hero__aside {
	align-self: stretch;
}

/*
 * A head's notice at the start of its lede (`notice_place: lede`, the page agents' gaps, package F: the legacy LMS
 * landing's "Coming soon" before the Enterprise lede, `.lmsl-soon`): the comparison's soon pill, 12 px bold words in the
 * warning's ink (warning-ink, no lighter than OKLCH 0.45 on its tint in the light scheme) on the warning's 16 % tint.
 */
.rooster-notice-pill {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background-color: rgb(from var(--wp--preset--color--warning) r g b / 16%);
	color: light-dark(oklch(from var(--wp--preset--color--warning-ink, #896610) min(l, 0.45) c h), var(--wp--preset--color--warning-ink, #fbbf24));
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}

/*
 * A button's note as its second line, inside it (`note` on a button under the theme's display, the page agents' gaps,
 * package F: the legacy LANSA quote button's small line, as the Rooster One display's row draws it): the words over the
 * note in a column at the start, on a 1.15 leading; the note 11 px, 500, a little tracking (the legacy's), in the words'
 * own colour (the legacy's 82 % opacity is left out: an 11 px line keeps 4.5:1 on every accent).
 */
.wp-block-button__link > .rooster-button__words {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.15;
	text-align: start;
}

.rooster-button__words > .rooster-button__note {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* The words a screen reader hears after a button that opens a new tab: "(opens in a new tab)", out of sight. */
.wp-block-button__link > .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}