/* OKC Mission Statement Band
 * ---------------------------------------------------------------------------
 * Port of themes/okc/page-templates/about_t.php lines 63-83 (the identical band
 * lives at kids-template.php lines 21-41).
 *
 * Legacy markup:
 *   <section class="relative z-10 py-16 md:py-20 bg-[#F5E6D3]">
 *     <div class="container mx-auto px-6">
 *       <div class="max-w-7xl mx-auto text-center">
 *         <div class="stat-font sm:text-xl md:text-3xl lg:text-4xl xl:text-5xl
 *                     font-black text-[#0A3B5C] leading-8 uppercase px-4"
 *              style="font-family: 'Pragmatica', sans-serif">
 *
 * Every Tailwind utility above is resolved to literal values here, so the widget
 * needs no Tailwind at runtime. Sizes are read through custom properties so the
 * Elementor controls can override any single step of the ramp.
 *
 * `.stat-font` is deliberately unstyled: it has no rule in main.css, and the only
 * declaration anywhere in the theme (style.css line 583) is malformed and aimed at
 * `h2.stat-font > p` while the template renders a div — it never took effect.
 * ------------------------------------------------------------------------- */

.okc-mission-statement {
	/* Legacy defaults; each is overridden by an Elementor control. */
	--okc-ms-py: 4rem;        /* py-16 */
	--okc-ms-py-md: 5rem;     /* md:py-20 */
	--okc-ms-text-px: 1rem;   /* px-4 */

	--okc-ms-fs: 15px;        /* no text-* below 640px -> theme body font-size */
	--okc-ms-lh: 2rem;        /* leading-8 */
	--okc-ms-fs-sm: 1.25rem;  /* sm:text-xl */
	--okc-ms-lh-sm: 1.75rem;
	--okc-ms-fs-md: 1.875rem; /* md:text-3xl */
	--okc-ms-lh-md: 2.25rem;
	--okc-ms-fs-lg: 2.25rem;  /* lg:text-4xl */
	--okc-ms-lh-lg: 2.5rem;
	--okc-ms-fs-xl: 3rem;     /* xl:text-5xl */
	--okc-ms-lh-xl: 1em;

	position: relative;        /* relative */
	z-index: 10;               /* z-10 */
	background-color: #f5e6d3; /* bg-[#F5E6D3] */
	padding-top: var(--okc-ms-py);
	padding-bottom: var(--okc-ms-py);
}

/* --------------------------------------------------------------------------
   .container mx-auto px-6
   Tailwind v3 `container`: width:100% plus a max-width jump at each breakpoint.
   -------------------------------------------------------------------------- */
.okc-mission-statement__container {
	width: 100%;
	margin-left: auto;   /* mx-auto */
	margin-right: auto;
	padding-left: 1.5rem;  /* px-6 */
	padding-right: 1.5rem;
}

/* --------------------------------------------------------------------------
   max-w-7xl mx-auto text-center
   -------------------------------------------------------------------------- */
.okc-mission-statement__inner {
	max-width: 80rem; /* max-w-7xl */
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* --------------------------------------------------------------------------
   The statement itself
   -------------------------------------------------------------------------- */
/* The section class is repeated on purpose. okc-base.css contains
   `.okc-w h1 … .okc-w h6 { font-size: inherit; font-weight: inherit }` at
   specificity (0,1,1); a single `.okc-mission-statement__text` is only (0,1,0),
   so with the HTML Tag control set to any heading the reset would win and both
   the size ramp and font-black would collapse to the inherited body values.
   Doubling the class takes this to (0,2,0) and keeps every tag identical. */
.okc-mission-statement .okc-mission-statement__text {
	padding-left: var(--okc-ms-text-px);  /* px-4 */
	padding-right: var(--okc-ms-text-px);
	font-family: "Pragmatica", sans-serif; /* inline style on the legacy node */
	font-weight: 900;                      /* font-black */
	text-transform: uppercase;             /* uppercase */
	color: #0a3b5c;                        /* text-[#0A3B5C] */
	font-size: var(--okc-ms-fs);
	line-height: var(--okc-ms-lh);
}

/* WYSIWYG editing wraps lines in <p>; keep the legacy single-block rhythm. */
.okc-mission-statement__text p {
	margin: 0;
}

.okc-mission-statement__text a {
	color: inherit;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Utility classes the legacy copy itself contained:
   <br class="hidden md:block" /> — no break on phones, break from 768px up.
   -------------------------------------------------------------------------- */
.okc-mission-statement .hidden {
	display: none;
}

/* --------------------------------------------------------------------------
   Responsive ramp — Tailwind v3 breakpoints, mobile first.

   Note the line heights: in Tailwind v3 the responsive `text-*` utilities are
   emitted after the unprefixed `leading-8`, so each breakpoint's own bundled
   line-height wins over the 2rem. That is reproduced here verbatim; see the
   widget PHP for the note about it.
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
	.okc-mission-statement__container--fixed {
		max-width: 640px;
	}

	.okc-mission-statement .okc-mission-statement__text {
		font-size: var(--okc-ms-fs-sm);   /* sm:text-xl  1.25rem */
		line-height: var(--okc-ms-lh-sm); /*             1.75rem */
	}

	.okc-mission-statement .sm\:block {
		display: block;
	}
}

@media (min-width: 768px) {
	.okc-mission-statement {
		padding-top: var(--okc-ms-py-md);    /* md:py-20 */
		padding-bottom: var(--okc-ms-py-md);
	}

	.okc-mission-statement__container--fixed {
		max-width: 768px;
	}

	.okc-mission-statement .okc-mission-statement__text {
		font-size: var(--okc-ms-fs-md);   /* md:text-3xl  1.875rem */
		line-height: var(--okc-ms-lh-md); /*              2.25rem  */
	}

	.okc-mission-statement .md\:block {
		display: block;
	}
}

@media (min-width: 1024px) {
	.okc-mission-statement__container--fixed {
		max-width: 1024px;
	}

	.okc-mission-statement .okc-mission-statement__text {
		font-size: var(--okc-ms-fs-lg);   /* lg:text-4xl  2.25rem */
		line-height: var(--okc-ms-lh-lg); /*              2.5rem  */
	}

	.okc-mission-statement .lg\:block {
		display: block;
	}
}

@media (min-width: 1280px) {
	.okc-mission-statement__container--fixed {
		max-width: 1280px;
	}

	.okc-mission-statement .okc-mission-statement__text {
		font-size: var(--okc-ms-fs-xl);   /* xl:text-5xl  3rem      */
		line-height: var(--okc-ms-lh-xl); /*              1 (= 1em) */
	}

	.okc-mission-statement .xl\:block {
		display: block;
	}
}

@media (min-width: 1536px) {
	.okc-mission-statement__container--fixed {
		max-width: 1536px;
	}
}