/**
 * Help centre, after the reference graphic of 25.09.2026.
 *
 * A head with the page's picture, the search and the audience switch; the
 * topics as tiles (rows on a phone); the questions in a reading column with
 * a column beside them that keeps the topics and the way to a person in
 * view. Decisions of the owner, 25.09.2026: the combined desktop layout
 * (tiles above, topic list and "still stuck?" beside the questions), the
 * existing picture for now, green tones per topic and red only for the
 * emergency, and a search button that does something.
 *
 * Everything degrades: without JavaScript the switch and the topics are
 * anchors to sections that are all on the page, and the questions are
 * plain <details>.
 */

/* ----- Tones -------------------------------------------------------------
   Brand tones, one per topic in turn - Bordeaux, rose gold, mauve, sand
   (AniLevia, #408); red belongs to the emergency alone, green to success. Each ink is at
   least 4:1 on its own mark and ground, in both schemes. */
.vb-faq {
	--vb-faq-read: 42rem;
	--vb-faq-tone-1: #f3e2e7;
	--vb-faq-tone-1-mark: #e8c9d2;
	--vb-faq-tone-1-ink: #68192e;
	--vb-faq-tone-2: #f5e6da;
	--vb-faq-tone-2-mark: #ead0bf;
	--vb-faq-tone-2-ink: #80533f;
	--vb-faq-tone-3: #efe6ec;
	--vb-faq-tone-3-mark: #ddcad6;
	--vb-faq-tone-3-ink: #5e3a52;
	--vb-faq-tone-4: #f2ebe3;
	--vb-faq-tone-4-mark: #e2d5c6;
	--vb-faq-tone-4-ink: #6b4e2e;
	--vb-faq-urgent-mark: #fbdcd6;
	display: grid;
	/* Every grid here has a column that cannot grow past its container.
	   With the default auto track the head took the width of the search
	   row's content: 392px on a 320px phone, and 442px as soon as the
	   clear button appeared with the first letter typed - iOS then pulled
	   the page sideways (owner, 25.09.2026: "Zoom beim ersten Eintippen"). */
	grid-template-columns: minmax( 0, 1fr );
	gap: 28px;
	margin-block-start: 8px;
}

@media screen {
	:root[data-theme="dark"] .vb-faq {
		--vb-faq-tone-1: #2a1d23;
		--vb-faq-tone-1-mark: #432530;
		--vb-faq-tone-1-ink: #f2b3c3;
		--vb-faq-tone-2: #2a2018;
		--vb-faq-tone-2-mark: #3d2d25;
		--vb-faq-tone-2-ink: #e9bca0;
		--vb-faq-tone-3: #261d24;
		--vb-faq-tone-3-mark: #3a2a36;
		--vb-faq-tone-3-ink: #e0bfd4;
		--vb-faq-tone-4: #241f1a;
		--vb-faq-tone-4-mark: #3a3026;
		--vb-faq-tone-4-ink: #e5c9a4;
		--vb-faq-urgent-mark: #4d1d16;
	}
}

/* The theme's page head is empty here - the H1 stands in the help head -
   and the floating help button would open help on the help page. */
.vb-has-faq .vb-page-head,
.vb-has-faq .vb-support__open {
	display: none;
}

/* ----- Head ---------------------------------------------------------------- */
.vb-faq__hero {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 0;
}

/* On a phone and a tablet the picture is a band with the title on it, and
   the search card sits on its lower edge, as in the graphic. */
.vb-faq__band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-block-size: 9.5rem;
	padding: 20px 18px 48px;
	border-radius: var(--vb-radius-lg, 22px);
	background: var(--vb-tint, #f3e2e7);
}

.vb-faq__visual {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.vb-faq__photo {
	inline-size: 100%;
	block-size: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	aspect-ratio: auto !important;
}

.vb-faq__photo img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: var(--vb-slide-pos, 72% 50%);
}

/* Dark: light type on the picture, darkened as on the home page. The lead
   takes the title's light ink there: in the lead's own grey it measured
   3.9:1 on the darkened wall, wherever the line stood (25.09.2026). */
:root[data-theme="dark"] .vb-faq__photo img {
	filter: brightness( 0.42 );
}

