/* ============================================================
   Chrome — Header + Footer + Default page
   Always loaded (enqueued in functions.php). Replaces GP's chrome
   entirely so the site is under our layout control.
   ============================================================ */

/* ---------- Root site wrapper ---------- */
.ccd-body { background: var(--bg-page); color: var(--text-body); }
.ccd-site { display: flex; flex-direction: column; min-height: 100vh; }
.ccd-main { flex: 1 0 auto; }
.ccd-site-footer { flex-shrink: 0; }

/* Site-wide container. Must be here (not only in home.css) so pages that
   don't enqueue home.css — Cart, Checkout, T&C, Privacy, Refund — still get
   centered content with edge padding. */
.ccd-container {
	max-width: var(--container-max, 1240px);
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 48px);
	box-sizing: border-box;
	width: 100%;
}

/* Neutralise GP's wrappers when they wrap our custom templates.
   GP renders .content-area > .site-main > article > .inside-article >
   .entry-content around Woo templates; those all have their own max-widths
   and padding that constrain the ccd-containers inside. Flatten them so
   our own layout is in charge. */
.ccd-body #ccd-main .content-area,
.ccd-body #ccd-main .site-main,
.ccd-body #ccd-main article.post,
.ccd-body #ccd-main article.product,
.ccd-body #ccd-main article.page,
.ccd-body #ccd-main .inside-article,
.ccd-body #ccd-main .entry-content,
.ccd-body #ccd-main .featured-image.page-header-image-single,
.ccd-body #ccd-main .grid-container.grid-parent {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}

.ccd-body .site.grid-container { max-width: none; padding: 0; }
.ccd-body .site-content { padding: 0; }

/* ---------- Skip link ---------- */
.ccd-skip-link {
	position: absolute; top: -100px; left: 8px;
	background: var(--brand); color: var(--brand-contrast);
	padding: 10px 16px; z-index: 999;
	text-decoration: none; font-weight: 600;
	border-radius: var(--radius-sm, 3px);
}
.ccd-skip-link:focus { top: 8px; }

/* ---------- Header ---------- */
.ccd-site-header {
	background: var(--bg-page);
	border-bottom: 1px solid var(--border-subtle);
	position: sticky;
	top: 0;
	z-index: 20;
	backdrop-filter: saturate(1.2);
}
.ccd-site-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 72px;
	padding-block: 14px;
}

/* Brand */
.ccd-site-header__brand {
	display: inline-flex; align-items: center; gap: 12px;
	text-decoration: none; color: var(--text-strong);
	flex-shrink: 0;
}
.ccd-site-header__logo {
	width: 48px; height: 48px;
	object-fit: contain;
}
.ccd-site-header__wordmark {
	display: flex; flex-direction: column;
	line-height: 1;
	font-family: var(--font-heading);
	font-weight: 700;
	letter-spacing: -0.02em;
}
.ccd-site-header__wm-primary { font-size: 15px; color: var(--text-muted); }
.ccd-site-header__wm-secondary { font-size: 22px; color: var(--text-strong); text-transform: uppercase; letter-spacing: 0.02em; }
@media (max-width: 640px) {
	.ccd-site-header__wordmark { display: none; }
}

/* Horizontal color logo variant — bigger, sized by height so aspect ratio
   handles itself for whatever lockup gets swapped in. */
.ccd-site-header__logo--horiz {
	width: auto;
	height: 96px;
	max-height: 96px;
	object-fit: contain;
	display: block;
}
.ccd-site-header__brand--horiz { padding-block: 6px; }
/* Header row grows to fit the bigger logo */
.ccd-site-header__inner { min-height: 108px; }
@media (max-width: 640px) {
	.ccd-site-header__logo--horiz { height: 60px; }
	.ccd-site-header__inner { min-height: 76px; }
}

