/*
Theme Name: ATS
Description: Block theme for Academy of Therapeutic Sciences. Design tokens live in theme.json; this file holds only what theme.json cannot express.
Version: 0.2.1
Requires at least: 6.6
Requires PHP: 8.3
Author: Academy of Therapeutic Sciences
License: GPL-2.0-or-later
Text Domain: ats
*/

/*
 * Section-aware colors. Each background sets the colors that read well on it,
 * and child elements inherit the nearest one. This keeps headings, eyebrows and
 * focus rings legible wherever Kathleen places them.
 * Contrast: Copper Text on Pearl is 4.34:1 (fails AA for small text), so
 * eyebrows on Pearl use Midnight Plum (7.78:1) instead.
 */
body,
.has-paper-background-color {
	--ats-heading: var(--wp--preset--color--midnight-plum);
	--ats-display: var(--wp--preset--color--aubergine);
	--ats-eyebrow: var(--wp--preset--color--copper-text);
	--ats-focus: var(--wp--preset--color--aubergine);
}
.has-pearl-background-color {
	--ats-heading: var(--wp--preset--color--midnight-plum);
	--ats-display: var(--wp--preset--color--aubergine);
	--ats-eyebrow: var(--wp--preset--color--midnight-plum);
	--ats-focus: var(--wp--preset--color--aubergine);
}
.has-aubergine-background-color,
.has-midnight-plum-background-color {
	--ats-heading: var(--wp--preset--color--pearl);
	--ats-display: var(--wp--preset--color--pearl);
	--ats-eyebrow: var(--wp--preset--color--copper);
	--ats-focus: var(--wp--preset--color--pearl);
}
.has-midnight-plum-background-color {
	--ats-eyebrow: var(--wp--preset--color--pearl);
}

:root :where(h2, h3, h4, h5, h6) {
	color: var(--ats-heading);
}

/* Heading style "Display": an H2 that looks like the brand H1. */
:root :where(.wp-block-heading.is-style-display) {
	color: var(--ats-display);
	font-family: var(--wp--preset--font-family--libre-baskerville);
	font-size: var(--wp--preset--font-size--h1);
	font-weight: 700;
	line-height: 1.2;
}

