/*
Theme Name: OKCID Child
Description: Child theme for the OKC Innovation District website.
Author: Koch Comm
Template: hello-elementor
Version: 1.0.0
Text Domain: okcid-child
*/

:root {
	--okcid-content-max: 1300px;
	--okcid-page-gutter: 30px;
	--okcid-section-space: 80px;
	--okcid-ribbon-cta-section-space: 40px;
	--okcid-section-gap: 45px;
}

/* Improve line wrapping within custom Elementor widgets without affecting UI text. */
.elementor-widget[class*="elementor-widget-okcid-"] p {
	text-wrap: pretty;
}

.elementor-widget[class*="elementor-widget-okcid-"] :where(h1, h2, h3, h4, h5, h6, [class$="__heading"]) {
	text-wrap: balance;
}

.okcid-section {
	width: 100%;
	padding-block: var(--okcid-section-space);
	padding-inline: var(--okcid-page-gutter);
	gap: var(--okcid-section-gap);
}

/* Keep Ribbon CTA sections connected to the content around them. */
.okcid-section.okcid-section--ribbon-cta {
	padding-block: var(--okcid-ribbon-cta-section-space);
}

.elementor-element.okcid-section.e-con-full,
.elementor-element.okcid-section > .e-con-inner {
	gap: var(--okcid-section-gap);
}

