@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&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 SAFETY PLANNING — Frame 93 (Safety Planning)
   Class prefix: ponca-sp
   ============================================================ */

.ponca-sp { position: relative; box-sizing: border-box; width: 100%; }
.ponca-sp *, .ponca-sp *::before, .ponca-sp *::after { box-sizing: border-box; }
.ponca-sp__container { width: 100%; }

/* ---- Back link ---- */
.ponca-sp__back-link { text-decoration: none; cursor: pointer; transition: opacity 180ms ease; }
.ponca-sp__back-link:hover { opacity: 0.78; }

/* ---- Header ---- */
.ponca-sp__eyebrow,
.ponca-sp__headline,
.ponca-sp__guide-headline,
.ponca-sp__intro-p,
.ponca-sp__worksheet-subhead,
.ponca-sp__worksheet-desc,
.ponca-sp__doc-title,
.ponca-sp__doc-meta,
.ponca-sp__info-subhead,
.ponca-sp__info-paragraph { margin: 0; }
.ponca-sp__headline-top, .ponca-sp__headline-bottom, .ponca-sp__headline-sep,
.ponca-sp__guide-headline-top, .ponca-sp__guide-headline-bottom, .ponca-sp__guide-headline-sep { display: inline; }
.ponca-sp__intro-p strong, .ponca-sp__worksheet-desc strong, .ponca-sp__info-paragraph strong { font-weight: 600; }
.ponca-sp__intro-p em, .ponca-sp__worksheet-desc em, .ponca-sp__info-paragraph em { font-style: italic; }
.ponca-sp__intro-p a, .ponca-sp__worksheet-desc a, .ponca-sp__info-paragraph a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* ---- Doc row ---- */
.ponca-sp__doc-row {
	transition: background-color 200ms ease;
}
a.ponca-sp__doc-row:hover,
a.ponca-sp__doc-row:focus-visible {
	background-color: var(--ponca-sp-row-hover-bg) !important;
}
.ponca-sp__doc-icon svg,
.ponca-sp__doc-icon-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ponca-sp__doc-title, .ponca-sp__doc-meta {
	word-break: break-word;
	overflow-wrap: anywhere;
}
/* "Sign in to view documents" prompt — the locked meta becomes a link so
   logged-out visitors know it is clickable (colour comes from the inline
   --sp-doc-meta-color set to the locked colour). */
a.ponca-sp__doc-meta--signin {
	text-decoration: underline;
	cursor: pointer;
	transition: opacity .18s ease;
}
a.ponca-sp__doc-meta--signin:hover,
a.ponca-sp__doc-meta--signin:focus-visible { opacity: .8; }
/* Member-only button: a muted, static badge (not a link — the sign-in link is
   the meta line, and no file URL is emitted on a locked row). */
.ponca-sp__doc-button--locked { cursor: default; }

