/*
Theme Name: Compass Academic
Theme URI: https://example.com/compass-academic
Author: Compass Academic Advisors LLC
Description: A friendly, parent-focused block theme for Compass Academic Advisors. Sticky header with a full-page accordion menu, ready-made page patterns (home, service pages, booking, about), WooCommerce styling for the Compass Toolkit shop, and a one-click starter-page setup under Appearance → Compass Setup.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: compass-academic
Tags: block-patterns, full-site-editing, education, custom-colors, editor-style, wide-blocks
*/

/* ==========================================================================
   Basics
   ========================================================================== */

:root {
	--compass-radius: 28px;
	--compass-radius-sm: 18px;
	--compass-ink: var(--wp--preset--color--ink, #1C2240);
	--compass-primary: var(--wp--preset--color--primary, #2B3A8F);
	--compass-sun: var(--wp--preset--color--sun, #F7C548);
	--compass-line: var(--wp--preset--color--line, #E3E4F0);
	--compass-body: var(--wp--preset--color--body, #4A4F6A);
	--compass-header-offset: var(--wp-admin--admin-bar--height, 0px);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }

:where(.wp-site-blocks) > * { margin-block-start: 0; }

.screen-reader-text:focus { z-index: 100000; }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--compass-sun);
	outline-offset: 3px;
	border-radius: 6px;
}

/* Section spacing used by every pattern */
.compass-section {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
}
.compass-section.is-tight {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}
.compass-section + .compass-section.is-flush-top { padding-top: 0; }

.compass-lead {
	font-size: var(--wp--preset--font-size--large);
	color: var(--compass-body);
	max-width: 36rem;
}
.has-text-align-center.compass-lead,
.compass-lead.has-text-align-center { margin-left: auto; margin-right: auto; }

.compass-muted { color: var(--compass-body); }

/* The yellow squiggle: highlight any word in a heading (Highlight tool) */
:is(h1, h2, h3) mark {
	background-color: transparent !important;
	color: var(--compass-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M4 13 C 50 3, 90 17, 140 9 S 240 3, 296 11' fill='none' stroke='%23F7C548' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: 0 100% !important;
	background-size: 100% 0.32em !important;
	padding-bottom: 0.14em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.has-ink-background-color :is(h1, h2, h3) mark,
.compass-panel :is(h1, h2, h3) mark { color: var(--compass-sun); }

/* ==========================================================================
   Sticky header
   ========================================================================== */

.wp-site-blocks > header.wp-block-template-part,
header.wp-block-template-part:has(.compass-header) {
	position: sticky;
	top: var(--compass-header-offset);
	z-index: 50;
	margin-block-start: 0;
}
.compass-header {
	padding: 12px clamp(0.75rem, 2vw, 1rem) 0;
	pointer-events: none;
}
.compass-header > * { pointer-events: auto; }

.compass-header__bar {
	max-width: 1240px;
	margin-left: auto !important;
	margin-right: auto !important;
	background: #fff;
	border-radius: 22px;
	box-shadow: 0 6px 26px rgba(28, 34, 64, 0.12);
	padding: 10px 12px 10px 18px;
}

.compass-brand { gap: 10px !important; }
.compass-logo { margin: 0 !important; }
.compass-logo img { width: 42px; height: 42px; display: block; }

.compass-wordmark {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.3rem;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: #5B6080;
	font-weight: 500;
	white-space: nowrap;
}
.compass-wordmark a { color: inherit; text-decoration: none; font-weight: 500; }
.compass-wordmark strong { color: var(--compass-ink); font-weight: 800; }

.compass-header__actions { gap: 10px !important; }

/* "Book a consultation" pill with calendar dot */
.compass-book-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 6px 6px 6px 22px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	background: var(--compass-sun);
	color: var(--compass-ink);
}
.compass-book-btn .wp-block-button__link::after {
	content: "";
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2240' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4'/%3E%3C/svg%3E") center / 18px no-repeat;
	flex: 0 0 auto;
}
.compass-book-btn .wp-block-button__link:hover { background: var(--compass-ink); color: #fff; }

/* Mini cart icon */
.compass-header .wc-block-mini-cart__button { border-radius: 50%; background: var(--wp--preset--color--mist); width: 46px; height: 46px; justify-content: center; padding: 0; }
.compass-header .wc-block-mini-cart__badge { background: var(--compass-primary); color: #fff; }
.compass-header .wc-block-mini-cart__amount { display: none; }

@media (max-width: 640px) {
	.compass-wordmark { font-size: 1.05rem; white-space: normal; max-width: 9.5rem; }
	.compass-header__actions > .wp-block-buttons { display: none !important; }
	.compass-header__bar { padding: 8px 8px 8px 12px; flex-wrap: nowrap !important; }
	.compass-menu .wp-block-navigation__responsive-container-open { padding-left: 16px; }
}

/* ==========================================================================
   Menu button + full-page accordion menu (core Navigation block)
   ========================================================================== */

.compass-menu .wp-block-navigation__responsive-container-open {
	display: inline-flex !important;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--compass-ink);
	background: var(--wp--preset--color--mist);
	border: 2px solid var(--compass-ink);
	border-radius: 999px;
	padding: 4px 4px 4px 22px;
	min-height: 48px;
	cursor: pointer;
}
.compass-menu .wp-block-navigation__responsive-container-open::after {
	content: "";
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2240' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 9h14M5 15h14'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.compass-menu .wp-block-navigation__responsive-container-open:hover { background: #fff; }

/* Overlay */
.compass-menu .wp-block-navigation__responsive-container.is-menu-open {
	background: #fff !important;
	color: var(--compass-ink) !important;
	padding: 0 !important;
	top: var(--compass-header-offset);
}
.compass-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	max-width: 1240px;
	margin: 0 auto;
	padding: 22px clamp(1rem, 4vw, 2rem) 64px;
}
.compass-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	margin-top: 0 !important;
}

/* Close button: "Close ✕" pill in the top-right */
.compass-menu .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 26px;
	right: 0;
	display: inline-flex !important;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--compass-ink);
	background: var(--wp--preset--color--mist) !important;
	border-radius: 999px;
	padding: 10px 18px 10px 22px;
	z-index: 3;
}
.compass-menu .wp-block-navigation__responsive-container-close::after {
	content: "";
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2240' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Brand + CTA bar that menu.js copies into the overlay */
.compass-menu-top {
	display: flex;
	margin-top: 4px;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	min-height: 52px;
	padding-right: 140px;
	margin-bottom: clamp(1.5rem, 5vw, 3rem);
}
.compass-menu-top .compass-brand { display: flex; align-items: center; }
.compass-menu-top .compass-book-btn { display: block !important; }

/* Menu items */
.compass-menu .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch !important;
	padding-top: 0 !important;
}
.compass-menu .is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0 !important;
	align-items: stretch !important;
}
.compass-menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
	border-bottom: 2px solid var(--compass-line);
	align-items: stretch !important;
}
.compass-menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 22px 4px !important;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: clamp(1.9rem, 5vw, 3.25rem);
	line-height: 1.15;
	color: var(--compass-ink);
	text-decoration: none;
	text-align: left;
	background: transparent;
	border: 0;
	cursor: pointer;
}
.compass-menu .is-menu-open .wp-block-navigation-submenu__toggle::after {
	content: "+";
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--mist);
	font-size: 1.6rem;
	font-weight: 600;
	margin-left: 16px;
}
.compass-menu .is-menu-open .compass-open > .wp-block-navigation-submenu__toggle { color: var(--wp--preset--color--accent); }
.compass-menu .is-menu-open .compass-open > .wp-block-navigation-submenu__toggle::after { content: "\2212"; background: var(--compass-sun); color: var(--compass-ink); }
.compass-menu .is-menu-open .wp-block-navigation__submenu-icon { display: none !important; }

