/* ═══════════════════════════════════════════════════════════════════
   AegisOne HQ — mobile.css
   Patches and extends styles.css for small-screen devices.
   Link AFTER styles.css on every public marketing page.
   ═══════════════════════════════════════════════════════════════════ */

/* ── NAV: hamburger button ─────────────────────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid rgba(248,250,252,0.15);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--white-dim);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.2s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer */
.nav-mobile-drawer {
  display: none;
  position: fixed;
  top: 60px; left: 0; right: 0;
  background: rgba(13,20,30,0.98);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  z-index: 499;
  padding: 1.25rem 1.5rem 1.75rem;
  flex-direction: column;
  gap: 0;
}
.nav-mobile-drawer.open { display: flex; }
.nav-mobile-drawer a {
  display: block;
  font-size: 0.95rem; font-weight: 500;
  color: var(--white-dim);
  text-decoration: none;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(248,250,252,0.06);
  transition: color 0.2s;
}
.nav-mobile-drawer a:last-child { border-bottom: none; }
.nav-mobile-drawer a:hover,
.nav-mobile-drawer a.active { color: var(--gold); }
.nav-mobile-drawer .drawer-cta {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}
.nav-mobile-drawer .drawer-cta a {
  border-bottom: none;
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem; font-weight: 600;
  border-radius: 6px;
}
.nav-mobile-drawer .drawer-cta .btn-gold-m {
  background: var(--gold); color: var(--gunmetal-d);
  border: none; flex: 1; text-align: center;
}
.nav-mobile-drawer .drawer-cta .btn-ghost-m {
  color: var(--white-dim);
  border: 1.5px solid rgba(248,250,252,0.2);
  flex: 1; text-align: center;
}

@media (max-width: 768px) {
  .nav-hamburger { display: flex; }
  .nav-cta { display: none; }  /* move CTA into drawer */
}


/* ── GLOBAL: section / hero padding ───────────────────────────── */
@media (max-width: 480px) {
  .page-hero { padding: 80px 1rem 2.5rem; }
  .page-hero h1 { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .page-hero p  { font-size: 0.875rem; }
  section { padding: 2.5rem 1rem; }
}


/* ── FOOTER ───────────────────────────────────────────────────── */
@media (max-width: 480px) {
  footer { padding: 2rem 1rem 1.25rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .footer-bottom-links { flex-wrap: wrap; gap: 0.75rem; }
}


/* ── INDEX: hero ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Reduce marquee opacity so text stays readable without the left-to-right gradient */
  .hero-marquee { opacity: 0.35; }
  /* Stronger bottom-fade gradient on mobile so text is always readable */
  .hero-bg {
    background: linear-gradient(
      to bottom,
      #131F2E 45%,
      rgba(19,31,46,0.9) 65%,
      rgba(19,31,46,0.5) 100%
    ) !important;
  }
  .hero-content { padding: 90px 1.25rem 2.5rem !important; max-width: 100%; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .hero-actions a { text-align: center; }
  .hero-trust { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .trust-badges { flex-wrap: wrap; gap: 0.5rem; }
}
@media (max-width: 480px) {
  /* Shrink marquee icons so they don't dominate the layout */
  .mq-icon, .mq-icon img { width: 72px; height: 72px; }
  .mq-center-logo { width: 160px; height: 160px; }
  .hero-content { padding: 80px 1rem 2rem !important; }
  .hero-headline { font-size: clamp(1.8rem, 9vw, 2.6rem) !important; }
}

/* INDEX: stats bar — fix "More Customization" overflow */
@media (max-width: 768px) {
  .stat-num { font-size: 1.5rem; }
  .stat-desc { font-size: 0.7rem; }
}
@media (max-width: 480px) {
  .stats-bar { padding: 1.25rem 1rem; }
  .stat-num { font-size: 1.35rem; }
}

/* INDEX: showcase images */
.showcase-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top left;
  display: block;
}


/* ── MODULES: filter bar + carousel ──────────────────────────── */
@media (max-width: 768px) {
  /* Sticky bar must clear the 60px mobile nav */
  .mod-filter-wrap { top: 60px; padding: 0 1rem; }
  .mod-filter-btn  { padding: 0.85rem 0.9rem; font-size: 0.72rem; }
}
@media (max-width: 480px) {
  .mod-filter-wrap { padding: 0 0.5rem; }
  .mod-filter-btn  { padding: 0.8rem 0.65rem; font-size: 0.68rem; letter-spacing: 0.03em; }
  .mod-section { padding: 2rem 1rem; }
}

/* Always show carousel arrows on touch devices (no hover state) */
@media (hover: none) {
  .mod-carousel-btn { opacity: 1 !important; }
}


/* ── PRICING: featured card badge doesn't clip ────────────────── */
.pricing-card.featured {
  margin-top: 1rem; /* give room for the ::before badge */
}
@media (max-width: 900px) {
  .pricing-card.featured { margin-top: 1.5rem; }
  .pricing-cards { padding: 0 0.25rem; }
}
@media (max-width: 480px) {
  .pricing-card { padding: 1.75rem 1.25rem; }
  .plan-price   { font-size: 2rem; }
  .faq-item h4  { font-size: 0.95rem; }
}


/* ── CONTACT: form card padding + tab overflow ─────────────────── */
@media (max-width: 540px) {
  .form-card { padding: 1.5rem 1.25rem; }
  .form-type-tabs { flex-wrap: wrap; }
  .tab-btn { font-size: 0.72rem; padding: 0.55rem 0.5rem; }
  .contact-grid { gap: 2rem; }
}
@media (max-width: 480px) {
  .form-card { padding: 1.25rem 1rem; }
  .contact-item { gap: 0.75rem; }
  .contact-item-icon { width: 36px; height: 36px; font-size: 0.95rem; }
}


/* ── ABOUT: story + mission sections ──────────────────────────── */
@media (max-width: 480px) {
  .story-body .pull-quote { font-size: 1.05rem; padding-left: 1rem; }
  .mission-copy h2        { font-size: 1.6rem; }
  .aside-stat-num         { font-size: 1.6rem; }
}


/* ── TENANT REGISTRATION: form grid + progress steps ─────────── */
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr !important; }
  .form-group.third { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .progress-steps { gap: 0; }
  .progress-step  { font-size: 0; } /* hide label text, keep number only */
  .step-num       { font-size: 0.65rem; width: 22px; height: 22px; }
  .step-connector { margin: 0 0.25rem; }
  /* Show step labels again for the active step only */
  .progress-step.active  { font-size: 0.7rem; }
  .progress-step.active .step-num { width: 26px; height: 26px; font-size: 0.7rem; }
  .reg-body { padding: 1.5rem 1rem 3rem; }
  .reg-card { padding: 1.25rem 1rem; }
}


/* ── LEGAL PAGES: extra padding removal ───────────────────────── */
@media (max-width: 480px) {
  .legal-wrap { padding: 0; }
  .legal-section h2 { font-size: 1.1rem; }
  .legal-contact { padding: 1.25rem; }
}


/* ── UTILITY: ensure nothing bleeds horizontally ──────────────── */
html, body { overflow-x: hidden; }
.page-hero, section, footer, nav { max-width: 100vw; }