/*
 * FAQ page — marker prefix `ab-faq-` (distinct from the fundraise `ab-faq`
 * accordion, which has no trailing dash).
 *   1. ab-faq-hero    — blue hero: eyebrow, headline, lede (centred, white)
 *   2. ab-faq-group   — grouped accordion sections (alternating white / cream)
 *   3. ab-faq-contact — "Still have a question?" band + contact-details card
 *   4. ab-faq-cta     — blue "Give with confidence" CTA band
 *
 * Tokens where they map (ab-blue #0D72BA, ab-navy #053A66, ab-green #0F7060,
 * primary-700 #0A5A95, action-500 #F59423 orange, neutral scale). Design-only
 * shades stay literal and scoped: section lede #555, hairline #E9E9E9, the
 * Zakat card #F6F9F9. Figma TITLE→capitalize, UPPER→uppercase, LOWER→lowercase.
 * Loaded conditionally by inc/enqueue.php (marker `ab-faq-`).
 */

.ab-faq-hero *,
.ab-faq-group *,
.ab-faq-contact *,
.ab-faq-cta * { box-sizing: border-box; }

/* ============================================================= *
 * 1. HERO — blue band                                           *
 * ============================================================= */
.ab-faq-hero {
	background: var(--wp--preset--color--ab-blue);
	padding-top: 150px;
	padding-bottom: 150px;
}
.ab-faq-hero__text {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}
.ab-faq-hero__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #fff;
}
.ab-faq-hero__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 64px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: capitalize;
	color: #fff;
}
.ab-faq-hero__lede {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	text-transform: capitalize;
	color: #fff;
}

/* ============================================================= *
 * 2. GROUPED ACCORDION SECTIONS                                 *
 * ============================================================= */
.ab-faq-group {
	background: #fff;
	padding-top: 100px;
	padding-bottom: 100px;
	border-bottom: 1px solid #E9E9E9;
}
.ab-faq-group--alt { background: var(--wp--custom--neutral--100); } /* #F5F2ED */
.ab-faq-group__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.ab-faq-group__head {
	max-width: 800px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.ab-faq-group__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 42px;
	font-weight: 600;
	line-height: 1.1;
	text-transform: capitalize;
	color: var(--wp--preset--color--ab-navy);
}
.ab-faq-group__lede {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	color: #555;
}
.ab-faq-list {
	display: flex;
	flex-direction: column;
	padding-top: 30px;
	gap: 18px;
}

