/*
 Theme Name:   KrispyMemphis – Hello Child
 Theme URI:    https://krispymemphismusic.com
 Description:  Minimal child theme for Hello Elementor with KrispyMemphis branding.
 Author:       Kris Boehm
 Template:     hello-elementor
 Version:      1.0.0
*/

:root{
  --km-ink: #0F172A;
  --km-slate: #111827;
  --km-cream: #FFF7ED;
  --km-accent: #D946EF;
  --km-gold: #F59E0B;
  --km-muted: #6B7280;
  --km-radius: 1.25rem;
  --km-shadow: 0 10px 30px rgba(0,0,0,.25);
}

html, body {
  background: var(--km-ink);
  color: var(--km-cream);
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
}

.km-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(520px, 70vh, 820px);
  display: grid; place-items: center;
  background:
    radial-gradient(1000px 600px at 10% 0%, rgba(217,70,239,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(245,158,11,.12), transparent 60%),
    linear-gradient(180deg, var(--km-slate), var(--km-ink));
  overflow: hidden;
}
.km-hero__guitar {
  position: absolute; inset: 0;
  opacity: .18; pointer-events:none;
  background-repeat: no-repeat;
  background-position: right -120px bottom -80px;
  background-size: min(70vw, 900px);
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/45/Acoustic_guitar_icon.svg');
}
.km-title {font-family: "Lora", Georgia, serif; font-size: clamp(2.2rem, 4.2vw, 4.2rem); line-height: 1.05; margin: .4rem 0 1rem;}/* Put hero content above backgrounds */
.km-hero .km-container {
  position: relative;
  z-index: 1;
}

/* Add the guitar as a background layer (no widget needed) */
.km-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/45/Acoustic_guitar_icon.svg'); /* swap with your Media Library URL if you want */
  background-repeat: no-repeat;
  background-position: right -120px bottom -80px;
  background-size: min(70vw, 900px);
  opacity: .18;
  pointer-events: none;
}