/*
 * Responsive hardening for every non-dashboard Param surface.
 * Targets WordPress 6.0+, PHP 8.0+ and current evergreen browsers.
 */

:where(.param-view, .param-dashboard-guest, .param-security-page, .param-survey-page, .param-meeting-gateway-page, body.login) {
	--param-site-touch-target: 2.75rem;
	--param-site-gutter: clamp(.75rem, 3.5vw, 1.5rem);
}

:where(.param-view, .param-dashboard-guest, .param-security-card, .param-survey-shell, .param-meeting-shell, body.login #login),
:where(.param-view, .param-dashboard-guest, .param-security-card, .param-survey-shell, .param-meeting-shell, body.login #login) *,
:where(.param-view, .param-dashboard-guest, .param-security-card, .param-survey-shell, .param-meeting-shell, body.login #login) *::before,
:where(.param-view, .param-dashboard-guest, .param-security-card, .param-survey-shell, .param-meeting-shell, body.login #login) *::after {
	box-sizing: border-box;
}

:where(.param-view, .param-dashboard-guest, .param-security-card, .param-survey-shell, .param-meeting-shell) :where(section, article, header, footer, nav, form, fieldset, div, dl, ul, li) {
	min-width: 0;
}

:where(.param-view, .param-dashboard-guest, .param-security-card, .param-survey-shell, .param-meeting-shell) :where(img, svg, video, canvas, iframe) {
	max-width: 100%;
}

:where(.param-view, .param-dashboard-guest, .param-security-card, .param-survey-shell, .param-meeting-shell) :where(h1, h2, h3, p, li, dt, dd, strong, small, span, label) {
	overflow-wrap: anywhere;
}

:where(.param-view, .param-security-card, .param-survey-shell, .param-meeting-shell, body.login #login) :where(input, select, textarea, button) {
	max-width: 100%;
}

:where(.param-view, .param-security-card, .param-survey-shell, .param-meeting-shell) :where([hidden]) {
	display: none !important;
}

.param-view :where(.param-table-scroll, .param-responsive-table) {
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-inline: contain;
	scrollbar-gutter: stable;
}

.param-view :where(.param-table-scroll, .param-responsive-table):focus-visible {
	outline: 3px solid rgb(100 142 80 / 38%);
	outline-offset: 3px;
}

@media (max-width: 64rem) {
	.param-view.param-view {
		width: min(100% - 1.5rem, 80rem);
		min-width: 0;
		margin-inline: auto;
	}

	.param-view :where(.param-therapist-results-grid, .param-start-paths) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.param-view :where(.param-booking-search, .param-booking-search--assessment) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.param-view :where(.param-booking-search, .param-booking-search--assessment) > button {
		grid-column: 1 / -1 !important;
		width: 100%;
	}

	.param-settings__layout { grid-template-columns: minmax(12rem, 14rem) minmax(0, 1fr); }
}

@media (max-width: 48rem) {
	:where(body.param-survey-page, body.param-security-page, body.param-meeting-gateway-page, body.login) {
		overflow-x: hidden;
	}

	.param-view.param-view {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		padding: var(--param-site-gutter);
		font-size: max(16px, 1rem);
	}

	.param-view :where(button, .button, input[type="submit"], input[type="button"], input[type="reset"], a.param-button, .param-start-path footer a, .param-therapist-result-card__actions a, .param-slot-button),
	.param-dashboard-guest__button,
	.param-security-card :where(button, .param-security-app-link, .param-security-finish),
	.param-survey-form-card button,
	.param-meeting-button,
	body.login #login :where(input[type="submit"], button, .button) {
		min-height: var(--param-site-touch-target) !important;
	}

	.param-view :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
	.param-security-card :where(input, select, textarea),
	.param-survey-shell :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
	body.login #login :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
		width: 100%;
		min-height: var(--param-site-touch-target);
		font-size: 16px !important;
	}

	/* Landing and entry paths. */
	.param-start-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
		padding: 1.25rem;
		border-radius: 1.25rem;
	}

	.param-start-hero__visual { display: none; }
	.param-start-trust { align-items: stretch; flex-direction: column; }
	.param-start-trust > span { width: 100%; }
	.param-start-heading { align-items: flex-start; flex-direction: column; gap: .65rem; }
	.param-start-heading p { max-width: none; text-align: start; }
	.param-start-paths { grid-template-columns: minmax(0, 1fr) !important; }
	.param-start-path { padding: 1rem; border-radius: 1.1rem; }
	.param-start-path > p { min-height: 0; }
	.param-start-path footer { align-items: stretch; flex-direction: column; }
	.param-start-path footer a { width: 100%; justify-content: center; }
	.param-start-support { align-items: flex-start; }

	/* Seven-step matching form. */
	.param-matching__header { align-items: flex-start; flex-direction: column; padding: 1rem; }
	.param-matching__intro { width: 100%; }
	.param-matching__assurances { display: flex; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-block-end: .25rem; overscroll-behavior-inline: contain; }
	.param-matching__assurances > * { flex: 0 0 auto; }
	.param-progress-card { padding-inline: .75rem; }
	.param-progress-steps { min-width: 24rem; }
	.param-progress-card:has(.param-progress-steps) { overflow-x: auto; overscroll-behavior-inline: contain; }
	.param-question { padding: 1rem; }
	.param-choice-grid:not(.param-choice-grid--scale),
	.param-contact-fields { grid-template-columns: minmax(0, 1fr); }
	.param-choice { min-height: var(--param-site-touch-target); }
	.param-choice-grid--scale { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
	.param-form-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.param-form-actions__note { grid-column: 1 / -1; }
	.param-form-actions button { width: 100%; }

	/* Matching results, therapist profile and booking. */
	.param-results-hero { align-items: flex-start; padding: 1rem; }
	.param-results-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
	.param-results-journey li { justify-items: center; padding: .65rem .35rem; text-align: center; }
	.param-results-journey li div { justify-items: center; }
	.param-results-journey small { display: none; }
	.param-results-section-heading { align-items: flex-start; flex-direction: column; }
	.param-results-section-heading > p { text-align: start; }
	.param-therapist-results-grid { grid-template-columns: minmax(0, 1fr) !important; }
	.param-therapist-result-card { width: 100%; max-width: 42rem; margin-inline: auto; }
	.param-therapist-profile-dialog {
		width: calc(100% - .75rem);
		max-width: calc(100% - .75rem);
		max-height: calc(100dvh - .75rem);
		margin: auto;
	}
	.param-therapist-profile-dialog > .param-profile-dialog__shell { max-height: calc(100dvh - .75rem); }
	.param-profile-dialog__content { overflow-x: hidden; overflow-y: auto; }
	.param-profile-video { aspect-ratio: 16 / 9; height: auto; }
	.param-booking-search,
	.param-booking-search--assessment { grid-template-columns: minmax(0, 1fr) !important; }
	.param-booking-search > *,
	.param-booking-search--assessment > * { grid-column: 1 !important; width: 100%; }
	.param-slot-day,
	.param-slot-period { grid-template-columns: minmax(0, 1fr); }
	.param-slot-days { scroll-snap-type: inline proximity; overscroll-behavior-inline: contain; }
	.param-slot-days button { min-height: var(--param-site-touch-target) !important; scroll-snap-align: start; }
	.param-booking-confirm { bottom: .5rem; align-items: stretch; flex-direction: column; }
	.param-booking-confirm button { width: 100%; }

	/* Admin settings page. */
	.param-settings { width: 100%; max-width: 100%; padding-inline: .65rem; }
	.param-settings__layout,
	.param-settings__grid,
	.param-settings__tools,
	.param-role-user-grid,
	.param-role-editor { grid-template-columns: minmax(0, 1fr); }
	.param-settings__sidebar { position: static; overflow: hidden; }
	.param-settings__tabs { display: flex; overflow-x: auto; padding-block-end: .25rem; scroll-snap-type: inline proximity; }
	.param-settings__tabs a { min-width: 9rem; min-height: var(--param-site-touch-target); flex: 0 0 auto; scroll-snap-align: start; }
	.param-settings__savebar { align-items: stretch; flex-direction: column; }
	.param-settings__savebar > div,
	.param-settings__savebar .button { width: 100%; }

	/* Standalone survey. */
	.param-survey-shell {
		width: min(100% - 1rem, 72rem);
		min-height: 0;
		grid-template-columns: minmax(0, 1fr);
		margin: .5rem auto;
		border-radius: 1.2rem;
	}
	.param-survey-welcome { min-height: 0; padding: 1.25rem; }
	.param-survey-welcome__content { margin-top: 1.5rem; }
	.param-survey-welcome__security { margin-top: 1rem; padding-top: 1rem; }
	.param-survey-form-card { padding: 1rem; }
	.param-survey-form-card > header { align-items: flex-start; flex-direction: column; }
	.param-survey-question { padding: .85rem; }
	.param-survey-rating { gap: .3rem; }
	.param-survey-rating label > span { min-height: var(--param-site-touch-target); }
	.param-survey-boolean { grid-template-columns: minmax(0, 1fr); }
	.param-survey-form-card form > footer { align-items: stretch; flex-direction: column; }
	.param-survey-form-card button { width: 100%; }

	/* Login, security and meeting gateway. */
	body.login { min-height: 100dvh; align-items: flex-start; justify-content: center; padding: 1rem; }
	body.login #login { width: min(100%, 29rem); margin: 0 auto; padding: 1.4rem 1rem; border-radius: 1.2rem; }
	body.login .param-login-welcome { display: none; }
	body.login :where(#nav, #backtoblog, .privacy-policy-page-link) { text-align: center; }

	.param-security-shell { min-height: 100dvh; padding: .5rem; }
	.param-security-card { width: 100%; padding: 1rem; border-radius: 1.15rem; }
	.param-security-key-data > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
	.param-security-card :where(button, .param-security-app-link, .param-security-finish) { width: 100%; }

	.param-meeting-shell { width: min(100% - 1rem, 58rem); padding-block: .75rem; }
	.param-meeting-brand { align-items: flex-start; }
	.param-meeting-gateway { border-radius: 1.2rem; }
	.param-meeting-hero { align-items: flex-start; padding: 1rem; }
	.param-meeting-details { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
	.param-meeting-status,
	.param-meeting-alert { margin-inline: 1rem; }
	.param-meeting-actions { flex-direction: column; padding: 1rem; }
	.param-meeting-actions form,
	.param-meeting-actions .param-meeting-button { width: 100%; }

	.param-dashboard-guest { min-height: min(100dvh, 36rem); padding: .75rem; }
	.param-dashboard-guest__card { width: 100%; min-height: 0; padding: 1.5rem 1rem; border-radius: 1.25rem; }
}

@media (max-width: 35rem) {
	.param-view { --param-site-gutter: .75rem; }
	.param-view :where(.param-results-hero, .param-booking-hero) { display: grid; gap: .75rem; }
	.param-form-actions { grid-template-columns: minmax(0, 1fr); }
	.param-form-actions > * { grid-column: 1 !important; width: 100%; }
	.param-therapist-facts,
	.param-therapist-result-card__actions { grid-template-columns: minmax(0, 1fr); }
	.param-therapist-profile-dialog > .param-profile-dialog__shell > footer { align-items: stretch; flex-direction: column-reverse; }
	.param-therapist-profile-dialog > .param-profile-dialog__shell > footer :where(button, .button, a) { width: 100%; }
	.param-booking-steps li { display: grid; justify-items: center; text-align: center; }
	.param-booking-steps li div { display: none; }
	.param-survey-rating { overflow-x: auto; grid-template-columns: repeat(5, minmax(3.25rem, 1fr)); overscroll-behavior-inline: contain; }
	.param-survey-rating small { display: none; }
	.param-meeting-hero { display: grid; }
	.param-meeting-brand small { display: none; }
}

@media (hover: none) and (pointer: coarse) {
	:where(.param-view, .param-dashboard-guest, .param-security-card, .param-survey-shell, .param-meeting-shell, body.login #login) :where(a, button, summary, label:has(input), [role="button"]) {
		-webkit-tap-highlight-color: rgb(100 142 80 / 18%);
	}
	:where(.param-view, .param-dashboard-guest, .param-security-card, .param-survey-shell, .param-meeting-shell, body.login #login) :where(a, button):hover {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	:where(.param-view, .param-dashboard-guest, .param-security-card, .param-survey-shell, .param-meeting-shell, body.login #login),
	:where(.param-view, .param-dashboard-guest, .param-security-card, .param-survey-shell, .param-meeting-shell, body.login #login) * {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}