/* ===== V23 FINAL USER FIX: light mode hero + footer + services readability ===== */

/* Atlas logo size: Atlas must visually match 3M */
.brand-logos .logo-3m,
.site-header .logo-3m{
  width:118px !important;
  max-width:118px !important;
  height:auto !important;
  object-fit:contain !important;
}
.brand-logos .logo-atlas,
.site-header .logo-atlas{
  width:126px !important;
  max-width:126px !important;
  height:auto !important;
  object-fit:contain !important;
}
@media(max-width:1200px){
  .brand-logos .logo-3m,.site-header .logo-3m{width:92px !important;max-width:92px !important;}
  .brand-logos .logo-atlas,.site-header .logo-atlas{width:100px !important;max-width:100px !important;}
}

/* Theme variables */
:root[data-theme="light"] body,
body.light,
body.light-mode{
  background:#f5f6f8 !important;
  color:#20242d !important;
}

/* Header / mobile menu light visibility */
:root[data-theme="light"] .site-header,
body.light .site-header,
body.light-mode .site-header{
  background:rgba(255,255,255,.98) !important;
  color:#20242d !important;
  border-color:rgba(0,0,0,.10) !important;
  box-shadow:0 10px 35px rgba(0,0,0,.08) !important;
}
:root[data-theme="light"] .desktop-nav a,
:root[data-theme="light"] .header-actions a,
:root[data-theme="light"] .header-actions button,
:root[data-theme="light"] .brand-text strong,
:root[data-theme="light"] .brand-text small,
body.light .desktop-nav a,
body.light .header-actions a,
body.light .header-actions button,
body.light .brand-text strong,
body.light .brand-text small,
body.light-mode .desktop-nav a,
body.light-mode .header-actions a,
body.light-mode .header-actions button,
body.light-mode .brand-text strong,
body.light-mode .brand-text small{
  color:#20242d !important;
}
:root[data-theme="light"] .mobile-menu,
:root[data-theme="light"] .mobile-menu-content,
body.light .mobile-menu,
body.light .mobile-menu-content,
body.light-mode .mobile-menu,
body.light-mode .mobile-menu-content{
  background:#ffffff !important;
  color:#20242d !important;
}
:root[data-theme="light"] .mobile-menu a,
body.light .mobile-menu a,
body.light-mode .mobile-menu a{
  color:#20242d !important;
  background:#f3f4f6 !important;
  border-color:rgba(0,0,0,.10) !important;
}

/* Services dropdown must open under Services, centered, in both Arabic and English */
.atlas-services-dd{position:relative !important;}
.atlas-services-panel{
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) translateY(14px) !important;
  transform-origin:top center !important;
  z-index:99999 !important;
}
.atlas-services-dd:hover .atlas-services-panel,
.atlas-services-dd:focus-within .atlas-services-panel,
.atlas-services-panel:hover{
  transform:translateX(-50%) translateY(0) !important;
}
:root[data-theme="light"] .atlas-services-panel,
body.light .atlas-services-panel,
body.light-mode .atlas-services-panel{
  background:#ffffff !important;
  color:#20242d !important;
  border-color:rgba(0,0,0,.10) !important;
  box-shadow:0 18px 60px rgba(0,0,0,.14) !important;
}
:root[data-theme="light"] .atlas-services-panel b,
:root[data-theme="light"] .atlas-services-panel a,
body.light .atlas-services-panel b,
body.light .atlas-services-panel a,
body.light-mode .atlas-services-panel b,
body.light-mode .atlas-services-panel a{
  color:#20242d !important;
}
:root[data-theme="light"] .atlas-services-panel b,
body.light .atlas-services-panel b,
body.light-mode .atlas-services-panel b{
  color:#d71920 !important;
}

/* Hero image sections: text must be readable in light mode */
.hero,
.page-hero,
.services-page-hero{
  position:relative !important;
}
:root[data-theme="light"] .hero::after,
:root[data-theme="light"] .page-hero::after,
:root[data-theme="light"] .services-page-hero::after,
body.light .hero::after,
body.light .page-hero::after,
body.light .services-page-hero::after,
body.light-mode .hero::after,
body.light-mode .page-hero::after,
body.light-mode .services-page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.72), rgba(255,255,255,.38), rgba(255,255,255,.18)) !important;
  pointer-events:none;
  z-index:1;
}
:root[data-theme="light"] .hero-vignette,
body.light .hero-vignette,
body.light-mode .hero-vignette{
  opacity:.18 !important;
}
.hero-content,
.page-hero .hero-content,
.services-page-hero .hero-content{
  position:relative !important;
  z-index:3 !important;
}
:root[data-theme="light"] .hero-content h1,
:root[data-theme="light"] .hero-content h2,
:root[data-theme="light"] .hero-content p,
:root[data-theme="light"] .hero-content span,
:root[data-theme="light"] .page-hero h1,
:root[data-theme="light"] .page-hero p,
:root[data-theme="light"] .services-page-hero h1,
:root[data-theme="light"] .services-page-hero p,
body.light .hero-content h1,
body.light .hero-content h2,
body.light .hero-content p,
body.light .hero-content span,
body.light .page-hero h1,
body.light .page-hero p,
body.light .services-page-hero h1,
body.light .services-page-hero p,
body.light-mode .hero-content h1,
body.light-mode .hero-content h2,
body.light-mode .hero-content p,
body.light-mode .hero-content span,
body.light-mode .page-hero h1,
body.light-mode .page-hero p,
body.light-mode .services-page-hero h1,
body.light-mode .services-page-hero p{
  color:#20242d !important;
  text-shadow:none !important;
}
:root[data-theme="light"] .hero-content .eyebrow,
:root[data-theme="light"] .page-hero .eyebrow,
:root[data-theme="light"] .services-page-hero .eyebrow,
body.light .hero-content .eyebrow,
body.light .page-hero .eyebrow,
body.light .services-page-hero .eyebrow,
body.light-mode .hero-content .eyebrow,
body.light-mode .page-hero .eyebrow,
body.light-mode .services-page-hero .eyebrow{
  color:#d71920 !important;
}

