/*
 * MERCH Spine FAQ — front-end styles
 * Loaded only on pages where the FAQ widget is present (see class-plugin.php).
 * No framework, no reset, scoped entirely to .merch-faq-* classes.
 */

/*
 * Defensive: this widget's own outer wrapper (as rendered by Elementor)
 * is allowed to shrink below its content's natural width. Without this,
 * if the widget ever sits inside an Elementor Container/Flexbox setting
 * that sizes its children to fit their content rather than stretching
 * them, that ancestor could end up sized by the FAQ text itself and
 * push everything wider than intended, before our own grid math below
 * even gets a chance to run. This does nothing when the ancestor
 * already gives the widget a normal, definite width (the usual case).
 */
.elementor-widget-merch-faq,
.elementor-widget-merch-faq > .elementor-widget-container {
	min-width: 0;
	max-width: 100%;
}

.merch-faq-grid {
	display: grid;
	/* Sane fallback only. The actual column count (desktop/tablet/mobile)
	 * is fully controlled by Elementor's own responsive CSS output for
	 * the "Columns" control (see class-elementor-faq-widget.php), which
	 * generates a real per-breakpoint `grid-template-columns` value.
	 * minmax(0, 1fr) — not bare `1fr` — is what actually guarantees
	 * equal columns: see the long comment on the "Columns" control in
	 * the widget file for why bare `1fr` alone isn't enough. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 20px;
	row-gap: 20px;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.merch-faq-grid * {
	box-sizing: border-box;
}

/*
 * .merch-faq-section is one grid cell in "Group by Section" mode: a
 * bold title followed by that section's FAQs, stacked vertically. It
 * has no background/border of its own — it's a plain block, so it
 * simply occupies its grid column like any other grid item, keeping
 * every column exactly equal width just like the flat layout does.
 * Ordinary CSS Grid auto-placement handles the rest: once a row's
 * columns are full, the next section automatically wraps to the next
 * row — no manual row/column math needed anywhere in this plugin.
 */
.merch-faq-section {
	min-width: 0; /* allows shrinking below content's natural width — prevents grid blowout */
	width: 100%; /* explicit: this is a full-width grid cell, never a content-sized box */
	max-width: 100%;
}

.merch-faq-section-title {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: #1a1a1a;
}

/*
 * .merch-faq-item is purely structural — it groups one question + its
 * answer for the JS open/close toggle. It has no background, border,
 * or fixed size of its own. All visible styling is on .merch-faq-question.
 *
 * In flat mode (Group FAQs by Section = off), .merch-faq-item is a
 * direct child of .merch-faq-grid and IS the grid cell — every column
 * is equal width because grid-template-columns guarantees that.
 *
 * In grouped mode, several .merch-faq-item elements are stacked inside
 * one .merch-faq-section (the actual grid cell). The "Item Spacing"
 * control's selector below is deliberately scoped to
 * `.merch-faq-section .merch-faq-item + .merch-faq-item` so it only
 * ever applies between FAQs stacked in the same section — it has no
 * effect in flat mode, where there is no .merch-faq-section wrapper.
 */
.merch-faq-item {
	min-width: 0; /* allows shrinking below content's natural width — prevents grid blowout */
	width: 100%; /* explicit: full-width grid cell (flat mode) or full-width stack item (grouped mode) */
	max-width: 100%;
}

.merch-faq-section .merch-faq-item + .merch-faq-item {
	margin-top: 12px; /* overridden live by the "Item Spacing" control */
}

/*
 * Explicit rather than relying on default block behavior: an <h3> is a
 * block element and would normally fill its parent's width anyway, but
 * making it explicit here means a theme's heading reset (e.g. one that
 * sets `display: table` / `display: inline-block` / `width: auto` on
 * all headings for some unrelated design reason) can't turn this into
 * a content-sized box and prevent the button inside it from reliably
 * filling its grid cell.
 */
.merch-faq-heading {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
}

/*
 * The question button always fills its (equal-width) column: it is a
 * 2-column CSS grid, not a flexbox row, and it's internally divided
 * into two explicit, protected regions:
 *
 *   grid-template-columns: minmax(0, 1fr) auto;
 *
 * - Column 1 (minmax(0, 1fr)): .merch-faq-question-content — the
 *   flexible text region. It takes all the width that's left over
 *   after the arrow region, and is the ONLY region allowed to shrink
 *   (min-width: 0). The question text wraps inside it as needed.
 * - Column 2 (auto): .merch-faq-arrow-wrap — the protected arrow
 *   region. It is content-sized to exactly the arrow's own size and
 *   never shrinks, so the arrow sits at a fixed horizontal position at
 *   the right edge of the button no matter how many lines the question
 *   wraps to, and question text can never be laid out into this
 *   region — it belongs to a different grid track entirely.
 * - `column-gap` is the single, direct source of the space between
 *   the two regions (driven by the "Arrow Spacing" control). Unlike
 *   flexbox's `space-between`/`flex-grow`, a grid column-gap is a
 *   real, fixed distance — it can't get "absorbed" by extra leftover
 *   row space, which is why the control has a real, visible effect.
 * - `align-items: center` vertically centers the arrow region against
 *   the full height of the (possibly multi-line) question text, which
 *   is what a professional accordion header looks like.
 */
.merch-faq-question {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	display: grid;
	/* minmax(0, 1fr) — not bare `1fr` — for the same reason as the
	 * outer .merch-faq-grid: it's what actually forces the text column
	 * to give up its content's natural minimum width and wrap instead
	 * of pushing the button (and therefore its whole grid column)
	 * wider than its neighbors. */
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 16px; /* overridden live by the "Arrow Spacing" control */
	padding: 18px 24px;
	font: inherit;
	text-align: left;
	cursor: pointer;
	color: inherit;
	/* Explicit, and deliberately !important: some themes apply a global
	 * `button { white-space: nowrap; }`-style rule. Without overriding
	 * it here, THIS is what actually stops a question from wrapping —
	 * the pill's own box can be perfectly bounded by the grid math
	 * above while the text inside it still refuses to break onto a
	 * second line and visually spills out past the pill and over the
	 * arrow. This rule exists specifically so that can never happen,
	 * regardless of what the active theme does elsewhere on the site. */
	white-space: normal !important;
	transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
	/* Remove the default mobile/WebKit tap-highlight flash entirely —
	 * this is what was showing up as an unwanted reddish overlay when
	 * the button/arrow was tapped or clicked. It's a browser default,
	 * not something this plugin's CSS was setting. */
	-webkit-tap-highlight-color: transparent;
}

/*
 * Default look only, wrapped in :where() so it carries ZERO CSS
 * specificity. This guarantees the Elementor "Question Background"
 * controls (Background Color, Border Color, Border Width, Border
 * Radius) can always override it — no specificity fight is possible,
 * by construction, regardless of stylesheet load order.
 */
:where(.merch-faq-question) {
	background-color: #f7f7f9;
	border: 1px solid transparent;
	border-radius: 20px;
}

.merch-faq-question:focus {
	outline: none;
}

.merch-faq-question:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
	border-radius: inherit;
}