/* Primary nav */
.ccd-site-header__nav { flex: 1 1 auto; display: flex; justify-content: center; }
.ccd-menu {
	list-style: none; padding: 0; margin: 0;
	display: flex; gap: 4px; align-items: center;
}
.ccd-menu li { position: relative; }
.ccd-menu > li > a {
	display: inline-block;
	padding: 10px 16px;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 14px;
	color: var(--text-body);
	text-decoration: none;
	border-radius: var(--radius-sm, 3px);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	transition: background-color .12s ease, color .12s ease;
}
.ccd-menu > li > a:hover,
.ccd-menu > li.current-menu-item > a,
.ccd-menu > li.current_page_item > a {
	color: var(--brand);
	background: var(--sectional-50);
}
.ccd-menu > li > a:focus-visible {
	outline: 2px solid var(--focus-ring); outline-offset: 2px;
}
/* Caret on parent items so the "there's more here" affordance is visible. */
.ccd-menu > li.menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 0; height: 0;
	margin-left: 6px;
	vertical-align: 2px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
	opacity: 0.6;
	transition: transform .15s ease, opacity .15s ease;
}
.ccd-menu > li.menu-item-has-children:hover > a::after,
.ccd-menu > li.menu-item-has-children:focus-within > a::after {
	opacity: 1;
	transform: translateY(1px);
}

/* Submenus */
.ccd-menu .sub-menu {
	position: absolute; top: 100%; left: 0;
	background: var(--surface-raised);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-sm, 3px);
	list-style: none; padding: 8px 0; margin: 0;
	min-width: 220px;
	box-shadow: 0 8px 24px rgba(20, 23, 26, .12);
	opacity: 0; pointer-events: none;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease;
	z-index: 30;
}
.ccd-menu li:hover > .sub-menu,
.ccd-menu li:focus-within > .sub-menu {
	opacity: 1; pointer-events: auto; transform: translateY(0);
}
.ccd-menu .sub-menu a {
	display: block; padding: 10px 16px;
	font-size: 14px; color: var(--text-body);
	text-decoration: none;
	text-transform: none; letter-spacing: 0;
	font-weight: 500;
}
.ccd-menu .sub-menu a:hover { background: var(--sectional-50); color: var(--brand); }

/* Header actions */
.ccd-site-header__actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

.ccd-site-header__cart {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 10px 14px;
	color: var(--text-strong);
	text-decoration: none;
	background: transparent;
	border-radius: var(--radius-sm, 3px);
	transition: background-color .12s ease;
}
.ccd-site-header__cart:hover { background: var(--surface-card); color: var(--brand); }
.ccd-site-header__cart:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ccd-site-header__cart-count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 22px; height: 22px;
	padding: 0 6px;
	background: var(--accent);
	color: var(--accent-contrast);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
}

.ccd-site-header__toggle {
	display: none;
	background: transparent; border: 0;
	padding: 10px; cursor: pointer;
	color: var(--text-strong);
	border-radius: var(--radius-sm, 3px);
}
.ccd-site-header__toggle:hover { background: var(--surface-card); }
.ccd-site-header__toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Mobile */
@media (max-width: 900px) {
	.ccd-site-header__toggle { display: inline-flex; }
	.ccd-site-header__nav {
		position: absolute; top: 100%; left: 0; right: 0;
		background: var(--surface-raised);
		border-bottom: 1px solid var(--border-default);
		box-shadow: 0 8px 24px rgba(20, 23, 26, .12);
		max-height: 0; overflow: hidden;
		transition: max-height .3s ease;
	}
	.ccd-site-header.is-open .ccd-site-header__nav { max-height: 80vh; }
	.ccd-menu {
		flex-direction: column; align-items: stretch;
		padding: 12px;
	}
	.ccd-menu > li > a {
		display: block; padding: 14px 16px;
		border-radius: var(--radius-sm, 3px);
	}
	.ccd-menu .sub-menu {
		position: static; opacity: 1; pointer-events: auto; transform: none;
		box-shadow: none; border: 0; padding: 0 0 0 16px;
		background: transparent; min-width: 0;
	}
}

/* ---------- Cart drawer ---------- */
.ccd-cart-drawer {
	position: fixed; inset: 0;
	z-index: 100;
	pointer-events: none;
	visibility: hidden;
}
.ccd-cart-drawer.is-open { pointer-events: auto; visibility: visible; }

.ccd-cart-drawer__backdrop {
	position: absolute; inset: 0;
	background: rgba(20, 23, 26, .45);
	opacity: 0;
	transition: opacity .22s ease;
}
.ccd-cart-drawer.is-open .ccd-cart-drawer__backdrop { opacity: 1; }

