/* ═══════════════════════════════════════════════════════════════════════════
   FAQ PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Hero ───────────────────────────────────────────────────────────────────── */

.faq-hero {
	background-color: #253d47;
	padding: 4.5rem 1.5rem 3.5rem;
	text-align: center;
}

/* 920, not the 860 it was: with the category cards on one line each, the
   widest label ("Maestro functionality", 195px at 20px bold) cleared its
   276px column by 3px — near enough that a fallback font would wrap it. The
   extra 60px widens each column to 296px, so the same label now clears by 23.
   Nothing else in the hero notices: the heading and intro are short and
   centred, and the search field is capped at 520px of its own. */
.faq-hero__inner {
	max-width: 920px;
	margin: 0 auto;
}

.faq-hero__heading {
	font-family: var(--ci-font-primary);
	color: var(--ci-color-white);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 700;
	margin: 0 0 0.75rem;
	line-height: 1.15;
}

.faq-hero__intro {
	font-family: var(--ci-font-primary);
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--ci-text-body);
	margin: 0 0 1.25rem;
	line-height: 1.6;
}

.faq-hero__cta-btn {
	margin-bottom: 2.5rem;
}

.faq-hero__nav-label {
	font-family: var(--ci-font-primary);
	color: rgba(255, 255, 255, 0.75);
	font-size: 1rem;
	font-weight: 400;
	margin: 0 0 1.25rem;
}

/* ─── Category card grid ─────────────────────────────────────────────────────── */

.faq-cat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin: 0 0 2rem;
}

/* Row, not column: the icon reads as a marker beside the label rather than a
   picture stacked above it. The padding and icon size below are cut from the
   column layout's values to buy the label its line — the widest one needs
   195px, and 32 of padding plus a 30px icon and a 16px gap is the most a
   296px column can spend and still leave it. Anything more generous drops
   that one card's label to a second line while the other two stay single.

   Below a 899px viewport the columns are narrower than that and the longest
   label wraps; between there and the 768px breakpoint below it does so on
   purpose, and the cards stay level because the grid stretches them. */
.faq-cat-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	padding: 1.5rem 1rem;
	border-radius: 1rem;
	text-decoration: none;
	transition: transform 0.2s ease, filter 0.2s ease;
}

