/*
 * rooster/mega-menu (the mega-menu brief of 31 Oct 2026, package 4; the parity brief, package 6): the top-level
 * links in the header's row, each panel opener with its chevron, the open one on a soft pill, the page's own family in
 * its ink; the panel (one node, filled on intent) as one boxed, translucent card on the header row's edges under the
 * header's line: the family's card in its wash (the illustration, the name, the tagline, the call to action as a text
 * link with an arrow), then the columns under plain upper-case heads, each entry one link of two lines; the phone
 * dialog with its accordions. Compiled by build/blocks-css.mjs to style.css, loaded with the block only. The panel
 * takes no room until it opens (first paint is the final paint).
 *
 * Complete on its own (the owner's rule of 31 Oct 2026: since WordPress 7 every block carries its own sheet): the
 * whole look is in this sheet, nothing in the theme's header CSS or another block's sheet. Every token has its
 * fallback (below, the namespaces this recipe compiles with; in the plain rules, each var()'s second argument: the
 * system colours Canvas / CanvasText / LinkText, the legacy's sizes), and the block's own four drawings (the chevron,
 * the arrow, the menu and the close icon: Lucide's, the theme's files) are masks of this sheet. An entry's own icon
 * (`roosterIcon`) is the theme's icon set (contract C11, rooster_icon()), drawn only where the theme is.
 *
 * The geometry is the legacy header's, measured on the Local clone at 1440 px (the owner's binding of 31 Oct 2026:
 * every box within 2 px): the panel padded 20 px, four equal tracks 24 px apart (the card one, the columns three), the
 * card padded 20 px with an 80 px illustration, the name 18/28, the tagline 14/22.75, the heads 12/16, a product row
 * 8 + 20 + 2 + 17.875 + 8 px, a plain row 6 + 20 + 6 px, the rows 2 px apart, the top level 40 px high with 6 px
 * aside. Where the theme's scale has no step for one of those (20, 13, 11, 6, 2 px), the value is the legacy's.
 *
 * The family's ink (the call to action, the badges, the open and the current entry): the accent's text shade mixed one
 * part in five toward the foreground, so it keeps 4.5:1 on the family's wash and on the pill in both schemes (the
 * theme's text shade is measured on the page colour alone; Rooster Zero's orange and Rooster LMS's green fell to 4.0
 * and 4.3 on their washes). The soft foreground (the plain rows, the tagline, the top level): the foreground one part
 * in five toward the page colour, the legacy's slate-700 / slate-300.
 */

@import "../theme.css";

/* The namespaces with their fallbacks: this block renders complete on a theme without Rooster Zero's presets. */
@theme inline {
	--color-bg: var(--wp--preset--color--bg, Canvas);
	--color-fg: var(--wp--preset--color--fg, CanvasText);
	--color-muted: var(--wp--preset--color--muted, color-mix(in srgb, CanvasText 62%, Canvas));
	--color-subtle: var(--wp--preset--color--subtle, color-mix(in srgb, CanvasText 7%, Canvas));
	--color-line: var(--wp--preset--color--line, color-mix(in srgb, CanvasText 16%, Canvas));
	--color-accent: var(--wp--preset--color--accent, LinkText);
	--color-accent-text: var(--wp--preset--color--accent-text, var(--wp--preset--color--accent, LinkText));
	--color-contrast: var(--wp--preset--color--contrast, CanvasText);
	--spacing-s1: var(--wp--preset--spacing--1, 0.25rem);
	--spacing-s2: var(--wp--preset--spacing--2, 0.5rem);
	--spacing-s3: var(--wp--preset--spacing--3, 0.75rem);
	--spacing-s4: var(--wp--preset--spacing--4, 1rem);
	--spacing-s5: var(--wp--preset--spacing--5, 1.5rem);
	--spacing-s6: var(--wp--preset--spacing--6, 2rem);
	--text-xs: var(--wp--preset--font-size--xs, 0.75rem);
	--text-sm: var(--wp--preset--font-size--sm, 0.875rem);
	--text-md: var(--wp--preset--font-size--md, 1rem);
	--text-lg: var(--wp--preset--font-size--lg, 1.125rem);
	--radius-chip: var(--wp--custom--rooster--shape--chip, 999px);
	--radius-button: var(--wp--custom--rooster--shape--button, 8px);
	--radius-media: var(--wp--custom--rooster--shape--media, 8px);
}

