/* FAQ · Signatur composition
 * Self-contained styles for the partial in
 * Resources/Private/Partials/FaqToggle.html.
 * Brand tokens are pulled from the BDG @theme (input.css) when available,
 * with hex fallbacks so the file works even without a Tailwind rebuild.
 */

.faq-section--signature {
	position: relative;
	
}
.faq-signature {
	--faq-fg: var(--color-primary, #000c2d);
	--faq-muted: var(--color-gray-dark, #4d5268);
	--faq-accent: var(--color-secondary, #ffd900);
	--faq-hairline: rgba(0, 12, 45, 0.12);
	--faq-on-accent: var(--color-primary, #000c2d);
	color: var(--faq-fg);
	position: relative;
	width: 100%;
	max-width: 1150px;
	margin-left: auto;
	margin-right: auto;
}
.faq-signature__list {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* Dark theme — driven by Layouts/Default.html's bg-color-secondary wrapper */
.bg-color-secondary .faq-signature,
.faq-signature[data-color-variant='dark'] {
	--faq-fg: var(--color-white, #ffffff);
	--faq-muted: rgba(255, 255, 255, 0.72);
	--faq-accent: var(--color-tertiary, #a4c1f3);
	--faq-hairline: rgba(255, 255, 255, 0.16);
	--faq-on-accent: var(--color-primary, #000c2d);
}

/* Gradient circle — signature brand motif */
.faq-signature__bg-circle {
	position: absolute;
	top: -28%;
	right: -24%;
	width: clamp(420px, 60vw, 720px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(
		circle at 50% 50%,
		rgba(204, 206, 212, 0.95) 0%,
		rgba(204, 206, 212, 0.55) 42%,
		rgba(204, 206, 212, 0) 72%
	);
	opacity: 0.55;
	pointer-events: none;
}
.bg-color-secondary .faq-signature__bg-circle {
	background: radial-gradient(
		circle at 50% 50%,
		rgba(77, 82, 104, 0.85) 0%,
		rgba(77, 82, 104, 0.45) 42%,
		rgba(77, 82, 104, 0) 72%
	);
	opacity: 0.7;
}

/* Item */
.faq-signature__item {
	border-top: 1px solid var(--faq-hairline);
	padding: 20px 0;
	transition: padding 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.faq-signature__item:last-child {
	border-bottom: 1px solid var(--faq-hairline);
}
.faq-signature__item[data-state='open'] {
	padding: 28px 0 32px;
}

/* Toggle button (resets + grid layout) */
.faq-signature__toggle {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	appearance: none;
	-webkit-appearance: none;
	display: grid;
	width: 100%;
	grid-template-columns: 120px 1fr auto;
	gap: 28px;
	align-items: center;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	text-align: left;
	cursor: pointer;
	color: inherit;
}
.faq-signature__toggle:focus-visible {
	outline: 2px solid var(--faq-accent);
	outline-offset: 4px;
}
.faq-signature__item[data-state='open'] .faq-signature__toggle {
	align-items: flex-start;
}

/* Mark column container */
.faq-signature__mark {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 48px;
}

/* Mark column — number */
.faq-signature__number {
	color: var(--faq-fg);
	font-style: italic;
	font-weight: 800;
	font-size: 40px;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	transition: color 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.faq-signature__item[data-state='open'] .faq-signature__number {
	color: var(--faq-accent);
}

/* Mark column — icon box */
.faq-signature__icon-box {
	color: var(--faq-fg);
	background: transparent;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
		color 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.faq-signature__icon-box .material-symbols-rounded {
	font-size: 26px;
	line-height: 1;
}
.faq-signature__item[data-state='open'] .faq-signature__icon-box {
	color: var(--faq-accent);
}

/* Mark column — uploaded SVG, rendered as a tintable silhouette via mask */
.faq-signature__svg-mark {
	display: inline-block;
	width: 48px;
	height: 48px;
	background-color: var(--faq-fg);
	-webkit-mask-image: var(--svg-mark);
	mask-image: var(--svg-mark);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: background-color 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.faq-signature__item[data-state='open'] .faq-signature__svg-mark {
	background-color: var(--faq-accent);
}

/* Question */
.faq-signature__body {
	min-width: 0;
	display: block;
}
.faq-signature__question {
	color: var(--faq-fg);
	display: block;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.005em;
	transition: font-size 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.faq-signature__question > * {
	color: inherit;
	margin: 0;
	font: inherit;
}
.faq-signature__item[data-state='open'] .faq-signature__question {
	font-size: 26px;
	line-height: 1.25;
	padding-top: 8px;
}

/* Plus / minus toggle */
.faq-signature__plusminus {
	color: var(--faq-fg);
	background: transparent;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
		color 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.faq-signature__plusminus .material-symbols-rounded {
	font-size: 20px;
	line-height: 1;
}
.faq-signature__item[data-state='open'] .faq-signature__plusminus {
	color: var(--faq-accent);
}

/* Answer reveal */
.faq-signature__answer[hidden] {
	display: none !important;
}
.faq-signature__answer {
	margin-top: 14px;
	display: grid;
	grid-template-columns: 120px 1fr 44px;
	gap: 28px;
}
.faq-signature__answer-body {
	color: var(--faq-muted);
	font-size: 16px;
	line-height: 1.65;
	max-width: 640px;
}
.faq-signature__answer-body :is(p, ul, ol) {
	margin: 0 0 12px;
	color: inherit;
}
.faq-signature__answer-body :last-child {
	margin-bottom: 0;
}

/* Responsive — collapse the mark column on narrow viewports
 * so number/icon sit above the question and the toggle stays right-aligned */
@media (max-width: 640px) {
	.faq-signature__toggle {
		grid-template-columns: 56px 1fr auto;
		gap: 16px;
	}
	.faq-signature__answer {
		grid-template-columns: 56px 1fr 36px;
		gap: 16px;
	}
	.faq-signature__number {
		font-size: 28px;
	}
	.faq-signature__icon-box,
	.faq-signature__svg-mark {
		width: 40px;
		height: 40px;
	}
	.faq-signature__icon-box .material-symbols-rounded {
		font-size: 22px;
	}
	.faq-signature__item[data-state='open'] .faq-signature__question {
		font-size: 21px;
	}
}