/* The FAQ section appended to Casting and Contact by inc/faq.php.
 *
 * Colours come through the Kit's custom properties, the same way
 * project-page.css takes them, so a change in Site Settings still reaches this
 * section; the fallbacks only matter if Elementor is ever removed.
 *
 * Breakpoints are the site's: 1180 laptop, 1000 tablet extra, 900 tablet,
 * 760 mobile extra, 640 mobile.
 *
 * Typography is stated here rather than inherited. Nothing in this theme
 * carries a `.serif` class that means anything — see the note in studio.css —
 * so every rule below names its own family, size and measure.
 */

.studio-faq {
	--f-ground: var(--e-global-color-ground, #080807);
	--f-ink: var(--e-global-color-ink, #F2EFE9);
	--f-mist: var(--e-global-color-mist, #C9C4BA);
	--f-muted: var(--e-global-color-muted, #8F887C);
	--f-gold: var(--e-global-color-gold, #C6A86A);
	--f-rule: var(--e-global-color-rule, rgba(242, 239, 233, .2));
	--f-hair: var(--e-global-color-hair, rgba(242, 239, 233, .14));
	--f-gutter: clamp(24px, 4vw, 56px);
	--f-serif: "Newsreader", Georgia, serif;
	--f-sans: "Archivo", sans-serif;

	display: block;
	background: var(--f-ground);
	color: var(--f-ink);
	padding: clamp(72px, 9vw, 128px) var(--f-gutter);
}

.studio-faq-inner {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 96px);
	align-items: start;
}

/* Head ------------------------------------------------------------------- */

.studio-faq-title {
	margin: 0;
	font-family: var(--f-serif);
	/* Newsreader carries an optical-size axis and every measure on this site
	 * assumes it is set; leaving it to the browser drifts the whole column. */
	font-variation-settings: "opsz" 36;
	font-weight: 400;
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.08;
	letter-spacing: -.01em;
	color: var(--f-ink);
}

.studio-faq-standfirst {
	margin: 18px 0 0;
	max-width: 30ch;
	font-family: var(--f-sans);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.65;
	color: var(--f-muted);
}

/* List ------------------------------------------------------------------- */

.studio-faq-list {
	border-top: 1px solid var(--f-hair);
}

.studio-faq-item {
	border-bottom: 1px solid var(--f-hair);
}

.studio-faq-q {
	/* Safari still paints the disclosure triangle without both of these. */
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	/* 22px + 22px + a 24px line clears 44px comfortably, which is what this
	 * needs to be as a standalone control on a phone. */
	padding: 22px 0;
	font-family: var(--f-serif);
	font-variation-settings: "opsz" 22;
	font-weight: 400;
	font-size: clamp(19px, 1.5vw, 23px);
	line-height: 1.3;
	color: var(--f-ink);
	transition: color .3s ease;
}

.studio-faq-q::-webkit-details-marker {
	display: none;
}

/* The question is an h3 so it joins the outline; everything about how it looks
 * comes from the summary above. A browser would otherwise give it its own size,
 * weight and a margin that would push the rule off the row.
 *
 * Two class names, not one. The Kit styles headings globally as
 * `.elementor-kit-4 h3` — specificity 0,1,1 — so a lone `.studio-faq-qt` at
 * 0,1,0 loses and the question renders at the Kit's h3 size. Measured: 37.44px
 * where the summary says 21.6px, and the row grew 12px because of it. */
.studio-faq-q .studio-faq-qt {
	margin: 0;
	font: inherit;
	font-variation-settings: inherit;
	letter-spacing: inherit;
	color: inherit;
}

.studio-faq-q:hover {
	color: var(--f-gold);
}

/* The site turns its focus ring on for every link and button and this is a
 * button in all but name. Keyboard only: a mouse click on a summary should not
 * draw a box. */
.studio-faq-q:focus-visible {
	outline: 2px solid var(--f-gold);
	outline-offset: 4px;
	border-radius: 2px;
}

/* The mark: a plus that becomes a minus, drawn rather than typed so it lines
 * up with the cap height at every size. */
.studio-faq-mark {
	position: relative;
	flex: none;
	width: 14px;
	height: 14px;
	margin-top: .35em;
	color: var(--f-gold);
}

.studio-faq-mark::before,
.studio-faq-mark::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	height: 1px;
	background: currentColor;
	transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .25s ease;
}

.studio-faq-mark::after {
	transform: rotate(90deg);
}

.studio-faq-item[open] .studio-faq-mark::after {
	transform: rotate(0deg);
	opacity: 0;
}

.studio-faq-item[open] .studio-faq-q {
	color: var(--f-gold);
}

/* Answer ----------------------------------------------------------------- */

.studio-faq-a {
	padding: 0 48px 26px 0;
}

.studio-faq-a p {
	margin: 0;
	max-width: 66ch;
	font-family: var(--f-sans);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.7;
	color: var(--f-mist);
}

/* Breakpoints ------------------------------------------------------------ */

@media (max-width: 1000px) {
	.studio-faq-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.studio-faq-standfirst {
		max-width: 46ch;
	}
}

@media (max-width: 640px) {
	/* The phone rhythm for a section on this site is 56px top and bottom. */
	.studio-faq {
		padding: 56px 24px;
	}

	.studio-faq-q {
		font-size: 18px;
		gap: 16px;
		padding: 18px 0;
	}

	.studio-faq-a {
		padding: 0 0 22px;
	}

	.studio-faq-a p {
		font-size: 15px;
	}
}

/* A disclosure that snaps is not a bug, but the mark rotating is motion, and
 * someone who asked for less of it should get less of it. */
@media (prefers-reduced-motion: reduce) {
	.studio-faq-q,
	.studio-faq-mark::before,
	.studio-faq-mark::after {
		transition: none;
	}
}