/* Paragraph style "Eyebrow": small all-caps label. */
:root :where(p.is-style-eyebrow) {
	color: var(--ats-eyebrow);
	font-family: var(--wp--preset--font-family--montserrat-arabic);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Paragraph style "Price": tuition figures. */
:root :where(p.is-style-price) {
	font-family: var(--wp--preset--font-family--libre-baskerville);
	font-size: var(--wp--preset--font-size--h1);
	font-weight: 700;
	line-height: 1.1;
}

/* Links: keep the underline, thicken it on hover. */
a:where(:not(.wp-element-button)):hover {
	text-decoration-thickness: 2px;
}

/* Visible focus for keyboard users (WCAG 2.2 AA). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--ats-focus, currentColor);
	outline-offset: 3px;
}

/* Full-width sections sit flush against each other and against the header and footer. */
.ats-section {
	margin-block: 0;
}
/* Beats core's ":root :where(.wp-site-blocks) > *" gap whatever the load order. */
body .wp-site-blocks > * {
	margin-block: 0;
}

/* Page-password form (the New Mexico page is password protected). */
.post-password-form {
	padding-block: var(--wp--preset--spacing--70);
}

/* Section headings sit further from what follows (old page: 2rem to 3rem). */
.ats-section > .wp-block-heading.is-style-display + :not(p),
.ats-section > .wp-block-heading.is-style-display + p + * {
	margin-block-start: clamp(2rem, 4vw, 3rem);
}

/* Rounded corners, as on the old page. */
.ats-card,
.ats-credit,
.ats-status-banner,
.ats-standards-closing {
	border-radius: 14px;
}
.ats-form-card {
	border-radius: 18px;
}

/* Cards fill their column so rows line up. */
.wp-block-column > .ats-card {
	height: 100%;
}

/* Founder cards: square headshot, tighter spacing (old page's card). */
.ats-founder > * + * {
	margin-block-start: 0.75rem;
}
.ats-headshot {
	margin-block-end: 0;
}
.ats-headshot img {
	object-position: center 20%;
	width: 100%;
}

/* Header and footer logo (horizontal lockup, 2:1). */
.ats-logo {
	margin: 0;
}
.ats-logo img {
	aspect-ratio: 2 / 1;
	height: 4rem;
	width: auto;
}
@media (min-width: 768px) {
	.ats-logo img {
		height: 5rem;
	}
}
.ats-footer .ats-logo img {
	height: 5rem;
}

/* Header stays at the top while scrolling; anchor links land below it. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}
.wp-site-blocks > header.wp-block-template-part > .wp-block-group {
	border-bottom: 1px solid rgba(239, 229, 221, 0.14);
}
html {
	scroll-padding-top: 7.5rem;
}

/* Header links: copper underline grows on hover. */
header .wp-block-navigation-item__content {
	background: linear-gradient(var(--wp--preset--color--copper), var(--wp--preset--color--copper)) no-repeat left bottom / 0 2px;
	padding-block: 0.5rem;
	transition: background-size 0.2s ease;
}
header .wp-block-navigation-item__content:hover {
	background-size: 100% 2px;
}

/* Buttons: old page's height and pressed color; header button is smaller. */
.wp-block-button__link.wp-element-button {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: 3.25rem;
}
.wp-block-button__link.wp-element-button:active {
	background-color: #B9785A;
}
.ats-header-cta .wp-block-button__link.wp-element-button {
	font-size: 0.8125rem;
	min-height: 2.75rem;
	padding: 0.625rem 1.25rem;
}
/* The CTA hides on small phones; the hero button is right below. */
@media (max-width: 599px) {
	.ats-header-cta {
		display: none;
	}
}

/*
 * Hero: copy on the left, smoke art filling the right half edge to edge.
 * The art column's background matches the artwork's edge color.
 */
.ats-hero > .wp-block-columns {
	gap: 0;
	margin-block: 0;
}
.ats-hero > .wp-block-columns > .wp-block-column:first-child {
	padding-block: clamp(3rem, 8vw, 6rem);
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}
.ats-hero > .wp-block-columns > .wp-block-column:last-child {
	background: #FDF9F4;
	min-height: 22rem;
	position: relative;
}
.ats-hero .ats-hero-art {
	inset: 0;
	margin: 0;
	position: absolute;
}
.ats-hero .ats-hero-art img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}
.ats-hero h1 {
	max-width: 15em;
}
.ats-hero > .wp-block-columns > .wp-block-column:first-child > p:not(.is-style-eyebrow) {
	max-width: 33rem;
}
.ats-hero-rule.wp-block-separator {
	background: var(--wp--preset--color--copper);
	border: 0;
	height: 2px;
	margin-inline: 0;
	width: 3.5rem;
}
@media (min-width: 782px) {
	.ats-hero > .wp-block-columns {
		min-height: min(46rem, calc(100vh - 7rem));
	}
	.ats-hero > .wp-block-columns > .wp-block-column:first-child {
		padding-inline-end: clamp(2rem, 4vw, 4rem);
		padding-inline-start: max(var(--wp--style--root--padding-left), calc((100vw - 72rem) / 2));
	}
}

/* Partnership band: credit box beside the text. */
.ats-partnership > .wp-block-columns {
	column-gap: clamp(2.5rem, 6vw, 5rem);
}
.ats-credit {
	border: 1.5px solid rgba(92, 58, 80, 0.35);
	padding: 1.5rem 1.75rem;
}
.ats-credit > * + * {
	margin-block-start: 0.5rem;
}
.ats-credit__name {
	font-family: var(--wp--preset--font-family--libre-baskerville);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.25;
}

/* Waitlist: intro stays in view beside the form on desktop. */
.ats-waitlist > .wp-block-columns > .wp-block-column:first-child p {
	max-width: 30rem;
}
@media (min-width: 782px) {
	.ats-waitlist > .wp-block-columns {
		column-gap: clamp(3rem, 6vw, 5rem);
	}
	.ats-waitlist > .wp-block-columns > .wp-block-column:first-child {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 9rem);
	}
}

