/* =========================================================
   BADAWY NEXUS — GLOBAL RESPONSIVE / ZOOM / DEVICE HARDENING
   Applies to public pages only.
   Purpose: prevent broken layout at browser zoom levels,
   large screens, laptops, tablets, and mobile devices.
========================================================= */

:root{
  --bnx-page-max: 1320px;
  --bnx-page-pad: clamp(16px, 4vw, 48px);
  --bnx-section-y: clamp(38px, 6vw, 82px);
  --bnx-card-radius: clamp(16px, 1.5vw, 26px);
}

/* Safer global sizing */
html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  scroll-behavior:smooth;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}

body{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
  min-height:100vh;
}

/* Prevent any element from forcing horizontal overflow */
body *{
  box-sizing:border-box;
}

img, svg, video, canvas, iframe{
  max-width:100%;
}

img{
  height:auto;
}

/* Main public containers */
.container,
.bnx-container,
.bnx-section-container,
.bnx-footer-container,
.bnx-mega-container,
.hero .container,
section > .container{
  width:min(var(--bnx-page-max), calc(100vw - (var(--bnx-page-pad) * 2))) !important;
  max-width:var(--bnx-page-max) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Make sections natural height, not strange empty blocks */
section,
.bnx-section,
.home-section,
.solution-section,
.features-section,
.hero-section,
.audit,
.cta{
  min-height:auto !important;
  height:auto !important;
  padding-top:var(--bnx-section-y) !important;
  padding-bottom:var(--bnx-section-y) !important;
}

/* Remove huge empty artificial spacers commonly created by old UI patches */
.spacer,
.empty-space,
.bnx-empty-space,
.hero-spacer,
.section-spacer,
div[style*="height: 600px"],
div[style*="height:600px"],
div[style*="height: 700px"],
div[style*="height:700px"],
div[style*="height: 800px"],
div[style*="height:800px"],
div[style*="min-height: 600px"],
div[style*="min-height:600px"],
div[style*="min-height: 700px"],
div[style*="min-height:700px"],
div[style*="min-height: 800px"],
div[style*="min-height:800px"]{
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
}

/* Large hero sections should not explode at zoom-out */
.hero,
.bnx-hero,
.home-hero,
.public-hero{
  min-height:auto !important;
  height:auto !important;
  padding-top:clamp(58px, 8vw, 116px) !important;
  padding-bottom:clamp(46px, 7vw, 96px) !important;
}

/* Hero grids reflow naturally */
.hero-grid,
.bnx-hero-grid,
.home-hero-grid,
.hero-content-grid{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(320px, .95fr) !important;
  gap:clamp(22px, 4vw, 54px) !important;
  align-items:center !important;
}

/* Text scaling */
h1{
  font-size:clamp(34px, 5.3vw, 72px) !important;
  line-height:1.05 !important;
  overflow-wrap:break-word;
}

h2{
  font-size:clamp(26px, 3.5vw, 46px) !important;
  line-height:1.12 !important;
  overflow-wrap:break-word;
}

h3{
  overflow-wrap:break-word;
}

p{
  overflow-wrap:break-word;
}

/* Grids: always adapt instead of squeezing */
.grid,
.cards,
.features-grid,
.modules-grid,
.solution-grid,
.services-grid,
.bnx-grid,
.bnx-card-grid,
.public-card-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
  gap:clamp(14px, 2vw, 24px) !important;
}

/* Cards should not become tiny or overflow */
.card,
.bnx-card,
.feature-card,
.solution-card,
.service-card,
.module-card,
.panel{
  max-width:100% !important;
  min-width:0 !important;
  border-radius:var(--bnx-card-radius) !important;
}

/* Dashboard / hero images */
.hero-visual,
.bnx-home-real-school-hero,
.bnx-home-school-dashboard-card,
.dashboard-preview,
.device-preview,
.solution-hero-image,
.hero-image-card{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
}

