/**
 * OKC — Location Card
 *
 * Every rule here is a hand-resolved Tailwind v3 default, taken from the legacy
 * markup in themes/okc/page-templates/home_t.php (163-255), sundays_t.php
 * (87-136) and kids-template.php (72-121). Nothing depends on Tailwind.
 *
 * Breakpoints: md = 768px, lg = 1024px, xl = 1280px (min-width, mobile first).
 *
 * The legacy theme set `body { font-family:"Poppins", sans-serif }` and loaded
 * Poppins from Google Fonts. Two elements in this section (the heading and the
 * address) carry an INVALID inline font-family — `'Pragmatica',font-wieght:normal`
 * — which browsers discard, so they actually rendered in Poppins. okc-base.css
 * names Poppins in the .okc-w stack but does not ship it, so it is pulled in
 * here to keep the legacy rendering intact off the old theme.
 */
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,700&display=swap");

/* The corner art is deliberately hung outside the band (negative margins), so
   the Elementor wrapper must not clip it. */
.elementor-widget-okc-location-card,
.elementor-widget-okc-location-card .elementor-widget-container {
	overflow: visible;
}

/* ==========================================================================
   BAND  —  <section>
   home:   relative py-16 md:py-24 bg-gradient-to-b from-[#B8D4E8] to-white
   simple: py-12 md:py-16 bg-[#B8D4E8]
   ========================================================================== */
.okc-location-card {
	position: relative;
}

