/*
 * Join flow — full-screen onboarding. Uses the HealthcareHop design tokens
 * (--hh-primary, --hh-radius, etc.) and the existing .hh-btn / .hh-form-*
 * classes. Custom CSS is scoped to .hh-join and limited to: full-viewport
 * layout, step pill indicator, fade-in animation, OAuth buttons, and the
 * story textarea.
 */

/*
 * Hide the GeneratePress footer (widgets + copyright + our hh-footer-columns)
 * on the join page. The site header/menu stays visible.
 */
.page-template-default.page .site-footer,
.page .site-footer,
body.page .hh-footer-columns {
	display: none !important;
}

/*
 * The flow fills the viewport below the site header. A negative-margin
 * breakout lets the background span the full viewport width even though the
 * main element sits inside the GeneratePress .site-content container.
 */
.hh-join {
	position: relative;
	min-height: calc(100vh - 80px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2.5rem 1.25rem;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	background:
		radial-gradient(70% 50% at 50% 0%, rgba(73, 143, 145, 0.12), transparent 70%),
		#fff;
	box-sizing: border-box;
}

.hh-join * {
	box-sizing: border-box;
}

.hh-join__shell {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
}

/* Step indicator */

.hh-join__indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 3rem;
}

.hh-join__pip {
	display: inline-block;
	height: 6px;
	border-radius: 9999px;
	transition: width 500ms ease, background 500ms ease;
	background: var(--hh-border);
	width: 24px;
}

.hh-join__pip--current { width: 40px; background: var(--hh-primary); }
.hh-join__pip--done    { width: 24px; background: var(--hh-primary); opacity: .7; }

/* Content + fade-in */

.hh-join__content { width: 100%; }

.hh-join__fadein {
	animation: hh-join-fade 400ms ease-out both;
}

@keyframes hh-join-fade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.hh-join__center { text-align: center; }

.hh-join__eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	color: var(--hh-primary);
	margin: 0 0 1.25rem;
}

.hh-join__h1 {
	margin: 0;
	font-size: 2.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--hh-text);
}

@media (min-width: 640px) {
	.hh-join__h1 { font-size: 2.75rem; }
}

.hh-join__h1--xl { font-size: 3rem; }
@media (min-width: 640px) { .hh-join__h1--xl { font-size: 4rem; } }
@media (min-width: 1024px) { .hh-join__h1--xl { font-size: 5rem; } }

.hh-join__lead {
	margin: 1.25rem auto 0;
	max-width: 34rem;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--hh-muted);
}

.hh-join__lead--sm {
	margin-top: 1rem;
	font-size: 1rem;
}

/* Continue button — oversize the shared .hh-btn for the hero steps */

.hh-join__actions {
	margin-top: 2.5rem;
	display: flex;
	justify-content: center;
}

.hh-join__btn {
	padding: 14px 32px;
	font-size: 1rem;
}

/* Checklist */

.hh-join__checklist {
	list-style: none;
	padding: 0;
	margin: 2.25rem auto 0;
	max-width: 28rem;
	display: grid;
	gap: 0.75rem;
	text-align: left;
}

.hh-join__checkitem {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--hh-border);
	background: var(--hh-light);
	border-radius: var(--hh-radius);
	font-size: 0.95rem;
	color: var(--hh-text);
}

.hh-join__check {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	color: var(--hh-primary);
	display: inline-flex;
}

.hh-join__check svg { width: 100%; height: 100%; }

/* OAuth (step 3) */

.hh-join__authbtns {
	margin: 2.25rem auto 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 22rem;
}

.hh-join__oauth {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 12px 20px;
	border-radius: var(--hh-radius);
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease, box-shadow .15s ease;
	box-shadow: var(--hh-shadow);
}

