/**
 * Yinga FAQ front-end styles.
 *
 * Deliberately restrained: hairline rules, inherited typography and colour,
 * no shadows or rounded cards, so the list reads as part of the theme rather
 * than as a plugin dropped on top of it. Every value is a custom property,
 * so a theme can restyle the whole block by redeclaring a handful of tokens
 * without fighting specificity.
 */

.yinga-faq {
	/* No imposed measure: the list fills whatever column it sits in. Set a
	   value here if you want to hold the line length back. */
	--yinga-faq-max-width: none;
	--yinga-faq-gap: 0;
	--yinga-faq-rule-width: 1px;
	--yinga-faq-rule-color: rgba(128, 128, 128, 0.32);
	/* em, not rem: the question should match the text around it, whatever
	   size the theme sets there. A fixed rem value renders tiny inside a
	   theme with large body copy, and oversized inside a small sidebar. */
	--yinga-faq-question-size: 1em;
	--yinga-faq-question-weight: 600;
	--yinga-faq-question-padding: 1.1em 2.25em 1.1em 0;
	--yinga-faq-answer-padding: 0 2.25em 1.4em 0;
	--yinga-faq-title-margin: 0 0 0.5em;
	--yinga-faq-icon-size: 0.42em;
	--yinga-faq-icon-weight: 2px;
	--yinga-faq-transition: 150ms ease;
	--yinga-faq-focus: 2px solid currentColor;
	/* The gutter a list gives itself when the theme leaves it against the
	   edge of the window (class yinga-faq--flush, set by script). */
	--yinga-faq-gutter: clamp(1rem, 4vw, 2.5rem);

	max-width: var(--yinga-faq-max-width);
	margin-block: 2.5rem;
}

/* Where color-mix is available the rule follows the theme's text colour. */
@supports (border-color: color-mix(in srgb, currentColor 20%, transparent)) {
	.yinga-faq {
		--yinga-faq-rule-color: color-mix(in srgb, currentColor 18%, transparent);
	}
}

.yinga-faq__title {
	margin: var(--yinga-faq-title-margin);
}

.yinga-faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--yinga-faq-gap);
}

.yinga-faq__item {
	border-bottom: var(--yinga-faq-rule-width) solid var(--yinga-faq-rule-color);
}

.yinga-faq__item:first-child {
	border-top: var(--yinga-faq-rule-width) solid var(--yinga-faq-rule-color);
}

.yinga-faq__question {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.yinga-faq__trigger {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	margin: 0;
	padding: var(--yinga-faq-question-padding);
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: var(--yinga-faq-question-size);
	font-weight: var(--yinga-faq-question-weight);
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
	appearance: none;
}

.yinga-faq__trigger:focus-visible {
	outline: var(--yinga-faq-focus);
	outline-offset: 2px;
}

.yinga-faq__trigger:hover .yinga-faq__question-text {
	opacity: 0.7;
}

.yinga-faq__question-text {
	transition: opacity var(--yinga-faq-transition);
}

/* The chevron is two borders on a rotated square: one element, no icon font,
   no sprite, and it stays crisp at any size because the browser draws real
   borders rather than two hairlines that round unevenly.
   The wrapper holds a stable box that sits on the first line of the question,
   so the arrow stays put whether the question runs to one line or three, and
   only the inner element rotates. */
.yinga-faq__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 1em;
	height: calc(1em * 1.4);
}

.yinga-faq__icon::before {
	content: "";
	display: block;
	box-sizing: border-box;
	width: var(--yinga-faq-icon-size);
	height: var(--yinga-faq-icon-size);
	/* The visible wedge of a rotated square sits below its own box centre,
	   so it is lifted by a quarter of its size to look optically centred. */
	margin-top: calc(var(--yinga-faq-icon-size) * -0.25);
	border-right: var(--yinga-faq-icon-weight) solid currentColor;
	border-bottom: var(--yinga-faq-icon-weight) solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--yinga-faq-transition);
}

.yinga-faq__trigger[aria-expanded="true"] .yinga-faq__icon::before {
	transform: rotate(-135deg);
	margin-top: calc(var(--yinga-faq-icon-size) * 0.25);
}

.yinga-faq__answer {
	padding: var(--yinga-faq-answer-padding);
}

.yinga-faq__answer > .yinga-faq__answer-inner > *:first-child {
	margin-top: 0;
}

.yinga-faq__answer > .yinga-faq__answer-inner > *:last-child {
	margin-bottom: 0;
}

