/**
 * KCPSR Connected Intake System — confirmation + continuation styling.
 *
 * Uses the site's established thermal orange / deep blue system. Everything is
 * scoped under .kcpsr-is-* so it cannot leak into Elementor, the Command
 * Center, or the Posting Templates studio that renders inside this page.
 */

/* The site theme renders pages on a BLACK body with white text. These blocks
   therefore have to establish their own light surface rather than inheriting —
   dark ink on a transparent background is invisible here. Setting both the
   background and the colour together is what makes the card theme-proof. */
.kcpsr-is-confirm,
.kcpsr-is-continue {
	--kcpsr-is-orange: #f26522;
	--kcpsr-is-orange-dark: #c74a12;
	--kcpsr-is-blue: #0d2137;
	--kcpsr-is-blue-mid: #16334f;
	--kcpsr-is-ink: #10202f;
	--kcpsr-is-muted: #5a6b7b;
	--kcpsr-is-line: #dfe6ec;
	--kcpsr-is-bg: #ffffff;

	max-width: 900px;
	margin: 24px auto 48px;
	padding: 28px 28px 36px;
	background: var(--kcpsr-is-bg);
	border-radius: 16px;
	color: var(--kcpsr-is-ink);
	font-size: 17px;
	line-height: 1.6;
}

/* Headings, list text and links inside the card must not inherit the theme's
   white-on-black rules. */
.kcpsr-is-confirm h1,
.kcpsr-is-confirm h2,
.kcpsr-is-confirm h3,
.kcpsr-is-confirm p,
.kcpsr-is-confirm li,
.kcpsr-is-confirm dt,
.kcpsr-is-confirm dd,
.kcpsr-is-continue h1,
.kcpsr-is-continue h2,
.kcpsr-is-continue h3,
.kcpsr-is-continue p,
.kcpsr-is-continue li,
.kcpsr-is-continue dt,
.kcpsr-is-continue dd {
	color: var(--kcpsr-is-ink);
}

.kcpsr-is-confirm a:not(.kcpsr-is-btn):not(.kcpsr-is-phone),
.kcpsr-is-continue a:not(.kcpsr-is-btn):not(.kcpsr-is-phone) {
	color: var(--kcpsr-is-orange-dark);
	text-decoration: underline;
}

/* The hero is deliberately dark, so its own text stays white. */
.kcpsr-is-hero h1,
.kcpsr-is-hero h2,
.kcpsr-is-hero p,
.kcpsr-is-hero li,
.kcpsr-is-hero figcaption {
	color: #fff;
}

.kcpsr-is-confirm *,
.kcpsr-is-continue * {
	box-sizing: border-box;
}

.kcpsr-is-confirm img {
	max-width: 100%;
	height: auto;
}

/* ---------- hero ---------- */

.kcpsr-is-hero {
	background: var(--kcpsr-is-blue);
	color: #fff;
	border-radius: 14px;
	padding: 28px 24px;
	margin: 24px 0 32px;
}

.kcpsr-is-eyebrow {
	margin: 0 0 6px;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 13px;
	font-weight: 700;
	color: var(--kcpsr-is-orange);
}

.kcpsr-is-hero h1 {
	margin: 0 0 12px;
	font-size: clamp( 26px, 5vw, 38px );
	line-height: 1.15;
	color: #fff;
}

.kcpsr-is-lede {
	font-size: 18px;
	margin: 0 0 14px;
}

.kcpsr-is-caution {
	background: rgba( 242, 101, 34, .14 );
	border-left: 4px solid var(--kcpsr-is-orange);
	padding: 12px 14px;
	border-radius: 6px;
	margin: 0 0 14px;
	font-size: 16px;
}

.kcpsr-is-caseno {
	margin: 0 0 14px;
	font-size: 15px;
	color: #cfe0ee;
}

.kcpsr-is-pet {
	margin: 18px 0;
	text-align: center;
}

