/*
Theme Name: Agave & Copper
Theme URI: https://agaveandcopper.com
Description: Desert Luxury child theme for Kadence. Carries the brand palette and
             typography via theme.json Global Styles — no per-page hard-coding.
Author: Agave & Copper Beauty Co.
Template: kadence
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: agave-copper
*/

/* All design tokens live in theme.json. This file is intentionally minimal —
   add only what Global Styles genuinely cannot express. */

/* Sub-brand accent: the Science collection runs the cool palette.
   Applied via a body class set in functions.php. */
body.ac-science {
	--ac-accent: var(--wp--preset--color--agave-blue);
	--ac-accent-soft: var(--wp--preset--color--sage);
}

body.ac-apothecary {
	--ac-accent: var(--wp--preset--color--copper);
	--ac-accent-soft: var(--wp--preset--color--sand);
}

/* /science and /apothecary landing pages — cool vs. warm wash so each
   sub-brand still reads as its own world, not a shared product grid. */
.ac-section-header {
	position: relative;
	padding: 5rem 6vw 4rem;
	text-align: center;
}

.ac-section-header h1 {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 300;
	margin: 0 0 0.8rem;
}

.ac-section-header p {
	max-width: 56ch;
	margin: 0 auto;
	font-size: 1rem;
	opacity: 0.85;
}

body.ac-science .ac-section-header {
	background: linear-gradient(180deg, #EDF3F0 0%, var(--wp--preset--color--ivory) 100%);
}

body.ac-science .ac-section-header h1 {
	color: var(--wp--preset--color--agave-blue);
}

body.ac-apothecary .ac-section-header {
	background: linear-gradient(180deg, #F6EEE1 0%, var(--wp--preset--color--ivory) 100%);
}

body.ac-apothecary .ac-section-header h1 {
	color: var(--wp--preset--color--copper);
}

/* Our Story page header photo. */
.ac-story-hero {
	position: relative;
	min-height: 56vh;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
}

.ac-story-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(43, 39, 36, 0.05) 0%, rgba(43, 39, 36, 0.55) 100%);
}

.ac-story-hero .ac-story-hero-caption {
	position: relative;
	z-index: 1;
	padding: 2.5rem 6vw;
	color: var(--wp--preset--color--ivory);
	font-family: var(--wp--preset--font-family--headline);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.3rem, 2.4vw, 1.9rem);
	max-width: 46ch;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

/* Handcrafted badge — Apothecary SKUs only. */
.ac-badge-handcrafted {
	display: inline-block;
	padding: 0.35em 0.9em;
	border: 1px solid var(--wp--preset--color--copper);
	border-radius: 2px;
	color: var(--wp--preset--color--copper);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Split-shipping notice at checkout (mixed Apothecary + Science carts). */
.ac-split-shipping-notice {
	border-left: 3px solid var(--wp--preset--color--agave-blue);
	background: var(--wp--preset--color--ivory);
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
	font-size: 0.9rem;
}

/* =========================================================================
   Homepage (Mockup B — "Hybrid"), approved 2026-07-28.
   Gradients are placeholder art direction; each .ac-photo-note names the
   real photograph that should eventually replace its section background.
   ========================================================================= */

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

.ac-photo-note {
	position: absolute;
	bottom: 12px;
	right: 14px;
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(43, 39, 36, 0.55);
	background: rgba(247, 242, 233, 0.7);
	padding: 0.3em 0.7em;
	border-radius: 2px;
	z-index: 2;
}

/* ---- hero ---- */
.ac-hero {
	position: relative;
	min-height: 82vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background:
		radial-gradient(120% 90% at 50% 110%, rgba(178, 110, 69, 0.55), transparent 60%),
		radial-gradient(90% 70% at 80% 0%, rgba(94, 139, 140, 0.25), transparent 55%),
		linear-gradient(175deg, #E9DCC4 0%, var(--wp--preset--color--sand) 46%, #C89A72 78%, var(--wp--preset--color--copper) 130%);
	background-size: cover;
	background-position: center;
}

/* Real photography — dark scrim keeps the headline legible over the shot. */
.ac-hero.ac-has-photo {
	background-blend-mode: normal;
}

.ac-hero.ac-has-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(43, 39, 36, 0.35) 0%, rgba(43, 39, 36, 0.15) 40%, rgba(43, 39, 36, 0.55) 100%);
}

.ac-hero.ac-has-photo > * {
	position: relative;
	z-index: 1;
}

