/* ============================================================
   bt-mobile-ux.css — Mobile UX & UI fixes for the BettorToken site.
   Loaded site-wide AFTER all per-page styles to ensure these rules
   take precedence on small viewports.

   Goals:
     1. Always-accessible mobile nav (hamburger + Client Access)
     2. Hero headlines never invisible against dark backgrounds
     3. No content overflow at any viewport ≥320px
     4. Touch targets meet 44px Apple HIG minimum
     5. Search & chat floats don't overlap content
     6. Polished typography scaling on small screens
   ============================================================ */


/* ───── 1. NAV: Always-accessible mobile menu ───── */

@media (max-width: 1200px) {
  .bt-nav-inner {
    padding: 0 16px !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }
  .bt-nav-brand img {
    height: 26px;
  }
  .bt-nav-brand-tag {
    display: none !important;
  }
  .bt-nav-brand-sep {
    display: none !important;
  }
  /* Tighten the right-side action group */
  .bt-nav-inner > div:last-child {
    gap: 8px !important;
  }
  /* Hide the search trigger from the nav row to free up space */
  .bt-nav-inner .bt-search-trigger {
    display: none !important;
  }
  /* Hide Client Access button from nav (surfaced in mobile menu instead) */
  .bt-nav-client {
    display: none !important;
  }
  /* Compact the Schedule a Call button to icon-only */
  .bt-nav-cta {
    padding: 10px 12px !important;
    gap: 0 !important;
    min-width: 44px;
    min-height: 44px;
    justify-content: center !important;
  }
  .bt-nav-cta span {
    display: none !important;
  }
  .bt-nav-cta svg {
    width: 16px !important;
    height: 16px !important;
  }
  /* Hamburger toggle: always visible at this breakpoint, larger touch target */
  .bt-nav-mobile-toggle {
    display: flex !important;
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    color: var(--bt-white) !important;
  }
  .bt-nav-mobile-toggle svg {
    width: 20px !important;
    height: 20px !important;
  }
}

@media (max-width: 480px) {
  .bt-nav-inner {
    padding: 0 12px !important;
    gap: 8px !important;
  }
  .bt-nav-brand img {
    height: 22px;
  }
}

/* Mobile menu polish */
.bt-nav-mobile {
  /* Position below ticker + nav */
  top: 104px;
  padding: 12px 16px 20px !important;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
}
.bt-nav-mobile a {
  font-size: 16px !important;
  padding: 16px 8px !important;
  letter-spacing: 0.01em;
}
.bt-nav-mobile a:focus-visible {
  outline: 2px solid var(--bt-blue);
  outline-offset: 2px;
}

