/*
Theme Name: CM SWIM CO
Theme URI: https://www.cmswimco.com
Author: CM SWIM CO. LLC
Description: Custom block theme for CM SWIM CO, built on the CM SWIM CO brand guidelines (Cream, Sky and Cobalt, Gascogne Serial and Noah Grotesque). Includes page layouts for Home, About and Swim Lessons, and a blank template for application pages.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.1.1
License: GPL-2.0-or-later
Text Domain: cmswimco
*/

/* ------------------------------------------------------------------
   Base
   ------------------------------------------------------------------ */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Small caps labels: brand "Accent & buttons" style
   (Noah Grotesque Bold, all caps, 25% letter spacing) */
.is-style-eyebrow,
.cm-header .wp-block-navigation-item__content,
.cm-footer-links a {
	font-family: var(--wp--preset--font-family--noah);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	line-height: 1.6;
}

/* Big serif numbers */
.is-style-stat {
	font-family: var(--wp--preset--font-family--gascogne);
	font-weight: 300;
	font-size: clamp(44px, 4.4vw, 56px);
	line-height: 1;
	margin-bottom: 0;
}

/* Serif lead-in line */
.is-style-lead {
	font-family: var(--wp--preset--font-family--gascogne);
	font-weight: 300;
	font-size: clamp(22px, 2.2vw, 26px);
	line-height: 1.45;
}

/* ------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */
.cm-header {
	border-bottom: 1px solid rgba(51, 44, 26, 0.12);
}
.cm-logo img,
.wp-block-image.cm-logo img,
.editor-styles-wrapper .wp-block-image.cm-logo img {
	height: 26px !important;
	width: auto !important;
	max-width: none;
	display: block;
}
.wp-block-image.cm-logo,
.wp-block-image.cm-footer-logo {
	margin: 0;
}
.cm-header .wp-block-navigation-item__content {
	color: var(--wp--preset--color--charcoal);
	text-decoration: none;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
}
.cm-header .wp-block-navigation-item__content:hover,
.cm-header .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--cobalt);
	border-bottom-color: var(--wp--preset--color--cobalt);
}
.cm-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--cream);
	padding: 32px;
}

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
.cm-footer a {
	color: var(--wp--preset--color--white);
}
.cm-footer-logo img,
.wp-block-image.cm-footer-logo img,
.editor-styles-wrapper .wp-block-image.cm-footer-logo img {
	height: 34px !important;
	width: auto !important;
	max-width: none;
	display: block;
}
.cm-footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
}
.cm-footer-links a {
	font-size: 12px;
	text-decoration: none;
}
.cm-footer-links a:hover {
	text-decoration: underline;
}
.cm-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.35);
	padding-top: 24px;
}
.cm-footer-bottom p {
	font-size: 13px;
}
.cm-footer-bottom .cm-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}
.cm-signup + .cm-footer-spacer {
	display: none;
}

/* ------------------------------------------------------------------
   Images
   ------------------------------------------------------------------ */
.wp-block-image.is-style-oval img {
	border-radius: 50%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border: 10px solid var(--wp--preset--color--cream);
	box-sizing: border-box;
	width: 100%;
	max-width: 380px;
}
.wp-block-image.is-style-arch img {
	border-radius: 999px 999px 24px 24px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	max-width: 440px;
}
.wp-block-image.is-style-soft img {
	border-radius: 24px;
	object-fit: cover;
	width: 100%;
}
.wp-block-image.is-style-mark img {
	width: 100%;
	max-width: 300px;
	height: auto;
	aspect-ratio: auto;
	border-radius: 0;
}
.wp-block-image.is-style-oval,
.wp-block-image.is-style-arch,
.wp-block-image.is-style-mark {
	display: flex;
	justify-content: center;
}

/* ------------------------------------------------------------------
   Pattern and layout helpers
   ------------------------------------------------------------------ */
.is-style-stripes {
	background: repeating-linear-gradient(
		90deg,
		var(--wp--preset--color--kelly) 0,
		var(--wp--preset--color--kelly) 48px,
		var(--wp--preset--color--cream) 48px,
		var(--wp--preset--color--cream) 96px
	);
}
.is-style-stripes .wp-block-image.is-style-soft img {
	border: 10px solid var(--wp--preset--color--cream);
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	max-width: 420px;
}