.hero-visual img,
.bnx-home-school-dashboard-card img,
.dashboard-preview img,
.device-preview img,
.solution-hero-image img,
.hero-image-card img{
  width:100% !important;
  height:auto !important;
  max-height:min(68vh, 620px) !important;
  object-fit:contain !important;
  object-position:center !important;
}

/* Prevent screenshots/dashboard images from creating massive vertical blank areas */
.bnx-home-school-dashboard-card img{
  min-height:0 !important;
}

/* Navigation: premium white but responsive and stable */
.bnx-mega-nav{
  width:100% !important;
}

.bnx-mega-inner{
  width:100% !important;
  min-width:0 !important;
}

.bnx-mega-links{
  min-width:0 !important;
  flex-wrap:nowrap !important;
}

.bnx-mega-link,
.bnx-mega-trigger{
  min-width:0 !important;
}

.bnx-mega-actions{
  flex-shrink:0 !important;
}

/* At laptop widths, tighten the navbar instead of breaking it */
@media(max-width:1380px){
  .bnx-mega-brand img{
    height:48px !important;
    max-width:142px !important;
  }

  .bnx-mega-link,
  .bnx-mega-trigger{
    font-size:11.5px !important;
    padding-left:6px !important;
    padding-right:6px !important;
  }

  .bnx-mega-actions a{
    font-size:11.5px !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
}

/* Tablet and mobile */
@media(max-width:1080px){
  .hero-grid,
  .bnx-hero-grid,
  .home-hero-grid,
  .hero-content-grid{
    grid-template-columns:1fr !important;
    text-align:left !important;
  }

  .hero-visual,
  .bnx-home-real-school-hero{
    justify-content:center !important;
  }

  .bnx-mega-links{
    display:none !important;
  }

  .bnx-mega-actions{
    margin-left:auto !important;
  }
}

/* Small mobile */
@media(max-width:720px){
  :root{
    --bnx-page-pad: 16px;
    --bnx-section-y: 42px;
  }

  .container,
  .bnx-container,
  .bnx-section-container,
  .bnx-footer-container,
  .bnx-mega-container,
  .hero .container,
  section > .container{
    width:calc(100vw - 32px) !important;
  }

  .hero,
  .bnx-hero,
  .home-hero,
  .public-hero{
    padding-top:42px !important;
    padding-bottom:42px !important;
  }

  h1{
    font-size:clamp(32px, 10vw, 46px) !important;
  }

  h2{
    font-size:clamp(24px, 8vw, 34px) !important;
  }

  .bnx-mega-actions a[href="/register"]{
    display:none !important;
  }

  .bnx-mega-brand img{
    height:44px !important;
    max-width:130px !important;
  }
}

/* Ultra-wide and zoomed-out screens: avoid tiny centered islands */
@media(min-width:1600px){
  :root{
    --bnx-page-max: 1480px;
  }

  .hero,
  .bnx-hero,
  .home-hero,
  .public-hero{
    padding-top:clamp(72px, 6vw, 120px) !important;
    padding-bottom:clamp(72px, 6vw, 120px) !important;
  }
}

/* Browser zoom-out safety: prevent giant blank gaps */
@media(min-width:1800px){
  section,
  .bnx-section,
  .home-section,
  .solution-section,
  .features-section,
  .audit,
  .cta{
    padding-top:clamp(46px, 4vw, 76px) !important;
    padding-bottom:clamp(46px, 4vw, 76px) !important;
  }
}

/* Floating buttons must remain visible and not disturb layout */
.bnx-whatsapp-float,
.whatsapp-float,
#whatsappFloat{
  position:fixed !important;
  left:20px !important;
  bottom:22px !important;
  z-index:99980 !important;
}

.bnx-scroll-top,
.scroll-top,
#scrollTopBtn,
#backToTop{
  position:fixed !important;
  right:20px !important;
  bottom:22px !important;
  z-index:99980 !important;
}