/* ============================================================
   Elementor & Hello Elementor Theme Override Layer
   
   This file belongs in the child theme (not the plugin) because
   it fixes conflicts between Hello Elementor's base styles and
   OKULON's dark-theme design tokens.
   
   Hello Elementor's reset.css sets:
   - body { color:#333; background:#fff }
   - a { color:#c36 }  a:hover { color:#336 }
   - h1-h6 { color:inherit } (→ inherits #333)
   - button { color:#c36; border:1px solid #c36 }
   
   Elementor Kit (post-94.css) sets wrong global colors:
   - --e-global-color-primary:#6EC1E4
   - --e-global-color-text:#7A7A7A
   
   These MUST be overridden for our dark theme.
   ============================================================ */

/* 1. Override Elementor Kit global color variables */
.elementor-kit-94,
[class*="elementor-kit-"] {
  --e-global-color-primary: #e3000f !important;
  --e-global-color-secondary: #efeeed !important;
  --e-global-color-text: #efeeed !important;
  --e-global-color-accent: #e3000f !important;
}

/* 2. Override Hello Elementor reset: body, links, headings */
body.elementor-page,
body[class*="elementor-page-"] {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
}

/* Force all links inside our widgets to inherit, not use #c36 */
.elementor a {
  color: inherit;
  text-decoration: none;
}

.elementor a:hover,
.elementor a:active {
  color: inherit;
}

/* 3. Force headings white – override hello-elementor h1-h6{color:inherit} */
.elementor h1,
.elementor h2,
.elementor h3,
.elementor h4,
.elementor h5,
.elementor h6 {
  color: var(--color-white) !important;
}

/* 4. Force buttons – override hello-elementor button{color:#c36;border:1px solid #c36} */
.elementor .btn {
  border: none !important;
  color: inherit;
}

.elementor .btn--primary {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  box-shadow: 0 1px 2px rgba(227, 0, 15, 0.2), var(--shadow-glow-sm);
}

.elementor .btn--primary:hover {
  background-color: var(--color-primary-hover) !important;
  color: var(--color-white) !important;
  box-shadow: 0 4px 16px rgba(227, 0, 15, 0.35), 0 0 40px rgba(227, 0, 15, 0.15);
}

.elementor .btn--primary:focus {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}

.elementor .btn--secondary {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border-accent) !important;
}

.elementor .btn--secondary:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: var(--color-surface-elevated) !important;
}

.elementor .btn--ghost:hover {
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
}

.elementor .btn--outline {
  background: transparent !important;
  color: var(--color-white) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}

.elementor .btn--outline:hover {
  border-color: rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* 5. Nav links: override a{color:#c36} */
.elementor .nav__link {
  color: var(--color-text-secondary) !important;
}

.elementor .nav__link:hover,
.elementor .nav__link.is-active {
  color: var(--color-white) !important;
}

.elementor .nav__mobile-link {
  color: var(--color-text) !important;
}

.elementor .nav__mobile-link:hover {
  color: var(--color-primary) !important;
}

/* 6. Card hovers – removed, cards are not clickable */

/* 7. FAQ trigger */
.elementor .faq__trigger {
  color: var(--color-text) !important;
}

.elementor .faq__trigger:hover {
  color: var(--color-primary) !important;
}

/* 8. Module tabs */
.elementor .modules__tab {
  color: var(--color-text-secondary) !important;
}

.elementor .modules__tab:hover,
.elementor .modules__tab.is-active {
  color: var(--color-white) !important;
}

/* 9. Carousel buttons override */
.elementor .carousel__btn {
  color: var(--color-text-secondary) !important;
  border: 1px solid var(--color-border-accent) !important;
  background: var(--color-surface) !important;
}

.elementor .carousel__btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: var(--color-white) !important;
}

/* 10. Stat hovers – removed, stats are not clickable */

/* 11. Dark backgrounds for sections */
.elementor .section {
  background-color: var(--color-bg);
  color: var(--color-text);
}

.elementor .section--alt {
  background-color: var(--color-bg-alt);
}

/* 12. Hamburger spans override */
.elementor .nav__hamburger span {
  background: var(--color-text) !important;
}

/* 13. Footer / other text colors */
.elementor .footer {
  color: var(--color-text) !important;
}

.elementor .footer a {
  color: var(--color-text-secondary) !important;
}

.elementor .footer a:hover {
  color: var(--color-white) !important;
}

/* 14. Sticky CTA override */
.elementor .sticky-cta .btn {
  border: none !important;
}

/* 15. Marquee images fix – prevent Elementor/WP img constraints */
.elementor .marquee__track img {
  height: 28px !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  display: inline-block !important;
}

/* 16. Hero section override */
.elementor .hero {
  background: #0b0a09 !important;
  color: var(--color-text) !important;
}

/* 17. Testimonials avatar – preserve border-radius in Elementor */
.elementor .testimonials__avatar {
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  object-fit: cover !important;
}

/* 18. CTA form buttons – ensure correct colors */
.elementor .cta-form__next,
.elementor .cta-form__submit,
.elementor .cta-form .btn--primary {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  border: none !important;
}

.elementor .cta-form__next:hover,
.elementor .cta-form__submit:hover,
.elementor .cta-form .btn--primary:hover {
  background-color: var(--color-primary-hover) !important;
}

.elementor .cta-form__back,
.elementor .cta-form .btn--secondary {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border-accent) !important;
}

.elementor .cta-form__back:hover,
.elementor .cta-form .btn--secondary:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: var(--color-surface-elevated) !important;
}

/* 19. FAQ trigger – full button override */
.elementor .faq__trigger {
  color: var(--color-text) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
}

.elementor .faq__trigger:hover {
  color: var(--color-primary) !important;
  background: none !important;
}

.elementor .faq__trigger:focus {
  outline: none !important;
}

/* 20. Form inputs – dark theme */
.elementor .form-input,
.elementor .form-select {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}

.elementor .form-input:focus,
.elementor .form-select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px rgba(227, 0, 15, 0.15) !important;
}

.elementor .form-label {
  color: var(--color-text) !important;
}

.elementor .form-checkbox__text {
  color: var(--color-text-secondary) !important;
}

.elementor .form-checkbox__text a {
  color: var(--color-primary) !important;
}

/* 21. Video play button – prevent Elementor button reset */
.elementor .video-player__play {
  background: none !important;
  border: none !important;
  color: inherit !important;
  padding: 0 !important;
}

.elementor .video-player__play:hover {
  background: none !important;
  border: none !important;
  transform: translate(-50%, -50%) scale(1.1) !important;
}

.elementor .video-player__play:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* 22. Carousel nav buttons – full override incl. hover border */
.elementor .carousel__btn {
  color: var(--color-text-secondary) !important;
  border: 1px solid var(--color-border-accent) !important;
  background: var(--color-surface) !important;
  padding: 0 !important;
}

.elementor .carousel__btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: var(--color-white) !important;
}

.elementor .carousel__btn:focus {
  outline: none !important;
  box-shadow: none !important;
}

.elementor .carousel__dot {
  border: none !important;
  padding: 0 !important;
}