/* ============================================================
   ToneThread Blog — mobile.css
   Mobile-first responsive additions.
   Load AFTER theme.css.
   Tested: iPhone SE (375px), iPhone 15 Pro (393px),
           Samsung Galaxy S24 (360px), iPad mini (768px)
   ============================================================ */

/* ── Base mobile resets ── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* ── NAV — mobile collapse ── */
@media (max-width: 640px) {

  .tt-nav {
    height: auto;
    flex-wrap: wrap;
    padding: 0;
  }

  .tt-nav-brand {
    height: 52px;
    border-right: none;
    padding: 0 1rem;
    flex: 1;
  }

  .tt-nav-links {
    /* Desktop links are hidden on mobile — the same destinations live in
       the hamburger panel below. */
    display: none;
  }

  .tt-nav-right {
    /* On mobile the Bark toggle and Subscribe CTA live inside the
       hamburger panel below, so the top nav row only carries the
       burger itself sitting flush right next to the brand. */
    border-left: 1px solid var(--rule);
    border-top: none;
    width: auto;
    height: 52px;
  }

  /* Hide the desktop Bark + Subscribe buttons on mobile — their
     equivalents live inside .tt-mobile-menu instead. */
  .tt-nav-right > .tt-bark-btn,
  .tt-nav-right > .tt-sub-btn {
    display: none;
  }

  /* Burger sits alone in the right-hand cell next to the brand. */
  .tt-nav-burger {
    display: inline-flex;
    flex: 0 0 52px;
    height: 100%;
    width: 52px;
    border: none;
    border-radius: 0;
  }

  /* Bark toggle styled to match the menu's link rows so it lives
     comfortably alongside Signal / Archive / About. */
  .tt-mobile-menu-bark {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem 1.25rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink, #111);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rule);
    cursor: pointer;
    text-align: left;
  }
  .tt-mobile-menu-bark:hover,
  .tt-mobile-menu-bark:focus-visible {
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    color: var(--ink);
    outline: none;
  }

  /* Mobile menu panel: drops down beneath the nav, mirrors the desktop
     links + Subscribe. Uses the existing surface/ink/rule tokens so it
     sits cleanly in both light and bark modes. */
  .tt-mobile-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--surface, #fff);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 0.25rem 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .18s ease, opacity .18s ease;
  }
  .tt-mobile-menu[hidden] { display: none; }
  .tt-mobile-menu[data-open="true"] {
    max-height: 60vh;
    opacity: 1;
  }
  .tt-mobile-menu a {
    display: block;
    padding: 0.85rem 1.25rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink, #111);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
  }
  .tt-mobile-menu a:last-child { border-bottom: none; }
  .tt-mobile-menu a:hover,
  .tt-mobile-menu a:focus-visible {
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    color: var(--ink);
    outline: none;
  }
  .tt-mobile-menu a[aria-current="page"] {
    color: var(--acc);
  }
  .tt-mobile-menu .tt-mobile-menu-cta {
    color: var(--acc);
    font-weight: 600;
  }
}

/* ── HERO — single column on mobile ── */
@media (max-width: 680px) {

  .tt-hero-inner {
    grid-template-columns: 1fr;
    padding: 2rem 1.25rem 2rem;
    gap: 1.5rem;
  }

  .tt-hero-wave {
    opacity: 0.35;
  }

  .tt-hero-wave img {
    width: 100%;
    opacity: 0.4;
  }

  .tt-hero h1 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  .tt-hero-sub {
    max-width: 100%;
    font-size: 0.88rem;
  }

  .tt-hero-btns {
    flex-direction: column;
    gap: 0.5rem;
  }

  .tt-btn-primary,
  .tt-btn-ghost {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 11px 22px;
  }

  .tt-axis-card {
    /* axis card drops below hero text on mobile */
    border-top: 1px solid var(--rule);
    border-radius: 0;
    margin: 0 -1.25rem;
    padding: 1rem 1.25rem;
    background: var(--surface2);
  }
}

/* ── LANDSCAPE — full width, taller on mobile ── */
@media (max-width: 640px) {

  .tt-landscape {
    padding: 1.25rem 1rem;
  }

  .tt-lmap {
    height: 200px;
  }
}

