/*
Theme Name:   Hello Elementor Child — Nexora Social
Theme URI:    https://nexora.social
Description:  Nexora Social child theme for Hello Elementor. Applies the Nexora brand design system — Purple #B343F8, Dark #231F20, Raleway headings, Montserrat body.
Author:       Nexora Social
Template:     hello-elementor
Version:      1.0.0
Text Domain:  hello-elementor-child
*/

/* ============================================================
   1. NEXORA CSS VARIABLES (Design System Tokens)
   ============================================================ */
:root {
  /* Brand Colors */
  --nx-purple:        #B343F8;
  --nx-purple-light:  #c968fa;
  --nx-purple-dark:   #9a2fe0;
  --nx-purple-glow:   rgba(179, 67, 248, 0.15);
  --nx-dark:          #231F20;
  --nx-dark-alt:      #181516;
  --nx-white:         #ffffff;

  /* Text Hierarchy */
  --nx-text:          rgba(255, 255, 255, 0.90);
  --nx-text-muted:    rgba(255, 255, 255, 0.55);
  --nx-text-dim:      rgba(255, 255, 255, 0.30);

  /* UI */
  --nx-border:        rgba(255, 255, 255, 0.08);
  --nx-border-hover:  rgba(179, 67, 248, 0.35);
  --nx-card-bg:       rgba(255, 255, 255, 0.04);
  --nx-card-bg-hover: rgba(179, 67, 248, 0.05);

  /* Spacing */
  --nx-section-pad:   100px;
  --nx-container:     1280px;

  /* Radius */
  --nx-radius-btn:    50px;
  --nx-radius-card:   20px;
  --nx-radius-sm:     10px;

  /* Motion */
  --nx-ease:          cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  background-color: var(--nx-dark) !important;
  color: var(--nx-text) !important;
  font-family: 'Montserrat', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Remove Hello Elementor default header/site title */
.site-header,
.site-branding { display: none !important; }

/* Page wrapper */
.page-wrapper,
.site-main { background: transparent !important; }

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Raleway', sans-serif !important;
  color: var(--nx-white) !important;
  line-height: 1.1;
}

p, .elementor-widget-text-editor p { color: var(--nx-text-muted) !important; }
a { color: inherit; text-decoration: none; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--nx-dark-alt); }
::-webkit-scrollbar-thumb { background: var(--nx-purple); border-radius: 2px; }

/* ============================================================
   4. ELEMENTOR SECTION DEFAULTS
   ============================================================ */

/* All Elementor sections get the dark background by default */
.elementor-section { background-color: var(--nx-dark); }

/* Alt background sections — add CSS class "nx-alt" to section */
.elementor-section.nx-alt,
.nx-section-alt { background-color: var(--nx-dark-alt) !important; }

/* Full-height hero section — add class "nx-hero" */
.elementor-section.nx-hero {
  min-height: 100vh !important;
  background-color: var(--nx-dark-alt) !important;
}

/* Divider lines */
.nx-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--nx-border) 50%, transparent); }

/* ============================================================
   5. GLOBAL BUTTONS
   ============================================================ */
.elementor-button,
.elementor-button-wrapper .elementor-button {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  border-radius: var(--nx-radius-btn) !important;
  transition: all 0.3s var(--nx-ease) !important;
  letter-spacing: 0.3px !important;
}

/* Primary Button */
.elementor-button.nx-btn-primary,
.elementor-button[class*="primary"] {
  background: var(--nx-purple) !important;
  color: #ffffff !important;
  border: 1.5px solid var(--nx-purple) !important;
}
.elementor-button.nx-btn-primary:hover {
  background: var(--nx-purple-light) !important;
  border-color: var(--nx-purple-light) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(179, 67, 248, 0.35) !important;
}

/* Outline Button */
.elementor-button.nx-btn-outline {
  background: transparent !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
}
.elementor-button.nx-btn-outline:hover {
  border-color: var(--nx-purple) !important;
  color: var(--nx-purple) !important;
  transform: translateY(-2px);
}

