/* ============================================================
   FAQ
   Split out of style.css — see functions.php for the enqueue.
   ============================================================ */

/* ============================================================
   2. FAQ
   Mobile-first: base rules match Figma node 298:2788 (mobile).
   ≥768px matches node 292:1603 (tablet); ≥1200px adds the extra
   vertical breathing room from node 181:4131 (desktop).
   ============================================================ */

.faq {
	background: var(--cream);
	padding: 64px 20px;
}

.faq__inner {
	max-width: 1110px;
	margin-inline: auto;
}

.faq__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-bottom: 40px;
}

/* The exported vector sits inset 8.33% inside its frame. */
.faq__icon {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	flex: none;
}

.faq__icon img {
	width: 83.34%;
	height: 83.34%;
}

.faq__title {
	font-family: var(--font-display);
	font-size: 25px;
	line-height: 0.9;
	letter-spacing: -1px;
	font-feature-settings: "dlig" 1;
	text-transform: uppercase;
	text-align: center;
	color: var(--black);
}

.faq__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.faq__item {
	position: relative;
	background: var(--cream-dark);
	border-radius: 4px;
	padding: 20px;
	transition: background-color 0.3s var(--ease);
}

.faq__item.is-open {
	background: var(--mocha);
}

/* Mobile: chevron sits inline right after the question text.
   Resets the parent theme's global `button{...}` styling (orange pill
   background, Raleway/uppercase/white text, 17px 64px padding) which
   otherwise bleeds onto this native <button> — see themes/miami/assets/css/style.css. */
.faq__q {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	font-family: inherit;
	font-size: inherit;
	font-weight: normal;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.faq__q:hover,
.faq__q:focus {
	background: transparent;
	border: none;
	color: inherit;
}

.faq__q-text {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--font-display);
	font-size: 16px;
	line-height: 1.35;
	letter-spacing: 0.5px;
	font-feature-settings: "dlig" 1;
	text-transform: uppercase;
	color: var(--black);
	overflow-wrap: break-word;
	word-break: break-word;
	transition: color 0.3s var(--ease);
}

.faq__item.is-open .faq__q-text {
	color: var(--cream);
}

/* Chevron is the exported asset used as a mask so it can be recoloured. */
.faq__chevron {
	position: static;
	flex: none;
	width: 20.577px;
	height: 16px;
	background-color: var(--black);

	/* Inlined as a data URI on purpose: an SVG referenced from a separate file
     is blocked as a mask source under file:// (opaque origin), and the `mask`
     shorthand with a `/ size` component is unreliable in WebKit — so the
     longhands below are used instead. */
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio=%22none%22 overflow=%22visible%22 style=%22display: block;%22 width=%2220.5773%22 height=%2212%22 viewBox=%220 0 20.5773 12%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath id=%22Symbol%22 d=%22M10.7629 11.7938C10.6254 11.9313 10.4674 12 10.2887 12C10.11 12 9.95189 11.9313 9.81443 11.7938L0.206185 2.18557C0.0687275 2.04811 0 1.89003 0 1.71134C0 1.53265 0.0687275 1.37457 0.206185 1.23711L1.23711 0.206186C1.37457 0.0687285 1.53265 0 1.71134 0C1.89003 0 2.04811 0.0687285 2.18557 0.206186L10.2887 8.30928L18.3918 0.206186C18.5292 0.0687285 18.6873 0 18.866 0C19.0447 0 19.2027 0.0687285 19.3402 0.206186L20.3711 1.23711C20.5086 1.37457 20.5773 1.53265 20.5773 1.71134C20.5773 1.89003 20.5086 2.04811 20.3711 2.18557L10.7629 11.7938Z%22 fill=%22%230B090C%22/%3E %3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio=%22none%22 overflow=%22visible%22 style=%22display: block;%22 width=%2220.5773%22 height=%2212%22 viewBox=%220 0 20.5773 12%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath id=%22Symbol%22 d=%22M10.7629 11.7938C10.6254 11.9313 10.4674 12 10.2887 12C10.11 12 9.95189 11.9313 9.81443 11.7938L0.206185 2.18557C0.0687275 2.04811 0 1.89003 0 1.71134C0 1.53265 0.0687275 1.37457 0.206185 1.23711L1.23711 0.206186C1.37457 0.0687285 1.53265 0 1.71134 0C1.89003 0 2.04811 0.0687285 2.18557 0.206186L10.2887 8.30928L18.3918 0.206186C18.5292 0.0687285 18.6873 0 18.866 0C19.0447 0 19.2027 0.0687285 19.3402 0.206186L20.3711 1.23711C20.5086 1.37457 20.5773 1.53265 20.5773 1.71134C20.5773 1.89003 20.5086 2.04811 20.3711 2.18557L10.7629 11.7938Z%22 fill=%22%230B090C%22/%3E %3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	transition:
		transform 0.3s var(--ease),
		background-color 0.3s var(--ease);
}

.faq__item.is-open .faq__chevron {
	transform: scaleY(-1);
	background-color: var(--cream);
}

/* 0fr → 1fr gives a height animation without measuring in JS.
   minmax(0, ...) is required: a bare Nfr track still has an implicit
   `auto` (min-content) minimum, so without it grid-template-rows: 0fr
   does not actually collapse to 0 when the child has any height. */
.faq__a {
	display: grid;
	grid-template-rows: minmax(0, 0fr);
	opacity: 0;
	color: var(--cream);
	font-family: var(--font-body);
	font-size: 16px;
	letter-spacing: -0.3px;
	line-height: 1.3;
	overflow-wrap: break-word;
	word-break: break-word;
	transition:
		grid-template-rows 0.35s var(--ease),
		opacity 0.25s var(--ease),
		margin-top 0.35s var(--ease);
}

.faq__a > p {
	overflow: hidden;
	min-height: 0;
}

.faq__item.is-open .faq__a {
	grid-template-rows: minmax(0, 1fr);
	opacity: 1;
	margin-top: 12px;
}

/* ---------- tablet (Figma node 292:1603) ---------- */

@media (min-width: 768px) {
	.faq {
		padding: 96px 30px 128px;
	}

	.faq__head {
		gap: 32px;
		padding-top: 10px;
		margin-bottom: 72px;
	}

	.faq__icon {
		width: 56px;
		height: 56px;
	}

	.faq__title {
		font-size: 40px;
	}

	.faq__item {
		padding: 23px 53px;
	}

	/* Desktop/tablet: chevron pins to the item's far edge instead of
	   following the (possibly multi-line) question text inline. */
	.faq__q {
		gap: 0;
	}

	.faq__q-text {
		font-size: 20px;
		line-height: 32px;
	}

	.faq__chevron {
		position: absolute;
		right: -26px;
		top: 50%;
		transform: translateY(-50%) scaleY(1);
		width: 20.577px;
		height: 12px;
	}

	.faq__item.is-open .faq__chevron {
		transform: translateY(-50%) scaleY(-1);
	}

	.faq__a {
		padding-right: 44px;
		font-size: 20px;
		letter-spacing: normal;
	}
}

/* ---------- desktop (Figma node 181:4131) ---------- */

@media (min-width: 1200px) {
	.faq {
		padding: 120px 30px 160px;
	}
}