/* ==========================================================================
   SWS Temp Templates — FAQ page
   Mirrors the MyJet design language (tokens from theme.json) without
   touching the theme.
   ========================================================================== */

.sws-faq {
	/* Theme content widths (theme.json: contentSize 1210px / wideSize 1430px). */
	--sws-content-width: var(--wp--style--global--content-size, 1210px);
	--sws-primary: var(--wp--preset--color--primary, #0f3449);
	--sws-white: var(--wp--preset--color--white, #ffffff);
	--sws-muted: var(--wp--preset--color--secondary, #6c757d);
	--sws-serif: var(--wp--preset--font-family--secondary, "PT Serif", serif);
	--sws-sans: var(--wp--preset--font-family--primary, Helvetica, Arial, sans-serif);
	--sws-accent: #b1eaff;
	--sws-faq-eyebrow: #7fa3b4;
	--sws-faq-line: rgba(15, 52, 73, 0.1);

	font-family: var(--sws-sans);
	background: var(--sws-white);
	color: var(--sws-primary);
	/*
	 * The theme header is position:fixed. We zero the main offset and add the
	 * header height back as hero padding, so the white hero clears the header
	 * regardless of the theme's per-page margin rules.
	 */
	margin-block-start: 0;
}

.sws-faq *,
.sws-faq *::before,
.sws-faq *::after {
	box-sizing: border-box;
}

.sws-faq-shell {
	width: min(100% - 2.5rem, var(--sws-content-width));
	margin-inline: auto;
}

/* ── Hero (same treatment as the other pages' heroes, minus the image) ───── */

/*
 * The hero and filter are full-bleed bands (via the theme's .alignfull) so they
 * read like the site's other heroes; only their inner .sws-faq-shell is
 * constrained to the content width. No background image here — just white.
 */
.sws-faq-hero {
	background: var(--sws-white);
	/* Fixed 500px band, matching the blog/article heroes. */
	min-height: 500px;
	max-height: 500px;
	padding-block: calc(var(--site-header-height, 103px) + clamp(3rem, 5vw, 6rem)) clamp(3rem, 6vw, 6.5rem);
}

.sws-faq-hero__eyebrow {
	margin: 0 0 1rem;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sws-faq-eyebrow);
}

.sws-faq-hero__title {
	margin: 0 0 1.25rem;
	font-family: var(--sws-serif);
	font-weight: 400;
	font-size: clamp(3.6rem, 6vw, 6.4rem); /* 64px */
	line-height: 1.1; /* 70.4px at 64px */
	letter-spacing: -0.64px;
	color: var(--sws-primary);
}

.sws-faq-hero__subtitle {
	margin: 0 0 2.5rem;
	max-width: 60ch;
	font-family: var(--sws-sans);
	font-size: 1.6rem; /* 16px */
	font-weight: 400;
	line-height: 1.625; /* 26px */
	color: var(--sws-primary);
}

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

.sws-faq-search {
	position: relative;
	width: min(100%, 540px);
}

.sws-faq-search__icon {
	position: absolute;
	left: 22px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	color: rgba(15, 52, 73, 0.55);
	pointer-events: none;
}

/*
 * Prefixed with .sws-faq so these beat the theme's `input[type="search"]`
 * rules (element+attribute selectors are otherwise more specific than a
 * single class, which was stripping the padding/radius/size).
 */
.sws-faq .sws-faq-search__input {
	box-sizing: border-box;
	width: 100%;
	height: 55px;
	margin: 0;
	padding: 16px 24px 16px 48px;
	border-radius: 9999px; /* Figma: 16777200px (fully rounded pill) */
	border: 1px solid rgba(255, 255, 255, 0.15);
	    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(255, 255, 255, 0.06) 100%);
	font-family: var(--sws-sans);
	font-size: 15px;
	line-height: normal;
	color: var(--sws-primary);
	box-shadow: none;
	transition: border-color 0.25s ease;
}

.sws-faq .sws-faq-search__input::placeholder {
	color: rgba(15, 52, 73, 0.5);
	font-size: 15px;
	opacity: 1;
}

.sws-faq .sws-faq-search__input:focus {
	outline: none;
	border-color: rgba(15, 52, 73, 0.28);
}

/* Hide the browser's native search clear button — we render our own. */
.sws-faq .sws-faq-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.sws-faq-search__clear {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(15, 52, 73, 0.08);
	color: var(--sws-primary);
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.25s ease;
}

.sws-faq-search__clear:hover {
	background: rgba(15, 52, 73, 0.16);
}

/* ── Filter bar ─────────────────────────────────────────────────────────── */

.sws-faq-filter {
	/* border-top: 1px solid var(--sws-faq-line); */
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(255, 255, 255, 0.06) 100%);
}

