/**
 * FAQ block (blocks/content/faq.php)
 *
 * The accordion design is the one already shipped on the cocktail detail page
 * and the author archive: ".dm-faq" — see assets/css/author-single.css, which
 * carries the same rules for template-parts/author-details.php. The rules are
 * copied rather than shared because each of those pages loads exactly one
 * stylesheet and the theme's existing convention (cocktail-pdp.css ->
 * author-single.css) is a faithful copy per surface.
 *
 * The one thing that matters here and is easy to lose: the section, its
 * background and its divider lines run edge to edge, but the questions and
 * answers stay inside an 800px column. `.dm-faq__list` sets that column;
 * `.dm-faq__item::before/::after` break out of it with a 100vw rule.
 *
 * Differences from the author copy:
 *   - background is beige-light (var(--color-sand)) to match page-faq.php's <main>,
 *   - `__title` is fully italic and is used (the group heading per block),
 *   - vertical padding is larger, so stacked groups read as separate sections.
 */

.dm-faq {
	background: var(--color-sand);
	padding: 24px 0 40px;
	overflow-x: clip; /* contains the full-bleed divider lines below */
}

/* Group heading — "About Del Maguey", "How to Enjoy", … Display serif, italic,
   centred. Capped at 800px so it aligns with the list below it, while the
   divider lines and the background still span the full width. */
.dm-faq__title {
	max-width: 800px;
	margin: 0 auto 36px;
	text-align: center;
	font-family: var(--font-display, "IM FELL Double Pica", serif);
	font-weight: 400;
	font-style: italic;
	/* Figma heading/h3 — 40px / 110% / -0.4px, down to heading-mobile/h3-M (30px). */
	font-size: clamp(1.875rem, 2.8vw, 2.5rem);
	line-height: 1.1; /* 110% -> 44px */
	letter-spacing: -0.01em; /* -0.4px at 40px */
	color: var(--Semantics-fg-default-primary, var(--dm-bg-default-tertiary));
}

/* Optional eyebrow above the group heading. No group uses one in the current
   design; kept so older content that filled the block's "subtitle" field still
   renders something sensible. */
.dm-faq__eyebrow {
	max-width: 800px;
	margin: 0 auto 10px;
	text-align: center;
	font-family: var(--font-default, "Roboto Condensed", sans-serif);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--Semantics-fg-default-primary, var(--dm-fg-default-primary));
}

/* The narrow column the user asked for: everything readable lives in here. */
.dm-faq__list {
	max-width: 800px;
	margin: 0 auto;
}

/* Full-bleed divider lines: the list content stays at 800px, but the rules
   span the full viewport width (edge to edge). */
.dm-faq__item {
	position: relative;
}

.dm-faq__item::before,
.dm-faq__item:last-child::after {
	content: "";
	position: absolute;
	left: calc(50% - 50vw);
	width: 100vw;
	height: 1px;
	background: color-mix(in srgb, var(--color-forest) 15%, transparent);
	pointer-events: none;
}

.dm-faq__item::before {
	top: 0;
}

.dm-faq__item:last-child::after {
	bottom: 0;
}

.dm-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 22px;
	cursor: pointer;
}

/* heading/h5 — display serif, 24 / 120%. Upright, unlike the italic h5 on the
   cocktail cards — questions are roman, only the group title is italic. */
.dm-faq__question span {
	font-family: var(--font-display, "IM FELL Double Pica", serif);
	font-weight: 400;
	font-style: normal;
	font-size: 24px;
	line-height: 1.2; /* 120% -> 28.8px */
	color: var(--Semantics-fg-default-primary, var(--dm-bg-default-tertiary));
}

.dm-faq__chevron {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	color: var(--Semantics-fg-default-primary, var(--dm-fg-default-primary));
	transition: transform 0.25s ease;
}

.dm-faq__toggle:checked ~ .dm-faq__question .dm-faq__chevron {
	transform: rotate(180deg);
}

.dm-faq__toggle:focus-visible ~ .dm-faq__question {
	outline: 2px solid var(--color-forest, var(--dm-border-default-dark-strong));
	outline-offset: -2px;
}

/* Grid-rows collapse trick: animates open/close without JS */
.dm-faq__answer-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}

.dm-faq__toggle:checked ~ .dm-faq__answer-wrap {
	grid-template-rows: 1fr;
}

