/* ==========================================================================
   FAQ page - /faqs/
   ==========================================================================

   Loaded only on the FAQ page (see mm-faq.php). The markup is generated at
   render time from the page's own heading/paragraph content, so every selector
   here is a .mm-faq-* class this plugin emits - nothing depends on an
   .elementor-element-<id>, which is generated per site and would not match on
   dev.

   TYPOGRAPHY: no font-family is set anywhere in this file, on purpose. Astra
   sets Lato for body and h1-h6 site-wide, so inheriting guarantees Lato by
   construction and it cannot drift. Same rule as collection.css.

   FONT WEIGHTS: this site loads Lato in 100, 400 and 700 ONLY (Astra's
   enqueue: family=Lato:400,100,700). Ask for 300 and the browser snaps to 100
   - Lato Thin - and a display headline renders as a ghost. 400 or 700, nothing
   else.

   COLOUR: the site palette is monochrome - Astra's globals are #000 headings,
   rgba(0,0,0,.6) body, #FFF ground. The tokens below stay inside it; the one
   warm note, #F5F1E8, is the same cream the Our Gallery collection pages use,
   so the support panel reads as part of the same site rather than a new one.
   ========================================================================== */

.mm-faq {
	--mm-faq-ink: #000000;
	--mm-faq-body: rgba( 0, 0, 0, 0.62 );
	--mm-faq-muted: rgba( 0, 0, 0, 0.45 );
	--mm-faq-rule: #e2ded6;          /* the product accordion's hairline */
	--mm-faq-cream: #f5f1e8;
	--mm-faq-radius: 12px;

	max-width: 860px;
	margin: 0 auto;
	padding: 72px 24px 96px;
	box-sizing: border-box;
	color: var( --mm-faq-body );
}

/* --------------------------------------------------------------------------
   Intro
   -------------------------------------------------------------------------- */

.mm-faq-intro {
	text-align: center;
	margin-bottom: 48px;
}

.mm-faq-eyebrow {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.17em;   /* matches the collection pages' eyebrow */
	text-transform: uppercase;
	color: var( --mm-faq-muted );
}

.mm-faq-title {
	margin: 0 0 18px;
	font-size: 46px;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.012em;
	color: var( --mm-faq-ink );
}

.mm-faq-standfirst {
	max-width: 60ch;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.7;
	color: var( --mm-faq-body );
}

/* --------------------------------------------------------------------------
   Count + expand all
   -------------------------------------------------------------------------- */

.mm-faq-bar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 12px;
}

.mm-faq-count {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --mm-faq-muted );
}

/*
 * Hidden until the script marks the document script-capable. With JavaScript
 * off every answer is already open, and a control that cannot collapse them is
 * worse than no control at all.
 */
.mm-faq-toggle-all {
	display: none;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font: inherit;
	text-transform: none;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var( --mm-faq-ink );
	cursor: pointer;
	border-bottom: 1px solid var( --mm-faq-rule );
	transition: border-color 0.2s ease, opacity 0.2s ease;
}

.mm-faq-js .mm-faq-toggle-all {
	display: inline-block;
}

.mm-faq-toggle-all,
.mm-faq-toggle-all:hover,
.mm-faq-toggle-all:focus,
.mm-faq-toggle-all:active {
	color: var( --mm-faq-ink );
	background: none;
}

.mm-faq-toggle-all:hover {
	border-bottom-color: var( --mm-faq-ink );
}