/* A thin line above an item (inherits the text color) */
.is-style-rule-top {
	border-top: 1px solid rgba(51, 44, 26, 0.22);
	padding-top: 24px;
}
.has-cobalt-background-color .is-style-rule-top {
	border-top-color: var(--wp--preset--color--sky);
}

/* Left rule for the credentials strip */
.cm-stat-item {
	border-left: 1px solid rgba(51, 44, 26, 0.2);
	padding-left: 20px;
}
.cm-stats {
	border-bottom: 1px solid rgba(51, 44, 26, 0.12);
}

/* Cream card */
.is-style-card {
	background: var(--wp--preset--color--cream);
	border-radius: 24px;
	padding: clamp(28px, 3.5vw, 48px);
}

/* Split section: media column full-bleed */
.cm-split {
	gap: 0 !important;
}
.cm-split > .wp-block-column {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.cm-split-media {
	padding: clamp(48px, 7vw, 88px) 32px;
	align-items: center;
}
.cm-split-text {
	padding: clamp(56px, 7vw, 104px) clamp(20px, 7vw, 112px);
}
.cm-split-text > * {
	max-width: 560px;
}

/* Lesson steps */
.cm-step .is-style-stat {
	font-size: 44px;
	min-width: 56px;
}

/* ------------------------------------------------------------------
   Lists: checks and dashes
   ------------------------------------------------------------------ */
.wp-block-list.is-style-checks,
.wp-block-list.is-style-dashes {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.wp-block-list.is-style-checks li,
.wp-block-list.is-style-dashes li {
	position: relative;
	padding-left: 38px;
	margin-bottom: 20px;
	line-height: 1.55;
}
.wp-block-list.is-style-checks li:last-child,
.wp-block-list.is-style-dashes li:last-child {
	margin-bottom: 0;
}
.wp-block-list.is-style-checks li::before,
.wp-block-list.is-style-dashes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 22px;
	height: 22px;
	-webkit-mask: var(--cm-icon) no-repeat center / contain;
	mask: var(--cm-icon) no-repeat center / contain;
}
.wp-block-list.is-style-checks li::before {
	background: var(--wp--preset--color--tangerine);
	--cm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.wp-block-list.is-style-dashes li::before {
	background: var(--wp--preset--color--charcoal);
	--cm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------
   Quotes
   ------------------------------------------------------------------ */
.wp-block-quote.is-style-accent {
	border-left: 2px solid var(--wp--preset--color--cobalt);
	padding-left: 24px;
	margin: 8px 0;
}
.wp-block-quote.is-style-accent p {
	font-family: var(--wp--preset--font-family--gascogne);
	font-weight: 300;
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1.3;
}
.wp-block-quote.is-style-plain {
	border: 0;
	padding: 0;
	margin: 0;
}
.wp-block-quote.is-style-plain p {
	font-family: var(--wp--preset--font-family--gascogne);
	font-weight: 300;
	font-size: 22px;
	line-height: 1.45;
}
.wp-block-quote.is-style-featured {
	border: 0;
	padding: 0;
	margin-left: auto;
	margin-right: auto;
	max-width: 900px;
	text-align: center;
}
.wp-block-quote.is-style-featured p {
	font-family: var(--wp--preset--font-family--gascogne);
	font-weight: 300;
	font-size: clamp(26px, 2.8vw, 38px);
	line-height: 1.32;
}
.wp-block-quote cite {
	display: block;
	margin-top: 24px;
	font-style: normal;
	font-family: var(--wp--preset--font-family--noah);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
}
.is-style-card .wp-block-quote {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* ------------------------------------------------------------------
   FAQs (Details block)
   ------------------------------------------------------------------ */
.cm-faq {
	border-bottom: 1px solid rgba(51, 44, 26, 0.2);
}
.cm-faq .wp-block-details {
	border-top: 1px solid rgba(51, 44, 26, 0.2);
	margin: 0 !important;
	padding: 0;
}
.cm-faq .wp-block-details summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 72px;
	padding: 22px 0;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--noah);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	line-height: 1.7;
	color: var(--wp--preset--color--charcoal);
}
.cm-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}
.cm-faq .wp-block-details summary::after {
	content: "";
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border: 1.5px solid var(--wp--preset--color--tangerine);
	border-radius: 50%;
	box-sizing: border-box;
	background: no-repeat center / 14px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DD7B34' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.cm-faq .wp-block-details[open] summary::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DD7B34' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
.cm-faq .wp-block-details summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--cobalt);
	outline-offset: 4px;
}
.cm-faq .wp-block-details > :not(summary) {
	margin: 0;
	padding: 0 64px 28px 0;
}

