/* OKC Page Title Band
 * ---------------------------------------------------------------------------
 * Port of the solid-colour title band that opens three legacy templates. The
 * markup is byte-identical in all three; only the two hex codes and the ACF
 * field differ:
 *
 *   next-steps.php    lines  7-17   bg #0A3B5C  text #FDEFD5  "NEXT STEPS"
 *   sundays_t.php     lines  8-19   bg #B8D4E8  text #0A3B5C  "SUNDAYS"
 *   kids-template.php lines  8-19   bg #B8D4E8  text #0A3B5C  "KIDS"
 *
 * Legacy markup:
 *   <section class="pt-24 md:pt-28 pb-12 md:pb-16 px-6 bg-[#0A3B5C]">
 *     <div class="container mx-auto text-center">
 *       <h1 class="text-6xl sm:text-7xl md:text-8xl lg:text-9xl font-black
 *                  text-[#FDEFD5] leading-none tracking-tighter uppercase
 *                  ml-2 md:ml-4"
 *           style="font-family: 'Pragmatica',font-weight: bold, sans-serif">
 *
 * Utility -> value (Tailwind v3 defaults, mobile-first):
 *   pt-24        padding-top: 6rem            md:pt-28  padding-top: 7rem
 *   pb-12        padding-bottom: 3rem         md:pb-16  padding-bottom: 4rem
 *   px-6         padding-inline: 1.5rem
 *   container    width:100% + max-width steps 640/768/1024/1280/1536px
 *   mx-auto      margin-inline: auto
 *   text-center  text-align: center
 *   text-6xl     3.75rem / 1     sm:text-7xl  4.5rem / 1
 *   md:text-8xl  6rem / 1        lg:text-9xl  8rem / 1
 *   font-black   font-weight: 900
 *   leading-none line-height: 1
 *   tracking-tighter  letter-spacing: -0.05em
 *   uppercase    text-transform: uppercase
 *   ml-2         margin-left: 0.5rem          md:ml-4   margin-left: 1rem
 *
 * main.css contribution reproduced here:
 *   @media (max-width: 768px) { h1 { font-size: 3rem !important } }
 *   That rule was site-wide and !important, so it beat every Tailwind utility:
 *   the heading was 3rem from 0px through 768px inclusive (sm:text-7xl never
 *   rendered) and md:text-8xl only took effect from 769px. Reproduced by source
 *   order under .okc-page-title--clamp, so the Elementor toggle can drop it.
 *
 * The malformed inline font-family (a stray colon inside the value) was dropped
 * by every browser, so the legacy heading inherited the page font — main.css has
 * its `body { font-family: 'Poppins' }` commented out, so that resolved to
 * Tailwind Preflight's ui-sans-serif/system-ui stack. Pragmatica is what the
 * markup intended and is the default here; the Font control offers "inherit" to
 * fall back to okc-base.css's `.okc-w` stack. See the widget PHP header.
 *
 * Everything an Elementor control can change is read through a custom property,
 * so the control (specificity 0,2,0 on {{WRAPPER}} .okc-page-title) always beats
 * the declaration below (0,1,0) no matter which stylesheet loads first.
 *
 * Breakpoints (min-width, mobile-first): sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536
 * ------------------------------------------------------------------------- */

