/**
 * WKNZ FAQ: one stylesheet for every layout (CSS-01).
 *
 * Everything sits in the `wknz-faq` layer, so any normal theme rule wins
 * without a specificity fight. Basics only: structure, colours, focus and
 * touch targets. Fonts, sizes and spacing beyond that are the theme's job.
 * Colours are custom properties on `.wknz-faq` (CSS-02); colours saved in
 * settings are added to this layer after this file.
 */

/* stylelint-disable selector-class-pattern -- the spec names the layout modifiers and parts BEM-style (.wknz-faq--accordion, .wknz-faq__more). */

@layer wknz-faq {
	/* Wrapper and tokens */
	.wknz-faq {
		--wknz-faq-heading: #2a3d0c;
		--wknz-faq-heading-hover: #587920;
		--wknz-faq-subheading: #3f5a14;
		--wknz-faq-subheading-hover: #587920;
		--wknz-faq-text: #1f2421;
		--wknz-faq-accent: #587920;
		--wknz-faq-surface: #f5f7f0;
		--wknz-faq-border: #858f72;
		--wknz-faq-radius: 0.5rem;
		--wknz-faq-gap: 1rem;
		--wknz-faq-card-min: 18.75rem;

		display: flex;
		flex-direction: column;
		gap: calc(var(--wknz-faq-gap) * 2.5);
		color: var(--wknz-faq-text);
	}

	.wknz-faq :focus-visible {
		outline: 3px solid var(--wknz-faq-accent);
		outline-offset: 2px;
		box-shadow: 0 0 0 7px #fff;
	}

	.wknz-faq .screen-reader-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* Accordion: jump links */
	.wknz-faq--accordion > nav ul {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.wknz-faq--accordion > nav a {
		display: inline-flex;
		align-items: center;
		min-block-size: 2.75rem;
		padding-inline: 1rem;
		border: 1px solid var(--wknz-faq-border);
		border-radius: 999px;
		color: var(--wknz-faq-subheading);
		text-decoration: none;
	}

	.wknz-faq--accordion > nav a:hover {
		border-color: var(--wknz-faq-accent);
		color: var(--wknz-faq-subheading-hover);
	}

	/*
	 * Groups and headings. The layout sits on the <div> in each group (and
	 * the <span> in each summary), never on section, article or summary:
	 * theme resets restyle those (Bootstrap's `section { display: block }`,
	 * `summary { display: list-item }`), and any unlayered rule beats this
	 * layer. No reset touches div or span.
	 */
	.wknz-faq > section > :is(h2, h3, h4, h5, h6) {
		margin: 0;
		color: var(--wknz-faq-heading);
	}

	/* A group's questions and sub-category headings; with group="no", all the questions. */
	.wknz-faq > section > div,
	.wknz-faq--accordion > div,
	.wknz-faq--list > div {
		display: flex;
		flex-direction: column;
		gap: var(--wknz-faq-gap);
	}

	.wknz-faq > section > div {
		margin-block-start: var(--wknz-faq-gap);
	}

	/* Sub-category headings: padding, not margin, which resets set on headings. */
	.wknz-faq > section > div > :is(h3, h4, h5, h6) {
		margin: 0;
		padding-block-start: calc(var(--wknz-faq-gap) * 0.75);
		color: var(--wknz-faq-subheading);
	}

	/* Accordion */
	.wknz-faq--accordion details {
		border: 1px solid var(--wknz-faq-border);
		border-radius: var(--wknz-faq-radius);
		background: #fff;
	}

	.wknz-faq--accordion details[open] {
		background: var(--wknz-faq-surface);
	}

	.wknz-faq--accordion summary {
		min-block-size: 2.75rem;
		padding-block: 1rem;
		padding-inline: 1.25rem;
		color: var(--wknz-faq-subheading);
		cursor: pointer;
		list-style: none;
	}

	/* The question and its arrow. */
	.wknz-faq--accordion summary > span {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;

		/* A long word (a URL, a product code) wraps rather than widening the page (#9). */
		overflow-wrap: anywhere;
	}

	.wknz-faq--accordion summary::-webkit-details-marker {
		display: none;
	}

	.wknz-faq--accordion summary:hover {
		color: var(--wknz-faq-subheading-hover);
	}

	.wknz-faq--accordion summary svg {
		flex: 0 0 auto;
		transition: transform 0.2s;
	}

	.wknz-faq--accordion details[open] > summary svg {
		transform: rotate(180deg);
	}

	/* Answer, with the optional image above it on narrow screens. */
	.wknz-faq--accordion details > div {
		display: flex;
		flex-direction: column-reverse;
		gap: 1.5rem;
		padding-block-end: 1.25rem;
		padding-inline: 1.25rem;
	}

	.wknz-faq--accordion details > div > div {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		gap: 0.75rem;

		/* A flex item can't shrink below its longest word without these (#9). */
		min-inline-size: 0;
		overflow-wrap: anywhere;
	}

	.wknz-faq--accordion details > div > div > * {
		margin: 0;
	}

	.wknz-faq figure {
		margin: 0;
	}

	.wknz-faq figure img {
		display: block;
		max-inline-size: 100%;
		block-size: auto;
		border-radius: var(--wknz-faq-radius);
	}

	/* Read more */
	.wknz-faq .wknz-faq__more {
		display: inline-flex;
		align-items: center;
		align-self: flex-start;
		min-block-size: 2.75rem;
		color: var(--wknz-faq-accent);
		text-underline-offset: 0.2em;
	}

	.wknz-faq .wknz-faq__more:hover {
		color: var(--wknz-faq-heading-hover);
	}

	/* The new-tab icon (#16). */
	.wknz-faq .wknz-faq__more svg {
		flex: 0 0 auto;
		margin-inline-start: 0.25em;
	}

	/* Cards: filters, count and cards */
	.wknz-faq--cards > [role="group"] {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.wknz-faq--cards > [role="group"] button {
		min-block-size: 2.75rem;
		padding-inline: 1rem;
		border: 1px solid var(--wknz-faq-border);
		border-radius: 999px;
		background: #fff;
		color: var(--wknz-faq-subheading);
		font: inherit;
		cursor: pointer;
	}

	.wknz-faq--cards > [role="group"] button:hover {
		border-color: var(--wknz-faq-accent);
		color: var(--wknz-faq-subheading-hover);
	}

	.wknz-faq--cards > [role="group"] button[aria-pressed="true"] {
		border-color: var(--wknz-faq-accent);
		background: var(--wknz-faq-accent);
		color: #fff;
	}

	.wknz-faq--cards > p {
		margin: 0;
	}

	.wknz-faq--cards > ul {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wknz-faq-gap);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/*
	 * Cards wrap by their minimum width, --wknz-faq-card-min (300px by
	 * default: three a row in a 1080px container), never wider than the
	 * list, with the image above the answer at every width.
	 */
	.wknz-faq--cards > ul > li {
		box-sizing: border-box;
		display: flex;
		flex: 1 1 min(var(--wknz-faq-card-min), 100%);
		flex-direction: column-reverse;
		justify-content: flex-end;
		min-inline-size: 0;
		overflow: hidden;
		border: 1px solid var(--wknz-faq-border);
		border-radius: var(--wknz-faq-radius);
		background: #fff;
	}

	/* The filters hide cards; a layered display rule would otherwise beat [hidden]. */
	.wknz-faq--cards > ul > li[hidden] {
		display: none;
	}

	.wknz-faq--cards > ul > li > div {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		gap: 0.75rem;
		padding: 1.25rem;
		overflow-wrap: anywhere;
	}

	.wknz-faq--cards > ul > li > div > * {
		margin: 0;
	}

	.wknz-faq--cards > ul > li > div > :is(h2, h3, h4, h5, h6) {
		color: var(--wknz-faq-subheading);
	}

	/* The card's filter label */
	.wknz-faq--cards > ul > li > div > span {
		align-self: flex-start;
		padding-block: 0.125rem;
		padding-inline: 0.625rem;
		border-radius: var(--wknz-faq-radius);
		background: var(--wknz-faq-surface);
	}

	.wknz-faq--cards .wknz-faq__more {
		margin-block-start: auto;
	}

	.wknz-faq--cards figure img {
		inline-size: 100%;
		border-radius: 0;
	}

	/* List: index, blocks and "Back to all questions" */
	.wknz-faq--list > nav {
		padding: 1.5rem;
		border-radius: var(--wknz-faq-radius);
		background: var(--wknz-faq-surface);
		overflow-wrap: anywhere;
	}

	.wknz-faq--list > nav ul {
		display: flex;
		flex-direction: column;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.wknz-faq--list > nav ul ul {
		padding-inline-start: 1rem;
	}

	/* Grouped: the categories side by side where there is room. */
	.wknz-faq--list > nav > ul:has(> li > span) {
		flex-flow: row wrap;
		gap: 1.5rem 3rem;
	}

	.wknz-faq--list > nav > ul:has(> li > span) > li {
		flex: 1 1 14rem;
	}

	.wknz-faq--list > nav li > span {
		display: block;
		margin-block-start: 0.5rem;
		color: var(--wknz-faq-heading);
		font-weight: 600;
	}

	.wknz-faq--list > nav a {
		display: inline-flex;
		align-items: center;
		min-block-size: 2.75rem;
		color: var(--wknz-faq-subheading);
		text-underline-offset: 0.2em;
	}

	.wknz-faq--list > nav a:hover {
		color: var(--wknz-faq-subheading-hover);
	}

	.wknz-faq--list article > :is(h2, h3, h4, h5, h6) {
		margin: 0;
		color: var(--wknz-faq-subheading);
		overflow-wrap: anywhere;
	}

	/* Answer, with the optional image above it on narrow screens. */
	.wknz-faq--list article > div {
		display: flex;
		flex-direction: column-reverse;
		gap: 1.5rem;
		margin-block-start: 0.75rem;
	}

	.wknz-faq--list article > div > div {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		gap: 0.75rem;
		min-inline-size: 0;
		overflow-wrap: anywhere;
	}

	.wknz-faq--list article > div > div > * {
		margin: 0;
	}

	.wknz-faq--list > section > div > a:last-child,
	.wknz-faq--list > a {
		display: inline-flex;
		align-items: center;
		align-self: flex-end;
		min-block-size: 2.75rem;
		color: var(--wknz-faq-accent);
		text-underline-offset: 0.2em;
	}

	.wknz-faq--list > section > div > a:last-child:hover,
	.wknz-faq--list > a:hover {
		color: var(--wknz-faq-heading-hover);
	}

	@media (prefers-reduced-motion: reduce) {
		.wknz-faq--accordion summary svg {
			transition: none;
		}
	}

	/* Wide screens: the image beside the answer (accordion, list). */
	@media (width >= 48em) {
		.wknz-faq--accordion details > div,
		.wknz-faq--list article > div {
			flex-direction: row;
		}

		.wknz-faq :is(details, article) > div > figure {
			flex: 0 0 14rem;
		}
	}
}