/*
Theme Name: Trinity Trading
Theme URI: https://trinitytrading.io
Author: Trinity Trading
Description: Custom dark theme for Trinity Trading - Automated Futures Trading for Prop Firms
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: trinity-trading
*/

/* === Base Reset & Typography === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --tt-bg-main: #0B0F14;
  --tt-bg-card: #151C2F;
  --tt-bg-section: #111826;
  --tt-teal: #7CF5E6;
  --tt-teal-glow: #8EF0E6;
  --tt-green: #7DFF7D;
  --tt-green-alt: #4ADE80;
  --tt-blue: #9BB7FF;
  --tt-blue-link: #3B82F6;
  --tt-white: #FFFFFF;
  --tt-offwhite: #EAF2FF;
  --tt-muted: rgba(255, 255, 255, 0.65);
  --tt-border: rgba(255, 255, 255, 0.08);
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  background-color: var(--tt-bg-main);
  color: var(--tt-offwhite);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Archivo Black', sans-serif;
}

/* Glowing headline styles matching live site */
h1 {
  color: #8EF0E6;
  text-transform: uppercase;
  text-shadow: rgba(124, 245, 230, 0.12) 0px 0px 22px, rgba(177, 140, 255, 0.1) 0px 0px 44px;
}

h2 {
  color: #8EF0E6;
  text-transform: uppercase;
  background: linear-gradient(90deg, #7CF5E6, #B18CFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none; /* text-shadow doesn't work with gradient text */
  filter: drop-shadow(0 0 4px rgba(142, 240, 230, 0.35)) drop-shadow(0 0 10px rgba(159, 174, 255, 0.25));
}

h3 {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: rgba(142, 240, 230, 0.2) 0px 0px 2px;
}

a {
  color: var(--tt-teal);
  text-decoration: none;
  transition: opacity 0.2s;
}

a:hover {
  opacity: 0.85;
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* === Button Styles === */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  background: var(--tt-teal);
  color: var(--tt-bg-main);
  font-weight: 700;
  font-size: 16px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-primary:hover {
  background: var(--tt-teal-glow);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(124, 245, 230, 0.3);
  opacity: 1;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  background: transparent;
  color: var(--tt-teal);
  font-weight: 600;
  font-size: 16px;
  border-radius: 50px;
  border: 2px solid var(--tt-teal);
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-secondary:hover {
  background: rgba(124, 245, 230, 0.1);
  opacity: 1;
}

/* === Section Width Constraints === */
.tt-homepage > section,
.tt-homepage > div,
.tt-homepage > .tt-guarantee,
.tt-homepage > .tt-heroX2,
.tt-homepage > .tt-countdown,
.tt-homepage > .tt-versus-section,
.tt-homepage > .tt-ai-benefits,
.tt-homepage > .tt-testimonials-section,
.tt-homepage > .tt-objections,
.tt-homepage > .tt-mid-cta,
.tt-homepage > .urx,
.tt-homepage > .tt-grid2,
.tt-homepage > .tt-card,
.tt-homepage > .wf-section,
.tt-homepage > .tt-final,
.tt-homepage > .neo-hero {
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px;
  padding-right: 24px;
}

/* === Section Spacing === */
.section {
  padding: 80px 0;
}

.section-dark {
  background: var(--tt-bg-section);
}

.section-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  color: var(--tt-white);
  text-align: center;
  margin-bottom: 16px;
  line-height: 1.2;
}

.section-subtitle {
  font-size: 18px;
  color: var(--tt-muted);
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}