/*
 * rooster/question-list (now a variant of the library: BRIEF-2026-11-01-BLOCK-LIBRARY.md) (BRIEF-2026-11-01-LANDINGS-BY-TEMPLATE.md, order 1): the legacy promo template's questions,
 * complete on its own: the rows divided by the line colour, the question 3.5rem high at the least, 1rem over and
 * under, semibold in the contrast colour, the chevron (Lucide's chevron-down, a mask of this sheet, muted) turning
 * as the answer opens, the answer in the text colour on a relaxed leading. Colours are the theme's tokens with the
 * legacy's dark values as fallbacks. Compiled by build/blocks-css.mjs.
 *
 * The theme's accordion look (11.3.3, the owner: "In the frequently asked questions make sure we also have an
 * accordion view similar to the one we have in the theme's footer or the my account page sections"; the theme's
 * blocks/core/accordion.css): the open question, and one under the pointer or the focus, in the accent's readable
 * shade, its chevron with it; the theme's focus ring (both variants); the question at the start of its line, so a
 * right-to-left page mirrors the row; the chevron's turn at the theme's base motion, none when reduced.
 */

@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-question-list) {
	--wp--custom--rooster-one--ink-2: light-dark(#3d454e, #d1d6db);
	--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--ink: light-dark(#212222, #eff0f0);
	--wp--custom--rooster-one--brand: #1e63ce;
	--wp--custom--rooster-one--blue: light-dark(#1e63ce, #8eb4ee);
}

.rooster-question-list {
	--rooster-question-list-chevron: 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='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	box-sizing: border-box;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-2, light-dark(#45556c, #cad5e2));
	overflow-wrap: normal;
	word-break: normal;
}

.rooster-question-list__item {
	margin: 0;
	padding: 0;
	border: 0;
}

.rooster-question-list__item + .rooster-question-list__item {
	border-top: 1px solid var(--wp--preset--color--line, light-dark(#e2e8f0, rgb(255 255 255 / 10%)));
}

.rooster-question-list .rooster-question-list__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	box-sizing: border-box;
	min-height: 3.5rem;
	margin: 0;
	padding: 1rem 0;
	list-style: none;
	cursor: pointer;
	text-align: start;
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast, light-dark(#020618, #ffffff));
}

.rooster-question-list__question::-webkit-details-marker {
	display: none;
}

.rooster-question-list__question::marker {
	content: "";
}

/* The theme's focus ring; the transparent outline is what a forced-colours mode draws instead. */
.rooster-question-list__question:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: var(--wp--custom--rooster--focus-ring, 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent, light-dark(#334155, #cbd5e1)) 35%, transparent));
}

/* The rows: the open question, and one under the pointer or the focus, in the accent's readable shade, chevron included. */
.rooster-question-list:not(.rooster-question-list--boxed) .rooster-question-list__item[open] > .rooster-question-list__question,
.rooster-question-list:not(.rooster-question-list--boxed) .rooster-question-list__question:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--accent-text, light-dark(#020618, #ffffff));
}

.rooster-question-list:not(.rooster-question-list--boxed) .rooster-question-list__item[open] > .rooster-question-list__question .rooster-question-list__chevron,
.rooster-question-list:not(.rooster-question-list--boxed) .rooster-question-list__question:is(:hover, :focus-visible) .rooster-question-list__chevron {
	background-color: currentColor;
}

.rooster-question-list__chevron {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--wp--preset--color--muted, light-dark(#45556c, #90a1b9));
	-webkit-mask: var(--rooster-question-list-chevron) center / contain no-repeat;
	mask: var(--rooster-question-list-chevron) center / contain no-repeat;
	transition: transform var(--wp--custom--rooster--motion--base, 200ms);
}

.rooster-question-list__item[open] .rooster-question-list__chevron {
	transform: rotate(180deg);
}

.rooster-question-list .rooster-question-list__answer {
	margin: 0;
	padding: 0 0 1.25rem;
	font-size: 1rem;
	line-height: 1.625;
	color: var(--wp--preset--color--contrast-2, light-dark(#45556c, #cad5e2));
}

@media (prefers-reduced-motion: reduce) {
	.rooster-question-list__chevron {
		transition: none;
	}
}

@media (forced-colors: active) {
	.rooster-question-list__chevron {
		forced-color-adjust: none;
		background-color: CanvasText;
	}
}

/*
 * The boxes (order 2: the legacy Rooster One landing's `.r1-faq`): each question in a 12 px rounded box on the card
 * surface, 18 px aside, 8 px apart; the question 14.5 px semibold 15 px over and under; the mark Lucide's plus, a
 * minus once open, in the brand blue (the legacy's "+" and "–" glyphs, drawn as icons); the answer 13.5 px under it.
 * The template's own palette as custom tokens (`--wp--custom--rooster-one--*`) with the legacy's light and dark values
 * as fallbacks.
 */
.rooster-question-list.rooster-question-list--boxed {
	--rooster-question-list-plus: 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='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
	--rooster-question-list-minus: 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='M5 12h14'/%3E%3C/svg%3E");
	color: var(--wp--custom--rooster-one--ink-2);
}

.rooster-question-list--boxed .rooster-question-list__item {
	margin: 0 0 8px;
	padding: 0 18px;
	border: 1px solid var(--wp--custom--rooster-one--line);
	border-radius: 12px;
	background: var(--wp--custom--rooster-one--surface);
}

.rooster-question-list--boxed .rooster-question-list__item + .rooster-question-list__item {
	border-top: 1px solid var(--wp--custom--rooster-one--line);
}

.rooster-question-list--boxed .rooster-question-list__item:last-child {
	margin-bottom: 0;
}

.rooster-question-list.rooster-question-list--boxed .rooster-question-list__question {
	gap: 14px;
	min-height: 0;
	padding: 15px 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--wp--custom--rooster-one--ink);
}

.rooster-question-list--boxed .rooster-question-list__chevron {
	width: 14px;
	height: 20px;
	background-color: var(--wp--custom--rooster-one--blue);
	-webkit-mask-image: var(--rooster-question-list-plus);
	mask-image: var(--rooster-question-list-plus);
	transition: none;
}

.rooster-question-list--boxed .rooster-question-list__item[open] .rooster-question-list__chevron {
	transform: none;
	-webkit-mask-image: var(--rooster-question-list-minus);
	mask-image: var(--rooster-question-list-minus);
}

.rooster-question-list.rooster-question-list--boxed .rooster-question-list__answer {
	padding: 0 0 16px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--wp--custom--rooster-one--ink-2);
}

/* The block's tone (the library's; the warning's text shade is its ink, the palette's warning-ink, theme 1.3.8). */
.wp-block-rooster-questions:is(.is-tone-success, .is-tone-warning, .is-tone-danger, .is-tone-neutral) {
	--rooster-accent: var(--rooster-tone);
	--rooster-accent-text: var(--rooster-tone-text);
	--wp--preset--color--accent: var(--rooster-tone);
	--wp--preset--color--accent-text: var(--rooster-tone-text);
}

.wp-block-rooster-questions.is-tone-success {
	--rooster-tone: var(--wp--preset--color--success, light-dark(#15803d, #4ade80));
	--rooster-tone-text: var(--rooster-tone);
}

.wp-block-rooster-questions.is-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));
}

.wp-block-rooster-questions.is-tone-danger {
	--rooster-tone: var(--wp--preset--color--danger, light-dark(#b91c1c, #f87171));
	--rooster-tone-text: var(--rooster-tone);
}

.wp-block-rooster-questions.is-tone-neutral {
	--rooster-tone: var(--wp--preset--color--muted, light-dark(#525252, #a3a3a3));
	--rooster-tone-text: var(--rooster-tone);
}

/*
 * The tone over the Rooster One template's own palette: its recipes draw the brand blue from the custom tokens
 * --wp--custom--rooster-one--* (the legacy's values as fallbacks); a toned block re-maps them to its tone.
 */
.wp-block-rooster-questions:is([class*="is-style-accent-"], .is-tone-success, .is-tone-warning, .is-tone-danger, .is-tone-neutral) {
	--wp--custom--rooster-one--brand: var(--wp--preset--color--accent, #1e63ce);
	--wp--custom--rooster-one--brand-deep: color-mix(in srgb, var(--wp--preset--color--accent, #1e63ce) 80%, #000000);
	--wp--custom--rooster-one--blue: var(--wp--preset--color--accent-text, light-dark(#1e63ce, #8eb4ee));
	--wp--custom--rooster-one--blue-wash: color-mix(in srgb, var(--wp--preset--color--accent, #1e63ce) 14%, transparent);
}