/**
 * Sonoran Tools — Decision Tree Frontend Styles
 *
 * Default styles shipped with the plugin.
 * Theme can override via SCSS (_components/decision-tree.scss).
 */

/* ─── Variables ───────────────────────────────────────────────────────── */

:root {
	--sdt-green: #485E48;
	--sdt-dark-green: #314A30;
	--sdt-gold: #9E8359;
	--sdt-yellow: #EDB95A;
	--sdt-yellow-hover: #FFD17C;
	--sdt-light-grey: #F7F7F7;
	--sdt-dark-grey: #4D4D4D;
	--sdt-white: #ffffff;
	--sdt-border: #d8d8d8;
	--sdt-font: mundial, arial, sans-serif;
	--sdt-fade-duration: 250ms;
}

/* ─── Container — full width within parent ────────────────────────────── */

.sonoran-dt {
	width: 100%;
	margin: 1rem 0;
	font-family: var(--sdt-font);
	scroll-margin-top: 150px;
}

/* ─── Card ────────────────────────────────────────────────────────────── */

.sonoran-dt__card {
	border: 2px solid var(--sdt-green);
	border-radius: 4px;
	padding: 2.5rem 3rem 2rem;
	background: var(--sdt-white);
	position: relative;
}

/* ─── Label (quiz title) ──────────────────────────────────────────────── */

.sonoran-dt__label {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	font-size: 16px;
	font-weight: 700;
	color: var(--sdt-green);
	margin-bottom: 1.25rem;
}

/* ─── Back button ─────────────────────────────────────────────────────── */

.sonoran-dt__back {
	margin-bottom: 1rem;
}

.sonoran-dt__back-btn {
	background: none;
	border: none;
	color: var(--sdt-green);
	font-family: var(--sdt-font);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color 200ms ease;
}

.sonoran-dt__back-btn:hover {
	color: var(--sdt-dark-green);
}

/* ─── Content area (fade transitions) ─────────────────────────────────── */

.sonoran-dt__content {
	opacity: 1;
	transition: opacity var(--sdt-fade-duration) ease;
}

.sonoran-dt__content--leaving {
	opacity: 0;
}

.sonoran-dt__content--entering {
	opacity: 1;
}

/* ─── Question ────────────────────────────────────────────────────────── */

.sonoran-dt__question {
	text-align: center;
	padding: 1rem 0;
}

.sonoran-dt__question-text {
	font-family: var(--sdt-font);
	font-size: 24px;
	line-height: 1.5;
	font-weight: 400;
	color: var(--sdt-dark-grey);
	margin: 0 auto 2rem;
	max-width: 720px;
}

/* ─── Info trigger (yellow i icon) ────────────────────────────────────── */

.sonoran-dt__info-trigger {
	background: var(--sdt-yellow);
	border: none;
	color: var(--sdt-green);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	font-size: 13px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	margin-left: 4px;
	transition: background-color 200ms ease;
	line-height: 1;
	padding: 0;
}

.sonoran-dt__info-trigger:hover {
	background: var(--sdt-yellow-hover);
}

/* ─── Answers ─────────────────────────────────────────────────────────── */

.sonoran-dt__answers {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	max-width: 100%;
	margin: 0 auto;
}

.sonoran-dt__answer {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 0;
	min-width: 140px;
	padding: 18px 20px;
	border: 1px solid var(--sdt-border);
	border-radius: 4px;
	background: var(--sdt-light-grey);
	font-family: var(--sdt-font);
	font-size: 20px;
	font-weight: 400;
	color: var(--sdt-dark-grey);
	cursor: pointer;
	text-align: left;
	transition: border-color 200ms ease, background-color 200ms ease;
}

.sonoran-dt__answer:hover {
	border-color: var(--sdt-green);
	background: var(--sdt-light-grey);
}

.sonoran-dt__answer--selected {
	border-color: var(--sdt-green);
	background: var(--sdt-light-grey);
}