/* ---------- the block's tokens ---------- */

/* Its boxes measure their borders and padding in, whatever the theme's reset says (the panel's width is the row's). */
.rooster-mega,
.rooster-mega *,
.rooster-mega *::before,
.rooster-mega *::after {
	box-sizing: border-box;
}

.rooster-mega {
	position: relative;
	--rooster-mega-soft: color-mix(in srgb, var(--wp--preset--color--fg, CanvasText) 80%, var(--wp--preset--color--bg, Canvas));
	--rooster-mega-radius: var(--wp--custom--rooster--shape--panel, 16px);
	/* The panel's distance under the header's line: the spacing step and 10 px, 18 px (the owner, 3 Nov 2026: "Add 15
	   more pixels in the gap", then "reduce it by say 5 px"; 8 px before). The bridge over it keeps the pointer inside
	   the menu. */
	--rooster-mega-gap: calc(var(--wp--preset--spacing--2, 0.5rem) + 10px);
	--rooster-mega-ring: var(--wp--custom--rooster--focus-ring, 0 0 0 3px color-mix(in srgb, LinkText 35%, transparent));
}

/* The family's ink, computed where it is used (an accent class re-maps the accent presets on its subtree). */
.rooster-mega__top.is-current > .rooster-mega__link,
.rooster-mega__cta,
.rooster-mega__art,
.rooster-mega__badge,
.rooster-mega__entry.has-desc:hover .rooster-mega__label,
.rooster-mega__drawer-docs {
	color: color-mix(in srgb, var(--wp--preset--color--accent-text, var(--wp--preset--color--accent, LinkText)) 80%, var(--wp--preset--color--fg, CanvasText));
}

/* The block's own drawings: Lucide's chevron-down, arrow-right, menu, x, compass and shopping-bag as masks in the text
   colour (the theme's files). */
.rooster-mega__chevron,
.rooster-mega__cta-icon,
.rooster-mega__toggle-icon,
.rooster-mega__close-icon,
.rooster-mega__find-icon,
.rooster-mega__bag-icon {
	display: inline-block;
	flex: none;
	width: 1rem;
	height: 1rem;
	background-color: currentColor;
	-webkit-mask: var(--rooster-mega-icon) center / contain no-repeat;
	mask: var(--rooster-mega-icon) center / contain no-repeat;
}

.rooster-mega__chevron {
	--rooster-mega-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9L12 15L18 9'/%3E%3C/svg%3E");
}

.rooster-mega__cta-icon {
	--rooster-mega-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12L19 12'/%3E%3Cpath d='M12 5L19 12L12 19'/%3E%3C/svg%3E");
}

.rooster-mega__toggle-icon {
	--rooster-mega-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 18h16'/%3E%3C/svg%3E");
	width: 1.5rem;
	height: 1.5rem;
}

.rooster-mega__close-icon {
	--rooster-mega-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
	width: 1.25rem;
	height: 1.25rem;
}

.rooster-mega__find-icon {
	--rooster-mega-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z'/%3E%3Cpath d='M22 12a10 10 0 1 1-20 0a10 10 0 1 1 20 0'/%3E%3C/svg%3E");
}

.rooster-mega__bag-icon {
	--rooster-mega-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3Cpath d='M3.103 6.034h17.794'/%3E%3Cpath d='M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z'/%3E%3C/svg%3E");
	width: 1.25rem;
	height: 1.25rem;
}

:dir(rtl) .rooster-mega__cta-icon {
	transform: scaleX(-1);
}

/* ---------- the top level ---------- */

.rooster-mega__list {
	@apply m-0 p-0 list-none flex flex-wrap items-center;
	gap: 0.125rem;
}

