/* components/faq-block/faq-block.css
 *
 * Card colors come from the Card Preset system (see [[card-preset-system]]).
 * Every faq-block emits data-card-preset on its <section>; this file defines
 * the recipes in the "CARD PRESETS" block at the bottom. The base rules below
 * consume the --faq-card-* tokens those recipes set.
 */

.mvc-faq-block__header {
	text-align: center;
	margin-block-end: var(--space-16);
}

.mvc-faq-block__headline {
	font-size: var(--text-4xl);
	margin-block-end: var(--space-4);
}

.mvc-faq-block__subtext {
	font-size: var(--text-lg);
	color: var(--color-text-muted);
	margin: 0;
}

/* ── Accordion list ─────────────────────────────────────────────────────── */
.mvc-faq-block__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

/* Columns mode — 2 or 3 column grid. grid-auto-rows: 1fr + items at 100%
   height = all CLOSED tiles in the same row share height. When one opens it
   grows, and its row-mates grow with it (intentional — keeps the row aligned). */
.mvc-faq-block[data-columns="2"] .mvc-faq-block__list,
.mvc-faq-block[data-columns="3"] .mvc-faq-block__list {
	display: grid;
	gap: var(--space-4);
	grid-auto-rows: 1fr;
	align-items: stretch;
}
.mvc-faq-block[data-columns="2"] .mvc-faq-block__list { grid-template-columns: repeat(2, 1fr); }
.mvc-faq-block[data-columns="3"] .mvc-faq-block__list { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991px) {
	.mvc-faq-block[data-columns="3"] .mvc-faq-block__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.mvc-faq-block[data-columns="2"] .mvc-faq-block__list,
	.mvc-faq-block[data-columns="3"] .mvc-faq-block__list { grid-template-columns: 1fr; }
}
.mvc-faq-block[data-columns="2"] .mvc-faq-item,
.mvc-faq-block[data-columns="3"] .mvc-faq-item {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.mvc-faq-block[data-columns="2"] .mvc-faq-item__answer,
.mvc-faq-block[data-columns="3"] .mvc-faq-item__answer {
	flex: 1;
}

/* ── FAQ item ───────────────────────────────────────────────────────────── */
.mvc-faq-item {
	border: 1px solid var(--faq-card-border, var(--color-border));
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--faq-card-bg, var(--color-surface));
	padding: var(--space-2);
}

.mvc-faq-item__question {
	margin: 0;
}

.mvc-faq-item__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--space-6) var(--space-10);
	background: none;
	border: none;
	text-align: left;
	font-size: var(--text-lg);
	font-weight: var(--font-semibold);
	color: var(--faq-card-heading, var(--color-heading));
	cursor: pointer;
	gap: var(--space-4);
	transition: background-color var(--transition-fast);
}

.mvc-faq-item__toggle:hover {
	background-color: var(--faq-card-hover-bg, rgba(0, 0, 0, 0.04));
}

/* Open state — question header gets a tint so it visually separates from
   the answer area. Per-preset values live in the CARD PRESETS block below
   (--faq-card-q-open-bg). Falls back to the same darken used on hover. */
.mvc-faq-item__toggle[aria-expanded="true"] {
	background-color: var(--faq-card-q-open-bg, var(--faq-card-hover-bg, rgba(0, 0, 0, 0.06)));
}

.mvc-faq-item__toggle:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: -3px;
}

.mvc-faq-item__arrow {
	flex-shrink: 0;
	color: var(--faq-card-cta, var(--color-primary));
	transition: transform var(--transition-base);
}

.mvc-faq-item__toggle[aria-expanded="true"] .mvc-faq-item__arrow {
	transform: rotate(180deg);
}

/* ── Answer panel ───────────────────────────────────────────────────────── */
.mvc-faq-item__answer {
	border-block-start: 1px solid var(--faq-card-divider, var(--faq-card-border, var(--color-divider)));
}

.mvc-faq-item__answer[hidden] {
	display: none;
}

.mvc-faq-item__answer-inner {
	padding: var(--space-6) var(--space-10);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--faq-card-body, var(--color-text));
}

/* Direct children of .mvc-faq-item__answer (Learn more link, CTA block)
   live OUTSIDE .mvc-faq-item__answer-inner, so they don't inherit its
   horizontal padding. Apply matching inline padding here so they align
   with the answer text instead of pinning to the card's left edge. */
.mvc-faq-item__answer > .mvc-faq-item__learn-more,
.mvc-faq-item__answer > .mvc-faq-item__cta {
	margin-inline-start: var(--space-10);
	margin-inline-end:   var(--space-10);
}

/* ── Per-FAQ CTA ────────────────────────────────────────────────────────── */
.mvc-faq-item__cta {
	margin-block-start: var(--space-4);
	padding-block-start: var(--space-4);
	border-block-start: 1px solid var(--faq-card-divider, var(--faq-card-border, var(--color-divider)));
}

