/* =====================================================================
   WealthFile — mobile-nav.css
   Sitewide mobile navigation (hamburger + slide-in drawer).

   Goals:
   - Reveal the 5 category links that each per-page inline style hides at
     <= 720px (front-page.php:1154 etc: `.site-header nav a:not(.nav-cta):not(.nav-login) { display: none }`).
   - Provide a touch-friendly slide-in drawer from the right.
   - Wire into main.js initMobileNav() (uses #mobile-nav-toggle + body.mobile-nav-open).
   - Do not disturb the desktop header layout.
   ===================================================================== */

/* Hamburger + search icon — hidden on desktop */
.mobile-nav-toggle,
.mobile-search-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.mobile-nav-toggle svg,
.mobile-search-toggle svg {
  width: 22px;
  height: 22px;
}
.mobile-nav-toggle:focus-visible,
.mobile-search-toggle:focus-visible {
  outline: 2px solid #c9a84c;
  outline-offset: 2px;
}
.mobile-search-toggle:hover { color: #c9a84c; }

/* Icon cross-fade: hamburger ↔ X */
.mobile-nav-toggle .icon-open  { display: block; }
.mobile-nav-toggle .icon-close { display: none; }
body.mobile-nav-open .mobile-nav-toggle .icon-open  { display: none; }
body.mobile-nav-open .mobile-nav-toggle .icon-close { display: block; }

/* ---- Mobile breakpoint (<= 720px) ---- */
@media (max-width: 720px) {
  /* Show both hamburger and search icons */
  .site-header .mobile-nav-toggle,
  .site-header .mobile-search-toggle { display: inline-flex !important; }

  /* Hide inline header search form — replaced by icon that opens drawer */
  .site-header .header-search { display: none !important; }

  /* Switch to flexbox layout so injected buttons flow around the logo:
     [☰]  Wealthfile  .................................  [🔍]
  */
  .site-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    padding: 0 12px !important;
    /* Must exceed backdrop z-index (997) so the nav drawer isn't hidden behind it */
    z-index: 999 !important;
  }
  .site-header .logo { flex: 1 1 auto; min-width: 0; font-size: 1.05rem !important; padding-left: 4px; }

  /* Convert nav into a LEFT-side drawer (hamburger is left-anchored) */
  .site-header nav#site-navigation {
    position: fixed !important;
    top: 112px;
    left: 0;
    bottom: 0;
    width: min(84vw, 320px);
    background: #0a0a0a !important;
    color: #fff;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 16px 0 24px !important;
    gap: 0 !important;
    transform: translateX(-110%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 998;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 12px 0 32px rgba(0, 0, 0, 0.35);
  }
  body.mobile-nav-open .site-header nav#site-navigation {
    transform: translateX(0);
  }

  /* Backdrop — solid dim, no blur (user feedback: blur looked fuzzy) */
  body.mobile-nav-open::before {
    content: "";
    position: fixed;
    top: 112px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 997;
  }

  /* Force-show every nav item (override per-page `display: none`) */
  .site-header nav#site-navigation a,
  .site-header nav#site-navigation a:not(.nav-cta):not(.nav-login) {
    display: block !important;
    padding: 14px 24px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    line-height: 1.3;
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box;
    background-color: transparent;
    /* Kill the default black tap-highlight on iOS/Android that otherwise
       overlays the gold hover/active color — user reported "검은색이
       한번 더 덧대있는 것 같다". */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    transition: background-color 0.12s ease, color 0.12s ease;
  }
  .site-header nav#site-navigation a:hover,
  .site-header nav#site-navigation a:focus-visible {
    background-color: rgba(201, 168, 76, 0.14);
    color: #c9a84c !important;
  }
  .site-header nav#site-navigation a:active {
    background-color: rgba(201, 168, 76, 0.22);
    color: #c9a84c !important;
  }

  /* Hide the desktop divider */
  .site-header nav#site-navigation .nav-divider { display: none !important; }

  /* Log in row — keep icon */
  .site-header nav#site-navigation .nav-login {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .site-header nav#site-navigation .nav-login svg {
    width: 16px;
    height: 16px;
  }

  /* Go Pro CTA inside drawer — matches desktop header button size */
  .site-header nav#site-navigation .nav-cta {
    display: block !important;
    margin: 12px 16px 4px !important;
    padding: 6px 14px !important;
    text-align: center !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 2px !important;
    background: #fff !important;
    color: #0a0a0a !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
  }
  .site-header nav#site-navigation .nav-cta:hover {
    background: #c9a84c !important;
    color: #0a0a0a !important;
  }

  /* Mobile search row injected by header.php at the top of the drawer */
  .mobile-nav-search {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 4px;
  }
  .mobile-nav-search form {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 12px;
  }
  .mobile-nav-search svg { color: rgba(255, 255, 255, 0.5); flex-shrink: 0; }
  .mobile-nav-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    min-width: 0;
  }
  .mobile-nav-search input::placeholder { color: rgba(255, 255, 255, 0.4); }

  /* Prevent page scroll while drawer is open */
  body.mobile-nav-open { overflow: hidden; }
}