/* ------------------------------------------------------------------
   Signup band (Flodesk form area)
   ------------------------------------------------------------------ */
.cm-signup-form-notice {
	border: 1.5px dashed rgba(255, 255, 255, 0.6);
	border-radius: 16px;
	padding: 24px;
	font-size: 15px;
	line-height: 1.6;
}

/* Applications closed message */
.cm-applications-closed {
	max-width: 640px;
	margin: 0 auto;
	padding: clamp(80px, 18vh, 200px) 24px;
	text-align: center;
	font-family: var(--wp--preset--font-family--noah);
	color: var(--wp--preset--color--charcoal);
}
.cm-applications-closed h1 {
	font-family: var(--wp--preset--font-family--gascogne);
	font-weight: 300;
	color: var(--wp--preset--color--cobalt);
	font-size: clamp(34px, 4vw, 52px);
	line-height: 1.12;
	margin: 0 0 18px;
}
.cm-applications-closed p {
	font-size: 18px;
	line-height: 1.7;
	margin: 0;
}

/* ------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------ */
@media (max-width: 781px) {
	/* Photos and marks stay a comfortable size on phones */
	.wp-block-image.is-style-oval img {
		max-width: 240px;
	}
	.wp-block-image.is-style-arch img {
		max-width: 300px;
	}
	.wp-block-image.is-style-mark img {
		max-width: 180px;
	}
	.cm-faq .wp-block-details > :not(summary) {
		padding-right: 0;
	}
	.cm-stat-item {
		border-left: 0;
		padding-left: 0;
		border-top: 1px solid rgba(51, 44, 26, 0.2);
		padding-top: 16px;
	}
}

/* Small accent touches (Tangerine is never used for text) */
.wp-block-separator.cm-accent-rule {
	width: 56px;
	height: 3px;
	border: 0;
	border-radius: 2px;
	margin: 12px auto !important;
	opacity: 1;
}
.cm-dot {
	display: flex;
	align-items: center;
	gap: 12px;
}
.cm-dot::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--tangerine);
	flex: 0 0 10px;
}
.cm-card-heading {
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(51, 44, 26, 0.15);
}

/* Sections sit edge to edge: no gaps between header, page sections and footer */
.wp-site-blocks > * + *,
.wp-block-post-content > .alignfull + .alignfull {
	margin-block-start: 0;
}
.wp-site-blocks > footer,
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* Line between the signup band and the footer */
.cm-footer > .wp-block-group.alignwide:first-child {
	border-top: 1px solid rgba(255, 255, 255, 0.35);
	padding-top: 56px;
}

/* Phones: logo and menu on one row */
@media (max-width: 600px) {
	.cm-header .wp-block-buttons {
		display: none;
	}
}

/* Product page previews */
.wp-block-image.is-style-page img {
	border-radius: 10px;
	box-shadow: 0 18px 40px rgba(51, 44, 26, 0.16), 0 2px 6px rgba(51, 44, 26, 0.08);
	width: 100%;
	height: auto;
}
.cm-price {
	font-family: var(--wp--preset--font-family--gascogne);
	font-weight: 300;
	font-size: clamp(56px, 6vw, 80px);
	line-height: 1;
	margin: 0;
}
.cm-story p {
	margin-block: 0 14px;
}
.cm-story .cm-beat {
	font-family: var(--wp--preset--font-family--gascogne);
	font-weight: 300;
	font-size: clamp(24px, 2.4vw, 30px);
	line-height: 1.3;
	color: var(--wp--preset--color--cobalt);
}
