/* ==========================================================================
   THE BLUE BALE — Astra Parent Theme Complete Overrides & Neutralization
   Enforces Child Theme Design Dominance over Astra 3.x / 4.x Parent Themes
   ========================================================================== */

/* 1. Complete Canvas & Background Isolation */
html,
body,
body.the-blue-bale-theme,
body.ast-desktop,
body.ast-mobile,
body.ast-tablet,
body.ast-page-builder-template,
body.ast-plain-container,
body.ast-separate-container,
body.ast-no-sidebar,
body.astra-theme,
#page,
.site,
.site-content,
#content,
#main,
#main-content,
.ast-container,
.entry-content,
.site-section {
  background-color: var(--color-bg, #08090b) !important;
  background: var(--color-bg, #08090b) !important;
  color: var(--color-text, #f5f7fa) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* 2. Neutralize Astra Containers */
.ast-container,
.ast-plain-container,
.ast-separate-container,
.ast-page-builder-template .site-content,
.ast-page-builder-template #content {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Ensure our full-width container handles its own horizontal padding */
.container {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: clamp(1.25rem, 3.5vw, 3.75rem) !important;
  padding-right: clamp(1.25rem, 3.5vw, 3.75rem) !important;
  box-sizing: border-box !important;
}

/* 3. Completely Remove Astra Scroll-To-Top Button */
#ast-scroll-top,
.ast-scroll-top-icon,
.ast-scroll-to-top-right,
.ast-scroll-to-top-left,
.ast-scroll-to-top,
[id^="ast-scroll-top"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  position: absolute !important;
  z-index: -9999 !important;
}

/* 4. Completely Suppress Astra Default Header/Footer/Breadcrumbs */
.ast-header-break-point .main-header-bar,
.ast-above-header-wrap,
.ast-below-header-wrap,
.ast-mobile-header-wrap,
.ast-breadcrumbs,
.ast-footer-overlay,
.ast-site-header-cart,
.astra-shop-thumbnail-wrap,
.ast-woocommerce-container,
.ast-primary-footer,
.ast-small-footer {
  display: none !important;
  visibility: hidden !important;
}

/* 5. Typography Dominance over Astra Parent */
body,
body.the-blue-bale-theme {
  font-family: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: var(--color-text, #f5f7fa) !important;
}

h1, h2, h3, h4, h5, h6,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.hero-headline,
.section-title,
.service-title,
.step-title,
.why-title,
.project-title,
.founder-name,
.contact-card-title,
.form-title {
  font-family: var(--font-display, 'Space Grotesk', -apple-system, sans-serif) !important;
  color: #ffffff !important;
  letter-spacing: -0.02em;
}

.eyebrow,
.headline-highlight,
.accent-dot,
.service-number,
.step-number,
.project-category,
.feature-badge {
  color: var(--color-accent, #3d8cff) !important;
}

p,
.entry-content p,
.hero-copy,
.section-subtitle,
.service-description,
.step-desc,
.why-desc,
.about-quote,
.contact-info-label {
  color: var(--color-muted, #969ba5) !important;
}

/* 6. Link & Action Button Protection */
a {
  color: inherit;
  text-decoration: none !important;
  transition: color var(--transition-fast, 0.2s ease);
}

.brand-logo {
  color: #ffffff !important;
}

.nav-link {
  color: var(--color-text-dim, #cbd2dc) !important;
}

.nav-link:hover {
  color: #ffffff !important;
}

.btn-primary {
  background-color: var(--color-accent, #3d8cff) !important;
  color: #ffffff !important;
  border: 1px solid var(--color-accent, #3d8cff) !important;
}

.btn-primary:hover {
  background-color: var(--color-accent-hover, #2976eb) !important;
  color: #ffffff !important;
  border-color: var(--color-accent-hover, #2976eb) !important;
}

.btn-secondary {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.15)) !important;
}

.btn-secondary:hover {
  border-color: var(--color-accent, #3d8cff) !important;
  color: #ffffff !important;
  background-color: var(--color-accent-soft, rgba(61, 140, 255, 0.12)) !important;
}

.btn-whatsapp {
  background-color: #1f2724 !important;
  color: #25d366 !important;
  border: 1px solid rgba(37, 211, 102, 0.25) !important;
}

.btn-whatsapp:hover {
  background-color: #25d366 !important;
  color: #0c120f !important;
  border-color: #25d366 !important;
}

.btn-whatsapp-icon {
  background-color: #25d366 !important;
  color: #ffffff !important;
}

/* 7. Section Background Transparency for WebGL Rock Layer */
.site-section,
.hero-section,
.problem-section,
.services-section,
.process-section,
.about-section,
.portfolio-section,
.why-section,
.descent-section,
.contact-section {
  background: transparent !important;
  background-color: transparent !important;
  position: relative;
  z-index: 10;
}

#webgl-canvas-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.atmosphere-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.site-header {
  z-index: 100 !important;
  background: rgba(8, 9, 11, 0.85) !important;
}

.site-footer {
  background-color: #050608 !important;
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08)) !important;
  z-index: 10 !important;
  position: relative !important;
}

/* ==========================================================================
   8. Strict Alternating Section Alignment (Prevents Astra Parent Theme Centering/Stretching)
   Synchronized with 3D Rock Trajectory: Rock on Left <=> Content on Right
   ========================================================================== */
.content-align-left,
.ast-container .content-align-left,
#content .content-align-left,
.entry-content .content-align-left {
  width: 100% !important;
  max-width: 50% !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
  display: block !important;
  float: none !important;
}

.content-align-right,
.ast-container .content-align-right,
#content .content-align-right,
.entry-content .content-align-right {
  width: 100% !important;
  max-width: 50% !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: right !important;
  display: block !important;
  float: none !important;
}

.content-align-center,
.ast-container .content-align-center,
#content .content-align-center,
.entry-content .content-align-center {
  width: 100% !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Ensure right-aligned section inner cards & readable text remain legible while container sits on right */
.content-align-right .section-subtitle,
.content-align-right .eyebrow,
.content-align-right .why-quote,
.content-align-right .why-punchline {
  margin-left: auto !important;
  margin-right: 0 !important;
}

.content-align-right .transformation-card,
.content-align-right .process-step,
.content-align-right .portfolio-card,
.content-align-right .value-card,
.content-align-right .problem-transformation-container,
.content-align-right .process-timeline,
.content-align-right .why-values-grid {
  text-align: left !important;
}

@media (max-width: 991px) {
  .content-align-left,
  .ast-container .content-align-left,
  #content .content-align-left,
  .entry-content .content-align-left,
  .content-align-right,
  .ast-container .content-align-right,
  #content .content-align-right,
  .entry-content .content-align-right {
    max-width: 56% !important;
  }
}

@media (max-width: 767px) {
  .content-align-left,
  .ast-container .content-align-left,
  #content .content-align-left,
  .entry-content .content-align-left,
  .content-align-right,
  .ast-container .content-align-right,
  #content .content-align-right,
  .entry-content .content-align-right {
    max-width: 68% !important;
  }
}