/* Checkbox square */
.sonoran-dt__answer-radio {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border: 2px solid var(--sdt-border);
	border-radius: 3px;
	position: relative;
	transition: border-color 200ms ease;
}

.sonoran-dt__answer:hover .sonoran-dt__answer-radio,
.sonoran-dt__answer--selected .sonoran-dt__answer-radio {
	border-color: var(--sdt-green);
}

.sonoran-dt__answer--selected .sonoran-dt__answer-radio::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background: var(--sdt-green);
}

.sonoran-dt__answer-label {
	flex: 1;
}

/* ─── Result ──────────────────────────────────────────────────────────── */

/* Banner */
.sonoran-dt__result-banner {
	background: var(--sdt-green);
	color: var(--sdt-white);
	padding: 2rem 3rem 1.5rem;
	margin: -2.5rem -3rem 0;
	border-radius: 4px 4px 0 0;
	text-align: center;
}

.sonoran-dt__result-headline {
	text-transform: uppercase;
	letter-spacing: 2.5px;
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 0.5rem;
	color: var(--sdt-yellow);
	line-height: 1.4;
}

.sonoran-dt__result-subheadline {
	font-family: var(--sdt-font);
	font-size: 28px;
	line-height: 1.3;
	font-weight: 600;
	margin: 0;
	color: var(--sdt-white);
}

/* Content area (body + career paths) */
.sonoran-dt__result-content {
	padding: 2rem 0;
	display: flex;
	flex-wrap: wrap;
	gap: 3rem;
}

.sonoran-dt__result-body {
	flex: 1 1 100%;
}

.sonoran-dt__result-body--has-careers {
	flex: 1 1 45%;
	min-width: 280px;
}

.sonoran-dt__result-body p {
	font-family: var(--sdt-font);
	font-size: 18px;
	line-height: 1.7;
	color: var(--sdt-dark-grey);
	margin: 0 0 1rem;
}

/* Career paths */
.sonoran-dt__result-careers {
	flex: 1 1 45%;
	min-width: 200px;
}

.sonoran-dt__result-careers-heading {
	font-family: var(--sdt-font);
	font-size: 18px;
	font-weight: 600;
	color: var(--sdt-dark-grey);
	margin: 0 0 1rem;
}

.sonoran-dt__result-careers-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sonoran-dt__result-careers-list li {
	font-family: var(--sdt-font);
	font-size: 15px;
	line-height: 1.8;
	color: var(--sdt-dark-grey);
	margin-bottom: 2px;
	padding-left: 1.25em;
	position: relative;
}

.sonoran-dt__result-careers-list li::before {
	content: '\2022';
	color: var(--sdt-green);
	font-weight: bold;
	position: absolute;
	left: 0;
}

/* CTA buttons */
.sonoran-dt__result-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	padding: 0.5rem 0 1.5rem;
}

.sonoran-dt__result-ctas .sonoran-dt__cta {
	flex: 1 1 0;
	min-width: 200px;
}

.sonoran-dt__cta {
	display: inline-block;
	font-family: var(--sdt-font);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	padding: 20px 36px;
	text-align: center;
	text-decoration: none;
	border-radius: 0;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
	white-space: normal;
	line-height: 1.4;
}

.sonoran-dt__cta--filled {
	background: var(--sdt-yellow);
	border-color: var(--sdt-yellow);
	color: var(--sdt-green);
}

.sonoran-dt__cta--filled:hover {
	background: var(--sdt-yellow-hover);
	border-color: var(--sdt-yellow-hover);
	color: var(--sdt-green);
	text-decoration: none;
}

.sonoran-dt__cta--outline {
	background: transparent;
	border-color: var(--sdt-green);
	color: var(--sdt-green);
}

.sonoran-dt__cta--outline:hover {
	background: var(--sdt-green);
	color: var(--sdt-white);
	text-decoration: none;
}

/* Start Over */
.sonoran-dt__start-over {
	text-align: center;
	padding: 1rem 0 0.5rem;
}