/* ---- Doc button ---- */
.ponca-sp__doc-button {
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
a.ponca-sp__doc-row:hover .ponca-sp__doc-button,
a.ponca-sp__doc-row:focus-visible .ponca-sp__doc-button {
	background-color: var(--ponca-sp-btn-hover-bg) !important;
	color: var(--ponca-sp-btn-hover-color) !important;
}
a.ponca-sp__doc-row:hover .ponca-sp__doc-button-icon svg path,
a.ponca-sp__doc-row:focus-visible .ponca-sp__doc-button-icon svg path {
	stroke: var(--ponca-sp-btn-hover-color) !important;
}
.ponca-sp__doc-button-icon { transition: transform 200ms ease; }
a.ponca-sp__doc-row:hover .ponca-sp__doc-button-icon {
	transform: translateY(2px);
}

/* ---- Footer ornament ---- */
.ponca-sp__footer-pattern {
	display: block;
	pointer-events: none;
	user-select: none;
	margin-bottom: 0;
	height: var(--ponca-sp-foot-h, 83px);
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: auto 100%;
}
.ponca-sp__footer-pattern--full { max-width: 100vw; width: 100vw; }

@media (max-width: 1024px) { .ponca-sp__footer-pattern { height: calc(var(--ponca-sp-foot-h, 83px) * 0.85); } }
@media (max-width: 720px)  { .ponca-sp__footer-pattern { height: var(--ponca-sp-foot-h-mobile, 56px); } }
@media (max-width: 420px)  { .ponca-sp__footer-pattern { height: calc(var(--ponca-sp-foot-h-mobile, 56px) * 0.85); } }

/* ---- Alignment helpers ---- */
.ponca-sp.alignwide .ponca-sp__container,
.ponca-sp.alignfull .ponca-sp__container {
	max-width: 1600px;
}

/* ---- Responsive ---- */
@media (max-width: 1280px) {
	.ponca-sp__headline,
	.ponca-sp__guide-headline { font-size: clamp(40px, 5vw, 56px) !important; line-height: 1.15 !important; }
}

@media (max-width: 768px) {
	.ponca-sp__headline,
	.ponca-sp__guide-headline { font-size: 36px !important; line-height: 42px !important; }
	.ponca-sp__intro-p,
	.ponca-sp__worksheet-desc,
	.ponca-sp__info-paragraph { font-size: 16px !important; line-height: 28px !important; }
	.ponca-sp__info-subhead { font-size: 24px !important; line-height: 30px !important; }
	.ponca-sp__doc-row { padding: 20px !important; gap: 16px !important; }
}

@media (max-width: 600px) {
	.ponca-sp__headline,
	.ponca-sp__guide-headline { font-size: 32px !important; line-height: 38px !important; }
	.ponca-sp__doc-title { font-size: 16px !important; line-height: 22px !important; }
	.ponca-sp__doc-row { padding: 16px !important; gap: 12px !important; }
	.ponca-sp__doc-button { padding: 6px 12px !important; }
	.ponca-sp__doc-button-icon { display: none !important; }
}

@media (max-width: 420px) {
	.ponca-sp__doc-row {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	.ponca-sp__doc-button { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.ponca-sp__back-link,
	.ponca-sp__doc-row,
	.ponca-sp__doc-button,
	.ponca-sp__doc-button-icon { transition: none !important; }
}

/* ============================================================
   VARIABLE CONSUMPTION
   Reads every CSS custom property that render.php writes inline
   (style="--sp-*") so the block's editable controls take effect.
   Base-level rules only — placed last so they never override the
   !important responsive / state rules above.
   ============================================================ */

/* ---- Section / container ---- */
.ponca-sp {
	background-color: var(--sp-bg, #FFFDF6);
	padding-top: var(--sp-pad-y, 128px);
	padding-bottom: var(--sp-pad-y, 128px);
	padding-left: var(--sp-pad-x, 48px);
	padding-right: var(--sp-pad-x, 48px);
}
.ponca-sp__container {
	display: flex;
	flex-direction: column;
	max-width: var(--sp-container-max-width, 1600px);
	gap: var(--sp-container-gap, 60px);
}

/* ---- Back link ---- */
.ponca-sp__back-link {
	display: inline-flex;
	flex-direction: column;
	gap: var(--sp-back-stack-gap, 11px);
}
.ponca-sp__back-link-row {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-back-row-gap, 10px);
}
.ponca-sp__back-link-arrow {
	color: var(--sp-back-arrow-color, #6E6B6D);
	font-family: var(--sp-back-arrow-font-family, 'Arial', sans-serif);
	font-size: var(--sp-back-arrow-font-size, 12.8px);
	line-height: var(--sp-back-arrow-line-height, 22px);
	font-weight: var(--sp-back-arrow-font-weight, 700);
	letter-spacing: var(--sp-back-arrow-letter-spacing, 1.92px);
}
.ponca-sp__back-link-text {
	color: var(--sp-back-text-color, #6E6B6D);
	font-family: var(--sp-back-text-font-family, 'DM Sans', sans-serif);
	font-size: var(--sp-back-text-font-size, 13px);
	line-height: var(--sp-back-text-line-height, 22px);
	font-weight: var(--sp-back-text-font-weight, 600);
	font-style: var(--sp-back-text-font-style, normal);
	letter-spacing: var(--sp-back-text-letter-spacing, 1.92px);
	text-transform: var(--sp-back-text-text-transform, uppercase);
}
.ponca-sp__back-link-divider {
	display: block;
	width: var(--sp-back-divider-width, 145px);
	height: var(--sp-back-divider-height, 1px);
	background-color: var(--sp-back-divider-color, #6E6B6D);
}

/* ---- Header ---- */
.ponca-sp__header {
	display: flex;
	flex-direction: column;
	gap: var(--sp-header-gap, 24px);
}
.ponca-sp__eyebrow {
	color: var(--sp-eyebrow-color, #DEB209);
	font-family: var(--sp-eyebrow-font-family, 'DM Sans', sans-serif);
	font-size: var(--sp-eyebrow-font-size, 13px);
	line-height: var(--sp-eyebrow-line-height, 22px);
	font-weight: var(--sp-eyebrow-font-weight, 600);
	font-style: var(--sp-eyebrow-font-style, normal);
	letter-spacing: var(--sp-eyebrow-letter-spacing, 3px);
	text-transform: var(--sp-eyebrow-text-transform, uppercase);
}
.ponca-sp__headline {
	font-family: var(--sp-headline-font-family, 'Cormorant Garamond', serif);
	font-size: var(--sp-headline-font-size, 56px);
	line-height: var(--sp-headline-line-height, 62px);
	font-weight: var(--sp-headline-font-weight, 300);
	letter-spacing: var(--sp-headline-letter-spacing, -0.56px);
}
.ponca-sp__headline-top {
	color: var(--sp-headline-top-color, #0D0F0E);
	font-style: var(--sp-headline-top-font-style, normal);
}
.ponca-sp__headline-bottom {
	color: var(--sp-headline-bottom-color, #A78607);
	font-style: var(--sp-headline-bottom-font-style, italic);
}

/* ---- Intro ---- */
.ponca-sp__intro {
	display: flex;
	flex-direction: column;
	gap: var(--sp-intro-gap, 16px);
	max-width: var(--sp-intro-max-width, 1102px);
}
.ponca-sp__intro-p {
	color: var(--sp-intro-color, #474747);
	font-family: var(--sp-intro-font-family, 'DM Sans', sans-serif);
	font-size: var(--sp-intro-font-size, 18px);
	line-height: var(--sp-intro-line-height, 30px);
	font-weight: var(--sp-intro-font-weight, 400);
	font-style: var(--sp-intro-font-style, normal);
	letter-spacing: var(--sp-intro-letter-spacing, 0px);
}

/* ---- Worksheet section ---- */
.ponca-sp__worksheet {
	display: flex;
	flex-direction: column;
	gap: var(--sp-ws-section-gap, 30px);
}
.ponca-sp__worksheet-header {
	display: flex;
	flex-direction: column;
	gap: var(--sp-ws-header-gap, 20px);
}
.ponca-sp__worksheet-subhead {
	color: var(--sp-ws-subhead-color, #0D0F0E);
	font-family: var(--sp-ws-subhead-font-family, 'DM Sans', sans-serif);
	font-size: var(--sp-ws-subhead-font-size, 20px);
	line-height: var(--sp-ws-subhead-line-height, 26px);
	font-weight: var(--sp-ws-subhead-font-weight, 600);
	font-style: var(--sp-ws-subhead-font-style, normal);
	letter-spacing: var(--sp-ws-subhead-letter-spacing, 0px);
	text-transform: var(--sp-ws-subhead-text-transform, none);
}
.ponca-sp__worksheet-desc {
	color: var(--sp-ws-desc-color, #474747);
	font-family: var(--sp-ws-desc-font-family, 'DM Sans', sans-serif);
	font-size: var(--sp-ws-desc-font-size, 18px);
	line-height: var(--sp-ws-desc-line-height, 30px);
	font-weight: var(--sp-ws-desc-font-weight, 400);
	font-style: var(--sp-ws-desc-font-style, normal);
	letter-spacing: var(--sp-ws-desc-letter-spacing, 0px);
	max-width: var(--sp-ws-desc-max-width, 1102px);
}

/* ---- Doc row ---- */
.ponca-sp__doc-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sp-doc-row-padding, 24px);
	gap: var(--sp-doc-row-gap, 24px);
	background-color: var(--sp-doc-row-bg, #FFFFFF);
	border: solid  var(--sp-doc-row-border-color, #F3F3F3)  var(--sp-doc-row-border-width, 1px)!important;
	border-radius: var(--sp-doc-row-border-radius, 6px);
	text-decoration: none;
}
.ponca-sp__doc-left {
	display: flex;
	align-items: center;
	gap: var(--sp-doc-row-gap, 24px);
}
.ponca-sp__doc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--sp-doc-icon-size, 50px);
	height: var(--sp-doc-icon-size, 50px);
	background-color: var(--sp-doc-icon-bg, rgba(222,178,9,0.1));
	border-radius: var(--sp-doc-icon-radius, 100px);
}
.ponca-sp__doc-icon-inner {
	display: inline-flex;
	width: var(--sp-doc-icon-inner-size, 24px);
	height: var(--sp-doc-icon-inner-size, 24px);
}
.ponca-sp__doc-meta-block {
	display: flex;
	flex-direction: column;
	gap: var(--sp-doc-meta-gap, 6px);
}
.ponca-sp__doc-title {
	color: var(--sp-doc-title-color, #0D0F0E);
	font-family: var(--sp-doc-title-font-family, 'DM Sans', sans-serif);
	font-size: var(--sp-doc-title-font-size, 18px);
	line-height: var(--sp-doc-title-line-height, 23px);
	font-weight: var(--sp-doc-title-font-weight, 500);
	font-style: var(--sp-doc-title-font-style, normal);
	letter-spacing: var(--sp-doc-title-letter-spacing, 0px);
}
.ponca-sp__doc-meta {
	color: var(--sp-doc-meta-color, #848484);
	font-family: var(--sp-doc-meta-font-family, 'DM Sans', sans-serif);
	font-size: var(--sp-doc-meta-font-size, 14px);
	line-height: var(--sp-doc-meta-line-height, 18px);
	font-weight: var(--sp-doc-meta-font-weight, 400);
	font-style: var(--sp-doc-meta-font-style, normal);
	letter-spacing: var(--sp-doc-meta-letter-spacing, 0px);
}

/* ---- Doc button ---- */
.ponca-sp__doc-button {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	gap: var(--sp-btn-gap, 10px);
	padding: var(--sp-btn-pad-y, 6px) var(--sp-btn-pad-x, 16px);
	border: solid var(--sp-btn-border-color, #B28E07) var(--sp-btn-border-width, 1px)!important;
	background-color: var(--sp-btn-bg, transparent);
	border-radius: var(--sp-btn-border-radius, 100px);
	color: var(--sp-btn-color, #B28E07);
	font-family: var(--sp-btn-font-family, 'DM Sans', sans-serif);
	font-size: var(--sp-btn-font-size, 12px);
	line-height: var(--sp-btn-line-height, 16px);
	font-weight: var(--sp-btn-font-weight, 400);
	letter-spacing: var(--sp-btn-letter-spacing, 1px);
	text-transform: var(--sp-btn-text-transform, uppercase);
}
.ponca-sp__doc-button-icon {
	display: inline-flex;
	width: var(--sp-btn-icon-size, 20px);
	height: var(--sp-btn-icon-size, 20px);
}

/* ---- Guide section ---- */
.ponca-sp__guide {
	display: flex;
	flex-direction: column;
	gap: var(--sp-guide-section-gap, 60px);
}
.ponca-sp__guide-headline {
	font-family: var(--sp-guide-headline-font-family, 'Cormorant Garamond', serif);
	font-size: var(--sp-guide-headline-font-size, 56px);
	line-height: var(--sp-guide-headline-line-height, 62px);
	font-weight: var(--sp-guide-headline-font-weight, 300);
	letter-spacing: var(--sp-guide-headline-letter-spacing, -0.56px);
	max-width: var(--sp-guide-headline-max-width, 1106px);
}
.ponca-sp__guide-headline-top {
	color: var(--sp-guide-headline-top-color, #0D0F0E);
	font-style: var(--sp-guide-headline-top-font-style, normal);
}
.ponca-sp__guide-headline-bottom {
	color: var(--sp-guide-headline-bottom-color, #A78607);
	font-style: var(--sp-guide-headline-bottom-font-style, italic);
}

/* ---- Info sections ---- */
.ponca-sp__info-sections {
	display: flex;
	flex-direction: column;
	gap: var(--sp-info-sections-gap, 60px);
	max-width: var(--sp-info-sections-max-width, 1106px);
}
.ponca-sp__info-section {
	display: flex;
	flex-direction: column;
	gap: var(--sp-info-inner-gap, 24px);
}
.ponca-sp__info-subhead {
	color: var(--sp-info-subhead-color, #0D0F0E);
	font-family: var(--sp-info-subhead-font-family, 'Cormorant Garamond', serif);
	font-size: var(--sp-info-subhead-font-size, 30px);
	line-height: var(--sp-info-subhead-line-height, 36px);
	font-weight: var(--sp-info-subhead-font-weight, 600);
	font-style: var(--sp-info-subhead-font-style, normal);
	letter-spacing: var(--sp-info-subhead-letter-spacing, 0px);
	text-transform: var(--sp-info-subhead-text-transform, none);
}
.ponca-sp__info-paragraph {
	color: var(--sp-info-para-color, #474747);
	font-family: var(--sp-info-para-font-family, 'DM Sans', sans-serif);
	font-size: var(--sp-info-para-font-size, 18px);
	line-height: var(--sp-info-para-line-height, 30px);
	font-weight: var(--sp-info-para-font-weight, 400);
	font-style: var(--sp-info-para-font-style, normal);
	letter-spacing: var(--sp-info-para-letter-spacing, 0px);
}

/* ---- Footer ornament ---- */
.ponca-sp__footer-pattern {
	margin-top: var(--sp-foot-margin-top, 60px);
	margin-bottom: var(--sp-foot-margin-bottom, 0);
	opacity: var(--sp-foot-opacity, 1);
	background-color: var(--sp-foot-bg, transparent);
	background-image: var(--sp-foot-image);
	background-repeat: var(--sp-foot-repeat, repeat-x);
	background-position: var(--sp-foot-position, center bottom);
	background-size: var(--sp-foot-size, auto 100%);
	position: absolute;
	bottom: 0;
	left: 0;
}