/* An entry of the top level (the legacy's: 40 px high, 6 px aside, the label and the chevron 4 px apart). */
.rooster-mega__link {
	@apply inline-flex items-center gap-s1 text-sm rounded-button;
	min-height: 2.5rem;
	padding-inline: 0.375rem;
	font-weight: 500;
	line-height: 1.25rem;
	color: var(--rooster-mega-soft);
	text-decoration: none;
	white-space: nowrap;
}

/* An entry that starts a group: the legacy's thin rule before it, 20 px high, 6 px either side (with the list's gap). */
.rooster-mega__top.has-separator {
	@apply flex items-center;
}

.rooster-mega__top.has-separator::before {
	content: "";
	flex: none;
	width: 1px;
	height: 1.25rem;
	margin-inline: 0.25rem 0.375rem;
	background-color: color-mix(in srgb, var(--wp--preset--color--fg, CanvasText) 20%, transparent);
}

/*
 * A short header row: the entries tighten instead of wrapping to a second line (the header grew from 65 to 99 px from
 * 1200 px down; the owner's approval of 3 Nov 2026). Rooster Zero 1.3.22 makes the computer header's group the
 * container `rooster-header` and folds its labelled actions to icons below 72rem; under 66rem of row (the 1100 px
 * window's 1020 px, 0.8 px short) the entries keep 4 px aside, under 60rem (the 1024 px window's 944 px, 63 px short)
 * 2 px with the gaps closed up: 96 px saved, so the row stays one 65 px line from 1024 px up. In rem, so larger text
 * folds earlier. Without that container (another theme) nothing changes; the list still wraps as a last resort rather
 * than run under the actions.
 */
@container rooster-header (width < 66rem) {
	.rooster-mega__link {
		padding-inline: 0.25rem;
	}
}

@container rooster-header (width < 60rem) {
	.rooster-mega__list {
		gap: 0;
	}

	.rooster-mega__link {
		gap: 0.125rem;
		padding-inline: 0.125rem;
	}

	.rooster-mega__top.has-separator::before {
		margin-inline: 0.125rem 0.25rem;
	}
}

.rooster-mega__link:hover,
.rooster-mega__link[aria-expanded="true"] {
	@apply text-fg;
	background: light-dark(color-mix(in srgb, var(--wp--preset--color--accent, LinkText) 12%, transparent), color-mix(in srgb, var(--wp--preset--color--accent, LinkText) 20%, transparent));
}

.rooster-mega__link:focus-visible,
.rooster-mega__entry:focus-visible,
.rooster-mega__cta:focus-visible,
.rooster-mega__toggle:focus-visible,
.rooster-mega__close:focus-visible {
	outline: none;
	box-shadow: var(--rooster-mega-ring);
}

/* The chevron: 14 px, muted, turned up while its panel is open. */
.rooster-mega__chevron {
	@apply text-muted;
	transition: transform 0.2s ease;
}

.rooster-mega__link .rooster-mega__chevron {
	width: 0.875rem;
	height: 0.875rem;
}

.rooster-mega__link[aria-expanded="true"] .rooster-mega__chevron,
.rooster-mega__acc[open] > .rooster-mega__acc-summary .rooster-mega__chevron {
	transform: rotate(180deg);
}

/* ---------- the panel: one boxed, translucent card under the header's line ---------- */

