/**
 * EP Baseline Assessment — bigger.better.me
 *
 * Scoped to .bbm-ep-* class names so nothing here can reach other Fluent Forms
 * on the site. Fonts are loaded by the plugin as a separate stylesheet handle
 * (a <link>), never with @import.
 *
 * Fluent Forms field markup this file targets:
 *   .ff-el-group.bbm-ep-item          field wrapper (container_class)
 *     .ff-el-input--label > label     the statement
 *     .ff-el-input--label .ff-el-help-message  the scale instruction
 *     .ff-el-input--content .ff-el-form-check  one option
 */

.bbm-ep-baseline,
.bbm-ep-result {
	--bbm-maroon: #800000;
	--bbm-maroon-deep: #4d0000;
	--bbm-gold: #d4af37;
	--bbm-paper: #fffcf5;
	--bbm-surface: #ffffff;
	--bbm-ink: #1a0000;
	--bbm-body: #3e2828;
	--bbm-muted: #675858;
	--bbm-border: #eadfd4;
	--bbm-know-bg: #fdf0f5;
	--bbm-know-accent: #e84a8c;

	--bbm-heading: "Playfair Display", Georgia, "Times New Roman", serif;
	--bbm-ui: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── The form ─────────────────────────────────────────────────────────────── */

.bbm-ep-baseline {
	font-family: var(--bbm-ui);
	color: var(--bbm-body);
	background: var(--bbm-paper);
	max-width: 46rem;
	margin: 0 auto;
	padding: 1.25rem;
}

.bbm-ep-baseline .ff-el-group {
	margin-bottom: 1.5rem;
}

/* Section breaks — the pillar headings. */
.bbm-ep-baseline .bbm-ep-section {
	border: 0;
	border-top: 2px solid var(--bbm-gold);
	padding-top: 1.5rem;
	margin-top: 0.5rem;
}

.bbm-ep-baseline .bbm-ep-section h1,
.bbm-ep-baseline .bbm-ep-section h2,
.bbm-ep-baseline .bbm-ep-section h3,
.bbm-ep-baseline .bbm-ep-section .ff-el-section-title {
	font-family: var(--bbm-heading);
	font-weight: 800;
	color: var(--bbm-ink);
	font-size: 1.75rem;
	line-height: 1.2;
	margin: 0 0 0.5rem;
}

.bbm-ep-baseline .bbm-ep-section p {
	color: var(--bbm-muted);
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0;
}

/* Sub-dimension headings. */
.bbm-ep-baseline .bbm-ep-subhead {
	font-family: var(--bbm-ui);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bbm-maroon);
	margin: 2rem 0 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--bbm-border);
}

/* ── The two scales ───────────────────────────────────────────────────────── */

.bbm-ep-legend {
	background: var(--bbm-surface);
	border: 1px solid var(--bbm-border);
	border-radius: 10px;
	padding: 1rem 1.1rem;
	margin-bottom: 1.5rem;
}

.bbm-ep-legend-title {
	font-weight: 600;
	color: var(--bbm-ink);
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
}

.bbm-ep-legend-row {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--bbm-muted);
}

.bbm-ep-legend-row:last-child {
	margin-bottom: 0;
}

.bbm-ep-pill,
.bbm-ep-item > .ff-el-input--label::before {
	display: inline-block;
	font-family: var(--bbm-ui);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	padding: 0.3rem 0.5rem;
	border-radius: 3px;
	white-space: nowrap;
}

.bbm-ep-pill-freq {
	color: var(--bbm-muted);
	background: #f2ece6;
}

.bbm-ep-pill-know {
	color: var(--bbm-know-accent);
	background: var(--bbm-know-bg);
}

/* ── Items ────────────────────────────────────────────────────────────────── */

.bbm-ep-baseline .bbm-ep-item {
	background: var(--bbm-surface);
	border: 1px solid var(--bbm-border);
	border-left: 3px solid var(--bbm-border);
	border-radius: 8px;
	padding: 1rem 1.1rem 0.75rem;
}

.bbm-ep-baseline .bbm-ep-item > .ff-el-input--label::before {
	content: "FREQUENCY";
	color: var(--bbm-muted);
	background: #f2ece6;
	margin-bottom: 0.6rem;
}

.bbm-ep-baseline .bbm-ep-know {
	background: var(--bbm-know-bg);
	border-color: #f3d9e4;
	border-left: 3px solid var(--bbm-know-accent);
}

.bbm-ep-baseline .bbm-ep-know > .ff-el-input--label::before {
	content: "KNOW-HOW";
	color: var(--bbm-know-accent);
	background: #ffffff;
}