.ccd-cart-drawer__panel {
	position: absolute; top: 0; right: 0; bottom: 0;
	width: min(420px, 96vw);
	background: var(--surface-raised);
	box-shadow: -12px 0 40px rgba(20, 23, 26, .22);
	transform: translateX(100%);
	transition: transform .28s cubic-bezier(.22, .8, .3, 1);
	display: flex; flex-direction: column;
	outline: none;
}
.ccd-cart-drawer.is-open .ccd-cart-drawer__panel { transform: translateX(0); }

.ccd-cart-drawer__header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid var(--border-subtle);
	background: var(--bg-page);
}
.ccd-cart-drawer__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 18px;
	color: var(--text-strong);
	margin: 0;
	letter-spacing: -0.01em;
}
.ccd-cart-drawer__close {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px;
	background: transparent; border: 1px solid var(--border-default);
	border-radius: 999px;
	color: var(--text-body);
	cursor: pointer;
	transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}
.ccd-cart-drawer__close:hover { background: var(--surface-card); color: var(--text-strong); border-color: var(--border-strong); }
.ccd-cart-drawer__close:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.ccd-cart-drawer__content {
	flex: 1; overflow-y: auto; padding: 16px 20px;
	background: var(--surface-raised);
}

/* Style Woo's mini-cart output inside the drawer */
.ccd-cart-drawer__content ul.woocommerce-mini-cart {
	list-style: none; padding: 0; margin: 0 0 16px;
}
.ccd-cart-drawer__content ul.woocommerce-mini-cart li.mini_cart_item {
	position: relative;
	padding: 14px 24px 14px 0;
	border-bottom: 1px solid var(--border-subtle);
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
}
.ccd-cart-drawer__content ul.woocommerce-mini-cart li.mini_cart_item img {
	width: 56px; height: 56px;
	object-fit: contain;
	background: var(--paper-50);
	border-radius: var(--radius-sm, 3px);
	padding: 4px;
	margin: 0 !important;
	float: none !important;
}
.ccd-cart-drawer__content ul.woocommerce-mini-cart li.mini_cart_item a:not(.remove) {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 14px;
	color: var(--text-strong);
	text-decoration: none;
	line-height: 1.3;
	display: block;
	margin-bottom: 4px;
}
.ccd-cart-drawer__content ul.woocommerce-mini-cart li.mini_cart_item a:hover { color: var(--brand); }
.ccd-cart-drawer__content ul.woocommerce-mini-cart li.mini_cart_item .quantity {
	display: block;
	border: 0;
	background: transparent;
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--text-body);
	padding: 0;
}
.ccd-cart-drawer__content ul.woocommerce-mini-cart li.mini_cart_item .quantity .amount {
	color: var(--accent); font-weight: 600;
}
.ccd-cart-drawer__content ul.woocommerce-mini-cart li.mini_cart_item a.remove {
	position: absolute; right: 0; top: 14px;
	width: 22px; height: 22px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--border-default);
	border-radius: 999px;
	color: var(--text-faint) !important;
	font-size: 14px; font-weight: 400;
	background: transparent !important;
	line-height: 1;
	transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}
.ccd-cart-drawer__content ul.woocommerce-mini-cart li.mini_cart_item a.remove:hover {
	color: var(--white) !important;
	background: var(--danger) !important;
	border-color: var(--danger);
}

.ccd-cart-drawer__content p.woocommerce-mini-cart__total {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: 14px 0;
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 15px;
	color: var(--text-body);
	border-bottom: 1px solid var(--border-subtle);
}
.ccd-cart-drawer__content p.woocommerce-mini-cart__total .amount {
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 18px;
	color: var(--text-strong);
	font-variant-numeric: tabular-nums;
}

.ccd-cart-drawer__content p.woocommerce-mini-cart__buttons {
	display: grid; gap: 8px;
	padding: 16px 0 4px;
	margin: 0;
}
.ccd-cart-drawer__content p.woocommerce-mini-cart__buttons a.button {
	display: block;
	padding: 12px 20px;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	border-radius: var(--radius-sm, 3px);
	border: 1.5px solid var(--brand);
	background: transparent;
	color: var(--brand);
	transition: background-color .12s ease, color .12s ease, transform .12s ease;
}
.ccd-cart-drawer__content p.woocommerce-mini-cart__buttons a.button:hover {
	background: var(--brand); color: var(--brand-contrast);
}
.ccd-cart-drawer__content p.woocommerce-mini-cart__buttons a.checkout {
	background: var(--accent);
	color: var(--accent-contrast);
	border-color: var(--accent);
}
.ccd-cart-drawer__content p.woocommerce-mini-cart__buttons a.checkout:hover {
	background: var(--accent-strong);
	border-color: var(--accent-strong);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(176, 58, 110, .28);
}

