/* ==========================================================================
   CraftForms Demo — brand polish on top of Twenty Twenty-Five
   Palette: primary #2d9052 / #5fac76, mint #ddf0e0, cream #fcecca
   Fonts:   MuseoModerno (display), Poppins (body)
   ========================================================================== */

:root {
	--cf-shadow-sm: 0 1px 2px rgba(21, 36, 27, .06), 0 4px 16px rgba(21, 36, 27, .06);
	--cf-shadow-lg: 0 24px 60px -20px rgba(31, 110, 61, .35);
	--cf-radius: 22px;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* --- Eyebrow / pill badge ------------------------------------------------ */
.cf-badge {
	display: inline-flex;
	align-items: center;
	gap: .5ch;
	padding: .4rem 1rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--primary-dark);
	font-weight: 600;
	font-size: .85rem;
	letter-spacing: .02em;
	text-transform: uppercase;
}
/* The badge is an inline-flex box, so text-align:center can't center it —
   shrink to content and auto-margin it instead. */
.cf-badge.has-text-align-center {
	display: flex;
	width: fit-content;
	margin-inline: auto;
}
.cf-badge .emoji {
	height: 1em;
	width: 1em;
	margin: 0;
	vertical-align: -0.1em;
}

/* --- Hero ----------------------------------------------------------------- */
.cf-hero {
	border-radius: var(--cf-radius);
	overflow: clip;
}
.cf-hero h1 .cf-accent,
.cf-accent { color: var(--wp--preset--color--primary-dark); }

.cf-lead {
	color: var(--wp--preset--color--muted);
	font-size: clamp(1.05rem, 1.4vw, 1.25rem);
	line-height: 1.65;
}

/* --- Generic card --------------------------------------------------------- */
.cf-card {
	background: #fff;
	border: 1px solid rgba(45, 144, 82, .12);
	border-radius: var(--cf-radius);
	box-shadow: var(--cf-shadow-sm);
}

/* --- The form card -------------------------------------------------------- */
.cf-form-card {
	background: #fff;
	border: 1px solid rgba(45, 144, 82, .14);
	border-radius: var(--cf-radius);
	box-shadow: var(--cf-shadow-lg);
}

/* --- Feature / step cards ------------------------------------------------- */
.cf-feature {
	background: #fff;
	border: 1px solid rgba(45, 144, 82, .12);
	border-radius: 18px;
	box-shadow: var(--cf-shadow-sm);
	height: 100%;
	transition: transform .18s ease, box-shadow .18s ease;
}
.cf-feature:hover { transform: translateY(-4px); box-shadow: var(--cf-shadow-lg); }
.cf-feature .wp-block-image,
.cf-feature .cf-ico {
	font-size: 1.75rem;
	width: 52px; height: 52px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 14px;
	background: var(--wp--preset--color--mint);
}

.cf-step-num {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 2rem;
	color: var(--wp--preset--color--primary-light);
	line-height: 1;
}

/* ==========================================================================
   CraftForms form fields
   ========================================================================== */
.wp-block-craftforms-form { --cf-field-gap: 1.1rem; }

.wp-block-craftforms-label,
.wp-block-craftforms-text-input-field label,
.wp-block-craftforms-radio-field > label,
.wp-block-craftforms-checkboxes-field > label {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

/* Consistent label → field spacing. The field containers are is-layout-flex with
   gap:0, and WP's `.is-layout-flex > :is(*, div) { margin: 0 }` reset (specificity
   0,1,1) plus WooCommerce's `.woocommerce-page label { margin-bottom: .7em }` both
   tie with a bare `.wp-block-craftforms-label` rule — so label spacing came out
   inconsistent. Scope to the form (specificity 0,2,0) so this always wins. */
.wp-block-craftforms-form .wp-block-craftforms-label,
.wp-block-craftforms-form .wp-block-craftforms-text-input-field > label,
.wp-block-craftforms-form .wp-block-craftforms-radio-field > label,
.wp-block-craftforms-form .wp-block-craftforms-checkboxes-field > label {
	margin-bottom: .45rem;
}

.wp-block-craftforms-text-input input,
.wp-block-craftforms-textarea textarea,
.wp-block-craftforms-select select,
.cf-form-card input[type="email"],
.cf-form-card input[type="text"],
.cf-form-card textarea,
.cf-form-card select {
	width: 100%;
	border: 1.5px solid rgba(45, 144, 82, .25);
	border-radius: 12px;
	padding: .8rem 1rem;
	font: inherit;
	background: #fff;
	color: var(--wp--preset--color--contrast);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.wp-block-craftforms-text-input input:focus,
.wp-block-craftforms-textarea textarea:focus,
.wp-block-craftforms-select select:focus,
.cf-form-card input:focus,
.cf-form-card textarea:focus,
.cf-form-card select:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 4px rgba(95, 172, 118, .22);
}

/* Radio / checkbox option rows */
.wp-block-craftforms-radio-option,
.wp-block-craftforms-checkbox-option {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	padding: .25rem 0;
}
.wp-block-craftforms-radio-option input,
.wp-block-craftforms-checkbox-option input {
	accent-color: var(--wp--preset--color--primary);
	width: 1.15rem; height: 1.15rem;
	margin-top: .15rem;
	flex: 0 0 auto;
}

/* Submit button — match brand pill button */
.wp-block-craftforms-submit-button button,
.cf-form-card button[type="submit"] {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border: none;
	border-radius: 9999px;
	padding: .95rem 2rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 1.05rem;
	width: 100%;
	cursor: pointer;
	transition: background .15s ease, transform .12s ease;
}
.wp-block-craftforms-submit-button button:hover,
.cf-form-card button[type="submit"]:hover {
	background: var(--wp--preset--color--primary-dark);
	transform: translateY(-1px);
}

.wp-block-craftforms-form-error { color: #d33131; font-size: .85rem; }

/* Selected-style radio cards (optionStyle text) */
.wp-block-craftforms-radio-field.cf-choice-cards .wp-block-craftforms-radio-option {
	border: 1.5px solid rgba(45, 144, 82, .25);
	border-radius: 12px;
	padding: .85rem 1rem;
	cursor: pointer;
}

/* ==========================================================================
   Site header
   ========================================================================== */
.cf-site-header { position: sticky; top: 0; z-index: 30; backdrop-filter: saturate(1.1); }
.cf-logo { display: inline-flex; align-items: center; color: #1f6e3d; }
.cf-logo svg { height: 26px; width: auto; display: block; }
.cf-logo:hover { color: var(--wp--preset--color--primary); }

.cf-nav.wp-block-navigation { align-items: center; }
.cf-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--contrast); }
.cf-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--primary-dark); }
.cf-nav-cta .wp-block-button__link { padding: .55rem 1.25rem; font-size: 1rem; }