.bbm-ep-baseline .bbm-ep-item > .ff-el-input--label label {
	display: block;
	font-family: var(--bbm-ui);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--bbm-ink);
	margin: 0;
}

.bbm-ep-baseline .bbm-ep-item .ff-el-help-message,
.bbm-ep-baseline .bbm-ep-item .ff-el-input--label + .ff-el-help-message {
	font-size: 0.75rem;
	font-style: italic;
	color: var(--bbm-muted);
	margin-top: 0.3rem;
}

/* Options. Stacked on a phone, in a row from 40rem up. Every target is at
   least 44px tall in both layouts. */
.bbm-ep-baseline .bbm-ep-item .ff-el-input--content {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-top: 0.85rem;
}

.bbm-ep-baseline .bbm-ep-item .ff-el-form-check {
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
}

.bbm-ep-baseline .bbm-ep-item .ff-el-form-check-label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--bbm-border);
	border-radius: 6px;
	background: var(--bbm-surface);
	font-size: 0.9rem;
	line-height: 1.3;
	color: var(--bbm-body);
	cursor: pointer;
	margin: 0;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.bbm-ep-baseline .bbm-ep-item .ff-el-form-check-label:hover {
	border-color: var(--bbm-maroon);
}

.bbm-ep-baseline .bbm-ep-item input[type="radio"] {
	width: 20px;
	height: 20px;
	min-width: 20px;
	accent-color: var(--bbm-maroon);
	margin: 0;
}

.bbm-ep-baseline .bbm-ep-item .ff_item_selected .ff-el-form-check-label {
	border-color: var(--bbm-maroon);
	background: #fbf4f4;
	font-weight: 600;
	color: var(--bbm-maroon);
}

.bbm-ep-baseline .bbm-ep-know input[type="radio"] {
	accent-color: var(--bbm-know-accent);
}

.bbm-ep-baseline .bbm-ep-know .ff-el-form-check-label:hover {
	border-color: var(--bbm-know-accent);
}

.bbm-ep-baseline .bbm-ep-know .ff_item_selected .ff-el-form-check-label {
	border-color: var(--bbm-know-accent);
	background: #ffffff;
	color: var(--bbm-know-accent);
}

@media (min-width: 40rem) {
	.bbm-ep-baseline .bbm-ep-item .ff-el-input--content {
		flex-direction: row;
		gap: 0.5rem;
	}

	.bbm-ep-baseline .bbm-ep-item .ff-el-form-check-label {
		flex-direction: column;
		justify-content: center;
		gap: 0.35rem;
		text-align: center;
		min-height: 62px;
		padding: 0.5rem 0.35rem;
		font-size: 0.8rem;
	}
}

/* ── Text fields, dropdown, buttons ───────────────────────────────────────── */

.bbm-ep-baseline .ff-el-input--label label {
	font-family: var(--bbm-ui);
	font-weight: 600;
	color: var(--bbm-ink);
	font-size: 0.95rem;
	line-height: 1.5;
}

.bbm-ep-baseline .ff-el-form-control {
	font-family: var(--bbm-ui);
	font-size: 1rem;
	min-height: 48px;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--bbm-border);
	border-radius: 6px;
	background: var(--bbm-surface);
	color: var(--bbm-body);
	width: 100%;
}

.bbm-ep-baseline textarea.ff-el-form-control {
	min-height: 96px;
	line-height: 1.5;
	resize: vertical;
}

.bbm-ep-baseline .ff-el-form-control:focus {
	border-color: var(--bbm-maroon);
	outline: 2px solid rgba(128, 0, 0, 0.15);
	outline-offset: 1px;
}

.bbm-ep-baseline .ff-btn,
.bbm-ep-baseline .ff-btn-submit,
.bbm-ep-baseline .ff-btn-next,
.bbm-ep-baseline .ff-btn-prev {
	font-family: var(--bbm-ui);
	font-weight: 600;
	font-size: 1rem;
	min-height: 48px;
	padding: 0.7rem 1.6rem;
	border-radius: 6px;
	border: 1px solid transparent;
	cursor: pointer;
}

.bbm-ep-baseline .ff-btn-next,
.bbm-ep-baseline .ff-btn-submit {
	background: var(--bbm-maroon);
	color: var(--bbm-paper);
}

.bbm-ep-baseline .ff-btn-next:hover,
.bbm-ep-baseline .ff-btn-submit:hover {
	background: var(--bbm-maroon-deep);
}

