/*
Theme Name: Gizmott 2026
Theme URI: https://gizmott.com
Description: Child theme for Gizmott — dark redesign with custom site-wide header/footer and a custom HTML homepage template. Uses Bebas Neue + Instrument Serif + Inter fonts, cyan/pink brand palette.
Author: Gizmeon Inc.
Author URI: https://gizmeon.com
Template: essentials
Version: 3.11.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gizmott-child
*/

/* ============================================================
   DESIGN TOKENS — synced with new homepage design
   Change here to retheme the entire site.
   ============================================================ */
:root {
  --black:      #05060A;
  --black2:     #0A0C12;
  --black3:     #10121A;
  --black4:     #161922;
  --cyan:       #26D6FF;
  --cyan-dim:   rgba(38, 214, 255, 0.12);
  --cyan-glow:  rgba(38, 214, 255, 0.06);
  --pink:       #FF5BD1;
  --pink-dim:   rgba(255, 91, 209, 0.12);
  --purple:     rgba(38, 214, 255, 0.7);
  --white:      #F5F5F8;
  --white2:     #DDDDE5;
  --mid:        rgba(245, 245, 248, 0.45);
  --bl:         rgba(255, 255, 255, 0.07);
  --bl2:        rgba(255, 255, 255, 0.12);
  --bl3:        rgba(255, 255, 255, 0.18);

  --ff-d: 'Bebas Neue', sans-serif;
  --ff-s: 'Instrument Serif', serif;
  --ff-b: 'Inter', -apple-system, sans-serif;

  --g-gradient: linear-gradient(135deg, var(--cyan) 0%, var(--pink) 100%);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-glow: 0 10px 40px rgba(38, 214, 255, 0.15), 0 10px 40px rgba(255, 91, 209, 0.12);
}

/* ============================================================
   RESET + BASE
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ── Dark theme base: ONLY on our custom template pages ── */
body.gz-home-active,
body.gz-features-active,
body.gz-pricing-active,
body.gz-ai-hub-active,
body.gz-contact-active,
body.gz-book-demo-active,
body.gz-micro-drama-active {
  font-family: var(--ff-b);
  background: var(--black) !important;
  color: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.gz-home-active .site,
body.gz-features-active .site,
body.gz-pricing-active .site,
body.gz-ai-hub-active .site,
body.gz-contact-active .site,
body.gz-book-demo-active .site,
body.gz-micro-drama-active .site,
body.gz-home-active #page,
body.gz-features-active #page,
body.gz-pricing-active #page,
body.gz-ai-hub-active #page,
body.gz-contact-active #page,
body.gz-book-demo-active #page,
body.gz-micro-drama-active #page,
body.gz-home-active #content,
body.gz-features-active #content,
body.gz-pricing-active #content,
body.gz-ai-hub-active #content,
body.gz-contact-active #content,
body.gz-book-demo-active #content,
body.gz-micro-drama-active #content,
body.gz-home-active main,
body.gz-features-active main,
body.gz-pricing-active main,
body.gz-ai-hub-active main,
body.gz-contact-active main,
body.gz-book-demo-active main,
body.gz-micro-drama-active main {
  background-color: var(--black) !important;
  color: var(--white);
}

body.gz-home-active .wpb_row,
body.gz-features-active .wpb_row,
body.gz-pricing-active .wpb_row,
body.gz-ai-hub-active .wpb_row,
body.gz-contact-active .wpb_row,
body.gz-book-demo-active .wpb_row,
body.gz-micro-drama-active .wpb_row,
body.gz-home-active .vc_row,
body.gz-features-active .vc_row,
body.gz-pricing-active .vc_row,
body.gz-ai-hub-active .vc_row,
body.gz-contact-active .vc_row,
body.gz-book-demo-active .vc_row,
body.gz-micro-drama-active .vc_row,
body.gz-home-active .vc_section,
body.gz-features-active .vc_section,
body.gz-pricing-active .vc_section,
body.gz-ai-hub-active .vc_section,
body.gz-contact-active .vc_section,
body.gz-book-demo-active .vc_section,
body.gz-micro-drama-active .vc_section {
  background-color: transparent;
  color: var(--white);
}

/* ============================================================
   TYPOGRAPHY — scoped to our pages only
   ============================================================ */
body.gz-home-active h1, body.gz-features-active h1, body.gz-pricing-active h1,
body.gz-ai-hub-active h1, body.gz-contact-active h1, body.gz-book-demo-active h1,
body.gz-micro-drama-active h1,
body.gz-home-active h2, body.gz-features-active h2, body.gz-pricing-active h2,
body.gz-ai-hub-active h2, body.gz-contact-active h2, body.gz-book-demo-active h2,
body.gz-micro-drama-active h2,
body.gz-home-active h3, body.gz-features-active h3, body.gz-pricing-active h3,
body.gz-ai-hub-active h3, body.gz-contact-active h3, body.gz-book-demo-active h3,
body.gz-micro-drama-active h3 {
  color: var(--white);
  font-family: var(--ff-b);
  font-weight: 700;
  letter-spacing: -0.01em;
}

body.gz-home-active p,
body.gz-features-active p,
body.gz-pricing-active p,
body.gz-ai-hub-active p,
body.gz-contact-active p,
body.gz-book-demo-active p,
body.gz-micro-drama-active p {
  line-height: 1.6;
  color: var(--white2);
}

body.gz-home-active a,
body.gz-features-active a,
body.gz-pricing-active a,
body.gz-ai-hub-active a,
body.gz-contact-active a,
body.gz-book-demo-active a,
body.gz-micro-drama-active a {
  color: var(--cyan);
  text-decoration: none;
  transition: color 0.2s ease;
}

/* ============================================================
   FORMS — scoped to our pages
   ============================================================ */
body.gz-home-active input[type="text"],
body.gz-features-active input[type="text"],
body.gz-ai-hub-active input[type="text"],
body.gz-contact-active input[type="text"],
body.gz-book-demo-active input[type="text"],
body.gz-micro-drama-active input[type="text"],
body.gz-contact-active input[type="email"],
body.gz-book-demo-active input[type="email"],
body.gz-contact-active textarea,
body.gz-book-demo-active textarea {
  background: var(--black3) !important;
  border: 1px solid var(--bl2) !important;
  color: var(--white) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 16px;
  font-family: var(--ff-b);
  font-size: 14px;
}

/* ============================================================
   UTILITY CLASSES (reusable across our pages)
   ============================================================ */
.g-gradient-text {
  background: var(--g-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.g-section-alt {
  background-color: var(--black2) !important;
}

/* ============================================================
   IMAGES — legacy asset fixes (global — safe, just filters)
   ============================================================ */
img[src*="MIPLONDON"],
img[src*="NAB-Show"],
img[src*="StreamTVColorLogo"] {
  filter: brightness(0) invert(1);
  opacity: 0.75;
}