/* Mobile-only Client Access surfaced prominently in mobile menu */
.bt-nav-mobile-client {
  display: block !important;
  margin: 14px 0 4px !important;
  padding: 14px 16px !important;
  background: var(--bt-blue-deep, #012F6B) !important;
  color: var(--bt-white) !important;
  text-align: center !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(255,255,255,0.12);
  text-decoration: none !important;
}
.bt-nav-mobile .bt-nav-cta {
  margin-top: 6px !important;
  padding: 14px 16px !important;
  background: var(--bt-blue-bright, #0EA5E9) !important;
  color: var(--bt-white) !important;
  text-align: center !important;
  font-size: 13px !important;
  border-radius: 4px !important;
}
.bt-nav-mobile .bt-nav-cta svg {
  display: none !important;
}
.bt-nav-mobile .bt-nav-cta span {
  display: inline !important;
}


/* ───── 2. HERO HEADLINES: ensure visibility on dark backgrounds ───── */

/* Headlines/H1s/H2s placed inside any dark hero must be light. Some
   headlines lacked explicit color on small mobile and inherited the wrong
   base color. We target only the explicit dark-hero patterns to avoid
   inverting light-paper heroes (e.g., team page). */
.bt-section.dark h1,
.bt-section.dark h2,
.bt-section.dark h3,
.bt-section.dark .bt-h1,
.bt-section.dark .bt-h2,
.bt-section.deep h1,
.bt-section.deep h2,
.bt-section.deep h3,
.bt-section.deep .bt-h1,
.bt-section.deep .bt-h2,
.bt-profile-hero h1,
.bt-faq-hero h1,
.bt-research-hero h1,
.bt-dr-hero h1,
.bt-architecture-hero h1,
.bt-infra-hero h1,
.bt-off-hero h1,
.bt-howit-hero h1 {
  color: var(--bt-white, #FFFFFF) !important;
}

/* These specific page-hero classes appear in source-of-truth pages and
   sometimes inherited dark color via the body's default color */
.bt-profile-hero,
.bt-faq-hero,
.bt-research-hero,
.bt-dr-hero,
.bt-architecture-hero,
.bt-infra-hero {
  color: var(--bt-white, #FFFFFF);
}
.bt-profile-hero h1,
.bt-profile-hero h2,
.bt-profile-hero p,
.bt-faq-hero h1,
.bt-faq-hero p,
.bt-research-hero h1,
.bt-research-hero p {
  color: var(--bt-white, #FFFFFF) !important;
}
/* The italic accent serif in the hero stays the brand-bright */
.bt-profile-hero h1 em,
.bt-faq-hero h1 em,
.bt-research-hero h1 em {
  color: var(--bt-blue-bright, #0EA5E9) !important;
}


/* ───── 3. STICKY-NAV LOGO: ensure logo visible on all backgrounds ───── */

/* When the page background is light and the user scrolls, the dark-blue nav
   stays in place. A few pages override the nav background. The logo PNG is
   white-on-transparent and only visible on a dark backdrop, so we ensure the
   nav background never goes transparent on mobile. */
@media (max-width: 1200px) {
  .bt-nav {
    background: rgba(1, 11, 32, 0.97) !important;
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
}


/* ───── 4. CONTENT OVERFLOW: prevent wide elements from causing scroll ───── */

@media (max-width: 768px) {
  body {
    overflow-x: clip;
  }
  /* Tables that exceed viewport scroll horizontally inside their wrapper, not the page */
  .bt-compare-table, .bt-where-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Pre and code blocks similar treatment */
  pre, code {
    overflow-x: auto;
    word-break: break-word;
  }
  /* Long URLs/emails should wrap */
  a {
    word-break: break-word;
  }
}


/* ───── 5. FLOATING ACTIONS: search trigger + assistant chat ───── */

/* The bottom-right floating chat assistant ("..." bubble) was overlapping
   page content on mobile. Move it slightly inward and ensure it's above
   page content but doesn't fight with sticky CTAs. */
@media (max-width: 768px) {
  /* Common selectors used by the assist widget */
  .bt-assist, .bt-assist-launcher, .bt-assist-toggle,
  [class*="assist-launcher"], [class*="assist-toggle"] {
    bottom: 16px !important;
    right: 16px !important;
    z-index: 90 !important;
  }
  /* Keep the assist chat panel from clipping off the right edge when open */
  .bt-assist-panel, [class*="assist-panel"] {
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
  }
}


/* ───── 6. HEROES: legible typography on small screens ───── */

@media (max-width: 768px) {
  .bt-h1, .bt-home-hero-title, h1.bt-h1 {
    font-size: clamp(34px, 9vw, 48px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }
  .bt-h2 {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.1 !important;
  }
  .bt-lede, .bt-home-hero-sub, .bt-profile-hero-sub, .bt-profile-intro {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
  .bt-eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
  }
  /* Tighten section padding to recover vertical space */
  .bt-section {
    padding: 64px 0 !important;
  }
  .bt-section.tight {
    padding: 48px 0 !important;
  }
}


/* ───── 7. PILL/READING-META BADGES: prevent awkward wrap ───── */

@media (max-width: 480px) {
  .bt-reading-meta {
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    padding: 10px 14px !important;
    font-size: 11px !important;
  }
  .bt-reading-meta-dot {
    flex-shrink: 0;
  }
}


/* ───── 8. CARDS, GRIDS: collapse to single column at appropriate breakpoint ───── */

@media (max-width: 768px) {
  .bt-offerings-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .bt-offering-card {
    padding: 32px 24px !important;
  }
  .bt-offering-card-3d-frame {
    height: 200px !important;
  }
  .bt-feature-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .bt-big-terms {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Profile-page quick-facts: 2 columns on mobile, not 4 */
  .bt-profile-facts {
    grid-template-columns: 1fr 1fr !important;
  }
  .bt-profile-facts > div {
    border-right: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  }
  .bt-profile-facts > div:nth-child(odd) {
    border-right: 1px solid rgba(0,0,0,0.06) !important;
  }
}


/* ───── 9. CTAs and BUTTONS: minimum 44px touch target ───── */

@media (max-width: 768px) {
  .bt-btn,
  .bt-btn-primary,
  .bt-btn-ghost-dark,
  .bt-btn-ghost-light {
    min-height: 48px !important;
    padding: 14px 20px !important;
    font-size: 13px !important;
    width: auto;
    box-sizing: border-box;
  }
  /* Stack hero CTA groups vertically so each is full-width */
  .bt-home-hero-ctas,
  .bt-off-hero [style*="display: flex"][style*="gap"] {
    flex-direction: column !important;
    width: 100% !important;
  }
  .bt-home-hero-ctas .bt-btn,
  .bt-off-hero .bt-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}


/* ───── 10. STATUS STRIPS, TICKERS: ensure they scroll cleanly ───── */

@media (max-width: 768px) {
  .bt-status-strip {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .bt-status-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .bt-status-item {
    font-size: 12px !important;
  }
  .bt-ticker {
    height: 44px !important;
    overflow: hidden !important;
    position: relative;
  }
  .bt-ticker-track {
    /* Already animated; preserve marquee */
    animation-duration: 40s !important;
  }
}


/* ───── 11. FORMS: full-width inputs, clear focus states ───── */

@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  textarea,
  select {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important; /* prevent iOS zoom on focus */
    padding: 12px 14px !important;
    box-sizing: border-box;
  }
  textarea {
    min-height: 120px !important;
  }
  button[type="submit"] {
    width: 100% !important;
    min-height: 48px !important;
  }
}


/* ───── 12. FOOTER: stack columns cleanly ───── */

@media (max-width: 768px) {
  .bt-footer-grid,
  .bt-footer-cols,
  [class*="footer"][class*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .bt-footer-col,
  [class*="footer-col"] {
    text-align: left;
  }
}


/* ───── 13. TEAM PAGE: bio cards stack ───── */

@media (max-width: 768px) {
  [class*="team-grid"],
  [class*="team-list"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  [class*="team-bio"] {
    padding: 20px !important;
  }
}


/* ───── 14. DATA ROOM: legible mobile layout ───── */

@media (max-width: 900px) {
  .bt-dr-layout {
    grid-template-columns: 1fr !important;
  }
  .bt-dr-tree {
    border-right: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    padding-bottom: 16px !important;
  }
  .bt-dr-toolbar-inner {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .bt-dr-search {
    width: 100% !important;
    flex: 1 0 100% !important;
  }
}


/* ───── 15. GLOBAL: prevent absolutely-positioned things from clipping ───── */

/* Use `overflow-x: clip` instead of `hidden` — clip prevents content from
   leaking horizontally without creating a new scroll container (which is
   what `hidden` does and which breaks position:sticky). All modern browsers
   support `clip` (Chrome 90+, Firefox 81+, Safari 16+); older browsers
   ignore it and continue to allow horizontal scroll, which is acceptable
   degradation. */
html, body {
  max-width: 100vw;
  overflow-x: clip;
}

@media (max-width: 768px) {
  .bt-container, .bt-container-narrow, .bt-container-text {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
@media (max-width: 480px) {
  .bt-container, .bt-container-narrow, .bt-container-text {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* ───── 16. ACCESSIBILITY: visible focus rings on mobile ───── */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--bt-blue-bright, #0EA5E9);
  outline-offset: 2px;
}


/* ───── 17. PROFILE PAGES: ensure body section is clearly on light bg ───── */

.bt-profile-body {
  background: var(--bt-paper, #FBFBF8);
  color: var(--bt-gray-dk, #2C3340);
}
@media (max-width: 768px) {
  .bt-profile-body {
    padding: 32px 20px 64px !important;
  }
  .bt-profile-intro {
    color: var(--bt-blue-deep, #012F6B) !important;
    font-size: 17px !important;
  }
}


/* ───── 18. PREVENT IOS RUBBER-BAND OVERSCROLL TINTING ───── */

@media (max-width: 768px) {
  body {
    background-color: var(--bt-paper, #FBFBF8);
  }
}


/* ───── 19. REVEAL ANIMATIONS: don't trap content invisible ───── */

/* On slow mobile devices, IntersectionObserver-based reveal animations
   sometimes don't fire in time, leaving content invisible. Force-reveal
   above-fold content immediately, and respect prefers-reduced-motion. */

.bt-reveal {
  /* Make reveal more forgiving — start at 30% opacity instead of 0 so
     content is at least partially visible if the observer fails */
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .bt-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Ensure heroes are always visible — they're above the fold so reveal
   isn't needed for SEO/accessibility */
.bt-home-hero .bt-reveal,
.bt-profile-hero .bt-reveal,
.bt-team-hero .bt-reveal,
.bt-faq-hero .bt-reveal,
.bt-research-hero .bt-reveal,
.bt-off-hero .bt-reveal,
section[class*="hero"] .bt-reveal:nth-child(-n+3) {
  opacity: 1 !important;
  transform: none !important;
}


/* ───── 18. HERO ROOTED TO NAV: eliminate white gap below sticky nav ───── */

/* Many pages have <main class="bt-main"> with padding-top:104px to clear the
   sticky nav (28px ticker + 76px nav bar). On dark-hero pages this padding
   was rendered against the body background (paper/cream), creating an
   unsightly cream stripe between the nav and the dark hero. Solution: when
   the page's first section is a dark hero, move the offset onto the section
   itself so the dark fill bleeds up to the nav. We target the explicit
   dark-hero patterns rather than every "first child of main" — that way
   light heroes (team, access) keep their main-padding offset behavior. */
@media (max-width: 1200px) {
  /* For pages whose first section is dark/deep/profile-hero/etc., remove
     the main padding-top and push it onto the section. */
  main:has(> section.bt-section.dark:first-child),
  main:has(> section.bt-section.deep:first-child),
  main:has(> section.bt-profile-hero:first-child),
  main:has(> section.bt-faq-hero:first-child),
  main:has(> section.bt-research-hero:first-child),
  main:has(> section.bt-dr-hero:first-child),
  main:has(> section.bt-architecture-hero:first-child),
  main:has(> section.bt-infra-hero:first-child),
  main:has(> section.bt-off-hero:first-child),
  main:has(> section.bt-howit-hero:first-child),
  main:has(> section.bt-home-hero:first-child),
  .bt-main:has(> section.bt-section.dark:first-child),
  .bt-main:has(> section.bt-section.deep:first-child),
  .bt-main:has(> section.bt-profile-hero:first-child),
  .bt-main:has(> section.bt-faq-hero:first-child),
  .bt-main:has(> section.bt-research-hero:first-child),
  .bt-main:has(> section.bt-dr-hero:first-child),
  .bt-main:has(> section.bt-architecture-hero:first-child),
  .bt-main:has(> section.bt-infra-hero:first-child),
  .bt-main:has(> section.bt-off-hero:first-child),
  .bt-main:has(> section.bt-howit-hero:first-child),
  .bt-main:has(> section.bt-home-hero:first-child) {
    padding-top: 0 !important;
  }
  /* And give the dark section internal padding-top to clear the nav */
  main > section.bt-section.dark:first-child,
  main > section.bt-section.deep:first-child,
  main > section.bt-profile-hero:first-child,
  main > section.bt-faq-hero:first-child,
  main > section.bt-research-hero:first-child,
  main > section.bt-dr-hero:first-child,
  main > section.bt-architecture-hero:first-child,
  main > section.bt-infra-hero:first-child,
  main > section.bt-off-hero:first-child,
  main > section.bt-howit-hero:first-child,
  main > section.bt-home-hero:first-child,
  .bt-main > section.bt-section.dark:first-child,
  .bt-main > section.bt-section.deep:first-child,
  .bt-main > section.bt-profile-hero:first-child,
  .bt-main > section.bt-faq-hero:first-child,
  .bt-main > section.bt-research-hero:first-child,
  .bt-main > section.bt-dr-hero:first-child,
  .bt-main > section.bt-architecture-hero:first-child,
  .bt-main > section.bt-infra-hero:first-child,
  .bt-main > section.bt-off-hero:first-child,
  .bt-main > section.bt-howit-hero:first-child,
  .bt-main > section.bt-home-hero:first-child {
    padding-top: 124px !important;
    margin-top: 0 !important;
  }
}

/* Body background: keep paper as the default. Only certain pages need a
   dark body background, and we set that with a per-page body class
   (.bt-body-dark) which we add via JS / inline. For now, keep body paper. */