@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,700");

/* ==========================================================================
   OKC Hero Section
   --------------------------------------------------------------------------
   Source of truth: wp-content/themes/okc/page-templates/home_t.php lines 9-97,
   rendered with the Tailwind Play CDN (v3 defaults + Preflight),
   assets/css/main.css and style.css.

   Every Tailwind utility below is resolved to its literal v3 default value so
   this section no longer needs Tailwind. Everything is scoped under .okc-hero.

   Legacy classes on the markup, for reference:
     section  .relative .min-h-screen .flex .flex-col
     div      .w-full .flex-1 .md:flex .items-center .justify-center
              .pt-[110px] .pb-24 .md:pt-32 .md:pb-40 .px-4 .md:px-6
              .hero-bg-container
     div      .absolute .inset-0 .hero-bg
     div      .absolute .inset-0 .bg-gradient-to-b
              .from-white/40 .via-white/50 .to-white/70
     div      .container .mx-auto .text-center .relative .z-10 .max-w-6xl
     div      .flex .flex-col .items-center .justify-center .hr-svg
     div      .flex .items-center .justify-center .md:mb-6
     h1       .text-6xl .sm:text-7xl .md:text-8xl .lg:text-9xl .font-black
              .text-[#0A3B5C] .leading-none .tracking-tighter .uppercase
              (.-ml-2 on line 1, .mb-4 .md:mb-6 on line 2)

   Font note: the three h1s carried inline styles of the form
     style="font-family: 'Pragmatica Book',font-weight:500, PT Sans"
   which is invalid CSS (a colon inside a font-family value), so the browser
   dropped the whole declaration and the headings actually inherited
   `body { font-family: "Poppins", sans-serif }` from main.css. Poppins is
   @import-ed above at exactly the weights the theme loaded (300/400/500/700),
   so `font-weight: 900` resolves to the 700 face — same as the legacy render.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Root  —  .relative .min-h-screen .flex .flex-col
   -------------------------------------------------------------------------- */
.okc-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* --------------------------------------------------------------------------
   Content container
   .w-full .flex-1 .items-center .justify-center .pt-[110px] .pb-24 .px-4
   + main.css .hero-bg-container { position: relative; overflow: hidden }
   -------------------------------------------------------------------------- */
.okc-hero .okc-hero-container {
	position: relative;
	overflow: hidden;
	width: 100%;
	flex: 1 1 0%;
	align-items: center;
	justify-content: center;
	padding-top: 110px;
	padding-right: 1rem;
	padding-bottom: 6rem;
	padding-left: 1rem;
}

/* md:flex  md:pt-32  md:pb-40  md:px-6 */
@media (min-width: 768px) {
	.okc-hero .okc-hero-container {
		display: flex;
		padding-top: 8rem;
		padding-right: 1.5rem;
		padding-bottom: 10rem;
		padding-left: 1.5rem;
	}
}

/* --------------------------------------------------------------------------
   Background layer  —  .absolute .inset-0 + main.css .hero-bg
   -------------------------------------------------------------------------- */
.okc-hero .okc-hero-bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* main.css: animation: kenburns 20s ease-in-out infinite alternate;
   (okc-base.css owns the @keyframes okc-kenburns) */
.okc-hero .okc-hero-bg--kenburns {
	animation: okc-kenburns 20s ease-in-out infinite alternate;
}

/* --------------------------------------------------------------------------
   Gradient overlay
   .bg-gradient-to-b .from-white/40 .via-white/50 .to-white/70
   -------------------------------------------------------------------------- */
.okc-hero .okc-hero-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(
		to bottom,
		var(--okc-hero-overlay-from, rgba(255, 255, 255, 0.4)) 0%,
		var(--okc-hero-overlay-via, rgba(255, 255, 255, 0.5)) 50%,
		var(--okc-hero-overlay-to, rgba(255, 255, 255, 0.7)) 100%
	);
}

/* --------------------------------------------------------------------------
   Inner wrapper  —  .container .mx-auto .text-center .relative .z-10 .max-w-6xl
   `max-w-6xl` sits in Tailwind's utilities layer, which is emitted after the
   components layer that holds `.container`, so 72rem wins at every breakpoint
   and the container's own 640/768/1024/1280/1536px steps never apply.
   -------------------------------------------------------------------------- */
