/* AIENERGY.AE — mobile-fix.css (load LAST, after renew.css)
   Fixes: drawer menu, hero overlap, horizontal overflow, AI Advisor button */

/* ---------- 3. Horizontal overflow ---------- */
html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
img, svg, video, iframe, canvas { max-width: 100%; }

@media (max-width: 768px) {

  /* ---------- 1. Mobile drawer menu (RTL + LTR) ---------- */
  /* backdrop-filter on <nav> creates a containing block that breaks position:fixed children */
  html nav { height: var(--nav-h, 70px) !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 8px; padding-top: 0 !important; padding-bottom: 0 !important; padding-inline: 0 !important; padding-left: 92px !important; padding-right: 4% !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(5,13,31,.97) !important; }
  html[dir="rtl"] nav { padding-left: 92px !important; padding-right: 4% !important; }
  html[dir="ltr"] nav { padding-left: 92px !important; padding-right: 4% !important; }

  /* compact language pill so it never touches the hamburger (320px phones) */
  html .lang-toggle { left: 12px !important; right: auto !important; width: 68px; padding: 5px 8px; }

  /* logo shrinks instead of pushing the hamburger off-screen */
  nav .logo { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  nav .logo-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.05rem; letter-spacing: .5px; }
  nav .logo-img { flex-shrink: 0; width: 38px; height: 38px; }

  /* the close (X) button: same box open or closed, always above the overlay */
  .hamburger {
    position: relative; z-index: 10001; width: 44px; height: 44px; flex: 0 0 44px;
    display: flex; align-items: center; justify-content: center; padding: 0; margin: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .hamburger span { width: 26px; }

  /* Drawer: full-screen overlay. html[dir] prefix beats style.css's [dir="ltr"] .nav-links { flex-direction: row } */
  html[dir] nav .nav-links, html nav .nav-links {
    position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; max-width: none !important; min-width: 0 !important;
    height: 100vh !important; height: 100dvh !important;
    z-index: 9999;
    background: #050d1f;
    display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
    justify-content: flex-start !important; align-items: stretch !important; gap: 0 !important; margin: 0 !important;
    padding: calc(var(--nav-h, 70px) + 8px) 0 calc(32px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    box-shadow: none !important;
    text-align: start !important;
    box-sizing: border-box;
    /* hidden state: off-screen without causing horizontal scroll */
    visibility: hidden; opacity: 0; pointer-events: none; transform: translateX(100%);
    transition: transform .3s ease, opacity .3s ease, visibility 0s linear .3s;
  }
  html[dir="ltr"] nav .nav-links, html[lang="en"] nav .nav-links { transform: translateX(-100%); }
  html nav .nav-links.open, html[dir="ltr"] nav .nav-links.open, html[dir="rtl"] nav .nav-links.open, html[lang="en"] nav .nav-links.open {
    visibility: visible; opacity: 1; pointer-events: auto; transform: none;
    transition: transform .3s ease, opacity .3s ease, visibility 0s;
  }
  html nav .nav-links > li { display: block !important; width: 100%; max-width: 100%; box-sizing: border-box; border-bottom: 1px solid rgba(255,255,255,.07); }
  html nav .nav-links a { display: block; width: auto; box-sizing: border-box; padding: 16px 24px; font-size: 1.05rem; white-space: normal; text-align: start; color: #fff !important; }
  html nav .nav-links a::after { display: none !important; }

  /* Smart Analyzer / Contact CTAs: full-width pills inside the padding */
  html nav .nav-links li:has(> a.nav-cta) { border-bottom: 0; }
  html nav .nav-links a.nav-cta, html nav .nav-links a.nav-analyzer-btn {
    display: block !important; width: auto !important; height: auto !important;
    margin: 12px 24px !important; padding: 14px 18px !important; text-align: center !important;
    color: #031022 !important; border-radius: 999px !important; box-sizing: border-box;
  }
  html nav .nav-links #auth-nav-item { border-bottom: 0; padding: 4px 0; }
  html nav .nav-links .nav-auth-btn { display: flex; margin: 12px 24px; width: calc(100% - 48px); box-sizing: border-box; justify-content: center; padding: 12px 18px; }
  html nav .nav-links .auth-user-badge { margin: 12px 24px; width: calc(100% - 48px); box-sizing: border-box; flex-wrap: wrap; }
  html nav .nav-links .auth-user-name { display: inline; color: #fff; max-width: none; }
  html nav .nav-links .auth-user-menu { position: static; display: block; width: 100%; min-width: 0; margin-top: 8px; box-shadow: none; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
  html nav .nav-links .auth-user-menu a, html nav .nav-links .auth-user-menu button { text-align: start; padding: 12px; }

  /* ---------- Solutions dropdown = accordion inside the drawer ---------- */
  html nav .nav-links .has-dd { position: static; }
  html nav .nav-links .has-dd > a { white-space: nowrap; }
  html nav .nav-links .dd-menu {
    position: static !important; inset: auto !important; display: block !important;
    width: 100% !important; min-width: 0 !important; max-width: 100%; box-sizing: border-box;
    margin: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: rgba(255,255,255,.04); box-shadow: none;
    max-height: 0; overflow: hidden; visibility: hidden; opacity: 0;
    transition: max-height .35s ease, opacity .25s ease, visibility 0s linear .35s;
  }
  html nav .nav-links .has-dd:hover .dd-menu { max-height: 0; }
  html nav .nav-links .has-dd.open .dd-menu, html nav .nav-links .has-dd.open:hover .dd-menu {
    max-height: 640px; visibility: visible; opacity: 1;
    transition: max-height .35s ease, opacity .25s ease, visibility 0s;
  }
  html nav .nav-links .dd-menu a {
    display: block; width: 100%; padding: 13px 24px; padding-inline-start: 40px; font-size: .98rem; border-radius: 0;
    border-inline-start: 3px solid transparent; color: rgba(255,255,255,.92) !important;
  }
  html nav .nav-links .dd-menu a:hover, html nav .nav-links .dd-menu a:active { background: rgba(93,255,106,.12); border-inline-start-color: #5dff6a; }

  /* keep header controls above the overlay while it is open; lock page scroll */
  html.menu-lock { overflow: hidden !important; }
  body.menu-open { overflow: hidden !important; position: fixed !important; inset-inline: 0; width: 100%; left: 0; right: 0; }
  body.menu-open nav { z-index: 9999; }
  body.menu-open .lang-toggle { z-index: 10002; }
  body.menu-open #ae-chat-btn, body.menu-open #ae-chat { display: none !important; }

  /* ---------- 2. Hero ---------- */
  .hero { flex-direction: column; align-items: stretch; justify-content: center; gap: 24px; min-height: auto; }
  .hero-content { max-width: 100%; width: 100%; }
  .hero-btns { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; width: 100%; }
  .hero-btns > a, .hero-btns > button { width: 100%; justify-content: center; text-align: center; }

  /* theme.css re-shows .hero-visual; hide the animated turbine on phones, keep the pills in a tidy wrapped row */
  .hero-visual, [dir="ltr"] .hero-visual { display: flex !important; width: 100% !important; position: relative; top: auto; bottom: auto; left: auto; right: auto; transform: none !important; animation: none !important; z-index: 2; }
  .hero-visual .fp { display: none; }
  .fp-pills { gap: 8px; }
  .fp-pills span { font-size: 13px; padding: 7px 14px; }
}

/* from sm (640px) and up buttons may go horizontal again */
@media (min-width: 640px) and (max-width: 768px) {
  .hero-btns { flex-direction: row; flex-wrap: wrap; }
  .hero-btns > a, .hero-btns > button { width: auto; flex: 1 1 240px; }
}

/* ---------- AI Advisor floating button ---------- */
#ae-chat-btn { max-width: calc(100vw - 32px); bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; }
#ae-chat { max-height: calc(100dvh - 110px); }
@media (max-width: 768px) {
  #ae-chat-btn { height: 46px !important; padding: 0 16px !important; font-size: .9rem !important; }
  #ae-chat { bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; right: 16px !important; }
  /* cookie banner sits at the very bottom: lift the advisor button above it when shown */
  body:has(.aeck-in) #ae-chat-btn { bottom: 96px !important; }
}