/* Purple outline */
.elementor-button.nx-btn-purple-outline {
  background: transparent !important;
  color: var(--nx-purple) !important;
  border: 1.5px solid var(--nx-purple) !important;
}
.elementor-button.nx-btn-purple-outline:hover {
  background: var(--nx-purple) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* ============================================================
   6. SECTION LABEL (purple eyebrow text)
   ============================================================ */
.nx-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 3.5px !important;
  text-transform: uppercase !important;
  color: var(--nx-purple) !important;
  margin-bottom: 18px !important;
}
.nx-label::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--nx-purple);
  border-radius: 1px;
  flex-shrink: 0;
}

/* ============================================================
   7. CARDS (apply class "nx-card" to inner section or widget)
   ============================================================ */
.nx-card,
.elementor-widget-wrap.nx-card {
  background: var(--nx-card-bg) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: var(--nx-radius-card) !important;
  padding: 36px !important;
  transition: all 0.35s var(--nx-ease) !important;
}
.nx-card:hover,
.elementor-widget-wrap.nx-card:hover {
  border-color: var(--nx-border-hover) !important;
  background: var(--nx-card-bg-hover) !important;
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important;
}

/* ============================================================
   8. ICON BOX (used for service cards)
   ============================================================ */
.elementor-icon-box-wrapper { gap: 16px; }
.elementor-icon-box-icon .elementor-icon {
  background: rgba(179, 67, 248, 0.1) !important;
  border: 1px solid rgba(179, 67, 248, 0.18) !important;
  border-radius: 14px !important;
  width: 54px !important;
  height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}
.nx-card:hover .elementor-icon-box-icon .elementor-icon {
  background: rgba(179, 67, 248, 0.18) !important;
  box-shadow: 0 0 24px rgba(179, 67, 248, 0.2) !important;
}
.elementor-icon-box-title { font-family: 'Raleway', sans-serif !important; color: #fff !important; }
.elementor-icon-box-description p { color: var(--nx-text-muted) !important; }

/* ============================================================
   9. IMAGE PLACEHOLDER
   ============================================================ */
.nx-img-placeholder {
  background: linear-gradient(135deg, rgba(179,67,248,0.1) 0%, rgba(24,21,22,0.9) 100%) !important;
  border: 1px solid rgba(179,67,248,0.12) !important;
  border-radius: 16px !important;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   10. STATS NUMBERS (counter animation targets)
   ============================================================ */
.nx-stat-number {
  font-family: 'Raleway', sans-serif !important;
  font-size: 64px !important;
  font-weight: 900 !important;
  color: var(--nx-purple) !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
}
.nx-stat-label {
  font-size: 13px !important;
  color: var(--nx-text-muted) !important;
  font-weight: 500 !important;
}

/* ============================================================
   11. TAGS / BADGES
   ============================================================ */
.nx-tag {
  display: inline-block;
  padding: 5px 14px;
  background: rgba(179, 67, 248, 0.12);
  color: var(--nx-purple);
  border: 1px solid rgba(179, 67, 248, 0.22);
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* ============================================================
   12. ELEMENTOR HEADING WIDGET OVERRIDES
   ============================================================ */
.elementor-heading-title { color: inherit !important; }
.nx-heading-hero { letter-spacing: -2.5px !important; line-height: 1.04 !important; }
.nx-heading-section { letter-spacing: -0.5px !important; line-height: 1.1 !important; }
.nx-heading-purple em,
.nx-heading-purple em { font-style: normal !important; color: var(--nx-purple) !important; }

/* ============================================================
   13. PAGE HERO BANNER (inner pages)
   ============================================================ */
.nx-page-hero {
  background: var(--nx-dark-alt) !important;
  position: relative;
  overflow: hidden;
}
.nx-page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 90% at 100% 50%, rgba(179,67,248,0.09) 0%, transparent 60%);
  pointer-events: none;
}
.nx-page-hero .elementor-widget-wrap { position: relative; z-index: 1; }

/* Big background text decoration */
.nx-bg-text {
  position: absolute;
  bottom: -20px;
  right: -10px;
  font-family: 'Raleway', sans-serif;
  font-size: clamp(80px, 12vw, 200px);
  font-weight: 900;
  color: rgba(255,255,255,0.022);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -4px;
  white-space: nowrap;
  z-index: 0;
}

/* ============================================================
   14. HERO SECTION SPECIFICS
   ============================================================ */
.nx-hero {
  position: relative;
  overflow: hidden;
}
.nx-hero-orb-1 {
  position: absolute;
  top: -250px; right: -200px;
  width: 900px; height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(179,67,248,0.11) 0%, transparent 60%);
  pointer-events: none; z-index: 0;
}
.nx-hero-orb-2 {
  position: absolute;
  bottom: -80px; left: -80px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(179,67,248,0.05) 0%, transparent 60%);
  pointer-events: none; z-index: 0;
}
.nx-hero-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 80%);
  pointer-events: none;
}

