/*
Theme Name: Chantal Drolet
Theme URI: https://chantaldrolet.ca
Author: Mario (m3e.ca)
Description: A light, elegant block theme for Chantal Drolet — ballet teacher, choreographer and dance fitness instructor. Plum and blush palette, Cormorant Garamond headings, Jost body text, and one block pattern per homepage section.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chantal-drolet
*/

/* ---------- Global ---------- */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 110px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Header ---------- */
header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 30;
	/* Solid background, no blur: a backdrop-filter here would trap the
	   full-screen mobile menu inside the header bar. */
	background: rgba(251, 248, 249, 0.98);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.cd-tagline {
	margin: 0;
	font-size: 0.6875rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--subtle);
}
.cd-brand { gap: 0.35rem !important; }
.wp-block-button__link { white-space: nowrap; }

/* Mobile menu overlay */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--ink) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
}

/* Tablets: the six menu links no longer fit, so use the menu button
   (WordPress's own breakpoint is only 600px) and drop the tagline. */
@media (max-width: 1100px) {
	.cd-tagline { display: none; }
	header.wp-block-template-part .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	header.wp-block-template-part .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
/* Phones: hide the header "Get in touch" button; the hero has its own. */
@media (max-width: 781px) {
	header.wp-block-template-part .wp-block-buttons { display: none; }
}

/* Centered text (works across WordPress versions) */
.cd-center { text-align: center; }

/* ---------- Small type helpers ---------- */
.cd-eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--wp--preset--color--plum);
}
.cd-arrow-link { font-weight: 500; letter-spacing: 0.03em; }
.cd-arrow-link a { text-decoration: none; }
.cd-arrow-link a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* Outline button */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink);
	padding: calc(0.9rem - 1px) calc(1.85rem - 1px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--card);
}

/* ---------- Photos ---------- */
.cd-arch, .cd-card-media, .cd-square { margin: 0; background: var(--wp--preset--color--photo); overflow: hidden; }
.cd-arch { aspect-ratio: 4 / 5; border-radius: 240px 240px 8px 8px; }
.cd-card-media { aspect-ratio: 4 / 3; }
.cd-square { aspect-ratio: 4 / 5; border-radius: 8px; }
.cd-arch img, .cd-card-media img, .cd-square img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- Hero ---------- */
.cd-hero-media { position: relative; }
.cd-stat-badge {
	position: absolute;
	left: -28px;
	bottom: 48px;
	background: var(--wp--preset--color--card);
	padding: 1.1rem 1.5rem;
	border-radius: 6px;
	box-shadow: var(--wp--preset--shadow--soft);
}
.cd-stat-badge > * { margin: 0 !important; }
.cd-stat-number {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.5rem;
	line-height: 1;
	font-weight: 600;
	color: var(--wp--preset--color--plum);
}
@media (max-width: 781px) {
	.cd-stat-badge { left: 12px; bottom: 16px; }
}

/* ---------- Credentials band ---------- */
.cd-band {
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.cd-cred-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.2;
}
.cd-cred-title + p { margin-top: 0.25rem; }

/* ---------- Philosophy ---------- */
.cd-pull-quote {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: clamp(1.9rem, 3.2vw, 2.75rem);
	line-height: 1.25;
}
.cd-values {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--wp--preset--color--subtle);
}

/* ---------- Service cards ---------- */
.wp-block-column.cd-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	overflow: hidden;
}
.cd-card-body { padding: 2rem; flex-grow: 1; display: flex; flex-direction: column; }
.cd-card-body > .cd-arrow-link { margin-top: auto; padding-top: 0.5rem; }
.cd-card-body ul { padding-left: 1.1rem; }

/* ---------- Tags ---------- */
ul.cd-tags {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
ul.cd-tags li {
	border: 1px solid var(--wp--preset--color--pill);
	border-radius: 999px;
	padding: 0.3rem 0.9rem;
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

/* ---------- Testimonials ---------- */
.wp-block-quote.cd-quote-card {
	margin: 0;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 2.25rem;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
}
.wp-block-quote.cd-quote-card::before {
	content: "\201C";
	font-family: var(--wp--preset--font-family--display);
	font-size: 4rem;
	line-height: 0.6;
	height: 1.75rem;
	color: var(--wp--preset--color--plum);
}
.wp-block-quote.cd-quote-card p {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.45rem;
	line-height: 1.4;
}
.wp-block-quote.cd-quote-card cite {
	margin-top: auto;
	padding-top: 1rem;
	font-style: normal;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--subtle);
	letter-spacing: 0.04em;
}

/* ---------- Dark studios band ---------- */
.cd-dark a { color: var(--wp--preset--color--blush); }
.cd-dark a:hover { color: var(--wp--preset--color--card); }
.cd-dark .cd-eyebrow { color: #C9B3C3; }
.cd-big-number {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	line-height: 0.9;
}
ul.cd-plain-list { list-style: none; padding: 0; }
ul.cd-plain-list li { margin: 0.45rem 0; }
.cd-studio-list summary {
	cursor: pointer;
	color: var(--wp--preset--color--blush);
	font-weight: 500;
}
.cd-studio-list ul { columns: 2; column-gap: 2rem; font-size: var(--wp--preset--font-size--small); padding-left: 1.1rem; }
@media (max-width: 600px) { .cd-studio-list ul { columns: 1; } }

/* ---------- Video ---------- */
.cd-video { border-radius: 8px; overflow: hidden; }

/* ---------- Contact ---------- */
.cd-form-card {
	background: var(--wp--preset--color--card);
	border-radius: 8px;
	box-shadow: var(--wp--preset--shadow--soft);
}
.cd-form-placeholder {
	border: 1px dashed var(--wp--preset--color--pill);
	border-radius: 6px;
	padding: 2.5rem 1.5rem;
	text-align: center;
	color: var(--wp--preset--color--subtle);
}
.cd-contact-line a { text-decoration: none; color: var(--wp--preset--color--ink); }
.cd-contact-line strong { display: inline-block; min-width: 4.5rem; font-weight: 500; color: var(--wp--preset--color--plum); }

/* ==========================================================
   Marketing page
   ========================================================== */
.cd-lede { line-height: 1.25; font-style: italic; }

/* Experience stats beside the hero */
.cd-stat-card {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 1.75rem 2rem;
	width: 100%;
	box-sizing: border-box;
}
.cd-stat-card > * { margin: 0 !important; }
.cd-stat-large { font-size: 3.5rem; font-weight: 500; }

/* Numbered service panels */
.cd-panel {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 2rem;
	display: flex;
	flex-direction: column;
}
.cd-panel h3 { margin-top: 0.25rem; }
.cd-panel ul { padding-left: 1.1rem; }
.cd-num {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--plum);
}
.cd-note {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 1.2rem;
	line-height: 1.4;
}

/* Longer testimonials get a smaller quote size */
.wp-block-quote.cd-quote-long p { font-size: 1.2rem; line-height: 1.5; }
.wp-block-quote.cd-quote-long cite strong { color: var(--wp--preset--color--ink); font-weight: 500; }

/* Buttons on the dark band */
.cd-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: var(--wp--preset--color--blush);
	color: var(--wp--preset--color--ink);
}
.cd-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--wp--preset--color--card);
}
.cd-dark .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--on-dark);
	border-color: var(--wp--preset--color--on-dark);
}
.cd-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--on-dark);
	color: var(--wp--preset--color--ink);
}