/* OKC — Salt Company CTA
 * ---------------------------------------------------------------------------
 * Every rule below is a literal resolution of the Tailwind v3 utilities used by
 * the legacy markup (okc theme, home_t.php 341-403 / sundays_t.php 159-187 /
 * kids-template.php 144-172). No Tailwind required at runtime.
 *
 * Legacy classes, for reference:
 *   section  py-16 md:py-20 lg:py-24 bg-[#F5E6D3]
 *   inner    container mx-auto px-6
 *   strip    flex flex-col md:flex-row justify-center items-center
 *            gap-4 md:gap-6 lg:gap-8 mb-12 md:mb-16
 *   item     w-full md:w-1/3 max-w-xs
 *   img      w-full h-48 md:h-56 lg:h-64 object-cover shadow-lg
 *   content  max-w-4xl mx-auto text-center
 *   h2       text-5xl md:text-6xl lg:text-9xl font-black text-[#9B2C2C]
 *            mb-8 md:mb-10 uppercase
 *   desc     text-xl lg:text-2xl text-[#0A3B5C] mb-8 md:mb-10 font-bold
 *            mx-auto max-w-4xl text-center text-balance leading-relaxed
 *   a        bg-[#0A3B5C] text-white px-10 py-4 rounded-md inline-block
 *            font-bold text-sm md:text-base hover:bg-[#9B2C2C]
 *            transition-all duration-300 uppercase
 *
 * Selectors are deliberately two classes deep (0,2,0) so they beat the
 * okc-base.css reset (`.okc-w h2`, `.okc-w img`, `.okc-w a` = 0,1,1).
 * NOTE: `{{WRAPPER}} .okc-salt__x` is ALSO (0,2,0), i.e. a tie that widget
 * stylesheets can win on load order, so the Style-tab selectors in the PHP are
 * written as `{{WRAPPER}} .okc-salt .okc-salt__x` (0,3,0) to stay on top.
 * ------------------------------------------------------------------------- */

/* Tailwind's default `font-sans` stack — see the note on .okc-salt__heading. */
.okc-salt {
	--okc-salt-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";
}

/* ---------------------------------------------------------------------------
 * Layout values the Style tab drives.
 *
 * These rules only READ the custom properties; the Elementor controls SET them,
 * with the legacy value as each device's default. The old media queries for
 * these properties are deliberately GONE: a control selector is {{WRAPPER}}
 * .okc-salt (0,4,0) and beats a plain .okc-salt media-query rule (0,2,0) at
 * every width, so leaving them would have made the breakpoints dead code.
 * Fallbacks below are the desktop values, used only if the generated CSS is
 * absent (a static render outside WordPress).
 * ------------------------------------------------------------------------ */

/* ===========================================================================
   SECTION — py-16 md:py-20 lg:py-24 bg-[#F5E6D3]
   (4rem mobile / 5rem tablet / 6rem desktop, now editor-controlled)
   ========================================================================= */
.okc-salt {
	padding-top: var(--okc-salt-py, 6rem);
	padding-bottom: var(--okc-salt-py, 6rem);
	background-color: #f5e6d3;
}

/* ===========================================================================
   INNER — container mx-auto px-6
   `container` = width:100% with a max-width step at each Tailwind breakpoint.
   ========================================================================= */
.okc-salt .okc-salt__container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--okc-salt-px, 1.5rem);
	padding-right: var(--okc-salt-px, 1.5rem);
}

@media (min-width: 640px) {
	.okc-salt .okc-salt__container {
		max-width: 640px;
	}
}

@media (min-width: 768px) {
	.okc-salt .okc-salt__container {
		max-width: 768px;
	}
}

@media (min-width: 1024px) {
	.okc-salt .okc-salt__container {
		max-width: 1024px;
	}
}

@media (min-width: 1280px) {
	.okc-salt .okc-salt__container {
		max-width: 1280px;
	}
}

@media (min-width: 1536px) {
	.okc-salt .okc-salt__container {
		max-width: 1536px;
	}
}

/* ===========================================================================
   PHOTO STRIP
   flex flex-col md:flex-row justify-center items-center
   gap-4 md:gap-6 lg:gap-8 mb-12 md:mb-16
   ========================================================================= */
.okc-salt .okc-salt__strip {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	margin-bottom: 3rem;
}

@media (min-width: 768px) {
	.okc-salt .okc-salt__strip {
		flex-direction: row;
		gap: 1.5rem;
		margin-bottom: 4rem;
	}
}

@media (min-width: 1024px) {
	.okc-salt .okc-salt__strip {
		gap: 2rem;
	}
}

/* w-full md:w-1/3 max-w-xs  (flex defaults 0 1 auto are left untouched) */
.okc-salt .okc-salt__item {
	width: 100%;
	max-width: 20rem;
}

@media (min-width: 768px) {
	.okc-salt .okc-salt__item {
		width: 33.333333%;
	}
}

/* w-full h-48 md:h-56 lg:h-64 object-cover shadow-lg
   The height must out-specify okc-base.css `.okc-w img { height: auto }`. */
