@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');

/* ============================================================
   PONCA MISSION CONTACT — Frontend Styles
   Class prefix: ponca-mc
   All look-and-feel comes from inline styles set in render.php
   so each attribute stays editable per-instance. This sheet
   handles structural defaults and responsive overrides only.
   ============================================================ */

.ponca-mc {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	background: var(--mc-section-bg, #FFFDF6);
	padding: var(--mc-section-py, 0px) var(--mc-section-px, 160px);
}
.ponca-mc *, .ponca-mc *::before, .ponca-mc *::after { box-sizing: border-box; }

.ponca-mc__container {
	width: 100%;
	max-width: var(--mc-container-max-width, 1600px);
	margin: 0 auto;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--mc-content-stack-gap, 30px);
}

.ponca-mc__columns {
	display: flex;
	flex-direction: var(--mc-columns-direction, row);
	flex-wrap: wrap;
	width: 100%;
	box-sizing: border-box;
	align-items: var(--mc-columns-align-items, center);
	justify-content: var(--mc-columns-justify, space-between);
	gap: var(--mc-columns-gap, 60px);
}

.ponca-mc__left {
	box-sizing: border-box;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: var(--mc-left-flex-grow, 659) 1 var(--mc-col-min-width, 320px);
	min-width: var(--mc-col-min-width, 320px);
	gap: var(--mc-left-gap, 24px);
}

.ponca-mc__right {
	box-sizing: border-box;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	flex: var(--mc-right-flex-grow, 567) 1 var(--mc-col-min-width, 320px);
	min-width: var(--mc-col-min-width, 320px);
}

.ponca-mc__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: var(--mc-header-gap, 14px);
}