.hh-join__oauth--light { background: #fff; color: var(--hh-text); border: 1px solid var(--hh-border); }
.hh-join__oauth--light:hover { background: var(--hh-light); }
.hh-join__oauth--dark { background: #000; color: #fff; }
.hh-join__oauth--dark:hover { background: #222; }

.hh-join__oauth-icon { display: inline-flex; width: 20px; height: 20px; }
.hh-join__oauth-icon svg { width: 100%; height: 100%; }

.hh-join__fineprint {
	margin: 1.5rem auto 0;
	max-width: 24rem;
	font-size: 0.8rem;
	color: var(--hh-muted);
	text-align: center;
}

.hh-join__altauth {
	margin: 1.25rem auto 0;
	font-size: 0.9rem;
	color: var(--hh-muted);
	text-align: center;
}

.hh-join__altauth a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.hh-join__altauth a:hover { color: var(--hh-accent, #5b8def); }

/* Form (step 4) — uses .hh-form-row / .hh-form-group / .hh-form-col from frontend.css */

.hh-join__form {
	max-width: 36rem;
	margin: 2.25rem auto 0;
}

.hh-join__form .hh-form-group label {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hh-muted);
}

.hh-join__form input[type="text"],
.hh-join__form input[type="date"],
.hh-join__form select,
.hh-join__form textarea {
	width: 100%;
	padding: 10px 12px;
	font-size: 0.95rem;
	border: 1px solid var(--hh-border);
	border-radius: var(--hh-radius);
	background: #fff;
	color: var(--hh-text);
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
	font-family: inherit;
}

.hh-join__form input:focus,
.hh-join__form select:focus,
.hh-join__form textarea:focus {
	border-color: var(--hh-primary);
	box-shadow: 0 0 0 3px rgba(73, 143, 145, 0.2);
}

.hh-join__submitbar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding-top: 1.25rem;
}

/* Textarea (step 6) */

.hh-join__form textarea {
	min-height: 10rem;
	resize: vertical;
	font-size: 1rem;
	line-height: 1.5;
}

.hh-join__metarow {
	margin-top: 0.5rem;
	display: flex;
	justify-content: space-between;
	font-size: 0.8rem;
	color: var(--hh-muted);
}

.hh-btn:disabled,
.hh-btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	background: var(--hh-muted);
}

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

/* -----------------------------------------------------------
 * Write-a-review flow — cards, stars, facility combobox, etc.
 * Scoped under .hh-join so styles don't leak site-wide.
 * ----------------------------------------------------------- */

.hh-join .hh-card {
	margin: 1.5rem auto 0;
	max-width: 36rem;
	padding: 1.25rem 1.25rem 1rem;
	background: #fff;
	border: 1px solid var(--hh-border);
	border-radius: var(--hh-radius);
	box-shadow: var(--hh-shadow);
}

.hh-join .hh-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.5rem;
}

.hh-join .hh-card__title {
	margin: 0 0 0.25rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--hh-text);
}

.hh-join .hh-card__sub {
	margin: 0 0 1rem;
	font-size: 0.875rem;
	color: var(--hh-muted);
}

.hh-join .hh-card__story {
	margin: 0;
	font-size: 0.95rem;
	color: var(--hh-text);
	line-height: 1.5;
	white-space: pre-wrap;
}

.hh-join .hh-card--story {
	background: rgba(73, 143, 145, 0.05);
	border-color: rgba(73, 143, 145, 0.3);
}

.hh-join .hh-eyebrow {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--hh-primary);
}

.hh-join .hh-muted { color: var(--hh-muted); font-weight: 400; }

.hh-join .hh-link {
	color: var(--hh-primary);
	font-weight: 600;
	text-decoration: underline;
}
.hh-join .hh-link:hover { color: var(--hh-primary-dark, #3a7375); }

.hh-join .hh-hint {
	margin: 0.5rem 0 0;
	font-size: 0.8rem;
	color: var(--hh-muted);
	min-height: 1.1em;
}

.hh-join .hh-hint--right { text-align: right; }

.hh-join .hh-error {
	margin: 1rem auto 0;
	max-width: 36rem;
	padding: 0.75rem 1rem;
	background: #fff3f3;
	border: 1px solid #f3b5b5;
	border-radius: var(--hh-radius);
	color: #8f2a2a;
	font-size: 0.9rem;
}

/* Nav row (Back + Continue/Submit) */

.hh-join__navrow {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	max-width: 36rem;
	margin: 2rem auto 0;
}

.hh-btn-secondary {
	background: #fff;
	color: var(--hh-text);
	border: 1px solid var(--hh-border);
}
.hh-btn-secondary:hover { background: var(--hh-light); }

/* Facility combobox */

.hh-facility-combo { position: relative; }

.hh-facility-results {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 16rem;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--hh-border);
	border-radius: var(--hh-radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	z-index: 20;
}

.hh-facility-results__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.125rem;
	width: 100%;
	padding: 0.625rem 0.875rem;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--hh-border);
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}
.hh-facility-results__item:last-child { border-bottom: 0; }
.hh-facility-results__item:hover,
.hh-facility-results__item:focus { background: var(--hh-light); outline: none; }

.hh-facility-results__name { font-weight: 600; color: var(--hh-text); }
.hh-facility-results__loc { font-size: 0.8rem; color: var(--hh-muted); }

.hh-facility-results__empty {
	padding: 0.875rem 1rem;
	font-size: 0.9rem;
	color: var(--hh-muted);
}

/* Rating rows + stars */

.hh-rating-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--hh-border);
}
.hh-rating-row:last-child { border-bottom: 0; }