.okc-location-card--home {
	padding-top: 4rem;    /* py-16 */
	padding-bottom: 4rem;
	background-image: linear-gradient(
		to bottom,
		var(--okc-lc-band-from, #b8d4e8),
		var(--okc-lc-band-to, #ffffff)
	);
}

.okc-location-card--simple {
	padding-top: 3rem;    /* py-12 */
	padding-bottom: 3rem;
	background-color: var(--okc-lc-band-from, #b8d4e8);
}

@media (min-width: 768px) {
	.okc-location-card--home {
		padding-top: 6rem;    /* md:py-24 */
		padding-bottom: 6rem;
	}

	.okc-location-card--simple {
		padding-top: 4rem;    /* md:py-16 */
		padding-bottom: 4rem;
	}
}

/* ==========================================================================
   DECOR — 3D pennant, bottom left
   wrapper: absolute bottom-5 lg:bottom-10 left-10 z-10 -mb-12 lg:-mb-24
   img:     w-32 h-auto md:w-48 lg:w-48 xl:w-48 -rotate-45
   ========================================================================== */
/*
 * Position is now editor-controlled per device. The legacy set `bottom` and a
 * negative `margin-bottom` separately; for an absolutely positioned element
 * those simply add, so they are collapsed into one net offset:
 *   mobile / tablet   bottom-5  + -mb-12  =  1.25rem - 3rem = -1.75rem
 *   desktop (lg)      bottom-10 + -mb-24  =  2.5rem  - 6rem = -3.5rem
 *
 * These declarations only READ the custom properties. The Style controls SET
 * them, so there is no specificity tie with this file and no need to deepen
 * either selector. Fallbacks are the desktop values, used only when Elementor's
 * generated CSS is absent (e.g. a static render outside WordPress).
 */
.okc-location-card .okc-location-card__pennant {
	position: absolute;
	left: var(--okc-lc-pennant-x, 2.5rem);
	bottom: var(--okc-lc-pennant-y, -3.5rem);
	z-index: 10;
}

.okc-location-card .okc-location-card__pennant img {
	width: var(--okc-lc-pennant-size, 12rem);
	height: auto;
	transform: rotate(var(--okc-lc-pennant-rotate, -45deg));
}

/* Legacy quirk, reproduced: main.css shipped a global `img:hover{transform:
   scale(1.02)}` whose specificity (0,1,1) beat Tailwind's `.-rotate-45`
   (0,1,0), so hovering the pennant dropped its rotation. */
.okc-location-card .okc-location-card__pennant img:hover {
	transform: scale(1.02);
}

/* ==========================================================================
   DECOR — OKC label, bottom right
   wrapper: absolute bottom-24 right-12 md:bottom-16 md:right-12
            lg:bottom-16 lg:right-16 z-10 -mb-32 -mr-10 lg:-mr-20
   img:     w-20 h-20 md:w-32 md:h-32 lg:w-40 lg:h-40 xl:w-48 xl:h-48
   ========================================================================== */
/*
 * Same collapse as the pennant:
 *   mobile   bottom-24 + -mb-32 = 6rem - 8rem = -2rem   right-12 + -mr-10 = 0.5rem
 *   tablet   bottom-16 + -mb-32 = 4rem - 8rem = -4rem   right-12 + -mr-10 = 0.5rem
 *   desktop  bottom-16 + -mb-32 = -4rem                 right-16 + -mr-20 = -1rem
 */
.okc-location-card .okc-location-card__label {
	position: absolute;
	right: var(--okc-lc-label-x, -1rem);
	bottom: var(--okc-lc-label-y, -4rem);
	z-index: 10;
}

.okc-location-card .okc-location-card__label img {
	width: var(--okc-lc-label-size, 10rem);
	height: var(--okc-lc-label-size, 10rem);
}

/*
 * The legacy had a fourth step at xl (w-48/h-48) that Elementor's three default
 * devices cannot express. It is kept as its own control so the 1280px+ size is
 * still reachable; it falls back to the responsive size when unset.
 */
@media (min-width: 1280px) {
	.okc-location-card .okc-location-card__label img {
		width: var(--okc-lc-label-size-xl, var(--okc-lc-label-size, 12rem));
		height: var(--okc-lc-label-size-xl, var(--okc-lc-label-size, 12rem));
	}
}

/* ==========================================================================
   CONTAINER  —  container mx-auto px-6 relative z-20
   ========================================================================== */
.okc-location-card .okc-location-card__container {
	position: relative;
	z-index: 20;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;   /* px-6 */
	padding-right: 1.5rem;
}

@media (min-width: 640px) {
	.okc-location-card .okc-location-card__container { max-width: 640px; }
}

@media (min-width: 768px) {
	.okc-location-card .okc-location-card__container { max-width: 768px; }
}

@media (min-width: 1024px) {
	.okc-location-card .okc-location-card__container { max-width: 1024px; }
}

@media (min-width: 1280px) {
	.okc-location-card .okc-location-card__container { max-width: 1280px; }
}

@media (min-width: 1536px) {
	.okc-location-card .okc-location-card__container { max-width: 1536px; }
}

/* ==========================================================================
   CARD  —  max-w-6xl mx-auto bg-[#F5E6D3] rounded-3xl shadow-2xl
            overflow-hidden border-4 border-[#0A3B5C] relative z-20
   ========================================================================== */
.okc-location-card .okc-location-card__card {
	position: relative;
	z-index: 20;
	max-width: 72rem;           /* max-w-6xl */
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	border-radius: 1.5rem;      /* rounded-3xl */
	border: 4px solid var(--okc-lc-card-border, #0a3b5c);
	background-color: var(--okc-lc-card-bg, #f5e6d3);
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);   /* shadow-2xl */
}

/* flex flex-col md:flex-row */
.okc-location-card .okc-location-card__row {
	display: flex;
	flex-direction: column;
}

/* ==========================================================================
   MAP COLUMN
   col:   md:w-2/5 p-0
   frame: h-64 md:h-full overflow-hidden
   img:   w-full h-full object-cover
   ========================================================================== */
.okc-location-card .okc-location-card__mapcol {
	padding: 0;
}

.okc-location-card .okc-location-card__mapframe {
	height: 16rem;          /* h-64 */
	overflow: hidden;
}

.okc-location-card .okc-location-card__map {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   TEXT PANEL
   md:w-3/5 p-8 md:p-10 lg:p-12 flex flex-col justify-center
   md:border-4 md:border-l-[#0B3B5D]
   ========================================================================== */
.okc-location-card .okc-location-card__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2rem;          /* p-8 */
}

@media (min-width: 768px) {
	.okc-location-card .okc-location-card__row {
		flex-direction: row;
	}

	.okc-location-card .okc-location-card__mapcol {
		width: 40%;         /* md:w-2/5 */
	}

	.okc-location-card .okc-location-card__mapframe {
		height: 100%;       /* md:h-full */
	}

	.okc-location-card .okc-location-card__body {
		width: 60%;         /* md:w-3/5 */
		padding: 2.5rem;    /* md:p-10 */
		/* `md:border-4` set all four widths but only the LEFT colour was given,
		   so the other three kept Tailwind's preflight default #e5e7eb. */
		border-width: 4px;
		border-style: solid;
		border-color: var(--okc-lc-panel-border, #e5e7eb);
		border-left-color: var(--okc-lc-panel-border-left, #0b3b5d);
	}
}

@media (min-width: 1024px) {
	/* lg:p-12 existed only on the Home version of the panel. */
	.okc-location-card--home .okc-location-card__body {
		padding: 3rem;
	}
}

/* ==========================================================================
   EYEBROW
   text-xs md:text-sm font-bold text-[#0A3B5C] mb-3 tracking-wider uppercase
   inline style: font-family:'Pragmatica', PT Sans  (valid, so it applies)
   ========================================================================== */
.okc-location-card .okc-location-card__eyebrow {
	font-family: "Pragmatica", "PT Sans", sans-serif;
	font-size: 0.75rem;         /* text-xs */
	line-height: 1rem;
	font-weight: 700;           /* font-bold */
	letter-spacing: 0.05em;     /* tracking-wider */
	text-transform: uppercase;
	margin-bottom: 0.75rem;     /* mb-3 */
	color: var(--okc-lc-eyebrow, #0a3b5c);
}

@media (min-width: 768px) {
	.okc-location-card .okc-location-card__eyebrow {
		font-size: 0.875rem;    /* md:text-sm */
		line-height: 1.25rem;
	}
}

/* ==========================================================================
   HEADING  (legacy <h3>)
   text-2xl md:text-3xl lg:text-4xl font-black text-[#003049] mb-2 uppercase
   Its inline font-family was malformed and therefore ignored — it inherited
   the body font. --okc-lc-headline-font reproduces that; the "fix legacy font
   typo" switch swaps it for Pragmatica.
   ========================================================================== */
.okc-location-card .okc-location-card__heading,
.okc-location-card .okc-location-card__address {
	font-family: var(--okc-lc-headline-font, "Poppins", ui-sans-serif, system-ui, sans-serif);
}

.okc-location-card.okc-location-card--pragmatica {
	--okc-lc-headline-font: "Pragmatica", "PT Sans", sans-serif;
}

.okc-location-card .okc-location-card__heading {
	font-size: 1.5rem;          /* text-2xl */
	line-height: 2rem;
	font-weight: 900;           /* font-black */
	text-transform: uppercase;
	margin-bottom: 0.5rem;      /* mb-2 */
	color: var(--okc-lc-heading, #003049);
}

/* ==========================================================================
   CHURCH NAME
   text-2xl md:text-3xl lg:text-4xl font-black text-[#003049] mb-2 uppercase
   inline style: font-family:'Pragmatica', PT Sans  (valid)
   ========================================================================== */
.okc-location-card .okc-location-card__name {
	font-family: "Pragmatica", "PT Sans", sans-serif;
	font-size: 1.5rem;          /* text-2xl */
	line-height: 2rem;
	font-weight: 900;           /* font-black */
	text-transform: uppercase;
	margin-bottom: 0.5rem;      /* mb-2 */
	color: var(--okc-lc-name, #003049);
}

@media (min-width: 768px) {
	.okc-location-card .okc-location-card__heading,
	.okc-location-card .okc-location-card__name {
		font-size: 1.875rem;    /* md:text-3xl */
		line-height: 2.25rem;
	}
}

@media (min-width: 1024px) {
	.okc-location-card .okc-location-card__heading,
	.okc-location-card .okc-location-card__name {
		font-size: 2.25rem;     /* lg:text-4xl */
		line-height: 2.5rem;
	}
}

/* ==========================================================================
   HAIRLINES
   upper: w-full h-px bg-[#003049] my-4
   lower: w-full h-px bg-[#0A3B5C] mb-6
   ========================================================================== */
.okc-location-card .okc-location-card__rule {
	width: 100%;
	height: 1px;
}

.okc-location-card .okc-location-card__rule--top {
	margin-top: 1rem;       /* my-4 */
	margin-bottom: 1rem;
	background-color: var(--okc-lc-rule-top, #003049);
}

.okc-location-card .okc-location-card__rule--bottom {
	margin-bottom: 1.5rem;  /* mb-6 */
	background-color: var(--okc-lc-rule-bottom, #0a3b5c);
}

/* ==========================================================================
   ADDRESS
   home:   text-xl text-[#0A3B5C] mb-6 italic
   simple: text-2xl text-[#0A3B5C] italic   (no bottom margin)
   ========================================================================== */
.okc-location-card .okc-location-card__address {
	font-style: italic;
	color: var(--okc-lc-address, #0a3b5c);
}

.okc-location-card--home .okc-location-card__address {
	font-size: 1.25rem;     /* text-xl */
	line-height: 1.75rem;
	margin-bottom: 1.5rem;  /* mb-6 */
}

.okc-location-card--simple .okc-location-card__address {
	font-size: 1.5rem;      /* text-2xl */
	line-height: 2rem;
	margin-bottom: 0;
}

/* ==========================================================================
   BUTTON
   bg-[#0A3B5C] text-white px-8 py-3 rounded-md inline-block font-bold
   text-sm md:text-base hover:bg-[#C41E3A] transition-all duration-300
   uppercase mt-6 w-fit
   inline style: font-family:'Pragmatica', PT Sans  (valid)
   The `a.` in the selector is deliberate: it has to outrank okc-base.css's
   `.okc-w a { transition: all .3s ease }` the way the utility class did.
   ========================================================================== */
.okc-location-card a.okc-location-card__btn {
	font-family: "Pragmatica", "PT Sans", sans-serif;
	display: inline-block;
	width: -moz-fit-content;
	width: fit-content;         /* w-fit */
	margin-top: 1.5rem;         /* mt-6 */
	padding: 0.75rem 2rem;      /* py-3 px-8 */
	border-radius: 0.375rem;    /* rounded-md */
	font-size: 0.875rem;        /* text-sm */
	line-height: 1.25rem;
	font-weight: 700;           /* font-bold */
	text-transform: uppercase;
	background-color: var(--okc-lc-btn-bg, #0a3b5c);
	color: var(--okc-lc-btn-color, #ffffff);
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 300ms;
}

.okc-location-card a.okc-location-card__btn:hover,
.okc-location-card a.okc-location-card__btn:focus {
	background-color: var(--okc-lc-btn-bg-hover, #c41e3a);
	color: var(--okc-lc-btn-color, #ffffff);
}

@media (min-width: 768px) {
	.okc-location-card a.okc-location-card__btn {
		font-size: 1rem;        /* md:text-base */
		line-height: 1.5rem;
	}
}