/* Accordions (core Details block): Standards modules and FAQ. */
.wp-block-details {
	border-top: 1px solid var(--wp--preset--color--smoky-lavender);
	margin-block-start: 0;
}
.wp-block-details:last-child,
.wp-block-details:has(+ :not(.wp-block-details)) {
	border-bottom: 1px solid var(--wp--preset--color--smoky-lavender);
}
.wp-block-details > summary {
	color: var(--ats-heading);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--montserrat-arabic);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
	padding: 1.25rem 2.5rem 1.25rem 0;
	position: relative;
}
.wp-block-details > summary::-webkit-details-marker {
	display: none;
}
/* Chevron: points down when closed, up when open. */
.wp-block-details > summary::after {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	content: "";
	height: 0.625rem;
	margin-top: -0.45rem;
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	width: 0.625rem;
}
.wp-block-details[open] > summary::after {
	margin-top: -0.15rem;
	transform: rotate(-135deg);
}
.wp-block-details[open] {
	padding-bottom: 1.25rem;
}
/* Second line of a module title: the text Kathleen colors Midnight Plum in the editor. */
.wp-block-details > summary mark {
	background: none;
	color: inherit;
	display: block;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.5;
	margin-top: 0.125rem;
}

/* Standards: copper dot bullets, callouts, the expand-all link, the source line. */
.ats-modules ul.wp-block-list {
	list-style: none;
	padding-left: 0;
}
.ats-modules ul.wp-block-list > li {
	padding-left: 1.25rem;
	position: relative;
}
.ats-modules ul.wp-block-list > li + li {
	margin-top: 0.625rem;
}
.ats-modules ul.wp-block-list > li::before {
	background: var(--wp--preset--color--copper);
	border-radius: 50%;
	content: "";
	height: 0.4375rem;
	left: 0;
	position: absolute;
	top: 0.72em;
	width: 0.4375rem;
}
.ats-callout {
	border-radius: 10px;
	padding: 1rem 1.25rem;
}
.ats-callout > * + * {
	margin-block-start: 0.25rem;
}
.ats-standards-tools {
	display: flex;
	justify-content: flex-end;
	margin-block-end: 0.5rem;
}
.ats-link-button {
	background: none;
	border: 0;
	color: var(--wp--preset--color--copper-text);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--montserrat-arabic);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	padding: 0.5rem 0;
	text-decoration: underline;
	text-transform: uppercase;
	text-underline-offset: 0.25em;
}
.ats-standards-closing {
	margin-block-start: 3rem;
}
.ats-standards-closing > p:last-child {
	border-top: 1px solid rgba(92, 58, 80, 0.25);
	padding-top: 1rem;
}

/* Footer: tagline in the heading font. */
.ats-footer-tagline {
	font-family: var(--wp--preset--font-family--montserrat-arabic);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
	max-width: 22rem;
}
.ats-footer-links {
	column-gap: 1.75rem;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-details > summary::after,
	header .wp-block-navigation-item__content {
		transition: none;
	}
}

/*
 * Fluent Forms required markers. The acknowledgment checkbox has no label of
 * its own, so it gets the asterisk after its text, like the labelled fields.
 * Asterisks use Copper Text: Fluent's red (#f56c6c) is 2.71:1 on Paper.
 */
body .fluentform .ff-el-tc:has(input[aria-required="true"]) .ff_t_c::after {
	content: " *";
	margin-left: 3px;
}
body .fluentform .ff-el-tc:has(input[aria-required="true"]) .ff_t_c::after,
body .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
	color: var(--wp--preset--color--copper-text);
}

/*
 * Waitlist form (Fluent Forms), styled like the old page's form. Fluent's own
 * colors come from these variables; its red (#f56c6c) fails contrast, so
 * errors use #B3261E (6.5:1 on white, 6.1:1 on Paper).
 */
