/*
Theme Name: Cozzle Child
Theme URI: https://cozzle.co
Description: Kadence child theme for cozzle — Warm Cocoon palette, Fraunces display + Nunito Sans body, soft-luxury cozy styling. Cream + clay-taupe carry ~80% of every layout; terracotta leads as the single accent; peach-coral is reserved for rare sale/urgency pops only.
Author: Cozzle
Author URI: https://cozzle.co
Template: kadence
Version: 1.0.0
Requires at least: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cozzle-child
*/

/* ==========================================================================
   1. Kadence global palette overrides — "Warm Cocoon" (EXACT hexes, never
      approximate). Kadence convention: 1-2 accent + accent-hover,
      3-4 strongest/body text, 5-6 subtle text/borders, 7-9 backgrounds
      light → lightest. This stylesheet loads AFTER kadence-global (it is a
      declared dependency in functions.php), so these :root vars win the
      cascade over Kadence's inline defaults.
   ========================================================================== */

:root {
	--global-palette1: #D08C6E; /* terracotta — primary accent: buttons, links, the dot */
	--global-palette2: #BD7B5F; /* darker terracotta — hover/active state of palette1 */
	--global-palette3: #4A372A; /* espresso — headings / strongest text / logo */
	--global-palette4: #5C4636; /* softened espresso — body text (calmer than pure espresso) */
	--global-palette5: #7E6C5C; /* muted warm brown-grey — meta, captions, subtle text */
	--global-palette6: #D8C3AC; /* clay-taupe — borders, dividers, card/section surfaces */
	--global-palette7: #F4ECE1; /* cream — page background */
	--global-palette8: #FAF5EC; /* lighter cream — alternate light surface */
	--global-palette9: #FFFFFF; /* white — lightest surface / max-contrast cards */

	/* Brand extras (NOT part of the Kadence 9-slot palette) */
	--cozzle-coral: #E8896B;    /* peach-coral — RARE dopamine pop: sale tags / urgency ONLY.
	                               Never let it compete with terracotta in the same view. */
	--cozzle-radius-btn: 24px;  /* pill buttons (chosen over 10px soft — cozier, more giftable) */
	--cozzle-radius-soft: 10px; /* inputs, cards, images */
	--cozzle-space-section: clamp(3rem, 6vw, 5.5rem);

	/* Kadence button vars (newer Kadence builds read these) */
	--global-palette-btn-bg: var(--global-palette1);
	--global-palette-btn-bg-hover: var(--global-palette2);
	--global-palette-btn: #F4ECE1;
	--global-palette-btn-hover: #F4ECE1;

	/* Typography vars (some Kadence styles reference these) */
	--global-heading-font-family: "Fraunces", Georgia, "Times New Roman", serif;
	--global-body-font-family: "Nunito Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ==========================================================================
   2. Base typography & page canvas
   ========================================================================== */

body {
	font-family: var(--global-body-font-family);
	color: var(--global-palette4);
	background-color: var(--global-palette7);
	line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--global-heading-font-family);
	font-weight: 600;
	color: var(--global-palette3);
	letter-spacing: -0.01em;
	line-height: 1.2;
}

/* Readable line lengths: cap direct prose children only, so grids/columns
   and Woo blocks are never squeezed. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
	max-width: 70ch;
}

/* Soft, generous whitespace defaults */
.cozzle-section {
	padding-block: var(--cozzle-space-section);
}

