/* ═══════════════════════════════════════════════════════════════════
   Learn Refinements v1.0 — 2026-05-12
   NeverHodl™ — Mobile Content Absorption Improvements
   1. Article card contrast  2. Search icon  3. Filter tags hitbox
   4. Footer spacing         5. Social hover  6. Closing CTA
═══════════════════════════════════════════════════════════════════ */

/* ── 0. SHARE BUTTONS — unified across all articles ──────────────── */
.share-section{margin:32px 0;padding:24px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:12px}
.share-section-label{font-family:var(--mono,'JetBrains Mono',monospace);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted,#8892A4);margin-bottom:14px}
.share-btns{display:flex;gap:10px;flex-wrap:wrap}
.share-btn{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:9px 18px;border-radius:8px;cursor:pointer;transition:all .2s;border:1px solid;text-decoration:none;min-height:44px}
.share-btn-x{background:rgba(0,0,0,.4);border-color:rgba(255,255,255,.15);color:var(--text,#E8EDF5)}
.share-btn-x:hover{background:rgba(0,0,0,.7);border-color:rgba(255,255,255,.3)}
.share-btn-tg{background:rgba(0,136,204,.1);border-color:rgba(0,136,204,.3);color:#29B6F6}
.share-btn-tg:hover{background:rgba(0,136,204,.2);border-color:rgba(0,136,204,.5)}
.share-btn-wa{background:rgba(37,211,102,.08);border-color:rgba(37,211,102,.3);color:#25D366}
.share-btn-wa:hover{background:rgba(37,211,102,.15);border-color:rgba(37,211,102,.5)}
.share-btn-copy{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:var(--text2,#9BA8BB)}
.share-btn-copy:hover{background:rgba(255,255,255,.1)}

/* ── 1. ARTICLE CARD — body text contrast & line-height ─────────────
   #CBD5E1 on #172033 (--card) ≈ 8.1:1  ✅ WCAG AA                  */
.article-desc,
.article-excerpt {
  color: #CBD5E1;
  line-height: 1.55;
}

/* Article body long-form text */
.article-body p,
.article-body li {
  line-height: 1.65;
  color: #CBD5E1;
}

/* Keep headings bright */
.article-body h2,
.article-body h3,
.article-body h4 {
  color: var(--snow, #F8FAFC);
}

/* ── 2. SEARCH ICON — increase brightness for clear affordance ───────*/
.intel-search-icon {
  color: rgba(148, 163, 184, 0.75);   /* was var(--muted2) ≈ 0.28 opacity */
  font-size: 18px;
  transition: color 0.2s;
}
.intel-search-box:focus-within .intel-search-icon {
  color: var(--gold, #D4A843);
}

/* ── 3. FILTER TAGS — strong active state + 44px hitbox ─────────────*/

/* Active tag: gold background, black text, 2px border (WCAG AA) */
.intel-filter.active {
  background: var(--gold, #D4A843);
  border-color: var(--gold, #D4A843);
  border-width: 2px;
  color: #0B0D12;
  font-weight: 700;
}
.intel-filter.active:hover {
  background: var(--gold2, #E8BC2E);
  border-color: var(--gold2, #E8BC2E);
}

/* Hitbox expansion — 44px touch area without changing visual size (WCAG 2.5.5) */
.intel-filter {
  position: relative;
  /* Visual padding kept compact */
  padding: 5px 12px;
}
.intel-filter::before {
  content: '';
  position: absolute;
  inset: calc((100% - 44px) / 2 * -1) calc((100% - 100%) / 2);
  /* Simpler: just extend touch area top/bottom */
  top: -10px;
  bottom: -10px;
  left: 0;
  right: 0;
}
@media (pointer: coarse) {
  .intel-filter {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── 4. FOOTER LINKS — increased vertical spacing for mobile ─────────*/
.foot-col {
  gap: 16px;        /* was 10px — prevents accidental taps */
}
.foot-col a {
  padding: 2px 0;   /* extra tap buffer top/bottom */
  display: block;
}
@media (pointer: coarse) {
  .foot-col a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ── 5. SOCIAL ICONS — :hover / :active full opacity ────────────────*/
.social-icons a:hover,
.social-icons a:active {
  opacity: 1;
  color: var(--snow, #F8FAFC);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}
.social-icons a {
  opacity: 0.75;
  transition: opacity 0.2s, color 0.2s, background 0.2s, border-color 0.2s;
}

/* ── 6. CLOSING CTA — "Back to Dashboard" standardized block ─────────*/

/* The .article-cta block already exists in all templates.
   This ensures consistent gold-brand button styling across pages. */
.article-cta .btn-primary {
  background: var(--gold, #D4A843);
  color: #0B0D12 !important;
  font-weight: 700;
  border: none;
  border-bottom: none !important;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: background 0.2s;
}
.article-cta .btn-primary:hover {
  background: var(--gold2, #E8BC2E);
}

/* Back-to-learn secondary button */
.article-cta .btn-ghost {
  color: var(--text2, #9BA8BB);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.article-cta .btn-ghost:hover {
  color: var(--snow, #F8FAFC);
  border-color: rgba(255, 255, 255, 0.25);
}

/* ── MOBILE OVERRIDES ────────────────────────────────────────────────*/
@media (max-width: 600px) {

  /* Article card text slightly larger for readability */
  .article-desc,
  .article-excerpt {
    font-size: 13px;
    line-height: 1.6;
  }

  /* Footer column items full-width tap targets */
  .foot-col a {
    font-size: 14px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* CTA buttons stack vertically on small screens */
  .article-cta > div[style*="flex"] {
    flex-direction: column;
    align-items: center;
  }

  /* Article body mobile readability */
  .article-body h2 { font-size: 20px; margin: 24px 0 12px; }
  .article-body h3 { font-size: 16px; }
  .article-body p,
  .article-body li { font-size: 14px; line-height: 1.7; }
  .article-lead { font-size: 14px; padding-left: 14px; }
  .article-h1 { font-size: 24px; }

  /* Tables in articles — compact for 375px */
  .article-body table { font-size: 11px; }
  .article-body table th,
  .article-body table td { padding: 8px 8px; }
  .article-body table th { font-size: 8px; letter-spacing: .5px; }

  /* Stat grids — single column */
  .stat-row,
  .stats-grid { grid-template-columns: 1fr !important; }

  /* Pre/code blocks */
  .article-body pre { font-size: 11px; padding: 12px; }

  /* Share buttons — unified mobile */
  .share-btns { gap: 8px; }
  .share-btn { font-size: 12px; padding: 10px 14px; min-height: 44px; }
  .share-btn-sm { width: 44px; height: 44px; font-size: 15px; }

  /* Share section label */
  .share-section-label { font-size: 9px; }

  /* Filter tags row: allow wrap + slightly more padding */
  .intel-filters {
    gap: 10px;
  }

  /* Search icon even brighter on mobile */
  .intel-search-icon {
    font-size: 20px;
  }
}