/*
 * Detroit Game Day Group Departure Planner — scoped `.gdp` styles.
 *
 * Self-contained neutral design system: slate / ink / off-white. Defined
 * entirely in this stylesheet and never inherits or attempts to match a
 * host theme. All selectors are scoped under `.gdp`, `.gdp-below-content`
 * and `.gdp-faq` so the plugin cannot leak style onto the rest of the page.
 */

.gdp {
	--gdp-ink: #1b2027;
	--gdp-ink-soft: #3a4149;
	--gdp-slate: #545c66;
	--gdp-slate-light: #757e89;
	--gdp-border: #d6dae0;
	--gdp-border-strong: #aab1ba;
	--gdp-bg: #ffffff;
	--gdp-bg-offwhite: #f4f5f7;
	--gdp-bg-surface: #fbfbfc;
	--gdp-accent: #2b3742;
	--gdp-accent-hover: #1c2530;
	--gdp-focus: #1a5fb4;
	--gdp-critical-text: #7a1c10;
	--gdp-critical-bg: #fcecea;
	--gdp-critical-border: #e3a89c;
	--gdp-caution-text: #6b4400;
	--gdp-caution-bg: #fdf3df;
	--gdp-caution-border: #e2c37e;
	--gdp-info-text: #1f4a6e;
	--gdp-info-bg: #eaf1f7;
	--gdp-info-border: #b7cbdc;
	--gdp-success-text: #1e5631;
	--gdp-success-bg: #ecf5ee;
	--gdp-success-border: #b9d8c1;
	--gdp-radius: 6px;
	--gdp-space: 1rem;
	--gdp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--gdp-max-width: 46rem;

	max-width: var(--gdp-max-width);
	margin: 0 auto 2.5rem;
	padding: 0 0.25rem;
	font-family: var(--gdp-font);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--gdp-ink);
	box-sizing: border-box;
}

.gdp *,
.gdp *::before,
.gdp *::after {
	box-sizing: inherit;
}

.gdp [hidden] {
	display: none !important;
}

.gdp .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.gdp h2 {
	margin: 0 0 1.25rem;
	font-size: 1.6rem;
	line-height: 1.3;
	color: var(--gdp-ink);
}

.gdp h3 {
	margin: 0 0 0.65rem;
	font-size: 1.2rem;
	line-height: 1.3;
	color: var(--gdp-ink);
}

/* ---------------------------------------------------------------
   Form shell + wizard steps
   --------------------------------------------------------------- */

.gdp #gdp-planner-form {
	margin: 0 0 2rem;
	padding: 1.5rem;
	border: 1px solid var(--gdp-border);
	border-radius: var(--gdp-radius);
	background: var(--gdp-bg-surface);
}

.gdp-validation-errors {
	margin: 0 0 1rem;
	min-height: 1.2em;
	font-weight: 600;
	color: var(--gdp-critical-text);
}

.gdp-validation-errors:empty {
	display: none;
}

.gdp-step {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.gdp-step > legend {
	display: block;
	width: 100%;
	margin: 0 0 1.25rem;
	padding: 0;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--gdp-ink);
}

.gdp-step > legend:focus-visible,
.gdp-step > legend:focus {
	outline: 2px solid var(--gdp-focus);
	outline-offset: 4px;
}

.gdp-step fieldset {
	margin: 0 0 1.5rem;
	padding: 0;
	border: 0;
	min-width: 0;
}

.gdp-step fieldset legend {
	margin: 0 0 0.65rem;
	padding: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--gdp-ink-soft);
}

.gdp-step > p {
	margin: 0 0 1.5rem;
}

.gdp-step fieldset > p {
	margin: 0 0 0.5rem;
}

/* Radio / checkbox rows: >=44px touch target */

.gdp-step fieldset > p {
	display: flex;
	align-items: center;
	min-height: 44px;
	gap: 0.6rem;
}

.gdp-step input[type="radio"] {
	width: 1.2rem;
	height: 1.2rem;
	flex-shrink: 0;
	accent-color: var(--gdp-accent);
}

.gdp-step label {
	font-weight: 400;
	color: var(--gdp-ink);
	cursor: pointer;
}

.gdp-step > p > label {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 600;
	color: var(--gdp-ink);
}

/* Text / number / time / select inputs */

.gdp-step input[type="number"],
.gdp-step input[type="time"],
.gdp-step input[type="text"],
.gdp-step select {
	display: block;
	width: 100%;
	max-width: 22rem;
	min-height: 44px;
	margin-top: 0.35rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--gdp-border-strong);
	border-radius: var(--gdp-radius);
	background: var(--gdp-bg);
	color: var(--gdp-ink);
	font: inherit;
	line-height: 1.4;
}

.gdp-step input:focus-visible,
.gdp-step select:focus-visible,
.gdp-step input:focus,
.gdp-step select:focus {
	outline: 2px solid var(--gdp-focus);
	outline-offset: 2px;
}