/* Without the accordion the trigger is decoration only. */
.yinga-faq:not(.yinga-faq--accordion) .yinga-faq__trigger {
	cursor: default;
	padding-right: 0;
}

.yinga-faq:not(.yinga-faq--accordion) .yinga-faq__icon,
.yinga-faq.yinga-faq:not(.yinga-faq--accordion) .yinga-faq__icon {
	display: none;
}


/* ---------------------------------------------------------------------
 * Structural reset
 *
 * Themes routinely give headings and buttons a fixed height, a float or a
 * position. Those rules are harmless in the theme's own layout, but they
 * break a disclosure list: the box stops growing with its text, so a
 * question that wraps to two lines runs straight into whatever sits below
 * it. Repeating the wrapper class lifts these declarations above a typical
 * theme rule without reaching for !important, so the structure holds while
 * the design tokens above stay easy to override.
 * ------------------------------------------------------------------ */

.yinga-faq.yinga-faq .yinga-faq__item,
.yinga-faq.yinga-faq .yinga-faq__question,
.yinga-faq.yinga-faq .yinga-faq__trigger,
.yinga-faq.yinga-faq .yinga-faq__question-text,
.yinga-faq.yinga-faq .yinga-faq__answer,
.yinga-faq.yinga-faq .yinga-faq__answer-inner {
	position: static;
	float: none;
	clear: none;
	height: auto;
	min-height: 0;
	max-height: none;
	overflow: visible;
	transform: none;
	box-sizing: border-box;
}

.yinga-faq.yinga-faq .yinga-faq__item,
.yinga-faq.yinga-faq .yinga-faq__question,
.yinga-faq.yinga-faq .yinga-faq__answer,
.yinga-faq.yinga-faq .yinga-faq__answer-inner {
	display: block;
	width: auto;
	max-width: none;
}

/* The line above outranks the browser's own rule for [hidden], which is what
   the script uses to collapse a panel. Without this the whole accordion
   stays open. It has to sit after the reset and carry more weight than it. */
.yinga-faq.yinga-faq .yinga-faq__answer[hidden],
.yinga-faq.yinga-faq [hidden] {
	display: none;
}

/* A scripted accordion keeps its closed panels closed from the first paint,
   instead of showing every answer and snapping them shut when the script
   runs. The class is set by an inline script before the panels are painted
   and removed again if the script never arrives. */
.yinga-faq.yinga-faq.yinga-faq--js .yinga-faq__answer[data-yinga-faq-collapsed="true"] {
	display: none;
}

/* Themes paint every <button> as their call-to-action: a filled box with
   rounded corners, white text and a fixed width. A question is not a
   call-to-action, so the trigger gives all of that back to the theme's
   text and takes the design tokens instead. Anything a theme sets with
   !important still wins; that is deliberate, and rare. */
.yinga-faq.yinga-faq .yinga-faq__trigger {
	display: flex;
	width: 100%;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: var(--yinga-faq-question-padding);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: var(--yinga-faq-question-size);
	font-weight: var(--yinga-faq-question-weight);
	letter-spacing: inherit;
	text-transform: none;
	text-decoration: none;
	white-space: normal;
	line-height: 1.4;
	text-align: left;
}

.yinga-faq.yinga-faq .yinga-faq__trigger:hover,
.yinga-faq.yinga-faq .yinga-faq__trigger:focus,
.yinga-faq.yinga-faq .yinga-faq__trigger:active {
	background: transparent;
	color: inherit;
	box-shadow: none;
	transform: none;
}

/* Text never touches the edge of the window. The marker script measures
   where the list landed and, when it sits flush against either side, adds
   the class; inside a padded column the padding stays zero. */
.yinga-faq.yinga-faq--flush {
	box-sizing: border-box;
	padding-inline: var(--yinga-faq-gutter);
}

/* Automatic placement lands wherever the theme ends its loop. When that
   is inside a grid or flex row of tiles, the list takes a full row of its
   own instead of sitting in the next empty cell. */
.yinga-faq.yinga-faq[data-yinga-faq-source="auto"] {
	grid-column: 1 / -1;
	flex: 1 1 100%;
	width: 100%;
}

.yinga-faq.yinga-faq .yinga-faq__question-text {
	display: inline;
	white-space: normal;
	overflow-wrap: break-word;
}