/* Accordion: submenus are hidden until their heading is opened */
body .compass-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item.has-child:not(.compass-open) > .wp-block-navigation__submenu-container {
	display: none !important;
}
body .compass-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
	padding: 0 4px 26px !important;
	gap: 2px !important;
	border: 0 !important;
	background: transparent !important;
}
.compass-menu .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 1.25rem;
	font-weight: 500;
	color: #2F3450;
	padding: 8px 0 !important;
	text-decoration: none;
}
.compass-menu .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--compass-primary); text-decoration: underline; }

/* Desktop safety: the menu is always shown as the overlay, never inline */
.compass-menu .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }

/* ==========================================================================
   Block style variations (pick them in the editor's Styles panel)
   ========================================================================== */

/* Eyebrow chip */
p.is-style-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	background: var(--wp--preset--color--lavender);
	color: var(--compass-primary);
	padding: 7px 16px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.9375rem;
}
p.is-style-eyebrow::before {
	content: "";
	width: 14px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z' fill='%232B3A8F'/%3E%3C/svg%3E") center / contain no-repeat;
}
p.is-style-eyebrow.has-text-align-center { margin-left: auto; margin-right: auto; }

/* Stickers */
p[class*="is-style-sticker"] {
	display: inline-block;
	width: fit-content;
	padding: 8px 16px;
	border-radius: 14px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.3;
	transform: rotate(-4deg);
}
p[class*="is-style-sticker"].has-text-align-center { display: block; margin-left: auto !important; margin-right: auto !important; }
p.is-style-sticker { background: #fff; border: 2px solid var(--compass-ink); box-shadow: 4px 4px 0 var(--compass-ink); color: var(--compass-ink); }
p.is-style-sticker-dark { background: var(--compass-ink); color: var(--compass-sun); transform: rotate(-3deg); }
p.is-style-sticker-accent { background: var(--wp--preset--color--accent); color: #fff; box-shadow: 4px 4px 0 var(--compass-ink); transform: rotate(4deg); }
p.is-style-sticker-sun { background: var(--compass-sun); color: var(--compass-ink); transform: rotate(3deg); }

/* Speech bubble */
p.is-style-bubble {
	background: #fff;
	border-radius: 24px 24px 24px 6px;
	padding: 24px 26px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.35;
	box-sizing: border-box;
	margin: 0;
}
.is-layout-grid > p.is-style-bubble { height: 100%; }

/* Number tile used in steps */
p.is-style-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: var(--compass-sun);
	color: var(--compass-ink) !important;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 1.6rem;
	transform: rotate(-6deg);
	margin-bottom: 0.5rem;
}
.wp-block-column:nth-child(2) > p.is-style-number { background: var(--wp--preset--color--periwinkle); transform: rotate(5deg); }
.wp-block-column:nth-child(3) > p.is-style-number { background: #fff; transform: rotate(-3deg); box-shadow: inset 0 0 0 2px var(--compass-ink); }

/* Cards */
.wp-block-group.is-style-card,
.wp-block-group.is-style-card-bold,
.wp-block-group.is-style-card-soft,
.wp-block-group.is-style-card-filled {
	border-radius: var(--compass-radius);
	padding: clamp(1.4rem, 3vw, 2rem);
	box-sizing: border-box;
}
.is-layout-grid > .wp-block-group[class*="is-style-card"] { height: 100%; }
.wp-block-column > .wp-block-group[class*="is-style-card"] + .wp-block-group[class*="is-style-card"] { margin-top: 1.5rem; }
.wp-block-group.is-style-card { border: 2px solid var(--compass-line); background: #fff; }
.wp-block-group.is-style-card-bold { border: 3px solid var(--compass-ink); background: #fff; box-shadow: 6px 6px 0 var(--compass-sun); position: relative; }
.wp-block-group.is-style-card-soft { background: #fff; box-shadow: 0 10px 34px rgba(28, 34, 64, 0.1); }
.wp-block-group.is-style-card-filled { background: var(--wp--preset--color--mist); }
.wp-block-group[class*="is-style-card"] > * { margin-block-start: 0; }
.wp-block-group[class*="is-style-card"] > * + * { margin-block-start: 0.75rem; }
.wp-block-group[class*="is-style-card"] h3 { margin-top: 0.9rem; }

/* Ribbon inside a bold card ("Most families start here") */
.is-style-card-bold > p[class*="is-style-sticker"]:first-child {
	position: absolute;
	top: -20px;
	right: 22px;
	margin: 0;
	font-size: 0.9375rem;
	padding: 4px 14px;
}

/* Dark panel (steps) */
.wp-block-group.compass-panel {
	border-radius: 36px;
	padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
	position: relative;
	overflow: hidden;
}
.wp-block-group.compass-panel::after {
	content: "";
	position: absolute;
	top: 28px;
	right: 36px;
	width: 52px;
	height: 52px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z' fill='%23F7C548'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}
.compass-panel .wp-block-column p:not(.is-style-number) { color: #C8CCE6; }
.compass-panel h3 { color: #fff; }

/* Rounded strip (benefits, notes) */
.wp-block-group.compass-strip {
	border-radius: var(--compass-radius);
	padding: 1.75rem 2rem;
}

/* Images */
.wp-block-image.is-style-blob img {
	border-radius: 42% 58% 52% 48% / 50% 44% 56% 50%;
	border: 8px solid #fff;
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}
.wp-block-image.is-style-arch img {
	border-radius: 200px 200px 32px 32px;
	border: 8px solid #fff;
	box-sizing: border-box;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
}
.wp-block-image.is-style-rounded-card img {
	border-radius: var(--compass-radius);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}
.wp-block-image.compass-icon { margin: 0 !important; }
.wp-block-image.compass-icon img { width: 52px; height: 52px; display: block; }

/* Lists */
ul.is-style-checklist,
ul.is-style-checklist-cards { list-style: none; padding-left: 0; }
ul.is-style-checklist li {
	position: relative;
	padding-left: 34px;
	margin-bottom: 0.6rem;
	font-weight: 600;
}
ul.is-style-checklist li::before,
ul.is-style-checklist-cards li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.12em;
	width: 22px;
	height: 22px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23F7C548'/%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%231C2240' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
ul.is-style-checklist-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}
ul.is-style-checklist-cards li {
	position: relative;
	background: #fff;
	border-radius: var(--compass-radius-sm);
	padding: 16px 20px 16px 52px;
	font-weight: 500;
	margin: 0;
}
ul.is-style-checklist-cards li::before { left: 20px; top: 18px; }
.compass-benefits ul.is-style-checklist { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 0; }
.compass-benefits ul.is-style-checklist li { margin: 0; }
.compass-benefits ul.is-style-checklist li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%231C2240'/%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%23F7C548' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Pricing price line */
.compass-price { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 2.5rem; line-height: 1.1; color: var(--compass-ink); }
.compass-price span, .compass-price em { font-size: 1.1rem; font-weight: 500; font-style: normal; color: #5B6080; }

/* ==========================================================================
   Hero artwork (photo + floating stickers)
   ========================================================================== */

.compass-hero-art {
	position: relative;
	max-width: 520px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 6% 4%;
}
.compass-hero-art::before {
	content: "";
	position: absolute;
	width: 74%;
	aspect-ratio: 1 / 1;
	top: 2%;
	right: 0;
	background: var(--compass-sun);
	border-radius: 50%;
	z-index: 0;
}
.compass-hero-art::after {
	content: "";
	position: absolute;
	width: 9%;
	aspect-ratio: 1 / 1;
	top: 0;
	right: 22%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z' fill='%237B80C8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.compass-hero-art.is-lavender::before { background: var(--wp--preset--color--lavender); }
.compass-hero-art > .wp-block-image { position: relative; z-index: 1; margin: 0 !important; width: 86%; }
.compass-hero-art > p[class*="is-style-sticker"] { position: absolute; z-index: 2; margin: 0 !important; }
.compass-hero-art > p[class*="is-style-sticker"]:nth-of-type(1) { top: 4%; left: 0; }
.compass-hero-art > p[class*="is-style-sticker"]:nth-of-type(2) { top: 44%; right: 0; }
.compass-hero-art > p[class*="is-style-sticker"]:nth-of-type(3) { bottom: 4%; left: 6%; }
.compass-hero-art > p[class*="is-style-sticker"]:nth-of-type(4) { bottom: 14%; right: 4%; }

.compass-about-art { position: relative; max-width: 400px; }
.compass-about-art::before {
	content: "";
	position: absolute;
	width: 30%;
	aspect-ratio: 1 / 1;
	top: -4%;
	right: -2%;
	background: var(--compass-sun);
	border-radius: 50%;
}
.compass-about-art > .wp-block-image { position: relative; margin: 0 !important; }
.compass-about-art > p[class*="is-style-sticker"] { position: absolute; bottom: 8%; left: -4%; margin: 0 !important; z-index: 2; }

@media (max-width: 600px) {
	.compass-hero-art > p[class*="is-style-sticker"] { font-size: 0.9rem; padding: 6px 12px; }
	.compass-about-art > p[class*="is-style-sticker"] { left: 0; }
}

/* ==========================================================================
   Sections
   ========================================================================== */

.compass-hero { position: relative; overflow: hidden; }
.compass-hero h1 { margin-top: 1.25rem; }

.compass-cta-band { position: relative; overflow: hidden; }
.compass-cta-band::after {
	content: "";
	position: absolute;
	top: 24px;
	right: 6%;
	width: 130px;
	height: 76px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70' fill='none' stroke='%231C2240' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 60 C 20 30, 50 50, 66 24' stroke-dasharray='5 7'/%3E%3Cpath d='M70 22 L 112 6 L 92 44 L 84 30 Z'/%3E%3Cpath d='M84 30 L 112 6'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
	opacity: 0.9;
}
@media (max-width: 700px) { .compass-cta-band::after { display: none; } }

.compass-has-sparkles { position: relative; }
.compass-has-sparkles::before {
	content: "";
	position: absolute;
	top: 56px;
	right: 12%;
	width: 44px;
	height: 44px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z' fill='%23F7C548'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}

/* Breadcrumb line on sub pages */
.compass-breadcrumb { font-size: 0.9375rem; color: #5B6080; }
.compass-breadcrumb a { color: #5B6080; font-weight: 500; }
.compass-breadcrumb strong { color: var(--compass-ink); }

/* Placeholder box for embeds (booking calendar, forms) */
.wp-block-group.compass-embed-placeholder {
	border: 2px dashed #B9BCDD;
	border-radius: var(--compass-radius);
	padding: 2rem;
	background: var(--wp--preset--color--mist);
	text-align: center;
	color: var(--compass-body);
}

/* FAQ */
.wp-block-details summary {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.2rem;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 16px;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--compass-primary); }
.wp-block-details[open] summary::after { content: "\2212"; }
.wp-block-details > p { color: var(--compass-body); margin-top: 0.75rem; }

/* Footer */
.compass-footer a { color: #fff; font-weight: 500; }
.compass-footer .compass-wordmark,
.compass-footer .compass-wordmark strong { color: #fff; }
.compass-footer .compass-brand { margin-bottom: 1.5rem; }
.compass-footer a:hover { color: var(--compass-sun); }
.compass-footer .compass-footer__fine { border-top: 1px solid #343B63; padding-top: 1.1rem; color: #C8CCE6; }
.compass-footer .compass-footer__fine a { color: #C8CCE6; }

/* ==========================================================================
   Content pages (blog posts, policies)
   ========================================================================== */

.compass-page-title { padding-top: var(--wp--preset--spacing--60); }
.wp-block-post-content > :where(p, ul, ol) { max-width: 760px; }

/* ==========================================================================
   WooCommerce (Compass Toolkit)
   ========================================================================== */

.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.wc-block-components-button:not(.is-link) {
	border-radius: 999px !important;
	font-weight: 700 !important;
	background: var(--compass-primary) !important;
	color: #fff !important;
	border: 0 !important;
	padding: 0.85rem 1.4rem !important;
}
.woocommerce .button:hover,
.wc-block-components-button:not(.is-link):hover { background: var(--compass-ink) !important; }

/* Product cards: classic loop + block-based product collection */
.woocommerce ul.products li.product,
.wc-block-product,
.wc-block-grid__product {
	border: 2px solid var(--compass-line);
	border-radius: var(--compass-radius);
	overflow: hidden;
	background: #fff;
	padding: 0 0 1.25rem !important;
	text-align: left !important;
	display: flex;
	flex-direction: column;
}
.woocommerce ul.products li.product > *:not(a:first-child),
.wc-block-product > *:not(:first-child),
.wc-block-grid__product > *:not(:first-child) { margin-left: 1.25rem !important; margin-right: 1.25rem !important; }
.woocommerce ul.products li.product a img,
.wc-block-product .wc-block-components-product-image img,
.wc-block-grid__product-image img {
	margin: 0 0 1rem !important;
	aspect-ratio: 16 / 11;
	object-fit: cover;
	border-radius: 0 !important;
	background: var(--wp--preset--color--lavender);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-product .wp-block-post-title,
.wc-block-grid__product-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-weight: 700 !important;
	font-size: 1.2rem !important;
	color: var(--compass-ink) !important;
	padding: 0 1.25rem !important;
	text-align: left !important;
}
.woocommerce ul.products li.product .price,
.wc-block-components-product-price { color: var(--compass-ink) !important; font-weight: 700 !important; font-size: 1.1rem !important; }
.woocommerce ul.products li.product .price { padding: 0 1.25rem; }
.woocommerce ul.products li.product .button { margin: auto 1.25rem 0 !important; align-self: flex-start; }
.woocommerce span.onsale { background: var(--compass-sun); color: var(--compass-ink); border-radius: 12px; font-weight: 700; }

/* Single product */
.woocommerce div.product .product_title { font-family: var(--wp--preset--font-family--heading); font-weight: 800; }
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--compass-ink); font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 2rem; }
.woocommerce div.product div.images img,
.wc-block-components-product-image img { border-radius: var(--compass-radius); }
.woocommerce div.product .woocommerce-tabs ul.tabs li { border-radius: 999px 999px 0 0; }

/* Cart & checkout blocks */
.wc-block-cart,
.wc-block-checkout { font-family: var(--wp--preset--font-family--body); }
.wc-block-components-sidebar-layout .wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block {
	border-radius: var(--compass-radius-sm);
}
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	border-radius: 14px !important;
	border: 2px solid #D5D7E8 !important;
}
.woocommerce-message,
.woocommerce-info,
.wc-block-components-notice-banner { border-radius: var(--compass-radius-sm); border-top-color: var(--compass-primary); }
.woocommerce-message::before,
.woocommerce-info::before { color: var(--compass-primary); }

/* Product category filter buttons (if you add them with the Product Filters block) */
.wc-block-product-categories-list-item a,
.wp-block-woocommerce-product-filters .wc-block-components-chip { border-radius: 999px; }