/* ============================================================
   15. CTA BAND (above footer on all pages)
   ============================================================ */
.nx-cta-band {
  background: linear-gradient(150deg, #2a133d 0%, #1c0f28 40%, var(--nx-dark-alt) 100%) !important;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.nx-cta-band::before {
  content: '';
  position: absolute;
  top: -200px; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(179,67,248,0.18) 0%, transparent 65%);
  pointer-events: none;
}
.nx-cta-band .elementor-widget-wrap { position: relative; z-index: 1; }

/* ============================================================
   16. FOOTER
   ============================================================ */
.site-footer,
.elementor-location-footer { background: var(--nx-dark-alt) !important; }

/* ============================================================
   17. FORMS (Contact Page)
   ============================================================ */
.elementor-field-group input,
.elementor-field-group select,
.elementor-field-group textarea {
  background: var(--nx-card-bg) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  padding: 13px 16px !important;
  transition: all 0.2s ease !important;
}
.elementor-field-group input:focus,
.elementor-field-group select:focus,
.elementor-field-group textarea:focus {
  border-color: rgba(179, 67, 248, 0.5) !important;
  background: rgba(179, 67, 248, 0.04) !important;
  box-shadow: 0 0 0 3px rgba(179, 67, 248, 0.08) !important;
  outline: none !important;
}
.elementor-field-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--nx-text-muted) !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* ============================================================
   18. SCROLL REVEAL (add .nx-reveal to any element)
   ============================================================ */
.nx-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s var(--nx-ease), transform 0.65s var(--nx-ease);
}
.nx-reveal.nx-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   19. RESPONSIVE OVERRIDES
   ============================================================ */
@media (max-width: 1024px) {
  :root { --nx-section-pad: 80px; }
}
@media (max-width: 768px) {
  :root { --nx-section-pad: 60px; }
  .nx-stat-number { font-size: 48px !important; }
  .nx-hero-grid { display: none; }
  .nx-bg-text { font-size: 80px !important; right: -5px !important; }
}
@media (max-width: 480px) {
  .nx-stat-number { font-size: 40px !important; }
}

/* ============================================================
   20. ELEMENTOR GLOBAL CUSTOM CSS
   (Paste this block into Elementor → Site Settings → Custom CSS)
   ============================================================ */
/* Already covered above — this file serves as both the child
   theme stylesheet AND the reference for Elementor Custom CSS. */


/* ============================================================
   REVEAL ANIMATION FIX — CSS-based scroll reveal fallback
   Works without JS observer; complements JS-based .visible
   ============================================================ */
.reveal {
  animation: nx-reveal-in 0.65s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)) both;
}
.reveal-d1 { animation-delay: 0.08s; }
.reveal-d2 { animation-delay: 0.16s; }
.reveal-d3 { animation-delay: 0.24s; }
.reveal-d4 { animation-delay: 0.32s; }
.reveal-d5 { animation-delay: 0.40s; }
@keyframes nx-reveal-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
/* When JS adds .visible class, keep element shown */
.reveal.visible {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}


/* ============================================================
   REVEAL ANIMATION FIX
   ============================================================ */
.reveal {
  animation: nx-reveal-in 0.65s var(--ease, cubic-bezier(0.4,0,0.2,1)) both;
}
.reveal-d1 { animation-delay: 0.08s; }
.reveal-d2 { animation-delay: 0.16s; }
.reveal-d3 { animation-delay: 0.24s; }
.reveal-d4 { animation-delay: 0.32s; }
.reveal-d5 { animation-delay: 0.40s; }
@keyframes nx-reveal-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.reveal.visible { animation: none !important; opacity: 1 !important; transform: none !important; }