.sonoran-dt__start-over-btn {
	background: none;
	border: none;
	color: var(--sdt-green);
	font-family: var(--sdt-font);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
	transition: color 200ms ease;
}

.sonoran-dt__start-over-btn:hover {
	color: var(--sdt-dark-green);
}

/* Footnote */
.sonoran-dt__result-footnote {
	font-size: 14px;
	line-height: 1.6;
	color: var(--sdt-dark-grey);
}

.sonoran-dt__result-footnote a {
	color: var(--sdt-green);
	font-weight: 600;
	text-decoration: underline;
}

.sonoran-dt__result-footnote a:hover {
	text-decoration: none;
}

/* Result footer bar (footnote) */
.sonoran-dt__result-footer {
	text-align: center;
	padding: 1.25rem 3rem;
	background: var(--sdt-light-grey);
	border-top: 1px solid var(--sdt-border);
	margin: 0.5rem -3rem -2rem;
	border-radius: 0 0 4px 4px;
}

/* ─── Info Popup ──────────────────────────────────────────────────────── */

.sonoran-dt__popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sonoran-dt__popup-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
}

.sonoran-dt__popup-card {
	position: relative;
	background: var(--sdt-white);
	max-width: 600px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	padding: 2.5rem 2rem 2rem;
	border-radius: 4px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
	z-index: 1;
}

.sonoran-dt__popup-close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: none;
	border: none;
	font-size: 20px;
	color: var(--sdt-dark-grey);
	cursor: pointer;
	padding: 4px 8px;
	transition: color 200ms ease;
	line-height: 1;
}

.sonoran-dt__popup-close:hover {
	color: var(--sdt-green);
}

.sonoran-dt__popup-body {
	font-family: var(--sdt-font);
	font-size: 15px;
	line-height: 1.7;
	color: var(--sdt-dark-grey);
}

.sonoran-dt__popup-body ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sonoran-dt__popup-body li {
	padding-left: 1.25em;
	position: relative;
	margin-bottom: 1rem;
	font-size: 15px;
	line-height: 1.7;
}

.sonoran-dt__popup-body li::before {
	content: '\2022';
	color: var(--sdt-green);
	font-weight: bold;
	position: absolute;
	left: 0;
}

.sonoran-dt__popup-body strong,
.sonoran-dt__popup-body b {
	color: var(--sdt-green);
	font-weight: 700;
}

/* Prevent body scroll when popup is open */
body.sonoran-dt-popup-open {
	overflow: hidden;
}

/* ─── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 768px) {

	.sonoran-dt__card {
		padding: 2rem 1.25rem 1.5rem;
		border-radius: 0;
		border-left: none;
		border-right: none;
	}

	.sonoran-dt__question-text {
		font-size: 18px;
	}

	.sonoran-dt__answers {
		flex-direction: column;
	}

	.sonoran-dt__answer {
		flex: 1 1 100%;
	}

	.sonoran-dt__result-banner {
		margin: -2rem -1.25rem 0;
		padding: 1.5rem 1.25rem 1.25rem;
		border-radius: 0;
	}

	.sonoran-dt__result-subheadline {
		font-size: 22px;
	}

	.sonoran-dt__result-content {
		flex-direction: column;
		gap: 1.5rem;
	}

	.sonoran-dt__result-body--has-careers {
		flex: 1 1 100%;
	}

	.sonoran-dt__result-ctas {
		flex-direction: column;
		align-items: stretch;
	}

	.sonoran-dt__cta {
		width: 100%;
	}

	.sonoran-dt__result-footer {
		margin: 0.5rem -1.25rem -1.5rem;
		padding: 1.25rem 1.25rem;
		border-radius: 0;
	}

	.sonoran-dt__popup-card {
		width: 95%;
		padding: 2rem 1.25rem 1.5rem;
	}
}

/* ─── Print ───────────────────────────────────────────────────────────── */

@media print {
	.sonoran-dt__back,
	.sonoran-dt__result-footer,
	.sonoran-dt__info-trigger {
		display: none !important;
	}

	.sonoran-dt__result-banner {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}