.rooster-mega__panel {
	@apply text-fg;
	/* The header row's edges as the script measured them; the theme's wide row as it computes otherwise. */
	--rooster-mega-wide: min(var(--wp--style--global--wide-size, 72rem), calc(100% - 2 * var(--wp--custom--rooster--container-gutter, 1.5rem)));
	position: fixed;
	inset-inline-start: var(--rooster-mega-row-start, calc((100% - var(--rooster-mega-wide)) / 2));
	top: calc(var(--rooster-mega-top, 4rem) + var(--rooster-mega-gap));
	z-index: var(--wp--custom--rooster--z--drawer, 200);
	width: var(--rooster-mega-row-width, var(--rooster-mega-wide));
	padding: 1.25rem;
	border: 1px solid var(--wp--preset--color--line, color-mix(in srgb, CanvasText 16%, Canvas));
	border-radius: var(--rooster-mega-radius);
	box-shadow: var(--wp--custom--rooster--shadow--lg, 0 12px 32px rgb(0 0 0 / 12%));
	/* The page shows through as a soft glow: the surface at 95 % over the page blurred 8 px (saturate 180 %), the
	   owner's choice of 3 Nov 2026 from renders of 95 to 98 % and 8 to 48 px ("95 and 8 it is"): the letters behind
	   the panel blurred past reading, its own text crisp. The blur reaches the page only where the header around the
	   panel is not a backdrop root itself (Rooster Zero keeps its glass off the header element while a panel is open).
	   Solid where the browser cannot blur or the visitor asks for less transparency, as the theme's glass does. */
	background-color: color-mix(in srgb, var(--wp--preset--color--bg, Canvas) max(95%, var(--rooster-glass-mix, 95%)), transparent);
	-webkit-backdrop-filter: saturate(180%) blur(8px);
	backdrop-filter: saturate(180%) blur(8px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.rooster-mega__panel {
		background-color: var(--wp--preset--color--bg, Canvas);
	}
}

@media (prefers-reduced-transparency: reduce) {
	.rooster-mega__panel {
		background-color: var(--wp--preset--color--bg, Canvas);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

.rooster-mega__panel[hidden] {
	display: none;
}

/* The bridge over the gap between the entry and the box: the pointer crosses it without leaving the menu. */
.rooster-mega__panel::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 100%;
	height: calc(var(--rooster-mega-reach, 0px) + var(--rooster-mega-gap) + 1px);
}

/* A panel without its family (an entry's own children): as wide as its list, under its entry. */
.rooster-mega__panel:has(> .is-layout-list) {
	@apply p-s2;
	inset-inline-start: var(--rooster-mega-start, 0);
	width: max-content;
	min-width: 16rem;
	max-width: calc(100% - 2 * var(--wp--custom--rooster--container-gutter, 1.5rem));
}

.rooster-mega__panel > .rooster-mega__panel-inner {
	max-height: calc(100dvh - var(--rooster-mega-block-top, 0px) - var(--rooster-mega-top, 4rem) - 2 * var(--wp--preset--spacing--6, 2rem));
	overflow: auto;
}

.rooster-mega__panel-inner {
	@apply grid gap-s5;
}

/* Four equal tracks: the family's card takes one, the columns the other three. */
.rooster-mega__panel-inner.has-card {
	grid-template-columns: calc((100% - 3 * var(--wp--preset--spacing--5, 1.5rem)) / 4) minmax(0, 1fr);
}

/* ---------- the family's card ---------- */

.rooster-mega__card {
	@apply flex flex-col;
	padding: 1.25rem;
	border-radius: calc(var(--rooster-mega-radius) - 4px);
	background-color: color-mix(in srgb, var(--wp--preset--color--accent, LinkText) 10%, transparent);
}

.rooster-mega__art {
	@apply mb-s4;
	display: block;
	width: 100%;
	height: 5rem;
}

.rooster-mega__art svg {
	display: block;
	width: 100%;
	height: 100%;
}

img.rooster-mega__art {
	@apply rounded-media;
	object-fit: contain;
	object-position: left center;
}

.is-layout-featured .rooster-mega__art {
	height: 8rem;
}

.rooster-mega__name {
	@apply m-0 text-lg text-fg;
	line-height: 1.75rem;
	font-weight: 600;
}

.rooster-mega__tagline {
	@apply m-0 mt-s1 text-sm;
	line-height: 1.625;
	color: var(--rooster-mega-soft);
}

.rooster-mega__cta {
	@apply inline-flex items-center pt-s4 text-sm;
	gap: 0.375rem;
	min-height: 2.75rem;
	margin-top: auto;
	line-height: 1.25rem;
	font-weight: 600;
	text-decoration: none;
}

/* No underline in the header's chrome (the owner, 3 Nov 2026): under the pointer the family's full ink, the arrow moving. */
.rooster-mega__cta:hover {
	color: var(--wp--preset--color--accent-text, var(--wp--preset--color--accent, LinkText));
}

.rooster-mega__cta-icon {
	transition: transform 0.2s ease;
}

.rooster-mega__cta:hover .rooster-mega__cta-icon {
	transform: translateX(0.125rem);
}

/* ---------- the columns and their entries ---------- */

.rooster-mega__columns {
	@apply grid gap-s5;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	align-content: start;
}

.rooster-mega__col-head {
	@apply m-0 mb-s2 px-s3 text-xs text-muted;
	line-height: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--rooster--tracking--wide, 0.05em);
}

.rooster-mega__panel-inner .rooster-mega__list {
	display: grid;
	gap: 0.125rem;
	align-items: start;
}

/* One column beside the family's card (the Knowledge Base's): its entries two by two across the room. */
.rooster-mega__panel .has-card .rooster-mega__column:only-child .rooster-mega__list {
	@apply gap-s1;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* A row is one link: a plain entry 6 + 20 + 6 px, an entry with a description 8 px around its two lines. */
.rooster-mega__entry {
	@apply block px-s3 text-sm rounded-button;
	padding-block: 0.375rem;
	line-height: 1.25rem;
	color: var(--rooster-mega-soft);
	text-decoration: none;
}

.rooster-mega__entry.has-desc {
	@apply py-s2 text-fg;
}

/*
 * One row rhythm across a panel's columns (the owner, 3 Nov 2026: "harmony, symmetry and alignment", every family's
 * panel): every entry as tall as a name over two lines of description (8 + 20 + 2 + 2 × 17.875 + 8 px), the plain
 * links padded as the described ones (they stood 2 px higher), a description never shorter than two lines; the middle
 * columns' plain links (Features) in the family's ink, the last column's (Documentation) in the text's.
 */
.rooster-mega__panel-inner .rooster-mega__entry {
	min-height: calc(1rem + 1.25rem + 0.125rem + 2 * 0.8125rem * 1.375);
	padding-block: 0.5rem;
}

.rooster-mega__panel-inner .rooster-mega__desc {
	min-height: calc(2 * 0.8125rem * 1.375);
}

/* A column of one-line plain links (view.js marks it is-half as the panel opens: Documentation, a family's short
   Features) at half the row, each on a half row's line: two halves and the list's 2 px gap make one row; 6 px under
   the words so a link stays within its half. A column where a link wraps keeps whole rows. */
.rooster-mega__panel-inner .rooster-mega__column.is-half .rooster-mega__entry:not(.has-desc) {
	min-height: calc((1rem + 1.25rem + 2 * 0.8125rem * 1.375) / 2);
	padding-bottom: 0.375rem;
}

.rooster-mega__panel-inner .rooster-mega__column:not(:last-child) .rooster-mega__entry:not(.has-desc) {
	color: color-mix(in srgb, var(--wp--preset--color--accent-text, var(--wp--preset--color--accent, LinkText)) 80%, var(--wp--preset--color--fg, CanvasText));
}

/* A hover's wash is the family's accent, light (12 % on white, 20 % on the dark panel: the owner, 3 Nov 2026, the subtle grey read as noise), written in each rule so the accent resolves at the entry, inside its family's accent class. */
.rooster-mega__entry:hover {
	@apply text-fg;
	background: light-dark(color-mix(in srgb, var(--wp--preset--color--accent, LinkText) 12%, transparent), color-mix(in srgb, var(--wp--preset--color--accent, LinkText) 20%, transparent));
}

/* The first line: the icon, the label, the badge. */
.rooster-mega__label {
	@apply flex flex-wrap items-center gap-s2;
}

.rooster-mega__entry.has-desc .rooster-mega__label {
	font-weight: 600;
}

.rooster-mega__icon {
	flex: none;
	width: 1rem;
	height: 1rem;
}

/* The second line: the description, from the name's x. */
.rooster-mega__desc {
	@apply block text-muted;
	margin-top: 0.125rem;
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.375;
}

.rooster-mega__badge {
	@apply inline-block px-s2 rounded-chip;
	padding-block: 0.125rem;
	font-size: 0.6875rem;
	line-height: 1rem;
	font-weight: 600;
	white-space: nowrap;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent, LinkText) 12%, transparent);
}