/*
 * .merch-faq-question-content is the grid item that actually occupies
 * the minmax(0, 1fr) track — the flexible text region. min-width: 0 is
 * set HERE, on the direct grid child, which is what lets this region
 * (and therefore the text inside it) actually shrink below its content
 * width instead of forcing the track wider.
 */
.merch-faq-question-content {
	min-width: 0;
	max-width: 100%;
}

.merch-faq-question-text {
	/* The shrinking itself is handled by .merch-faq-question-content
	 * above (the actual grid item); these rules handle the line-
	 * breaking of the text within that already-constrained region:
	 *
	 * - white-space: normal — belt-and-suspenders with the button's own
	 *   !important rule above, in case something targets this element
	 *   more specifically than the plain `button` selector a theme
	 *   might use.
	 * - overflow-wrap: anywhere — deliberately NOT `break-word`. Per
	 *   spec, `break-word` only kicks in at layout time to stop visible
	 *   overflow; it does NOT reduce the text's contribution to the
	 *   grid's min-content size calculation, so a grid track can still
	 *   end up sized as if the text couldn't break at all.
	 *   `overflow-wrap: anywhere` is the variant that actually counts
	 *   toward intrinsic sizing — it's what makes a long question, an
	 *   unbroken long word, or a URL-like string genuinely wrap inside
	 *   its region instead of stretching the column or overflowing.
	 * - word-break: break-word stays as a compatibility fallback for
	 *   older engines that don't fully support `anywhere`.
	 */
	display: block;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
	min-width: 0;
	max-width: 100%;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: #1a1a1a;
}

/*
 * .merch-faq-arrow-wrap is the grid item that occupies the `auto`
 * track — the protected arrow region. It is deliberately content-sized
 * (never given an explicit width, never a shrinkable min-width: 0), so
 * it always takes exactly the space the arrow itself needs and no
 * question text can ever be laid out into it: that space belongs to a
 * completely separate grid track from .merch-faq-question-content
 * above. The internal flex centers the arrow glyph within that
 * protected space, independent of the Arrow Size control's value.
 */
.merch-faq-arrow-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* CSS-drawn chevron arrow: no icon font / SVG request required. */
.merch-faq-arrow {
	width: 14px;
	height: 14px;
	border-right: 2px solid #1a1a1a;
	border-bottom: 2px solid #1a1a1a;
	transform: rotate(45deg);
	transition: transform 0.25s ease;
	flex-shrink: 0;
}

.merch-faq-item.is-open .merch-faq-arrow {
	transform: rotate(225deg);
}

/*
 * Smooth, JS-free-height accordion animation using the CSS grid
 * 0fr -> 1fr technique. No height calculation, no reflow thrashing,
 * works even with dynamic/variable-length answer content.
 */
.merch-faq-answer-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.28s ease;
}

.merch-faq-item.is-open .merch-faq-answer-wrap {
	grid-template-rows: 1fr;
}

.merch-faq-answer-inner {
	overflow: hidden;
	min-height: 0;
}

.merch-faq-answer {
	padding: 12px 24px 4px;
	font-size: 15px;
	line-height: 1.7;
	color: #555555;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.merch-faq-answer > *:first-child {
	margin-top: 0;
}

.merch-faq-answer > *:last-child {
	margin-bottom: 0;
}

.merch-faq-empty-notice {
	padding: 16px 20px;
	border: 1px dashed #ccc;
	border-radius: 12px;
	color: #666;
	font-size: 14px;
}

/* Mobile: tighten padding a little. Column count per breakpoint is
 * handled by Elementor's responsive "Columns" control CSS. */
@media (max-width: 600px) {
	.merch-faq-question {
		padding: 16px 18px;
	}

	.merch-faq-answer {
		padding: 10px 18px 4px;
	}
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.merch-faq-answer-wrap,
	.merch-faq-arrow,
	.merch-faq-question {
		transition: none;
	}
}