.mvc-faq-item__cta-title {
	font-weight: var(--font-semibold);
	margin-block-end: var(--space-3);
}

/* ── Per-FAQ "Learn more" link (CPT mode) ───────────────────────────────── */
.mvc-faq-item__learn-more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-block-start: var(--space-4);
	margin-block-end: var(--space-4);
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--faq-card-cta, var(--color-primary));
	text-decoration: none;
	transition: color var(--transition-fast);
}

.mvc-faq-item__learn-more:hover,
.mvc-faq-item__learn-more:focus-visible {
	color: var(--faq-card-cta, var(--color-primary));
	text-decoration: underline;
}

.mvc-faq-item__learn-more::after {
	content: "\2192";
	transition: transform var(--transition-fast);
}

.mvc-faq-item__learn-more:hover::after {
	transform: translateX(2px);
}

/* ── Block-level CTA below list ─────────────────────────────────────────── */
.mvc-faq-block__cta {
	margin-block-start: var(--space-10);
}

/* ── Style overrides ────────────────────────────────────────────────────── */

/* Accordion default — same as base, explicit class for completeness */
.mvc-faq-block--style-accordion-default .mvc-faq-block__list {
	gap: var(--space-2);
}

/* Accordion boxed — each item has a card-like elevated surface */
.mvc-faq-block--style-accordion-boxed .mvc-faq-item {
	border-radius: var(--radius-lg);
	box-shadow: var(--faq-card-shadow, var(--shadow-md));
	border: none;
}
.mvc-faq-block--style-accordion-boxed .mvc-faq-block__list {
	gap: var(--space-4);
}

