/* ============================================================================
   Amplify — Buzz landing-page blocks
   ----------------------------------------------------------------------------
   Reusable, page-scope-free `amp-*` classes for building on-brand landing pages
   in Elementor. Add a class in a widget's / container's Advanced → CSS Classes
   field. Loaded globally (functions.php: 'amplify-blocks-style'), including the
   Elementor editor preview, so it works on any page. Only elements that opt in
   via an `amp-*` class are affected.

   Text color and button color flow through CSS variables (--amp-fg,
   --amp-fg-soft, --amp-btn-*), so any block placed inside a dark `.amp-night`
   band flips to light automatically — no light-variant classes to remember.

   Each rule targets the raw element AND Elementor's inner markup
   (.elementor-heading-title / .elementor-button / .elementor-icon), and is
   specific enough (0,2,0) to beat the child theme's body h1-h6/p{color:espresso}
   and a.elementor-button{...!important} defaults.
   ============================================================================ */

:root {
	--amp-ink: #0a1b3d;
	--amp-ink-soft: #44516e;
	--amp-canvas: #f0efe9;
	--amp-night-bg: #0a1b3d;
	--amp-night-ink: #f4f3ee;
	--amp-night-ink-soft: #c9d2ec;
	--amp-gold: #ffb600;
	--amp-violet: #5c50ee;
	--amp-cyan: #00c6ff;
	--amp-green: #19d874;
	--amp-radius: 1.4rem;
	--amp-font: "Buzz Sans", "Buzz Sans Variable", "Space Grotesk", sans-serif;
}

/* ── Accent setters ──────────────────────────────────────────────────────────
   Add alongside a card / icon / stat / button to theme it. --amp-accent is the
   vivid brand color (fills, icon discs); --amp-accent-ink is the darkened,
   WCAG-legible-on-white version (accent text, links). */
.amp-violet { --amp-accent: #5c50ee; --amp-accent-ink: #4a3ed9; }
.amp-cyan   { --amp-accent: #00c6ff; --amp-accent-ink: #00719c; }
.amp-green  { --amp-accent: #19d874; --amp-accent-ink: #0e7c42; }
.amp-gold   { --amp-accent: #ffb600; --amp-accent-ink: #8a5f00; }

/* ── Section padding helper (optional; Elementor padding controls also work) ── */
.amp-section { padding-top: clamp(3rem, 6vw, 5.5rem); padding-bottom: clamp(3rem, 6vw, 5.5rem); }
.amp-center { text-align: center; }

/* ── Kicker / eyebrow — Heading or Text widget ─────────────────────────────── */
.amp-kicker,
.amp-kicker .elementor-heading-title,
.amp-kicker .elementor-widget-container > * {
	font-family: var(--amp-font);
	font-variation-settings: "wght" 900;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.85rem;
	line-height: 1.35;
	margin: 0;
	color: var(--amp-fg, var(--amp-ink));
}

/* ── Display title — Heading widget ────────────────────────────────────────── */
.amp-title,
.amp-title .elementor-heading-title {
	font-family: var(--amp-font);
	font-variation-settings: "wght" 560;
	font-weight: 560;
	line-height: 1.05;
	letter-spacing: -0.015em;
	color: var(--amp-fg, var(--amp-ink));
}

/* ── Lede / intro paragraph — Text Editor widget (or Heading) ──────────────── */
.amp-lede,
.amp-lede p,
.amp-lede .elementor-heading-title {
	font-family: "Roboto", sans-serif;
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	line-height: 1.6;
	color: var(--amp-fg-soft, var(--amp-ink-soft));
}

/* ── Dark "night" band — Section / Container ───────────────────────────────────
   Flips amp text to light and makes amp buttons gold. Pair with .amp-section
   (or Elementor padding) for spacing; add .amp-inset for the rounded window. */
.amp-night {
	background: var(--amp-night-bg);
	color: var(--amp-night-ink);
	--amp-fg: var(--amp-night-ink);
	--amp-fg-soft: var(--amp-night-ink-soft);
	--amp-btn-bg: var(--amp-gold);
	--amp-btn-fg: var(--amp-ink);
}
.amp-inset { border-radius: var(--amp-radius); overflow: hidden; }

/* ── Card — Container / Column used as a card ──────────────────────────────── */
.amp-card {
	background: #fff;
	border: 1px solid rgba(10, 27, 61, 0.08);
	border-radius: var(--amp-radius);
	padding: clamp(1.5rem, 2.4vw, 2rem);
	box-shadow: 0 18px 40px rgba(10, 27, 61, 0.06);
}

/* ── Accent icon disc — Icon widget (pair with an accent class) ─────────────── */
.amp-card-icon .elementor-icon {
	width: 3rem; height: 3rem;
	border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--amp-accent, var(--amp-violet));
	color: #fff;
}
.amp-card-icon .elementor-icon svg { width: 1.4rem; height: 1.4rem; fill: #fff; }
.amp-card-icon .elementor-icon i { font-size: 1.35rem; color: #fff; }

/* ── Big stat number + label — Heading (number) + Text (label) ─────────────── */
.amp-stat,
.amp-stat .elementor-heading-title {
	font-family: var(--amp-font);
	font-variation-settings: "wght" 900;
	font-weight: 900;
	font-size: clamp(2.2rem, 3.6vw, 3rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: var(--amp-accent-ink, var(--amp-fg, var(--amp-ink)));
}
.amp-night .amp-stat,
.amp-night .amp-stat .elementor-heading-title { color: var(--amp-gold); }
.amp-stat-label,
.amp-stat-label p,
.amp-stat-label .elementor-heading-title {
	font-family: "Roboto", sans-serif;
	font-size: 0.95rem;
	line-height: 1.4;
	color: var(--amp-fg-soft, var(--amp-ink-soft));
}

/* ── Pill buttons — Button widget (styles the inner .elementor-button) ─────────
   color uses !important to beat the child theme's a.elementor-button{color:#000
   !important}; background/border/radius/padding win on specificity alone. */
.amp-btn .elementor-button,
a.amp-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--amp-btn-bg, var(--amp-ink));
	color: var(--amp-btn-fg, var(--amp-canvas)) !important;
	font-family: var(--amp-font);
	font-variation-settings: "wght" 900;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.82rem;
	line-height: 1.15;
	border: none;
	border-radius: 999px;
	padding: 0.9rem 2rem;
	transition: transform 0.2s ease, background 0.2s ease;
}
.amp-btn .elementor-button:hover,
a.amp-btn:hover { transform: translateY(-2px); }
.amp-btn--ghost .elementor-button,
a.amp-btn--ghost {
	background: transparent;
	color: var(--amp-fg, var(--amp-ink)) !important;
	border: 1.5px solid color-mix(in srgb, var(--amp-fg, var(--amp-ink)) 35%, transparent);
}

/* ── Canvas helper — a light warm page/section background to match the demo ──── */
.amp-canvas-bg { background: var(--amp-canvas); }