.cozzle-card {
	background-color: var(--global-palette8);
	border: 1px solid var(--global-palette6);
	border-radius: var(--cozzle-radius-soft);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.cozzle-surface {
	background-color: var(--global-palette6); /* clay-taupe section band */
}

/* Accessible focus ring in brand terracotta */
:focus-visible {
	outline: 2px solid var(--global-palette1);
	outline-offset: 2px;
}

::selection {
	background-color: var(--global-palette6);
	color: var(--global-palette3);
}

/* ==========================================================================
   3. Buttons — terracotta bg, cream text, generous pill radius (24px),
      comfortable padding. Hover = palette2 (darker terracotta).
   ========================================================================== */

.button,
a.button,
button.button,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.single_add_to_cart_button,
.wc-block-components-button:not(.is-link) {
	background-color: var(--global-palette1);
	color: #F4ECE1;
	border: 0;
	border-radius: var(--cozzle-radius-btn);
	padding: 0.7em 1.7em;
	font-family: var(--global-body-font-family);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.button:hover,
.button:focus,
a.button:hover,
a.button:focus,
button.button:hover,
button.button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-element-button:hover,
.wp-element-button:focus,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.single_add_to_cart_button:hover,
.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus {
	background-color: var(--global-palette2);
	color: #F4ECE1;
}

/* ==========================================================================
   4. Forms — soft radius, taupe borders, calm focus
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
	background-color: var(--global-palette9);
	border: 1px solid var(--global-palette6);
	border-radius: var(--cozzle-radius-soft);
	padding: 0.55em 0.9em;
	color: var(--global-palette4);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
	border-color: var(--global-palette1);
	box-shadow: 0 0 0 3px rgba(208, 140, 110, 0.25);
	outline: none;
}

/* ==========================================================================
   5. WooCommerce touches
   ========================================================================== */

/* Sale badge / urgency = peach-coral, SPARINGLY (the only place coral lives) */
.woocommerce span.onsale,
.wc-block-components-sale-badge,
.wc-block-grid__product-onsale {
	background-color: var(--cozzle-coral);
	color: #4A372A;
	border: 0;
	border-radius: 999px;
	font-weight: 700;
	padding: 0.35em 1em;
	line-height: 1.4;
	min-height: 0;
}

/* Prices stay calm espresso; star ratings in terracotta */
.woocommerce .price,
.woocommerce ul.products li.product .price {
	color: var(--global-palette3);
}

.woocommerce .star-rating span::before,
.wc-block-components-product-rating .wc-block-components-product-rating__stars span::before {
	color: var(--global-palette1);
}

/* Product images: soft corners to match the brand */
.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img,
.woocommerce div.product div.images img {
	border-radius: var(--cozzle-radius-soft);
}

/* Breathing room around shop grids and single-product layouts */
.woocommerce ul.products {
	row-gap: 2.5rem;
}

.woocommerce div.product .summary > * + * {
	margin-block-start: 1rem;
}

/* ==========================================================================
   6. Wordmark — the logo is a typographic recipe, never an image.
      lowercase "cozzle" in Fraunces 600 espresso + chunky terracotta dot.
      Markup: <a class="cozzle-logo" ...>cozzle<span class="cozzle-dot">.</span></a>
      (or the [cozzle_logo] shortcode from functions.php)
   ========================================================================== */

.cozzle-logo,
.cozzle-logo:hover,
.cozzle-logo:focus,
.cozzle-logo:visited {
	font-family: var(--global-heading-font-family);
	font-weight: 600;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	letter-spacing: -0.015em;
	text-transform: lowercase;
	color: #4A372A;
	text-decoration: none;
	line-height: 1;
	display: inline-block;
}

.cozzle-logo .cozzle-dot {
	color: #D08C6E;
	font-size: 1.25em;  /* chunky dot */
	font-weight: 700;
	line-height: 0;
}

/* Fallback (live since 2026-06-09): until/unless the Kadence header is
   manually switched to the [cozzle_logo] HTML element (THEME-SETUP.md §1),
   the default Kadence site-title carries the same wordmark recipe; the
   terracotta dot is a decorative ::after so assistive tech still reads
   the brand as plain "cozzle". */
.site-header .site-title,
.site-branding .site-title {
	font-family: var(--global-heading-font-family);
	font-weight: 600;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	letter-spacing: -0.015em;
	text-transform: lowercase;
	color: #4A372A;
	line-height: 1;
}
.site-header .site-title::after,
.site-branding .site-title::after {
	content: ".";
	color: #D08C6E;
	font-size: 1.25em;
	font-weight: 700;
	line-height: 0;
}

/* ==========================================================================
   7. Homepage sections (cz-*) — designed landing page, added 2026-06-09.
      Markup lives in the Home page (wp:html blocks). Full-bleed sections use
      the 100vw negative-margin trick; overflow-x is clipped to compensate.
   ========================================================================== */

body { overflow-x: clip; }

/* wp:html content can miss the theme's border-box reset — be explicit, or
   every padded 100%-width section overflows by its padding. */
[class^="cz-"], [class*=" cz-"],
[class^="cz-"] *, [class*=" cz-"] * {
	box-sizing: border-box;
}

.cz-full {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.cz-kicker {
	font-family: var(--global-body-font-family);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #D08C6E;
	margin: 0 0 0.75rem;
}

.cz-center { text-align: center; }

.cz-btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

.cz-btn,
.cz-btn:visited {
	display: inline-block;
	background: #D08C6E;
	color: #F4ECE1;
	font-family: var(--global-body-font-family);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	padding: 1rem 1.75rem;
	border-radius: 999px;
	text-decoration: none;
	transition: background 0.18s ease, transform 0.18s ease;
}
.cz-btn:hover, .cz-btn:focus { background: #BD7B5F; color: #F4ECE1; transform: translateY(-1px); }

.cz-btn-ghost, .cz-btn-ghost:visited {
	background: transparent;
	color: #4A372A;
	box-shadow: inset 0 0 0 2px #4A372A;
}
.cz-btn-ghost:hover, .cz-btn-ghost:focus { background: rgba(74,55,42,0.06); color: #4A372A; transform: translateY(-1px); }

.cz-textlink, .cz-textlink:visited {
	color: #D08C6E;
	font-weight: 700;
	text-decoration: none;
}
.cz-textlink:hover { color: #BD7B5F; text-decoration: underline; }

/* --- Hero ----------------------------------------------------------------- */
.cz-hero {
	position: relative;
	min-height: min(80vh, 760px);
	display: flex;
	align-items: center;
}
.cz-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 72% 50%;
}
.cz-hero-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		rgba(244,236,225,0.94) 0%,
		rgba(244,236,225,0.78) 34%,
		rgba(244,236,225,0.25) 62%,
		rgba(244,236,225,0) 82%);
}
.cz-hero-inner {
	position: relative;
	width: 100%;
	/* clamp to the visual viewport so text can never lay out wider than the
	   screen, whatever the surrounding container geometry does */
	max-width: min(1200px, 100vw);
	margin: 0 auto;
	padding: 5rem clamp(1.25rem, 4vw, 2rem);
}
.cz-hero-inner h1 {
	font-size: clamp(2.3rem, 4.5vw, 3.6rem);
	line-height: 1.12;
	color: #4A372A;
	max-width: 14em;
	margin: 0;
}
.cz-hero-sub {
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	color: #5C4636;
	max-width: min(32em, calc(100vw - 2.5rem));
	margin: 1.25rem 0 0;
}
.cz-hero-inner h1 { max-width: min(14em, calc(100vw - 2.5rem)); }

/* --- Value props ----------------------------------------------------------- */
.cz-props {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 2.5rem;
	max-width: 1100px;
	margin: 0 auto;
	padding: 4.5rem 1rem 3.5rem;
}
.cz-prop h3 { margin: 0.9rem 0 0.5rem; font-size: 1.25rem; }
.cz-prop p { margin: 0; color: #5C4636; }
.cz-dot {
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #D08C6E;
}

/* --- Image/copy splits ------------------------------------------------------ */
.cz-split {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	max-width: 1100px;
	margin: 0 auto;
	padding: 3.5rem 1rem;
}
.cz-split-media img {
	width: 100%;
	height: auto;
	border-radius: 28px;
	box-shadow: 0 24px 48px -24px rgba(74,55,42,0.35);
	display: block;
}
.cz-split-copy h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.18; margin: 0 0 1rem; }
.cz-split-copy p { color: #5C4636; }
.cz-split-reverse .cz-split-media { order: 2; }
.cz-split-reverse .cz-split-copy { order: 1; }

/* --- Taupe band --------------------------------------------------------------- */
.cz-band { background: #EADDCB; }
.cz-band .cz-band-inner { padding-top: 4.5rem; padding-bottom: 4.5rem; }

/* --- Lineup cards --------------------------------------------------------------- */
.cz-lineup { max-width: 1100px; margin: 0 auto; padding: 4.5rem 1rem 4rem; }
.cz-lineup > h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); margin: 0 auto 2.5rem; max-width: 22em; }
.cz-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.5rem;
	margin-bottom: 2.5rem;
}
.cz-card {
	background: #FAF5EC;
	border: 1px solid #D8C3AC;
	border-radius: 28px;
	padding: 2rem 1.75rem;
}
.cz-card h3 { margin: 0.9rem 0 0.25rem; font-size: 1.3rem; }
.cz-card p { color: #5C4636; margin: 0.5rem 0 0; }
.cz-price {
	font-family: var(--global-heading-font-family);
	font-weight: 600;
	font-size: 1.25rem;
	color: #4A372A;
}
.cz-badge {
	display: inline-block;
	background: #E8896B;            /* the one allowed peach-coral pop */
	color: #4A372A;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
}

/* --- Quote band --------------------------------------------------------------- */
.cz-quote {
	position: relative;
	min-height: 460px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cz-quote-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cz-quote-scrim { position: absolute; inset: 0; background: rgba(74,55,42,0.55); }
.cz-quote-text {
	position: relative;
	max-width: 34em;
	margin: 0;
	padding: 4rem 2rem;
	border: 0;
	text-align: center;
}
.cz-quote-text p {
	font-family: var(--global-heading-font-family);
	font-size: clamp(1.5rem, 2.6vw, 2.2rem);
	font-weight: 500;
	line-height: 1.3;
	color: #F4ECE1;
	margin: 0 0 1rem;
}
.cz-quote-text footer { color: #D8C3AC; font-size: 0.95rem; }

/* --- Closing CTA --------------------------------------------------------------- */
.cz-cta { max-width: 720px; margin: 0 auto; padding: 4.5rem 1rem 5rem; text-align: center; }
.cz-cta h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); margin-bottom: 1rem; }
.cz-cta p { color: #5C4636; }

/* --- Mobile --------------------------------------------------------------------- */
@media (max-width: 781px) {
	/* On mobile the 100vw full-bleed trick clips ~15px against Kadence's
	   container geometry — so sections become rounded cards inside the
	   content width instead (reads intentional, nothing clips). */
	.cz-full { width: auto; margin-left: 0; margin-right: 0; }
	.cz-hero, .cz-quote { border-radius: 24px; overflow: hidden; }
	.cz-band { border-radius: 24px; }
	.cz-hero { min-height: 76vh; }
	.cz-kicker { font-size: 0.72rem; letter-spacing: 0.12em; }
	.cz-hero-scrim {
		background: linear-gradient(180deg,
			rgba(244,236,225,0.92) 0%,
			rgba(244,236,225,0.72) 55%,
			rgba(244,236,225,0.3) 100%);
	}
	.cz-hero-inner { padding: 3.5rem 1.25rem; }
	.cz-split { grid-template-columns: 1fr; }
	.cz-split-reverse .cz-split-media { order: 0; }
	.cz-split-reverse .cz-split-copy { order: 1; }
	.cz-props { gap: 1.75rem; padding-top: 3rem; }
}