/**
 * Cliff FAQ — front-end accordion.
 *
 * Uses the native <details>/<summary> disclosure widget, so no JavaScript is
 * involved. Auto-opening of the first item is handled by the [open] attribute
 * in the markup, not here.
 */

.clifffaq {
	--clifffaq-accent: #1a4f8a;
	--clifffaq-border: #e2e6eb;
	--clifffaq-bg: #ffffff;
	--clifffaq-summary-bg: #f7f9fb;
	--clifffaq-text: #23282d;
	--clifffaq-muted: #6b7480;

	margin: 2rem 0;
	padding: 0;
	border: 1px solid var(--clifffaq-border);
	border-radius: 6px;
	background: var(--clifffaq-bg);
	overflow: hidden;
}

.clifffaq-heading {
	margin: 0;
	padding: 1.1rem 1.25rem;
	border-bottom: 1px solid var(--clifffaq-border);
	background: var(--clifffaq-summary-bg);
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--clifffaq-text);
}

.clifffaq-item {
	border-bottom: 1px solid var(--clifffaq-border);
}

.clifffaq-item:last-child {
	border-bottom: 0;
}

.clifffaq-question {
	position: relative;
	display: block;
	margin: 0;
	padding: 1rem 3rem 1rem 1.25rem;
	cursor: pointer;
	font-weight: 600;
	line-height: 1.45;
	color: var(--clifffaq-text);
	list-style: none;
	background: var(--clifffaq-bg);
	transition: background-color 0.15s ease;
}

/* Hide the default disclosure triangle in every engine. */
.clifffaq-question::-webkit-details-marker {
	display: none;
}

.clifffaq-question::marker {
	content: '';
}

.clifffaq-question:hover {
	background: var(--clifffaq-summary-bg);
}

.clifffaq-question:focus {
	outline: 2px solid var(--clifffaq-accent);
	outline-offset: -2px;
}

/* The indicator: a plus that becomes a minus when the item is open. */
.clifffaq-question::after {
	content: '+';
	position: absolute;
	top: 50%;
	right: 1.25rem;
	transform: translateY( -50% );
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1;
	color: var(--clifffaq-accent);
}

.clifffaq-item[open] > .clifffaq-question::after {
	content: '\2212'; /* minus sign */
}

.clifffaq-item[open] > .clifffaq-question {
	background: var(--clifffaq-summary-bg);
}

.clifffaq-answer {
	padding: 0.25rem 1.25rem 1.25rem;
	line-height: 1.7;
	color: var(--clifffaq-text);
}

.clifffaq-answer > :first-child {
	margin-top: 0;
}

.clifffaq-answer > :last-child {
	margin-bottom: 0;
}

.clifffaq-answer p {
	margin: 0 0 1em;
}

.clifffaq-answer ul,
.clifffaq-answer ol {
	margin: 0 0 1em;
	padding-left: 1.4rem;
}

/* -------------------------------------------------------------------------
 * Print
 * ---------------------------------------------------------------------- */

@media print {
	.clifffaq-item {
		border-bottom: 0;
		page-break-inside: avoid;
	}

	/* <details> collapses in print unless it is explicitly opened. */
	.clifffaq-item > .clifffaq-answer {
		display: block !important;
	}

	.clifffaq-question::after {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Small screens
 * ---------------------------------------------------------------------- */

@media ( max-width: 600px ) {
	.clifffaq-heading {
		font-size: 1.1rem;
		padding: 1rem;
	}

	.clifffaq-question {
		padding: 0.9rem 2.6rem 0.9rem 1rem;
	}

	.clifffaq-question::after {
		right: 1rem;
	}

	.clifffaq-answer {
		padding: 0.25rem 1rem 1rem;
	}
}