/* Add the rotated background graphic behind the top or bottom of a section. */
.okcid-section.bg-graphic-top,
.okcid-section.bg-graphic-bottom {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.okcid-section.bg-graphic-bottom {
	--okcid-section-bg-graphic-size: clamp(780px, 60vw, 1060px);
	--okcid-section-bg-graphic-right: clamp(-500px, -28vw, -300px);
}

.okcid-section.bg-graphic-top::after,
.okcid-section.bg-graphic-bottom::after {
	position: absolute;
	right: var(--okcid-section-bg-graphic-right);
	z-index: -1;
	width: var(--okcid-section-bg-graphic-size);
	pointer-events: none;
	background: url("assets/images/ribbon-pattern.svg") center / contain no-repeat;
	content: "";
	transform: rotate(160deg);
	transform-origin: center;
	aspect-ratio: 1193 / 1064;
}

.okcid-section.bg-graphic-top::after {
	top: -774px;
	right: -892px;
	width: 1318px;
	height: 1319px;
	transform: rotate(93.831deg);
	aspect-ratio: auto;
}

.okcid-section.bg-graphic-bottom::after {
	top: 41%;
}

/* Mask the bottom of a section background without moving its content. */
.okcid-section.bg-cutout-bottom {
	--okcid-section-bg-cutout-height: 185px;
	--okcid-section-bg-cutout-color: var(--neutral-0, var(--e-global-color-4756d5c, #fff));
	position: relative;
	isolation: isolate;
}

.okcid-section.bg-cutout-bottom::before {
	position: absolute;
	inset-inline: 0;
	top: auto;
	bottom: 0;
	z-index: 0;
	height: var(--okcid-section-bg-cutout-height);
	pointer-events: none;
	background: var(--okcid-section-bg-cutout-color);
	content: "";
}

.elementor-element.okcid-section.bg-cutout-bottom.e-con-full > .elementor-element,
.elementor-element.okcid-section.bg-cutout-bottom > .e-con-inner {
	position: relative;
	z-index: 1;
}

/* Add a 380px Elementor tint band behind the top of a section. */
.okcid-section.bg-cutout-top-blue-tint,
.okcid-section.bg-cutout-top-teal-tint,
.okcid-section.bg-cutout-top-amber-tint {
	--okcid-section-bg-cutout-height: 380px;
	position: relative;
	isolation: isolate;
}

/* Extend any top tint through half the section, with a deeper minimum band. */
.okcid-section.bg-cutout-top-tall {
	--okcid-section-bg-cutout-height: max(520px, 50%);
}

.okcid-section.bg-cutout-top-blue-tint {
	--okcid-section-bg-cutout-color: var(--blue-tint, var(--e-global-color-68718c2, #e2f0ff));
}

.okcid-section.bg-cutout-top-teal-tint {
	--okcid-section-bg-cutout-color: var(--teal-tint, var(--e-global-color-7bdc64d, #e0f6f3));
}

.okcid-section.bg-cutout-top-amber-tint {
	--okcid-section-bg-cutout-color: var(--amber-tint, var(--e-global-color-0d7ba48, #fff5e0));
}

.okcid-section.bg-cutout-top-blue-tint::before,
.okcid-section.bg-cutout-top-teal-tint::before,
.okcid-section.bg-cutout-top-amber-tint::before {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 0;
	height: var(--okcid-section-bg-cutout-height);
	pointer-events: none;
	background: var(--okcid-section-bg-cutout-color);
	content: "";
}

.elementor-element.okcid-section.bg-cutout-top-blue-tint.e-con-full > .elementor-element,
.elementor-element.okcid-section.bg-cutout-top-blue-tint > .e-con-inner,
.elementor-element.okcid-section.bg-cutout-top-teal-tint.e-con-full > .elementor-element,
.elementor-element.okcid-section.bg-cutout-top-teal-tint > .e-con-inner,
.elementor-element.okcid-section.bg-cutout-top-amber-tint.e-con-full > .elementor-element,
.elementor-element.okcid-section.bg-cutout-top-amber-tint > .e-con-inner {
	position: relative;
	z-index: 1;
}

.okcid-content {
	--okcid-content-gap: 60px;
	display: flex;
	align-items: center;
	padding-inline: 28px;
}

.elementor-element.okcid-content.e-con-full.e-flex {
	flex-direction: row;
	gap: var(--okcid-content-gap);
}

.elementor-element.okcid-content > .elementor-element.inner-heading,
.elementor-element.okcid-content > .elementor-element.inner-content {
	flex: 1 1 0;
	width: auto;
	max-width: none;
	min-width: 0;
}

.okcid-container {
	width: 100%;
	max-width: var(--okcid-content-max);
	margin-inline: auto;
}

/* Fixed-header anchor target shared by page sections and legacy form links. */
.okcid-anchor-offset,
#contact-form-section,
#donation-form-section,
#sponsorship-form-section {
	scroll-margin-top: 120px;
}

#okcid-form-2 {
	scroll-margin-top: calc(var(--okcid-section-space) + 120px);
}

/* Close the FAQ list with the border configured on its Elementor titles. */
.okcid-faq .e-n-accordion-item:last-child > .e-n-accordion-item-title::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	border-top: inherit;
	pointer-events: none;
}

@media (max-width: 1200px) {
	:root {
		--okcid-page-gutter: 32px;
	}
}

@media (max-width: 1024px) {
	:root {
		--okcid-page-gutter: 24px;
		--okcid-section-space: 64px;
		--okcid-ribbon-cta-section-space: 32px;
	}

	.okcid-content {
		--okcid-content-gap: 40px;
		padding-inline: 0;
	}

	.elementor-element.okcid-content.e-con-full.e-flex {
		flex-direction: column;
	}

	.elementor-element.okcid-content > .elementor-element.inner-heading,
	.elementor-element.okcid-content > .elementor-element.inner-content {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	:root {
		--okcid-section-space: 48px;
		--okcid-ribbon-cta-section-space: 24px;
		--okcid-section-gap: 32px;
	}

	.okcid-section.bg-graphic-top::after,
	.okcid-section.bg-graphic-bottom::after {
		display: none;
	}

	.okcid-anchor-offset,
	#contact-form-section,
	#donation-form-section,
	#sponsorship-form-section {
		scroll-margin-top: 90px;
	}

	#okcid-form-2 {
		scroll-margin-top: calc(var(--okcid-section-space) + 90px);
	}
}

@media (max-width: 480px) {
	:root {
		--okcid-page-gutter: 20px;
	}
}


body {
	--okcid-page-accent: var(--okcid-blue, var(--e-global-color-secondary, #3096ff));
	--okcid-page-accent-tint: var(--blue-tint, var(--e-global-color-68718c2, #e2f0ff));
	--okcid-page-accent-dark: var(--blue-dark, var(--e-global-color-cfb89e5, #0d5be2));
}

/* Native form controls can reset font features inherited from the body. */
body,
button,
input,
optgroup,
select,
textarea {
	font-variant-ligatures: none;
	font-variant-numeric: lining-nums proportional-nums;
	font-feature-settings: "liga" 0, "clig" 0, "lnum" 1, "pnum" 1;
}

body:has(.okcid-page-hero--color-amber) {
	--okcid-page-accent: var(--okcid-amber, var(--e-global-color-accent, #ffb000));
	--okcid-page-accent-tint: var(--amber-tint, var(--e-global-color-0d7ba48, #fff5e0));
	--okcid-page-accent-dark: var(--amber-dark, var(--e-global-color-29fbbbb, #cc8d00));
}

body:has(.okcid-page-hero--color-teal) {
	--okcid-page-accent: var(--okcid-teal, var(--e-global-color-primary, #00b89c));
	--okcid-page-accent-tint: var(--teal-tint, var(--e-global-color-7bdc64d, #e0f6f3));
	--okcid-page-accent-dark: var(--teal-dark, var(--e-global-color-31132d2, #00a188));
}

/* Numbers align vertically. */
.u-tabular-nums {
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
}

/* Shared image-card accents follow the current page hero color. */
.okcid-loop-card:hover,
.okcid-loop-card:focus-visible {
	background-color: var(--okcid-page-accent-tint) !important;
}

.okcid-loop-card:is(:hover, :focus-visible) .okcid-button__link--plain {
	--okcid-button-dark: var(--okcid-page-accent-dark);
}

.okcid-loop-card__meta .elementor-icon-list-icon {
	color: var(--okcid-page-accent) !important;
}

.okcid-loop-card__meta .elementor-icon-list-icon svg path {
	fill: currentColor;
}

/* Elementor Event loop states derive from structured Event metadata. */
.okcid-event-card__media {
	position: relative;
	isolation: isolate;
	height: 250px;
	width: 100%;
	overflow: hidden;
	border-radius: 4px;
	background: var(--okcid-page-accent-tint);
}

.okcid-event-card__media::before {
	position: absolute;
	top: 15%;
	left: 88%;
	z-index: 0;
	width: min(110%, 470px);
	pointer-events: none;
	background: url("assets/images/ribbon-pattern.svg") center / contain no-repeat;
	content: "";
	transform: translate(-50%, -50%) rotate(94deg);
	aspect-ratio: 1193 / 1064;
}

.okcid-event-card:not(:has(.okcid-event-card__media img)):is(:hover, :focus-visible) .okcid-event-card__media {
	background-color: var(--okcid-page-accent);
}

.okcid-event-card__media > .elementor-widget-image {
	position: relative;
	z-index: 1;
	height: 100%;
}

.okcid-event-card__media > .elementor-widget-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.okcid-event-card__media > .elementor-element-f7a4c21,
.okcid-event-card__media > .okcid-event-featured-badge-widget {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	width: auto;
	pointer-events: none;
}

.okcid-event-featured-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 11px 6px 9px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--okcid-page-accent-tint);
	color: var(--okcid-page-accent-dark);
	font-family: var(--e-global-typography-text-font-family, "Raleway"), sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.okcid-event-featured-badge svg {
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
}

.okcid-event-featured-badge--past {
	background: var(--neutral-200, var(--e-global-color-debf080, #ededed));
	color: var(--neutral-900, var(--e-global-color-text, #2d2d2f));
}

.elementor-loop-container .okcid-event--past .okcid-event-card__media img {
	filter: grayscale(1);
}

/* Shared pagination for Elementor Loop Grid feeds. */
.elementor-widget-loop-grid .elementor-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 40px;
	font-family: var(--e-global-typography-77f1c12-font-family, "Raleway"), Arial, sans-serif;
	font-size: var(--e-global-typography-77f1c12-font-size, 16px);
	font-style: var(--e-global-typography-77f1c12-font-style, normal);
	font-weight: var(--e-global-typography-77f1c12-font-weight, 700);
	line-height: var(--e-global-typography-77f1c12-line-height, 1);
}

@media (max-width: 1024px) {
	.okcid-event-card__media {
		height: 230px;
	}

	.elementor-widget-loop-grid .elementor-pagination {
		margin-top: 32px;
	}
}

@media (max-width: 767px) {
	.okcid-event-card__media {
		height: 220px;
	}

	.elementor-widget-loop-grid .elementor-pagination {
		margin-top: 28px;
	}
}

.elementor-widget-loop-grid .elementor-pagination .page-numbers {
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 36px;
	margin: 0 !important;
	padding: 7px 11px;
	border: 1px solid var(--e-global-color-text, #2d2d2f);
	border-radius: 999px;
	background: var(--e-global-color-4756d5c, #fff);
	color: var(--e-global-color-text, #2d2d2f);
	text-decoration: none;
}

.elementor-widget-loop-grid .elementor-pagination :is(.prev, .next) {
	min-width: auto;
	padding-inline: 16px;
}

.elementor-widget-loop-grid .elementor-pagination .current,
.elementor-widget-loop-grid .elementor-pagination a.page-numbers:hover,
.elementor-widget-loop-grid .elementor-pagination a.page-numbers:focus-visible {
	border-color: var(--e-global-color-text, #2d2d2f);
	background: var(--e-global-color-text, #2d2d2f);
	color: var(--e-global-color-4756d5c, #fff);
	text-decoration: none;
}

.elementor-widget-loop-grid .elementor-pagination a.page-numbers:focus-visible {
	outline: 3px solid var(--e-global-color-secondary, #3096ff);
	outline-offset: 3px;
}

.elementor-widget-loop-grid .elementor-pagination span:is(.prev, .next) {
	opacity: 0.45;
}

.elementor-widget-loop-grid .elementor-pagination .dots {
	min-width: auto;
	padding-inline: 4px;
	border-color: transparent;
	background: transparent;
}

/* .btn-primary .elementor-button {
	padding: 18px, 14px, 3px;
	background-color: black;
	color: white;
	border-radius: 999px;
} */