/*!
 * Section: FAQ
 *
 * Scoped CSS for inc/sections/faq.php. Stub partial — visual composition
 * lands during page-migration WPs (RENDER-WP5–WP11).
 *
 * @package Mystwood_Studios_AB
 * @since   Topic 17 RENDER-WP1
 */

/* Topic 23 REDESIGN-WP7 — section rhythm tokens applied.
 * FAQ padding-block anchors to --mw-space-section (120px) max; headline→
 * accordion-list wires --mw-space-headline-to-paragraph (24px). H2 ceiling
 * lifted to 2.625rem (42px) per WP-1 type scale. */
.mw-section--faq {
	padding-block: clamp(2rem, 6vw, var(--mw-space-section, 120px));
}

.mw-section--faq .mw-section__inner {
	max-width: 56rem;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.mw-section--faq .mw-section__headline {
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-size: clamp(1.5rem, 3vw, 2.625rem);
	line-height: 1.2;
	margin-block: 0 var(--mw-space-headline-to-paragraph, 24px);
}

.mw-faq-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.mw-faq-list__item {
	border-block-end: 1px solid var(--mw-color-rule, rgba(0, 0, 0, 0.12));
	padding-block: 0.75rem;
}

.mw-faq-list__question {
	font-weight: 600;
	cursor: pointer;
	padding-block: 0.25rem;
	font-size: 1rem;
	list-style: none;
}

.mw-faq-list__question::-webkit-details-marker {
	display: none;
}

.mw-faq-list__question::after {
	content: "+";
	float: inline-end;
	font-weight: 400;
	opacity: 0.7;
}

.mw-faq-list__item[open] > .mw-faq-list__question::after {
	content: "−";
}

.mw-faq-list__answer {
	padding-block-start: 0.5rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* -----------------------------------------------------------------------
 * K-World brand variant (Topic 17 RENDER-WP7)
 *
 * Parent FAQ accordion sits on kw-sky for /coloring-books.
 * ----------------------------------------------------------------------- */
.mw-section--faq[data-bg-token="kw-sky"]          { background-color: var(--kw-sky-surface);  color: #040420; }
.mw-section--faq[data-bg-token="kw-gold"]         { background-color: var(--kw-gold-surface); color: #040420; }
.mw-section--faq[data-bg-token="kw-cream"]        { background-color: var(--kw-cream);        color: #040420; }
.mw-section--faq[data-bg-token="kw-sunset"]       { background-color: var(--kw-sunset);       color: #ffffff; }
.mw-section--faq[data-bg-token="kw-castle-stone"] { background-color: var(--kw-castle-stone); color: #ffffff; }

/* Item separator contrast on kw-sky band.
 *
 * VERIFIED, no change needed — Topic 36 CORR-WP1 Item 2. `--kw-sky-surface`
 * flipped from periwinkle to white; this rule paints a translucent-ink line
 * DIRECTLY on the band (not a nested light panel like the media-text /
 * gallery / card-grid fixes for the same flip), and black at a fixed alpha
 * reads at least as clearly on white as it did on periwinkle — the general
 * rule that a darker background REDUCES the visible contrast of a
 * semi-transparent dark overlay works in this rule's favour, not against it. */
.mw-section--faq.mw-section--brand-k-world[data-bg-token="kw-sky"] .mw-faq-list__item {
	border-block-end-color: rgba(4, 4, 32, 0.2);
}

/* -----------------------------------------------------------------------
 * Lore brand variant (Topic 17 RENDER-WP8)
 *
 * Topic 14 manuscript/codex identity — FAQ stack on vellum for the
 * /kaeros-hub "Frequently asked" cluster. Gilt rule between items;
 * system-serif headline + summary; ink body.
 * ----------------------------------------------------------------------- */
.mw-section--faq[data-bg-token="lore-parchment"] { background-color: var(--lore-parchment); color: var(--lore-ink); }
.mw-section--faq[data-bg-token="lore-vellum"]    { background-color: var(--lore-vellum);    color: var(--lore-ink); }

.mw-section--faq.mw-section--brand-lore .mw-section__headline {
	font-family: var(--mw-font-lore-serif, Georgia, "Times New Roman", serif);
	letter-spacing: -0.005em;
}

.mw-section--faq.mw-section--brand-lore .mw-faq-list__item {
	border-block-end-color: rgba(168, 125, 50, 0.35); /* gilt rule */
}

.mw-section--faq.mw-section--brand-lore .mw-faq-list__question {
	font-family: var(--mw-font-lore-serif, Georgia, "Times New Roman", serif);
	font-size: 1.0625rem;
	color: var(--lore-ink);
}

.mw-section--faq.mw-section--brand-lore .mw-faq-list__answer {
	font-size: 1rem;
	line-height: 1.65;
}

.mw-section--faq.mw-section--brand-lore .mw-faq-list__answer a {
	color: var(--lore-oxblood);
	text-decoration-color: var(--lore-gilt);
	text-underline-offset: 0.18em;
}

/* Narrow variant (Topic 27 BRAND-WP4, S6) — tighter reading column to match
 * the Claude Design narrow FAQ band. */
.mw-section--faq.mw-section--narrow .mw-section__inner {
	max-width: 44rem;
}