.ats-form-card {
	--fluentform-border-color: var(--wp--preset--color--midnight-plum);
	--fluentform-border-radius: 8px;
	--fluentform-danger: #B3261E;
	--fluentform-primary: var(--wp--preset--color--aubergine);
	--fluentform-secondary: var(--wp--preset--color--aubergine);
}
.ats-form-card .fluentform .ff-el-input--label label {
	color: var(--wp--preset--color--aubergine);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
}
.ats-form-card .fluentform .ff-el-input--label:not(.ff-el-is-required) label::after {
	color: var(--wp--preset--color--midnight-plum);
	content: " (optional)";
}
.ats-form-card .fluentform .ff-el-help-message {
	color: var(--wp--preset--color--midnight-plum);
	font-size: 0.875rem;
}
.ats-form-card .fluentform .ff-el-form-control {
	background-color: #fff;
	border-width: 1.5px;
	color: var(--wp--preset--color--aubergine);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	min-height: 3rem;
	padding: 0.75rem 0.875rem;
}
.ats-form-card .fluentform textarea.ff-el-form-control {
	min-height: 7.5rem;
	resize: vertical;
}
.ats-form-card .fluentform select.ff-el-form-control {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5l6 6 6-6' stroke='%235C3A50' stroke-width='2'/%3E%3C/svg%3E");
	background-position: right 0.875rem center;
	background-repeat: no-repeat;
	padding-right: 2.5rem;
}
/* Fluent removes the focus outline; put a visible one back (WCAG 2.2). */
.ats-form-card .fluentform .ff-el-form-control:focus-visible {
	border-color: var(--wp--preset--color--aubergine);
	outline: 3px solid var(--wp--preset--color--aubergine);
	outline-offset: 2px;
}
.ats-form-card .fluentform .ff-el-is-error .ff-el-form-control {
	background-color: #FDF3F2;
}
.ats-form-card .fluentform .text-danger {
	font-size: 0.9375rem;
	line-height: 1.4;
	margin-top: 0.375rem;
}
.ats-form-card .fluentform .ff-el-form-check-input {
	accent-color: var(--wp--preset--color--midnight-plum);
	height: 1.375rem;
	width: 1.375rem;
}
.ats-counter {
	color: var(--wp--preset--color--midnight-plum);
	display: block;
	font-size: 0.875rem;
	margin-top: 0.25rem;
	text-align: right;
}
/* Submit button matches the theme's buttons; full width on phones. */
.ats-form-card form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style) {
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--montserrat-arabic);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.3;
	min-height: 3.25rem;
	padding: 0.875rem 1.75rem;
	text-transform: uppercase;
	width: 100%;
}
.ats-form-card form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style):hover {
	background-color: #D39674;
	opacity: 1;
}
/*
 * Two fields per row on wider screens, paired as on the old page:
 * first/last name, email/phone, license type/other, county/setting.
 */
@media (min-width: 40rem) {
	.ats-form-card form.frm-fluent-form fieldset {
		column-gap: 1.25rem;
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.ats-form-card form.frm-fluent-form fieldset > * {
		grid-column: 1 / -1;
	}
	.ats-form-card form.frm-fluent-form fieldset > .ff-el-group:is(:has([name="first_name"]), :has([name="last_name"]), :has([name="email"]), :has([name="phone"]), :has([name="license_type"]), :has([name="license_other"]), :has([name="practice_location"]), :has([name="practice_setting"])) {
		grid-column: auto;
	}
	.ats-form-card .fluentform .ff-el-group:has([name="nmca_member"]) .ff-el-input--content {
		column-gap: 2rem;
		display: flex;
		flex-wrap: wrap;
	}
	.ats-form-card .fluentform .ff-el-group:has([name="nmca_member"]) .text-danger {
		flex-basis: 100%;
	}
	.ats-form-card form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style) {
		min-width: 16rem;
		width: auto;
	}
}

/* FAQ: 52rem column with slightly smaller questions, as on the old page. */
.ats-section:has(> .ats-faq) > * {
	max-width: 52rem;
}
.ats-faq .wp-block-details > summary {
	font-size: 1.0625rem;
}
.ats-faq .wp-block-details[open] {
	padding-bottom: 1.5rem;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Print: drop navigation, buttons, artwork, and the form. */
@media print {
	.wp-site-blocks > header.wp-block-template-part,
	.wp-block-buttons,
	.ats-hero > .wp-block-columns > .wp-block-column:last-child,
	.ats-form-card,
	.ats-standards-tools {
		display: none !important;
	}
	body {
		background: #fff;
	}
}