/* Desktop — drawer hidden search row is not rendered in markup */
@media (min-width: 721px) {
  .mobile-nav-search { display: none; }
}

/* Hide the "Updated ... Source: SEC EDGAR" freshness bar on mobile.
   Declared sitewide; each page template carries its own .data-freshness-bar. */
@media (max-width: 720px) {
  .data-freshness-bar { display: none !important; }
  /* Collapse the 34px compensation that freshness bar imposed on the
     sticky tab-nav offset in single.php (the ET overlap fix at line 2262). */
  .tab-nav { top: 0 !important; }

  /* Hide ticker tape on mobile — user decision. Reclaims 56px above-the-fold
     that previously showed the two-row scrolling prices. Also collapses the
     body padding-top from 112px (header+ticker) to 56px (header only). */
  .ticker-tape { display: none !important; }
  body { padding-top: 56px !important; }

  /* 404 / drawer / backdrop were anchored at top:112px assuming ticker
     present. Shift them up to header-only offset. */
  .site-header nav#site-navigation { top: 56px !important; }
  body.mobile-nav-open::before { top: 56px !important; }
  .wf-404 { min-height: calc(100vh - 56px) !important; }
}

/* ── Fix S: prevent horizontal scroll + QMB 2-col ── */
@media (max-width: 720px) {
  /* Hard-stop horizontal overflow — catch-all for any element wider than viewport */
  html, body { overflow-x: hidden !important; max-width: 100% !important; }

  /* Quick Metrics Bar: 4-col → 2-col so labels fit in one line */
  .qmb { flex-wrap: wrap !important; }
  .qmb-item {
    flex: 0 0 50% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* Even items lose their right border so the row doesn't show a dangling line */
  .qmb-item:nth-child(even) { border-right: none !important; }

  /* Label: single line, ellipsis if still too long */
  .qmb-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    font-size: 0.65rem !important;
  }
}

/* Ticker-detail metric grid on narrow phones: 4-col → 2-col.
   .metrics-grid lives inside single.php's tab-metrics panel and is
   grid-template-columns: repeat(4, 1fr) at desktop. */
@media (max-width: 720px) {
  .metrics-grid,
  #tab-metrics .metrics-grid,
  .qmb-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
}

/* ── Fix T: Money Moves filing card mobile layout ── */
@media (max-width: 720px) {
  /* Wrap the three items: [badge] [title] wrap↓ [acc number] */
  .mm-filing-header {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }
  /* Title gets full width — forces acc number to its own line */
  .mm-filing-title {
    flex: 1 1 100% !important;
    order: 2 !important;
    font-size: 0.82rem !important;
  }
  /* Badge stays left on row 1 */
  .mm-filing-badge { order: 1 !important; }
  /* Acc number goes below, indented to align under title */
  .mm-filing-date {
    order: 3 !important;
    width: 100% !important;
    font-size: 0.68rem !important;
    color: var(--gray-500, #6b7280) !important;
    padding-left: 2px !important;
  }

  /* Also fix the accordion variant used in desktop Money Moves sidebar */
  .mm-filing-accordion .mm-filing-header {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }
  .mm-filing-accordion .mm-filing-header-title {
    flex: 1 1 100% !important;
    font-size: 0.82rem !important;
  }
}

/* ── Fix U: Money Moves Key Metrics table + grid-5 mobile ── */
@media (max-width: 720px) {
  /* ① mm-metrics-table: hide Trend column (col 4) — bar + triangle not readable on narrow screens */
  .mm-metrics-table th:nth-child(4),
  .mm-metrics-table td:nth-child(4) { display: none !important; }

  /* ② mm-metric-comment: hide inline description text — saves vertical space */
  .mm-metric-comment { display: none !important; }

  /* ③ Wrap table in scroll container so any remaining overflow is contained */
  .mm-metrics-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ④ Tighten column widths for the 3-col layout that remains */
  .mm-metrics-table td:first-child { max-width: 40vw; }
  .mm-metrics-table td:nth-child(2),
  .mm-metrics-table td:nth-child(3) { white-space: nowrap; padding-left: 8px !important; }

  /* ⑤ grid-5 (commodity / signal cards): 5-col → 2-col at mobile */
  .grid-5 { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* ===== Logo wordmark — smaller on mobile ===== */
  .site-header .logo img {
    height: 14px !important;
    width: auto !important;
  }
}