.okc-page-title {
	/* Legacy defaults; each is overridden by an Elementor control. */
	--okc-pt-bg: #0a3b5c;        /* bg-[#0A3B5C] */
	--okc-pt-color: #fdefd5;     /* text-[#FDEFD5] */
	--okc-pt-font: "Pragmatica", sans-serif;
	--okc-pt-weight: 900;        /* font-black */
	--okc-pt-transform: uppercase;
	--okc-pt-align: center;      /* text-center */
	--okc-pt-tracking: -0.05em;  /* tracking-tighter */
	--okc-pt-lh: 1em;            /* leading-none */

	--okc-pt-pt: 6rem;           /* pt-24 */
	--okc-pt-pt-md: 7rem;        /* md:pt-28 */
	--okc-pt-pb: 3rem;           /* pb-12 */
	--okc-pt-pb-md: 4rem;        /* md:pb-16 */
	--okc-pt-px: 1.5rem;         /* px-6 */

	--okc-pt-ml: 0.5rem;         /* ml-2 */
	--okc-pt-ml-md: 1rem;        /* md:ml-4 */

	--okc-pt-fs: 3.75rem;        /* text-6xl */
	--okc-pt-fs-sm: 4.5rem;      /* sm:text-7xl */
	--okc-pt-fs-md: 6rem;        /* md:text-8xl */
	--okc-pt-fs-lg: 8rem;        /* lg:text-9xl */
	--okc-pt-fs-clamp: 3rem;     /* main.css h1 clamp at <=768px */

	background-color: var(--okc-pt-bg);
	padding-top: var(--okc-pt-pt);
	padding-bottom: var(--okc-pt-pb);
	padding-left: var(--okc-pt-px);
	padding-right: var(--okc-pt-px);
}

@media (min-width: 768px) {
	.okc-page-title {
		padding-top: var(--okc-pt-pt-md);     /* md:pt-28 */
		padding-bottom: var(--okc-pt-pb-md);  /* md:pb-16 */
	}
}

/* --------------------------------------------------------------------------
   .container .mx-auto .text-center
   Tailwind v3 `container` is width:100% with a hard max-width step at each
   breakpoint — it does NOT grow smoothly, so between 768px and 1023px the inner
   box stays pinned at 768px inside the section's 1.5rem padding.
   -------------------------------------------------------------------------- */
.okc-page-title .okc-page-title__container {
	width: 100%;
	margin-left: auto;   /* mx-auto */
	margin-right: auto;
	text-align: var(--okc-pt-align);
}

@media (min-width: 640px) {
	.okc-page-title .okc-page-title__container--fixed {
		max-width: 640px;
	}
}

@media (min-width: 768px) {
	.okc-page-title .okc-page-title__container--fixed {
		max-width: 768px;
	}
}

@media (min-width: 1024px) {
	.okc-page-title .okc-page-title__container--fixed {
		max-width: 1024px;
	}
}

@media (min-width: 1280px) {
	.okc-page-title .okc-page-title__container--fixed {
		max-width: 1280px;
	}
}

@media (min-width: 1536px) {
	.okc-page-title .okc-page-title__container--fixed {
		max-width: 1536px;
	}
}

/* --------------------------------------------------------------------------
   The heading
   display:block is forced so a span/inline tag chosen in the editor still
   behaves like the legacy <h1> (margin-left and text-align both apply).
   -------------------------------------------------------------------------- */
.okc-page-title .okc-page-title__title {
	display: block;
	font-family: var(--okc-pt-font);
	font-size: var(--okc-pt-fs);              /* text-6xl */
	line-height: var(--okc-pt-lh);            /* leading-none */
	font-weight: var(--okc-pt-weight);        /* font-black */
	color: var(--okc-pt-color);
	letter-spacing: var(--okc-pt-tracking);   /* tracking-tighter */
	text-transform: var(--okc-pt-transform);  /* uppercase */
	margin-left: var(--okc-pt-ml);            /* ml-2 */
}

@media (min-width: 640px) {
	.okc-page-title .okc-page-title__title {
		font-size: var(--okc-pt-fs-sm);   /* sm:text-7xl */
	}
}

@media (min-width: 768px) {
	.okc-page-title .okc-page-title__title {
		font-size: var(--okc-pt-fs-md);   /* md:text-8xl */
		margin-left: var(--okc-pt-ml-md); /* md:ml-4 */
	}
}

@media (min-width: 1024px) {
	.okc-page-title .okc-page-title__title {
		font-size: var(--okc-pt-fs-lg);   /* lg:text-9xl */
	}
}

/* main.css: @media (max-width:768px){ h1 { font-size:3rem !important } }
   Last in source order at equal specificity (0,2,0), which reproduces the
   !important win over sm:text-7xl and over md:text-8xl at exactly 768px,
   without needing !important of our own. */
@media (max-width: 768px) {
	.okc-page-title--clamp .okc-page-title__title {
		font-size: var(--okc-pt-fs-clamp);
	}
}