.ponca-mc__eyebrow {
	margin: 0;
	width: 100%;
	color: var(--mc-eyebrow-color, #DEB209);
	font-family: var(--mc-eyebrow-font-family, 'DM Sans', sans-serif);
	font-size: var(--mc-eyebrow-font-size, 13px);
	line-height: var(--mc-eyebrow-line-height, 22px);
	font-weight: var(--mc-eyebrow-font-weight, 600);
	font-style: var(--mc-eyebrow-font-style, normal);
	letter-spacing: var(--mc-eyebrow-letter-spacing, 3px);
	text-transform: var(--mc-eyebrow-text-transform, uppercase);
	text-align: var(--mc-eyebrow-text-align, left);
}

.ponca-mc__heading {
	margin: 0;
	width: 100%;
	color: var(--mc-heading-color, #0D0F0E);
	font-family: var(--mc-heading-font-family, 'Cormorant Garamond', serif);
	font-size: var(--mc-heading-font-size, 56px);
	line-height: var(--mc-heading-line-height, 62px);
	font-weight: var(--mc-heading-font-weight, 300);
	letter-spacing: var(--mc-heading-letter-spacing, -0.56px);
	text-align: var(--mc-heading-text-align, left);
}

.ponca-mc__heading-prefix,
.ponca-mc__heading-accent,
.ponca-mc__heading-suffix { display: inline; }

.ponca-mc__heading-prefix {
	color: var(--mc-heading-prefix-color, #0D0F0E);
	font-style: var(--mc-heading-prefix-font-style, normal);
}
.ponca-mc__heading-accent {
	color: var(--mc-heading-accent-color, #B28E07);
	font-style: var(--mc-heading-accent-font-style, italic);
}
.ponca-mc__heading-suffix {
	color: var(--mc-heading-suffix-color, #0D0F0E);
	font-style: var(--mc-heading-suffix-font-style, normal);
}

.ponca-mc__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: var(--mc-body-gap, 24px);
}

.ponca-mc__paragraph {
	margin: 0;
	width: 100%;
	color: var(--mc-body-color, #474747);
	font-family: var(--mc-body-font-family, 'DM Sans', sans-serif);
	font-size: var(--mc-body-font-size, 18px);
	line-height: var(--mc-body-line-height, 30px);
	font-weight: var(--mc-body-font-weight, 400);
	font-style: var(--mc-body-font-style, normal);
	text-align: var(--mc-body-text-align, left);
}

.ponca-mc__card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	background: var(--mc-card-bg, #0D0F0E);
	border: var(--mc-card-border-width, 1px) var(--mc-card-border-style, solid) var(--mc-card-border-color, rgba(13, 15, 14, 0.75));
	border-radius: var(--mc-card-border-radius, 0px);
	padding: var(--mc-card-py, 40px) var(--mc-card-px, 40px);
	gap: var(--mc-card-gap, 40px);
}

.ponca-mc__card-main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: var(--mc-card-main-gap, 20px);
}

.ponca-mc__card-headline {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

.ponca-mc__card-eyebrow {
	margin: 0;
	width: 100%;
	color: var(--mc-card-eyebrow-color, #A78607);
	font-family: var(--mc-card-eyebrow-font-family, 'DM Sans', sans-serif);
	font-size: var(--mc-card-eyebrow-font-size, 10px);
	line-height: var(--mc-card-eyebrow-line-height, 22px);
	font-weight: var(--mc-card-eyebrow-font-weight, 600);
	font-style: var(--mc-card-eyebrow-font-style, normal);
	letter-spacing: var(--mc-card-eyebrow-letter-spacing, 3px);
	text-transform: var(--mc-card-eyebrow-text-transform, uppercase);
}

.ponca-mc__card-name {
	margin: 0;
	width: 100%;
	color: var(--mc-card-name-color, #E2D7CA);
	font-family: var(--mc-card-name-font-family, 'Cormorant Garamond', serif);
	font-size: var(--mc-card-name-font-size, 30px);
	line-height: var(--mc-card-name-line-height, 130%);
	font-weight: var(--mc-card-name-font-weight, 400);
	font-style: var(--mc-card-name-font-style, normal);
	letter-spacing: var(--mc-card-name-letter-spacing, 0px);
}

.ponca-mc__card-subtitle {
	margin: 0;
	width: 100%;
	color: var(--mc-card-subtitle-color, #A7A7A7);
	font-family: var(--mc-card-subtitle-font-family, 'DM Sans', sans-serif);
	font-size: var(--mc-card-subtitle-font-size, 16px);
	line-height: var(--mc-card-subtitle-line-height, 25px);
	font-weight: var(--mc-card-subtitle-font-weight, 400);
	font-style: var(--mc-card-subtitle-font-style, normal);
}

.ponca-mc__divider {
	border: 0;
	margin: 0;
	flex: none;
	height: var(--mc-divider-thickness, 1px);
	width: var(--mc-divider-width, 435px);
	max-width: 100%;
	background: var(--mc-divider-bg, rgba(240, 235, 228, 0.25));
}

.ponca-mc__contact-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	text-decoration: none;
	gap: var(--mc-contact-row-gap, 10px);
}
.ponca-mc__contact-text-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	gap: var(--mc-contact-text-col-gap, 4px);
}

.ponca-mc__contact-label {
	margin: 0;
	color: var(--mc-contact-label-color, #A78607);
	font-family: var(--mc-contact-label-font-family, 'DM Sans', sans-serif);
	font-size: var(--mc-contact-label-font-size, 14px);
	line-height: var(--mc-contact-label-line-height, 22px);
	font-weight: var(--mc-contact-label-font-weight, 600);
	font-style: var(--mc-contact-label-font-style, normal);
	text-transform: var(--mc-contact-label-text-transform, none);
}

.ponca-mc__contact-text {
	margin: 0;
	color: var(--mc-contact-text-color, #A7A7A7);
	font-family: var(--mc-contact-text-font-family, 'DM Sans', sans-serif);
	font-size: var(--mc-contact-text-font-size, 16px);
	line-height: var(--mc-contact-text-line-height, 25px);
	font-weight: var(--mc-contact-text-font-weight, 400);
	font-style: var(--mc-contact-text-font-style, normal);
}

.ponca-mc__card-description {
	margin: 0;
	width: 100%;
	color: var(--mc-card-desc-color, #A7A7A7);
	font-family: var(--mc-card-desc-font-family, 'DM Sans', sans-serif);
	font-size: var(--mc-card-desc-font-size, 16px);
	line-height: var(--mc-card-desc-line-height, 25px);
	font-weight: var(--mc-card-desc-font-weight, 400);
	font-style: var(--mc-card-desc-font-style, normal);
}

.ponca-mc__icon-svg { display: block; }

/* Contact rows: linked rows feel clickable. */
a.ponca-mc__contact-row {
	transition: opacity 240ms ease;
}
a.ponca-mc__contact-row:hover,
a.ponca-mc__contact-row:focus-visible {
	opacity: 0.78;
}

/* CTA button */
.ponca-mc__cta {
	box-sizing: border-box;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
	background: var(--mc-cta-bg, #DEB209);
	color: var(--mc-cta-color, #0D0F0E);
	border: var(--mc-cta-border-width, 0px) var(--mc-cta-border-style, solid) var(--mc-cta-border-color, transparent);
	border-radius: var(--mc-cta-border-radius, 4px);
	padding: var(--mc-cta-pad-top, 16px) var(--mc-cta-pad-right, 32px) var(--mc-cta-pad-bottom, 16px) var(--mc-cta-pad-left, 24px);
	gap: var(--mc-cta-gap, 14px);
	font-family: var(--mc-cta-font-family, 'DM Sans', sans-serif);
	font-size: var(--mc-cta-font-size, 16px);
	line-height: var(--mc-cta-line-height, 25px);
	font-weight: var(--mc-cta-font-weight, 400);
	font-style: var(--mc-cta-font-style, normal);
	letter-spacing: var(--mc-cta-letter-spacing, 0px);
	text-transform: var(--mc-cta-text-transform, uppercase);
	width: var(--mc-cta-width, auto);
	transition: background-color 240ms ease, transform 240ms cubic-bezier(.22,.61,.36,1), box-shadow 240ms ease;
}
.ponca-mc__cta:hover,
.ponca-mc__cta:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
.ponca-mc__cta:focus-visible {
	outline: 2px solid #B28E07;
	outline-offset: 2px;
}

/* Ornament */
.ponca-mc__ornament {
	width: 100%;
	pointer-events: none;
	height: var(--mc-ornament-height, 82px);
	margin-top: var(--mc-ornament-margin-top, 0px);
	background-color: var(--mc-ornament-bg, transparent);
	opacity: var(--mc-ornament-opacity, 1);
	background-image: var(--mc-ornament-image, none);
	background-repeat: var(--mc-ornament-repeat, repeat-x);
	background-position: var(--mc-ornament-position, center bottom);
	background-size: var(--mc-ornament-size, auto 100%);
}

/* Full-viewport ornament guard against themes that hide overflow on parents. */
.ponca-mc:has(.ponca-mc__ornament--full) { overflow: visible; }
.ponca-mc__ornament--full {
	position: absolute;
	left: 0;
	bottom: 0;
	/*right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;*/
	width: 100vw;
	max-width: 100vw;
}

.ponca-mc.alignwide,
.ponca-mc.alignfull { max-width: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1440px) {
	.ponca-mc {
		padding-left: max(48px, 4vw) !important;
		padding-right: max(48px, 4vw) !important;
	}
}

@media (max-width: 1280px) {
	.ponca-mc {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}
	.ponca-mc__heading {
		font-size: clamp(40px, 4.5vw, 56px) !important;
		line-height: 1.15 !important;
	}
	.ponca-mc__columns {
		gap: 40px !important;
	}
}

@media (max-width: 1024px) {
	.ponca-mc {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	.ponca-mc__columns {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 32px !important;
	}
	.ponca-mc__left,
	.ponca-mc__right {
		flex: 1 1 100% !important;
		min-width: 100% !important;
	}
	.ponca-mc__card {
		padding: 32px !important;
	}
	.ponca-mc__divider {
		width: 100% !important;
	}
}

@media (max-width: 720px) {
	.ponca-mc {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	.ponca-mc__heading {
		font-size: 36px !important;
		line-height: 42px !important;
	}
	.ponca-mc__paragraph {
		font-size: 16px !important;
		line-height: 26px !important;
	}
	.ponca-mc__card {
		padding: 24px !important;
		gap: 28px !important;
	}
	.ponca-mc__card-name {
		font-size: 26px !important;
		line-height: 1.25 !important;
	}
	.ponca-mc__contact-text {
		font-size: 15px !important;
	}
	.ponca-mc__cta {
		width: 100% !important;
		justify-content: center !important;
	}
	.ponca-mc__ornament {
		height: 56px !important;
	}
}

@media (max-width: 420px) {
	.ponca-mc__heading {
		font-size: 32px !important;
		line-height: 36px !important;
	}
	.ponca-mc__card {
		padding: 20px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ponca-mc * {
		transition: none !important;
		animation: none !important;
	}
}

/* ============================================================
   Frame 41 additions (info rows + card description + labeled
   contact rows). These rules are scoped so the existing Frame 42
   styling is unchanged unless the new toggles are turned on.
   ============================================================ */

.ponca-mc__info-rows {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: var(--mc-info-rows-gap, 24px);
	margin-top: var(--mc-info-rows-margin-top, 16px);
}
.ponca-mc__info-row {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	width: 100%;
	gap: var(--mc-info-row-gap, 12px);
}
.ponca-mc__info-row-icon {
	display: inline-flex;
	flex: 0 0 auto;
	margin-top: 2px;
}
.ponca-mc__info-row-icon svg { display: block; }
.ponca-mc__info-row-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	gap: var(--mc-info-row-text-gap, 6px);
}
.ponca-mc__info-row-title {
	margin: 0;
	color: var(--mc-info-row-title-color, #A78607);
	font-family: var(--mc-info-row-title-font-family, 'DM Sans', sans-serif);
	font-size: var(--mc-info-row-title-font-size, 16px);
	line-height: var(--mc-info-row-title-line-height, 25px);
	font-weight: var(--mc-info-row-title-font-weight, 600);
	font-style: var(--mc-info-row-title-font-style, normal);
}
.ponca-mc__info-row-body {
	margin: 0;
	color: var(--mc-info-row-body-color, #474747);
	font-family: var(--mc-info-row-body-font-family, 'DM Sans', sans-serif);
	font-size: var(--mc-info-row-body-font-size, 16px);
	line-height: var(--mc-info-row-body-line-height, 25px);
	font-weight: var(--mc-info-row-body-font-weight, 400);
	font-style: var(--mc-info-row-body-font-style, normal);
}

.ponca-mc__card-description {
	max-width: 100%;
}

.ponca-mc__contact-row--labeled {
	align-items: flex-start !important;
}
.ponca-mc__contact-row--labeled .ponca-mc__contact-icon {
	margin-top: 2px;
}
.ponca-mc__contact-text-col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

@media (max-width: 700px) {
	.ponca-mc__info-row,
	.ponca-mc__contact-row--labeled {
		align-items: flex-start;
	}
	.ponca-mc__info-row-text,
	.ponca-mc__contact-text-col {
		width: 100%;
	}
}