/* ── FEED — single column on mobile ── */
@media (max-width: 600px) {

  .tt-feed {
    padding: 1.25rem 1rem;
  }

  .tt-feed-grid {
    grid-template-columns: 1fr;
  }

  /* Featured card: stack vertically */
  .tt-card-featured {
    grid-column: 1;
    grid-template-columns: 1fr;
  }

  .tt-feat-right {
    border-left: none;
    border-top: 1px solid var(--rule);
  }

  .tt-feat-body {
    padding: 1.1rem;
  }

  .tt-feat-title {
    font-size: 1.1rem;
  }
}

/* ── ARTICLE — mobile reading comfort ── */
@media (max-width: 640px) {

  .tt-article-wrap {
    padding: 1.5rem 1.1rem;
  }

  .tt-article-title {
    font-size: clamp(1.3rem, 5vw, 1.6rem);
  }

  .tt-article-body {
    font-size: 1rem; /* slightly larger for mobile reading */
  }

  .tt-article-body pre {
    font-size: 0.75rem;
    padding: 0.85rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Certificate panel: scrollable value column */
  .tt-cert-value {
    max-width: 55%;
    font-size: 0.62rem;
  }

  /* Axis bars grid: 3 columns on narrow screens */
  .tt-cert-axes {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
  }
}

/* ── VERIFY page — mobile ── */
@media (max-width: 640px) {

  .tt-verify-wrap {
    padding: 1.5rem 1.1rem;
  }

  .tt-vstep {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.85rem;
  }

  .tt-vstep-num {
    align-self: flex-start;
  }

  .tt-vstep-result {
    font-size: 0.6rem;
    padding-left: 32px;
  }
}

/* ── PAGES (about, signal, archive) ── */
@media (max-width: 640px) {

  .tt-page-wrap {
    padding: 1.75rem 1.1rem;
  }

  .tt-page-hero {
    padding: 2rem 1.1rem 1.5rem;
  }

  .tt-page-hero h1 {
    font-size: clamp(1.4rem, 6vw, 1.9rem);
  }

  /* Tool grid: single column on mobile */
  .tt-tools-grid {
    grid-template-columns: 1fr;
  }

  /* Axis explainer table: scroll horizontally */
  .tt-axis-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Zone pills: wrap */
  .tt-zone-pills {
    flex-direction: column;
    gap: 0.5rem;
  }

  .tt-zone-pill {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }
}

/* ── FOOTER — stack on mobile ── */
@media (max-width: 580px) {

  .tt-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 1.1rem;
  }

  .tt-footer-links {
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
  }
}

/* ── Touch target minimums ── */
@media (max-width: 768px) {

  .tt-bark-btn,
  .tt-sub-btn,
  .tt-btn-primary,
  .tt-btn-ghost {
    min-height: 44px; /* Apple HIG minimum touch target */
  }

  .tt-nav-brand {
    min-height: 44px;
  }

  /* Scatter dots: larger hit area on touch */
  .tt-ldot {
    min-width: 20px;
    min-height: 20px;
  }

  /* Card links: full-card tap area */
  .tt-card,
  .tt-card-featured {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ── Tablet (768px) — two-column feed ── */
@media (min-width: 601px) and (max-width: 860px) {

  .tt-feed-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tt-card-featured {
    grid-column: 1 / -1;
    grid-template-columns: 3fr 2fr;
  }

  .tt-hero-inner {
    grid-template-columns: 1fr 260px;
    padding: 2.5rem 1.5rem 2.5rem;
  }
}

/* ── Safe area insets (iPhone notch / Dynamic Island) ── */
@supports (padding: max(0px)) {

  .tt-nav {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  .tt-footer {
    padding-bottom: max(2rem, calc(1.5rem + env(safe-area-inset-bottom)));
    padding-left: max(1.1rem, calc(1.1rem + env(safe-area-inset-left)));
    padding-right: max(1.1rem, calc(1.1rem + env(safe-area-inset-right)));
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {

  .tt-ax-fill,
  .tt-cert-axis-bar,
  .tt-ldot,
  .root * {
    transition: none !important;
    animation: none !important;
  }
}

/* ── High contrast mode ── */
@media (forced-colors: active) {

  .tt-nav-wordmark,
  .tt-footer-wordmark,
  .tt-gradient-text,
  .hero-gw {
    -webkit-text-fill-color: ButtonText;
    background: none;
  }

  .tt-card-bar,
  .tt-feat-bar,
  .tt-post-top-bar {
    background: ButtonText !important;
  }
}