/*
 * How to Teamwork — styles that theme.json can't express.
 * Colors come from the palette presets, so style variations restyle everything here too.
 */

/* ---------- Section rhythm ---------- */
.htw-section {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
}
.htw-section--tight-top { padding-top: 0; }
.htw-section--banner { padding-top: 0; }
.htw-section--bordered {
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.htw-main > .htw-section:first-child { margin-top: 0; }
.htw-main .htw-section + .htw-section { margin-top: 0; }

.htw-section-head h2 { max-width: 760px; margin-top: 1.1rem; margin-bottom: 1.1rem; }
.htw-lede { max-width: 620px; margin-top: 0; }
.htw-section-head + * { margin-top: var(--wp--preset--spacing--60) !important; }

/* ---------- Tag pill (paragraph style "Tag") ---------- */
.is-style-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	padding: 0.375rem 0.875rem;
	border-radius: 999px;
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
}
.is-style-tag::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	flex-shrink: 0;
}

/* ---------- Card (group style "Card") ---------- */
.wp-block-group.is-style-card {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 20px;
	padding: clamp(1.5rem, 3vw, 2.75rem);
}
.wp-block-group.is-style-card.has-contrast-background-color { border-color: transparent; }

/* ---------- Book cover (image style "Book cover") ---------- */
.wp-block-image.is-style-book img {
	width: min(320px, 70vw);
	height: auto;
	border-radius: 4px 10px 10px 4px;
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 24px 48px -16px rgb(0 0 0 / 0.35);
}

/* ---------- Header ---------- */
.htw-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.admin-bar .htw-header { top: var(--wp-admin--admin-bar--height, 32px); }
.htw-header__inner { min-height: 72px; }
.htw-header__actions { gap: 2rem; }
.htw-header__cta .wp-block-button__link { padding: 0.7rem 1.25rem; font-size: 0.9375rem; }
.htw-header .wp-block-navigation-item__content { color: var(--wp--preset--color--muted); }
.htw-header .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--contrast); }

/* ---------- Hero ---------- */
.htw-hero { padding-top: clamp(3rem, 7vw, 5.5rem); }
.htw-hero h1 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.htw-hero .htw-lede { margin-bottom: 2.5rem; }
.htw-hero__grid { gap: clamp(2.5rem, 5vw, 4rem); }
.htw-cover-frame {
	border-radius: 28px;
	padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
}
.htw-cover-frame .wp-block-image { margin: 0; }
.htw-stats {
	gap: 2rem;
	margin-top: 3rem !important;
	padding-top: 2rem;
	border-top: 1px solid var(--wp--preset--color--line);
}
.htw-stat p { margin: 0; }
.htw-stat__value { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
.htw-stat__label { margin-top: 0.25rem !important; }

/* ---------- Steps ---------- */
.htw-steps { gap: 1.25rem; }
.htw-step h3 { margin-top: 0; margin-bottom: 0.625rem; }
.htw-step p:last-child { margin-top: 0; }
.htw-step__num {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	margin: 0 0 1.375rem;
}

/* ---------- Symptom Scan table ---------- */
.htw-scan {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 24px;
	overflow: hidden;
}
.htw-scan > * + * { margin-top: 0; }
.htw-scan__row {
	display: grid;
	grid-template-columns: 1.6fr 1fr 150px;
	gap: 1.5rem;
	align-items: center;
	padding: 1.375rem 2rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.htw-scan__row:last-child { border-bottom: 0; }
.htw-scan__row > * { margin: 0 !important; }
.htw-scan__row:not(.htw-scan__head):hover { background: color-mix(in srgb, var(--wp--preset--color--tint) 25%, transparent); }
.htw-scan__head {
	background: var(--wp--preset--color--base);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--subtle);
}
.htw-scan__head > :last-child { text-align: right; }
.htw-scan__symptom { font-size: 1.125rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }
.htw-scan__chapter { justify-self: end; }
.htw-scan__chapter a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 1rem;
	border-radius: 999px;
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--contrast);
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}
.htw-scan__chapter a:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--surface); text-decoration: none; }

/* ---------- Book / workshop cards ---------- */
.htw-ctas { gap: 1.5rem; }
.htw-cta { display: flex; flex-direction: column; }
.htw-cta h3 { margin-top: 1rem; margin-bottom: 1rem; font-weight: 700; letter-spacing: -0.03em; }
.htw-eyebrow { margin: 0; font-size: 0.875rem; font-weight: 600; }
.htw-cta__foot { margin-top: auto !important; gap: 1rem; }
.htw-price { margin: 0; font-weight: 700; letter-spacing: -0.03em; }
.htw-cta--dark a:not(.wp-block-button__link) { color: inherit; opacity: 0.7; }
.htw-cta--dark .wp-block-button__link:hover { background: var(--wp--preset--color--accent-on-dark); }

/* Check list (list style "Check list") */
.wp-block-list.is-style-checks {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.wp-block-list.is-style-checks li { display: flex; gap: 0.75rem; line-height: 1.5; }
.wp-block-list.is-style-checks li::before { content: "✓"; font-weight: 700; color: var(--wp--preset--color--accent); }
.htw-cta--dark .wp-block-list.is-style-checks li::before { color: var(--wp--preset--color--accent-on-dark); }

/* ---------- Quick Guide banner ---------- */
.htw-banner {
	border-radius: 20px;
	padding: 1.5rem 2rem;
	gap: 1.25rem;
}
.htw-banner p { margin: 0; }
.htw-banner .is-style-outline .wp-block-button__link { border-color: transparent; }

/* ---------- Footer ---------- */
.htw-footer { border-top: 1px solid var(--wp--preset--color--line); padding-top: 2rem; padding-bottom: 2rem; }
.htw-footer p { margin: 0; }

/* ---------- Small screens ---------- */
@media (max-width: 781px) {
	.htw-scan__head { display: none; }
	.htw-scan__row { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.375rem 1.25rem; }
	.htw-scan__chapter { justify-self: start; margin-top: 0.375rem !important; }
	.htw-banner { padding: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; }
}
html { scroll-behavior: smooth; scroll-padding-top: 90px; }

/* ---------- Fixes found in testing ---------- */
mark.has-inline-color { background-color: transparent; }
.wp-block-group.htw-scan { padding: 0; }
@media (max-width: 1000px) {
	.htw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 781px) {
	.htw-steps,
	.htw-ctas { grid-template-columns: 1fr !important; }
}