.faq-cat-card--1 { background: #fdebd6; }
.faq-cat-card--2 { background: #efdbe3; }
.faq-cat-card--3 { background: #dde8ee; }

@media (hover: hover) and (pointer: fine) {
	.faq-cat-card:hover {
		transform: translateY(-3px);
		filter: brightness(0.96);
	}
}

/* Smaller than it was stacked. Beside a 20px label the old 2rem glyph
   outweighed the words it belongs to; at 1.5rem the label leads. */
.faq-cat-card__icon {
	font-size: 1.5rem;
	line-height: 1;
	flex-shrink: 0;
}

.faq-cat-card--1 .faq-cat-card__icon { color: #c67d28; }
.faq-cat-card--2 .faq-cat-card__icon { color: #8c3d5e; }
.faq-cat-card--3 .faq-cat-card__icon { color: #427288; }

.faq-cat-card__label {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-heading);
	font-weight: 700;
	color: var(--ci-color-navy);
	line-height: 1.3;
}

/* ─── Search ──────────────────────────────────────────────────────────────────── */

.faq-search {
	display: flex;
	justify-content: center;
}

.faq-search input[type="search"] {
	font-family: var(--ci-font-primary);
	font-size: 1rem;
	width: 100%;
	max-width: 520px;
	padding: 0.9rem 1.5rem;
	background: var(--ci-color-white);
	border: 1.5px solid transparent;
	border-radius: 9999px;
	color: var(--ci-color-text);
	outline: none;
	transition: box-shadow 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.faq-search input[type="search"]:focus {
	box-shadow: 0 0 0 3px rgba(249, 157, 49, 0.45);
}

/* ─── FAQ sections ────────────────────────────────────────────────────────────── */

/* The category pills scroll to these sections via anchor link, which
   respects scroll-margin-top — without it the fixed header covers the
   heading (mirrors the same fix on the CPD hub page, see cpd.css). */
.faq-section {
	padding: 5rem 1.5rem;
	background-color: var(--ci-color-white);
	scroll-margin-top: var(--nav-bottom, 64px);
}

.faq-section--curriculum-content {
	background-color: #f9f9f9;
}

.faq-section__inner {
	max-width: 860px;
	margin: 0 auto;
}

.faq-section__head {
	display: flex;
	align-items: center;
	/* 0.65rem to match .page-split__heading-row, which pairs the same badge with
	   the same size of heading. The rule below borrows that badge; leaving the
	   gap at 1rem would have set it further from its heading than the ones it is
	   meant to match. */
	gap: 0.65rem;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 2px solid var(--ci-color-border);
}

/* These carry .page-split__icon-badge in the markup, which is where the whole
   badge comes from — 3.75rem box, 3px border, 0.6rem corner, 2.45rem glyph.
   Nothing about the shape is restated here; only the colour changes, so the
   FAQ badges cannot drift from the ones on CPD, assessment, curriculum and
   pedagogy the next time that badge is adjusted.

   Colour follows the same formula the pedagogy page uses for its four stage
   variants: the accent at full strength for the border and the glyph, and a
   12% tint of it for the background.

   Compound selectors because .page-split__icon-badge sets its own colours and
   Font Awesome duotone variables directly on the element — a single class
   would tie on specificity and leave the outcome to stylesheet order. */
.page-split__icon-badge.faq-section__icon--engage {
	color: #c67d28;
	border-color: #c67d28;
	background: rgba(198, 125, 40, 0.12);
	--fa-primary-color: #c67d28;
	--fa-secondary-color: #c67d28;
	--fa-secondary-opacity: 0.4;
}

.page-split__icon-badge.faq-section__icon--develop {
	color: #8c3d5e;
	border-color: #8c3d5e;
	background: rgba(140, 61, 94, 0.12);
	--fa-primary-color: #8c3d5e;
	--fa-secondary-color: #8c3d5e;
	--fa-secondary-opacity: 0.4;
}

.page-split__icon-badge.faq-section__icon--innovate {
	color: #427288;
	border-color: #427288;
	background: rgba(66, 114, 136, 0.12);
	--fa-primary-color: #427288;
	--fa-secondary-color: #427288;
	--fa-secondary-opacity: 0.4;
}

/* The Cornerstones emblem stands in for a Font Awesome glyph on Curriculum
   content. .faq-emblem sizes itself to the 1.25em x 1em box Font Awesome uses
   inline, which is right in a subheading but wrong inside a badge — and it
   ties on specificity with the badge's own svg rule. Sized explicitly to the
   badge's glyph size instead. Square in a square box, so no distortion. */
.page-split__icon-badge .faq-emblem {
	width: 2.45rem;
	height: 2.45rem;
}

.page-split__icon-badge .faq-emblem svg {
	width: 100%;
	height: 100%;
}

.faq-section__heading {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h2);
	font-weight: 700;
	color: #646464;
	margin: 0;
	line-height: 1.2;
}

/* ─── Subheadings ─────────────────────────────────────────────────────────────── */

.faq-subheading {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h3);
	font-weight: 700;
	color: #646464;
	margin: 3rem 0 0;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--ci-color-border);
	/* Flex so the icon sits on the text's centre line rather than its baseline,
	   which is where an inline icon would otherwise land. */
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

/* Smaller and quieter than the section icon above it: this is a second-level
   marker, and at the section icon's weight the two competed. Inherits the
   section's own accent so each group reads as part of its section. */
.faq-subheading__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.15rem;
	line-height: 1;
	flex-shrink: 0;
}

.faq-subheading__icon--engage   { color: #c67d28; }
.faq-subheading__icon--develop  { color: #8c3d5e; }
.faq-subheading__icon--innovate { color: #427288; }

/* Brand emblems used in place of a Font Awesome glyph — the Cornerstones mark
   and the Welsh dragon. They are inline SVGs rather than icon-font glyphs, so
   they need an explicit box; 1em keeps them the same optical size as the Font
   Awesome icons they sit alongside. */
.faq-emblem {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 1.25em wide, matching the box Font Awesome gives its inline SVGs, so a
	   subheading with an emblem starts its text at the same x as the ones with
	   Font Awesome icons — at a square 1em the Wales row sat 5px to the left of
	   its neighbours. Height is 1em, again matching FA, so both sit on the same
	   line. */
	width: 1.25em;
	height: 1em;
}

/* auto width, not 100%: the emblems are square, and stretching them to fill a
   1.25em box would distort them.

   fill: currentColor because neither emblem file carries a fill attribute, so
   both were falling back to black — the Cornerstones mark sat black in a plum
   card next to two accent-coloured Font Awesome icons. The files already carry
   a .4-opacity class on their secondary paths, so one colour is all they need
   to read as duotone alongside their neighbours. */
.faq-emblem svg {
	width: auto;
	height: 100%;
	display: block;
	fill: currentColor;
}

/* wpautop injects <p> around inline elements inside these containers */
.faq-section__head > p,
.faq-item > p {
	display: contents;
}

/* ─── Accordion items ─────────────────────────────────────────────────────────── */

.faq-item {
	border-top: 1.5px solid var(--ci-color-border);
}

.faq-item:last-child {
	border-bottom: 1.5px solid var(--ci-color-border);
}

.faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1.1rem 0;
	background: none;
	border: none;
	text-align: left;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-heading);
	font-weight: 700;
	color: var(--ci-color-navy);
	cursor: pointer;
	gap: 1.25rem;
	line-height: 1.4;
	transition: color 0.15s ease;
}

.faq-item__question::after {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.25s ease;
	flex-shrink: 0;
}

.faq-item.is-open .faq-item__question {
	color: #692D46;
}

.faq-item.is-open .faq-item__question::after {
	transform: rotate(-135deg) translateY(-2px);
}

.faq-item__answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}

.faq-item__answer-body {
	padding-bottom: 1.25rem;
}

.faq-item__answer-body p {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	color: var(--ci-color-text);
	line-height: 1.75;
	margin: 0 0 0.75rem;
}

.faq-item__answer-body p:last-child {
	margin-bottom: 0;
}

.faq-item__answer-body ul,
.faq-item__answer-body ol {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	color: var(--ci-color-text);
	line-height: 1.75;
	margin: 0 0 0.75rem;
	padding-left: 1.5rem;
}

.faq-item__answer-body li {
	margin-bottom: 0.25rem;
}

.faq-item__answer-body a {
	color: var(--ci-color-navy);
	text-decoration: underline;
}

/* ─── Search filter states ────────────────────────────────────────────────────── */

.faq-item.is-hidden,
.faq-subheading.is-hidden,
.faq-section.is-hidden {
	display: none;
}

.faq-no-results {
	display: none;
	text-align: center;
	padding: 3.5rem 1.5rem;
	font-family: var(--ci-font-primary);
	font-size: 1rem;
	color: var(--ci-color-text-muted);
	line-height: 1.6;
}

.faq-no-results.is-visible {
	display: block;
}

/* ─── Final CTA ───────────────────────────────────────────────────────────────── */

/* ─── Responsive ──────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

	.faq-cat-grid {
		grid-template-columns: 1fr;
		gap: 0.625rem;
	}

	/* Roomier than the desktop card: one column, so there is width to spare
	   and no label is fighting for its line. */
	.faq-cat-card {
		padding: 1.25rem 1.25rem;
	}

	.faq-section {
		padding: 3rem 1.25rem;
	}

}