.ac-hero.ac-has-photo h1,
.ac-hero.ac-has-photo .ac-hero-sub {
	color: var(--wp--preset--color--ivory);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.ac-hero h1 {
	font-size: clamp(2.6rem, 6vw, 4.6rem);
	font-weight: 300;
	letter-spacing: 0.02em;
}

.ac-hero .ac-hero-sub {
	margin-top: 1.1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8rem;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	opacity: 0.75;
}

/* ---- story ---- */
.ac-story {
	max-width: 680px;
	margin: 0 auto;
	padding: 5.5rem 6vw 5rem;
	text-align: center;
}

.ac-story p {
	font-family: var(--wp--preset--font-family--headline);
	font-size: clamp(1.35rem, 2.4vw, 1.8rem);
	font-weight: 300;
	line-height: 1.55;
}

.ac-eyebrow-link,
.ac-story a {
	display: inline-block;
	margin-top: 2rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.72rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--copper);
	border-bottom: 1px solid var(--wp--preset--color--copper);
	padding-bottom: 0.35em;
	text-decoration: none;
}

/* ---- two worlds ---- */
.ac-worlds {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
}

.ac-world {
	position: relative;
	min-height: 62vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 3.2rem;
	color: var(--wp--preset--color--ivory);
	text-decoration: none;
}

.ac-world.ac-world-apothecary {
	background:
		radial-gradient(90% 70% at 30% 20%, rgba(217, 199, 167, 0.5), transparent 60%),
		linear-gradient(160deg, #8F5735 0%, var(--wp--preset--color--copper) 45%, #6E4128 100%);
	background-size: cover;
	background-position: center;
}

.ac-world.ac-world-science {
	background:
		radial-gradient(90% 70% at 70% 15%, rgba(156, 175, 136, 0.45), transparent 60%),
		linear-gradient(200deg, #7BA3A4 0%, var(--wp--preset--color--agave-blue) 50%, #3E6263 100%);
	background-size: cover;
	background-position: center;
}

/* Real photography — darken bottom third so the title/CTA stay legible,
   without a flat scrim over the whole tile. */
.ac-world.ac-has-photo {
	background-blend-mode: normal;
}

.ac-world.ac-has-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(43, 39, 36, 0) 35%, rgba(43, 39, 36, 0.75) 100%);
}

.ac-world.ac-has-photo > * {
	position: relative;
	z-index: 1;
}

.ac-world h2 {
	color: var(--wp--preset--color--ivory);
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	font-weight: 300;
	margin: 0;
}

.ac-world p {
	margin: 0.7rem 0 1.6rem;
	font-size: 0.9rem;
	max-width: 34ch;
	opacity: 0.92;
}

.ac-world .ac-discover {
	font-size: 0.7rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(247, 242, 233, 0.7);
	padding-bottom: 0.4em;
	align-self: flex-start;
}

/* ---- the edit ---- */
.ac-edit {
	max-width: 1080px;
	margin: 0 auto;
	padding: 5.5rem 6vw;
	text-align: center;
}

.ac-kicker {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.68rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wp--preset--color--copper);
}

.ac-edit h2 {
	font-weight: 300;
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	margin: 0.5rem 0 3rem;
}

.ac-products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.4rem;
}

.ac-product-card {
	text-decoration: none;
	color: inherit;
}

.ac-product-card .ac-shot {
	position: relative;
	height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(170deg, #F1EADD 0%, var(--wp--preset--color--sand) 100%);
	background-size: cover;
	background-position: center;
	border-radius: 2px;
	overflow: hidden;
}

.ac-product-card.ac-cool .ac-shot {
	background: linear-gradient(170deg, #EDF1EE 0%, #BCCFCF 100%);
}

.ac-product-card .ac-shot.ac-has-photo {
	background-size: cover;
	background-position: center;
}

.ac-bottle {
	width: 64px;
	height: 150px;
	border: 1px solid rgba(43, 39, 36, 0.35);
	border-radius: 4px 4px 2px 2px;
	position: relative;
}

.ac-bottle::before {
	content: "";
	position: absolute;
	top: -26px;
	left: 50%;
	transform: translateX(-50%);
	width: 22px;
	height: 26px;
	border: 1px solid rgba(43, 39, 36, 0.35);
	border-bottom: none;
	border-radius: 2px;
}

.ac-product-card h3 {
	font-weight: 400;
	font-size: 1.2rem;
	margin: 1.2rem 0 0;
}

.ac-product-card .ac-sub {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.6;
	margin-top: 0.25rem;
}

.ac-product-card .ac-price {
	font-size: 0.85rem;
	color: var(--wp--preset--color--copper);
	margin-top: 0.5rem;
}

/* ---- proof strip ---- */
.ac-proof {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4vw;
	max-width: 1080px;
	margin: 0 auto;
	padding: 1.5rem 6vw 5.5rem;
	text-align: center;
}

.ac-proof h3 {
	font-weight: 400;
	font-size: 1.9rem;
	color: var(--wp--preset--color--copper);
	margin: 0;
}

.ac-proof p {
	margin-top: 0.5rem;
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	opacity: 0.8;
}

@media (max-width: 820px) {
	.ac-worlds { grid-template-columns: 1fr; }
	.ac-products,
	.ac-proof { grid-template-columns: 1fr; }
	.ac-world { min-height: 46vh; }
}