/* OKC Addons — Core Beliefs Tabs.
 *
 * Every value below is the resolved form of a Tailwind v3 default utility used
 * by themes/okc/page-templates/about_t.php lines 362-658, so the widget renders
 * identically with no Tailwind on the page. Utility -> value notes are inline.
 *
 * Legacy source classes (repeater branch, the one the live page hits):
 *   section   relative border-[10px] md:border-[30px] border-[#f5e2ce]
 *             py-16 md:py-20 lg:py-24 bg-[#9B2C2C]
 *   container container mx-auto px-6 lg:px-12
 *   heading   text-xl md:text-4xl lg:text-6xl font-black mb-8 md:mb-10 uppercase text-white
 *   tablist   flex flex-wrap gap-0 md:gap-4 mb-8 md:mb-10
 *   tab       px-4 md:px-6 py-2 text-white font-bold text-lg lg:text-2xl uppercase
 *             border-b-2 transition-all  (+ border-white when .active,
 *             border-transparent hover:border-white/50 otherwise)
 *   panel     .tab-content, toggled with Tailwind's .hidden (display:none)
 *   desc      text-white text-xl lg:text-2xl leading-relaxed mb-8 md:mb-10
 *   row       block md:flex justify-between gap-4
 *   subtext   text-white text-sm md:text-base font-semibold hidden
 *   tab btn   mt-4 md:mt-0 bg-white text-[#9B2C2C] px-6 md:px-8 py-2 md:py-3
 *             rounded-md inline-block font-bold text-sm md:text-base
 *             hover:bg-[#0A3B5C] hover:text-white transition-all duration-300
 *             uppercase whitespace-nowrap hidden
 *   footer a  inline-block bg-white text-black font-medium px-6 py-2.5 rounded-md
 *             border border-gray-200 shadow-sm transition-colors duration-200
 *             hover:bg-gray-50 hover:border-gray-300
 */

