/* ========== CLARISTA — MOBILE NAVIGATION + MOBILE FIXES ========== */
/* Loaded site-wide. Targets viewports under 900px. */

/* Hamburger button — hidden on desktop, visible on mobile */
.clarista-hamburger{
  display:none;
  width:42px;
  height:42px;
  border:1px solid rgba(10,10,10,0.1);
  border-radius:9px;
  background:#fff;
  cursor:pointer;
  padding:0;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  flex-shrink:0;
}
.clarista-hamburger span{
  display:block;
  width:18px;
  height:2px;
  background:#0A0A0A;
  border-radius:2px;
  transition:all 0.2s;
}
.clarista-hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.clarista-hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.clarista-hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Mobile menu overlay */
.clarista-mobile-menu{
  position:fixed;
  inset:0;
  background:#fff;
  z-index:999;
  display:none;
  flex-direction:column;
  overflow-y:auto;
  padding:80px 28px 40px;
  font-family:'Inter',system-ui,sans-serif;
}
.clarista-mobile-menu.open{display:flex}
.clarista-mobile-menu-section{
  font-size:11px;
  font-weight:800;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#9CA3AF;
  margin:24px 0 8px;
}
.clarista-mobile-menu-section:first-child{margin-top:0}
.clarista-mobile-menu a{
  display:block;
  padding:14px 0;
  font-size:17px;
  font-weight:600;
  color:#0A0A0A;
  text-decoration:none;
  border-bottom:1px solid rgba(10,10,10,0.06);
}
.clarista-mobile-menu a:hover{color:#2309e6}
.clarista-mobile-menu a.cta{
  display:block;
  margin-top:24px;
  padding:14px 24px;
  background:#2309e6;
  color:#fff;
  text-align:center;
  border-radius:999px;
  border:none;
  font-size:15px;
}

/* Show hamburger + hide desktop nav on mobile (with !important to beat page CSS) */
@media (max-width:900px){
  .clarista-hamburger{display:inline-flex !important}
  .nav-links{display:none !important}
  /* Hide hover-dropdowns on mobile — they don't work without hover */
  .nav-sub,.nav-sub.wide{display:none !important}
}
/* Tiny screens — hide primary CTA so hamburger is clear */
@media (max-width:480px){
  .nav-cta a.btn-primary,
  .nav-cta .btn.btn-primary{display:none !important}
}

/* ===== Mobile fixes for common issues ===== */
@media (max-width:900px){
  /* Prevent table/grid overflow */
  body{overflow-x:hidden}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

  /* Hero buttons stack */
  .hero .ctas,
  .hero-cta-row,
  .hero-cta,
  .pf-cta-row,
  .btn-row,
  .ctas{flex-direction:column;align-items:stretch}
  .hero .ctas .btn,
  .hero-cta-row .btn,
  .hero-cta .btn,
  .btn-row .btn{width:100%;justify-content:center}

  /* Reduce hero padding so above-the-fold fits */
  .hero{padding-top:36px;padding-bottom:48px}
  .hero h1,.hero-headline{font-size:clamp(28px,8vw,40px) !important;line-height:1.15 !important}
  .hero .sub,.hero-sub,.hero p{font-size:15px !important;line-height:1.55 !important}

  /* Generic grid collapse */
  .stats,.stat-grid,.three-up,.gov-grid,.env-grid,.connector-grid,
  .llm-options,.llm-grid,.scan-grid,.cap-grid,.feature-grid,
  .problem-grid,.use-case-grid,.trust-band-grid,.steps-container,
  .hero-grid,.hero-visual-body,.who-grid,.timeline-grid,
  .panel-grid-2,.pricing-grid,.editor-layout,.ws{
    grid-template-columns:1fr !important;
  }

  /* Footer */
  .footer-top{grid-template-columns:1fr 1fr !important;gap:24px !important}

  /* Logo strip — 2 columns on mobile */
  .logo-grid{grid-template-columns:1fr 1fr !important;gap:14px !important}

  /* Comparison table — horizontal scroll */
  .comparison-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .comparison-row{min-width:600px}

  /* Cookie banner — narrower on mobile */
  #cc-banner{left:12px !important;right:12px !important;bottom:12px !important;max-width:none !important}

  /* Featured Clarista cards (highlighted top cards on hire/services pages) */
  .featured-clarista-grid{grid-template-columns:1fr !important;gap:14px !important}

  /* Section padding */
  .section{padding:48px 0 !important}

  /* Container gutter — force consistent padding */
  .container,.container-narrow,.hero .container,.section .container,.nav .container{
    padding-left:20px !important;
    padding-right:20px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
  }
  /* Hero text alignment */
  .hero h1,.hero-headline,.hero-sub,.hero .sub,.hero p,.hero .eyebrow{
    max-width:100% !important;
  }
  /* Nav inner — keep logo + hamburger spaced */
  .nav-inner{padding:0 4px !important}

  /* Wizard inside prototype (if used elsewhere) */
  .wizard-steps{flex-wrap:wrap;gap:6px !important}

  /* Hero card on dashboards */
  .hero-card{flex-direction:column;align-items:flex-start !important;gap:18px !important;padding:24px !important}
}

@media (max-width:600px){
  .hero h1,.hero-headline{font-size:32px !important}
  .footer-top{grid-template-columns:1fr !important}
  .stats .num{font-size:28px !important}
  .stats .lbl{font-size:11px !important}
}