/* Light mode cards/sections that were still dark/low contrast */
:root[data-theme="light"] .section,
:root[data-theme="light"] .service-category-block,
:root[data-theme="light"] .journey-card,
:root[data-theme="light"] .service-detail-card,
:root[data-theme="light"] .atlas-tech-card,
:root[data-theme="light"] .process-card,
:root[data-theme="light"] .glass-card,
:root[data-theme="light"] .warranty-card,
body.light .section,
body.light .service-category-block,
body.light .journey-card,
body.light .service-detail-card,
body.light .atlas-tech-card,
body.light .process-card,
body.light .glass-card,
body.light .warranty-card,
body.light-mode .section,
body.light-mode .service-category-block,
body.light-mode .journey-card,
body.light-mode .service-detail-card,
body.light-mode .atlas-tech-card,
body.light-mode .process-card,
body.light-mode .glass-card,
body.light-mode .warranty-card{
  color:#20242d !important;
  border-color:rgba(0,0,0,.10) !important;
}
:root[data-theme="light"] .service-detail-card,
:root[data-theme="light"] .journey-card,
:root[data-theme="light"] .atlas-tech-card,
:root[data-theme="light"] .process-card,
body.light .service-detail-card,
body.light .journey-card,
body.light .atlas-tech-card,
body.light .process-card,
body.light-mode .service-detail-card,
body.light-mode .journey-card,
body.light-mode .atlas-tech-card,
body.light-mode .process-card{
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.07) !important;
}
:root[data-theme="light"] .section h1,
:root[data-theme="light"] .section h2,
:root[data-theme="light"] .section h3,
:root[data-theme="light"] .section h4,
:root[data-theme="light"] .section p,
:root[data-theme="light"] .section span,
:root[data-theme="light"] .service-detail-card h4,
:root[data-theme="light"] .service-detail-card p,
body.light .section h1,
body.light .section h2,
body.light .section h3,
body.light .section h4,
body.light .section p,
body.light .section span,
body.light .service-detail-card h4,
body.light .service-detail-card p,
body.light-mode .section h1,
body.light-mode .section h2,
body.light-mode .section h3,
body.light-mode .section h4,
body.light-mode .section p,
body.light-mode .section span,
body.light-mode .service-detail-card h4,
body.light-mode .service-detail-card p{
  color:#20242d !important;
}
:root[data-theme="light"] .section .eyebrow,
body.light .section .eyebrow,
body.light-mode .section .eyebrow{
  color:#d71920 !important;
}
:root[data-theme="light"] .service-detail-card i,
:root[data-theme="light"] .atlas-tech-card i,
body.light .service-detail-card i,
body.light .atlas-tech-card i,
body.light-mode .service-detail-card i,
body.light-mode .atlas-tech-card i{
  color:#d71920 !important;
}

/* Final CTA / area above footer readability */
:root[data-theme="light"] .final-cta,
body.light .final-cta,
body.light-mode .final-cta{
  background:#ffffff !important;
  color:#20242d !important;
}
:root[data-theme="light"] .final-cta::before,
:root[data-theme="light"] .final-bg,
body.light .final-cta::before,
body.light .final-bg,
body.light-mode .final-cta::before,
body.light-mode .final-bg{
  opacity:.08 !important;
}
:root[data-theme="light"] .final-cta h1,
:root[data-theme="light"] .final-cta h2,
:root[data-theme="light"] .final-cta p,
:root[data-theme="light"] .final-cta span,
body.light .final-cta h1,
body.light .final-cta h2,
body.light .final-cta p,
body.light .final-cta span,
body.light-mode .final-cta h1,
body.light-mode .final-cta h2,
body.light-mode .final-cta p,
body.light-mode .final-cta span{
  color:#20242d !important;
}

/* Footer hard unified light/dark */
:root[data-theme="light"] .atlas-footer,
body.light .atlas-footer,
body.light-mode .atlas-footer{
  background:#ffffff !important;
  color:#20242d !important;
  border-top:1px solid rgba(0,0,0,.10) !important;
}
:root[data-theme="light"] .atlas-footer *,
body.light .atlas-footer *,
body.light-mode .atlas-footer *{
  color:#20242d !important;
}
:root[data-theme="light"] .atlas-footer p,
:root[data-theme="light"] .atlas-footer-bottom,
body.light .atlas-footer p,
body.light .atlas-footer-bottom,
body.light-mode .atlas-footer p,
body.light-mode .atlas-footer-bottom{
  color:#5f6673 !important;
}
:root[data-theme="light"] .atlas-footer .footer-column h3,
body.light .atlas-footer .footer-column h3,
body.light-mode .atlas-footer .footer-column h3{
  color:#d71920 !important;
}
:root[data-theme="light"] .footer-social a,
body.light .footer-social a,
body.light-mode .footer-social a{
  background:#f2f3f5 !important;
  border:1px solid rgba(0,0,0,.10) !important;
}

/* Mobile dropdown and menu in light mode */
@media(max-width:991px){
  .atlas-services-panel{
    left:auto !important;
    right:auto !important;
    transform:none !important;
    width:100% !important;
    max-height:65vh !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  .atlas-services-dd:hover .atlas-services-panel,
  .atlas-services-dd:focus-within .atlas-services-panel,
  .atlas-services-panel:hover{
    transform:none !important;
  }
}