/**
 * Flora Point Core — sekcja „FAQ produktu” ([fp_faq]).
 *
 * Nagłówek H2 (50px / mobile 32px, line-height 100%) + lista akordeonów
 * opartych na natywnym <details>/<summary> (zero JS → INP/CWV nietknięte).
 * Tab: tytuł 16px (desktop i mobile) + szewron, treść WYSIWYG.
 *
 * Kolory ze zmiennych palety (--fp-faq-*). WYJĄTEK świadomy: tło listy
 * `--fp-faq-bg` = rgba(234, 225, 201, 0.70) — wartość z projektu Figma,
 * poza paletą 1–8. Gdy w motywie pojawi się odpowiadający jej token palety,
 * wystarczy podmienić tę jedną zmienną (reszta stylu jej używa).
 */

.fp-faq {
	/* Kolory sterowane jednym miejscem (łatwa podmiana na token palety). */
	--fp-faq-bg: rgba(234, 225, 201, 0.70);
	--fp-faq-text: var(--wp--preset--color--palette-color-3);
	--fp-faq-heading-color: var(--wp--preset--color--palette-color-3);
	--fp-faq-divider: var(--wp--preset--color--palette-color-5);

	--fp-faq-list-pad-x: clamp(20px, 3vw, 40px);
	--fp-faq-row-pad-y: 22px;

	margin-block: clamp(32px, 5vw, 64px);
}

/* ---------- Nagłówek ---------- */

.fp-faq__heading {
	margin: 0 0 clamp(24px, 3.5vw, 40px);
	text-align: center;
	font-size: 50px;          /* desktop wg Figmy */
	line-height: 100%;        /* wg Figmy */
	color: var(--fp-faq-heading-color);
	/* font-family celowo dziedziczona z motywu (Blocksy) — pixel-perfect. */
}

/* ---------- Lista akordeonów ---------- */

.fp-faq__list {
	background: var(--fp-faq-bg);
	padding: 6px var(--fp-faq-list-pad-x);
}

.fp-faq__item {
	margin: 0;
	border-bottom: 1px solid var(--fp-faq-divider);
}

.fp-faq__item:last-child {
	border-bottom: 0;
}

/* ---------- Tab (summary) ---------- */

.fp-faq__summary {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: var(--fp-faq-row-pad-y) 0;
	list-style: none;
	cursor: pointer;
	color: var(--fp-faq-text);
	/* Blokujemy zaznaczanie tekstu przy szybkim klikaniu w tab. */
	-webkit-user-select: none;
	user-select: none;
}

/* Usunięcie natywnego markera <details> (Chrome/Safari/FF). */
.fp-faq__summary::-webkit-details-marker,
.fp-faq__summary::marker {
	display: none;
	content: "";
}

.fp-faq__question {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 16px;          /* desktop i mobile wg specyfikacji */
	font-weight: 400;
	line-height: 1.4;
}

.fp-faq__chevron {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--fp-faq-text);
	transition: transform 0.2s ease;
}

.fp-faq__item[open] .fp-faq__chevron {
	transform: rotate(180deg);
}

/* ---------- Treść (odpowiedź) ---------- */

.fp-faq__answer {
	padding: 0 0 var(--fp-faq-row-pad-y);
	color: var(--fp-faq-text);
	font-size: 15px;
	line-height: 1.6;
}

.fp-faq__answer > :first-child {
	margin-top: 0;
}

.fp-faq__answer > :last-child {
	margin-bottom: 0;
}

.fp-faq__answer a {
	color: var(--wp--preset--color--palette-color-1);
	text-underline-offset: 3px;
}

/* ---------- Płynne rozwijanie (progressive enhancement) ----------
 * Nowoczesne przeglądarki animują wysokość <details>; starsze po prostu
 * przełączają natychmiast (bez kosztu, bez JS). */
@supports (interpolate-size: allow-keywords) {

	.fp-faq {
		interpolate-size: allow-keywords;
	}

	.fp-faq__item::details-content {
		block-size: 0;
		overflow: hidden;
		transition:
			block-size 0.28s ease,
			content-visibility 0.28s allow-discrete;
	}

	.fp-faq__item[open]::details-content {
		block-size: auto;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {

	.fp-faq__heading {
		font-size: 32px;      /* mobile wg Figmy */
		line-height: 100%;
	}

	.fp-faq__summary {
		align-items: flex-start; /* dłuższe pytania łamią się do 2 linii */
	}

	.fp-faq__chevron {
		margin-top: 2px;
	}
}

/* ---------- Dostępność / preferencje ---------- */

.fp-faq__summary:focus-visible {
	outline: 2px solid var(--fp-faq-text);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

	.fp-faq__chevron {
		transition: none;
	}

	.fp-faq__item::details-content {
		transition: none;
	}
}

@media print {

	.fp-faq__item {
		break-inside: avoid;
	}

	/* Druk: pokaż wszystkie odpowiedzi niezależnie od stanu. */
	.fp-faq__item:not([open]) .fp-faq__answer {
		display: block;
	}
}