/*
Theme Name:   ViveTel Child
Template:     zaaztheme
Description:  Child theme of zaaztheme for vivetel.com.
Author:       Zaaz
Version:      0.2.0
Text Domain:  vivetel-com-child
*/

/* ------------------------------------------------------------------
   Typography: align theme chrome (header, nav, footer) with the
   zaazbuilder Google Fonts (Space Grotesk + Inter) so the whole site
   reads as one typographic system.
   ------------------------------------------------------------------ */

body,
.zt-main,
.zt-footer,
.zt-top-bar {
  font-family: 'Inter', 'Space Grotesk', system-ui, -apple-system, sans-serif;
  letter-spacing: -0.005em;
}

.zt-site-title,
.zt-site-title a,
.zt-header-brand {
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.zt-nav__link,
.zt-nav__submenu .zt-nav__link,
.zt-top-bar-menu .menu-item a,
.zt-footer__menu .menu-item a {
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  font-weight: 500;
  letter-spacing: 0.005em;
  font-size: 0.95rem;
}

.zt-lang-switcher__item a {
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 0.82rem;
  text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6,
.zt-heading {
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  letter-spacing: -0.02em;
}

.zt-footer,
.zt-footer p,
.zt-footer__copyright {
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: 0.005em;
}

/* Tabular numerals wherever prices or stats appear */
.zt-builder-page [class*="price"],
.zt-builder-page [style*="tabular-nums"] {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
   Hero mesh background — moved here from inline styles because
   wp_kses_post strips multi-value `background:` declarations.
   Applied to any .vt-hero-bg element inside a zaazbuilder html widget.
   ------------------------------------------------------------------ */

.vt-hero-bg {
  position: relative;
  margin: -96px calc(50% - 50vw);
  padding: 96px calc(50vw - 50%);
  color: #ffffff;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 80% at 85% 10%, rgba(196,244,66,0.28) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 20% 90%, rgba(236,72,153,0.22) 0%, transparent 50%),
    radial-gradient(circle at 35% 35%, rgba(139,180,255,0.18) 0%, transparent 45%),
    linear-gradient(135deg, #7C3AED 0%, #4F46E5 50%, #3B82F6 100%);
}

/* Subtle dot-grid texture overlay */
.vt-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle cx='1' cy='1' r='1' fill='rgba(255,255,255,0.08)'/></svg>");
  background-size: 32px 32px;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

/* Soft lime glow bloom in the top-left corner for visual warmth */
.vt-hero-bg::after {
  content: "";
  position: absolute;
  top: -80px;
  left: -80px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(196,244,66,0.18) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(20px);
  z-index: 0;
}

.vt-hero-bg > * {
  position: relative;
  z-index: 1;
}

/* Two-column hero (text left, photo right). Stacks on mobile. */
.vt-hero-grid h1 {
  max-width: 560px;
}
.vt-hero-grid p {
  max-width: 520px;
}

@media (max-width: 820px) {
  .vt-hero-grid {
    text-align: center;
  }
  .vt-hero-grid h1,
  .vt-hero-grid p {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
  .vt-hero-ctas {
    justify-content: center;
  }
  .vt-hero-trust {
    justify-content: center !important;
  }
  .vt-hero-grid img {
    max-width: 340px;
  }
}