.sws-faq-filter__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.75rem;
	padding-block: 1.4rem;
}

.sws-faq-filter__pill {
	appearance: none;
	border: 0;
	cursor: pointer;
	padding: 8px 20px;
	border-radius: 99999px;
	background: transparent;
	color: var(--sws-muted);
	font-family: var(--sws-sans);
	font-size: 1.3rem; /* 13px */
	font-weight: 700;
	line-height: 1.5; /* 19.5px */
	text-align: center;
	white-space: nowrap;
	transition: background 0.25s ease, color 0.25s ease;
}

.sws-faq-filter__pill:hover {
	background: var(--sws-primary);
	color: var(--sws-white);
}

.sws-faq-filter__pill.is-active {
	background: var(--sws-primary);
	color: var(--sws-white);
}

/* ── Results / sections ─────────────────────────────────────────────────── */

.sws-faq-results-wrap {
	padding-block: clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4rem);
}

.sws-faq-results {
	display: flex;
	flex-direction: column;
	gap: clamp(1.75rem, 3vw, 2.5rem);
	transition: opacity 0.2s ease;
}

.sws-faq-results.is-loading {
	opacity: 0.45;
	pointer-events: none;
}

.sws-faq-section {
	padding: clamp(2.4rem, 6vw, 70px);
	border-radius: 24px;
	border: 1px solid rgba(177, 234, 255, 0.44);
	background: linear-gradient(138deg, rgba(208, 242, 255, 0.12) -0.03%, rgba(255, 255, 255, 0.12) 89.88%);
	box-shadow: 0 4px 33.7px 0 rgba(177, 234, 255, 0.18) inset;
}

.sws-faq-section__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
}

.sws-faq-section__title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	font-family: var(--sws-serif);
	font-weight: 400;
	font-size: 2.8rem; /* 28px */
	line-height: 1.25; /* 35px */
	letter-spacing: 0.56px;
	color: var(--sws-primary);
}

.sws-faq-section__sub {
	margin: 0.5rem 0 0;
	font-size: 1.4rem;
	font-weight: 300;
	color: var(--sws-muted);
}

.sws-faq-section__count {
	flex: 0 0 auto;
	font-family: var(--sws-sans);
	font-size: 1.2rem; /* 12px */
	font-weight: 700;
	line-height: 1.5; /* 18px */
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--sws-accent); /* #B1EAFF */
	white-space: nowrap;
	padding-top: 0.6rem;
}

.sws-faq-search-reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(15, 52, 73, 0.1);
	color: var(--sws-primary);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.25s ease;
}

.sws-faq-search-reset:hover {
	background: rgba(15, 52, 73, 0.2);
}

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

.sws-faq-section__items {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.sws-faq-item {
	background: var(--sws-white);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(15, 52, 73, 0.05);
}

.sws-faq-item__heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.sws-faq-item__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.35rem 1.6rem;
	border: 0;
	background: transparent;
	cursor: pointer;
	text-align: left;
	font-family: var(--sws-sans);
	color: rgba(15, 52, 73, 0.8);
}

/*
 * The theme fills every button navy on hover/focus/active
 * (button:hover{background:primary}). That rule out-specifies a single class,
 * so keep the accordion trigger flat with a higher-specificity override.
 */
.sws-faq .sws-faq-item__trigger,
.sws-faq .sws-faq-item__trigger:hover,
.sws-faq .sws-faq-item__trigger:focus,
.sws-faq .sws-faq-item__trigger:active {
	background: transparent;
	border: 0;
	box-shadow: none;
}

.sws-faq-item__question {
	font-size: 1.5rem; /* 15px */
	font-weight: 700;
	line-height: 1.375; /* 20.625px */
	color: rgba(15, 52, 73, 0.8);
}

.sws-faq-item__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: rgba(177, 234, 255, 0.5);
	color: var(--sws-primary);
	transition: background 0.3s ease, color 0.3s ease;
}

.sws-faq-item__icon svg {
	transition: transform 0.3s ease;
}