/* The site search inside the resources panel (the form the theme prints). */
.rooster-mega__panel .search-form,
.rooster-mega__panel .wp-block-search {
	grid-column: 1 / -1;
}

/* ---------- the phone: the button and the drawer (the legacy drawer's measures, package 6b) ---------- */

.rooster-mega__toggle,
.rooster-mega__close {
	@apply inline-flex items-center justify-center p-0 text-fg rounded-button;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.rooster-mega__close-icon {
	width: 1.5rem;
	height: 1.5rem;
}

.rooster-mega__dialog {
	@apply p-0 bg-bg text-fg;
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	border: 0;
}

.rooster-mega__dialog::backdrop {
	background: color-mix(in srgb, var(--wp--preset--color--contrast, CanvasText) 40%, transparent);
}

/* The head: 64 px, the site's brand and the close button. */
.rooster-mega__dialog-head {
	@apply flex items-center justify-between bg-bg;
	position: sticky;
	top: 0;
	z-index: 1;
	height: 4rem;
	padding-inline: 1rem;
	border-bottom: 1px solid var(--wp--preset--color--line, color-mix(in srgb, CanvasText 16%, Canvas));
}

.rooster-mega__brand {
	@apply inline-flex items-center gap-s2 text-fg;
	min-height: 2.75rem;
	text-decoration: none;
}

.rooster-mega__brand-logo {
	display: block;
	width: auto;
	height: 1.75rem;
}

.rooster-mega__brand-name {
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.025em;
	text-transform: uppercase;
}

.rooster-mega__dialog-body {
	padding: 1rem 1rem 2.5rem;
}

/* The product finder (Rooster One's navigator): an outline bar across the top. */
.rooster-mega__find {
	@apply flex items-center justify-center gap-s2 text-fg;
	width: 100%;
	min-height: 3rem;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line, color-mix(in srgb, CanvasText 16%, Canvas));
	border-radius: 0.75rem;
	background: transparent;
	font: inherit;
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	cursor: pointer;
}