/* Flat list — no borders, answers always visible, larger text */
.mvc-faq-block--style-flat-list .mvc-faq-item {
	border: none;
	border-radius: 0;
	border-block-end: 1px solid var(--color-accent, var(--color-primary));
	background: transparent;
	overflow: visible;
	box-shadow: none;
}
.mvc-faq-block--style-flat-list .mvc-faq-item__toggle {
	padding-inline: 0;
	font-size: var(--text-xl);
}
.mvc-faq-block--style-flat-list .mvc-faq-item__answer {
	border-block-start: none;
}
.mvc-faq-block--style-flat-list .mvc-faq-item__answer-inner {
	padding-inline: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   CARD PRESETS  (PAINT layer)

   Bundled bg + heading + body + border recipes — picked via faq_card_preset
   in the FAQ section ACF. PHP always emits data-card-preset (no "none"
   option), so the base rules above always have tokens to consume.

   Tokens drive .mvc-faq-item paint, toggle heading color, answer body color,
   arrow / learn-more accent, and the divider between question and answer.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Light — white card, dark text, subtle border (default) ───────────── */
.mvc-faq-block[data-card-preset="light"] {
	--faq-card-bg:        #ffffff;
	--faq-card-border:    rgba(0, 0, 0, 0.10);
	--faq-card-divider:   rgba(0, 0, 0, 0.08);
	--faq-card-heading:   #111111;
	--faq-card-body:      #4b5563;
	--faq-card-cta:       var(--color-primary);
	--faq-card-hover-bg:  rgba(0, 0, 0, 0.04);
	--faq-card-q-open-bg: rgba(0, 0, 0, 0.06);
	--faq-card-shadow:    0 2px 12px rgba(0, 0, 0, 0.08);
}

/* ── Light Tinted — soft warm off-white, dark text ────────────────────── */
.mvc-faq-block[data-card-preset="light-tinted"] {
	--faq-card-bg:        #f5f3ef;
	--faq-card-border:    transparent;
	--faq-card-divider:   rgba(0, 0, 0, 0.08);
	--faq-card-heading:   #111111;
	--faq-card-body:      #4b5563;
	--faq-card-cta:       var(--color-primary);
	--faq-card-hover-bg:  rgba(0, 0, 0, 0.04);
	--faq-card-q-open-bg: rgba(0, 0, 0, 0.07);
	--faq-card-shadow:    0 2px 12px rgba(0, 0, 0, 0.06);
}

/* ── Dark — solid brand color, white text ─────────────────────────────── */
.mvc-faq-block[data-card-preset="dark"] {
	--faq-card-bg:        var(--color-primary);
	--faq-card-border:    transparent;
	--faq-card-divider:   rgba(255, 255, 255, 0.18);
	--faq-card-heading:   #ffffff;
	--faq-card-body:      rgba(255, 255, 255, 0.86);
	--faq-card-cta:       var(--color-accent-light, #ffffff);
	--faq-card-hover-bg:  rgba(255, 255, 255, 0.06);
	--faq-card-q-open-bg: rgba(255, 255, 255, 0.10);
	--faq-card-shadow:    0 4px 16px rgba(0, 0, 0, 0.18);
}

/* ── Dark Gradient — brand → deeper-brand, white text ─────────────────── */
.mvc-faq-block[data-card-preset="dark-gradient"] .mvc-faq-item {
	background:
		linear-gradient(180deg,
			var(--color-primary) 0%,
			var(--color-primary-dark) 100%);
	border-color: transparent;
}
.mvc-faq-block[data-card-preset="dark-gradient"] {
	--faq-card-border:    transparent;
	--faq-card-divider:   rgba(255, 255, 255, 0.18);
	--faq-card-heading:   #ffffff;
	--faq-card-body:      rgba(255, 255, 255, 0.86);
	--faq-card-cta:       var(--color-accent-light, #ffffff);
	--faq-card-hover-bg:  rgba(255, 255, 255, 0.06);
	--faq-card-q-open-bg: rgba(255, 255, 255, 0.12);
	--faq-card-shadow:    0 4px 16px rgba(0, 0, 0, 0.20);
}

/* ── Brand Gradient — primary → accent, white text ────────────────────── */
.mvc-faq-block[data-card-preset="brand-gradient"] .mvc-faq-item {
	background:
		linear-gradient(135deg,
			var(--color-primary) 0%,
			var(--color-accent) 100%);
	border-color: transparent;
}
.mvc-faq-block[data-card-preset="brand-gradient"] {
	--faq-card-border:    transparent;
	--faq-card-divider:   rgba(255, 255, 255, 0.22);
	--faq-card-heading:   #ffffff;
	--faq-card-body:      rgba(255, 255, 255, 0.92);
	--faq-card-cta:       #ffffff;
	--faq-card-hover-bg:  rgba(255, 255, 255, 0.08);
	--faq-card-q-open-bg: rgba(255, 255, 255, 0.14);
	--faq-card-shadow:    0 4px 16px rgba(0, 0, 0, 0.20);
}

/* On dark/dark-gradient/brand-gradient presets, bg-presets.css may have
   forced heading + body color via !important if the FAQ section is nested
   inside a dark section preset. Re-assert the card-preset values on the
   inner question span + answer text so card-local contrast wins.

   Flat-list uses transparent card backgrounds (items inherit the section bg),
   so it follows the SECTION's text color rather than a card-preset color.
   Re-assert --faq-card-heading / --faq-card-body here so the chosen card
   preset's contrast setting wins over the bg-presets.css !important rules. */
.mvc-faq-block[data-card-preset="dark"] .mvc-faq-item__toggle span,
.mvc-faq-block[data-card-preset="dark-gradient"] .mvc-faq-item__toggle span,
.mvc-faq-block[data-card-preset="brand-gradient"] .mvc-faq-item__toggle span,
.mvc-faq-block[data-card-preset="light"] .mvc-faq-item__toggle span,
.mvc-faq-block[data-card-preset="light-tinted"] .mvc-faq-item__toggle span {
	color: var(--faq-card-heading) !important;
}

/* Flat-list: items have transparent backgrounds so they inherit the section bg.
   bg-presets.css fires !important on h1–h6 inside dark sections, which
   overrides the button/span color coming from --faq-card-heading. Re-assert
   with !important so the chosen card-preset contrast wins. */
.mvc-faq-block--style-flat-list .mvc-faq-item__toggle,
.mvc-faq-block--style-flat-list .mvc-faq-item__toggle span {
	color: var(--faq-card-heading, var(--color-heading)) !important;
}
.mvc-faq-block--style-flat-list .mvc-faq-item__answer-inner,
.mvc-faq-block--style-flat-list .mvc-faq-item__answer-inner * {
	color: var(--faq-card-body, var(--color-text)) !important;
}

.mvc-faq-block[data-card-preset="dark"] .mvc-faq-item__answer-inner,
.mvc-faq-block[data-card-preset="dark-gradient"] .mvc-faq-item__answer-inner,
.mvc-faq-block[data-card-preset="brand-gradient"] .mvc-faq-item__answer-inner,
.mvc-faq-block[data-card-preset="light"] .mvc-faq-item__answer-inner,
.mvc-faq-block[data-card-preset="light-tinted"] .mvc-faq-item__answer-inner,
.mvc-faq-block[data-card-preset="dark"] .mvc-faq-item__answer-inner *,
.mvc-faq-block[data-card-preset="dark-gradient"] .mvc-faq-item__answer-inner *,
.mvc-faq-block[data-card-preset="brand-gradient"] .mvc-faq-item__answer-inner *,
.mvc-faq-block[data-card-preset="light"] .mvc-faq-item__answer-inner *,
.mvc-faq-block[data-card-preset="light-tinted"] .mvc-faq-item__answer-inner * {
	color: var(--faq-card-body) !important;
}