.okc-hero .okc-hero-inner {
	position: relative;
	z-index: 10;
	width: 100%;
	max-width: 72rem;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Heading stack  —  .flex .flex-col .items-center .justify-center .hr-svg
   -------------------------------------------------------------------------- */
.okc-hero .okc-hero-lines {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Crown row  —  .flex .items-center .justify-center .md:mb-6 */
.okc-hero .okc-hero-icon-row {
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (min-width: 768px) {
	.okc-hero .okc-hero-icon-row {
		margin-bottom: 1.5rem;
	}
}

/* --------------------------------------------------------------------------
   Crown
   The SVG carried width="115" height="115" presentation attributes. Repeated
   here as real CSS so okc-base.css's `.okc-w svg { height: auto }` cannot
   change the box (specificity 0,2,0 beats 0,1,1).
   -------------------------------------------------------------------------- */
.okc-hero .okc-hero-crown {
	display: block;
	width: 115px;
	height: 115px;
}

.okc-hero .okc-hero-crown-img {
	display: block;
	width: 115px;
	height: auto;
}

/* --------------------------------------------------------------------------
   Headings
   .text-6xl .font-black .text-[#0A3B5C] .leading-none .tracking-tighter
   .uppercase
   -------------------------------------------------------------------------- */
.okc-hero .okc-hero-heading {
	font-family: "Poppins", sans-serif;
	font-size: 3.75rem;
	line-height: 1;
	font-weight: 900;
	letter-spacing: -0.05em;
	text-transform: uppercase;
	color: #0a3b5c;
	margin: 0;
}

/* sm:text-7xl */
@media (min-width: 640px) {
	.okc-hero .okc-hero-heading {
		font-size: 4.5rem;
	}
}

/* md:text-8xl */
@media (min-width: 768px) {
	.okc-hero .okc-hero-heading {
		font-size: 6rem;
	}
}

/* lg:text-9xl */
@media (min-width: 1024px) {
	.okc-hero .okc-hero-heading {
		font-size: 8rem;
	}
}

/* -ml-2 on line 1 */
.okc-hero .okc-hero-heading--one {
	margin-left: -0.5rem;
}

/* mb-4 on line 2 */
.okc-hero .okc-hero-heading--two {
	margin-bottom: 1rem;
}

@media (min-width: 768px) {
	/* md:mb-6 */
	.okc-hero .okc-hero-heading--two {
		margin-bottom: 1.5rem;
	}
}

/* The free-text variant was the only heading whose inline font-family parsed:
   style="font-family: 'Pragmatica', PT Sans". It also carried .mb-4 .md:mb-6. */
.okc-hero .okc-hero-heading--single {
	font-family: "Pragmatica", "PT Sans", sans-serif;
	margin-bottom: 1rem;
}

@media (min-width: 768px) {
	.okc-hero .okc-hero-heading--single {
		margin-bottom: 1.5rem;
	}
}

/* --------------------------------------------------------------------------
   Legacy small-screen overrides. These come last on purpose: in the theme they
   were `!important` (main.css) or simply later in the cascade (style.css), and
   both beat the Tailwind sm:/md:/lg: rules above at <= 768px.
   -------------------------------------------------------------------------- */

/* main.css: @media (max-width: 768px) { h1 { font-size: 3rem !important } } */
@media (max-width: 768px) {
	.okc-hero .okc-hero-heading {
		font-size: 3rem;
	}
}

/* style.css: @media (max-width: 768px) { .hr-svg svg { width: 44px; margin-right: 5px } }
   The height="115" attribute was NOT overridden, so the SVG box stayed
   44 x 115 and the 44 x 44 crown sat centred inside it. Reproduced verbatim;
   use the "Crown Size" control to normalise it. */
@media (max-width: 768px) {
	.okc-hero .okc-hero-crown {
		width: 44px;
		height: 115px;
		margin-right: 5px;
	}

	.okc-hero .okc-hero-crown-img {
		width: 44px;
		height: auto;
		margin-right: 5px;
	}
}

/* --------------------------------------------------------------------------
   Motion preferences (not in the legacy theme — added so the zoom and the
   scroll parallax both stand still for users who ask for reduced motion).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.okc-hero .okc-hero-bg,
	.okc-hero .okc-hero-bg--kenburns {
		animation: none;
		transform: none !important;
	}
}