/* ==========================================================================
   Site footer
   ========================================================================== */
.cf-site-footer { color: #cfe0d5; }
.cf-site-footer .cf-logo { color: #ffffff; }
.cf-site-footer .cf-logo:hover { color: var(--wp--preset--color--primary-light); }
.cf-footer-tag {
	color: #9fb6a8;
	font-size: .95rem;
	line-height: 1.65;
	max-width: 34ch;
}
.cf-footer-head {
	color: #ffffff !important;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-family: var(--wp--preset--font-family--body) !important;
	font-weight: 600 !important;
	margin-bottom: .9rem;
}
.cf-footer-nav .wp-block-navigation-item__content { color: #cfe0d5; }
.cf-footer-nav .wp-block-navigation-item__content:hover { color: #ffffff; }
.cf-footer-nav.wp-block-navigation { gap: .55rem !important; }
.cf-footer-rule.wp-block-separator { border-color: rgba(255, 255, 255, .12); opacity: 1; }
.cf-footer-bottom { color: #8ea597; }
.cf-footer-bottom a { color: #cfe0d5; }

/* ==========================================================================
   WooCommerce single product (classic template, brand polish)
   ========================================================================== */
/* Two-column layout for the single product only (matched via its summary),
   so the related-products <li>s are left to the grid rule below. */
.cf-product-main div.product:has(> .summary.entry-summary) {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 3.5vw, 3rem);
	align-items: start;
}
/* WooCommerce ships .woocommerce-product-gallery / .summary at width:48% + float,
   which shrinks them inside the grid cells and opens a big middle gap. Reset both
   to fill their column. */
.cf-product-main div.product:has(> .summary.entry-summary) > .woocommerce-product-gallery,
.cf-product-main div.product:has(> .summary.entry-summary) > .summary {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
}
.cf-product-main div.product:has(> .summary.entry-summary) > .woocommerce-product-gallery {
	border-radius: var(--cf-radius);
	overflow: clip;
	box-shadow: var(--cf-shadow-sm);
}
/* Reviews tabs + related products span the full width below the two columns. */
.cf-product-main div.product:has(> .summary.entry-summary) > .woocommerce-tabs,
.cf-product-main div.product:has(> .summary.entry-summary) > .related,
.cf-product-main div.product:has(> .summary.entry-summary) > .upsells {
	grid-column: 1 / -1;
	width: 100%;
	margin-top: var(--wp--preset--spacing--50);
}
.cf-product-main .product_title { margin-top: 0; }
.cf-product-main .summary > form,
.cf-product-main .summary .craftforms-form { margin-top: 1.25rem; }

/* Related products: tidy grid + brand cards */
.cf-product-main .related.products { grid-column: 1 / -1; margin-top: var(--wp--preset--spacing--50); }
.cf-product-main .related.products ul.products,
.cf-product-main ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1.5rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}
.cf-product-main ul.products li.product {
	display: block;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	text-align: center;
}
.cf-product-main ul.products li.product img { border-radius: 14px; margin-bottom: .6rem; }
.cf-product-main ul.products li.product .button { display: inline-block; width: auto; white-space: nowrap; }

@media (max-width: 781px) {
	.cf-product-main div.product:has(> .summary.entry-summary) { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Homepage "See it in action" explore section
   ========================================================================== */
.cf-explore-eyebrow {
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--wp--preset--color--primary-dark);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	margin-bottom: 0;
}
.cf-explore .cf-feature { display: flex; flex-direction: column; }
.cf-explore .cf-feature h4 { margin: 0; }
.cf-card-link { margin-top: auto; padding-top: .4rem; }
.cf-card-link a {
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--primary-dark);
}
.cf-card-link a:hover { color: var(--wp--preset--color--primary); }

/* Page title (form landing pages etc.) centered to match the centered heroes. */
.wp-block-post-title { text-align: center; }

/* --- Footer tidy ---------------------------------------------------------- */
.cf-footer { color: var(--wp--preset--color--muted); }