/* OKC FAQ Accordion — self-contained port of the legacy "FAQs Section".
 *
 * Source: wp-content/themes/okc/page-templates/sundays_t.php lines 222-269
 *         (identical markup in kids-template.php lines 207-254)
 * Legacy environment: Tailwind Play CDN (v3 defaults + Preflight, no config)
 *                     + themes/okc/assets/css/main.css
 *
 * Every Tailwind utility below is resolved to its v3 default value. Nothing
 * here depends on Tailwind being present. Every selector is scoped under
 * .okc-faq so nothing leaks into Astra/Elementor.
 *
 * Legacy utility inventory
 * ------------------------
 * section  : py-16 md:py-20 bg-[#C41E3A]
 * container: container mx-auto px-6
 * inner    : max-w-4xl mx-auto
 * h2       : text-5xl md:text-6xl font-black text-white mb-12 md:mb-16 uppercase
 *            + inline style font-family:'Pragmatica',sans-serif
 * list     : space-y-6
 * item     : okc-faq__item border-b-2 border-white/30 pb-6      (.okc-faq__item from main.css)
 * button   : okc-faq__question flex justify-between items-center w-full text-left
 *            + inline style font-family:'Pragmatica',sans-serif
 * h3       : text-xl md:text-2xl font-bold text-white italic pr-4
 * icon     : okc-faq__icon text-white text-3xl font-light flex-shrink-0
 * answer   : okc-faq__answer hidden mt-4
 * answer in: text-white/90 text-base md:text-lg leading-relaxed  (no font-family
 *            -> inherits body "Poppins", supplied by .okc-w in okc-base.css)
 */

/* ==========================================================================
   SECTION  —  py-16 md:py-20 bg-[#C41E3A]
   ========================================================================== */
.okc-w.okc-faq {
	padding-top: 4rem;    /* py-16 */
	padding-bottom: 4rem;
	background-color: #c41e3a;  /* bg-[#C41E3A] */
	/* the legacy section was full-width inside the page wrapper */
	width: 100%;
}

@media (min-width: 768px) {
	.okc-w.okc-faq {
		padding-top: 5rem;    /* md:py-20 */
		padding-bottom: 5rem;
	}
}

/* ==========================================================================
   CONTAINER  —  container mx-auto px-6
   Tailwind `container` (no config) = width:100% plus a max-width equal to each
   breakpoint, from that breakpoint up.
   ========================================================================== */
.okc-faq .okc-faq__container {
	width: 100%;
	margin-left: auto;   /* mx-auto */
	margin-right: auto;
	padding-left: 1.5rem;   /* px-6 */
	padding-right: 1.5rem;
}

@media (min-width: 640px) {
	.okc-faq .okc-faq__container { max-width: 640px; }
}
@media (min-width: 768px) {
	.okc-faq .okc-faq__container { max-width: 768px; }
}
@media (min-width: 1024px) {
	.okc-faq .okc-faq__container { max-width: 1024px; }
}
@media (min-width: 1280px) {
	.okc-faq .okc-faq__container { max-width: 1280px; }
}
@media (min-width: 1536px) {
	.okc-faq .okc-faq__container { max-width: 1536px; }
}

