/* ============================================================
   CS GROWTH LAB — TEXT RENDERING FIX v1.0
   CRITICAL: Fixes ALL text visibility, animation, and
   rendering issues across every page
   ============================================================ */

/* ======================================================
   SECTION 1: ELIMINATE INVISIBLE TEXT FROM ANIMATIONS
   The scroll reveal was causing text to stay at opacity:0
   Fix: All elements default to visible; animation is additive
====================================================== */

/* CRITICAL: Override the .csgl-reveal that hides elements */
/* Remove opacity:0 from ALL elements globally — let JS animations
   work additively rather than hiding first */
.csgl-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Only animate elements that are NOT yet in view, and only
   if they were explicitly marked as animation targets via JS */
.csgl-reveal.csgl-anim-pending {
  opacity: 0 !important;
  transform: translateY(20px) !important;
  transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1) !important;
}
.csgl-reveal.csgl-anim-pending.in-view {
  opacity: 1 !important;
  transform: none !important;
}

/* CRITICAL: Any element with in-view MUST be visible */
.in-view,
.csgl-reveal.in-view,
[class*="elementor"].in-view {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* ======================================================
   SECTION 2: FIX PAGE ENTRANCE ANIMATION VISIBILITY
   The initPageEntrance JS was setting inline opacity:0
   on headings/paragraphs/buttons without reliable cleanup
====================================================== */

/* Force ALL hero content visible after 1.5s no matter what */
.elementor-section h1,
.elementor-section h2,
.elementor-section h3,
.elementor-section p,
.elementor-section span,
.elementor-section .elementor-heading-title,
.elementor-section .elementor-widget-text-editor,
.elementor-section .elementor-button,
.elementor-section .elementor-widget-button,
.elementor-widget h1,
.elementor-widget h2,
.elementor-widget h3,
.elementor-widget p,
.elementor-widget .elementor-heading-title {
  /* Ensure these never get permanently hidden */
  animation: csgl-force-visible 0.001s 2.5s both;
}
@keyframes csgl-force-visible {
  to {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
  }
}

/* ======================================================
   SECTION 3: FIX HERO SECTION BLANK SPACE
   Huge dead zones between nav and hero content
====================================================== */

/* Remove the giant min-height that creates blank space */
body.home .elementor-section:first-of-type,
body.page-id-49 .elementor-section:first-of-type {
  min-height: unset !important;
  padding-top: 80px !important;
  padding-bottom: 60px !important;
}

/* Also fix the transparent header pages — add padding-top for fixed nav */
.ast-theme-transparent-header .elementor-section:first-of-type,
.ast-theme-transparent-header .e-con:first-of-type {
  padding-top: 100px !important;
}

/* Inner pages: service, about, blog, contact */
body:not(.home):not(.page-id-49) .elementor-section:first-of-type {
  padding-top: 100px !important;
}

/* ======================================================
   SECTION 4: FORCE ALL TEXT FULLY VISIBLE
   Nuclear option — no text should ever be hidden
====================================================== */

/* All text elements must have opacity 1 and be visible */
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body span, body li, body td, body th,
body label, body a, body blockquote, body cite,
body .elementor-heading-title,
body .elementor-widget-text-editor *,
body .elementor-text-editor *,
body .entry-content *,
body .widget *,
body .site-header *,
body .site-footer *,
body #colophon *,
body .ast-above-footer *,
body .ast-below-footer * {
  color: inherit;
  /* Never allow invisible text due to wrong color */
}

/* Headings must always be white (high contrast on dark bg) */
body h1, body h2, body h3, body h4, body h5, body h6,
.elementor-heading-title,
.entry-title, .widget-title,
.ast-archive-title, .ast-page-title {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Paragraph text — silver/muted but visible */
body p,
.elementor-widget-text-editor p,
.entry-content p,
.widget p {
  color: rgba(255,255,255,0.65) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ======================================================
   SECTION 5: FIX LINE HEIGHT CLIPPING
   Headings with line-height: 1.08 can clip descenders
====================================================== */

/* Safe line-height for all display headings */
body h1, .elementor-size-xxl, .elementor-size-xl {
  line-height: 1.10 !important;
  padding-bottom: 0.05em !important; /* prevent descender clip */
  overflow: visible !important;
}
body h2, .elementor-size-large {
  line-height: 1.15 !important;
  overflow: visible !important;
}
body h3, body h4 {
  line-height: 1.30 !important;
  overflow: visible !important;
}
body p {
  line-height: 1.75 !important;
}

/* ======================================================
   SECTION 6: FIX LETTER SPACING OVERLAP
   Tight letter-spacing can cause characters to overlap
====================================================== */

/* Conservative letter-spacing for body text */
body p, body li, body td {
  letter-spacing: 0 !important;
}

/* Headings: controlled tracking (not too tight) */
body h1, .elementor-heading-title.elementor-size-xxl,
.elementor-heading-title.elementor-size-xl {
  letter-spacing: -0.02em !important; /* was -0.04em — safer value */
}
body h2 {
  letter-spacing: -0.02em !important;
}
body h3, body h4 {
  letter-spacing: -0.01em !important;
}

/* Uppercase labels/tags — positive tracking for legibility */
.csgl-label,
[class*="eyebrow"],
.ast-breadcrumbs,
.entry-meta,
.cat-links {
  letter-spacing: 0.08em !important;
}

/* ======================================================
   SECTION 7: FIX OVERFLOW: HIDDEN CLIPPING TEXT
   Multiple containers have overflow:hidden that clips text
====================================================== */

/* Remove overflow:hidden from section-level containers */
.elementor-section,
.e-con,
.e-con-inner,
.elementor-container,
.elementor-row,
.elementor-column,
.elementor-column-wrap,
.elementor-widget-wrap {
  overflow: visible !important;
}

/* Exceptions: Only clip things that genuinely need it */
.elementor-widget-image,
.elementor-widget-image img,
.csgl-marquee-wrapper {
  overflow: hidden !important;
}

/* ======================================================
   SECTION 8: FIX Z-INDEX ISSUES
   Text being hidden behind Three.js canvas or overlays
====================================================== */

/* Three.js background canvas must stay BEHIND everything */
#csgl-threejs-bg {
  z-index: -1 !important;
  pointer-events: none !important;
}

/* body::before noise texture must not cover text */
body::before {
  z-index: 0 !important;
  pointer-events: none !important;
}

/* All Elementor content must be above backgrounds */
.elementor-section,
.e-con,
.elementor-widget {
  position: relative !important;
  z-index: 1 !important;
}

/* Hero first section content MUST be above canvas */
body.home .elementor-section:first-of-type .elementor-container,
body.page-id-49 .elementor-section:first-of-type .elementor-container {
  position: relative !important;
  z-index: 10 !important;
}

/* Fix cursor mix-blend-mode not affecting text */
.csgl-cursor-dot {
  mix-blend-mode: normal !important;
}
.csgl-cursor-ring {
  mix-blend-mode: normal !important;
  border-color: rgba(96,165,250,0.40) !important;
}

/* ======================================================
   SECTION 9: FIX FONT LOADING (FOUT)
   Fallback font stack that closely matches Inter
====================================================== */

body, body * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* ======================================================
   SECTION 10: FIX SPECIFIC ELEMENTOR WIDGETS
====================================================== */

/* Icon boxes — title and description visibility */
.elementor-icon-box-title,
.elementor-icon-box-title * {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.elementor-icon-box-description,
.elementor-icon-box-description * {
  color: rgba(255,255,255,0.60) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Image box widgets */
.elementor-image-box-title,
.elementor-image-box-title * {
  color: #ffffff !important;
  opacity: 1 !important;
}
.elementor-image-box-description {
  color: rgba(255,255,255,0.55) !important;
  opacity: 1 !important;
}

/* Text editor widget */
.elementor-widget-text-editor,
.elementor-widget-text-editor *,
.elementor-text-editor,
.elementor-text-editor * {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Tab widget titles and content */
.elementor-tab-title,
.elementor-tab-content,
.elementor-tab-content * {
  opacity: 1 !important;
  visibility: visible !important;
}
.elementor-tab-title {
  color: rgba(255,255,255,0.80) !important;
}
.elementor-tab-title.elementor-active {
  color: #ffffff !important;
}
.elementor-tab-content {
  color: rgba(255,255,255,0.60) !important;
}

/* Accordion widget */
.elementor-accordion-title,
.elementor-accordion-content,
.elementor-accordion-content * {
  opacity: 1 !important;
  visibility: visible !important;
}
.elementor-accordion-title {
  color: rgba(255,255,255,0.85) !important;
}
.elementor-accordion-content {
  color: rgba(255,255,255,0.60) !important;
}

/* Toggle widget */
.elementor-toggle-title,
.elementor-toggle-content {
  opacity: 1 !important;
  visibility: visible !important;
  color: rgba(255,255,255,0.80) !important;
}

/* ======================================================
   SECTION 11: FIX FORM TEXT VISIBILITY
====================================================== */

/* Form labels, placeholders, inputs */
.wpforms-field-label,
.wpforms-label-before,
.wpforms-label-after,
label.wpforms-field-label {
  color: rgba(255,255,255,0.60) !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 12px !important;
}

.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select {
  color: #ffffff !important;
  opacity: 1 !important;
}

.wpforms-field input::placeholder,
.wpforms-field textarea::placeholder {
  color: rgba(255,255,255,0.30) !important;
  opacity: 1 !important;
}

/* WPForms error messages */
.wpforms-error,
.wpforms-field-error,
.wpforms-field .wpforms-error {
  color: #f87171 !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 12px !important;
}

/* ======================================================
   SECTION 12: FIX BUTTON TEXT VISIBILITY
====================================================== */

.elementor-button,
.elementor-button span,
.elementor-button-text,
.ast-button,
a.elementor-button,
button.elementor-button {
  opacity: 1 !important;
  visibility: visible !important;
  color: inherit !important;
}

/* Buttons with dark backgrounds need white text */
.elementor-button[style*="background"]:not([style*="background: transparent"]),
.elementor-button.elementor-button-primary {
  color: #ffffff !important;
}

/* Submit buttons */
.wpforms-submit,
input[type="submit"],
button[type="submit"] {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ======================================================
   SECTION 13: FIX NAVIGATION TEXT
====================================================== */

/* All nav menu links must be visible */
.main-header-menu .menu-link,
.main-header-menu a,
.ast-main-navigation a,
.ast-builder-menu-1 a {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Mobile menu */
.ast-mobile-popup-drawer .menu-link,
.ast-popup-drawer-layout .menu-link {
  opacity: 1 !important;
  visibility: visible !important;
  color: rgba(255,255,255,0.80) !important;
}

/* ======================================================
   SECTION 14: FIX FOOTER TEXT
====================================================== */

.site-footer, .site-footer *,
#colophon, #colophon *,
.ast-footer-widget-area *,
.footer-widget-area * {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Footer links */
.site-footer a,
.footer-widget-area a,
.ast-footer-copyright a {
  color: rgba(255,255,255,0.55) !important;
}
.site-footer a:hover,
.footer-widget-area a:hover {
  color: #ffffff !important;
}

/* Footer copyright text */
.ast-footer-copyright,
.ast-footer-copyright p,
.ast-footer-copyright span {
  color: rgba(255,255,255,0.35) !important;
  opacity: 1 !important;
}

/* ======================================================
   SECTION 15: FIX BLOG / ARCHIVE TEXT
====================================================== */

/* Blog post cards */
.ast-article-post .entry-title a,
.ast-article-inner .entry-title a,
.ast-blog-post-element .entry-title a {
  color: #ffffff !important;
  opacity: 1 !important;
}

.ast-article-post .entry-content,
.ast-article-inner .entry-content,
.ast-article-post .entry-summary {
  color: rgba(255,255,255,0.60) !important;
  opacity: 1 !important;
}

.entry-meta, .entry-meta *,
.ast-entry-meta, .ast-entry-meta *,
.cat-links, .tags-links,
.post-author, .post-date {
  color: rgba(255,255,255,0.40) !important;
  opacity: 1 !important;
}

/* Single blog post content */
.single .entry-content h1,
.single .entry-content h2,
.single .entry-content h3,
.single .entry-content h4 {
  color: #ffffff !important;
}
.single .entry-content p,
.single .entry-content li {
  color: rgba(255,255,255,0.70) !important;
  line-height: 1.80 !important;
}
.single .entry-content a {
  color: #60a5fa !important;
}
.single .entry-content strong {
  color: #ffffff !important;
}
.single .entry-content blockquote {
  border-left-color: #3b82f6 !important;
  background: rgba(59,130,246,0.06) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 16px 20px !important;
}
.single .entry-content blockquote p {
  color: rgba(255,255,255,0.75) !important;
}

/* ======================================================
   SECTION 16: FIX ASTRA THEME SPECIFIC ISSUES
====================================================== */

/* Astra breadcrumbs */
.ast-breadcrumbs,
.ast-breadcrumbs a,
.ast-breadcrumbs span {
  color: rgba(255,255,255,0.45) !important;
  opacity: 1 !important;
}
.ast-breadcrumbs a:hover {
  color: rgba(255,255,255,0.80) !important;
}

/* Astra sidebar widgets */
.ast-sidebar-widget-area .widget-title {
  color: #ffffff !important;
}
.ast-sidebar-widget-area .widget,
.ast-sidebar-widget-area .widget a {
  color: rgba(255,255,255,0.60) !important;
}

/* Astra 404 page */
.error-404 h1, .error-404 p {
  color: rgba(255,255,255,0.80) !important;
}

/* ======================================================
   SECTION 17: RESPONSIVE TEXT RENDERING FIXES
====================================================== */

/* Mobile — prevent text overflow and ensure readability */
@media (max-width: 768px) {
  body h1, .elementor-heading-title {
    font-size: clamp(1.8rem, 8vw, 2.8rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  body h2 {
    font-size: clamp(1.5rem, 6vw, 2.2rem) !important;
    line-height: 1.20 !important;
  }
  body h3 {
    font-size: clamp(1.2rem, 5vw, 1.8rem) !important;
  }
  body p {
    font-size: 15px !important;
    line-height: 1.70 !important;
  }

  /* Prevent wide headings from overflowing on mobile */
  .elementor-widget-heading,
  .elementor-widget-text-editor {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  body h1, .elementor-heading-title.elementor-size-xxl {
    font-size: clamp(2.2rem, 5vw, 3.5rem) !important;
    letter-spacing: -0.025em !important;
  }
}

/* ======================================================
   SECTION 18: FIX CONTACT PAGE BLANK UPPER AREA
====================================================== */

/* Contact page has 200px+ blank space before content */
body.page .elementor-section:first-of-type,
body.page-template-default .elementor-section:first-of-type {
  padding-top: 90px !important;
  min-height: unset !important;
}

/* ======================================================
   SECTION 19: FIX GRADIENT TEXT RENDERING
   -webkit-text-fill-color:transparent can cause issues
====================================================== */

/* Only apply gradient text to explicitly marked elements */
.csgl-gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #93c5fd 50%, #60a5fa 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Ensure gradient text parent has visible overflow for proper rendering */
.csgl-gradient-text {
  display: inline-block !important;
  padding-bottom: 0.06em !important; /* prevent gradient clip on descenders */
}

/* ======================================================
   SECTION 20: FIX ELEMENTOR BUTTON TEXT VISIBILITY  
====================================================== */

/* The SEND MESSAGE & BOOK A CALL button appears with white text
   on a white background — fix to ensure contrast */
.wpforms-submit {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
  border: none !important;
}

/* Elementor form submit */
.elementor-field-type-submit .elementor-button {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* ======================================================
   SECTION 21: FIX HERO BLANK TOP SPACE ON ALL PAGES
   The fixed nav (70px) creates blank area before content
====================================================== */

/* All pages — compensate for fixed nav */
.ast-theme-transparent-header #content,
.ast-theme-transparent-header .ast-container > #content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Ensure first section starts after nav (80px nav height + 20px padding) */
.elementor-kit-49 .elementor-section:first-child,
.elementor-section:first-of-type {
  padding-top: 100px !important;
}

/* But homepage hero needs special treatment */
body.home .elementor-section:first-of-type {
  padding-top: 80px !important;
}

/* ======================================================
   SECTION 22: ENSURE NO TEXT IS AFFECTED BY
   mix-blend-mode from the noise texture or canvas
====================================================== */

/* Isolate content layers from background blend modes */
.elementor-inner,
.elementor-container,
.elementor-row {
  isolation: isolate !important;
}

/* Remove any accidental mix-blend-mode from text containers */
.elementor-widget *:not(.csgl-cursor-dot):not(.csgl-cursor-ring) {
  mix-blend-mode: normal !important;
}

/* ======================================================
   SECTION 23: FIX SERVICES PAGE TOP BLANK
====================================================== */

/* Services page hero section */
body.page .elementor-section:first-of-type {
  min-height: unset !important;
}

/* ======================================================
   SECTION 24: ABOUT PAGE TEXT FIXES
====================================================== */

.ast-single-post-summary *,
.ast-author-details *,
.ast-post-formats-info * {
  color: rgba(255,255,255,0.65) !important;
  opacity: 1 !important;
}

/* ======================================================
   SECTION 25: ACCESSIBILITY - FOCUS INDICATORS
====================================================== */

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(96,165,250,0.60) !important;
  outline-offset: 2px !important;
}

/* ======================================================
   SECTION 26: PREVENT TEXT FOUC (Flash of Unstyled Content)
====================================================== */

/* Ensure font-display:swap fallback looks reasonable */
@supports (font-display: swap) {
  body {
    font-display: swap;
  }
}