/* The chevron is the one element whose geometry is deliberate. */
.yinga-faq.yinga-faq .yinga-faq__icon {
	position: static;
	float: none;
	align-self: flex-start;
	box-sizing: border-box;
	display: flex;
	width: 1em;
	height: calc(1em * 1.4);
	min-height: 0;
	max-height: none;
}

@media (prefers-reduced-motion: reduce) {
	.yinga-faq__icon::before,
	.yinga-faq__question-text {
		transition: none;
	}
}

/* The overview page --------------------------------------------------
 *
 * This sits inside someone's theme, on a page they styled themselves, so
 * it borrows the theme's text colour rather than introducing a palette
 * and adds only spacing, shape and separation.
 *
 * Two lessons are built into the markup rather than into these rules.
 * The tab row is a plain div holding plain anchors: no nav, no ul, no li,
 * because those are exactly the elements a theme paints with backgrounds,
 * padding and bullets, and a reset only wins that until it meets a theme
 * with more specificity or an !important. And the search field draws its
 * own border around a flex row, so a theme forcing padding onto the input
 * cannot slide the magnifier on top of the text.
 *
 * The tripled class is deliberate. A doubled one loses to a theme rule of
 * equal weight that simply loads later.
 */

.yinga-faq-overview {
	--yinga-faq-overview-gap: 3.5rem;
	--yinga-faq-rule-width: 1px;
	--yinga-faq-rule-color: rgba(128, 128, 128, 0.34);
	--yinga-faq-overview-radius: 999px;
	/* Tints of the surrounding text colour, so the page keeps whatever
	   palette the theme already has. */
	--yinga-faq-overview-tint: rgba(128, 128, 128, 0.10);
	--yinga-faq-overview-tint-strong: rgba(128, 128, 128, 0.16);
}

/* Structural reset: the theme's furniture stops at the edge of this page. */
.yinga-faq-overview.yinga-faq-overview.yinga-faq-overview,
.yinga-faq-overview.yinga-faq-overview.yinga-faq-overview .yinga-faq-overview__tabs,
.yinga-faq-overview.yinga-faq-overview.yinga-faq-overview .yinga-faq-overview__search,
.yinga-faq-overview.yinga-faq-overview.yinga-faq-overview .yinga-faq-overview__field {
	background: none;
	background-color: transparent;
	background-image: none;
	border: 0;
	box-shadow: none;
	list-style: none;
}

/* Search --------------------------------------------------------------- */

.yinga-faq-overview__search {
	margin: 0 0 2rem;
	padding: 0;
}

.yinga-faq-overview__label {
	display: block;
	margin: 0 0 0.5em;
	font-size: 0.8125em;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.6;
}

