/* TMC Brand Standard — Global Kit CSS
   All colors reference Elementor CSS variables so kit changes cascade automatically.
   Variable map:
     --e-global-color-primary    = Primary Gold   var(--e-global-color-primary)
     --e-global-color-secondary  = Secondary Gold var(--e-global-color-secondary)
     --e-global-color-text       = Text Light     var(--e-global-color-text)
     --e-global-color-accent     = Accent Dark    var(--e-global-color-accent)
*/

/* ==========================================================================
   TMC DARK MODE SYSTEM — Elementor Kit Global CSS
   ========================================================================== */

/* 1. TMC Dark Mode CSS Variables — all referencing Elementor globals */
:root {
  --tmc-bg-main:        #060D14;
  --tmc-bg-surface:     #0D1B2A;
  --tmc-bg-elevated:    var(--e-global-color-accent);
  --tmc-text-primary:   var(--e-global-color-text);
  --tmc-text-body:      var(--e-global-color-text);
  --tmc-text-secondary: #b3b3b3;
  --tmc-border-color:   #333333;
  --tmc-accent-link:    #64b5f6;
  --tmc-gold-primary:   var(--e-global-color-primary);
  --tmc-gold-secondary: var(--e-global-color-secondary);
  --tmc-dark-accent:    var(--e-global-color-accent);
}

/* 2. Global Page & Body Background */
html,
body {
  background-color: var(--tmc-bg-main);
  color: var(--tmc-text-body);
}

/* 3. Elementor Containers & Sections */
.elementor-section-wrap,
.e-con,
.elementor-section {
  background-color: var(--tmc-bg-main);
}

/* 4. Surface Elevation — Cards & Inner Sections */
.elementor-inner-section,
.elementor-card,
.elementor-icon-box-wrapper {
  background-color: var(--tmc-bg-surface);
  border-color: var(--tmc-border-color);
}

/* 5. Typography Hierarchy */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  color: var(--e-global-color-text);
}

p, span, li {
  color: var(--e-global-color-text);
}

/* 6. Links (non-button) */
a:not(.elementor-button):not(.elementor-sub-item):not(.elementor-item) {
  color: var(--tmc-accent-link);
  transition: color 0.2s ease;
}

a:not(.elementor-button):not(.elementor-sub-item):not(.elementor-item):hover {
  color: #90caf9;
}

/* 7. Navigation Menu */
.elementor-nav-menu a.elementor-item,
.elementor-nav-menu a.elementor-sub-item {
  color: var(--e-global-color-text) !important;
}

.elementor-nav-menu a.elementor-item:hover,
.elementor-nav-menu a.elementor-item.elementor-item-active {
  color: var(--tmc-accent-link) !important;
}

.elementor-nav-menu--dropdown {
  background-color: var(--tmc-bg-surface) !important;
  border: 1px solid var(--tmc-border-color);
}

/* 8. Footer Text */
.elementor-location-footer .elementor-widget-container p,
.elementor-location-footer .elementor-widget-container span,
.elementor-location-footer .elementor-widget-container a,
.elementor-location-footer .elementor-widget-container li {
  color: var(--tmc-text-secondary);
}

/* 9. Forms & Text Inputs */
.elementor-field-group .elementor-field,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  background-color: var(--tmc-bg-elevated) !important;
  color: var(--e-global-color-text) !important;
  border: 1px solid var(--tmc-border-color) !important;
  border-radius: 4px;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--tmc-accent-link) !important;
  outline: none;
}

/* 10. Form Labels */
.elementor-field-label,
.elementor-field-group > label,
.elementor-form .elementor-field-label,
.elementor-form .elementor-field-group label,
.elementor-widget-form .elementor-field-label,
.elementor-widget-form label {
  color: var(--e-global-color-secondary) !important;
}

/* 11. Media Opacity (Eye-Strain Reduction) */
img, video {
  opacity: 0.92;
  transition: opacity 0.3s ease;
}

img:hover, video:hover {
  opacity: 1;
}