.rooster-mega__find:hover,
.rooster-mega__drawer-action:hover:not(.is-primary) {
	@apply bg-subtle;
}

/* The entries: one list, a rule between items; a group's list apart, under its heading when it has one. */
.rooster-mega__drawer-list {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.rooster-mega__drawer-list > li + li {
	border-top: 1px solid var(--wp--preset--color--line, color-mix(in srgb, CanvasText 16%, Canvas));
}

.rooster-mega__drawer-list.is-group {
	margin-top: 2rem;
}

.rooster-mega__drawer-list.has-head {
	margin-top: 0.25rem;
}

.rooster-mega__drawer-group,
.rooster-mega__drawer-head {
	@apply text-muted;
	margin: 2rem 0 0;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* A family's summary: the illustration on its dark tile, the name, the tagline, the chevron. */
.rooster-mega__acc-summary {
	@apply flex items-center;
	gap: 0.75rem;
	min-height: 3.5rem;
	padding-block: 0.5rem;
	cursor: pointer;
	list-style: none;
}

.rooster-mega__acc-summary::-webkit-details-marker {
	display: none;
}

.rooster-mega__thumb {
	@apply flex items-center justify-center;
	flex: none;
	width: 3.5rem;
	height: 2.5rem;
	padding-inline: 0.375rem;
	border-radius: 0.5rem;
	/* The tile is dark in both schemes, the illustration in the family's dark shade (the legacy's product tiles): the
	   dark scheme's canvas lifted 7 % toward its text, and the accent's dark half. */
	color-scheme: dark;
	background-color: color-mix(in srgb, CanvasText 7%, Canvas);
	box-shadow: 0 0 0 1px color-mix(in srgb, CanvasText 6%, transparent);
	color: var(--wp--preset--color--accent, LinkText);
}

.rooster-mega__thumb .rooster-mega__art {
	width: 100%;
	height: 1.75rem;
	margin: 0;
	color: inherit;
}

.rooster-mega__acc-title {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.rooster-mega__acc-name {
	@apply block text-fg;
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
}

.rooster-mega__acc-tagline {
	@apply block text-muted;
	font-size: 0.8125rem;
	line-height: 1.375;
	font-weight: 400;
}

.rooster-mega__acc-summary .rooster-mega__chevron {
	width: 1.25rem;
	height: 1.25rem;
}

/* A family's body: under the summary's text (the tile's width and its gap aside). */
.rooster-mega__drawer {
	padding-bottom: 1rem;
}

.rooster-mega__drawer.has-thumb {
	padding-inline-start: 4.25rem;
}

.rooster-mega__drawer-rows,
.rooster-mega__drawer-grid {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rooster-mega__drawer-rows {
	display: grid;
	gap: 0.125rem;
}

.rooster-mega__drawer-row,
.rooster-mega__drawer-link,
.rooster-mega__drawer-docs {
	@apply flex items-center gap-s2;
	min-height: 2.75rem;
	padding-inline: 0.5rem;
	border-radius: 0.5rem;
	text-decoration: none;
}

.rooster-mega__drawer-row {
	@apply text-fg;
	font-size: 0.9375rem;
	line-height: 1.375rem;
	font-weight: 500;
}

/* A row of a described column (a Pricing column): the name over its description, the row as tall as both. */
.rooster-mega__drawer-row.has-note {
	padding-block: 0.375rem;
}

.rooster-mega__drawer-text {
	display: grid;
	gap: 0.125rem;
}

.rooster-mega__drawer-note {
	font-size: 0.8125rem;
	line-height: 1.125rem;
	font-weight: 400;
	color: var(--rooster-mega-soft);
}

.rooster-mega__drawer-head {
	margin-top: 0.75rem;
	padding-inline: 0.5rem;
}

.rooster-mega__drawer-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 0.5rem;
	margin-top: 0.25rem;
}

.rooster-mega__drawer-link {
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--rooster-mega-soft);
}

.rooster-mega__drawer-docs {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
}

.rooster-mega__drawer-row:hover,
.rooster-mega__drawer-link:hover,
.rooster-mega__drawer-docs:hover {
	background: light-dark(color-mix(in srgb, var(--wp--preset--color--accent, LinkText) 12%, transparent), color-mix(in srgb, var(--wp--preset--color--accent, LinkText) 20%, transparent));
}

.rooster-mega__drawer-link:hover {
	@apply text-fg;
}

.rooster-mega__acc-link {
	@apply flex items-center text-fg;
	min-height: 3.5rem;
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	text-decoration: none;
}

.rooster-mega__acc-summary:focus-visible,
.rooster-mega__acc-link:focus-visible,
.rooster-mega__find:focus-visible,
.rooster-mega__drawer-row:focus-visible,
.rooster-mega__drawer-link:focus-visible,
.rooster-mega__drawer-docs:focus-visible,
.rooster-mega__drawer-action:focus-visible,
.rooster-mega__brand:focus-visible {
	outline: none;
	box-shadow: var(--rooster-mega-ring);
}

/* The foot: the shop (an outline button with the bag) and the account (solid), side by side. */
.rooster-mega__drawer-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.rooster-mega__drawer-action {
	@apply flex items-center justify-center gap-s2 text-fg;
	min-height: 3rem;
	border: 1px solid var(--wp--preset--color--line, color-mix(in srgb, CanvasText 16%, Canvas));
	border-radius: 0.75rem;
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	text-decoration: none;
}

.rooster-mega__drawer-action.is-primary {
	@apply bg-fg text-bg;
	border-color: transparent;
}

.rooster-mega__drawer-action.is-primary:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--fg, CanvasText) 82%, var(--wp--preset--color--bg, Canvas));
}

/* A screen reader's name for the menu button, whatever the theme prints for its own. */
.rooster-mega .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}