@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;1,600&family=DM+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   PONCA PRC RESOURCES BLOCK — "PRC Resources"
   Class prefix: ponca-prcr (distinct from ponca-prc for PRC Overview).
   ============================================================ */

.ponca-prcr {
	width: 100%;
	box-sizing: border-box;
	position: relative;
	background-color: var(--prcr-section-bg, #FFFDF6);
}

.ponca-prcr *,
.ponca-prcr *::before,
.ponca-prcr *::after {
	box-sizing: border-box;
}

/* ---------- Container ---------- */
.ponca-prcr__container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: var(--prcr-container-max-width, 1600px);
	gap: var(--prcr-container-gap, 60px);
}

/* ---------- Header ---------- */
.ponca-prcr__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: var(--prcr-header-gap, 14px);
}

/* When a Download All button sits in the header, lay title + button in a row. */
.ponca-prcr__header--has-dl {
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}
.ponca-prcr__header--has-dl .ponca-prcr__header-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--prcr-header-gap, 14px);
}
.ponca-prcr__download-all-wrap--below {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 12px;
}

.ponca-prcr__download-all {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	box-sizing: border-box;
	background: var(--prcr-dl-bg, #B28E07);
	color: var(--prcr-dl-color, #FFFFFF);
	border: var(--prcr-dl-border-width, 1px) solid var(--prcr-dl-border-color, #B28E07);
	border-radius: var(--prcr-dl-radius, 100px);
	padding: var(--prcr-dl-py, 10px) var(--prcr-dl-px, 24px);
	font-family: var(--prcr-dl-font-family, 'DM Sans', sans-serif);
	font-size: var(--prcr-dl-font-size, 13px);
	font-weight: var(--prcr-dl-font-weight, 600);
	letter-spacing: var(--prcr-dl-letter-spacing, 1px);
	text-transform: var(--prcr-dl-text-transform, uppercase);
	line-height: 1.2;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
}
.ponca-prcr__download-all:hover,
.ponca-prcr__download-all:focus-visible {
	background: var(--prcr-dl-hover-bg, #8A6E04);
	color: var(--prcr-dl-hover-color, #FFFFFF);
	border-color: var(--prcr-dl-hover-bg, #8A6E04);
	outline: none;
}
.ponca-prcr__download-all .ponca-prcr__dl-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.ponca-prcr__download-all[disabled],
.ponca-prcr__download-all.is-loading {
	opacity: .65;
	cursor: progress;
}

.ponca-prcr__eyebrow {
	display: inline-block;
	margin: 0;
	color: var(--prcr-eyebrow-color, #DEB209);
	font-family: var(--prcr-eyebrow-font-family, 'DM Sans', sans-serif);
	font-size: var(--prcr-eyebrow-font-size, 13px);
	line-height: var(--prcr-eyebrow-line-height, 22px);
	font-weight: var(--prcr-eyebrow-font-weight, 600);
	font-style: var(--prcr-eyebrow-font-style, normal);
	letter-spacing: var(--prcr-eyebrow-letter-spacing, 3px);
	text-transform: var(--prcr-eyebrow-text-transform, uppercase);
}

.ponca-prcr__title {
	margin: 0;
	width: 100%;
}

.ponca-prcr__title-pre,
.ponca-prcr__title-accent {
	display: inline;
	font-family: var(--prcr-title-font-family, 'Cormorant Garamond', serif);
	font-size: var(--prcr-title-font-size, 56px);
	line-height: var(--prcr-title-line-height, 62px);
	font-weight: var(--prcr-title-font-weight, 300);
	letter-spacing: var(--prcr-title-letter-spacing, -0.56px);
}

.ponca-prcr__title-pre {
	color: var(--prcr-title-pre-color, #0D0F0E);
	font-style: var(--prcr-title-pre-font-style, normal);
}

.ponca-prcr__title-accent {
	color: var(--prcr-title-accent-color, #B28E07);
	font-style: var(--prcr-title-accent-font-style, italic);
}

/* ---------- Grid ---------- */
.ponca-prcr__grid {
	width: 100%;
	display: grid;
	grid-template-columns: var(--prcr-grid-columns, repeat(2, minmax(0, 1fr)));
	column-gap: var(--prcr-grid-column-gap, 20px);
	row-gap: var(--prcr-grid-row-gap, 20px);
}

/* ---------- Card ---------- */
.ponca-prcr__card {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	min-width: 0;
	transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
	background-color: var(--prcr-card-bg, #FFFFFF);
	border: var(--prcr-card-border-width, 1px) solid var(--prcr-card-border-color, #F3F3F3);
	border-radius: var(--prcr-card-radius, 6px);
	padding: var(--prcr-card-padding-y, 24px) var(--prcr-card-padding-x, 24px);
}

.ponca-prcr__card:hover {
	background-color: var(--prcr-card-hover-bg, #FFFCF0) !important;
	border-color: var(--prcr-card-hover-border, #F5E7B3) !important;
}

/* Optional: change the icon wrap background on card hover. Falls back to the
   normal icon-wrap background when no hover colour is set, so behaviour is
   unchanged unless the "Icon background (hover)" setting is filled in. */
.ponca-prcr__card:hover .ponca-prcr__icon-wrap:not(.ponca-prcr__icon-wrap--locked) {
	background-color: var(--prcr-icon-wrap-hover-bg, var(--prcr-icon-wrap-bg, rgba(222,178,9,0.1)));
}

.ponca-prcr__card:focus-within {
	box-shadow: 0 0 0 2px rgba(222, 178, 9, 0.25);
}

.ponca-prcr__card-left {
	display: flex;
	flex-direction: row;
	align-items: center;
	min-width: 0;
	flex: 1 1 auto;
	gap: var(--prcr-card-left-gap, 24px);
}

.ponca-prcr__icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background-color: var(--prcr-icon-wrap-bg, rgba(222,178,9,0.1));
	width: var(--prcr-icon-wrap-size, 50px);
	height: var(--prcr-icon-wrap-size, 50px);
	border-radius: var(--prcr-icon-wrap-radius, 100px);
}

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

/* Custom media-gallery icon (replaces the built-in SVG when chosen). */
.ponca-prcr__icon-img {
	display: block;
	width: var(--prcr-icon-size, 24px);
	height: var(--prcr-icon-size, 24px);
	object-fit: contain;
}

/* ---------- Locked (member-only) state ---------- */
.ponca-prcr__icon-wrap--locked {
	background-color: var(--prcr-icon-wrap-locked-bg, #F4F4F4);
	color: var(--prcr-icon-locked-color, #848484);
}

.ponca-prcr__lock-svg {
	display: block;
	color: var(--prcr-icon-locked-color, #848484);
}

/* "Sign in to view documents" prompt — the file-type label reads as a link
   (brown, underlined) so logged-out visitors know it is clickable. */
a.ponca-prcr__card-filetype--signin {
	color: var(--prcr-btn-color, #B28E07);
	text-decoration: underline;
	cursor: pointer;
	transition: color 200ms ease;
}

a.ponca-prcr__card-filetype--signin:hover,
a.ponca-prcr__card-filetype--signin:focus-visible {
	color: var(--prcr-btn-hover-bg, #B28E07);
	text-decoration: underline;
}

.ponca-prcr__card-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-width: 0;
	flex: 1 1 auto;
	gap: var(--prcr-card-text-gap, 6px);
}

.ponca-prcr__card-title,
.ponca-prcr__card-filetype {
	display: inline-block;
	margin: 0;
	max-width: 100%;
	overflow-wrap: break-word;
}

.ponca-prcr__card-title {
	color: var(--prcr-card-title-color, #0D0F0E);
	font-family: var(--prcr-card-title-font-family, 'DM Sans', sans-serif);
	font-size: var(--prcr-card-title-font-size, 18px);
	line-height: var(--prcr-card-title-line-height, 23px);
	font-weight: var(--prcr-card-title-font-weight, 500);
	font-style: var(--prcr-card-title-font-style, normal);
}

.ponca-prcr__card-filetype {
	color: var(--prcr-card-filetype-color, #848484);
	font-family: var(--prcr-card-filetype-font-family, 'DM Sans', sans-serif);
	font-size: var(--prcr-card-filetype-font-size, 14px);
	line-height: var(--prcr-card-filetype-line-height, 18px);
	font-weight: var(--prcr-card-filetype-font-weight, 400);
	font-style: var(--prcr-card-filetype-font-style, normal);
}

/* ---------- View document button ---------- */
.ponca-prcr__btn {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
	background-color: var(--prcr-btn-bg, transparent);
	color: var(--prcr-btn-color, #B28E07);
	border: var(--prcr-btn-border-width, 1px) solid var(--prcr-btn-border-color, #B28E07);
	border-radius: var(--prcr-btn-radius, 100px);
	padding: var(--prcr-btn-padding-y, 6px) var(--prcr-btn-padding-x, 16px);
	font-family: var(--prcr-btn-font-family, 'DM Sans', sans-serif);
	font-size: var(--prcr-btn-font-size, 12px);
	line-height: var(--prcr-btn-line-height, 16px);
	font-weight: var(--prcr-btn-font-weight, 400);
	font-style: var(--prcr-btn-font-style, normal);
	letter-spacing: var(--prcr-btn-letter-spacing, 1px);
	text-transform: var(--prcr-btn-text-transform, uppercase);
	gap: var(--prcr-btn-gap, 10px);
}

.ponca-prcr__btn--placeholder {
	cursor: default;
	opacity: 0.55;
}

/* Member-only button: a muted, static badge (not a link — the "Sign in to
   view documents" label carries the sign-in link, and no PDF URL is emitted). */
.ponca-prcr__btn--locked {
	color: var(--prcr-btn-locked-color, #848484);
	border-color: var(--prcr-btn-locked-border, #848484);
	background-color: transparent;
	cursor: default;
}

.ponca-prcr__btn:hover:not(.ponca-prcr__btn--placeholder):not(.ponca-prcr__btn--locked),
.ponca-prcr__btn:focus-visible:not(.ponca-prcr__btn--placeholder):not(.ponca-prcr__btn--locked) {
	background-color: var(--prcr-btn-hover-bg, #B28E07) !important;
	color: var(--prcr-btn-hover-color, #FFFFFF) !important;
}

.ponca-prcr__btn:focus-visible {
	outline: 2px solid #DEB209;
	outline-offset: 2px;
}

/* When the button is hovered, the arrow should also change colour
   to match the new button text colour. We achieve this via currentColor
   on the SVG strokes when hovered. */
.ponca-prcr__btn:hover:not(.ponca-prcr__btn--placeholder) .ponca-prcr__arrow-svg path,
.ponca-prcr__btn:focus-visible:not(.ponca-prcr__btn--placeholder) .ponca-prcr__arrow-svg path {
	stroke: var(--prcr-btn-arrow-hover-color, var(--prcr-btn-hover-color, #FFFFFF));
}

.ponca-prcr__btn-text {
	display: inline-block;
}

.ponca-prcr__btn-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

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

/* Custom media-library download icon (replaces the built-in arrow SVG). */
.ponca-prcr__btn-arrow-img {
	display: block;
	object-fit: contain;
}

/* When the custom icon is an *inlined* SVG we can recolour it. The inliner
   already switched its hard-coded fills/strokes to currentColor (leaving any
   explicit "none" intact), so we only need to drive `color:` — base = the
   button arrow colour, hover = the arrow hover colour (falling back to the
   button hover text colour). Raster <img> icons are unaffected. */
.ponca-prcr__btn-arrow-img--svg {
	color: var(--prcr-btn-arrow-color, #B28E07);
}
.ponca-prcr__btn:hover:not(.ponca-prcr__btn--placeholder) .ponca-prcr__btn-arrow-img--svg,
.ponca-prcr__btn:focus-visible:not(.ponca-prcr__btn--placeholder) .ponca-prcr__btn-arrow-img--svg {
	color: var(--prcr-btn-arrow-hover-color, var(--prcr-btn-hover-color, #FFFFFF));
}

/* ---------- Footer ornament ---------- */
.ponca-prcr__ornament {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	line-height: 0;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
	height: var(--prcr-ornament-height, 60px);
	background-color: var(--prcr-ornament-bg, transparent);
	opacity: var(--prcr-ornament-opacity, 1);
}

.ponca-prcr__ornament--image {
	background-image: var(--prcr-ornament-image);
	background-position: var(--prcr-ornament-position, center bottom);
	background-repeat: var(--prcr-ornament-repeat, repeat);
	background-size: var(--prcr-ornament-size, auto 100%);
}

.ponca-prcr__ornament-svg {
	display: block;
	width: 100%;
	height: 100%;
}

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

@media (max-width: 1280px) {
	.ponca-prcr__card {
		gap: 16px !important;
	}
}

@media (max-width: 1024px) {
	.ponca-prcr__card {
		padding: 20px !important;
	}

	.ponca-prcr__card-left {
		gap: 18px !important;
	}

	.ponca-prcr__title {
		font-size: clamp(2rem, 5vw, 3.5rem) !important;
		line-height: 1.15 !important;
	}
}

/* Tablet — drop the grid to a single column */
@media (max-width: 900px) {
	.ponca-prcr__grid {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 768px) {

	.ponca-prcr__card {
		padding: 18px !important;
		gap: 14px !important;
	}

	.ponca-prcr__card-left {
		gap: 16px !important;
	}
}

/* Mobile — stack the button below the title row */
@media (max-width: 600px) {
	.ponca-prcr__title {
		font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
		line-height: 1.15 !important;
	}

	.ponca-prcr__card {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 16px !important;
	}

	.ponca-prcr__card-left {
		width: 100%;
	}

	.ponca-prcr__btn {
		align-self: stretch;
	}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.ponca-prcr__card,
	.ponca-prcr__btn,
	.ponca-prcr__arrow-svg path {
		transition: none;
	}
}

/* ==========================================================================
   Optional second card button ("view page"), shown before the main button.
   Off unless switched on per item in the block settings.
   ========================================================================== */

/* Holds both buttons so the card still has two flex children and its
   space-between layout is unchanged. With the extra button switched off this
   wrapper contains only the original button and nothing moves. */
.ponca-prcr__card-actions {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: var(--prcr-btn2-gap, 12px);
}

/* The reverse of the existing button: filled where that one is outlined,
   and it swaps to the outlined look on hover.

   Every property below reads its own --prcr-btn2-* variable first and falls
   back to the download button's --prcr-btn-* value. So the two buttons look
   identical in shape until a page-button setting is filled in, and then only
   that property diverges. */
.ponca-prcr__btn--alt {
	background-color: var(--prcr-btn2-bg, #B28E07);
	color: var(--prcr-btn2-color, #FFFFFF);
	border-width: var(--prcr-btn2-border-width, var(--prcr-btn-border-width, 1px));
	border-style: solid;
	border-color: var(--prcr-btn2-border-color, #B28E07);
	border-radius: var(--prcr-btn2-radius, var(--prcr-btn-radius, 100px));
	padding:
		var(--prcr-btn2-padding-y, var(--prcr-btn-padding-y, 6px))
		var(--prcr-btn2-padding-x, var(--prcr-btn-padding-x, 16px));
	gap: var(--prcr-btn2-inner-gap, var(--prcr-btn-gap, 10px));
	font-family: var(--prcr-btn2-font-family, var(--prcr-btn-font-family, 'DM Sans', sans-serif));
	font-size: var(--prcr-btn2-font-size, var(--prcr-btn-font-size, 12px));
	line-height: var(--prcr-btn2-line-height, var(--prcr-btn-line-height, 16px));
	font-weight: var(--prcr-btn2-font-weight, var(--prcr-btn-font-weight, 400));
	font-style: var(--prcr-btn2-font-style, var(--prcr-btn-font-style, normal));
	letter-spacing: var(--prcr-btn2-letter-spacing, var(--prcr-btn-letter-spacing, 1px));
	text-transform: var(--prcr-btn2-text-transform, var(--prcr-btn-text-transform, uppercase));
}

.ponca-prcr__btn--alt:hover:not(.ponca-prcr__btn--placeholder):not(.ponca-prcr__btn--locked),
.ponca-prcr__btn--alt:focus-visible:not(.ponca-prcr__btn--placeholder):not(.ponca-prcr__btn--locked) {
	border-color: var(--prcr-btn2-border-color, #B28E07) !important;
	background-color: var(--prcr-btn2-hover-bg, transparent) !important;
	color: var(--prcr-btn2-hover-color, #B28E07) !important;
}

/* The icon needs its own colour, or it keeps the existing button's gold and
   disappears against the filled background. */
.ponca-prcr__btn--alt .ponca-prcr__btn-arrow { color: var(--prcr-btn2-icon-color, #FFFFFF); }

.ponca-prcr__btn--alt .ponca-prcr__btn-arrow svg,
.ponca-prcr__btn--alt .ponca-prcr__btn-arrow svg *,
.ponca-prcr__btn--alt .ponca-prcr__arrow-svg path {
	stroke: var(--prcr-btn2-icon-color, #FFFFFF) !important;
}

.ponca-prcr__btn--alt:hover .ponca-prcr__btn-arrow,
.ponca-prcr__btn--alt:focus-visible .ponca-prcr__btn-arrow {
	color: var(--prcr-btn2-hover-icon-color, #B28E07);
}

.ponca-prcr__btn--alt:hover .ponca-prcr__btn-arrow svg,
.ponca-prcr__btn--alt:hover .ponca-prcr__btn-arrow svg *,
.ponca-prcr__btn--alt:hover .ponca-prcr__arrow-svg path,
.ponca-prcr__btn--alt:focus-visible .ponca-prcr__btn-arrow svg,
.ponca-prcr__btn--alt:focus-visible .ponca-prcr__btn-arrow svg *,
.ponca-prcr__btn--alt:focus-visible .ponca-prcr__arrow-svg path {
	stroke: var(--prcr-btn2-hover-icon-color, #B28E07) !important;
}

/* The page button may use a different icon size from the download button. */
.ponca-prcr__btn--alt .ponca-prcr__btn-arrow,
.ponca-prcr__btn--alt .ponca-prcr__arrow-svg,
.ponca-prcr__btn--alt .ponca-prcr__btn-arrow-img {
	width: var(--prcr-btn2-icon-size, var(--prcr-btn-icon-size, 20px));
	height: var(--prcr-btn2-icon-size, var(--prcr-btn-icon-size, 20px));
}

/* An <img> icon can't be recoloured, so leave it as supplied. */
.ponca-prcr__btn--alt .ponca-prcr__btn-arrow-img:not(.ponca-prcr__btn-arrow-img--svg) { filter: none; }

@media (max-width: 600px) {
	.ponca-prcr__card-actions { gap: 8px; flex-wrap: wrap; }
}