/**
 * Bonza: one accordion treatment sitewide (ClickUp z8udzkept0 G13,
 * z8udzkeppu G21). Pairs with js/accordion-unify.js and is enqueued late from
 * product-page/faq-accordion.php so it sits after every per-component
 * accordion stylesheet.
 *
 * Config checked: Blocksy Companion ships no accordion element and the
 * Customizer has no accordion icon or hover setting (grep of the plugin tree
 * is recorded in faq-accordion.php's header, checked-does-not-satisfy). The
 * accordions are native <details> emitted by five separate templates, so a
 * single sitewide stylesheet is the only place one treatment can live.
 *
 * editor-friendly-ok: the rows are PHP-rendered templates and pattern HTML on
 * the front end, with no block-editor counterpart to register
 * add_editor_style() against, the same documented exception as the sibling
 * faq-accordion.css and product-page-marketing.css. Colours read the
 * var(--wp--preset--color--*) tokens with literal fallbacks.
 *
 * G13: a "+" on a closed row that becomes "-" when open, same 15px size, 3px
 * weight and right-hand position on every accordion, drawn on the summary's
 * own ::after in currentColor so it always matches the row's text colour on
 * both the cream and the green bands. The old per-component icons (the PDP
 * rows' plus-that-rotates-into-a-cross, the FAQ SVG, the chevron on the
 * "science" rows, the homepage FAQ's rotated cross) are hidden. A cross is
 * reserved for closing drawers, panels and pop-ups.
 *
 * G21: the question keeps its colour and visibility on hover, focus and when
 * open, and gains an underline plus a focus ring.
 *
 * Header disclosure menus (.bhu-disclosure) and the language drawer are
 * dropdowns, not accordions, and are not matched here.
 */

:root {
	--bz-acc-ink: var(--wp--preset--color--bhp-ink, #2E2A2A);
	--bz-acc-white: var(--wp--preset--color--bhp-white, #FFFFFF);
}

/* Every accordion family: the <details> whose <summary> is the row. */
:is(
	.bppm-info-accordion__item,
	.bppm-accordion,
	.bppm-formula__group,
	.bppm-formula__inline-toggle,
	.bcp-faq__item,
	.wp-block-details
) > summary {
	position: relative;
	box-sizing: border-box;
	list-style: none;
	cursor: pointer;
	padding-inline-end: 43px;
}

:is(
	.bppm-info-accordion__item,
	.bppm-accordion,
	.bppm-formula__group,
	.bppm-formula__inline-toggle,
	.bcp-faq__item,
	.wp-block-details
) > summary::-webkit-details-marker {
	display: none;
}

:is(
	.bppm-info-accordion__item,
	.bppm-accordion,
	.bppm-formula__group,
	.bppm-formula__inline-toggle,
	.bcp-faq__item,
	.wp-block-details
) > summary::marker {
	content: none;
}

/* The "+": a horizontal and a vertical bar, 15px box, 3px bars. */
html :is(
	.bppm-info-accordion__item,
	.bppm-accordion,
	.bppm-formula__group,
	.bppm-formula__inline-toggle,
	.bcp-faq__item,
	.wp-block-details
) > summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--bz-acc-icon-right, 12px);
	left: auto;
	width: 15px;
	height: 15px;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 0;
	line-height: 0;
	transform: translateY(-50%);
	transition: none;
	background:
		linear-gradient(currentColor, currentColor) center / 15px 3px no-repeat,
		linear-gradient(currentColor, currentColor) center / 3px 15px no-repeat;
}

/* Open: the vertical bar goes, leaving the "-". */
html :is(
	.bppm-info-accordion__item,
	.bppm-accordion,
	.bppm-formula__group,
	.bppm-formula__inline-toggle,
	.bcp-faq__item,
	.wp-block-details
)[open] > summary::after {
	transform: translateY(-50%);
	background:
		linear-gradient(currentColor, currentColor) center / 15px 3px no-repeat,
		linear-gradient(currentColor, currentColor) center / 3px 0 no-repeat;
}

/* Retire the old per-component icons so only one icon shows. */
.bppm-info-accordion__icon,
.bppm-faq__icon,
.bppm-accordion__chevron,
.bhp-axis-card__chevron {
	display: none !important;
}

.bppm-info-accordion__label,
.bppm-faq__question {
	min-width: 0;
}

/* Icon position per family (the rows differ in their own side padding). */
.bppm-faq__item > summary,
.bcp-faq__item > summary,
.wp-block-details > summary {
	--bz-acc-icon-right: 0;
}

/* ---- G21: question stays legible on hover, focus and when open ---------- */

/* Rows on the cream/white surface: ink text. */
:is(.bppm-info-accordion__item, .bppm-formula__group, .bppm-formula__inline-toggle) > summary,
:is(.bppm-info-accordion__item, .bppm-formula__group, .bppm-formula__inline-toggle) > summary:is(:hover, :focus, :focus-visible, :active),
:is(.bppm-info-accordion__item, .bppm-formula__group, .bppm-formula__inline-toggle)[open] > summary {
	opacity: 1;
	visibility: visible;
}

:is(.bppm-info-accordion__item, .bppm-formula__group) > summary:is(:hover, :focus-visible),
:is(.bppm-info-accordion__item, .bppm-formula__group)[open] > summary {
	color: var(--bz-acc-ink);
	background-color: transparent;
}

/* Rows on the brand-green band: white text. */
:is(.bppm-faq__item, .bcp-faq__item) > summary,
:is(.bppm-faq__item, .bcp-faq__item) > summary:is(:hover, :focus, :focus-visible, :active),
:is(.bppm-faq__item, .bcp-faq__item)[open] > summary,
.bppm-faq__item > summary .bppm-faq__question {
	color: var(--bz-acc-white);
	opacity: 1;
	visibility: visible;
	background-color: transparent;
}

.bhp-faq-list > details > summary,
.bhp-faq-list > details > summary:is(:hover, :focus, :focus-visible, :active),
.bhp-faq-list > details[open] > summary {
	color: var(--bz-acc-white);
	opacity: 1;
	visibility: visible;
	background-color: transparent;
}

/* A visible hover and focus state that is not colour-only. */
:is(
	.bppm-info-accordion__item,
	.bppm-accordion,
	.bppm-formula__group,
	.bppm-formula__inline-toggle,
	.bcp-faq__item,
	.wp-block-details
) > summary:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

:is(
	.bppm-info-accordion__item,
	.bppm-accordion,
	.bppm-formula__group,
	.bppm-formula__inline-toggle,
	.bcp-faq__item,
	.wp-block-details
) > summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* G20: while a row is being toggled the script holds the heading in place, so
   the browser's own scroll anchoring must not move the page a second time. */
html.bz-acc-busy {
	overflow-anchor: none;
}

/* G21 root cause: product-page-vita-qa.css "Item 4" turns every span inside a
   hovered `.bppm-accordion > summary` brand green, and that selector also
   matches the PDP FAQ rows, whose band is the same green, so the question
   vanished on hover. Its own comment says the FAQ band is left out, but the
   selector never did. These rules out-rank it (one extra element and class)
   and keep the question white on the green band. */
html body.single-product .bppm-faq__item > summary:is(:hover, :focus-visible, :active) :is(span, h3):not(.bppm-formula__dose-chip),
html body.single-product .bppm-faq__item[open] > summary :is(span, h3):not(.bppm-formula__dose-chip) {
	color: var(--bz-acc-white);
}