.ccd-cart-drawer__content p.woocommerce-mini-cart__empty-message {
	padding: 40px 20px;
	text-align: center;
	font-size: 15px;
	color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
	.ccd-cart-drawer__panel { transition: none; }
	.ccd-cart-drawer__backdrop { transition: none; }
}

/* ---------- Footer ---------- */
.ccd-site-footer {
	background: var(--surface-inverse);
	color: var(--text-on-dark);
	padding-top: clamp(48px, 6vw, 80px);
	padding-bottom: 24px;
	margin-top: clamp(48px, 6vw, 80px);
}
.ccd-site-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: clamp(24px, 4vw, 56px);
	margin-bottom: clamp(32px, 4vw, 48px);
}
@media (max-width: 900px) { .ccd-site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ccd-site-footer__grid { grid-template-columns: 1fr; } }

.ccd-site-footer__brand {}
.ccd-site-footer__logo { max-width: 220px; height: auto; margin-bottom: 20px; display: block; }
.ccd-site-footer__lede {
	font-size: 14px; line-height: 1.6;
	color: var(--text-on-dark); opacity: .85;
	margin: 0 0 20px; max-width: 42ch;
}
.ccd-site-footer__casa {
	display: block;
	max-width: 320px;
	border-radius: var(--radius-sm, 3px);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}
.ccd-site-footer__casa:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.ccd-site-footer__casa img { width: 100%; height: auto; display: block; }
.ccd-site-footer__casa:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.ccd-site-footer__badge {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 10px 14px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--radius-sm, 3px);
	font-size: 13px;
	font-weight: 500;
	color: var(--white);
	margin: 0;
}
.ccd-site-footer__badge-eyebrow {
	color: var(--accent);
	margin: 0;
}

.ccd-site-footer__col {}
.ccd-site-footer__col-title {
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 12px;
	font-weight: 500;
	color: var(--white);
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.ccd-site-footer__list {
	list-style: none; padding: 0; margin: 0;
	display: grid; gap: 8px;
}
.ccd-site-footer__list a {
	color: var(--text-on-dark);
	opacity: .8;
	text-decoration: none;
	font-size: 14px;
	line-height: 1.5;
	transition: opacity .12s ease, color .12s ease;
}
.ccd-site-footer__list a:hover { opacity: 1; color: var(--accent); }

/* Screen-reader only helper */
.ccd-sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Social + Google Maps row — sits above payments strip */
.ccd-site-footer__social-row {
	padding: 20px 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 20px;
}
.ccd-site-footer__social {
	display: flex; align-items: center; gap: 14px;
}
.ccd-site-footer__social-label { color: var(--text-on-dark); opacity: .6; margin: 0; }
.ccd-site-footer__social-list {
	list-style: none; padding: 0; margin: 0;
	display: flex; gap: 10px;
}
.ccd-site-footer__social-list a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	color: var(--white);
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 999px;
	transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.ccd-site-footer__social-list a:hover {
	background: var(--accent);
	border-color: var(--accent);
	transform: translateY(-1px);
}
.ccd-site-footer__social-list a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ccd-site-footer__social-list a[data-social-placeholder] {
	opacity: .5;
	cursor: default;
}
.ccd-site-footer__social-list a[data-social-placeholder]:hover {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .12);
	transform: none;
}

.ccd-site-footer__gmb {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--text-on-dark);
	opacity: .8;
	text-decoration: none;
	font-size: 13px;
	line-height: 1.4;
}
.ccd-site-footer__gmb:hover { opacity: 1; color: var(--accent); }
.ccd-site-footer__gmb svg { flex-shrink: 0; }

.ccd-site-footer__payments {
	display: flex; align-items: center; gap: 12px;
	flex-wrap: wrap;
	justify-content: flex-end;
}
/* Bottom bar — copyright left, payments right (merged from the old
   __payments strip + __meta rows so the footer stays compact). */
