/* 93 Brew — "heavy" look: a bolder, weightier visual system + a big bold
 * animated hero. Loads after bold.css. Leans on heavier font weights (the
 * font enqueue loads the full Fraunces/Inter variable ranges) and the stable
 * Elementor element IDs the pages were built with (hero = brew0009 / brew0002).
 * Palette variables come from site.css. */

/* =========================================================================
 * 1. Heavier global type + contrast
 * ====================================================================== */
:root {
	/* Push Elementor's global weights up, and deepen the ink for contrast. */
	--e-global-typography-primary-font-weight: 800;
	--e-global-typography-secondary-font-weight: 800;
	--e-global-typography-accent-font-weight: 700;
	--brew-ink: #201810;
}

/* Headings: heavier and tighter across the board. */
h1, h2, h3, h4, h5, h6,
.elementor-widget-heading .elementor-heading-title {
	font-weight: 800;
	letter-spacing: -0.025em;
}

/* Larger display sizes (override the lighter clamps in site.css). */
h1,
.elementor-widget-heading h1.elementor-heading-title {
	font-size: clamp(2.5rem, 6vw, 4.4rem);
	line-height: 1.02;
}
h2,
.elementor-widget-heading h2.elementor-heading-title {
	font-size: clamp(1.9rem, 4vw, 3rem);
	line-height: 1.1;
}

/* Body gets a touch more weight so the whole page feels substantial. */
body {
	font-weight: 450;
}

/* =========================================================================
 * 2. Heavier UI chrome — nav, buttons, labels, prices
 * ====================================================================== */
.site-navigation a,
.site-header nav a {
	font-weight: 700;
	opacity: 0.95;
}

.elementor-button,
.elementor-widget-button .elementor-button {
	font-weight: 700;
	padding: 16px 34px;
	font-size: 1.02rem;
	letter-spacing: 0.005em;
}

.brew-eyebrow {
	font-weight: 800;
	letter-spacing: 0.2em;
}

.brew-section__title,
.brew-single__title {
	font-weight: 800;
}
.brew-section__title {
	font-size: clamp(1.9rem, 3.4vw, 2.7rem);
}

.brew-card__title {
	font-weight: 700;
}
.brew-card__price,
.brew-single__price {
	font-weight: 800;
}
.brew-menu__nav a {
	font-weight: 700;
}

/* =========================================================================
 * 3. Heavier structure — deeper borders and shadows give visual weight
 * ====================================================================== */
.brew-card,
.brew-feat__item,
.brew-values__item,
.brew-info__box,
.brew-channels > a,
.brew-channels > .brew-chan {
	border-width: 1.5px;
}
.brew-card {
	box-shadow: 0 1px 0 rgba(42, 33, 26, 0.05);
}
.brew-card:hover {
	box-shadow: 0 20px 44px rgba(42, 33, 26, 0.16);
}
.brew-feat__item {
	box-shadow: 0 2px 0 rgba(42, 33, 26, 0.04);
}

/* =========================================================================
 * 4. The hero — big, bold, and alive (home container brew0009 / H1 brew0002)
 * ====================================================================== */

/* Bold white headline: much larger, heaviest weight, with depth. */
.elementor-element-brew0002 .elementor-heading-title {
	font-weight: 900;
	font-size: clamp(2.9rem, 8vw, 6rem);
	line-height: 0.98;
	letter-spacing: -0.035em;
	text-shadow: 0 4px 34px rgba(0, 0, 0, 0.38);
}

/* Contain the animated backdrop and keep content above it. */
.elementor-element-brew0009 {
	position: relative;
	overflow: hidden;
}
.elementor-element-brew0009 > .e-con-inner {
	position: relative;
	z-index: 2;
}

/* Animated backdrop: two warm light pools that slowly drift and breathe over
   the dark hero photo. Screen blend keeps it a glow, never washing out text. */
.elementor-element-brew0009::after {
	content: "";
	position: absolute;
	inset: -25%;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(38% 42% at 24% 30%, rgba(206, 162, 116, 0.40), transparent 70%),
		radial-gradient(44% 46% at 80% 74%, rgba(138, 109, 79, 0.34), transparent 72%);
	mix-blend-mode: screen;
	animation: brew-hero-drift 22s ease-in-out infinite alternate;
}
@keyframes brew-hero-drift {
	from { transform: translate3d(-3%, -2%, 0) scale(1.05); opacity: 0.8; }
	to   { transform: translate3d(3%, 3%, 0) scale(1.16); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.elementor-element-brew0009::after {
		animation: none;
	}
}