/* ==========================================================================
   Support — frequently asked questions
   The answers are a reading list rather than a product card, so the page drops
   the fixed-height .card treatment and sets its own measure and rhythm. The
   disclosure rows follow the FAQ on the Nur product page — a hairline-ruled
   list of rows, each with a marker that turns from a plus into a cross — but
   the Nur colours cannot come along, since they are defined only inside
   .nur-page. Colours come from the site tokens in main.css instead, and the
   teal-to-green accent of the page heading is carried through as decoration
   only, never as text or link colour, so every string keeps full label
   contrast.
   ========================================================================== */

/* The measure of the page. Both sections state it in one rule so the edges of
   the community card cannot drift away from the hairlines of the question list
   above it. Neither uses the wide percentage gutters of .product-card, which
   are cut for full-bleed cover art rather than for reading. */
.support-faq,
.support-cta {
	max-width: 90rem;
	margin-left: auto;
	margin-right: auto;

	padding-left: max(2.0rem, env(safe-area-inset-left));
	padding-right: max(2.0rem, env(safe-area-inset-right));
}

.support-faq {
	/* The UA link blue is too light on paper and too dark on the dark
	   background, so both appearances state their own value. */
	--sf-link: rgb(0, 90, 200);
	--sf-link: color-mix(in srgb, var(--blue) 78%, black);

	margin-bottom: 2.6rem;

	/* Lets the fold animate to the answer's own height, below. */
	interpolate-size: allow-keywords;
}

@media (prefers-color-scheme: dark) {
	.support-faq {
		--sf-link: var(--teal);
	}
}


/* ==========================================================================
   Section head
   ========================================================================== */

.support-faq-head {
	margin-bottom: 3.2rem;
}

.support-faq-eyebrow {
	margin: 0 0 0.8rem;

	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--secondaryLabel);
}

.support-faq-heading {
	margin: 0;

	font-size: 3.2rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--label);
}


/* ==========================================================================
   Questions
   Each answer is folded into a disclosure row so the page opens as a list of
   questions. The folding is the behaviour of the details element itself.
   ========================================================================== */

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

.support-faq-item {
	border-bottom: 1px solid var(--quaternaryLabel);
}

.support-faq-summary {
	position: relative;

	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.6rem;

	padding: 2.2rem 0;
	cursor: pointer;

	/* The row carries its own marker in place of the disclosure triangle. */
	list-style: none;
	-webkit-tap-highlight-color: transparent;

	font-size: 1.9rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--label);
}

.support-faq-summary::-webkit-details-marker {
	display: none;
}

/* The question carries the hover underline rather than the row: a decoration
   set on the row would propagate into the marker below and strike through it,
   and descendants cannot opt out of an inherited text-decoration. */
.support-faq-question {
	flex: 1 1 auto;
	text-wrap: pretty;
}

.support-faq-summary:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 3px;
	border-radius: 4px;
}

/* A plus that turns a quarter circle into a cross as the answer unfolds. Set
   in a monospaced face so the two strokes stay square to each other. */
.support-faq-summary::after {
	content: "+";

	flex: none;
	align-self: center;

	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 2.2rem;
	font-weight: 400;
	line-height: 1;
	color: var(--secondaryLabel);

	transition: transform 0.2s ease, color 0.15s ease;
}

.support-faq-item[open] .support-faq-summary::after {
	transform: rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {

	.support-faq-summary:hover .support-faq-question {
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}

	.support-faq-summary:hover::after {
		color: var(--label);
	}

}

/* Gradient rule marking the fold of the open answer, carrying the accent of
   the page heading into the answer itself. The marker above already holds the
   ::after of this row. */
.support-faq-item[open] .support-faq-summary::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0.8rem;
	left: 0;

	height: 0.3rem;
	border-radius: 0.15rem;
	background: linear-gradient(to right, var(--teal), var(--green));
}

.support-faq-answer {
	max-width: 62rem;
	margin: 0;
	padding-bottom: 2.6rem;

	font-size: 1.6rem;
	line-height: 1.6;
	color: var(--secondaryLabel);
}

/* Links are block-level site-wide, which would break them out of their
   sentence; inside an answer they belong in the text flow. */
.support-faq-answer a {
	display: inline;
	color: var(--sf-link);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.support-faq-answer a:hover {
	opacity: 0.7;
}

/* Fold the answer open rather than snapping it, where the browser can animate
   to an intrinsic height. */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {

	.support-faq-item::details-content {
		block-size: 0;
		overflow: hidden;
		transition:
			block-size 0.35s ease,
			content-visibility 0.35s allow-discrete;
	}

	.support-faq-item[open]::details-content {
		block-size: auto;
	}

}

/* Kept apart: a browser that does not know ::details-content would throw out
   the whole selector list, marker included. */
@media (prefers-reduced-motion: reduce) {

	.support-faq-summary::after {
		transition: none;
	}

	.support-faq-item::details-content {
		transition: none;
	}

}


/* ==========================================================================
   Mobile adjustments
   ========================================================================== */

@media screen and (max-width: 767px) {

	.support-faq,
	.support-cta {
		padding-left: max(12px, env(safe-area-inset-left));
		padding-right: max(12px, env(safe-area-inset-right));
	}

	.support-faq-heading {
		font-size: 2.6rem;
	}

	.support-faq-summary {
		padding: 1.8rem 0;
		font-size: 1.75rem;
	}

}