.ccd-site-footer__bottom {
	padding: 18px 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
	display: flex; align-items: center; gap: 20px;
	flex-wrap: wrap;
	justify-content: space-between;
	font-size: 12px;
	color: var(--text-on-dark);
}
.ccd-site-footer__bottom .ccd-site-footer__copy { margin: 0; opacity: .82; }
.ccd-site-footer__bottom .ccd-site-footer__copy a { color: var(--accent); text-decoration: none; }
.ccd-site-footer__bottom .ccd-site-footer__copy a:hover { text-decoration: underline; }
.ccd-site-footer__payments-label {
	color: var(--text-on-dark); opacity: .6;
	margin: 0;
	font-size: 11px;
}
.ccd-site-footer__payments-img {
	/* Explicit height + auto width preserves the native aspect ratio of the
	   payment badges (502x52 native). max-width defensive against overflow. */
	width: auto;
	height: 24px;
	max-height: 24px;
	max-width: 260px;
	object-fit: contain;
	filter: brightness(1.05);
}

.ccd-site-footer__meta {
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	flex-wrap: wrap;
	font-size: 12px;
	color: var(--text-on-dark);
	opacity: .7;
}
.ccd-site-footer__meta p { margin: 0; }
.ccd-site-footer__meta a { color: var(--accent); text-decoration: none; }
.ccd-site-footer__meta a:hover { text-decoration: underline; }

/* ---------- Default page template ---------- */
.ccd-page { padding-block: clamp(40px, 5vw, 72px); }
.ccd-page__head { margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--border-subtle); }
.ccd-page__title {
	font-family: var(--font-display, var(--font-heading));
	font-weight: 700;
	font-size: clamp(28px, 4vw, 44px);
	letter-spacing: -0.02em;
	color: var(--text-strong);
	margin: 0;
}
.ccd-page__body {
	font-size: 17px; line-height: 1.65;
	color: var(--text-body);
	max-width: 72ch;
}
.ccd-page__body h2, .ccd-page__body h3 {
	font-family: var(--font-heading); color: var(--text-strong);
	letter-spacing: -0.01em;
}
.ccd-page__body h2 { font-size: 24px; margin-top: 32px; margin-bottom: 12px; }
.ccd-page__body h3 { font-size: 19px; margin-top: 24px; margin-bottom: 10px; }
.ccd-page__body p { margin: 0 0 18px; }
.ccd-page__body a { color: var(--brand); }
.ccd-page__body ul, .ccd-page__body ol { padding-left: 24px; margin: 0 0 18px; }

/* Intro lede for long content pages (FAQ, About, etc.) */
.ccd-page__lede {
	font-size: 19px;
	line-height: 1.55;
	color: var(--text-strong);
	margin: 0 0 32px;
	max-width: 68ch;
}

/* FAQ accordion — native <details>/<summary>, no JS. Used inside .ccd-page__body. */
.ccd-page__body .ccd-faq {
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md, 4px);
	background: var(--surface-card);
	margin: 0 0 12px;
	overflow: hidden;
	transition: box-shadow .18s ease, border-color .18s ease;
}
.ccd-page__body .ccd-faq[open] {
	border-color: var(--border-strong);
	box-shadow: 0 4px 14px rgba(20, 23, 26, .06);
}
.ccd-page__body .ccd-faq > summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 24px 18px 22px;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.35;
	color: var(--text-strong);
	position: relative;
	padding-right: 56px;
	user-select: none;
	transition: background-color .12s ease;
}
.ccd-page__body .ccd-faq > summary::-webkit-details-marker { display: none; }
.ccd-page__body .ccd-faq > summary:hover { background: var(--paper-50); }
.ccd-page__body .ccd-faq > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.ccd-page__body .ccd-faq > summary::after {
	content: "";
	position: absolute;
	right: 22px; top: 50%;
	width: 12px; height: 12px;
	margin-top: -7px;
	border-right: 2px solid var(--brand);
	border-bottom: 2px solid var(--brand);
	transform: rotate(45deg);
	transition: transform .18s ease;
}
.ccd-page__body .ccd-faq[open] > summary::after {
	transform: rotate(-135deg);
	margin-top: -3px;
}
.ccd-page__body .ccd-faq__answer {
	padding: 0 24px 20px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--text-body);
	border-top: 1px solid var(--border-subtle);
	padding-top: 16px;
}
.ccd-page__body .ccd-faq__answer > *:first-child { margin-top: 0; }
.ccd-page__body .ccd-faq__answer > *:last-child { margin-bottom: 0; }
.ccd-page__body .ccd-faq__answer a { color: var(--brand); }
.ccd-page__body .ccd-faq__answer ul,
.ccd-page__body .ccd-faq__answer ol { padding-left: 22px; margin: 8px 0 12px; }
.ccd-page__body .ccd-faq__answer li { margin-bottom: 4px; }

