/* ==========================================================================
   Just a Leaf — brand tokens (single source of truth)
   Mirror of Brand Standards §6.2 / CLAUDE.md design tokens.
   Never hardcode these hex values in templates — reference the variables.
   No teal. Ever. (#7fc9c4 was the old Shopify theme — it is wrong.)
   ========================================================================== */

:root {
	/* Palette — exact brand values */
	--jal-forest-green: #215731; /* primary */
	--jal-lawn-green:   #A4D65E; /* the pop / accent */
	--jal-tan:          #E8DEB0; /* background */
	--jal-beige:        #F4EACE; /* background / canvas */
	--jal-sepia:        #89532F; /* text/illustration accent ONLY */
	--jal-gold:         #F0B537; /* sparing accent */
	--jal-black:        #000000;
	--jal-white:        #FFFFFF;

	/* Semantic roles */
	--jal-canvas:  var(--jal-beige);
	--jal-ink:     #1A1A1A;
	--jal-heading: var(--jal-forest-green);
	--jal-pop:     var(--jal-lawn-green);

	/* Type families (Brand Standards §6.3) */
	--jal-font-head:   "Argent CF", "Fraunces", "Playfair Display", Georgia, serif;
	--jal-font-body:   "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--jal-font-accent: "Homemade Apple", cursive;
}

/* Base typography ------------------------------------------------------- */

body {
	font-family: var(--jal-font-body);
	color: var(--jal-ink);
	background-color: var(--jal-canvas);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
	font-family: var(--jal-font-head);
	color: var(--jal-heading);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Homemade Apple — only as a 1–2 word handwritten accent. */
.jal-accent {
	font-family: var(--jal-font-accent);
	color: var(--jal-forest-green);
}

/* The Lawn Green "pop" for primary actions / highlights. */
.jal-pop {
	color: var(--jal-pop);
}

/* ===== Homepage section components ===== */

/* Shop-by-occasion tiles — quiet by default, lawn-green on interaction. */
#shop-by-occasion .wp-block-group {
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}
#shop-by-occasion .wp-block-group:hover {
	box-shadow: inset 0 0 0 2px var(--jal-lawn-green);
}
#shop-by-occasion a,
.wp-block-group a {
	text-decoration: none;
}
#shop-by-occasion a:hover {
	text-decoration: underline;
	text-decoration-color: var(--jal-lawn-green);
}

/* Newsletter sign-up form. */
.jal-newsletter {
	display: flex;
	gap: 0.5rem;
	max-width: 460px;
	margin: 1rem auto 0;
	flex-wrap: wrap;
}
.jal-newsletter input[type="email"] {
	flex: 1 1 220px;
	padding: 0.8rem 1rem;
	border: 1px solid var(--jal-forest-green);
	border-radius: 4px;
	font-family: var(--jal-font-body);
	background: var(--jal-white);
}
.jal-newsletter button {
	padding: 0.8rem 1.4rem;
	border: 0;
	border-radius: 4px;
	background: var(--jal-lawn-green);
	color: var(--jal-forest-green);
	font-family: var(--jal-font-body);
	font-weight: 600;
	cursor: pointer;
}
.jal-newsletter button:hover {
	background: var(--jal-forest-green);
	color: var(--jal-white);
}

/* "Shop this occasion" product grid + product cards. */
.jal-product-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	margin: 1.5rem 0;
}
@media (max-width: 781px) {
	.jal-product-grid { grid-template-columns: repeat(2, 1fr); }
}
.jal-product-card {
	display: block;
	text-decoration: none;
	background: var(--jal-white);
	border-radius: 6px;
	overflow: hidden;
	color: var(--jal-ink);
	transition: box-shadow 0.18s ease;
}
.jal-product-card:hover {
	box-shadow: inset 0 0 0 2px var(--jal-lawn-green);
}
.jal-product-card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.jal-product-card__title {
	display: block;
	padding: 0.75rem 0.9rem;
	font-family: var(--jal-font-head);
	color: var(--jal-forest-green);
	font-size: 1rem;
}

/* Subscribe & Save (PDP) — gateway-ready, shown only when activated. */
.jal-subscribe-save {
	border: 1px solid var(--jal-tan);
	border-radius: 6px;
	padding: 0.9rem 1rem;
	margin: 0 0 1rem;
	background: var(--jal-beige);
}
.jal-subscribe-save legend {
	font-family: var(--jal-font-head);
	color: var(--jal-forest-green);
	padding: 0 0.4rem;
}
.jal-subscribe-save label {
	display: block;
	margin: 0.35rem 0;
	cursor: pointer;
}
.jal-ss-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	background: var(--jal-lawn-green);
	color: var(--jal-forest-green);
	padding: 0.1rem 0.45rem;
	border-radius: 3px;
}

/* Form-archive hosting intro (Build 6) — narrative top, grid below. */
.jal-shop-intro {
	max-width: 760px;
	margin: 0 0 1.5rem;
}
.jal-shop-intro__lead {
	font-family: var(--jal-font-head);
	color: var(--jal-forest-green);
	font-size: 1.3rem;
	line-height: 1.3;
	margin: 0 0 0.4rem;
}
.jal-shop-intro__atom {
	margin: 0;
	color: var(--jal-ink);
	line-height: 1.6;
}

/* ===== PDP moat surface (Build 5) ===== */

/* Hosting context — occasions this product serves (above the fold). */
.jal-pdp-occasions {
	margin: 0.25rem 0 1rem;
	font-size: 0.95rem;
	line-height: 1.6;
}
.jal-pdp-occasions__label {
	font-family: var(--jal-font-head);
	color: var(--jal-sepia);
	margin-right: 0.35rem;
}
.jal-pdp-occasions a {
	color: var(--jal-forest-green);
	text-decoration: none;
	white-space: nowrap;
}
.jal-pdp-occasions a:hover {
	text-decoration: underline;
	text-decoration-color: var(--jal-lawn-green);
}

/* Organic moat proof block — text-only trust elements (no cert badge image). */
.jal-pdp-moat {
	background: var(--jal-beige);
	border-radius: 6px;
	padding: 1.1rem 1.25rem;
	margin: 1.25rem 0;
}
.jal-pdp-moat__title {
	font-size: 1.05rem;
	color: var(--jal-forest-green);
	margin: 0 0 0.6rem;
}
.jal-pdp-moat__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.jal-pdp-moat__list li {
	position: relative;
	padding-left: 1.4rem;
	margin: 0.4rem 0;
	line-height: 1.5;
}
.jal-pdp-moat__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--jal-lawn-green);
}

/* PDP keeps a clean variant switcher — never expose a per-plate unit price. */
.single-product .woocommerce-variation-price { font-weight: 600; }

/* Single-product FAQ (answer-extractable). */
.jal-product-faq {
	max-width: 760px;
	margin: 2rem auto;
}
.jal-product-faq h3 {
	margin-bottom: 0.25rem;
	font-size: 1.05rem;
}
.jal-product-faq p {
	margin-top: 0;
}

/* Visually-hidden labels (accessibility). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}