.mm-faq-toggle-all:focus-visible {
	outline: 2px solid var( --mm-faq-ink );
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   The accordion
   -------------------------------------------------------------------------- */

.mm-faq-list {
	border-top: 1px solid var( --mm-faq-rule );
}

/*
 * A ROW DOES NOT CHANGE ON HOVER. No tint, no movement, nothing.
 *
 * Two earlier builds got this wrong in different ways, and both are worth
 * remembering rather than re-inventing. The first grew the trigger's left
 * padding on hover, so every row jogged sideways under the cursor - on a list
 * you sweep down, that reads as the page twitching. The second kept a tint but
 * put it on the trigger alone, so hovering an OPEN row highlighted its
 * question and left its answer white: one row rendering as two disconnected
 * blocks.
 *
 * The answer to both is that nothing about a row is hover-dependent. The
 * cursor is the affordance (the whole row is a <button>, so `cursor: pointer`
 * covers it), and there is no second visual language to keep consistent with
 * the open state.
 *
 * There is deliberately no `:focus-within` tint either - a keyboard user gets
 * the focus ring on the trigger, which is unambiguous and does not depend on
 * telling two shades of off-white apart.
 *
 * `probes/faq-accordion.js` asserts this against the stylesheet's own CSSOM:
 * no :hover rule anywhere in this file may declare a background, a colour or
 * anything that changes a box.
 */
.mm-faq-item {
	border-bottom: 1px solid var( --mm-faq-rule );
	/* The sticky header is ~110px; without this an anchored question lands
	   underneath it. Same offset the collection pages use. */
	scroll-margin-top: 120px;
}

/* The heading stays an <h3> for the document outline; all of its own
   typography is on the button, which is the thing that is actually laid out. */
.mm-faq-q {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

/*
 * ASTRA STYLES EVERY <button>. Its own rule sets `text-transform: uppercase`
 * and `letter-spacing: 1px` on bare `button` (which is also why it survives
 * `font: inherit` - neither property is part of the font shorthand), plus a
 * background, a border-radius and its own colour. The first build of this
 * shipped with every question shouting in tracked-out capitals for exactly
 * that reason. Each of those is therefore reset explicitly below rather than
 * assumed away, and the colour is pinned across :hover/:focus/:active because
 * Astra sets those too - the same trap that turned the collection pages'
 * CONTINUE button black-on-black once a visitor had been to the target.
 */
.mm-faq-trigger,
.mm-faq-trigger:hover,
.mm-faq-trigger:focus,
.mm-faq-trigger:active {
	color: var( --mm-faq-ink );
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
}

.mm-faq-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	margin: 0;
	padding: 26px 16px 26px 4px;
	background: none;
	font: inherit;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}

/*
 * :focus-visible only - a mouse click on a <button> focuses it, and a ring
 * left behind on every question the reader has opened reads as breakage.
 * Keyboard users still get it.
 */
.mm-faq-trigger:focus {
	outline: none;
}

.mm-faq-trigger:focus-visible {
	outline: 2px solid var( --mm-faq-ink );
	outline-offset: -2px;
}

.mm-faq-q-text {
	flex: 1 1 auto;
}

/* The +/- is drawn, not typed: a glyph's weight and vertical centring drift
   with the font, and two rules can animate. */
.mm-faq-icon {
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 2px;
}

.mm-faq-icon::before,
.mm-faq-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background: var( --mm-faq-ink );
	transform: translateY( -50% );
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.mm-faq-icon::after {
	transform: translateY( -50% ) rotate( 90deg );
}

.mm-faq-item.is-open .mm-faq-icon::after {
	transform: translateY( -50% ) rotate( 0deg );
	opacity: 0;
}

/*
 * COLLAPSE. max-height, not grid-template-rows: CSS Grid's automatic minimum
 * size on a grid item leaves some content partially visible at 0fr, and it does
 * it inconsistently depending on the content's shape (CLAUDE.md, product
 * accordion). The exact height is set in px by the script and released to
 * `none` once the transition ends, so an answer can still grow afterwards.
 *
 * The collapsed state is scoped to .mm-faq-js: PHP renders every answer open,
 * which is the correct page with no JavaScript.
 */
.mm-faq-js .mm-faq-a {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}

.mm-faq-a-inner {
	padding: 0 16px 30px 4px;
	font-size: 16px;
	line-height: 1.75;
	color: var( --mm-faq-body );
}

.mm-faq-a-inner > *:first-child {
	margin-top: 0;
}

.mm-faq-a-inner > *:last-child {
	margin-bottom: 0;
}

.mm-faq-a-inner p {
	margin: 0 0 14px;
}

.mm-faq-a-inner a {
	color: var( --mm-faq-ink );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mm-faq-a-inner ul,
.mm-faq-a-inner ol {
	margin: 0 0 14px;
	padding-left: 20px;
}

.mm-faq-a-inner li {
	margin-bottom: 6px;
}

@media ( prefers-reduced-motion: reduce ) {
	.mm-faq-js .mm-faq-a,
	.mm-faq-icon::before,
	.mm-faq-icon::after {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Support panel
   -------------------------------------------------------------------------- */

.mm-faq-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	margin-top: 56px;
	padding: 38px 40px;
	background: var( --mm-faq-cream );
	border-radius: var( --mm-faq-radius );
}

.mm-faq-cta-body {
	flex: 1 1 auto;
}

.mm-faq-cta-title {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	color: var( --mm-faq-ink );
}

.mm-faq-cta-text {
	max-width: 46ch;
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var( --mm-faq-body );
}

.mm-faq-cta-button {
	flex: 0 0 auto;
	display: inline-block;
	padding: 15px 34px;
	border-radius: 999px;
	background: var( --mm-faq-ink );
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

/*
 * Every state pinned, at (0,2,0) with the class doubled where needed.
 * Astra colours .elementor-button:visited from its global palette and that
 * slot is #000000 - a black label on a black pill - which is exactly how the
 * collection pages' CONTINUE button turned invisible for anyone who had
 * already visited the target. This is not an .elementor-button, but the same
 * trap is one theme update away, so the states are stated rather than assumed.
 */
.mm-faq .mm-faq-cta-button,
.mm-faq .mm-faq-cta-button:link,
.mm-faq .mm-faq-cta-button:visited,
.mm-faq .mm-faq-cta-button:hover,
.mm-faq .mm-faq-cta-button:focus,
.mm-faq .mm-faq-cta-button:active {
	color: #ffffff;
	text-decoration: none;
}

.mm-faq .mm-faq-cta-button:hover,
.mm-faq .mm-faq-cta-button:focus {
	opacity: 0.82;
}

.mm-faq .mm-faq-cta-button:focus-visible {
	outline: 2px solid var( --mm-faq-ink );
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Breakpoints - 1024 / 767, the two the rest of this site uses
   -------------------------------------------------------------------------- */

@media ( max-width: 1024px ) {
	.mm-faq {
		padding: 56px 24px 80px;
	}

	.mm-faq-title {
		font-size: 38px;
	}

	.mm-faq-trigger {
		font-size: 18px;
	}
}

@media ( max-width: 767px ) {
	.mm-faq {
		padding: 40px 20px 64px;
	}

	.mm-faq-intro {
		margin-bottom: 34px;
	}

	.mm-faq-title {
		font-size: 30px;
	}

	.mm-faq-standfirst {
		font-size: 15px;
	}

	/*
	 * A 17-18px question at phone width wraps to three lines and the rows stop
	 * reading as a list. Scaled down explicitly rather than inherited from
	 * desktop - the same mistake the product accordion's icon grid made.
	 */
	.mm-faq-trigger {
		gap: 16px;
		padding: 20px 4px;
		font-size: 16px;
		line-height: 1.45;
	}

	.mm-faq-icon {
		width: 15px;
		height: 15px;
	}

	.mm-faq-a-inner {
		padding: 0 4px 24px;
		font-size: 15px;
		line-height: 1.7;
	}

	.mm-faq-cta {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
		margin-top: 40px;
		padding: 28px 24px;
	}

	.mm-faq-cta-title {
		font-size: 20px;
	}

	.mm-faq-cta-button {
		width: 100%;
		padding: 16px 24px;
		text-align: center;
	}
}