/* Section headers between groups of FAQs */
.ccd-page__body h2 + .ccd-faq { margin-top: 8px; }

/* -------------------------------------------------------------
 * Contact form (Contact Form 7) — scoped styling for the form
 * on the Contact page. Uses tokens throughout so the form reads
 * as native rather than the CF7 default look.
 * ------------------------------------------------------------- */
.ccd-cf7 {
	margin-top: 32px;
	padding: 28px;
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md, 4px);
}
.ccd-cf7 h2 {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 22px;
	color: var(--text-strong);
	margin: 0 0 20px;
	letter-spacing: -0.005em;
}
.ccd-cf7 .wpcf7 { max-width: 720px; }

.ccd-cf7-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .ccd-cf7-row { grid-template-columns: 1fr; } }

.ccd-cf7 label {
	display: block;
	margin: 0 0 14px;
	font-family: var(--font-heading);
	font-size: 13px;
	font-weight: 600;
	color: var(--text-strong);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.ccd-cf7 label .req { color: var(--accent); margin-left: 2px; }

.ccd-cf7 input[type="text"],
.ccd-cf7 input[type="email"],
.ccd-cf7 input[type="tel"],
.ccd-cf7 textarea {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 12px 14px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 400;
	color: var(--text-body);
	background: var(--white);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm, 3px);
	letter-spacing: normal;
	text-transform: none;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.ccd-cf7 textarea { resize: vertical; min-height: 120px; }
.ccd-cf7 input:focus,
.ccd-cf7 textarea:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(47, 93, 124, 0.15);
}
.ccd-cf7 input::placeholder,
.ccd-cf7 textarea::placeholder { color: var(--text-light, #9aa3ac); font-style: italic; }

.ccd-cf7-fineprint {
	margin: 4px 0 20px;
	font-size: 13px;
	color: var(--text-body);
	opacity: 0.75;
	text-transform: none;
	font-weight: 400;
	letter-spacing: normal;
	font-family: var(--font-body);
}
.ccd-cf7-fineprint a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

.ccd-cf7 input[type="submit"] {
	display: inline-block;
	padding: 14px 28px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--accent-contrast);
	background: var(--accent);
	border: 0;
	border-radius: var(--radius-sm, 3px);
	cursor: pointer;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ccd-cf7 input[type="submit"]:hover {
	background: var(--accent-strong);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(176, 58, 110, 0.28);
}
.ccd-cf7 input[type="submit"]:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* CF7 response messages */
.ccd-cf7 .wpcf7-response-output {
	margin: 20px 0 0 !important;
	padding: 12px 16px !important;
	font-size: 14px;
	border-radius: var(--radius-sm, 3px);
	border-left: 3px solid var(--border-default) !important;
}
.ccd-cf7 .wpcf7 form.sent .wpcf7-response-output {
	border-left-color: var(--paddock-500) !important;
	background: var(--paddock-100, #eaf3ea);
}
.ccd-cf7 .wpcf7 form.failed .wpcf7-response-output,
.ccd-cf7 .wpcf7 form.invalid .wpcf7-response-output,
.ccd-cf7 .wpcf7 form.spam .wpcf7-response-output {
	border-left-color: var(--danger, #b03a3a) !important;
	background: var(--danger-bg, #f7e7e4);
	color: var(--danger, #b03a3a);
}
.ccd-cf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--danger, #b03a3a);
	text-transform: none;
	letter-spacing: normal;
	font-weight: 500;
}
.ccd-cf7 .wpcf7-not-valid { border-color: var(--danger, #b03a3a) !important; }

/* -------------------------------------------------------------
 * Hostinger Reach — subscription block styling. The plugin
 * outputs an <input type="email"> + submit inside its own class
 * scaffolding; scope our token styles to it so the newsletter
 * signup reads native rather than as a bolted-on widget.
 * ------------------------------------------------------------- */
.ccd-reach { margin-top: 32px; }
.ccd-reach h2 {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 22px;
	color: var(--text-strong);
	margin: 0 0 8px;
}
.ccd-reach__intro {
	font-size: 15px;
	color: var(--text-body);
	margin: 0 0 16px;
	max-width: 620px;
}

/* Form wrapper (Reach outputs deep nesting; keep specificity high enough to win) */
.ccd-reach .hostinger-reach-block-subscription-form-wrapper { max-width: 620px; }
.ccd-reach .hostinger-reach-block-subscription-form { margin: 0; }

/* Inline layout: label + input on top, button on the right */
.ccd-reach .hostinger-reach-block-form-fields--inline {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	align-items: end;
}
@media (max-width: 520px) {
	.ccd-reach .hostinger-reach-block-form-fields--inline { grid-template-columns: 1fr; }
}

.ccd-reach .hostinger-reach-block-form-field { display: flex; flex-direction: column; }
.ccd-reach .hostinger-reach-block-form-field label {
	font-family: var(--font-heading);
	font-size: 13px;
	font-weight: 600;
	color: var(--text-strong);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-bottom: 6px;
}
.ccd-reach .hostinger-reach-block-form-field label .required { color: var(--accent); margin-left: 2px; }

.ccd-reach .hostinger-reach-block-form-field input[type="email"],
.ccd-reach .hostinger-reach-block-form-field input[type="text"] {
	display: block;
	width: 100%;
	padding: 12px 14px;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--text-body);
	background: var(--white);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm, 3px);
	transition: border-color .12s ease, box-shadow .12s ease;
}
.ccd-reach .hostinger-reach-block-form-field input:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(47, 93, 124, 0.15);
}

/* Submit button — token accent */
.ccd-reach button[type="submit"],
.ccd-reach .hostinger-reach-block-subscription-form button,
.ccd-reach .hostinger-reach-block-subscription-form-submit,
.ccd-reach input[type="submit"] {
	display: inline-block;
	padding: 12px 24px !important;
	font-family: var(--font-heading) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: var(--accent-contrast) !important;
	background: var(--accent) !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: var(--radius-sm, 3px) !important;
	cursor: pointer;
	line-height: 1.2 !important;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ccd-reach button[type="submit"]:hover,
.ccd-reach .hostinger-reach-block-subscription-form button:hover {
	background: var(--accent-strong) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(176, 58, 110, 0.28);
}
.ccd-reach button[type="submit"]:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* Success / error messages Reach spits out */
.ccd-reach .hostinger-reach-block-subscription-message,
.ccd-reach .hostinger-reach-block-form-message {
	margin-top: 12px;
	padding: 10px 14px;
	font-size: 14px;
	border-radius: var(--radius-sm, 3px);
	border-left: 3px solid var(--paddock-500);
	background: var(--paddock-100, #eaf3ea);
}
.ccd-reach .hostinger-reach-block-form-message--error,
.ccd-reach .hostinger-reach-block-subscription-message--error {
	border-left-color: var(--danger, #b03a3a);
	background: var(--danger-bg, #f7e7e4);
	color: var(--danger, #b03a3a);
}

/* -------------------------------------------------------------
 * Footer newsletter row (Hostinger Reach) — dark-surface variant.
 * Adds a 2-col band above the social row: copy on the left,
 * signup form on the right.
 * ------------------------------------------------------------- */
.ccd-site-footer__newsletter {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 32px;
	padding: 28px 0;
	border-top: 1px solid rgba(255,255,255,.08);
	border-bottom: 1px solid rgba(255,255,255,.08);
	margin-top: 4px;
	align-items: center;
}
@media (max-width: 720px) {
	.ccd-site-footer__newsletter { grid-template-columns: 1fr; gap: 20px; }
}
.ccd-site-footer__newsletter-copy { min-width: 0; }
.ccd-site-footer__newsletter-eyebrow { color: var(--sectional-400, #7ba0bb); }
.ccd-site-footer__newsletter-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 22px;
	color: var(--white);
	margin: 4px 0 6px;
}
.ccd-site-footer__newsletter-lede {
	font-size: 14px;
	color: var(--text-on-dark);
	opacity: .82;
	margin: 0;
	max-width: 44ch;
	line-height: 1.5;
}

/* Dark variant of the Reach form — override the light-surface defaults */
.ccd-reach--dark { margin-top: 0; }
.ccd-reach--dark .hostinger-reach-block-form-field label {
	color: var(--white);
	opacity: 0.75;
	font-size: 12px;
}
.ccd-reach--dark .hostinger-reach-block-form-field input[type="email"],
.ccd-reach--dark .hostinger-reach-block-form-field input[type="text"] {
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.18);
	color: var(--white);
}
.ccd-reach--dark .hostinger-reach-block-form-field input::placeholder { color: rgba(255,255,255,.4); }
.ccd-reach--dark .hostinger-reach-block-form-field input:focus {
	background: rgba(255,255,255,.1);
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(176,58,110,.20);
}

/* -------------------------------------------------------------
 * Contact page — 2-column desktop layout: details/hours on the
 * left, message form on the right. Then a secondary band with
 * Follow us + Newsletter. Stacks on narrower viewports.
 * ------------------------------------------------------------- */
.ccd-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: clamp(24px, 4vw, 48px);
	margin-top: 32px;
}
@media (max-width: 900px) {
	.ccd-contact-grid { grid-template-columns: 1fr; gap: 24px; }
}
.ccd-contact-col-left { display: flex; flex-direction: column; gap: 20px; }

.ccd-contact-card {
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md, 4px);
	padding: 22px 24px;
}
.ccd-contact-card .ccd-eyebrow {
	color: var(--brand);
	display: block;
	margin-bottom: 4px;
}
.ccd-contact-card__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 20px;
	color: var(--text-strong);
	margin: 0 0 16px;
	letter-spacing: -0.005em;
}
.ccd-contact-list { list-style: none; padding: 0; margin: 0; }
.ccd-contact-list__item {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 8px 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--text-body);
	border-top: 1px solid var(--border-subtle);
}
.ccd-contact-list__item:first-child { border-top: 0; padding-top: 0; }
.ccd-contact-list__item:last-child { padding-bottom: 0; }
.ccd-contact-list__icon {
	color: var(--brand);
	flex-shrink: 0;
	margin-top: 2px;
}
.ccd-contact-list__item a { color: var(--brand); text-decoration: none; }
.ccd-contact-list__item a:hover { color: var(--brand-strong); text-decoration: underline; }

.ccd-contact-hours {
	background: var(--sectional-50, #eef4f8);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md, 4px);
	padding: 20px 24px;
}
.ccd-contact-hours .ccd-eyebrow {
	color: var(--brand);
	display: block;
	margin-bottom: 6px;
}
.ccd-contact-hours__body {
	margin: 0;
	font-size: 15px;
	color: var(--text-strong);
	line-height: 1.7;
}
.ccd-contact-hours__body strong {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--text-strong);
	display: inline-block;
	min-width: 88px;
}

/* Right column: form card. Reuse .ccd-cf7 styling (already in place). */
.ccd-contact-col-right .ccd-cf7 { margin-top: 0; height: 100%; }

/* Secondary band below the main grid: Follow us + Newsletter */
.ccd-contact-secondary {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: clamp(24px, 4vw, 48px);
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--border-subtle);
}
@media (max-width: 780px) {
	.ccd-contact-secondary { grid-template-columns: 1fr; gap: 32px; }
}
.ccd-contact-social .ccd-eyebrow { color: var(--brand); display: block; margin-bottom: 12px; }
.ccd-contact-social__list {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; gap: 10px;
}
.ccd-contact-social__list a {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 10px 16px;
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-sm, 3px);
	color: var(--text-body);
	text-decoration: none;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.02em;
	transition: transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
}
.ccd-contact-social__list a:hover {
	transform: translateY(-1px);
	border-color: var(--brand);
	color: var(--brand);
	background: var(--sectional-50, #eef4f8);
}
.ccd-contact-social__list svg { flex-shrink: 0; color: var(--brand); }
.ccd-contact-social__list a:hover svg { color: var(--brand-strong); }

/* Newsletter on Contact page reuses .ccd-reach styling — no override needed here. */
.ccd-contact-secondary .ccd-reach { margin-top: 0; }
.ccd-contact-secondary .ccd-reach h2 {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 22px;
	color: var(--text-strong);
	margin: 0 0 8px;
	letter-spacing: -0.005em;
}