/*
 * Castro Defense — lead funnels ([cd_funnel], includes/funnels.php).
 * Loaded only on pages that contain the shortcode, after the theme stylesheet.
 * The form panel is a bone card with a clipped top-right corner (like .cd-cell); options are
 * large tiles; red is only a small indicator. Without JavaScript every step is shown in order.
 */

.cd-funnel {
	--cdf-bone: var(--cd-bone, #efeee9);
	--cdf-ink: var(--cd-bone-ink, #121212);
	--cdf-muted: var(--cd-bone-muted, #5d5d58);
	--cdf-line: var(--cd-bone-line, #cfcdc5);
	--cdf-red: var(--cd-accent, #e0262e);
	--cdf-tile: #f7f6f2;
	--cdf-field: #fbfaf7;
	--cdf-guide: #e4e2da;
	--cdf-mono: var(--cd-mono, ui-monospace, Menlo, Consolas, monospace);
	--cdf-sans: var(--cd-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	--cdf-display: var(--cd-display, "Helvetica Neue", Arial, sans-serif);
	margin: 2.5em 0;
	max-width: 780px;
	scroll-margin-top: 24px;
}
.cd-funnel,
.cd-funnel *,
.cd-funnel *::before,
.cd-funnel *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------ panel */
.cd-funnel .cd-funnel__panel {
	position: relative;
	padding: 22px 18px 20px;
	background: var(--cdf-bone);
	color: var(--cdf-ink);
	font-family: var(--cdf-sans);
	font-size: 15.5px;
	line-height: 1.55;
	clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
/* The theme colors text for a black page; inside the bone card everything is ink.
   :where() keeps this at one class so the component rules below can still set muted text. */
.cd-funnel :where(p, li, label, legend, strong) { color: inherit; }
.cd-funnel .cd-funnel__panel a { color: var(--cdf-ink); text-decoration: underline; text-decoration-color: var(--cdf-ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.cd-funnel .cd-funnel__panel a:hover { color: #000; text-decoration-thickness: 2px; }
.cd-funnel .cd-funnel__panel :focus-visible { outline: 2px solid var(--cdf-ink); outline-offset: 2px; }
.cd-funnel .cd-funnel__panel mark.cd-pending { color: #7a4f00; border-bottom-color: #7a4f00; }
.cd-funnel [hidden] { display: none !important; }

/* ------------------------------------------------------------------- head */
.cd-funnel .cd-funnel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	margin: 0 0 16px;
}
.cd-funnel .cd-funnel__kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-family: var(--cdf-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cdf-ink);
}
.cd-funnel .cd-funnel__kicker::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--cdf-red); }
.cd-funnel .cd-funnel__progress { display: none; flex: 1 1 100%; }
.cd-fjs .cd-funnel .cd-funnel__progress,
.cd-funnel.is-enhanced .cd-funnel__progress { display: grid; gap: 7px; }
.cd-funnel .cd-funnel__count {
	margin: 0;
	font-family: var(--cdf-mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cdf-muted);
}
.cd-funnel .cd-funnel__bar { display: block; height: 2px; background: var(--cdf-line); overflow: hidden; }
.cd-funnel .cd-funnel__fill { display: block; height: 100%; background: var(--cdf-ink); transition: width 0.3s ease; }
.cd-funnel .cd-funnel__note {
	margin: 0 0 24px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--cdf-line);
	font-size: 13.5px;
	color: var(--cdf-muted);
}
.cd-funnel .cd-funnel__msg {
	display: flex;
	gap: 10px;
	align-items: baseline;
	margin: 0 0 22px;
	padding: 12px 16px;
	border: 1px solid var(--cdf-ink);
	font-size: 14px;
}
.cd-funnel .cd-funnel__msg::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--cdf-red); }

/* ------------------------------------------------------------------ steps */
.cd-funnel .cd-funnel__form { margin: 0; }
.cd-funnel .cd-funnel__step {
	min-width: 0;
	margin: 0 0 28px;
	padding: 0 0 26px;
	border: 0;
	border-bottom: 1px solid var(--cdf-line);
}
.cd-funnel .cd-funnel__legend { display: flex; align-items: baseline; gap: 12px; width: 100%; margin: 0; padding: 0; border: 0; }
.cd-funnel .cd-funnel__num { flex: none; font-family: var(--cdf-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--cdf-muted); }
.cd-funnel .cd-funnel__q {
	margin: 0;
	font-family: var(--cdf-display);
	font-size: clamp(1.35rem, 1.12rem + 1.1vw, 1.9rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--cdf-ink);
}
.cd-funnel .cd-funnel__q:focus { outline: none; }
.cd-funnel .cd-funnel__help,
.cd-funnel .cd-funnel__skip { margin: 8px 0 0; font-size: 14px; color: var(--cdf-muted); }
.cd-funnel .cd-funnel__skip { font-family: var(--cdf-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }

/* Enhanced: one step at a time. Before the script runs (html.cd-fjs), only the first shows. */
.cd-funnel.is-enhanced .cd-funnel__step { margin: 0; padding: 0; border: 0; }
.cd-funnel.is-enhanced .cd-funnel__step:not(.is-active) { display: none; }
.cd-funnel.is-enhanced .cd-funnel__step.is-active { animation: cd-funnel-in 0.28s ease both; }
.cd-funnel.is-enhanced .cd-funnel__num,
.cd-funnel.is-enhanced .cd-funnel__skip,
.cd-funnel.is-enhanced .cd-funnel__guide-if { display: none; }
.cd-fjs .cd-funnel:not(.is-enhanced) .cd-funnel__step:not(:first-of-type),
.cd-fjs .cd-funnel:not(.is-enhanced) [data-show-if] { display: none; }
.cd-fjs .cd-funnel:not(.is-enhanced) .cd-funnel__actions { visibility: hidden; }
.cd-funnel.is-enhanced [data-show-if]:not(.is-visible) { display: none; }

/* ---------------------------------------------------------------- options */
.cd-funnel .cd-funnel__options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 18px 0 0; }
.cd-funnel .cd-funnel__option { position: relative; display: block; margin: 0; cursor: pointer; }
.cd-funnel .cd-funnel__input {
	position: absolute;
	top: 50%;
	left: 16px;
	width: 14px;
	height: 14px;
	margin: -7px 0 0;
	opacity: 0;
	pointer-events: none;
}
.cd-funnel .cd-funnel__tile {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 58px;
	padding: 13px 16px;
	background: var(--cdf-tile);
	border: 1px solid var(--cdf-line);
	color: var(--cdf-ink);
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.cd-funnel .cd-funnel__option:hover .cd-funnel__tile { border-color: var(--cdf-ink); background: #fff; }
.cd-funnel .cd-funnel__input:focus-visible + .cd-funnel__tile { outline: 2px solid var(--cdf-ink); outline-offset: 2px; }
.cd-funnel .cd-funnel__input:checked + .cd-funnel__tile { background: var(--cdf-ink); border-color: var(--cdf-ink); color: var(--cdf-bone); }
.cd-funnel .cd-funnel__mark { flex: none; width: 12px; height: 12px; border: 1px solid currentColor; }
.cd-funnel .cd-funnel__input[type="radio"] + .cd-funnel__tile .cd-funnel__mark { border-radius: 50%; }
.cd-funnel .cd-funnel__input:checked + .cd-funnel__tile .cd-funnel__mark { background: var(--cdf-red); border-color: var(--cdf-red); }
.cd-funnel .cd-funnel__text { display: grid; gap: 3px; min-width: 0; }
.cd-funnel .cd-funnel__label { font-size: 15.5px; font-weight: 500; line-height: 1.3; }
.cd-funnel .cd-funnel__hint { font-family: var(--cdf-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cdf-muted); }
.cd-funnel .cd-funnel__input:checked + .cd-funnel__tile .cd-funnel__hint { color: #a9a7a0; }
.cd-funnel .cd-funnel__options.is-invalid .cd-funnel__tile { border-color: var(--cdf-red); }

/* ----------------------------------------------------------------- guides */
.cd-funnel .cd-funnel__guide {
	margin: 16px 0 0;
	padding: 16px 18px;
	background: var(--cdf-guide);
	border-left: 2px solid var(--cdf-ink);
	font-size: 14.5px;
	line-height: 1.55;
}
.cd-funnel.is-enhanced .cd-funnel__guide.is-visible { animation: cd-funnel-in 0.28s ease both; }
.cd-funnel .cd-funnel__guide--stop { border-left-color: var(--cdf-red); }
.cd-funnel .cd-funnel__guide p { margin: 0 0 8px; }
.cd-funnel .cd-funnel__guide p:last-child { margin-bottom: 0; }
.cd-funnel .cd-funnel__guide ul { margin: 0; padding-left: 1.15em; }
.cd-funnel .cd-funnel__guide li { margin: 0 0 0.35em; }
.cd-funnel .cd-funnel__guide li::marker { color: var(--cdf-ink); }
.cd-funnel .cd-funnel__guide .cd-funnel__guide-if { margin-bottom: 4px; font-family: var(--cdf-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cdf-muted); }
.cd-funnel .cd-funnel__guide .cd-funnel__guide-title { margin-bottom: 6px; font-weight: 600; }
.cd-funnel .cd-funnel__guide .cd-funnel__guide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 14px 0 0; }

/* ----------------------------------------------------------------- fields */
.cd-funnel .cd-funnel__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 18px; margin: 18px 0 0; }
.cd-funnel .cd-funnel__field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.cd-funnel .cd-funnel__extra { margin: 16px 0 0; max-width: 320px; }
.cd-funnel .cd-funnel__field label {
	font-family: var(--cdf-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cdf-ink);
}
.cd-funnel .cd-funnel__req { color: var(--cdf-red); }
.cd-funnel .cd-funnel__control {
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 0.7em 0.85em;
	background: var(--cdf-field);
	border: 1px solid var(--cdf-line);
	border-radius: 0;
	box-shadow: none;
	font: inherit;
	font-size: 16px; /* no zoom on iOS */
	line-height: 1.4;
	color: var(--cdf-ink);
}
.cd-funnel textarea.cd-funnel__control { min-height: 110px; resize: vertical; }
.cd-funnel select.cd-funnel__control {
	appearance: none;
	padding-right: 2.4em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23121212' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9em center;
}
.cd-funnel .cd-funnel__control:focus { outline: none; border-color: var(--cdf-ink); box-shadow: inset 0 0 0 1px var(--cdf-ink); background-color: #fff; }
.cd-funnel .cd-funnel__control[aria-invalid="true"] { border-color: var(--cdf-red); }

.cd-funnel .cd-funnel__notice { margin: 20px 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--cdf-muted); }
.cd-funnel .cd-funnel__consent { margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; }
.cd-funnel .cd-funnel__consent label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.cd-funnel .cd-funnel__consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--cdf-ink); }
.cd-funnel .cd-funnel__consent input[aria-invalid="true"] { outline: 2px solid var(--cdf-red); outline-offset: 2px; }

.cd-funnel .cd-funnel__error { display: flex; gap: 9px; align-items: baseline; margin: 16px 0 0; font-size: 14px; font-weight: 500; color: var(--cdf-ink); }
.cd-funnel .cd-funnel__error::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--cdf-red); }
.cd-funnel .cd-funnel__error:empty { display: none; }

/* ---------------------------------------------------------------- buttons */
.cd-funnel .cd-funnel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 26px 0 0; }
.cd-funnel .cd-funnel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0.95em 1.6em;
	border: 1px solid var(--cdf-ink);
	border-radius: 0;
	background: var(--cdf-ink);
	color: var(--cdf-bone);
	font-family: var(--cdf-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cd-funnel .cd-funnel__panel a.cd-funnel__btn { color: var(--cdf-bone); text-decoration: none; }
.cd-funnel .cd-funnel__btn:hover,
.cd-funnel .cd-funnel__btn:focus,
.cd-funnel .cd-funnel__panel a.cd-funnel__btn:hover { background: #000; border-color: #000; color: #fff; }
.cd-funnel .cd-funnel__btn .cd-icon { width: 18px; height: 18px; }
.cd-funnel .cd-funnel__btn--ghost,
.cd-funnel .cd-funnel__panel a.cd-funnel__btn--ghost { background: transparent; border-color: var(--cdf-line); color: var(--cdf-ink); }
.cd-funnel .cd-funnel__btn--ghost:hover,
.cd-funnel .cd-funnel__btn--ghost:focus,
.cd-funnel .cd-funnel__panel a.cd-funnel__btn--ghost:hover { background: transparent; border-color: var(--cdf-ink); color: var(--cdf-ink); }
.cd-funnel .cd-funnel__btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.cd-funnel .cd-funnel__next,
.cd-funnel .cd-funnel__submit { flex: 1 1 auto; }
.cd-funnel .cd-funnel__next::after { content: "→"; }
.cd-funnel.is-sending .cd-funnel__submit { cursor: progress; }
.cd-funnel .cd-funnel__link { font-family: var(--cdf-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.cd-funnel .cd-funnel__link::after { content: " →"; }

.cd-funnel .cd-funnel__fine {
	margin: 22px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--cdf-line);
	font-size: 12px;
	line-height: 1.5;
	color: var(--cdf-muted);
}

/* ------------------------------------------------------- thank-you panel */
.cd-funnel .cd-funnel__title {
	margin: 18px 0 12px;
	font-family: var(--cdf-display);
	font-size: clamp(1.7rem, 1.15rem + 2.5vw, 2.9rem);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--cdf-ink);
}
.cd-funnel .cd-funnel__lead { margin: 0; color: var(--cdf-muted); }
.cd-funnel .cd-funnel__todo { counter-reset: cdf; list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--cdf-line); }
.cd-funnel .cd-funnel__todo li {
	counter-increment: cdf;
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid var(--cdf-line);
}
.cd-funnel .cd-funnel__todo li::before { content: counter(cdf, decimal-leading-zero); padding-top: 0.3em; font-family: var(--cdf-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--cdf-muted); }
.cd-funnel .cd-funnel__done-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }

/* ---------------------------------------------------------------- larger */
@media (min-width: 640px) {
	.cd-funnel .cd-funnel__panel {
		padding: 36px 40px 30px;
		clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
	}
	.cd-funnel .cd-funnel__progress { flex: 0 1 260px; }
	.cd-funnel .cd-funnel__count { text-align: right; }
	.cd-funnel .cd-funnel__options--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cd-funnel .cd-funnel__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cd-funnel .cd-funnel__field--wide { grid-column: 1 / -1; }
	.cd-funnel .cd-funnel__next,
	.cd-funnel .cd-funnel__submit { flex: 0 0 auto; margin-left: auto; }
}

/* ------------------------------------------------------ motion, contrast */
@keyframes cd-funnel-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.cd-funnel *,
	.cd-funnel *::before,
	.cd-funnel *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
	.cd-funnel .cd-funnel__input:checked + .cd-funnel__tile { outline: 3px solid Highlight; outline-offset: -3px; }
	.cd-funnel .cd-funnel__input:checked + .cd-funnel__tile .cd-funnel__mark { forced-color-adjust: none; background: Highlight; }
}