/*
Theme Name:        Intelligen
Theme URI:         https://intelli-gen.ai
Author:            Intelligen Ltd
Author URI:        https://intelli-gen.ai
Description:       Custom WordPress theme for Intelligen — iGaming Performance Marketing. Built for full Elementor compatibility with a dark luxury aesthetic, hexagonal motifs, and gold/cyan brand palette.
Version:           1.0.0
Requires at least: 6.0
Tested up to:      6.5
Requires PHP:      8.0
License:           Proprietary
License URI:       https://intelli-gen.ai/license
Text Domain:       intelligen
Tags:              elementor, full-site-editing, custom-colors, custom-logo, dark, business, marketing
*/

/* ─── CSS CUSTOM PROPERTIES (Global Brand Tokens) ─── */
:root {
  --ig-black:       #06070a;
  --ig-surface:     #0d0f15;
  --ig-surface2:    #13161e;
  --ig-border:      rgba(255, 255, 255, 0.07);
  --ig-gold:        #c8a96e;
  --ig-gold-light:  #e2c98f;
  --ig-gold-dark:   #a07d3e;
  --ig-cyan:        #00d4c8;
  --ig-white:       #f0ede6;
  --ig-muted:       rgba(240, 237, 230, 0.45);
  --ig-font-head:   'Syne', sans-serif;
  --ig-font-body:   'DM Sans', sans-serif;
  --ig-radius:      0px;
  --ig-transition:  0.25s ease;
  --ig-max-width:   1280px;
  --ig-gutter:      4rem;
}

/* ─── BASE RESET & GLOBAL ─── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--ig-black);
  color: var(--ig-white);
  font-family: var(--ig-font-body);
  font-weight: 300;
  line-height: 1.65;
  margin: 0;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.5;
}

/* ─── TYPOGRAPHY ─── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ig-font-head);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ig-white);
  margin-top: 0;
}

h1 { font-size: clamp(3rem, 7vw, 6.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.1rem; }

p {
  color: var(--ig-muted);
  font-weight: 300;
  line-height: 1.8;
  margin-bottom: 1rem;
}

a {
  color: var(--ig-gold);
  text-decoration: none;
  transition: color var(--ig-transition);
}

a:hover { color: var(--ig-gold-light); }

strong { color: var(--ig-white); font-weight: 500; }

/* ─── LAYOUT ─── */
.ig-container {
  max-width: var(--ig-max-width);
  margin: 0 auto;
  padding: 0 var(--ig-gutter);
}

.ig-section {
  position: relative;
  z-index: 1;
}

/* ─── ELEMENTOR OVERRIDES ─── */
.elementor-section-wrap,
.elementor-inner,
.elementor-container {
  position: relative;
  z-index: 1;
}

/* Force Elementor sections to respect brand background */
.e-con,
.elementor-section {
  position: relative;
}

/* Dark body for all Elementor canvas areas */
.elementor-page .elementor {
  background: transparent;
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--ig-black); }
::-webkit-scrollbar-thumb { background: rgba(200, 169, 110, 0.35); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ig-gold); }