.okc-core-beliefs {
	/* The legacy theme never set body font-family (main.css had it commented
	   out), so untagged text fell back to Tailwind Preflight's default sans
	   stack — not Poppins. Reproduced here for the tabs and footer link. */
	--okc-cb-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

	position: relative;            /* relative */
	background-color: #9b2c2c;     /* bg-[#9B2C2C] */
	border-style: solid;
	border-color: #f5e2ce;         /* border-[#f5e2ce] */
	border-width: 10px;            /* border-[10px] */
	padding-top: 4rem;             /* py-16 */
	padding-bottom: 4rem;
	/* main.css: body { font-size: 15px; font-weight: 400 } + Preflight
	   html { line-height: 1.5 }. Anything without its own size inherits this. */
	font-size: 15px;
	line-height: 1.5;
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   Container — Tailwind `.container .mx-auto .px-6 .lg:px-12`
   -------------------------------------------------------------------------- */
.okc-core-beliefs__container {
	width: 100%;
	padding-left: 1.5rem;          /* px-6 */
	padding-right: 1.5rem;
}

.okc-core-beliefs__container--fixed {
	margin-left: auto;             /* mx-auto */
	margin-right: auto;
}

.okc-core-beliefs__inner {
	width: 100%;                   /* w-full */
}

/* --------------------------------------------------------------------------
   Heading
   -------------------------------------------------------------------------- */
.okc-core-beliefs__title {
	font-family: "Pragmatica", sans-serif; /* inline style in the legacy markup */
	font-size: 1.25rem;            /* text-xl */
	line-height: 1.75rem;
	font-weight: 900;              /* font-black */
	margin-bottom: 2rem;           /* mb-8 */
	text-transform: uppercase;     /* uppercase */
	color: #ffffff;                /* text-white */
}

/* --------------------------------------------------------------------------
   Tab list
   -------------------------------------------------------------------------- */
.okc-core-beliefs__tabs {
	display: flex;                 /* flex */
	flex-wrap: wrap;               /* flex-wrap */
	gap: 0;                        /* gap-0 */
	margin-bottom: 2rem;           /* mb-8 */
	justify-content: flex-start;
}

.okc-core-beliefs__tab {
	font-family: var(--okc-cb-sans);
	padding: 0.5rem 1rem;          /* py-2 px-4 */
	color: #ffffff;                /* text-white */
	font-weight: 700;              /* font-bold */
	font-size: 1.125rem;           /* text-lg */
	line-height: 1.75rem;
	text-transform: uppercase;     /* uppercase */
	border-bottom-width: 2px;      /* border-b-2 */
	border-bottom-style: solid;
	border-bottom-color: transparent; /* border-transparent */
	/* transition-all */
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
	/* UA default for <button>; stated so an Astra button rule cannot shift it. */
	text-align: center;
	/* Astra styles bare `button` selectors — these keep its background pill,
	   rounding, tracking and shadow off the legacy underline tab. The base
	   layer's `.okc-w button:hover` lift is more specific and still applies,
	   exactly as main.css's global `button:hover` did in the legacy theme. */
	background-color: transparent;
	border-radius: 0;
	letter-spacing: normal;
	box-shadow: none;
	width: auto;
	min-height: 0;
}

/* hover:border-white/50 — only the inactive tabs carried this in the legacy
   markup, so the .is-active rule below deliberately comes last and wins. */
.okc-core-beliefs__tab:hover {
	border-bottom-color: rgb(255 255 255 / 0.5);
}

.okc-core-beliefs__tab.is-active {
	border-bottom-color: #ffffff;  /* border-white */
}

/* Not in the legacy theme — the tablist is keyboard-driven here, so it needs a
   visible focus ring. Only shows for keyboard users. */
.okc-core-beliefs__tab:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Panels — Tailwind toggled these with `.hidden` (display:none)
   -------------------------------------------------------------------------- */
.okc-core-beliefs__panels {
	width: 100%;                   /* w-full */
}

.okc-core-beliefs__panel {
	display: none;
}

.okc-core-beliefs__panel.is-active {
	display: block;
}

.okc-core-beliefs__panel:focus {
	outline: none;
}

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

/* --------------------------------------------------------------------------
   Panel description (WYSIWYG)
   -------------------------------------------------------------------------- */
.okc-core-beliefs__desc {
	font-family: "Pragmatica", sans-serif; /* inline style in the legacy markup */
	color: #ffffff;                /* text-white */
	font-size: 1.25rem;            /* text-xl */
	line-height: 1.625;            /* leading-relaxed — beats text-xl's 1.75rem */
	margin-bottom: 2rem;           /* mb-8 */
}

/* Preflight zeroed heading/paragraph margins inside the editor output, and the
   legacy section inherited that. Kept so stacked paragraphs match the old page;
   the "Paragraph Spacing" control re-adds a gap when an editor wants one. */
.okc-core-beliefs .okc-core-beliefs__desc p,
.okc-core-beliefs .okc-core-beliefs__desc h1,
.okc-core-beliefs .okc-core-beliefs__desc h2,
.okc-core-beliefs .okc-core-beliefs__desc h3,
.okc-core-beliefs .okc-core-beliefs__desc h4,
.okc-core-beliefs .okc-core-beliefs__desc h5,
.okc-core-beliefs .okc-core-beliefs__desc h6,
.okc-core-beliefs .okc-core-beliefs__desc ul,
.okc-core-beliefs .okc-core-beliefs__desc ol {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	color: inherit;
}

.okc-core-beliefs .okc-core-beliefs__desc strong,
.okc-core-beliefs .okc-core-beliefs__desc b {
	font-weight: 700;
}

.okc-core-beliefs .okc-core-beliefs__desc em,
.okc-core-beliefs .okc-core-beliefs__desc i {
	font-style: italic;
}

/* Preflight left links inside the copy indistinguishable from body text and
   main.css killed the underline; Astra would otherwise recolour them. */
.okc-core-beliefs .okc-core-beliefs__desc a,
.okc-core-beliefs .okc-core-beliefs__desc a:hover,
.okc-core-beliefs .okc-core-beliefs__desc a:focus {
	color: inherit;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Sub text + per-tab button row — `block md:flex justify-between gap-4`
   -------------------------------------------------------------------------- */
.okc-core-beliefs__row {
	display: block;                /* block */
}

.okc-core-beliefs__subtext {
	font-family: "Pragmatica", sans-serif; /* inline style in the legacy markup */
	color: #ffffff;                /* text-white */
	font-size: 0.875rem;           /* text-sm */
	line-height: 1.25rem;
	font-weight: 600;              /* font-semibold */
}

.okc-core-beliefs__tab-btn {
	font-family: "Pragmatica", sans-serif; /* inline style in the legacy markup */
	margin-top: 1rem;              /* mt-4 */
	background-color: #ffffff;     /* bg-white */
	color: #9b2c2c;                /* text-[#9B2C2C] */
	padding: 0.5rem 1.5rem;        /* py-2 px-6 */
	border-radius: 0.375rem;       /* rounded-md */
	display: inline-block;         /* inline-block */
	font-weight: 700;              /* font-bold */
	font-size: 0.875rem;           /* text-sm */
	line-height: 1.25rem;
	text-transform: uppercase;     /* uppercase */
	white-space: nowrap;           /* whitespace-nowrap */
	text-decoration: none;
	/* transition-all duration-300 */
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 300ms;
}

.okc-core-beliefs__tab-btn:hover,
.okc-core-beliefs__tab-btn:focus {
	background-color: #0a3b5c;     /* hover:bg-[#0A3B5C] */
	color: #ffffff;                /* hover:text-white */
}

/* --------------------------------------------------------------------------
   Statement of faith link
   -------------------------------------------------------------------------- */
.okc-core-beliefs__statement-link {
	font-family: var(--okc-cb-sans);
	display: inline-block;         /* inline-block */
	background-color: #ffffff;     /* bg-white */
	color: #000000;                /* text-black */
	font-weight: 500;              /* font-medium */
	font-size: 15px;               /* inherited body size in the legacy theme */
	line-height: 1.5;
	padding: 0.625rem 1.5rem;      /* py-2.5 px-6 */
	border-radius: 0.375rem;       /* rounded-md */
	border-width: 1px;             /* border */
	border-style: solid;
	border-color: #e5e7eb;         /* border-gray-200 */
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
	text-decoration: none;
	/* transition-colors duration-200 */
	transition-property: color, background-color, border-color,
		text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 200ms;
}

.okc-core-beliefs__statement-link:hover,
.okc-core-beliefs__statement-link:focus {
	background-color: #f9fafb;     /* hover:bg-gray-50 */
	border-color: #d1d5db;         /* hover:border-gray-300 */
}

/* ==========================================================================
   md — Tailwind `md:` = min-width: 768px
   ========================================================================== */
@media (min-width: 768px) {
	.okc-core-beliefs {
		border-width: 30px;            /* md:border-[30px] */
		padding-top: 5rem;             /* md:py-20 */
		padding-bottom: 5rem;
	}

	.okc-core-beliefs__title {
		font-size: 2.25rem;            /* md:text-4xl */
		line-height: 2.5rem;
		margin-bottom: 2.5rem;         /* md:mb-10 */
	}

	.okc-core-beliefs__tabs {
		gap: 1rem;                     /* md:gap-4 */
		margin-bottom: 2.5rem;         /* md:mb-10 */
	}

	.okc-core-beliefs__tab {
		padding-left: 1.5rem;          /* md:px-6 */
		padding-right: 1.5rem;
	}

	.okc-core-beliefs__desc {
		margin-bottom: 2.5rem;         /* md:mb-10 */
	}

	.okc-core-beliefs__row {
		display: flex;                 /* md:flex */
		justify-content: space-between; /* justify-between */
		gap: 1rem;                     /* gap-4 */
	}

	.okc-core-beliefs__subtext {
		font-size: 1rem;               /* md:text-base */
		line-height: 1.5rem;
	}

	.okc-core-beliefs__tab-btn {
		margin-top: 0;                 /* md:mt-0 */
		padding: 0.75rem 2rem;         /* md:py-3 md:px-8 */
		font-size: 1rem;               /* md:text-base */
		line-height: 1.5rem;
	}
}

/* ==========================================================================
   lg — Tailwind `lg:` = min-width: 1024px
   ========================================================================== */
@media (min-width: 1024px) {
	.okc-core-beliefs {
		padding-top: 6rem;             /* lg:py-24 */
		padding-bottom: 6rem;
	}

	.okc-core-beliefs__container {
		padding-left: 3rem;            /* lg:px-12 */
		padding-right: 3rem;
	}

	.okc-core-beliefs__title {
		font-size: 3.75rem;            /* lg:text-6xl */
		line-height: 1;
	}

	.okc-core-beliefs__tab {
		font-size: 1.5rem;             /* lg:text-2xl */
		line-height: 2rem;
	}

	.okc-core-beliefs__desc {
		font-size: 1.5rem;             /* lg:text-2xl */
		/* leading-relaxed still wins over text-2xl's 2rem line-height */
		line-height: 1.625;
	}
}

/* ==========================================================================
   Tailwind `.container` max-width steps (640 / 768 / 1024 / 1280 / 1536)
   ========================================================================== */
@media (min-width: 640px) {
	.okc-core-beliefs__container--fixed { max-width: 640px; }
}
@media (min-width: 768px) {
	.okc-core-beliefs__container--fixed { max-width: 768px; }
}
@media (min-width: 1024px) {
	.okc-core-beliefs__container--fixed { max-width: 1024px; }
}
@media (min-width: 1280px) {
	.okc-core-beliefs__container--fixed { max-width: 1280px; }
}
@media (min-width: 1536px) {
	.okc-core-beliefs__container--fixed { max-width: 1536px; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.okc-core-beliefs__tab,
	.okc-core-beliefs__tab-btn,
	.okc-core-beliefs__statement-link {
		transition-duration: 0.01ms;
	}

	.okc-core-beliefs__tab:hover {
		transform: none;
	}
}