.gdp-soft-warning {
	margin: 0.5rem 0 1rem;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--gdp-caution-border);
	border-radius: var(--gdp-radius);
	background: var(--gdp-caution-bg);
	color: var(--gdp-caution-text);
	font-size: 0.9rem;
}

.gdp-field-error {
	margin: 0.5rem 0 1rem;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--gdp-critical-border);
	border-radius: var(--gdp-radius);
	background: var(--gdp-critical-bg);
	color: var(--gdp-critical-text);
	font-size: 0.9rem;
	font-weight: 600;
}

/* ---------------------------------------------------------------
   Tooltips: hover + tap trigger, dismissible with Escape
   --------------------------------------------------------------- */

.gdp-tooltip-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	min-width: 1.5rem;
	margin: 0 0.35rem;
	padding: 0;
	border: 1px solid var(--gdp-accent);
	border-radius: 50%;
	background: var(--gdp-bg);
	color: var(--gdp-accent);
	font: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	cursor: help;
	vertical-align: middle;
}

.gdp-tooltip-trigger:focus-visible,
.gdp-tooltip-trigger:focus {
	outline: 2px solid var(--gdp-focus);
	outline-offset: 2px;
}

.gdp-tooltip {
	position: relative;
	display: block;
	max-width: 26rem;
	margin: 0.5rem 0 0;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--gdp-border);
	border-radius: var(--gdp-radius);
	background: var(--gdp-bg-offwhite);
	color: var(--gdp-ink-soft);
	font-size: 0.9rem;
	line-height: 1.45;
}

@media (prefers-reduced-motion: no-preference) {
	.gdp-tooltip {
		animation: gdp-fade-in 120ms ease-out;
	}
}

@keyframes gdp-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* ---------------------------------------------------------------
   Wizard navigation
   --------------------------------------------------------------- */

.gdp-navigation {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--gdp-border);
}

.gdp-navigation button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.65rem 1.35rem;
	border: 1px solid transparent;
	border-radius: var(--gdp-radius);
	font: inherit;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
}

.gdp #gdp-next,
.gdp #gdp-calculate {
	background: var(--gdp-accent);
	border-color: var(--gdp-accent);
	color: #fff;
}

.gdp #gdp-next:hover,
.gdp #gdp-calculate:hover {
	background: var(--gdp-accent-hover);
	border-color: var(--gdp-accent-hover);
}

.gdp #gdp-back {
	background: var(--gdp-bg);
	border-color: var(--gdp-border-strong);
	color: var(--gdp-ink);
}

.gdp #gdp-back:hover {
	background: var(--gdp-bg-offwhite);
}

.gdp-navigation button:focus-visible,
.gdp-navigation button:focus {
	outline: 2px solid var(--gdp-focus);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Results panel
   --------------------------------------------------------------- */

.gdp-results {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--gdp-border);
}

.gdp-results h2 {
	margin-bottom: 0.5rem;
}

.gdp-results h2:focus-visible,
.gdp-results h2:focus {
	outline: 2px solid var(--gdp-focus);
	outline-offset: 4px;
}

.gdp #gdp-results-headline {
	display: block;
	margin: 0.25rem 0 0.5rem;
	font-size: clamp(1.8rem, 5vw, 2.5rem);
	font-weight: 800;
	line-height: 1.15;
	color: var(--gdp-ink);
}

.gdp #gdp-results-summary {
	margin: 0 0 1.75rem;
	font-size: 1.1rem;
	color: var(--gdp-ink-soft);
}

.gdp-results section {
	margin-bottom: 1.75rem;
}

/* Result tables: horizontal scroll below 480px, tabindex="0" container */

.gdp-table-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.gdp-table-scroll:focus-visible,
.gdp-table-scroll:focus {
	outline: 2px solid var(--gdp-focus);
	outline-offset: 2px;
}

