/* OKC Tri-Link Bar
 * ---------------------------------------------------------------------------
 * Faithful reproduction of wp-content/themes/okc/page-templates/home_t.php
 * lines 299-339, which rendered under the Tailwind Play CDN (v3 defaults +
 * Preflight) plus themes/okc/assets/css/main.css.
 *
 * Legacy markup / utilities resolved here:
 *   section  .bg-[#0A3B5C] .border-t-4 .border-[#ffffff]
 *   div      .container .mx-auto
 *   div      .grid .grid-cols-1 .md:grid-cols-3
 *            .divide-y .md:divide-y-0 .md:divide-x .divide-white/20
 *   div      .text-center .py-8 .md:py-10 .lg:py-12 .px-4
 *   a        .text-xl .md:text-2xl .lg:text-4xl .text-white .uppercase
 *            .tracking-wide .font-bold
 *            + inline style="font-family: 'Pragmatica', PT Sans"
 *
 * Breakpoints are Tailwind v3 defaults: md = 768px, lg = 1024px.
 * Everything is scoped under .okc-trilink; okc-base.css supplies the
 * Preflight-equivalent reset under .okc-w.
 *
 * SPECIFICITY CONTRACT — do not raise these selectors.
 * This file is enqueued through get_style_depends(), which Elementor runs at
 * element render time, i.e. AFTER wp_head; WordPress prints it as a late style
 * in the footer, so it lands after elementor-post-{id}.css. Ties therefore go
 * to this file, not to the Style tab. Every selector here is kept at (0,2,0)
 * and class-okc-trilink.php pairs each control with a (0,3,0) selector
 * (`{{WRAPPER}} .okc-w.okc-trilink`, `{{WRAPPER}} .okc-trilink .okc-...`) so
 * the Style tab still wins. Deepen one here and you break its counterpart.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * Band — bg-[#0A3B5C] border-t-4 border-[#ffffff]
 * Preflight gives every element `border: 0 solid currentColor`, so border-t-4
 * only paints the top edge.
 * ------------------------------------------------------------------------- */
.okc-w.okc-trilink {
	background-color: #0a3b5c;
	border-top-width: 4px;
	border-top-style: solid;
	border-top-color: #ffffff;
}

/* ---------------------------------------------------------------------------
 * container mx-auto
 * Tailwind's `container` is width:100% with a hard max-width at each
 * breakpoint (no padding, no centering of its own — `mx-auto` does that).
 * ------------------------------------------------------------------------- */
.okc-trilink .okc-trilink__container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 640px) {
	.okc-trilink .okc-trilink__container--fixed {
		max-width: 640px;
	}
}

@media (min-width: 768px) {
	.okc-trilink .okc-trilink__container--fixed {
		max-width: 768px;
	}
}

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

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

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

/* ---------------------------------------------------------------------------
 * grid grid-cols-1 md:grid-cols-3
 * ------------------------------------------------------------------------- */
.okc-trilink .okc-trilink__grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* ---------------------------------------------------------------------------
 * divide-y divide-white/20
 * Tailwind targets `> :not([hidden]) ~ :not([hidden])` — i.e. every child
 * except the first. `> * + *` is the equivalent here.
 * ------------------------------------------------------------------------- */
.okc-trilink .okc-trilink__grid > * + * {
	border-style: solid;
	border-color: rgba(255, 255, 255, 0.2);
	border-top-width: 1px;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
}

@media (min-width: 768px) {
	.okc-trilink .okc-trilink__grid--cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.okc-trilink .okc-trilink__grid--cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.okc-trilink .okc-trilink__grid--cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* md:divide-y-0 md:divide-x */
	.okc-trilink .okc-trilink__grid > * + * {
		border-top-width: 0;
		border-right-width: 0;
		border-bottom-width: 0;
		border-left-width: 1px;
	}
}

/* ---------------------------------------------------------------------------
 * Cell — text-center py-8 md:py-10 lg:py-12 px-4
 * ------------------------------------------------------------------------- */
.okc-trilink .okc-trilink__cell {
	text-align: center;
	/* The cell holds a single INLINE anchor, so its own strut still takes part
	 * in the line box. In the legacy environment that strut was Preflight's
	 * `html { line-height: 1.5 }` over main.css `body { font-size: 15px }`
	 * = 22.5px. Astra's larger body font-size/line-height would otherwise make
	 * the strut's descent overhang the anchor's and grow the band by ~1px at
	 * the mobile size. Restating the legacy values pins the line box. */
	font-size: 15px;
	line-height: 1.5;
	padding-top: 2rem;
	padding-right: 1rem;
	padding-bottom: 2rem;
	padding-left: 1rem;
}

@media (min-width: 768px) {
	.okc-trilink .okc-trilink__cell {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}
}

@media (min-width: 1024px) {
	.okc-trilink .okc-trilink__cell {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
}

/* ---------------------------------------------------------------------------
 * Link — text-xl md:text-2xl lg:text-4xl text-white uppercase tracking-wide
 *        font-bold + font-family: 'Pragmatica', PT Sans
 * The anchor stays inline (browser default under Preflight); the parent cell's
 * text-align:center is what centres it.
 * `a { transition: all .3s ease }` and `text-decoration:none` came from
 * main.css — the transition lives in okc-base.css, the decoration is restated
 * here because Astra may underline in-content links.
 * ------------------------------------------------------------------------- */
.okc-trilink .okc-trilink__link {
	display: inline;
	font-family: "Pragmatica", "PT Sans", sans-serif;
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	text-decoration: none;
	color: #ffffff;
}

@media (min-width: 768px) {
	.okc-trilink .okc-trilink__link {
		font-size: 1.5rem;
		line-height: 2rem;
	}
}

@media (min-width: 1024px) {
	.okc-trilink .okc-trilink__link {
		font-size: 2.25rem;
		line-height: 2.5rem;
	}
}

/* Legacy had no hover treatment beyond the inherited 0.3s transition; the
 * hover colour is opt-in from the Elementor control, which writes its own
 * rule at {{WRAPPER}} specificity. Nothing to declare here. */