/* ─────────────────────────────────────────────────────────────
   MOBILE.CSS  —  phone-only styles (≤ 768px)
   Desktop/tablet layout is completely unaffected.
───────────────────────────────────────────────────────────── */

/* ── Always hide nav welcome text & caret on inner pages ──── */
.nav-user-name  { display: none !important; }
.nav-user-caret { display: none !important; }

/* ── Hamburger button (hidden on desktop) ─────────────────── */
.mob-ham {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px;
  margin-left: auto;
  flex-shrink: 0;
  z-index: 101;
}
.mob-ham span {
  display: block;
  width: 22px;
  height: 2px;
  background: #F0EDE6;
  border-radius: 2px;
  transition: all 0.25s ease;
}

/* ── Mobile drawer overlay ────────────────────────────────── */
.mob-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: rgba(0,0,0,0.65);
}
.mob-overlay.mob-open { display: block; }

.mob-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 272px;
  background: #111111;
  border-right: 1px solid rgba(255,255,255,0.08);
  z-index: 8001;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mob-overlay.mob-open .mob-drawer {
  transform: translateX(0);
}
.mob-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.mob-drawer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mob-drawer-logo img { width: 28px; height: 28px; object-fit: contain; }
.mob-drawer-logo span {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #F0EDE6;
}
.mob-drawer-close {
  background: none;
  border: none;
  color: #8A8780;
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}
.mob-nav-links {
  padding: 10px 0;
  flex: 1;
}
.mob-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  color: #8A8780;
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all 0.15s;
  cursor: pointer;
}
.mob-nav-link:hover,
.mob-nav-link.mob-active {
  color: #C9A84C;
  border-left-color: #C9A84C;
  background: rgba(201,168,76,0.06);
}

/* ══════════════════════════════════════════════════════════════
   MOBILE BREAKPOINT  (≤ 768px only)
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Show hamburger */
  .mob-ham { display: flex; }

  /* ── Inner pages ──────────────────────────────────────── */
  .sidebar       { display: none !important; }
  .right-panel   { display: none !important; }
  .layout        { padding-top: 60px; }
  .main-content  { padding: 14px 14px 40px !important; }

  /* Shrink top nav padding */
  .top-nav { padding: 0 14px !important; gap: 8px !important; }

  /* Hide verbose user info, keep avatar + bell */
  .nav-user-name  { display: none !important; }
  .nav-user-caret { display: none !important; }

  /* ── Home page nav ────────────────────────────────────── */
  .nav-links { display: none !important; }

  /* ── Hero ─────────────────────────────────────────────── */
  .hero {
    flex-direction: column !important;
    padding: 80px 20px 36px !important;
    min-height: auto !important;
    gap: 0 !important;
  }
  .hero-left {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
  }
  .hero-right { display: none !important; }
  .hero-title { font-size: 34px !important; line-height: 1.18 !important; }
  .hero-sub   { font-size: 14px !important; }
  .hero-body  { font-size: 13px !important; }
  .hero-ctas  { flex-wrap: wrap !important; gap: 10px !important; }

  /* Ticker tape — hide on mobile (too small to be useful) */
  .ticker-tape-bar { display: none !important; }

  /* ── Dashboard eco banner ─────────────────────────────── */
  .eco-banner { flex-direction: column !important; }
  .eco-event  { min-width: 100% !important; }

  /* ── Market cards grid ────────────────────────────────── */
  .market-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Two-column content layouts ───────────────────────── */
  .content-cols {
    flex-direction: column !important;
  }
  .col-left,
  .col-right {
    width: 100% !important;
  }

  /* ── Tables: horizontal scroll ────────────────────────── */
  .data-table   { min-width: 480px; }
  .section-block > div { overflow-x: auto; }

  /* ── Home page feature/section grids ──────────────────── */
  .section-grid,
  .features-grid,
  .etf-preview-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Footer ───────────────────────────────────────────── */
  .footer-grid  { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-inner { flex-direction: column !important; text-align: center !important; gap: 12px !important; }

  /* ── Zeus FAB: don't overlap mobile browser chrome ────── */
  #zeus-fab { bottom: 20px !important; right: 16px !important; }

  /* ── About page hero ──────────────────────────────────── */
  .about-hero { min-height: 220px !important; }

  /* ── Greeting title ───────────────────────────────────── */
  .greeting-title { font-size: 20px !important; }
}