/* max-w-4xl mx-auto */
.okc-faq .okc-faq__inner {
	max-width: 56rem;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   TITLE  —  text-5xl md:text-6xl font-black text-white mb-12 md:mb-16 uppercase
   ========================================================================== */
.okc-faq .okc-faq__title {
	font-family: "Pragmatica", sans-serif;
	font-size: 3rem;        /* text-5xl */
	line-height: 1;
	font-weight: 900;       /* font-black */
	color: #ffffff;         /* text-white */
	margin-bottom: 3rem;    /* mb-12 */
	text-transform: uppercase;
	/* Tailwind Preflight beat main.css `h1..h6 {margin:0 0 15px}` in the legacy
	   load order (the Play CDN injects its <style> after the theme's links),
	   so the heading carries no implicit bottom margin. */
	margin-top: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.okc-faq .okc-faq__title {
		font-size: 3.75rem;    /* md:text-6xl */
		line-height: 1;
		margin-bottom: 4rem;   /* md:mb-16 */
	}
}

/* ==========================================================================
   LIST  —  space-y-6  (margin-top on every child except the first)
   ========================================================================== */
.okc-faq .okc-faq__list > * + * {
	margin-top: 1.5rem;
}

/* ==========================================================================
   ITEM  —  okc-faq__item border-b-2 border-white/30 pb-6
   plus main.css:
     .okc-faq__item        { transition: all .3s ease }
     .okc-faq__item:hover  { opacity: .9 }
     .okc-faq__item.active span { transform: rotate(45deg) }
   ========================================================================== */
.okc-faq .okc-faq__item {
	border-bottom-width: 2px;                        /* border-b-2 */
	border-bottom-style: solid;
	border-bottom-color: rgba(255, 255, 255, 0.3);   /* border-white/30 */
	padding-bottom: 1.5rem;                          /* pb-6 */
	transition: all 0.3s ease;                       /* main.css .okc-faq__item */
}

.okc-faq .okc-faq__item:hover {
	opacity: 0.9;                                    /* main.css .okc-faq__item:hover */
}

/* Carried over verbatim from main.css. In the legacy runtime this never fired:
   initFAQ() only adds `.active` in its fallback branch, which is skipped
   whenever a `.okc-faq__question` button exists — and it always does here. Kept for
   fidelity; the ported JS deliberately does not add `.active` either, because
   rotating the "−" glyph 45deg would render it as a slash. */
.okc-faq .okc-faq__item.active span {
	transform: rotate(45deg);
}

/* ==========================================================================
   QUESTION  —  okc-faq__question flex justify-between items-center w-full text-left
   The heading tag wraps the button (accessible accordion pattern); it is a
   bare block box so the rendered geometry matches the legacy markup, where the
   button was the direct child of .okc-faq__item.
   ========================================================================== */
.okc-faq .okc-faq__question-heading {
	display: block;
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.okc-faq .okc-faq__question {
	display: flex;                    /* flex */
	justify-content: space-between;   /* justify-between */
	align-items: center;              /* items-center */
	width: 100%;                      /* w-full */
	text-align: left;                 /* text-left */
	font-family: "Pragmatica", sans-serif;
	/* Preflight/base button reset, restated so Astra's button styling cannot
	   bleed in (Astra paints buttons with a background, padding and radius). */
	-webkit-appearance: none;
	appearance: none;
	background: none;
	background-color: transparent;
	background-image: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
	min-height: 0;
	cursor: pointer;
	transition: all 0.3s ease;   /* main.css `button { transition: all .3s ease }` */
}

/* main.css also gave every button a lift on hover; reproduced in okc-base.css
   as `.okc-w button:hover`, which stays in force here — that is the legacy
   behaviour for this button too. Only the keyboard focus ring is new. */
.okc-faq .okc-faq__question:focus {
	outline: none;
}

.okc-faq .okc-faq__question:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 4px;
}

/* h3 — text-xl md:text-2xl font-bold text-white italic pr-4 */
.okc-faq .okc-faq__question-text {
	font-family: "Pragmatica", sans-serif;
	font-size: 1.25rem;      /* text-xl */
	line-height: 1.75rem;
	font-weight: 700;        /* font-bold */
	font-style: italic;      /* italic */
	color: #ffffff;          /* text-white */
	padding-right: 1rem;     /* pr-4 */
	text-transform: none;
	letter-spacing: normal;
}

@media (min-width: 768px) {
	.okc-faq .okc-faq__question-text {
		font-size: 1.5rem;     /* md:text-2xl */
		line-height: 2rem;
	}
}

/* icon — text-white text-3xl font-light flex-shrink-0 */
.okc-faq .okc-faq__icon {
	font-family: "Pragmatica", sans-serif;
	color: #ffffff;          /* text-white */
	font-size: 1.875rem;     /* text-3xl */
	line-height: 2.25rem;
	font-weight: 300;        /* font-light — Pragmatica ships 400/700/900, so the
	                            browser resolves this to the Book weight, exactly
	                            as it did in the legacy theme */
	font-style: normal;
	flex-shrink: 0;          /* flex-shrink-0 */
	text-transform: none;
	letter-spacing: normal;
	user-select: none;
	-webkit-user-select: none;
}

/* ==========================================================================
   ANSWER  —  okc-faq__answer hidden mt-4  /  text-white/90 text-base md:text-lg
              leading-relaxed
   ========================================================================== */
.okc-faq .okc-faq__answer {
	margin-top: 1rem;   /* mt-4 */
}

/* Tailwind `.hidden` — scoped, and toggled by faq.js exactly as main.js did. */
.okc-faq .hidden {
	display: none;
}

.okc-faq .okc-faq__answer-inner {
	color: rgba(255, 255, 255, 0.9);   /* text-white/90 */
	font-size: 1rem;                   /* text-base */
	line-height: 1.625;                /* leading-relaxed overrides text-base's 1.5 */
	font-weight: 400;
	/* no font-family in the legacy markup: inherits the body face, which
	   okc-base.css supplies on .okc-w as "Poppins", ui-sans-serif, system-ui */
}

@media (min-width: 768px) {
	.okc-faq .okc-faq__answer-inner {
		font-size: 1.125rem;   /* md:text-lg */
		line-height: 1.625;    /* leading-relaxed still wins */
	}
}

/* --------------------------------------------------------------------------
   Rich-text affordances for the WYSIWYG answer.
   Preflight zeroed p/ul/ol margins and killed list markers in the legacy
   theme, so multi-block ACF answers ran together with no bullets. Single
   paragraphs — the shape of every legacy answer — render identically to the
   legacy output; these rules only touch content the legacy rendered broken.
   -------------------------------------------------------------------------- */
.okc-faq .okc-faq__answer-inner > * + * {
	margin-top: 1em;
}

.okc-faq .okc-faq__answer-inner ul,
.okc-faq .okc-faq__answer-inner ol {
	padding-left: 1.25em;
	list-style-position: outside;
}

.okc-faq .okc-faq__answer-inner ul {
	list-style-type: disc;
}

.okc-faq .okc-faq__answer-inner ol {
	list-style-type: decimal;
}

.okc-faq .okc-faq__answer-inner li + li {
	margin-top: 0.25em;
}

.okc-faq .okc-faq__answer-inner a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.okc-faq .okc-faq__answer-inner strong,
.okc-faq .okc-faq__answer-inner b {
	font-weight: 700;
}

.okc-faq .okc-faq__answer-inner em,
.okc-faq .okc-faq__answer-inner i {
	font-style: italic;
}

.okc-faq .okc-faq__answer-inner img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.okc-faq .okc-faq__item,
	.okc-faq .okc-faq__question {
		transition: none;
	}
}

/* ==========================================================================
   EDITOR
   Elementor renders the widget inside .elementor-widget-container; keep the
   red band edge-to-edge inside whatever column holds it.
   ========================================================================== */
.elementor-widget-okc-faq .elementor-widget-container {
	overflow: visible;
}