.bbm-ep-baseline .ff-btn-prev {
	background: transparent;
	color: var(--bbm-maroon);
	border-color: var(--bbm-border);
}

/* Progress bar. */
.bbm-ep-baseline .ff-el-progress {
	background: #f0e7dc;
	border-radius: 999px;
	height: 8px;
	overflow: hidden;
}

.bbm-ep-baseline .ff-el-progress-bar {
	background: linear-gradient(90deg, var(--bbm-maroon) 0%, var(--bbm-gold) 100%);
	height: 100%;
}

.bbm-ep-baseline .ff-el-progress-status,
.bbm-ep-baseline .ff-step-titles li {
	font-family: var(--bbm-ui);
	font-size: 0.8rem;
	color: var(--bbm-muted);
}

.bbm-ep-baseline .ff-step-titles li.active {
	color: var(--bbm-maroon);
	font-weight: 600;
}

/* ── The result ───────────────────────────────────────────────────────────── */

.bbm-ep-result {
	font-family: var(--bbm-ui);
	color: var(--bbm-body);
	background: var(--bbm-paper);
	max-width: 42rem;
	margin: 0 auto;
	padding: 1.5rem;
}

.bbm-ep-result-head {
	text-align: center;
	background: var(--bbm-surface);
	border: 1px solid var(--bbm-border);
	border-radius: 12px;
	padding: 2rem 1.25rem 1.75rem;
}

.bbm-ep-result-eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bbm-muted);
	margin: 0 0 0.75rem;
}

.bbm-ep-score {
	font-family: var(--bbm-heading);
	font-weight: 800;
	font-size: clamp(3.5rem, 16vw, 5.5rem);
	line-height: 1;
	color: var(--bbm-maroon);
	margin: 0;
}

.bbm-ep-score-caption {
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bbm-muted);
	margin: 0.4rem 0 1rem;
}

.bbm-ep-tier {
	display: inline-block;
	font-family: var(--bbm-heading);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--bbm-maroon-deep);
	background: rgba(212, 175, 55, 0.18);
	border: 1px solid var(--bbm-gold);
	border-radius: 999px;
	padding: 0.4rem 1.4rem;
	margin: 0;
}

.bbm-ep-block {
	margin-top: 2rem;
}

.bbm-ep-h3 {
	font-family: var(--bbm-heading);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--bbm-ink);
	margin: 0 0 1rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--bbm-gold);
}

.bbm-ep-pillar {
	margin-bottom: 1.25rem;
}

.bbm-ep-pillar-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 0.45rem;
}

.bbm-ep-pillar-name {
	font-weight: 600;
	color: var(--bbm-ink);
	font-size: 1rem;
}

.bbm-ep-pillar-weight {
	display: block;
	font-weight: 400;
	font-size: 0.75rem;
	color: var(--bbm-muted);
}

.bbm-ep-pillar-figure {
	text-align: right;
	white-space: nowrap;
}

.bbm-ep-pillar-pct {
	font-family: var(--bbm-heading);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--bbm-maroon);
}

.bbm-ep-pillar-tier {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bbm-muted);
}

.bbm-ep-bar {
	height: 10px;
	background: #f0e7dc;
	border-radius: 999px;
	overflow: hidden;
}

.bbm-ep-bar-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--bbm-maroon) 0%, var(--bbm-gold) 100%);
}

.bbm-ep-note {
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--bbm-muted);
	margin: 0 0 1rem;
}

.bbm-ep-gaps {
	list-style: none;
	counter-reset: bbm-gap;
	margin: 0;
	padding: 0;
}

.bbm-ep-gap {
	counter-increment: bbm-gap;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: var(--bbm-know-bg);
	border-left: 3px solid var(--bbm-know-accent);
	border-radius: 6px;
	padding: 0.8rem 1rem;
	margin-bottom: 0.5rem;
}

.bbm-ep-gap::before {
	content: counter(bbm-gap);
	font-family: var(--bbm-heading);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--bbm-know-accent);
	min-width: 1.2rem;
}

.bbm-ep-gap-label {
	flex: 1;
	font-size: 0.95rem;
	line-height: 1.4;
	color: var(--bbm-ink);
}

.bbm-ep-gap-score {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--bbm-know-accent);
	white-space: nowrap;
}

.bbm-ep-closing {
	margin: 2rem 0 0;
	padding: 1.25rem;
	background: var(--bbm-surface);
	border: 1px solid var(--bbm-border);
	border-radius: 10px;
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--bbm-body);
}

.bbm-ep-result-empty p {
	text-align: center;
	color: var(--bbm-muted);
}