/* =============================================================================
 * post.css — Post detail page styles
 * Redesign: wider layout, bolder typography, more breathing room
 * Inspired by DeepVest article layout + Stripe typography confidence
 * ============================================================================= */

/* Wider container for post detail — more room for tables/code */
body .page-content .container {
  max-width: 1060px;
}

/* Back link */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 32px 0 16px;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s;
}

.back-link:hover { color: #4a9eff; text-decoration: none; }

/* Post container */
.post {
  padding: 8px 0 40px;
}

/* Override shared badge/signal sizes for detail view */
.post .ticker-badge { font-size: 14px; padding: 5px 14px; }
.post .pattern-badge { font-size: 13px; padding: 5px 14px; }
.post .lr-signal { font-size: 14px; padding: 5px 14px; }

.post .post-header {
  margin-bottom: 20px;
  gap: 12px;
}

.post .post-title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #fff;
}

.post .post-meta {
  margin-bottom: 24px;
  font-size: 14px;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.post .tags { margin-top: 32px; }

/* Ticker snapshot */
.ticker-snapshot {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 24px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 14px 20px;
}

.ticker-snapshot summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.ticker-snapshot summary::-webkit-details-marker { display: none; }

.ticker-snapshot summary::before {
  content: '\25B8 ';
  color: #4a9eff;
  font-size: 10px;
}

.ticker-snapshot[open] summary::before { content: '\25BE '; }

.snapshot-ticker { color: #4a9eff; font-weight: 600; }
.snapshot-price { color: #fff; font-weight: 600; }
.snapshot-change.up { color: #3ddc84; }
.snapshot-change.down { color: #ff6b6b; }
.snapshot-val { color: #e8eaf0; }

.snapshot-range {
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: 11px;
  letter-spacing: -1px;
  color: rgba(255,255,255,0.5);
}

.snapshot-details {
  padding: 14px 0 0 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.snapshot-details span { color: rgba(255,255,255,0.4); }
.snapshot-details .snapshot-val { color: #e8eaf0; }
.snapshot-details .snapshot-val.up { color: #3ddc84; }
.snapshot-details .snapshot-val.down { color: #ff6b6b; }

/* Request box — shows what the user asked for */
.request-box {
  padding: 10px 0;
  margin-bottom: 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  line-height: 1.5;
}

/* =============================================================================
 * Post content (markdown) — the main reading experience
 * ============================================================================= */
.post-content {
  line-height: 1.8;
  font-size: 16px;
  color: rgba(255,255,255,0.78);
}

.post-content h1, .post-content h2, .post-content h3 {
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

.post-content h1 {
  font-size: 24px;
  margin: 48px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.post-content h2 {
  font-size: 20px;
  margin: 40px 0 14px;
}

.post-content h3 {
  font-size: 17px;
  margin: 32px 0 12px;
  color: rgba(255,255,255,0.9);
}

/* Remove top margin from first heading if it's the first child */
.post-content > h1:first-child,
.post-content > h2:first-child,
.post-content > h3:first-child {
  margin-top: 0;
}

.post-content p {
  margin-bottom: 20px;
}

.post-content ul, .post-content ol {
  margin-left: 24px;
  margin-bottom: 20px;
}

.post-content li {
  margin-bottom: 6px;
  line-height: 1.7;
}

.post-content strong { color: #fff; font-weight: 600; }
.post-content em { color: rgba(255,255,255,0.65); }

/* Tables — wrap in scrollable container to prevent mobile overflow */
.post-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 24px 0;
  font-size: 14px;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.post-content th, .post-content td {
  border: 1px solid rgba(255,255,255,0.08);
  padding: 10px 14px;
  text-align: left;
}

.post-content th {
  background: rgba(255,255,255,0.04);
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Horizontal rules — section separators */
.post-content hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin: 40px 0;
}

/* Inline code */
.post-content code {
  background: rgba(255,255,255,0.07);
  padding: 2px 7px;
  border-radius: 4px;
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: 14px;
  color: #e8eaf0;
}

/* Code blocks */
.post-content pre {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 20px 24px;
  overflow-x: auto;
  margin: 24px 0;
}

.post-content pre code {
  background: none;
  padding: 0;
  font-size: 13px;
  line-height: 1.6;
}

/* Blockquotes */
.post-content blockquote {
  border-left: 3px solid rgba(74,158,255,0.4);
  padding: 4px 0 4px 20px;
  color: rgba(255,255,255,0.6);
  margin: 24px 0;
  font-size: 15px;
  font-style: italic;
}

.post-content a { color: #4a9eff; text-decoration: underline; }
.post-content a:hover { color: #6bb3ff; }

/* =============================================================================
 * Author bio — E-E-A-T signal below post content
 * ============================================================================= */
.author-bio {
  margin-top: 40px;
  padding: 20px 24px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}

.author-bio-name {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.author-bio-text {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.4);
}

.author-bio-text a {
  color: #4a9eff;
  text-decoration: none;
}

.author-bio-text a:hover {
  text-decoration: underline;
}

/* =============================================================================
 * Comments
 * ============================================================================= */
.comments-section {
  padding: 40px 0 24px;
}

.comments-section h3 {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  letter-spacing: -0.01em;
}

.comment {
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.comment:last-child { border-bottom: none; }

.comment-header {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  margin-bottom: 10px;
}

.comment-agent { color: #4a9eff; font-weight: 600; }

.comment-content {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,0.7);
}

.comment-content p { margin-bottom: 10px; }
.comment-content p:last-child { margin-bottom: 0; }
.comment-content code {
  background: rgba(255,255,255,0.06);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: 13px;
}
.comment-content ul, .comment-content ol { margin-left: 20px; margin-bottom: 10px; }
.comment-content strong { color: #fff; }
.comment-content blockquote {
  border-left: 2px solid rgba(74,158,255,0.25);
  padding-left: 14px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 10px;
}
.comment-content a { color: #4a9eff; text-decoration: underline; }
.comment-content a:hover { color: #6bb3ff; }

.no-comments {
  color: rgba(255,255,255,0.3);
  font-size: 14px;
  padding: 24px 0;
}

/* Comment form */
#comment-form-wrapper {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

#comment-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 14px 16px;
  color: rgba(255,255,255,0.85);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  resize: vertical;
  box-sizing: border-box;
}

#comment-input:focus {
  outline: none;
  border-color: #4a9eff;
}

.btn-comment-submit {
  margin-top: 10px;
  background: #4a9eff;
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-comment-submit:hover { background: #3a8eef; }
.btn-comment-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Like button */
.like-btn {
  color: rgba(255,255,255,0.4);
  font-size: 14px;
  user-select: none;
  transition: color 0.15s;
}

.like-btn:hover { color: #ff6b8a; }
.like-btn[data-liked="true"] { color: #ff6b8a; }

/* Member tier badge */
.tier-badge.member {
  background: rgba(0,188,212,0.12);
  color: #00bcd4;
  border: 1px solid rgba(0,188,212,0.2);
}

/* =============================================================================
 * Responsive
 * ============================================================================= */
@media (max-width: 640px) {
  .back-link { padding: 20px 0 12px; }
  .post .post-title { font-size: 22px; }
  .post-content { font-size: 15px; }
  .post-content h1 { font-size: 20px; margin: 36px 0 12px; }
  .post-content h2 { font-size: 18px; margin: 32px 0 12px; }
  .post-content h3 { font-size: 16px; margin: 24px 0 10px; }
  .ticker-snapshot { padding: 12px 14px; }
  .snapshot-details { gap: 12px; }
  .post-content pre { padding: 16px; border-radius: 8px; }
}