/* DEPB.Platform: brand layer for Paid Memberships Pro pages.
   Colours come from PMPro's Design settings (--pmpro--color--*) and the
   Kadence palette (--global-palette*), so changing either restyles this. */

:root {
	/* Brand, measured from the DEPB shield logo: navy #011d39, gold #d3a341. */
	--depb-navy: #011d39;
	--depb-navy-2: #0a2f5c;
	--depb-gold: #d3a341;
	--depb-gold-hi: #daac4c;
	--depb-gold-deep: #ad7c1c;
	--depb-gold-tint: #fbf5e6;
	--depb-blue: var(--depb-navy-2);
	--depb-ink: var(--global-palette9, #1a202c);
	--depb-muted: var(--global-palette7, #2d3748);
	--depb-soft: var(--global-palette4, #f7fafc);
	--depb-line: var(--global-palette5, #edf2f7);
	--depb-radius: 14px;
}

/* ── Page header ─────────────────────────────────────────── */
.depb-hero {
	background: linear-gradient(135deg, var(--depb-navy) 0%, var(--depb-navy-2) 100%);
	color: #fff;
	border-radius: var(--depb-radius);
	border-top: 4px solid var(--depb-gold);
	padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem);
	margin-bottom: 2rem;
	box-shadow: 0 18px 40px -24px rgba(0, 49, 116, .55);
}
.depb-hero h1 { color: #fff; margin: .25rem 0 .5rem; font-size: clamp(1.75rem, 3.6vw, 2.6rem); line-height: 1.2; }
.depb-hero .depb-eyebrow {
	display: inline-block; margin: 0; padding: .25rem .75rem; border-radius: 999px;
	background: rgba(211, 163, 65, .16); color: var(--depb-gold-hi); border: 1px solid rgba(211, 163, 65, .45);
	font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.depb-hero .depb-hero-lede { color: rgba(255, 255, 255, .88); max-width: 46rem; font-size: 1.05rem; }

.depb-steps {
	list-style: none; margin: 1.75rem 0 0; padding: 0;
	display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.depb-steps li {
	display: flex; gap: .85rem; align-items: flex-start; margin: 0;
	background: rgba(255, 255, 255, .06); border: 1px solid rgba(211, 163, 65, .35);
	border-radius: 12px; padding: 1rem;
}
.depb-step-num {
	flex: 0 0 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
	background: var(--depb-gold); color: var(--depb-navy); font-weight: 700;
}
.depb-step-body strong { display: block; color: #fff; }
.depb-step-body span { display: block; color: rgba(255, 255, 255, .8); font-size: .92rem; line-height: 1.45; }

/* ── Level description (shown on levels + checkout) ──────── */
.depb-level-lede { color: var(--depb-muted); }
.depb-checklist { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .55rem; }
.depb-checklist li { position: relative; padding-left: 1.9rem; margin: 0; line-height: 1.5; }
.depb-checklist li::before {
	content: ""; position: absolute; left: 0; top: .2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%;
	background: var(--depb-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23011d39'%3E%3Cpath d='M8.2 13.6 4.6 10l-1.2 1.2 4.8 4.8 9-9-1.2-1.2z'/%3E%3C/svg%3E") center / .85rem no-repeat;
}
.depb-level-note {
	margin-top: 1rem; padding: .75rem 1rem; border-radius: 10px;
	background: var(--depb-soft); border: 1px solid var(--depb-line); color: var(--depb-muted); font-size: .95rem;
}

.depb-eligibility,
.pmpro .pmpro_level_description_text p.depb-eligibility,
.pmpro_level_description_text .depb-eligibility {
	margin: .75rem 0; padding: 10px 14px; border-radius: 10px;
	background: var(--depb-gold-tint); border: 1px solid var(--depb-gold); border-left-width: 4px; color: var(--depb-navy);
}

/* ── PMPro cards: softer, branded ────────────────────────── */
.pmpro .pmpro_card {
	border-radius: var(--depb-radius);
	border-color: var(--depb-line);
	box-shadow: 0 10px 30px -22px rgba(26, 32, 44, .45);
}
.pmpro .pmpro_card { border-top: 3px solid var(--depb-gold); }
.pmpro .pmpro_card_title { color: var(--depb-navy); letter-spacing: -.01em; }
.pmpro .pmpro_btn-submit-checkout, .pmpro .pmpro_btn-select { box-shadow: inset 0 -3px 0 var(--depb-gold); }
.pmpro .pmpro_level_cost_text,
.pmpro .pmpro_level_cost_text strong { color: var(--depb-ink); }
.pmpro .pmpro_btn-submit-checkout,
.pmpro .pmpro_btn-select { font-weight: 600; letter-spacing: .01em; }

/* ── Trust line ──────────────────────────────────────────
   Self-contained (own navy background, light text) so it reads on dark
   and light page backgrounds alike. */
.depb-trust {
	display: flex; gap: .55rem; align-items: center; justify-content: center; text-align: center;
	width: fit-content; max-width: 100%; margin: 1.5rem auto 0; padding: .65rem 1.1rem; border-radius: 999px;
	background: var(--depb-navy); color: rgba(255, 255, 255, .92); font-size: .9rem; line-height: 1.4;
}
.depb-trust { border: 1px solid rgba(211, 163, 65, .45); }
.depb-trust a { color: var(--depb-gold-hi); text-decoration: underline; text-underline-offset: 2px; }
.depb-trust a:hover, .depb-trust a:focus { color: #fff; }
.depb-trust::before {
	content: ""; flex: 0 0 1rem; height: 1rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d3a341'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H5v14h14V9h-2V6a5 5 0 0 0-5-5zm-3 8V6a3 3 0 0 1 6 0v3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* "For yourself" ⇄ "for a colleague" cross-link on checkout */
.pmpro .depb-cross-link { margin: .75rem 0 0; font-size: .95rem; color: #3d4a5c; }
.pmpro .depb-cross-link a { font-weight: 600; color: #011d39; text-decoration: underline; text-underline-offset: 3px; }

/* The terms checkbox sits on the dark page background (outside the white cards): keep its text readable. */
#pmpro_tos_fields .pmpro_form_label { color: #e8edf3; }
#pmpro_tos_fields a { color: var(--depb-gold); }

/* Fields inside the white checkout/account cards: dark text on white (the theme's
   dark-mode input colours otherwise leak in, e.g. white-on-white "Bar number"). */
.pmpro .pmpro_card input[type=text], .pmpro .pmpro_card input[type=email], .pmpro .pmpro_card input[type=password],
.pmpro .pmpro_card input[type=url], .pmpro .pmpro_card input[type=tel], .pmpro .pmpro_card input[type=number],
.pmpro .pmpro_card select, .pmpro .pmpro_card textarea,
.pmpro .pmpro_form_input-text, .pmpro .pmpro_form_input-email, .pmpro .pmpro_form_input-password, .pmpro .pmpro_form_input-select, .pmpro .pmpro_form_input-textarea {
	background: #fff; color: #1a202c; border: 1px solid #c8d1dc;
}
.pmpro .pmpro_card input::placeholder, .pmpro .pmpro_card textarea::placeholder { color: #8a96a3; }
.pmpro .pmpro_card input:focus, .pmpro .pmpro_card select:focus, .pmpro .pmpro_card textarea:focus { background: #fff; color: #1a202c; border-color: var(--depb-gold); outline: 2px solid rgba(211, 163, 65, .35); outline-offset: 0; }

/* Sponsor-only accounts: no "My Certification" page heading (0.10.2). */
body.depb-sponsor-account .entry-header.page-title { display: none; }

/* /designation/: what the joining fee covers and member benefits (0.11.4). */
.depb-included { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin: 2rem 0; }
@media (min-width: 760px) { .depb-included { grid-template-columns: 1fr 1fr; } }
.depb-included-card { color: var(--depb-ink); background: #fff; border-radius: var(--depb-radius); border-top: 4px solid var(--depb-gold); padding: 1.6rem 1.75rem; box-shadow: 0 12px 30px -22px rgba(0, 49, 116, .45); }
.depb-included-card h2 { margin: .15rem 0 .9rem; font-size: 1.35rem; color: var(--depb-navy); }
.depb-included-kicker { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--depb-gold-deep); }
.depb-included .depb-checklist { margin: 0; }
.depb-included .depb-checklist li, .depb-included .depb-checklist li strong { color: var(--depb-ink); }
.depb-included-note { margin: 1rem 0 0; padding: .75rem 1rem; border-radius: 10px; background: var(--depb-gold-tint); color: var(--depb-ink); }
.depb-included-using { grid-column: 1 / -1; margin: 0; text-align: center; color: rgba(255, 255, 255, .85); }
.depb-included-using a { color: var(--depb-gold-hi); }