.kcpsr-is-pet img {
	max-height: 320px;
	width: auto;
	border-radius: 12px;
	border: 3px solid var(--kcpsr-is-orange);
}

.kcpsr-is-pet figcaption {
	margin-top: 8px;
	font-weight: 700;
	font-size: 18px;
}

.kcpsr-is-call {
	margin: 18px 0 0;
	font-size: 16px;
}

.kcpsr-is-phone {
	display: inline-block;
	color: #fff;
	background: var(--kcpsr-is-orange);
	padding: 8px 16px;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
	margin-left: 6px;
}

.kcpsr-is-phone:hover,
.kcpsr-is-phone:focus {
	background: var(--kcpsr-is-orange-dark);
	color: #fff;
}

/* ---------- steps ---------- */

.kcpsr-is-step {
	margin: 0 0 34px;
	padding: 0 0 28px;
	border-bottom: 1px solid var(--kcpsr-is-line);
}

.kcpsr-is-step:last-child {
	border-bottom: 0;
}

.kcpsr-is-step h2 {
	font-size: clamp( 21px, 3.4vw, 27px );
	margin: 0 0 10px;
	color: var(--kcpsr-is-blue);
}

.kcpsr-is-step h3 {
	font-size: 18px;
	margin: 0 0 8px;
}

.kcpsr-is-note {
	color: var(--kcpsr-is-muted);
	font-size: 15px;
}

/* ---------- copy blocks ---------- */

.kcpsr-is-copyblock {
	margin: 0 0 22px;
}

.kcpsr-is-copyblock textarea {
	width: 100%;
	font: inherit;
	font-size: 15px;
	line-height: 1.5;
	padding: 12px;
	border: 1px solid var(--kcpsr-is-line);
	border-radius: 8px;
	background: #f8fafb;
	color: var(--kcpsr-is-ink);
	resize: vertical;
}