/* body/lg/regular — Roboto Condensed, 18 / 140% */
.dm-faq__answer {
	overflow: hidden;
	padding: 0 22px;
	font-family: var(--font-default, "Roboto Condensed", sans-serif);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4; /* 140% -> 25.2px */
	color: var(--Semantics-fg-default-primary, var(--dm-bg-default-tertiary));
	max-width: 72ch;
}

.dm-faq__answer p {
	margin: 0 0 14px;
}

.dm-faq__answer p:last-child {
	margin-bottom: 0;
}

.dm-faq__toggle:checked ~ .dm-faq__answer-wrap .dm-faq__answer {
	padding-bottom: 22px;
}

/* ---- Mobile typography (Figma heading-mobile specs) --------------------- */
@media (max-width: 899px) {
	.dm-faq__title {
		text-align: left;
		margin-top: 20px;
		margin-bottom: 34px;
	}
	.dm-faq__question span {
		font-size: 22px;
	}
	.dm-faq__answer {
		font-size: 16px;
	}
	.dm-faq__chevron {
		width: 22px;
		height: 22px;
	}
	.dm-faq__question,
	.dm-faq__answer {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (min-width: 900px) {
	.dm-faq {
		padding: 44px 0 64px;
	}
	.dm-faq__title {
		margin-bottom: 48px;
	}
	.dm-faq__question {
		padding: 24px 28px;
	}
	.dm-faq__answer {
		padding: 0 28px;
	}
	.dm-faq__toggle:checked ~ .dm-faq__answer-wrap .dm-faq__answer {
		padding-bottom: 26px;
	}
}

/* ---- Page hero -------------------------------------------------------- */
/* page-faq.php opens with the shared learn-hero block (breadcrumb + italic lead
   + roman rest + intro). That block paints its own cream (var(--color-cream)), which would
   band against the beige below it, so it is repainted here for this page only. */
.page-template-page-faq .dm-learn-hero {
	background-color: var(--color-sand);
}

/* ---- Legacy: collection FAQ ------------------------------------------- */
/* inc/setup/collection-faq.php (product-category archives) shares this
   stylesheet but still renders the older `.collapse` markup. Its chevron flip
   lives here; leave it until that section is moved onto .dm-faq too. */
.delmaguey-b-faq .collapse input:checked ~ label .flex-shrink-0 {
	transform: rotate(180deg);
}

/* ---- Small desktop (1024-1280) -------------------------------------- *
 * No board for /frequently-asked-questions/ at this size. Each group is the
 * FAQ section from the category PLP board (2021:19479): 800-wide rows with
 * py-24 headers and no inner gutter (the 1080 container is wider than 800
 * throughout this range), a 32px chevron 10 from the question, answers in
 * body/lg 18px filling the same 800 with 24 under them, 40 below the title.
 * The board's section runs py-80; here several groups stack, so each takes
 * 40 above and below - 80 between groups - and the last closes on 80. Group
 * titles stay heading/h3 40px under the page's 60px h1.
 * Scoped to the acf/faq block (.dm-faq--block) - the author page's details
 * accordions also use .dm-faq and have their own block in author-single.css.
 * Must stay at the end of the file: a media query adds no specificity. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
	.dm-faq--block {
		padding: 40px 0;
	}

	.dm-faq--block:last-of-type {
		padding-bottom: 80px;
	}

	/* The capped 1080 container already provides Figma's 100px gutter. */
	.dm-faq--block > .mx-auto {
		padding-inline: 0;
	}

	.dm-faq--block .dm-faq__title {
		margin-bottom: 40px;
		font-size: 40px;                /* heading/h3 */
		letter-spacing: -0.01em;        /* -0.4px at 40px */
	}

	.dm-faq--block .dm-faq__eyebrow {
		margin-bottom: 8px;
	}

	.dm-faq--block .dm-faq__question {
		gap: 10px;
		padding: 24px 0;
	}

	.dm-faq--block .dm-faq__answer {
		max-width: none;
		padding: 0;
	}

	.dm-faq--block .dm-faq__answer p {
		margin-bottom: 16px;
	}

	.dm-faq--block .dm-faq__toggle:checked ~ .dm-faq__answer-wrap .dm-faq__answer {
		padding-bottom: 24px;
	}
}