/*
 * Adapts design.css (written for hand-authored HTML) to block-editor markup:
 * core/image figures, core/buttons, core/details, paragraph-based list items,
 * and utility classes that replace the design's inline styles.
 */

/* Logos keep their aspect ratio when CSS changes the height. */
nav img, footer img { width: auto; }

/* Eyebrows are paragraphs here; keep them from inheriting "section p" rules. */
body p.eyebrow { font: 600 13px/18px Figtree, sans-serif; letter-spacing: 2.5px; text-transform: uppercase; margin: 0 0 16px; max-width: none; }

/* Text links inside a paragraph (style the paragraph, not the <a>, so editing keeps it). */
.linkp a { font: 600 15px Figtree, sans-serif; color: var(--terra); text-decoration: underline; text-underline-offset: 4px; }
.help2 .linkp a { color: var(--sun); }

/* Buttons: core/button with block styles (default = primary). */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 16px; }
.wp-block-button .wp-block-button__link {
	display: inline-block; font: 600 14px/20px Figtree, sans-serif; padding: 14px 26px; border-radius: 999px;
	text-decoration: none; background: var(--terra); color: #fff; border: 0;
}
.wp-block-button.is-style-ghost .wp-block-button__link { background: transparent; border: 1.5px solid var(--muted); color: var(--ink); padding: 12.5px 24.5px; }
.wp-block-button.is-style-ghost-white .wp-block-button__link { background: #fff; border: 1.5px solid var(--muted); color: var(--ink); padding: 12.5px 24.5px; }
.wp-block-button.is-style-rose .wp-block-button__link { background: var(--sun); color: var(--ink); }
.wp-block-button.btn-lg .wp-block-button__link { padding: 16px 32px; font-size: 15px; }

/* Photos: core/image fills its decorative frame. */
.wp-block-image.photo, .wp-block-image.fill { margin: 0; }
.photo { inset: 0 40px 0 60px; }
.art-about { height: 440px; }
.art-about .photo { inset: 0 30px 0 50px; }
.wp-block-image.photo img, .wp-block-image.fill img {
	position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center top;
}
.dance-bg .wp-block-image.fill, .about-photo .wp-block-image.fill { position: absolute; inset: 0; }
.dance-bg .wp-block-image.fill img { object-position: center; }
.dance > .wrap { position: relative; width: 100%; }

/* Card icons. */
.ico-peach { background: var(--peach); }
.ico-lav { background: var(--lav); }

/* "What can I help with" groups: core/details with a plain-text summary. */
.d3g summary { list-style: none; cursor: default; font: 400 28px/34px Fraunces, serif; color: var(--surface); margin-bottom: 14px; }
.d3g summary::-webkit-details-marker { display: none; }
.d3g summary::before { content: ""; display: block; width: 44px; height: 44px; border-radius: 50%; margin-bottom: 20px; background: var(--leaf); }
.d3g:nth-child(2) summary::before { background: var(--sun); }
.d3g:nth-child(3) summary::before { background: var(--berry); }
.d3-cols > .d3g { padding: 8px 36px 0; }
.d3-cols > .d3g:first-child { padding-left: 0; }
.d3-cols > .d3g + .d3g { border-left: 1px solid rgba(255,255,255,.18); }

/* Items the design built from <div>s/<span>s are paragraphs in the editor. */
.steps6 > * { padding: 22px 8px; text-align: center; font: 400 20px Fraunces, serif; color: var(--forest); }
.steps6 > * + * { border-left: 1px solid #cdb8e6; }
.helpgrid > p, .helpset > p { background: var(--raised); border-radius: 20px; padding: 24px; font-size: 17px; line-height: 25px; display: flex; gap: 14px; margin: 0; }
.helpgrid > p::before, .helpset > p::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--sun); margin-top: 7px; }
/* Help page groups: invisible on desktop (items flow into the card grid), one titled list per group on mobile. */
.helpgrid > .helpset { display: contents; }
.helpgrid > .helpset::before { content: none; }
.helpset-h { display: none; }
.chips > * { border: 1.5px solid rgba(243,167,200,.55); border-radius: 999px; padding: 10px 20px; font-size: 15px; line-height: 22px; color: #fff; }
.chips.dark > * { color: var(--ink); border-color: var(--leaf); background: var(--raised); }
.tile::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--berry); }
.tile:nth-child(3n+2)::before { background: var(--leaf); }
.tile:nth-child(3n)::before { background: var(--terra); }
.tiles-2 { grid-template-columns: 1fr 1fr; }
.expect > * { border-top: 2px solid var(--leaf); padding-top: 20px; }
.approaches-label { margin-bottom: 16px; font-weight: 600; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }
.ink-strong strong, .ink-strong b { color: var(--ink); }
.statement strong { font-weight: 400; color: var(--sun); }
.somatic-lead { margin: 20px auto 0; max-width: 640px; }
.call-lead { margin: 20px 0 32px; }
.book-lead { margin: 14px 0 28px; }
.h2-32 { font-size: 32px; line-height: 38px; }
.band-lav { background: var(--lav); padding: 80px 0; }
.bookcard-wrap { margin-top: -40px; position: relative; }
.phero-peach { background: var(--peach) !important; }
.items-start { align-items: start !important; }
/* .pagehero's padding shorthand would otherwise zero the .wrap side gutter it shares an element with. */
.wrap.pagehero { padding-left: 40px; padding-right: 40px; }