/* The pill is this wrapper, not the input. */
.yinga-faq-overview.yinga-faq-overview.yinga-faq-overview .yinga-faq-overview__field {
	display: flex;
	align-items: center;
	gap: 0.6em;
	box-sizing: border-box;
	max-width: 30rem;
	padding: 0 0.7em 0 1em;
	border: var(--yinga-faq-rule-width) solid var(--yinga-faq-rule-color);
	border-radius: var(--yinga-faq-overview-radius);
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.yinga-faq-overview.yinga-faq-overview.yinga-faq-overview .yinga-faq-overview__field:hover {
	border-color: currentColor;
}

.yinga-faq-overview.yinga-faq-overview.yinga-faq-overview .yinga-faq-overview__field:focus-within {
	border-color: currentColor;
	box-shadow: 0 0 0 3px var(--yinga-faq-overview-tint);
}

.yinga-faq-overview__glass {
	flex: 0 0 auto;
	width: 1.05em;
	height: 1.05em;
	opacity: 0.45;
}

/* The input keeps no decoration of its own: the wrapper carries all of it.
   A theme that forces its own padding here only makes the inside of the
   pill roomier, which is survivable.

   The three !important declarations are the exception this stylesheet
   otherwise avoids, and they are here because nothing else works: a theme
   that writes `border: 1px solid #999 !important` on every search input
   cannot be beaten by specificity alone, and the result is a rectangle
   drawn inside the pill. They are scoped to this one input and cover only
   the decoration that would double up. */
.yinga-faq-overview.yinga-faq-overview.yinga-faq-overview .yinga-faq-overview__field input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0.85em 0;
	font: inherit;
	line-height: 1.3;
	color: inherit;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

/* The browser's own clear cross sits badly inside a pill and only appears
   in some browsers, so it is replaced by one that is always there. */
.yinga-faq-overview__field input::-webkit-search-cancel-button,
.yinga-faq-overview__field input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.yinga-faq-overview.yinga-faq-overview.yinga-faq-overview .yinga-faq-overview__clear {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.8em;
	height: 1.8em;
	margin: 0;
	padding: 0;
	font: inherit;
	font-size: 1.05em;
	line-height: 1;
	color: inherit;
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	opacity: 0.5;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.yinga-faq-overview.yinga-faq-overview.yinga-faq-overview .yinga-faq-overview__clear:hover,
.yinga-faq-overview.yinga-faq-overview.yinga-faq-overview .yinga-faq-overview__clear:focus-visible {
	opacity: 1;
	background-color: var(--yinga-faq-overview-tint);
}

.yinga-faq-overview__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.yinga-faq-overview__count {
	margin: 0.7em 0 0;
	padding: 0;
	font-size: 0.875em;
	opacity: 0.6;
}

/* Tabs ----------------------------------------------------------------- */

.yinga-faq-overview.yinga-faq-overview.yinga-faq-overview .yinga-faq-overview__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 var(--yinga-faq-overview-gap);
	padding: 0;
}

.yinga-faq-overview.yinga-faq-overview.yinga-faq-overview .yinga-faq-overview__tab {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: 0.5em 1em;
	font-size: 0.9375em;
	font-weight: 400;
	line-height: 1.3;
	/* Not the theme's link colour: a row of red underlined links reads as
	   navigation away from the page, which is the opposite of what these
	   do. */
	color: inherit;
	text-decoration: none;
	background: none;
	background-color: transparent;
	border: var(--yinga-faq-rule-width) solid var(--yinga-faq-rule-color);
	border-radius: var(--yinga-faq-overview-radius);
	box-shadow: none;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.yinga-faq-overview.yinga-faq-overview.yinga-faq-overview .yinga-faq-overview__tab:hover {
	border-color: currentColor;
	background-color: var(--yinga-faq-overview-tint);
	color: inherit;
	text-decoration: none;
}

.yinga-faq-overview.yinga-faq-overview.yinga-faq-overview .yinga-faq-overview__tab:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.yinga-faq-overview.yinga-faq-overview.yinga-faq-overview .yinga-faq-overview__tab[aria-current="true"] {
	border-color: currentColor;
	background-color: var(--yinga-faq-overview-tint-strong);
	font-weight: 600;
}

.yinga-faq-overview__badge {
	font-size: 0.8em;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	opacity: 0.55;
}

/* Sections -------------------------------------------------------------- */

.yinga-faq-overview__section {
	margin: 0 0 var(--yinga-faq-overview-gap);
	/* Scrolled-to headings should not sit flush against a sticky header. */
	scroll-margin-top: 2rem;
}

.yinga-faq-overview__section:last-child {
	margin-bottom: 0;
}

.yinga-faq-overview__more {
	margin: 0.9em 0 0;
	font-size: 0.9em;
}

.yinga-faq-overview__contact {
	margin-left: 0.35em;
	text-decoration: underline;
}

.yinga-faq-overview__empty {
	margin: 0;
	padding: 2rem 0;
	text-align: center;
	opacity: 0.7;
}

/* Hidden means hidden ---------------------------------------------------
 *
 * These come last and carry the same weight as the rules above, because a
 * display value further up would otherwise outrank the browser's own weak
 * rule for the hidden attribute. That is exactly how the accordion broke
 * in 1.1.2, and it is worth only making that mistake once.
 */
.yinga-faq-overview.yinga-faq-overview.yinga-faq-overview [hidden],
.yinga-faq-overview.yinga-faq-overview.yinga-faq-overview .yinga-faq-overview__clear[hidden],
.yinga-faq-overview.yinga-faq-overview.yinga-faq-overview .yinga-faq-overview__tabs[hidden],
.yinga-faq-overview.yinga-faq-overview.yinga-faq-overview .yinga-faq-overview__section[hidden],
.yinga-faq-overview.yinga-faq-overview.yinga-faq-overview .yinga-faq-overview__empty[hidden],
.yinga-faq-overview.yinga-faq-overview.yinga-faq-overview [data-yinga-faq-item][hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.yinga-faq-overview.yinga-faq-overview.yinga-faq-overview .yinga-faq-overview__tab,
	.yinga-faq-overview.yinga-faq-overview.yinga-faq-overview .yinga-faq-overview__field {
		transition: none;
	}
}