.sws-faq-item__trigger[aria-expanded="true"] .sws-faq-item__icon {
	background: var(--sws-primary);
	color: var(--sws-white);
}

.sws-faq-item__trigger[aria-expanded="true"] .sws-faq-item__icon svg {
	transform: rotate(180deg);
}

/* Open item: flat (no card background/shadow), solid question colour. */
.sws-faq-item.is-open {
	background: transparent;
	box-shadow: none;
}

.sws-faq-item.is-open .sws-faq-item__question {
	color: var(--sws-primary); /* #0F3449 */
}

/* Drop the trigger's bottom padding so the answer sits exactly 20px below. */
.sws-faq-item.is-open .sws-faq-item__trigger {
	padding-bottom: 0;
}

/* Slide-down: animate the row height from 0fr to 1fr (no fixed max-height). */
.sws-faq-item__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}

.sws-faq-item.is-open .sws-faq-item__answer {
	grid-template-rows: 1fr;
}

/* Fully collapsed / no-JS state stays out of flow. */
.sws-faq-item__answer[hidden] {
	display: none;
}

.sws-faq-item__answer-inner {
	overflow: hidden;
	min-height: 0;
	padding: 20px 1.6rem 1.6rem; /* 20px gap below the question */
	font-family: var(--sws-sans);
	font-size: 1.5rem; /* 15px */
	font-weight: 300;
	line-height: 1.5; /* 150% = 22.5px */
	color: var(--sws-primary); /* #0F3449 */
}

.sws-faq-item__answer-inner > :first-child {
	margin-top: 0;
}

.sws-faq-item__answer-inner > :last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.sws-faq-item__answer,
	.sws-faq-item__icon svg {
		transition: none;
	}
}

.sws-faq-empty {
	margin: 0;
	padding: 1rem 0.5rem;
	font-size: 1.5rem;
	font-weight: 300;
	color: var(--sws-muted);
}

/* ── CTA band ───────────────────────────────────────────────────────────── */

.sws-faq-cta {
	padding-block: clamp(1rem, 2vw, 2rem) clamp(3rem, 5vw, 5rem);
}

.sws-faq-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
	padding: clamp(2.5rem, 4vw, 3.5rem) clamp(2.25rem, 5vw, 4.5rem);
	border-radius: 20px;
	background: var(--sws-primary);
	color: var(--sws-white);
}

.sws-faq-cta__eyebrow {
	margin: 0 0 1rem;
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(177, 234, 255, 0.9);
}

.sws-faq-cta__title {
	margin: 0 0 0.85rem;
	max-width: 24ch;
	font-family: var(--sws-serif);
	font-weight: 400;
	font-size: clamp(2.4rem, 3vw, 3rem);
	line-height: 1.15;
}

.sws-faq-cta__text {
	margin: 0;
	max-width: 48ch;
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.8);
}

/* Shared light-blue pill button (matches theme secondary button). */
.sws-faq-button {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	flex: 0 0 auto;
	padding: 1em 1.95em;
	border-radius: 999px;
	background: var(--sws-accent);
	border: 1px solid var(--sws-accent);
	color: var(--sws-primary);
	font-family: var(--sws-serif);
	font-size: 1.6rem;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.3s ease, color 0.3s ease;
}

.sws-faq-button:hover {
	background: var(--sws-white);
	border-color: var(--sws-white);
}

/* ── Contact ────────────────────────────────────────────────────────────── */

.sws-faq-contact {
	padding-block: clamp(1rem, 3vw, 2rem) clamp(4rem, 7vw, 7rem);
}

.sws-faq-contact__title {
	margin: 0 0 0.5rem;
	font-family: var(--sws-serif);
	font-weight: 400;
	font-size: clamp(2.6rem, 3.5vw, 3.4rem);
	color: var(--sws-primary);
}

.sws-faq-contact__sub {
	margin: 0 0 2.5rem;
	font-size: 1.5rem;
	font-weight: 300;
	color: var(--sws-muted);
}

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

@media (max-width: 640px) {
	/* Let the hero grow if the title/search wrap taller than the fixed band. */
	.sws-faq-hero {
		max-height: none;
	}

	.sws-faq-section__head {
		flex-direction: column;
		gap: 0.5rem;
	}

	.sws-faq-section__count {
		padding-top: 0;
	}

	.sws-faq-cta__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}