:root[data-theme="dark"] .vb-faq__hero.has-photo .vb-faq__intro {
	color: var(--vb-hero-ink, #30272b);
}

.vb-faq__head {
	position: relative;
	display: grid;
	gap: 4px;
	justify-items: start;
	max-inline-size: 60%;
}

.vb-faq__crumbs {
	display: none;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-size: var(--vb-text-small, 0.85rem);
	font-weight: 500;
	color: var(--vb-hero-ink, #30272b);
}

.vb-faq__crumbs a {
	color: inherit;
	text-decoration: none;
}

.vb-faq__crumbs a:hover,
.vb-faq__crumbs a:focus-visible {
	text-decoration: underline;
}

/* An opaque pill, never glass: the owner turned a translucent surface
   behind text down twice (23. and 24.09.2026). */
.vb-faq__eyebrow {
	display: none;
	align-items: center;
	gap: 6px;
	margin: 0 0 6px;
	padding: 4px 12px 4px 8px;
	font-size: var(--vb-text-small, 0.85rem);
	font-weight: 600;
	color: var(--vb-accent-text, #68192e);
	background: var(--vb-base, #fbf7f2);
	border-radius: var(--vb-radius-pill, 999px);
}

.vb-faq__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans, "AniLevia Sans"), system-ui, sans-serif;
	font-size: clamp( 1.85rem, 1.2rem + 2.6vw, 2.75rem );
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--vb-hero-ink, #30272b);
	text-wrap: balance;
}

.vb-faq__tagline {
	margin: 2px 0 0;
	font-size: clamp( 1.0625rem, 0.9rem + 0.9vw, 1.6rem );
	font-weight: 500;
	line-height: 1.2;
	color: var(--vb-hero-ink, #30272b);
}

.vb-faq__intro {
	display: none;
	margin: 6px 0 0;
	/* Measured 25.09.2026: at 30rem the line ran into the dog's fur (3.8:1
	   in dark mode), at 24rem its end touched the plant's leaves at 1024px
	   (3.1:1), at 22rem the English line did (3.9:1). At 20rem every line
	   ends on the wall. */
	max-inline-size: 20rem;
	font-size: var(--vb-text-lead, 1.0625rem);
	line-height: 1.5;
	color: var(--vb-hero-lead, #6b5b60);
}

/* The halo of the home page (owner, 24.09.2026, variant B): where the
   title stands on the picture, a soft glow in the ground's colour lifts the
   letters off it. The picture itself stays untouched. */
@media (max-width: 59.99rem) {
	.vb-faq__hero.has-photo .vb-faq__title,
	.vb-faq__hero.has-photo .vb-faq__tagline {
		text-shadow:
			0 0 1px var(--vb-hero-fog),
			0 0 6px var(--vb-hero-fog),
			0 0 12px var(--vb-hero-fog),
			0 0 20px color-mix( in srgb, var(--vb-hero-fog) 80%, transparent );
	}
}

.vb-faq__tools {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 14px;
	margin-block-start: -30px;
	padding-inline: 10px;
}

/* ----- Search -------------------------------------------------------------- */
.vb-faq__filter {
	margin: 0;
	padding: 12px 12px 10px;
	background: var(--vb-base, #fbf7f2);
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius, 16px);
	box-shadow: var(--vb-shadow);
}

.vb-faq__filter-label {
	display: block;
	margin: 0 0 6px 4px;
	font-size: var(--vb-text-small, 0.85rem);
	font-weight: 600;
	color: var(--vb-ink, #30272b);
}

.vb-faq__filter-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 4px 4px 12px;
	background: var(--vb-base, #fbf7f2);
	border: 1px solid var(--vb-field-line, #8c716e);
	border-radius: var(--vb-radius-sm, 11px);
}

.vb-faq__filter-wrap:focus-within {
	box-shadow: var(--vb-focus);
}

.vb-faq__filter-icon {
	flex: 0 0 auto;
	color: var(--vb-muted, #6b5b60);
}

.vb-faq__filter input {
	/* No width of its own: a search field's intrinsic size is about twenty
	   characters, and that was what pushed the row wider than the phone. */
	flex: 1 1 0;
	width: 0;
	min-width: 0;
	min-height: var(--vb-tap-primary, 44px);
	padding: 0 4px;
	/* 16px keeps iOS Safari from zooming when the field takes focus. */
	font-size: 16px;
	color: var(--vb-ink, #30272b);
	background: transparent;
	border: 0;
}

/* The ring is drawn around the whole field (focus-within above); the
   transparent outline is what forced colours turns into a visible one - on
   focus only, or the field would look focused all the time there. */
.vb-faq__filter input:focus {
	outline: 2px solid transparent;
}

/* The field's own clear cross would sit beside ours. */
.vb-faq__filter input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.vb-faq__filter-clear {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	inline-size: var(--vb-tap-primary, 44px);
	block-size: var(--vb-tap-primary, 44px);
	padding: 0;
	color: var(--vb-muted, #6b5b60);
	background: transparent;
	border: 0;
	border-radius: var(--vb-radius-pill, 999px);
	cursor: pointer;
}

.vb-faq__filter-clear:hover {
	color: var(--vb-ink, #30272b);
	background: var(--vb-neutral-soft, #efe9e6);
}

.vb-faq__filter-clear:focus-visible {
	outline: 2px solid transparent;
	box-shadow: var(--vb-focus);
}

.vb-faq__filter-go {
	flex: 0 0 auto;
	min-height: var(--vb-tap-primary, 44px);
	padding-inline: 18px;
}

.vb-faq__examples {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 4px;
	margin: 8px 0 0 4px;
	font-size: var(--vb-text-small, 0.85rem);
	color: var(--vb-muted, #6b5b60);
}

.vb-faq__examples > span {
	font-weight: 600;
	color: var(--vb-accent-text, #68192e);
}

.vb-faq__example {
	min-height: var(--vb-tap-min, 24px);
	padding: 2px 6px;
	font: inherit;
	color: var(--vb-ink, #30272b);
	background: transparent;
	border: 0;
	border-radius: var(--vb-radius-xs, 6px);
	text-decoration: underline;
	text-decoration-color: var(--vb-line-strong, #c7b1aa);
	text-underline-offset: 3px;
	cursor: pointer;
}

.vb-faq__example:hover {
	text-decoration-color: currentColor;
}

.vb-faq__example:focus-visible {
	outline: 2px solid transparent;
	box-shadow: var(--vb-focus);
}

.vb-faq.is-searching .vb-faq__examples {
	display: none;
}

/* A phone keeps the way to the topics short: the graphic draws the search
   there without words to try. */
@media (max-width: 39.99rem) {
	.vb-faq__examples {
		display: none;
	}
}

/* On a small phone the typed word needs the room: while something is typed
   the magnifier steps aside for the clear button, and the button is a
   little narrower. Measured 25.09.2026: 52px of field at 320px without
   this. */
@media (max-width: 29.99rem) {
	.vb-faq.is-searching .vb-faq__filter-icon {
		display: none;
	}

	.vb-faq__filter-go {
		padding-inline: 12px;
	}
}

.vb-faq__count {
	margin: 8px 0 0 4px;
	font-size: var(--vb-text-small, 0.85rem);
	font-weight: 600;
	color: var(--vb-accent-text, #68192e);
}

.vb-faq__count:empty {
	display: none;
}

/* ----- Audience switch ----------------------------------------------------- */
/* A choice, not two calls to action (spec §30): moderate height, a clear
   selected state, no lift. On a phone the label is read, not shown - the
   graphic draws the switch alone there. */
.vb-faq__who-label {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

.vb-faq__switch {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 8px;
}

.vb-faq__tab {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 8px;
	min-width: 0;
	min-height: var(--vb-tap-primary, 44px);
	padding: 8px 14px;
	font-size: var(--vb-text-body, 1rem);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: var(--vb-ink, #30272b);
	background: var(--vb-base, #fbf7f2);
	border: 1px solid var(--vb-line-strong, #c7b1aa);
	border-radius: var(--vb-radius-sm, 11px);
}

.vb-faq__tab:hover {
	border-color: var(--vb-field-line, #8c716e);
}

.vb-faq__tab:focus-visible {
	outline: 2px solid transparent;
	box-shadow: var(--vb-focus);
}

.vb-faq__tab.is-active {
	/* --vb-primary-dark, not --vb-primary: white on #14b870 measures 2.59:1
	   and fails 1.4.3 outright; on #0c7a4a it measures 5.39:1. The EDGE is
	   the accent text colour, because primary-dark on the dark page ground
	   reads 2.8:1. */
	background: var(--vb-primary-dark, #68192e);
	border-color: var(--vb-accent-text, #68192e);
	color: #fff;
}

/* :root:root beats the dark link rule, which would otherwise paint green
   on green. */
:root:root .vb-faq__tab.is-active {
	color: #fff;
}

/* A long label ("Para estabelecimentos") breaks rather than pushing the
   count out of the tab at 320px; the count drops below it if it must. */
.vb-faq__tab-label {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* How many answers each side has, while searching. */
.vb-faq__tab-count:empty {
	display: none;
}

.vb-faq__tab-count {
	min-inline-size: 1.6em;
	padding: 1px 6px;
	font-size: var(--vb-text-caption, 0.78rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--vb-accent-text, #68192e);
	background: var(--vb-primary-soft, #f3e2e7);
	border-radius: var(--vb-radius-pill, 999px);
}

.vb-faq__tab.is-active .vb-faq__tab-count {
	/* A pair that turns dark together: primary-dark stays fixed in dark
	   mode while the base goes dark, 3.2:1 (review of 25.09.2026). */
	color: var(--vb-accent-text, #68192e);
	background: var(--vb-base, #fbf7f2);
}

/* ----- Topics -------------------------------------------------------------- */
.vb-faq__topics {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 10px;
}

.vb-faq__topics-title {
	margin: 0;
	font-size: clamp( 1.25rem, 1.1rem + 0.6vw, 1.5rem );
	font-weight: 700;
	line-height: 1.25;
}

/* Part of the heading, and only needed where both audiences stand one
   above the other (without the script). */
.vb-faq__topics-for {
	display: block;
	margin-top: 2px;
	font-size: var(--vb-text-small, 0.85rem);
	font-weight: 600;
	color: var(--vb-muted, #6b5b60);
}

.vb-faq.is-enhanced .vb-faq__topics-for {
	display: none;
}

.vb-faq__topic-list {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vb-faq__topic-item {
	--vb-faq-tile: var(--vb-faq-tone-1);
	--vb-faq-mark: var(--vb-faq-tone-1-mark);
	--vb-faq-mark-ink: var(--vb-faq-tone-1-ink);
	margin: 0;
}

.vb-faq__topic-item[data-tone="2"] {
	--vb-faq-tile: var(--vb-faq-tone-2);
	--vb-faq-mark: var(--vb-faq-tone-2-mark);
	--vb-faq-mark-ink: var(--vb-faq-tone-2-ink);
}

.vb-faq__topic-item[data-tone="3"] {
	--vb-faq-tile: var(--vb-faq-tone-3);
	--vb-faq-mark: var(--vb-faq-tone-3-mark);
	--vb-faq-mark-ink: var(--vb-faq-tone-3-ink);
}

.vb-faq__topic-item[data-tone="4"] {
	--vb-faq-tile: var(--vb-faq-tone-4);
	--vb-faq-mark: var(--vb-faq-tone-4-mark);
	--vb-faq-mark-ink: var(--vb-faq-tone-4-ink);
}

.vb-faq__topic-item--urgent {
	--vb-faq-tile: var(--vb-danger-soft, #ffece6);
	--vb-faq-mark: var(--vb-faq-urgent-mark);
	--vb-faq-mark-ink: var(--vb-danger-text-strong, #b52216);
}

/* A phone reads the topics as a list, one row each with the way on at the
   end (graphic, phone and tablet upright). */
.vb-faq__topic {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr ) auto;
	align-items: center;
	gap: 14px;
	min-height: 60px;
	padding: 10px 12px 10px 10px;
	color: var(--vb-ink, #30272b);
	text-decoration: none;
	background: var(--vb-base, #fbf7f2);
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius, 16px);
}

.vb-faq__topic:hover {
	border-color: var(--vb-line-strong, #c7b1aa);
	background: var(--vb-faq-tile);
}

/* A tile is a target, not a word in a sentence: no underline on hover, and
   its name in ink - :root:root beats the dark scheme's link rule, which
   would paint every tile, topic and way green (measured 25.09.2026). */
.vb-faq__topic:hover,
.vb-faq__toc-link:hover {
	text-decoration: none;
}

:root:root .vb-faq__topic,
:root:root .vb-faq__toc-link,
:root:root .vb-faq__way-link {
	color: var(--vb-ink, #30272b);
}

:root:root .vb-faq__way--urgent .vb-faq__way-link {
	color: var(--vb-danger-text-strong, #b52216);
}

:root:root .vb-faq__crumbs a {
	color: inherit;
}

.vb-faq__topic:focus-visible {
	outline: 2px solid transparent;
	box-shadow: var(--vb-focus);
}

.vb-faq__topic.is-current {
	border-color: var(--vb-accent-text, #68192e);
}

.vb-faq__topic-mark {
	display: inline-grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	color: var(--vb-faq-mark-ink);
	background: var(--vb-faq-mark);
	border-radius: var(--vb-radius-sm, 11px);
}

.vb-faq__topic-text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.vb-faq__topic-name {
	font-weight: 600;
	line-height: 1.3;
}

.vb-faq__topic-meta {
	font-size: var(--vb-text-small, 0.85rem);
	color: var(--vb-muted, #6b5b60);
}

.vb-faq__topic-go {
	display: inline-grid;
	place-items: center;
	color: var(--vb-muted, #6b5b60);
}

.vb-faq__topic--urgent {
	background: var(--vb-danger-soft, #ffece6);
	border-color: color-mix( in srgb, var(--vb-danger-text-strong, #b52216) 35%, transparent );
}

.vb-faq__topic--urgent .vb-faq__topic-name,
.vb-faq__topic--urgent .vb-faq__topic-go {
	color: var(--vb-danger-text-strong, #b52216);
}

.vb-faq__topic--urgent .vb-faq__topic-meta {
	color: var(--vb-danger-ink, #b52216);
}

.vb-faq__topic--urgent:hover {
	background: var(--vb-danger-soft, #ffece6);
	border-color: var(--vb-danger-text-strong, #b52216);
}

/* ----- Workspace ----------------------------------------------------------- */
.vb-faq__workspace {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 32px;
	align-items: start;
}

.vb-faq__main {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 0;
	min-width: 0;
}

.vb-faq__lead {
	margin: 0 0 20px;
	max-inline-size: var(--vb-faq-read);
	color: var(--vb-muted, #6b5b60);
}

.vb-faq__back {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: var(--vb-tap-primary, 44px);
	margin: 0 0 8px;
	font-weight: 600;
	color: var(--vb-accent-text, #68192e);
	text-decoration: none;
}

.vb-faq__back:focus-visible {
	outline: 2px solid transparent;
	box-shadow: var(--vb-focus);
	border-radius: var(--vb-radius-xs, 6px);
}

/* ----- Questions ----------------------------------------------------------- */
/* A little air above whatever a link jumps to. The sticky header is kept
   clear site-wide by html's scroll-padding-top; the header's height here as
   well stopped a topic link 218px down the screen (measured 25.09.2026). */
.vb-faq__group {
	scroll-margin-top: 12px;
}

.vb-faq__group {
	margin: 0 0 36px;
	max-inline-size: calc( var(--vb-faq-read) + 48px );
}

.vb-faq__group-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	margin: 0 0 12px;
}

.vb-faq__cat {
	margin: 0;
	font-size: clamp( 1.375rem, 1.2rem + 0.6vw, 1.625rem );
	font-weight: 700;
	line-height: 1.25;
}

.vb-faq__group-count {
	margin: 0;
	font-size: var(--vb-text-small, 0.85rem);
	font-weight: 500;
	color: var(--vb-muted, #6b5b60);
}

.vb-faq__rows {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 8px;
}

/* Each question a quiet row with its own edge, as the graphic draws the
   list - no shadow, no lift (spec §47). */
.vb-faq__item {
	scroll-margin-top: 12px;
	background: var(--vb-base, #fbf7f2);
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius-sm, 11px);
}

.vb-faq__item[open] {
	border-color: var(--vb-line-strong, #c7b1aa);
}

.vb-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 56px;
	padding: 12px 14px 12px 18px;
	cursor: pointer;
	font-size: var(--vb-text-lead, 1.0625rem);
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
	border-radius: var(--vb-radius-sm, 11px);
}

.vb-faq__q::-webkit-details-marker {
	display: none;
}

.vb-faq__q:focus-visible {
	outline: 2px solid transparent;
	box-shadow: var(--vb-focus);
}

/* A chevron that turns, drawn from two borders so it takes the text colour
   in every mode - forced colours included. */
.vb-faq__q::after {
	content: "";
	flex: 0 0 auto;
	inline-size: 9px;
	block-size: 9px;
	margin: 0 6px 4px 0;
	border-right: 2px solid var(--vb-accent-text, #68192e);
	border-bottom: 2px solid var(--vb-accent-text, #68192e);
	transform: rotate( 45deg );
	transition: transform 180ms ease;
}

.vb-faq__item[open] > .vb-faq__q::after {
	margin-block: 4px 0;
	transform: rotate( -135deg );
}

.vb-faq__q:hover {
	color: var(--vb-accent-text, #68192e);
}

.vb-faq__a {
	overflow: hidden;
	transition: height 180ms ease-out;
}

.vb-faq__a-inner {
	padding: 0 18px 18px;
	max-width: var(--vb-faq-read);
	color: var(--vb-muted, #6b5b60);
	font-size: var(--vb-text-body, 1rem);
	line-height: 1.65;
}

.vb-faq__a-inner p {
	margin: 0 0 0.8em;
}

.vb-faq__a-inner p:last-child {
	margin-bottom: 0;
}

.vb-faq__link {
	margin: 12px 0 0;
	font-size: var(--vb-text-label, 0.9rem);
	font-weight: 600;
}

.vb-faq__link a {
	/* A link on its own line is a target, not a word in a sentence: measured
	   7.9. it was 361x18px with a neighbour 15px away, which fails the WCAG
	   minimum and its spacing exception at once. inline-flex rather than
	   padding, so the line box grows and nothing shifts around it. */
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--vb-tap-min, 24px);
	color: var(--vb-accent-text, #68192e);
}

/* Where to act, and where to read: an arrow for the first, a book mark for
   the second (spec §53-§54). */
.vb-faq__link a::before {
	content: "\2192";
	text-decoration: none;
}

.vb-faq__link--guide a::before {
	content: "\2197";
}

/* ----- Nothing found ------------------------------------------------------- */
.vb-faq__empty {
	display: grid;
	justify-items: start;
	gap: 10px;
	margin: 0 0 32px;
	padding: 20px;
	max-inline-size: calc( var(--vb-faq-read) + 48px );
	color: var(--vb-muted, #6b5b60);
	background: var(--vb-base, #fbf7f2);
	border: 1px dashed var(--vb-line-strong, #c7b1aa);
	border-radius: var(--vb-radius, 16px);
}

.vb-faq__empty-icon {
	color: var(--vb-accent-text, #68192e);
}

.vb-faq__empty-text {
	margin: 0;
	color: var(--vb-ink, #30272b);
}

.vb-faq__empty-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

/* ----- Beside the questions ------------------------------------------------ */
.vb-faq__side {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 20px;
	align-content: start;
}

.vb-faq__toc {
	display: none;
}

.vb-faq__contact {
	padding: 20px;
	/* The brand's soft ground in both schemes (AniLevia, #408): the mint
	   card of the green palette, not a status - green belongs to success. */
	background: var(--vb-primary-soft, #f3e2e7);
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius-lg, 22px);
}

.vb-faq__contact-title {
	margin: 0;
	font-size: clamp( 1.25rem, 1.1rem + 0.6vw, 1.5rem );
	font-weight: 700;
	line-height: 1.25;
}

.vb-faq__contact-lead {
	margin: 4px 0 14px;
	color: var(--vb-muted, #6b5b60);
}

.vb-faq__ways {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vb-faq__way {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	align-items: center;
	gap: 12px;
	margin: 0;
}

.vb-faq__way-mark {
	display: inline-grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	color: #fff;
	background: var(--vb-primary-dark, #68192e);
	border-radius: var(--vb-radius-sm, 11px);
}

.vb-faq__way--urgent .vb-faq__way-mark {
	background: var(--vb-danger-text-strong, #b52216);
}

:root[data-theme="dark"] .vb-faq__way--urgent .vb-faq__way-mark {
	color: #2a0d09;
}

.vb-faq__way-text {
	display: grid;
	gap: 1px;
	min-width: 0;
}

/* A link and a button that look alike: both are ways to somebody. */
.vb-faq__way-link {
	justify-self: start;
	min-height: var(--vb-tap-min, 24px);
	padding: 0;
	font: inherit;
	font-weight: 700;
	text-align: start;
	color: var(--vb-ink, #30272b);
	background: none;
	border: 0;
	text-decoration: underline;
	text-decoration-color: var(--vb-line-strong, #c7b1aa);
	text-underline-offset: 3px;
	cursor: pointer;
}

.vb-faq__way-link:hover {
	text-decoration-color: currentColor;
}

.vb-faq__way-link:focus-visible {
	outline: 2px solid transparent;
	box-shadow: var(--vb-focus);
	border-radius: var(--vb-radius-xs, 6px);
}

.vb-faq__way--urgent .vb-faq__way-link {
	color: var(--vb-danger-text-strong, #b52216);
}

.vb-faq__way-meta {
	font-size: var(--vb-text-small, 0.85rem);
	color: var(--vb-muted, #6b5b60);
	overflow-wrap: anywhere;
}

.vb-faq__complaint {
	margin: 16px 0 0;
	padding-top: 14px;
	font-size: var(--vb-text-small, 0.85rem);
	color: var(--vb-muted, #6b5b60);
	border-top: 1px solid var(--vb-line, #d9c7c1);
}

.vb-faq__complaint a {
	color: var(--vb-accent-text, #68192e);
}

/* ----- Phone: one topic at a time ------------------------------------------
   With the script, a phone shows the topic list first and one topic after
   a tap, with "All topics" above it (spec §81). A search shows every match
   of the audience instead. Without the script everything stays on the
   page. */
@media (max-width: 59.99rem) {
	.vb-faq.is-enhanced:not(.is-searching) .vb-faq__group:not(.is-chosen) {
		display: none;
	}

	/* Read, not shown: the tab panel keeps a line for a screen reader
	   while its topics stand above it. */
	.vb-faq.is-enhanced:not(.is-searching) .vb-faq__lead {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset( 50% );
		white-space: nowrap;
	}

	.vb-faq.is-enhanced.has-topic:not(.is-searching) .vb-faq__topics {
		display: none;
	}

	.vb-faq.is-enhanced.has-topic:not(.is-searching) .vb-faq__back {
		display: inline-flex;
	}

	/* While searching the topics step aside for the answers (spec §84). */
	.vb-faq.is-searching .vb-faq__topics {
		display: none;
	}
}

/* The installed app draws its topics as a grid of tiles (graphic, PWA):
   two by two, which is what both audiences hold. */
@media all and (display-mode: standalone) and (max-width: 59.99rem) {
	.vb-faq__topic-list {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.vb-faq__topic {
		grid-template-columns: minmax( 0, 1fr );
		justify-items: center;
		gap: 8px;
		min-height: 112px;
		padding: 14px 10px;
		text-align: center;
		background: var(--vb-faq-tile);
		border-color: transparent;
	}

	.vb-faq__topic-go {
		display: none;
	}
}

/* ----- Tablet upright ------------------------------------------------------ */
@media (min-width: 40rem) {
	.vb-faq__band {
		min-block-size: 12rem;
		padding: 28px 28px 56px;
	}

	.vb-faq__head {
		max-inline-size: 55%;
	}

	.vb-faq__eyebrow {
		display: inline-flex;
	}

	.vb-faq__tools {
		padding-inline: 16px;
	}
}

/* ----- Tablet across and desktop: the whole head is the picture ------------
   The search and the switch stand on the picture's lower edge, on opaque
   cards (graphic, desktop and tablet across). The band gives up its box so
   the picture spans the head. */
@media (min-width: 60rem) {
	.vb-faq {
		gap: 32px;
	}

	.vb-faq__hero {
		overflow: hidden;
		gap: 24px;
		min-block-size: 25rem;
		padding: 28px 36px 32px;
		align-content: space-between;
		border-radius: var(--vb-radius-lg, 22px);
		background: var(--vb-tint, #f3e2e7);
	}

	.vb-faq__band {
		position: static;
		overflow: visible;
		min-block-size: 0;
		padding: 0;
		border-radius: 0;
		background: none;
	}

	.vb-faq__head {
		max-inline-size: 30rem;
	}

	/* The zoom of the home page's head: set per picture, anchored left, so
	   the animals move right, away from title and search. */
	.vb-faq__photo img {
		transform: scale( var(--vb-slide-zoom, 1) );
		transform-origin: left center;
	}

	.vb-faq__crumbs {
		display: flex;
	}

	.vb-faq__intro {
		display: block;
	}

	.vb-faq__tools {
		grid-template-columns: minmax( 0, 1fr ) minmax( 16rem, 20rem );
		align-items: end;
		gap: 16px;
		margin: 0;
		padding: 0;
	}

	.vb-faq__who {
		padding: 12px 14px 14px;
		background: var(--vb-base, #fbf7f2);
		border: 1px solid var(--vb-line, #d9c7c1);
		border-radius: var(--vb-radius, 16px);
		box-shadow: var(--vb-shadow);
	}

	.vb-faq__who-label {
		position: static;
		inline-size: auto;
		block-size: auto;
		overflow: visible;
		clip-path: none;
		margin: 0 0 8px 2px;
		font-size: var(--vb-text-small, 0.85rem);
		font-weight: 600;
		color: var(--vb-ink, #30272b);
	}

	/* The tiles of the graphic: mark on top, name, a line, the way on. */
	.vb-faq__topics-title {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset( 50% );
		white-space: nowrap;
	}

	.vb-faq__topic-list {
		grid-template-columns: repeat( auto-fit, minmax( 12rem, 1fr ) );
		gap: 14px;
	}

	.vb-faq__topic {
		grid-template-columns: minmax( 0, 1fr );
		justify-items: center;
		align-content: start;
		gap: 10px;
		min-height: 11rem;
		padding: 20px 16px 16px;
		text-align: center;
		background: var(--vb-faq-tile);
		border-color: transparent;
	}

	.vb-faq__topic:hover {
		background: var(--vb-faq-tile);
		border-color: var(--vb-faq-mark-ink);
	}

	.vb-faq__topic.is-current {
		border-color: var(--vb-faq-mark-ink);
	}

	.vb-faq__topic-mark {
		inline-size: 48px;
		block-size: 48px;
		background: var(--vb-faq-mark);
		border-radius: var(--vb-radius, 16px);
	}

	.vb-faq__topic-name {
		font-size: var(--vb-text-lead, 1.0625rem);
	}

	.vb-faq__topic-go {
		inline-size: 32px;
		block-size: 32px;
		margin-top: auto;
		color: var(--vb-ink, #30272b);
		background: var(--vb-base, #fbf7f2);
		border-radius: var(--vb-radius-pill, 999px);
	}

	.vb-faq__topic--urgent .vb-faq__topic-go {
		color: var(--vb-danger-text-strong, #b52216);
	}
}

/* ----- Desktop: questions and the column beside them ----------------------- */
@media (min-width: 80rem) {
	.vb-faq__hero {
		min-block-size: 27rem;
		padding: 32px 44px 36px;
	}

	.vb-faq__workspace {
		grid-template-columns: minmax( 0, 1fr ) 17rem;
		gap: 48px;
	}

	/* The column runs the height of the questions; the ways to a person
	   stand at its top, and only the short topic list follows the scroll.
	   The whole column stuck before, and at 775-833px it was taller than a
	   1366x768 or 1280x800 screen (review of 25.09.2026). */
	.vb-faq__side {
		align-self: stretch;
	}

	.vb-faq__toc {
		position: sticky;
		/* Under the header and the reading trail's band (site.css, #212). */
		top: calc( var(--vb-header-h, 63px) + var(--vb-progress-h, 0px) + 24px );
		display: block;
		padding: 16px;
		background: var(--vb-base, #fbf7f2);
		border: 1px solid var(--vb-line, #d9c7c1);
		border-radius: var(--vb-radius-lg, 22px);
	}

	.vb-faq__toc-title {
		margin: 0 0 8px 6px;
		font-size: var(--vb-text-caption, 0.78rem);
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--vb-muted, #6b5b60);
	}

	.vb-faq__toc ul {
		display: grid;
		gap: 2px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.vb-faq__toc-link {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: var(--vb-tap-primary, 44px);
		padding: 6px 10px;
		font-weight: 600;
		line-height: 1.3;
		color: var(--vb-ink, #30272b);
		text-decoration: none;
		border-radius: var(--vb-radius-sm, 11px);
	}

	.vb-faq__toc-link .vb-ic {
		flex: 0 0 auto;
		color: var(--vb-accent-text, #68192e);
	}

	.vb-faq__toc-link:hover {
		background: var(--vb-surface, #f2e7df);
	}

	.vb-faq__toc-link:focus-visible {
		outline: 2px solid transparent;
		box-shadow: var(--vb-focus);
	}

	/* Where the reader is: a filled row and a bar - more than colour. */
	.vb-faq__toc-link.is-current {
		background: var(--vb-primary-soft, #f3e2e7);
		box-shadow: inset 3px 0 0 var(--vb-accent-text, #68192e);
	}
}

/* ----- Calm view ------------------------------------------------------------
   Less around the questions, nothing taken from them (spec §94-§99): no
   picture, no column beside, no lead, no words to try, and the tiles
   become a plain row of topics.

   Decoration and repetition go for good: the picture, the eyebrow that
   repeats the title, and the side list of topics, whose every link is also
   a tile above. What helps - the introduction, the words to try, the lead
   of each audience, the line under each topic - comes back with "Show
   more" in the head (Aufgabe #146, docs/RUHIGE-ANSICHT.md). */
:root[data-focus="reduced"] .vb-faq__visual,
:root[data-focus="reduced"] .vb-faq__eyebrow,
:root[data-focus="reduced"] .vb-faq__toc {
	display: none;
}

:root[data-focus="reduced"] [data-vb-calm]:not([data-vb-calm-open]) .vb-faq__intro,
:root[data-focus="reduced"] [data-vb-calm]:not([data-vb-calm-open]) .vb-faq__lead,
:root[data-focus="reduced"] [data-vb-calm]:not([data-vb-calm-open]) .vb-faq__examples,
:root[data-focus="reduced"] [data-vb-calm]:not([data-vb-calm-open]) .vb-faq__topic-meta {
	display: none;
}

:root[data-focus="reduced"] .vb-faq__hero,
:root[data-focus="reduced"] .vb-faq__band {
	min-block-size: 0;
	background: none;
}

:root[data-focus="reduced"] .vb-faq__title,
:root[data-focus="reduced"] .vb-faq__tagline {
	text-shadow: none;
}

:root[data-focus="reduced"] .vb-faq__topic,
:root[data-focus="reduced"] .vb-faq__topic:hover {
	min-height: 0;
	background: var(--vb-base, #fbf7f2);
	border-color: var(--vb-line, #d9c7c1);
}

/* What carries meaning stays: the topic being read, and the emergency's
   red edge. */
:root[data-focus="reduced"] .vb-faq__topic.is-current {
	border-color: var(--vb-accent-text, #68192e);
}

:root[data-focus="reduced"] .vb-faq__topic--urgent,
:root[data-focus="reduced"] .vb-faq__topic--urgent:hover {
	border-color: var(--vb-danger-text-strong, #b52216);
}

:root[data-focus="reduced"] .vb-faq__filter,
:root[data-focus="reduced"] .vb-faq__who {
	box-shadow: none;
}

@media (min-width: 60rem) {
	/* No picture to clip, and the breadcrumb's focus ring sits on the
	   edge. */
	:root[data-focus="reduced"] .vb-faq__hero {
		overflow: visible;
		padding: 0;
		border-radius: 0;
	}

	:root[data-focus="reduced"] .vb-faq__topic {
		grid-template-columns: auto minmax( 0, 1fr );
		justify-items: start;
		align-items: center;
		align-content: center;
		min-height: 56px;
		padding: 8px 14px;
		text-align: start;
	}

	:root[data-focus="reduced"] .vb-faq__topic-mark {
		inline-size: 32px;
		block-size: 32px;
	}

	:root[data-focus="reduced"] .vb-faq__topic-go {
		display: none;
	}
}

@media (min-width: 80rem) {
	/* No sticky column: the questions and, after them, the way to a
	   person (spec §95). */
	:root[data-focus="reduced"] .vb-faq__workspace {
		grid-template-columns: minmax( 0, 1fr );
	}

	:root[data-focus="reduced"] .vb-faq__side {
		position: static;
		max-inline-size: calc( var(--vb-faq-read) + 48px );
	}
}

/* ----- Less motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.vb-faq__a,
	.vb-faq__q::after {
		transition: none;
	}
}

/* ----- Forced colours ------------------------------------------------------
   The selected tab and the topic being read were a fill and an inset
   shadow, both of which the mode throws away: the chosen one looked like
   the others (review of 25.09.2026). The reader's own highlight pair says
   it instead, as site.css does for the navigation. */
@media (forced-colors: active) {
	.vb-faq__tab.is-active,
	.vb-faq__toc-link.is-current,
	.vb-faq__topic.is-current {
		background: Highlight;
		color: HighlightText;
	}
}