/* Accordion item — native <details>, no JS. Open by default (design state). */
.ab-faq-item {
	padding: 30px 40px;
	border: 0.6px solid var(--wp--custom--neutral--300);
	border-radius: 4px;
	background: #fff;
}
.ab-faq-group--alt .ab-faq-item { background: #fff; }
.ab-faq-item__summary {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 30px;
	cursor: pointer;
	list-style: none;
}
.ab-faq-item__summary::-webkit-details-marker { display: none; }
.ab-faq-item__q {
	max-width: 900px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.35;
	text-align: justify;
	color: var(--wp--custom--primary--700); /* #0A5A95 */
}
.ab-faq-item__icon {
	position: relative;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-top: 6px;
	color: var(--wp--custom--neutral--500);
}
.ab-faq-item__icon::before,
.ab-faq-item__icon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 22px;
	height: 1.5px;
	background: currentColor;
	transform: translate(-50%, -50%);
}
.ab-faq-item__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
	transition: opacity .15s ease;
}
.ab-faq-item[open] .ab-faq-item__icon::after { opacity: 0; }
.ab-faq-item__body {
	max-width: 900px;
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.ab-faq-a {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	text-align: justify;
	color: var(--wp--custom--neutral--700);
}

/* Inline text links inside answers. */
.ab-faq-link {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 18px;
	font-weight: 500;
	text-transform: capitalize;
	color: var(--wp--preset--color--ab-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.ab-faq-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

/* Buttons inside answers. */
.ab-faq-btn {
	display: inline-block;
	padding: 12px 30px;
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 1.4px; /* 0.0875em @16px */
	text-transform: capitalize;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.ab-faq-btn--primary {
	background: var(--wp--custom--action--500); /* #F59423 */
	color: #fff;
}
.ab-faq-btn--primary:hover,
.ab-faq-btn--primary:focus { background: #E07E10; }
.ab-faq-btn--secondary {
	border: 1.5px solid var(--wp--preset--color--ab-blue);
	color: var(--wp--custom--primary--700);
}
.ab-faq-btn--secondary:hover,
.ab-faq-btn--secondary:focus {
	background: var(--wp--preset--color--ab-blue);
	color: #fff;
}
.ab-faq-btn--zakat {
	background: var(--wp--preset--color--ab-green);
	color: #fff;
}
.ab-faq-btn--zakat:hover,
.ab-faq-btn--zakat:focus { background: #0C5A4D; }

/* Zakat highlight item. */
.ab-faq-item--zakat {
	background: #F6F9F9;
	border: 0.6px solid var(--wp--custom--neutral--300);
	border-left: 4px solid var(--wp--preset--color--ab-green);
}
.ab-faq-group--alt .ab-faq-item--zakat { background: #F6F9F9; }
.ab-faq-item--zakat .ab-faq-item__q { color: var(--wp--preset--color--ab-green); }
.ab-faq-pill {
	align-self: flex-start;
	display: inline-block;
	margin-bottom: 4px;
	padding: 6px 12px;
	border-radius: 2px;
	background: var(--wp--preset--color--ab-green);
	color: #fff;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-transform: capitalize;
}
.ab-faq-item--zakat .ab-faq-item__summary { flex-direction: row; }
.ab-faq-item--zakat .ab-faq-item__head { display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
.ab-faq-link--green { color: var(--wp--preset--color--ab-green); }

/* ============================================================= *
 * 3. CONTACT BAND — "Still have a question?"                    *
 * ============================================================= */
.ab-faq-contact {
	background: #fff;
	padding-top: 100px;
	padding-bottom: 100px;
	border-bottom: 1px solid #E9E9E9;
}
.ab-faq-contact__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 30px;
}
.ab-faq-contact__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.ab-faq-contact__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--wp--preset--color--ab-blue);
}
.ab-faq-contact__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 42px;
	font-weight: 600;
	line-height: 1.1;
	text-transform: capitalize;
	color: var(--wp--preset--color--ab-navy);
}
.ab-faq-contact__lede {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--wp--custom--neutral--700);
}
.ab-faq-contact__card {
	align-self: stretch;
	padding: 40px 30px;
	border: 0.6px solid var(--wp--custom--neutral--300);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.ab-faq-contact__row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 0;
	border-bottom: 0.6px solid var(--wp--custom--neutral--300);
}
.ab-faq-contact__row:first-child { padding-top: 0; }
.ab-faq-contact__row:last-child { padding-bottom: 0; border-bottom: 0; }
.ab-faq-contact__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	color: var(--wp--preset--color--ab-blue);
}
.ab-faq-contact__icon svg { width: 30px; height: 30px; display: block; }
.ab-faq-contact__label {
	margin: 0 0 3px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--wp--custom--neutral--500);
}
.ab-faq-contact__value {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--wp--preset--color--ab-blue);
	text-decoration: none;
}
a.ab-faq-contact__value:hover { text-decoration: underline; }
.ab-faq-contact__value--email { font-size: 22px; text-transform: lowercase; }
.ab-faq-contact__value--phone { text-transform: lowercase; }

/* ============================================================= *
 * 4. CTA — blue "Give with confidence" band                     *
 * ============================================================= */
.ab-faq-cta {
	background: var(--wp--preset--color--ab-blue);
	padding-top: 50px;
	padding-bottom: 50px;
}
.ab-faq-cta__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	text-align: center;
}
.ab-faq-cta__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.ab-faq-cta__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #fff;
}
.ab-faq-cta__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 40px;
	font-weight: 400;
	line-height: 1.15;
	text-transform: capitalize;
	color: #fff;
}
.ab-faq-cta__lede {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	color: #fff;
}
.ab-faq-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 25px;
}
.ab-faq-cta__btn--outline {
	display: inline-block;
	padding: 12px 30px;
	border: 0.6px solid #fff;
	border-radius: 4px;
	background: transparent;
	color: #fff;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 1.4px;
	text-transform: capitalize;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.ab-faq-cta__btn--outline:hover,
.ab-faq-cta__btn--outline:focus { background: #fff; color: var(--wp--preset--color--ab-blue); }

/* ============================================================= *
 * Responsive                                                    *
 * ============================================================= */
@media (max-width: 900px) {
	.ab-faq-contact__inner { grid-template-columns: 1fr; }
}
@media (max-width: 782px) {
	.ab-faq-hero { padding-top: 80px; padding-bottom: 80px; }
	.ab-faq-hero__title { font-size: 40px; }
	.ab-faq-hero__lede { font-size: 18px; }
	.ab-faq-group,
	.ab-faq-contact { padding-top: 60px; padding-bottom: 60px; }
	.ab-faq-group__title,
	.ab-faq-contact__title { font-size: 32px; }
	.ab-faq-item { padding: 24px; }
	.ab-faq-item__q { font-size: 20px; text-align: left; }
	.ab-faq-a { text-align: left; }
	.ab-faq-cta__title { font-size: 30px; }
}