.hh-rating-row__label { flex: 1; min-width: 0; }
.hh-rating-row__title { margin: 0; font-weight: 600; color: var(--hh-text); font-size: 0.95rem; }
.hh-rating-row__hint { margin: 0.125rem 0 0; font-size: 0.8rem; color: var(--hh-muted); }

.hh-stars {
	display: inline-flex;
	gap: 0.25rem;
	flex: none;
}

.hh-star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--hh-border);
	transition: color 120ms ease, transform 120ms ease;
}
.hh-star svg { width: 1.5rem; height: 1.5rem; }
.hh-star:hover { transform: scale(1.08); }
.hh-star.is-on { color: #f5b301; }
.hh-star.is-hover { color: #ffd45a; }

@media (max-width: 480px) {
	.hh-rating-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
}

/* Red flag checklist */

.hh-checklist {
	list-style: none;
	padding: 0;
	margin: 0.5rem 0 0;
	display: grid;
	gap: 0.5rem;
}

@media (min-width: 640px) {
	.hh-checklist { grid-template-columns: 1fr 1fr; }
}

.hh-check {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.5rem 0.625rem;
	border: 1px solid var(--hh-border);
	border-radius: var(--hh-radius);
	background: var(--hh-light);
	cursor: pointer;
	font-size: 0.9rem;
	color: var(--hh-text);
	line-height: 1.4;
}
.hh-check input[type="checkbox"] {
	flex: none;
	margin-top: 0.2rem;
	accent-color: var(--hh-primary);
}
.hh-check:hover { background: #fff; border-color: var(--hh-primary); }

.hh-join fieldset.hh-card { border-radius: var(--hh-radius); }
.hh-join fieldset.hh-card legend {
	padding: 0 0.25rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--hh-text);
}

/* -----------------------------------------------------------
 * Theme toggle button (top-right of the flow)
 * ----------------------------------------------------------- */

.hh-join__themetoggle {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: inherit;
	cursor: pointer;
	transition: background 150ms ease, border-color 150ms ease;
}
.hh-join__themetoggle:hover { background: rgba(255, 255, 255, 0.12); }
.hh-join__themetoggle svg { width: 1.125rem; height: 1.125rem; }

.hh-join:not(.hh-join--dark) .hh-join__themetoggle {
	background: #fff;
	border-color: var(--hh-border);
	color: var(--hh-text);
}
.hh-join:not(.hh-join--dark) .hh-join__themetoggle:hover { background: var(--hh-light); }

.hh-join__themetoggle .hh-join__themetoggle-sun { display: none; }
.hh-join--dark .hh-join__themetoggle-sun { display: inline-flex; }
.hh-join--dark .hh-join__themetoggle-moon { display: none; }

/* -----------------------------------------------------------
 * Dark modifier — matches the Next.js slate-950 / teal palette.
 * Applied as .hh-join.hh-join--dark on the <main>.
 * ----------------------------------------------------------- */

.hh-join--dark {
	--hh-dark-bg: #020617;
	--hh-dark-surface: #0f172a;
	--hh-dark-border: rgba(255, 255, 255, 0.15);
	--hh-dark-soft: rgba(255, 255, 255, 0.05);
	--hh-dark-text: #f8fafc;
	--hh-dark-muted: #94a3b8;
	--hh-dark-placeholder: #64748b;
	--hh-accent: #14b8a6;
	--hh-accent-hover: #2dd4bf;

	background:
		radial-gradient(60% 40% at 50% 0%, rgba(20, 184, 166, 0.12), transparent 70%),
		var(--hh-dark-bg);
	color: var(--hh-dark-text);
}

.hh-join--dark .hh-join__h1,
.hh-join--dark .hh-card__title,
.hh-join--dark .hh-rating-row__title,
.hh-join--dark fieldset.hh-card legend { color: var(--hh-dark-text); }

.hh-join--dark .hh-join__lead,
.hh-join--dark .hh-join__fineprint,
.hh-join--dark .hh-join__altauth,
.hh-join--dark .hh-card__sub,
.hh-join--dark .hh-rating-row__hint,
.hh-join--dark .hh-hint,
.hh-join--dark .hh-muted { color: var(--hh-dark-muted); }

.hh-join--dark .hh-join__eyebrow { color: var(--hh-accent); }

.hh-join--dark .hh-join__pip { background: rgba(255, 255, 255, 0.2); }
.hh-join--dark .hh-join__pip--current { background: var(--hh-accent); }
.hh-join--dark .hh-join__pip--done { background: var(--hh-accent); opacity: 0.7; }

/* Checklist (step 2 of join) */
.hh-join--dark .hh-join__checkitem {
	background: var(--hh-dark-soft);
	border-color: var(--hh-dark-border);
	color: var(--hh-dark-text);
}
.hh-join--dark .hh-join__check { color: var(--hh-accent); }

/* OAuth buttons */
.hh-join--dark .hh-join__oauth--light {
	background: #fff;
	color: #0f172a;
	border-color: transparent;
}
.hh-join--dark .hh-join__oauth--light:hover { background: #f1f5f9; }
.hh-join--dark .hh-join__oauth--dark { background: #000; color: #fff; }
.hh-join--dark .hh-join__oauth--dark:hover { background: #1e293b; }

/* Form inputs */
.hh-join--dark .hh-join__form .hh-form-group label { color: var(--hh-dark-muted); }

.hh-join--dark .hh-join__form input[type="text"],
.hh-join--dark .hh-join__form input[type="number"],
.hh-join--dark .hh-join__form input[type="date"],
.hh-join--dark .hh-join__form select,
.hh-join--dark .hh-join__form textarea {
	background: var(--hh-dark-soft);
	border-color: var(--hh-dark-border);
	color: var(--hh-dark-text);
}
.hh-join--dark .hh-join__form input::placeholder,
.hh-join--dark .hh-join__form textarea::placeholder { color: var(--hh-dark-placeholder); }

.hh-join--dark .hh-join__form input:focus,
.hh-join--dark .hh-join__form select:focus,
.hh-join--dark .hh-join__form textarea:focus {
	border-color: var(--hh-accent);
	box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.3);
}

.hh-join--dark .hh-join__form select option { background: var(--hh-dark-surface); color: var(--hh-dark-text); }

/* Primary button — teal accent */
.hh-join--dark .hh-btn-primary {
	background: var(--hh-accent);
	color: #fff;
	border: 0;
	box-shadow: 0 8px 20px rgba(20, 184, 166, 0.25);
}
.hh-join--dark .hh-btn-primary:hover { background: var(--hh-accent-hover); }
.hh-join--dark .hh-btn:disabled,
.hh-join--dark .hh-btn[disabled] {
	background: #475569;
	color: #cbd5e1;
	box-shadow: none;
	opacity: 0.7;
}

/* Secondary (Back) button */
.hh-join--dark .hh-btn-secondary {
	background: rgba(255, 255, 255, 0.04);
	color: var(--hh-dark-text);
	border-color: var(--hh-dark-border);
}
.hh-join--dark .hh-btn-secondary:hover { background: rgba(255, 255, 255, 0.1); }

/* Cards (write-a-review) */
.hh-join--dark .hh-card {
	background: var(--hh-dark-surface);
	border-color: var(--hh-dark-border);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}
.hh-join--dark .hh-card--story {
	background: rgba(20, 184, 166, 0.08);
	border-color: rgba(20, 184, 166, 0.35);
}
.hh-join--dark .hh-card--story .hh-card__story { color: var(--hh-dark-text); }

/* Facility combobox */
.hh-join--dark .hh-facility-results {
	background: var(--hh-dark-surface);
	border-color: var(--hh-dark-border);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.hh-join--dark .hh-facility-results__item { border-bottom-color: var(--hh-dark-border); }
.hh-join--dark .hh-facility-results__item:hover,
.hh-join--dark .hh-facility-results__item:focus { background: rgba(255, 255, 255, 0.05); }
.hh-join--dark .hh-facility-results__name { color: var(--hh-dark-text); }
.hh-join--dark .hh-facility-results__loc,
.hh-join--dark .hh-facility-results__empty { color: var(--hh-dark-muted); }

/* Stars */
.hh-join--dark .hh-star { color: rgba(255, 255, 255, 0.25); }
.hh-join--dark .hh-star.is-on { color: #fbbf24; }
.hh-join--dark .hh-star.is-hover { color: #fde68a; }

/* Rating rows */
.hh-join--dark .hh-rating-row { border-bottom-color: var(--hh-dark-border); }

/* Red-flag checklist */
.hh-join--dark .hh-check {
	background: var(--hh-dark-soft);
	border-color: var(--hh-dark-border);
	color: var(--hh-dark-text);
}
.hh-join--dark .hh-check:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--hh-accent); }
.hh-join--dark .hh-check input[type="checkbox"] { accent-color: var(--hh-accent); }

/* Links */
.hh-join--dark .hh-link { color: var(--hh-accent); }
.hh-join--dark .hh-link:hover { color: var(--hh-accent-hover); }

/* Error */
.hh-join--dark .hh-error {
	background: rgba(239, 68, 68, 0.12);
	border-color: rgba(239, 68, 68, 0.35);
	color: #fca5a5;
}