/* Newsletter form. */
.mm-news .field { display: flex; gap: 12px; margin: 0; }
.mm-news input[type=email] {
	background: #fff; border: 1.5px solid var(--muted); border-radius: 999px; padding: 13px 22px; width: 280px;
	color: var(--ink); font: 400 15px Figtree, sans-serif;
}
.mm-news input[type=email]::placeholder { color: var(--muted); }
.mm-news button { border: 0; cursor: pointer; }
.mm-news button:disabled { opacity: .6; cursor: wait; }
.mm-news .mm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.mm-news-msg { font-size: 14px; margin-top: 8px; min-height: 1em; color: var(--forest); }
.screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }

/* Spacing utilities replacing the design's inline styles. */
.mt-0 { margin-top: 0 !important; }
.mt-8 { margin-top: 8px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-18 { margin-top: 18px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-24 { margin-top: 24px !important; }
.mt-28 { margin-top: 28px !important; }
.mt-32 { margin-top: 32px !important; }
.mt-36 { margin-top: 36px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-44 { margin-top: 44px !important; }
.mt-96 { margin-top: 96px !important; }
.mt-n24 { margin-top: -24px !important; }
.pt-24 { padding-top: 24px !important; }
.pb-48 { padding-bottom: 48px !important; }
.sp-96 { height: 96px; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mw-640 { max-width: 640px; }
.mw-680 { max-width: 680px; }
.mw-720 { max-width: 720px; }
.mw-760 { max-width: 760px; }
.mw-820 { max-width: 820px; }

@media (max-width: 760px) {
	.ctas .wp-block-button { width: 100%; }
	.ctas .wp-block-button__link { display: block; text-align: center; }
	.d3-cols > .d3g { padding: 0 !important; border-left: 0 !important; border-top: 1px solid rgba(255,255,255,.18); }
	.d3-cols > .d3g:last-child { border-bottom: 1px solid rgba(255,255,255,.18); }
	.d3g summary { display: flex; align-items: center; gap: 14px; padding: 20px 0; margin: 0; cursor: pointer; font-size: 24px; line-height: 30px; }
	.d3g summary::before { width: 22px; height: 22px; margin: 0; flex: none; }
	.d3g summary::after {
		content: ""; margin-left: auto; flex: none; width: 32px; height: 32px; border-radius: 50%;
		border: 1.5px solid rgba(243,167,200,.6);
		background: linear-gradient(var(--sun), var(--sun)) center / 12px 1.5px no-repeat,
		            linear-gradient(var(--sun), var(--sun)) center / 1.5px 12px no-repeat;
		transition: background-size .3s ease;
	}
	.d3g[open] summary::after { background-size: 12px 1.5px, 1.5px 0; }
	.d3g ul { padding: 0 0 18px 36px !important; margin: 0 !important; }
	.d3g li { padding: 6px 0 !important; font-size: 15px !important; line-height: 22px !important; }
	.steps6 > * { font-size: 18px; padding: 16px 8px; border-bottom: 1px solid #cdb8e6; }
	.steps6 > * + * { border-left: 0; }
	.steps6 > *:nth-child(odd) { border-right: 1px solid #cdb8e6; }
	.chips > * { font-size: 14px; padding: 8px 14px; }
	.tiles-2 { grid-template-columns: 1fr 1fr; gap: 10px; }
	.tiles-2 .tile { padding: 16px 14px; gap: 10px; font-size: 17px; border-radius: 18px; }
	.tiles-2 .tile::before { width: 10px; height: 10px; }
	.helpgrid { gap: 12px; margin-top: 32px; }
	.helpgrid > .helpset { display: block; background: var(--raised); border-radius: 20px; padding: 22px 22px 12px; }
	.helpset-h { display: block; font-size: 22px; line-height: 28px; margin: 0 0 6px; }
	.helpset > p { background: none; border-radius: 0; padding: 10px 0; font-size: 16px; line-height: 23px; gap: 12px; }
	.helpset > p + p { border-top: 1px solid var(--hair); }
	.helpset > p::before { width: 8px; height: 8px; margin-top: 8px; }
	.split { grid-template-columns: 1fr; gap: 40px; }
	.wrap.pagehero { padding-left: 20px; padding-right: 20px; }
	.fullhero .dance-bg { height: auto; }
	.art-about { height: 380px; }
	.mt-96 { margin-top: 64px !important; }
	.mm-news .field { flex-direction: column; }
	.mm-news input[type=email] { width: auto; }
	.mm-news button { text-align: center; }
}