.kcpsr-is-btn {
	display: inline-block;
	appearance: none;
	border: 2px solid var(--kcpsr-is-blue);
	background: #fff;
	color: var(--kcpsr-is-blue);
	font: inherit;
	font-weight: 700;
	font-size: 16px;
	padding: 10px 18px;
	border-radius: 8px;
	cursor: pointer;
	text-decoration: none;
	margin-top: 10px;
	/* box-shadow rather than outline: an outline is clipped by the rounded
	   containers this page nests buttons inside. */
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.kcpsr-is-btn:hover,
.kcpsr-is-btn:focus-visible {
	background: var(--kcpsr-is-blue);
	color: #fff;
	box-shadow: 0 0 0 3px rgba( 242, 101, 34, .55 );
}

.kcpsr-is-btn.is-done {
	background: #1c7a43;
	border-color: #1c7a43;
	color: #fff;
}

.kcpsr-is-btn-primary {
	background: var(--kcpsr-is-orange);
	border-color: var(--kcpsr-is-orange);
	color: #fff;
	font-size: 18px;
	padding: 14px 26px;
}

.kcpsr-is-btn-primary:hover,
.kcpsr-is-btn-primary:focus-visible {
	background: var(--kcpsr-is-orange-dark);
	border-color: var(--kcpsr-is-orange-dark);
	color: #fff;
}

.kcpsr-is-btn-small {
	font-size: 14px;
	padding: 6px 12px;
	margin-top: 0;
}

.kcpsr-is-howto {
	margin: 18px 0 0;
	padding-left: 22px;
}

.kcpsr-is-howto li {
	margin-bottom: 6px;
}

/* ---------- groups ---------- */

.kcpsr-is-groups {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.kcpsr-is-groups li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 12px 0;
	border-bottom: 1px solid var(--kcpsr-is-line);
}

.kcpsr-is-groupsel {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 260px;
	cursor: pointer;
}

.kcpsr-is-groupcheck {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.kcpsr-is-groupname {
	font-weight: 600;
}

.kcpsr-is-groupmeta {
	color: var(--kcpsr-is-muted);
	font-size: 14px;
	flex: 0 1 auto;
}

.kcpsr-is-popupnote {
	display: block;
	margin-top: 6px;
}

/* ---------- misc ---------- */

.kcpsr-is-placeholder {
	background: #fff6f1;
	border: 1px solid #f6cbb2;
	border-radius: 10px;
	padding: 16px 18px;
}

.kcpsr-is-join {
	background: #f4f8fb;
	border-radius: 12px;
	padding: 24px;
	border-bottom: 0;
}

.kcpsr-is-known {
	background: #f4f8fb;
	border: 1px solid var(--kcpsr-is-line);
	border-radius: 10px;
	padding: 16px 18px;
	margin: 0 0 26px;
}

.kcpsr-is-known h3 {
	margin: 0 0 6px;
}

.kcpsr-is-known-note {
	color: var(--kcpsr-is-muted);
	font-size: 15px;
	margin: 0 0 12px;
}

.kcpsr-is-known dl {
	margin: 0;
	display: grid;
	grid-template-columns: minmax( 120px, 200px ) 1fr;
	gap: 6px 16px;
}

.kcpsr-is-known dt {
	font-weight: 700;
	color: var(--kcpsr-is-muted);
	font-size: 15px;
}

.kcpsr-is-known dd {
	margin: 0;
}

.kcpsr-is-denied h1 {
	color: var(--kcpsr-is-blue);
	margin-top: 32px;
}

/* Mobile: the paired desktop/mobile container pattern used elsewhere on this
   site is not needed here — one column that reflows is enough. */
@media ( max-width: 750px ) {
	.kcpsr-is-confirm,
	.kcpsr-is-continue {
		font-size: 16px;
	}

	.kcpsr-is-hero {
		padding: 22px 18px;
	}

	.kcpsr-is-known dl {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.kcpsr-is-known dd {
		margin-bottom: 8px;
	}

	.kcpsr-is-groups li {
		align-items: flex-start;
	}

	.kcpsr-is-btn {
		width: 100%;
		text-align: center;
	}

	.kcpsr-is-btn-small {
		width: auto;
	}
}

/* ---------- landing pages + in-form blocks (v1.1) ---------- */

.kcpsr-is-landing {
	--kcpsr-is-orange: #f26522;
	--kcpsr-is-orange-dark: #c74a12;
	--kcpsr-is-blue: #0d2137;
	--kcpsr-is-ink: #10202f;
	--kcpsr-is-muted: #5a6b7b;
	--kcpsr-is-line: #dfe6ec;
	--kcpsr-is-bg: #ffffff;

	max-width: 900px;
	margin: 24px auto 48px;
	padding: 28px 28px 36px;
	background: var(--kcpsr-is-bg);
	border-radius: 16px;
	color: var(--kcpsr-is-ink);
	font-size: 17px;
	line-height: 1.6;
}

.kcpsr-is-landing * { box-sizing: border-box; }

/* Same reason as the confirmation card: the theme paints white text on black. */
.kcpsr-is-landing h1,
.kcpsr-is-landing h2,
.kcpsr-is-landing h3,
.kcpsr-is-landing p,
.kcpsr-is-landing li,
.kcpsr-is-landing label,
.kcpsr-is-staffpage h1,
.kcpsr-is-staffpage h2,
.kcpsr-is-staffpage p,
.kcpsr-is-staffpage li {
	color: var(--kcpsr-is-ink, #10202f);
}

.kcpsr-is-landing .kcpsr-is-hero h1,
.kcpsr-is-landing .kcpsr-is-hero p,
.kcpsr-is-landing .kcpsr-is-hero .kcpsr-is-eyebrow {
	color: #fff;
}

.kcpsr-is-landing .kcpsr-is-hero .kcpsr-is-eyebrow { color: var(--kcpsr-is-orange); }

.kcpsr-is-landing a:not(.kcpsr-is-btn):not(.kcpsr-is-phone),
.kcpsr-is-staffpage a:not(.kcpsr-is-btn):not(.kcpsr-is-phone) {
	color: var(--kcpsr-is-orange-dark, #c74a12);
	text-decoration: underline;
}

.kcpsr-is-landing .kcpsr-is-hero a:not(.kcpsr-is-phone) { color: #ffb894; }

/* Gravity Forms styling deliberately does NOT live here any more.
   The KCPSR Command Center Form Design System plugin owns every form surface
   (assets/kcpsr-forms.css). Two copies of the same rules existed briefly and
   the higher-specificity copy in this file quietly won, which is how the
   dispatch forms ended up with near-black labels on a dark card. If a form on
   one of these pages needs adjusting, change it there, not here. */

.kcpsr-is-ticks {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.kcpsr-is-ticks li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 10px;
}

.kcpsr-is-ticks li:before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: 16px;
	height: 9px;
	border-left: 3px solid var(--kcpsr-is-orange);
	border-bottom: 3px solid var(--kcpsr-is-orange);
	transform: rotate(-45deg);
}

.kcpsr-is-formsection {
	scroll-margin-top: 90px;
}

.kcpsr-is-staffpage {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 16px 48px;
}

/* Blocks rendered INSIDE a Gravity Form (HTML fields). Scoped so they cannot
   restyle any other form on the site. */
.kcpsr-is-formintro {
	background: #0d2137;
	color: #fff;
	border-radius: 12px;
	padding: 20px 22px;
	margin-bottom: 8px;
}

.kcpsr-is-formintro h2 {
	color: #fff;
	margin: 0 0 10px;
	font-size: clamp( 20px, 3.2vw, 26px );
	line-height: 1.2;
}

.kcpsr-is-formintro p { margin: 0 0 10px; }
.kcpsr-is-formintro p:last-child { margin-bottom: 0; }
.kcpsr-is-formintro a { color: #ffb894; }

.kcpsr-is-formurgent {
	background: rgba( 242, 101, 34, .16 );
	border-left: 4px solid #f26522;
	padding: 10px 12px;
	border-radius: 6px;
}

.kcpsr-is-formintro.kcpsr-is-internal { background: #1f2a33; }

.kcpsr-is-formprivacy {
	background: #f4f8fb;
	border: 1px solid #dfe6ec;
	border-radius: 10px;
	padding: 14px 16px;
	font-size: 15px;
	color: #3d4c5a;
}

.kcpsr-is-inlineconfirm h2 {
	color: #0d2137;
	margin-top: 0;
}

.kcpsr-is-inlineconfirm {
	background: #f4f8fb;
	border-left: 5px solid #f26522;
	border-radius: 10px;
	padding: 20px 22px;
}

@media ( max-width: 750px ) {
	.kcpsr-is-landing { font-size: 16px; }
	.kcpsr-is-formintro { padding: 16px 16px; }
}

/* =====================================================================
   Layout fix, scoped to this plugin's own pages only.

   Sydney's #primary is float:left and a direct child of <body>; the global
   Elementor footer is its next sibling with clear:none. The uncleared float
   leaves the wrapper with no height in flow, so the footer starts at the same
   top offset and paints its opaque black background over the whole page.
   Taking #primary out of the float puts the footer back below the content.

   Scoped to body.kcpsr-is-page so no other page on the site is affected.
   ===================================================================== */

body.kcpsr-is-page #primary,
body.kcpsr-is-page .content-area {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
}

body.kcpsr-is-page .elementor-location-footer {
	clear: both !important;
}

/* Sydney puts a sidebar column next to the floated content on some layouts.
   These pages are single-column by design, so hide it rather than let it
   reserve a column that nothing fills. */
body.kcpsr-is-page #secondary.widget-area {
	display: none !important;
}

/* ---------- ported: While You Wait checklist + do-not warnings ---------- */

.kcpsr-is-checklist {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}
.kcpsr-is-checklist li {
	position: relative;
	margin: 0 0 10px;
	padding: 12px 14px 12px 42px;
	border: 1px solid var(--kcpsr-is-line);
	border-radius: 10px;
	background: #f7fafc;
	font-size: 15px;
	line-height: 1.5;
}
.kcpsr-is-checklist li:before {
	content: "\2713";
	position: absolute;
	left: 14px;
	top: 12px;
	font-weight: 700;
	color: #1a7f4b;
}

/* The warnings are deliberately styled apart from the do-list. Somebody skimming
   this page while upset must be able to tell at a glance that these four are the
   opposite instruction, not more of the same. */
.kcpsr-is-dontheading {
	margin: 26px 0 4px;
	color: #a3241a;
}
.kcpsr-is-donts li {
	border-color: #f0c8c2;
	background: #fdf4f2;
}
.kcpsr-is-donts li:before {
	content: "\2715";
	color: #a3241a;
}

/* ---------- ported: shelter outreach ---------- */

.kcpsr-is-shelter .kcpsr-is-copyblock textarea {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 14px;
}

@media ( max-width: 750px ) {
	.kcpsr-is-checklist li {
		padding: 11px 12px 11px 38px;
		font-size: 14.5px;
	}
	.kcpsr-is-checklist li:before { left: 12px; }
	.kcpsr-is-shelter .kcpsr-is-copyblock textarea { font-size: 13px; }
}

/* ---------- heading colour: beating Elementor's global kit ----------
 *
 * THE BUG. Every h2 on the confirmation page rendered WHITE on the white card,
 * so no section heading was visible to a customer who had just submitted a
 * dispatch request. It was not specific to the newly ported sections — it
 * affected every heading on the page and had been doing so since the page was
 * built.
 *
 * THE CAUSE. Elementor's global kit emits
 *
 *     .elementor-kit-379 h2 { color: #ffffff; }
 *
 * which is (0,1,1) — exactly the same specificity as this stylesheet's own
 * `.kcpsr-is-step h2`. On a tie the later sheet wins, and the kit loads after
 * the plugin, so the kit won every time. Marking the colour !important would
 * also work, but it would then fight the hero, which legitimately needs white
 * text, and every future exception would need !important too.
 *
 * THE FIX. Prefix with `body`, giving (0,1,2), which beats the kit on
 * specificity rather than on load order, so it cannot be undone by a stylesheet
 * being re-ordered. The hero override is prefixed the same way so it still wins
 * inside the dark hero.
 */
body .kcpsr-is-confirm h1,
body .kcpsr-is-confirm h2,
body .kcpsr-is-confirm h3,
body .kcpsr-is-confirm p,
body .kcpsr-is-confirm li,
body .kcpsr-is-confirm dt,
body .kcpsr-is-confirm dd,
body .kcpsr-is-continue h1,
body .kcpsr-is-continue h2,
body .kcpsr-is-continue h3,
body .kcpsr-is-continue p,
body .kcpsr-is-continue li,
body .kcpsr-is-landing h1,
body .kcpsr-is-landing h2,
body .kcpsr-is-landing h3,
body .kcpsr-is-landing p,
body .kcpsr-is-landing li,
body .kcpsr-is-staffpage h1,
body .kcpsr-is-staffpage h2,
body .kcpsr-is-staffpage h3,
body .kcpsr-is-staffpage p,
body .kcpsr-is-staffpage li {
	color: var(--kcpsr-is-ink, #10202f);
}

body .kcpsr-is-confirm .kcpsr-is-step h2,
body .kcpsr-is-continue .kcpsr-is-step h2 {
	color: var(--kcpsr-is-blue, #0d2137);
}

/* The hero and the form intro are dark by design and keep white text. */
body .kcpsr-is-hero h1,
body .kcpsr-is-hero h2,
body .kcpsr-is-hero h3,
body .kcpsr-is-hero p,
body .kcpsr-is-hero li,
body .kcpsr-is-hero figcaption,
body .kcpsr-is-hero .kcpsr-is-eyebrow,
body .kcpsr-is-formintro h2 {
	color: #fff;
}

/* The do-not warnings keep their own red heading. */
body .kcpsr-is-confirm .kcpsr-is-dontheading {
	color: #a3241a;
}


/* ==========================================================================
   DARK THERMAL SURFACE  (2026-07-29)
   ==========================================================================
   These pages were built as a light card on the site's black body. Once the
   Command Center Form Design System landed, the Gravity Form inside them
   became a dark thermal panel, and a dark form sitting in a white card is
   worse than either treatment on its own.

   Rather than rewrite the file, this block flips the card's own tokens and the
   handful of surfaces that were written as literal light hex values. It is
   last in the file deliberately: every rule below either redefines a custom
   property or matches at equal specificity and wins on order. Deleting this
   one block restores the light card exactly.
   ========================================================================== */

.kcpsr-is-confirm,
.kcpsr-is-continue,
.kcpsr-is-landing,
.kcpsr-is-staffpage {
	--kcpsr-is-orange: #ff7a00;
	--kcpsr-is-orange-dark: #ffb894;   /* link colour on a dark surface */
	--kcpsr-is-ink: #ffffff;
	--kcpsr-is-muted: #a6a6a6;
	--kcpsr-is-line: rgba(255, 255, 255, .12);
	--kcpsr-is-bg: #0a0a0a;

	border: 1px solid rgba(255, 122, 0, .32);
	box-shadow: 0 0 30px rgba(255, 122, 0, .10);
}

/* Section headings inside a step were navy, which disappears on black. */
body .kcpsr-is-confirm .kcpsr-is-step h2,
body .kcpsr-is-continue .kcpsr-is-step h2 {
	color: #ffb300;
}

/* Literal light surfaces, restated against the dark card. */
.kcpsr-is-copyblock textarea {
	background: rgba(255, 255, 255, .05);
	color: #ffffff;
	border-color: rgba(255, 255, 255, .22);
}

.kcpsr-is-join,
.kcpsr-is-known,
.kcpsr-is-formprivacy,
.kcpsr-is-inlineconfirm,
.kcpsr-is-checklist li {
	background: rgba(255, 255, 255, .045);
	border-color: rgba(255, 255, 255, .12);
	color: #e6e6e6;
}

.kcpsr-is-placeholder {
	background: rgba(255, 122, 0, .10);
	border-color: rgba(255, 122, 0, .45);
	color: #f0f0f0;
}

.kcpsr-is-donts li {
	background: rgba(255, 45, 45, .10);
	border-color: rgba(255, 90, 90, .45);
	color: #ffdede;
}

/* Secondary buttons were white-on-white-card; on black they become outlines. */
.kcpsr-is-btn {
	background: rgba(255, 255, 255, .06);
	color: #ffffff;
	border-color: rgba(255, 255, 255, .32);
}
.kcpsr-is-btn:hover,
.kcpsr-is-btn:focus-visible {
	background: rgba(255, 122, 0, .18);
	border-color: #ff7a00;
	color: #ffffff;
}

/* Read-only recap of what is already on file, matched to the form design
   system's own .kcf-known panel. */
.kcpsr-is-known dt { color: #a6a6a6; }
.kcpsr-is-known dd { color: #ffffff; }

/* The theme prints its own entry title above the card, which duplicates the
   card's H1 word for word and sits outside the container, hard against the
   left edge of the viewport. Every page this plugin owns supplies its own
   heading, so the theme's is redundant on all of them. */
body.kcpsr-is-page .entry-header .entry-title,
body.kcpsr-is-page header.entry-header > .title-post {
	display: none;
}

/* Small-screen card padding. At 320px the card's 28px side padding plus the
   theme's own gutters left the form 215px wide inside a 303px viewport --
   every field was legible but the whole panel read as a narrow column. */
@media (max-width: 480px) {
	.kcpsr-is-confirm,
	.kcpsr-is-continue,
	.kcpsr-is-landing,
	.kcpsr-is-staffpage {
		padding: 16px 12px 22px;
		border-radius: 12px;
	}
}