/**
 * CC WooCommerce Landing — layout behaviors beyond theme.json.
 */

/* --------------------------------------------------------------------------
   Design token aliases
   Kept here so editor-styles + frontend share the same short CSS variables
   used by section stylesheets (theme.json custom-css is not always enough).
   -------------------------------------------------------------------------- */

:root {
	--color-ink: var(--wp--custom--color--ink, #0d0d0d);
	--color-ink-deep: var(--wp--custom--color--ink-deep, #030712);
	--color-canvas: var(--wp--custom--color--canvas, #ffffff);
	--color-surface: var(--wp--custom--color--surface, #f3f4f6);
	--color-surface-alt: var(--wp--custom--color--surface-alt, #f7f7f7);
	--color-line: var(--wp--custom--color--line, #e5e7eb);
	--color-secondary: var(--wp--custom--color--secondary, #1d293d);
	--color-muted: var(--wp--custom--color--muted, #4a5565);
	--color-muted-strong: var(--wp--custom--color--muted-strong, #314158);
	--color-muted-link: var(--wp--custom--color--muted-link, #62748e);
	--color-checkbox-border: var(--wp--custom--color--checkbox-border, #99a1af);
	--color-success: var(--wp--custom--color--success, #16a34a);
	--color-white: var(--wp--custom--color--white, #ffffff);

	--font-display: var(--wp--custom--font--display, "Cormorant", "Times New Roman", serif);
	--font-body: var(--wp--custom--font--body, "PP Mori", system-ui, sans-serif);

	--text-h2: var(--wp--custom--text--h-2, 48px);
	--text-h3: var(--wp--custom--text--h-3, 40px);
	--text-h4: var(--wp--custom--text--h-4, 32px);
	--text-h5: var(--wp--custom--text--h-5, 24px);
	--text-h6: var(--wp--custom--text--h-6, 20px);
	--text-body-xl: var(--wp--custom--text--body-xl, 20px);
	--text-body-lg: var(--wp--custom--text--body-lg, 18px);
	--text-body: var(--wp--custom--text--body, 16px);
	--text-small: var(--wp--custom--text--small, 14px);
	--text-caption: var(--wp--custom--text--caption, 12px);
	--text-button: var(--wp--custom--text--button, 16px);

	--leading-display: var(--wp--custom--leading--display, 1.2);
	--leading-body: var(--wp--custom--leading--body, 1.5);
	--tracking-display: var(--wp--custom--tracking--display, -0.02em);

	--spacing-3xs: var(--wp--preset--spacing--3-xs, 2px);
	--spacing-2xs: var(--wp--preset--spacing--2-xs, 4px);
	--spacing-xs: var(--wp--preset--spacing--xs, 8px);
	--spacing-sm: var(--wp--preset--spacing--sm, 12px);
	--spacing-md: var(--wp--preset--spacing--md, 16px);
	--spacing-lg: var(--wp--preset--spacing--lg, 24px);
	--spacing-xl: var(--wp--preset--spacing--xl, 32px);
	--spacing-2xl: var(--wp--preset--spacing--2-xl, 40px);
	--spacing-3xl: var(--wp--preset--spacing--3-xl, 48px);
	--spacing-4xl: var(--wp--preset--spacing--4-xl, 64px);
	--spacing-5xl: var(--wp--preset--spacing--5-xl, 80px);
	--spacing-7xl: var(--wp--preset--spacing--7-xl, 120px);
	--spacing-margin: var(--wp--custom--spacing--margin, 64px);
	--spacing-section: var(--wp--custom--spacing--section, 64px);
	--spacing-section-lg: var(--wp--custom--spacing--section-lg, 80px);
	--navbar-height: var(--wp--custom--spacing--navbar, 64px);

	--radius-none: var(--wp--custom--radius--none, 0px);
	--radius-sm: var(--wp--custom--radius--sm, 4px);
	--radius-badge: var(--wp--custom--radius--badge, 12px);
	--radius-full: var(--wp--custom--radius--full, 9999px);

	--surface-canvas: var(--color-canvas);
	--surface-muted: var(--color-surface);
	--surface-ink: var(--color-ink);
	--surface-button: var(--color-ink-deep);
}

/* --------------------------------------------------------------------------
   Font faces (Cormorant self-hosted; PP Mori slots for licensed files)
   -------------------------------------------------------------------------- */

@font-face {
	font-family: "Cormorant";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/cormorant/cormorant-latin-ext-700-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Cormorant";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/cormorant/cormorant-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Drop licensed PP Mori woff2 files into assets/fonts/pp-mori/ to activate. */
@font-face {
	font-family: "PP Mori";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/pp-mori/PPMori-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "PP Mori";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/pp-mori/PPMori-SemiBold.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
:where(html) {
	scroll-behavior: smooth;
}
:where(body) {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:where(img) {
	max-width: 100%;
	height: auto;
}

.wp-block-template-part {
	margin:0;
}
:root :where(.is-layout-flow) > * {
	margin:0;
}
/* --------------------------------------------------------------------------
   Header / Navbar
   -------------------------------------------------------------------------- */

.wp-block-template-part:has(.cc-wcl-header),
.cc-wcl-header {
	position: sticky;
	top: 0;
	z-index: 100;
}
.wp-block-template-part:has(.cc-wcl-header) .wp-block-site-title,
.cc-wcl-header .wp-block-site-title {
	display:none;
	margin-left:0;
	margin-right:auto;
}
.woocommerce-checkout,
.woocommerce-cart {
	.wp-block-template-part:has(.cc-wcl-header) {
		position: static !important;
	}
}

.cc-wcl-header {
	min-height: var(--navbar-height, 64px);
	background-color: var(--color-canvas, #ffffff);
	border-bottom: 1px solid var(--color-line, #e5e7eb);
}

.cc-wcl-header .wp-block-group__inner-container,
.cc-wcl-header.wp-block-group {
	min-height: var(--navbar-height, 64px);
}

.cc-wcl-header .wp-block-navigation {
	justify-content: center;
}

.cc-wcl-header .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--3xl, 48px);
	justify-content: center;
}

.cc-wcl-header .wp-block-navigation-item__content {
	font-family: var(--font-body, "PP Mori", system-ui, sans-serif);
	font-size: var(--text-small, 14px);
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-secondary, #1d293d);
	text-decoration: none;
}

.cc-wcl-header .wp-block-navigation-item__content:hover,
.cc-wcl-header .wp-block-navigation-item__content:focus {
	text-decoration: underline;
}

@media (max-width: 781px) {
	.cc-wcl-header {
		padding-left: var(--wp--preset--spacing--md, 16px) !important;
		padding-right: var(--wp--preset--spacing--md, 16px) !important;
	}

	.cc-wcl-header .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--lg, 24px);
	}


}
@media (max-width: 600px) { 
	.cc-wcl-header {
		justify-content: flex-end;
	}
	.wp-block-template-part:has(.cc-wcl-header) .wp-block-site-title,
	.cc-wcl-header .wp-block-site-title {
		display:inline-block;
	}
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.cc-wcl-footer {
	background-color: var(--color-ink, #0d0d0d);
	color: var(--color-white, #ffffff);
}

.cc-wcl-footer a {
	color: var(--color-white, #ffffff);
	text-decoration: none;
}

.cc-wcl-footer a:hover,
.cc-wcl-footer a:focus {
	text-decoration: underline;
}

.cc-wcl-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3xl, 48px);
	width: 100%;
	max-width: 1312px;
    margin: 0 auto;
}

.cc-wcl-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md, 16px);
	max-width: 490px;
	flex: 1 1 280px;
}

.cc-wcl-footer__logo {
	display: block;
	width: min(378px, 100%);
	height: auto;
	margin: 0;
}

.cc-wcl-footer__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.cc-wcl-footer__credit {
	margin: 0;
	font-family: var(--font-body, "PP Mori", system-ui, sans-serif);
	font-size: var(--text-caption, 12px);
	font-weight: 600;
	line-height: 1.5;
	color: var(--color-white, #ffffff);
}

.cc-wcl-footer__links-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--5xl, 80px);
	flex: 1 1 320px;
	max-width: 631px;
}

.cc-wcl-footer__legal,
.cc-wcl-footer__legal.wp-block-navigation {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md, 16px);
	min-width: 160px;
	flex: 1 1 200px;
}

.cc-wcl-footer__legal a,
.cc-wcl-footer__legal .wp-block-navigation-item__content {
	font-family: var(--font-body, "PP Mori", system-ui, sans-serif);
	font-size: var(--text-small, 14px);
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-white, #ffffff);
}

.cc-wcl-footer__legal .wp-block-navigation__container {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--md, 16px);
}

.cc-wcl-footer__legal .wp-block-navigation__responsive-container,
.cc-wcl-footer__legal .wp-block-navigation__responsive-container-content {
	display: contents;
}

.cc-wcl-footer__methods {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3xl, 48px);
	min-width: 200px;
}

.cc-wcl-footer__method-group {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--lg, 24px);
	margin:0 !important;
}

.cc-wcl-footer__method-title {
	margin: 0;
	font-family: var(--font-body, "PP Mori", system-ui, sans-serif);
	font-size: var(--text-small, 14px);
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-white, #ffffff);
}

.cc-wcl-footer__icons {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	align-items: flex-start;
	margin:0 !important;
}

.cc-wcl-pay-icon {
	display: block;
	width: 50px;
	height: 32px;
	margin: 0;
	background-color: var(--color-white, #ffffff);
	overflow: hidden;
	flex-shrink: 0;
}

.cc-wcl-pay-icon img {
	display: block;
	width: 50px;
	height: 32px;
	object-fit: contain;
}

@media (max-width: 781px) {
	.cc-wcl-footer {
		padding-inline: var(--wp--preset--spacing--md, 16px) !important;
		padding-block: var(--wp--preset--spacing--xl, 32px) !important;
	}

	.cc-wcl-footer__links-wrap {
		gap: var(--wp--preset--spacing--3xl, 48px);
	}
}

/* --------------------------------------------------------------------------
   Generic pages (legal / secondary)
   -------------------------------------------------------------------------- */

.cc-wcl-page {
	width: 100%;
	max-width: none;
	background-color: var(--color-canvas, #ffffff);
	color: var(--color-ink, #0d0d0d);
	max-width: 1440px;
	margin: 0 auto;
}

.cc-wcl-page__title {
	margin: 0;
	font-family: var(--font-display, "Cormorant", "Times New Roman", serif);
	font-size: var(--text-h3, 40px);
	font-weight: 700;
	line-height: var(--leading-display, 1.2);
	letter-spacing: var(--tracking-display, -0.02em);
	color: var(--color-ink, #0d0d0d);
}

.cc-wcl-breadcrumbs .rank-math-breadcrumb,
.cc-wcl-breadcrumbs .rank-math-breadcrumb p {
	margin: 0;
	font-family: var(--font-body, "PP Mori", system-ui, sans-serif);
	font-size: var(--text-caption, 12px);
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-ink, #0d0d0d);
}

.cc-wcl-breadcrumbs .rank-math-breadcrumb a {
	color: var(--color-ink, #0d0d0d);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cc-wcl-breadcrumbs .rank-math-breadcrumb a:hover,
.cc-wcl-breadcrumbs .rank-math-breadcrumb a:focus {
	text-decoration: underline;
}

.cc-wcl-breadcrumbs .rank-math-breadcrumb .separator {
	display: inline-block;
	margin: 0 2px;
	color: var(--color-ink, #0d0d0d);
}

.cc-wcl-breadcrumbs .rank-math-breadcrumb .last {
	text-decoration: none;
}

.cc-wcl-page__content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg, 24px);
}

.cc-wcl-page__content > .wp-block-post-content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xl, 32px);
	max-width: none;
}

.cc-wcl-page__content .wp-block-post-content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.cc-wcl-page__content .wp-block-post-content > .wp-block-heading {
	margin-block-end: 0;
}

.cc-wcl-page__content p,
.cc-wcl-page__content li {
	font-family: var(--font-body, "PP Mori", system-ui, sans-serif);
	font-size: var(--text-body, 16px);
	font-weight: 400;
	line-height: var(--leading-body, 1.5);
	color: var(--color-ink, #0d0d0d);
}

.cc-wcl-page__content h2,
.cc-wcl-page__content .wp-block-heading:is(h2),
.cc-wcl-page__content h3,
.cc-wcl-page__content .wp-block-heading:is(h3) {
	font-family: var(--font-body, "PP Mori", system-ui, sans-serif);
	font-size: var(--text-body-lg, 18px);
	font-weight: 600;
	line-height: var(--leading-body, 1.5);
	letter-spacing: 0;
	color: var(--color-ink, #0d0d0d);
	opacity: 0.8;
}

.cc-wcl-page__content ul,
.cc-wcl-page__content ol {
	margin: 0;
	padding-left: 24px;
}

.cc-wcl-page__content li {
	margin-bottom: 8px;
}

.cc-wcl-page__content li:last-child {
	margin-bottom: 0;
}

.cc-wcl-page__content a {
	color: var(--color-ink, #0d0d0d);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cc-wcl-page__section {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md, 16px);
}

@media (max-width: 781px) {
	.cc-wcl-page {
		padding-left: var(--wp--preset--spacing--md, 16px) !important;
		padding-right: var(--wp--preset--spacing--md, 16px) !important;
		padding-bottom: var(--wp--preset--spacing--3xl, 48px) !important;
	}

	.cc-wcl-page__title {
		font-size: clamp(28px, 8vw, 40px);
	}
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.cc-wcl-404 {
	width: 100%;
	max-width: none;
	background-color: var(--color-canvas, #ffffff);
	color: var(--color-ink, #0d0d0d);
}

.cc-wcl-404__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.cc-wcl-404__graphic {
	position: relative;
	width: min(640px, 100%);
	/* Room for illustration overhang below the numbers (~28px at full size). */
	padding-bottom: 4.4%;
}

.cc-wcl-404__numbers {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

.cc-wcl-404__illustration {
	position: absolute;
	/* Figma: left 216 / 640.32, top 75 / 292.673, width 208 / 640.32 */
	left: 33.73%;
	top: 25.63%;
	width: 32.48%;
	height: auto;
	max-width: none;
	pointer-events: none;
}

.cc-wcl-404__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-md, 16px);
	width: 100%;
	text-align: center;
	color: #1a1a1a;
	margin-top:0;
	margin-bottom: var(--spacing-2xl, 40px);
}

.cc-wcl-404__title {
	margin: 0;
	font-family: var(--font-display, "Cormorant", "Times New Roman", serif);
	font-size: var(--text-h3, 40px);
	font-weight: 700;
	line-height: var(--leading-display, 1.2);
	letter-spacing: var(--tracking-display, -0.02em);
	color: inherit;
}

.cc-wcl-404__text {
	margin: 0;
	font-family: var(--font-body, "PP Mori", system-ui, sans-serif);
	font-size: var(--text-small, 14px);
	font-weight: 400;
	line-height: var(--leading-body, 1.5);
	color: inherit;
	max-width: 40rem;
}

.cc-wcl-404__cta,
.cc-wcl-404__cta.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-sm, 12px);
	padding: 12px 24px;
	margin: 0;
	border: 1px solid var(--color-ink-deep, #030712);
	border-radius: 0;
	background-color: var(--color-ink-deep, #030712);
	color: var(--color-white, #ffffff);
	font-family: var(--font-body, "PP Mori", system-ui, sans-serif);
	font-size: var(--text-button, 16px);
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: opacity 0.3s;
}

.cc-wcl-404__cta:hover,
.cc-wcl-404__cta:focus,
.cc-wcl-404__cta.wp-element-button:hover,
.cc-wcl-404__cta.wp-element-button:focus {
	text-decoration: none;
	opacity: 0.7;
}

@media (max-width: 781px) {
	.cc-wcl-404 {
		padding-left: var(--wp--preset--spacing--md, 16px) !important;
		padding-right: var(--wp--preset--spacing--md, 16px) !important;
	}

	.cc-wcl-404__title {
		font-size: clamp(28px, 8vw, 40px);
	}
	.cc-wcl-404__copy {
		margin-top: var(--spacing-xl, 32px);
	}

	.cc-wcl-404__cta,
	.cc-wcl-404__cta.wp-element-button {
		white-space: normal;
		text-align: center;
	}
	.cc-wcl-hero__payments .cc-wcl-pay-icon {
		width:auto;
		height:auto;
		flex:min-content;
	}

}
@media (max-width: 520px) {
	.cc-wcl-hero__payments {
		width:100%;
	}
	.cc-wcl-hero__book {
		width:100%;
		height:100% !important;
		object-fit: cover;
	}
	.cc-wcl-hero__panel {
		aspect-ratio: 0.734;
	}
	.cc-wcl-hero__trust {
		gap: var(--spacing-sm, 12px);
	}
	.cc-wcl-hero__trust-divider {
		width:100%;
		height:1px;
	}
}

.wp-block-navigation__responsive-container-close {
	padding: var(--spacing-xs, 8px);
}

.wc-block-components-product-badge {
	white-space: normal !important;
}
.wp-block-table.is-style-stripes th {
	background-color: black !important;
	color: white !important;
	text-align: left !important;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: #F9FAFB !important;
}