/* =============================================================
   MBW FAQ — akordeon pytań i odpowiedzi (bez JS).
   Bazuje na RDZENNYM bloku „Szczegóły" (<details>/<summary>) opakowanym
   w blok „Grupa" z klasą .mbw-faq — czyli Olga edytuje pytania w zwykłym
   edytorze, a wygląd nadaje ten plik. Zero JS: otwieranie/zamykanie robi
   przeglądarka, klawiatura i czytniki ekranu działają od razu.

   UŻYCIE (edytor bloków):
     Grupa (klasa: mbw-faq)
       └ Szczegóły  (summary = pytanie, w środku akapit = odpowiedź)
       └ Szczegóły …
   Opcjonalnie w bloku Szczegóły: „Otwórz jeden na raz" (atrybut name)
   i „Otwarte domyślnie" dla pierwszego pytania.

   Schema FAQPage (JSON-LD) to OSOBNY blok „Własny HTML" pod grupą — tekst
   w schemie musi być 1:1 z tekstem w blokach (wymóg Google).

   SYGNATURA MARKI: gruba 4px krecha (jak menu/breadcrumb/karty) pojawia się
   z lewej przy otwartym pytaniu; pytanie robi się niebieskie; ikona „+"
   obraca się w „×". Fonty TYLKO z theme.json (Jost).

   POKRĘTŁA (nadpisz na .mbw-faq lub wyżej):
   --mbw-faq-accent  kolor otwartego pytania / hover (niebieski)
   --mbw-faq-bar     kolor krechy z lewej (żółty)
   --mbw-faq-line    kolor cienkich linii między pytaniami
   --mbw-faq-q-size  rozmiar pytania
   --mbw-faq-pad     odstęp pionowy w pytaniu
   --mbw-faq-indent  miejsce z lewej na krechę
   --mbw-faq-answer-max  maks. szerokość odpowiedzi (czytelne linie)
   ============================================================= */

.mbw-faq {
	--mbw-faq-accent: var(--wp--preset--color--theme-palette-6, #2980b9);
	--mbw-faq-bar:    var(--wp--preset--color--theme-palette-1, #f4c619);
	--mbw-faq-fg:     var(--wp--preset--color--theme-palette-3, #262626);
	--mbw-faq-line:   color-mix(in srgb, var(--mbw-faq-fg) 18%, transparent);
	--mbw-faq-q-size: 1.1875rem;   /* 19px — jak .mbw-desc / przyciski */
	--mbw-faq-pad:    1.25rem;     /* 20px góra/dół pytania */
	--mbw-faq-indent: 1.25rem;     /* 20px — miejsce na krechę 4px + oddech */
	--mbw-faq-answer-max: 70ch;    /* ~70 znaków w linii = komfort czytania */
	--mbw-faq-icon:   1.25rem;     /* rozmiar ikony +/× */

	margin: 1.5rem 0 2.5rem;
	border-top: 1px solid var(--mbw-faq-line);
}

/* Jedno pytanie = rdzenny <details class="wp-block-details">. */
.mbw-faq .wp-block-details {
	position: relative;
	margin: 0;
	padding-left: var(--mbw-faq-indent);
	border-bottom: 1px solid var(--mbw-faq-line);
}

/* Krecha 4px z lewej — schowana (scaleY 0), wyrasta od góry przy otwarciu.
   Ten sam gest co krecha menu (scaleX) — tylko w pionie. */
.mbw-faq .wp-block-details::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--mbw-faq-bar);
	transform: scaleY(0);
	transform-origin: top;
}
.mbw-faq .wp-block-details[open]::before {
	transform: scaleY(1);
}

/* PYTANIE (summary) — Jost 500, grafit, klikalne w całej szerokości. */
.mbw-faq .wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: var(--mbw-faq-pad) 0;
	list-style: none;                       /* bez domyślnego trójkąta */
	cursor: pointer;
	font-family: var(--wp--preset--font-family--jost, system-ui, sans-serif);
	font-size: var(--mbw-faq-q-size);
	font-weight: 500;
	line-height: 1.35;
	color: var(--mbw-faq-fg);
}
.mbw-faq .wp-block-details > summary::-webkit-details-marker {
	display: none;                          /* Safari: stary marker */
}

/* Ikona „+" z dwóch kresek (gradienty, bez SVG). Otwarte → obrót 45° = „×". */
.mbw-faq .wp-block-details > summary::after {
	content: "";
	flex: none;
	width: var(--mbw-faq-icon);
	height: var(--mbw-faq-icon);
	background:
		linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
	color: var(--mbw-faq-accent);
}
.mbw-faq .wp-block-details[open] > summary::after {
	transform: rotate(45deg);
}

/* Hover / focus / otwarte → pytanie na niebiesko. */
.mbw-faq .wp-block-details > summary:hover,
.mbw-faq .wp-block-details > summary:focus-visible,
.mbw-faq .wp-block-details[open] > summary {
	color: var(--mbw-faq-accent);
}
.mbw-faq .wp-block-details > summary:focus-visible {
	outline: 2px solid var(--mbw-faq-accent);
	outline-offset: 4px;
}

/* ODPOWIEDŹ — wszystko poza summary. Odstęp na dole, węższa kolumna. */
.mbw-faq .wp-block-details > :not(summary) {
	max-width: var(--mbw-faq-answer-max);
	margin: 0 0 var(--mbw-faq-pad);
	line-height: 1.6;
}
.mbw-faq .wp-block-details > :not(summary) + :not(summary) {
	margin-top: 0.75em;
}

/* Ruch tylko dla tych, którzy go chcą. */
@media (prefers-reduced-motion: no-preference) {
	.mbw-faq .wp-block-details::before        { transition: transform .35s ease; }
	.mbw-faq .wp-block-details > summary       { transition: color .2s ease; }
	.mbw-faq .wp-block-details > summary::after{ transition: transform .3s ease; }
}

/* Mobile: mniejsze pytanie, ciaśniej. */
@media (max-width: 600px) {
	.mbw-faq {
		--mbw-faq-q-size: 1.0625rem;
		--mbw-faq-pad: 1rem;
		--mbw-faq-indent: 1rem;
	}
}