.okc-salt .okc-salt__img {
	display: block;
	width: 100%;
	height: 12rem;
	max-width: 100%;
	object-fit: cover;
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

@media (min-width: 768px) {
	.okc-salt .okc-salt__img {
		height: 14rem;
	}
}

@media (min-width: 1024px) {
	.okc-salt .okc-salt__img {
		height: 16rem;
	}
}

/* ===========================================================================
   CONTENT — max-w-4xl mx-auto text-center
   ========================================================================= */
.okc-salt .okc-salt__content {
	max-width: var(--okc-salt-content-max, 56rem);
	margin-left: auto;
	margin-right: auto;
	text-align: var(--okc-salt-align, center);
}

/* ===========================================================================
   HEADING — text-5xl md:text-6xl lg:text-9xl font-black text-[#9B2C2C]
             mb-8 md:mb-10 uppercase
   NOTE: the legacy inline style was
       style="font-family: 'Pragmatica',font-wieght:600, PT Sans"
   The stray `:` makes the whole declaration invalid, so the browser dropped it
   and the heading inherited <body class="font-sans">. The stack below is
   therefore the faithful render. Override it from Style > Heading > Typography
   if Pragmatica was the intent.
   ========================================================================= */
.okc-salt .okc-salt__heading {
	display: block;
	font-family: var(--okc-salt-sans);
	font-size: 3rem;
	line-height: 1;
	font-weight: 900;
	color: #9b2c2c;
	margin: 0 0 var(--okc-salt-heading-mb, 2.5rem);
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.okc-salt .okc-salt__heading {
		font-size: 3.75rem;
	}
}

@media (min-width: 1024px) {
	.okc-salt .okc-salt__heading {
		font-size: 8rem;
	}
}

/* main.css line 414-425 (loaded site-wide in the legacy theme):
 *     @media (max-width: 768px) { h2 { font-size: 2rem !important; } }
 * `!important` beat Tailwind's `text-5xl` / `md:text-6xl`, so the legacy
 * heading really rendered at 2rem from 0-768px inclusive (the md: step only
 * took effect from 769px up). Reproduced here — this block is placed last so
 * it wins the 768px overlap exactly as `!important` did.
 * Delete this block if intent-over-fidelity is wanted on mobile. */
@media (max-width: 768px) {
	.okc-salt .okc-salt__heading {
		font-size: 2rem;
	}
}

/* ===========================================================================
   BODY COPY — text-xl lg:text-2xl text-[#0A3B5C] mb-8 md:mb-10 font-bold
               mx-auto max-w-4xl text-center text-balance leading-relaxed
   Inline style: font-family: 'Pragmatica', PT Sans  (valid, so it applied)
   ========================================================================= */
.okc-salt .okc-salt__desc {
	font-family: "Pragmatica", "PT Sans", sans-serif;
	font-size: 1.25rem;
	line-height: 1.625;
	font-weight: 700;
	color: #0a3b5c;
	margin: 0 auto var(--okc-salt-desc-mb, 2.5rem);
	max-width: var(--okc-salt-desc-max, 56rem);
	text-align: var(--okc-salt-align, center);
	text-wrap: balance;
}

/* Tailwind sorts variant utilities AFTER unprefixed ones, so `lg:text-2xl`
 * (font-size 1.5rem + line-height 2rem) re-set the line-height that
 * `leading-relaxed` had established, and won from 1024px up. Reproduced. */
@media (min-width: 1024px) {
	.okc-salt .okc-salt__desc {
		font-size: 1.5rem;
		line-height: 2rem;
	}
}

/* WYSIWYG children inherit; Tailwind Preflight + the theme's `* { margin: 0 }`
   flattened all spacing here, and okc-base.css already reproduces that. */
.okc-salt .okc-salt__desc p,
.okc-salt .okc-salt__desc h1,
.okc-salt .okc-salt__desc h2,
.okc-salt .okc-salt__desc h3,
.okc-salt .okc-salt__desc h4,
.okc-salt .okc-salt__desc h5,
.okc-salt .okc-salt__desc h6 {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	color: inherit;
	margin: 0;
}

/* ===========================================================================
   BUTTON — bg-[#0A3B5C] text-white px-10 py-4 rounded-md inline-block
            font-bold text-sm md:text-base hover:bg-[#9B2C2C]
            transition-all duration-300 uppercase
   No font-family in the legacy markup, so it inherited <body class="font-sans">.
   ========================================================================= */
.okc-salt .okc-salt__cta {
	display: inline-block;
	background-color: #0a3b5c;
	color: #fff;
	padding: 1rem 2.5rem;
	border-radius: 0.375rem;
	font-family: var(--okc-salt-sans);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 300ms;
}

@media (min-width: 768px) {
	.okc-salt .okc-salt__cta {
		font-size: 1rem;
		line-height: 1.5rem;
	}
}

.okc-salt .okc-salt__cta:hover,
.okc-salt .okc-salt__cta:focus {
	background-color: #9b2c2c;
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.okc-salt .okc-salt__cta {
		transition-duration: 0.01ms;
	}
}