.gdp-results table {
	width: 100%;
	min-width: 30rem;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.gdp-results table caption {
	caption-side: top;
	text-align: left;
}

.gdp-results th,
.gdp-results td {
	padding: 0.6rem 0.65rem;
	border-bottom: 1px solid var(--gdp-border);
	text-align: left;
	vertical-align: top;
}

.gdp-results thead th {
	font-weight: 700;
	background: var(--gdp-bg-offwhite);
	color: var(--gdp-ink);
	white-space: nowrap;
}

.gdp-results tfoot th,
.gdp-results tfoot td {
	border-top: 2px solid var(--gdp-border-strong);
	border-bottom: 0;
	font-weight: 700;
	background: var(--gdp-bg-offwhite);
}

.gdp-results tr.gdp-row-event td {
	font-weight: 700;
	background: var(--gdp-bg-offwhite);
}

@media (max-width: 480px) {
	.gdp-results table {
		min-width: 34rem;
	}
}

/* Readiness flags — severity carried by label text + icon shape, not color alone */

.gdp-flags {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gdp-flag {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin: 0 0 0.75rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--gdp-border);
	border-left-width: 5px;
	border-radius: var(--gdp-radius);
	background: var(--gdp-bg);
}

.gdp-flag-icon {
	flex-shrink: 0;
	font-size: 1.1rem;
	line-height: 1.4;
}

.gdp-flag-text {
	line-height: 1.5;
}

.gdp-flag--critical {
	order: -1;
	border-color: var(--gdp-critical-border);
	border-left-color: var(--gdp-critical-text);
	background: var(--gdp-critical-bg);
	color: var(--gdp-critical-text);
}

.gdp-flag--caution {
	border-color: var(--gdp-caution-border);
	border-left-color: var(--gdp-caution-text);
	background: var(--gdp-caution-bg);
	color: var(--gdp-caution-text);
}

.gdp-flag--info {
	border-color: var(--gdp-info-border);
	border-left-color: var(--gdp-info-text);
	background: var(--gdp-info-bg);
	color: var(--gdp-info-text);
}

.gdp-flag--none {
	border-color: var(--gdp-success-border);
	border-left-color: var(--gdp-success-text);
	background: var(--gdp-success-bg);
	color: var(--gdp-success-text);
}

/* Getting home */

.gdp-return-list {
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

.gdp-return-list li {
	margin-bottom: 0.4rem;
}

.gdp-return-label {
	font-weight: 600;
	color: var(--gdp-ink);
}

.gdp-return-note {
	margin: 0;
	color: var(--gdp-slate);
	font-size: 0.92rem;
}

/* Next steps checklist */

.gdp #gdp-checklist-heading + ul {
	margin: 0;
	padding-left: 1.35rem;
}

.gdp #gdp-checklist-heading + ul li {
	margin-bottom: 0.45rem;
}

/* Download button */

.gdp #gdp-download-pdf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 0.5rem 0 1.5rem;
	padding: 0.7rem 1.4rem;
	border: 1px solid var(--gdp-accent);
	border-radius: var(--gdp-radius);
	background: var(--gdp-accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.gdp #gdp-download-pdf:hover {
	background: var(--gdp-accent-hover);
	border-color: var(--gdp-accent-hover);
}

.gdp #gdp-download-pdf:focus-visible,
.gdp #gdp-download-pdf:focus {
	outline: 2px solid var(--gdp-focus);
	outline-offset: 2px;
}

/* Disclaimer */

.gdp-disclaimer {
	margin: 0;
	padding: 0.85rem 1rem;
	border: 1px solid var(--gdp-border);
	border-radius: var(--gdp-radius);
	background: var(--gdp-bg-offwhite);
}

.gdp-disclaimer p {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--gdp-slate);
}

/* ---------------------------------------------------------------
   Editorial content below the tool + FAQ
   --------------------------------------------------------------- */

.gdp-below-content,
.gdp-faq,
.gdp-below,
.gdp {
	--gdp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.gdp-below-content,
.gdp-faq,
.gdp-below {
	max-width: var(--gdp-max-width, 46rem);
	margin: 0 auto 2rem;
	padding: 0 0.25rem;
	font-family: var(--gdp-font);
	font-size: 1rem;
	line-height: 1.6;
	color: #1b2027;
	box-sizing: border-box;
}

.gdp-below-content h2,
.gdp-faq h2,
.gdp-below h2 {
	margin: 2rem 0 0.85rem;
	font-size: 1.4rem;
	line-height: 1.3;
	color: #1b2027;
}

.gdp-below-content:first-of-type h2,
.gdp-faq:first-of-type h2 {
	margin-top: 0;
}

.gdp-below-content h3,
.gdp-faq h3,
.gdp-below h3 {
	margin: 1.35rem 0 0.5rem;
	font-size: 1.1rem;
	line-height: 1.35;
	color: #1b2027;
}

.gdp-below-content p,
.gdp-faq p,
.gdp-below p {
	margin: 0 0 1rem;
	color: #2f3640;
}

.gdp-below-content a,
.gdp-faq a,
.gdp-below a {
	color: #17497a;
}

.gdp-below-content ul,
.gdp-below ul {
	margin: 0 0 1rem;
	padding-left: 1.35rem;
}

.gdp-below-content li,
.gdp-below li {
	margin-bottom: 0.4rem;
}

/* ---------------------------------------------------------------
   Responsive adjustments
   --------------------------------------------------------------- */

@media (max-width: 640px) {
	.gdp,
	.gdp-below-content,
	.gdp-faq,
	.gdp-below {
		padding: 0 0.15rem;
	}

	.gdp #gdp-planner-form {
		padding: 1.1rem;
	}

	.gdp-navigation {
		flex-direction: column;
		align-items: stretch;
	}

	.gdp-navigation button {
		width: 100%;
	}
}

/* ---------------------------------------------------------------
   Reduced motion: no animated step transitions anywhere
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.gdp *,
	.gdp *::before,
	.gdp *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}