/* ===================================================
   BELYORE — ELEGANT CUSTOM OVERRIDES
   Fancy serif typography + animated hero heading
   =================================================== */

/* ---- 1. Base — smaller, elegant serif ---- */
html {
  font-size: 13px !important;
}

body,
p, span, a, li, label, input, textarea, select, button,
div, section, article, aside, nav, footer, header,
h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
  letter-spacing: 0.01em;
}

.font-mono,
[class*="font-mono"],
code, pre, kbd {
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
}

/* ---- 2. HERO H1 — Vivid Glowing Animated Heading ---- */
h1 {
  font-family: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(1.9rem, 5vw, 4.8rem) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  line-height: 1.08 !important;
  letter-spacing: -0.01em !important;

  /* Visible warm ivory base + animated warm-to-bright glow */
  color: #F5E6D3 !important;
  -webkit-text-fill-color: #F5E6D3 !important;

  animation:
    h1ColorShift 6s ease-in-out infinite,
    h1Float      8s ease-in-out infinite;

  will-change: text-shadow, transform, color;
  position: relative;
  z-index: 2;
}

@keyframes h1ColorShift {
  0%   {
    color: #F5E6D3;
    -webkit-text-fill-color: #F5E6D3;
    text-shadow:
      0 0 18px rgba(255,107,53,0.55),
      0 0 40px rgba(255,60,0,0.25),
      0 2px 80px rgba(255,120,60,0.12);
  }
  25%  {
    color: #FFD4A3;
    -webkit-text-fill-color: #FFD4A3;
    text-shadow:
      0 0 28px rgba(255,180,80,0.80),
      0 0 60px rgba(255,107,53,0.50),
      0 2px 100px rgba(255,60,0,0.25);
  }
  50%  {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    text-shadow:
      0 0 42px rgba(255,107,53,1),
      0 0 80px rgba(255,60,0,0.75),
      0 2px 140px rgba(255,140,60,0.45);
  }
  75%  {
    color: #FFD4A3;
    -webkit-text-fill-color: #FFD4A3;
    text-shadow:
      0 0 22px rgba(255,160,70,0.70),
      0 0 50px rgba(255,60,0,0.38),
      0 2px 90px rgba(255,60,0,0.18);
  }
  100% {
    color: #F5E6D3;
    -webkit-text-fill-color: #F5E6D3;
    text-shadow:
      0 0 18px rgba(255,107,53,0.55),
      0 0 40px rgba(255,60,0,0.25),
      0 2px 80px rgba(255,120,60,0.12);
  }
}

@keyframes h1Float {
  0%, 100% { transform: translateY(0px)   rotate(-0.08deg); }
  33%       { transform: translateY(-7px)  rotate(0.06deg);  }
  66%       { transform: translateY(-3px)  rotate(-0.04deg); }
}

/* Keep the orange span text visible */
h1 span {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* ---- 3. Section headings ---- */
h2 {
  font-family: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(1.4rem, 3.5vw, 2.8rem) !important;
  font-style: italic !important;
}
h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(1rem, 2vw, 1.6rem) !important;
}

/* ---- 4. Buttons ---- */
button, a[class*="px-"] {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase;
}

/* ---- 5. Stats / numbers — use Cormorant SC for numerals ---- */
[class*="font-display"] {
  font-family: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif !important;
}

/* ---- 6. Footer + small labels ---- */
footer, [class*="text-xs"] {
  font-size: 0.68rem !important;
  letter-spacing: 0.06em;
}

/* ---- 7. Nav links ---- */
nav, header {
  font-size: 0.82rem !important;
}

/* ---- 8. BELYORE nav brand text ---- */
a[href="/"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Cormorant SC', 'Cormorant Garamond', serif !important;
  font-size: 1.15rem !important;
  letter-spacing: 0.18em !important;
  transition: filter 0.4s ease !important;
}
a[href="/"]:hover {
  filter: drop-shadow(0 0 12px rgba(255,107,53,0.8)) !important;
}

/* ---- 9. Marquee brand names ---- */
[class*="font-display font-black text-2xl"] {
  font-family: 'Cormorant SC', Georgia, serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em;
}

/* ---- 10. Pricing/hero-stat large numbers — BUG FIX: removed bad font-size override
     The previous rule forced text-3xl/4xl/5xl to 1.4rem which broke all large
     numerical displays. Now we only apply the font-family. ---- */
[class*="text-3xl"],
[class*="text-4xl"],
[class*="text-5xl"] {
  font-family: 'DM Serif Display', serif !important;
}

/* ---- 11. Card subtitles ---- */
[class*="text-white text-xs font-semibold"] {
  font-size: 0.68rem !important;
  letter-spacing: 0.04em;
}

/* ---- 12. Badge pill ---- */
[class*="text-sm font-mono"] {
  font-size: 0.7rem !important;
  letter-spacing: 0.12em;
}