/* ================================================
   The Trading Journal — Main Stylesheet
   Single file for entire site. All styles here.
   ================================================ */

/* 1. CSS Variables */
:root {
 --color-bg: #fafaf7;
 --color-text: #1a1a1a;
 --color-accent: #1e3a5f;
 --color-accent-dark: #142a45;
 --color-utility-bg: #111111;
 --color-utility-text: #ffffff;
 --color-category: #666666;
 --color-date: #595959;
 --color-border: #e0e0e0;
 --color-surface: #f5f5f0;
 --font-heading: Georgia, "Times New Roman", serif;
 --font-body: system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
 --font-mono: "SF Mono", Menlo, Consolas, monospace;
 --max-width: 1200px;
 --nav-height: 48px;
 --utility-height: 40px;
 --radius: 6px;
}

/* 2. Reset & Base */
*, *::before, *::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

html {
 font-size: 16px;
 -webkit-text-size-adjust: 100%;
}

body {
 font-family: var(--font-body);
 color: var(--color-text);
 background-color: var(--color-bg);
 line-height: 1.6;
 min-height: 100vh;
 display: flex;
 flex-direction: column;
}

main { flex: 1; }

a {
 color: var(--color-accent);
 text-decoration: none;
}

a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* Inline link styling — links in prose / footer must be distinguishable
   by more than color (WCAG 1.4.1). Page-level anchors and nav links have
   their own styling. */
.prose p a, article p a, .content a, main p a, .text-content a, .article-body a,
.footer-bottom p a, .main-footer a, .footer-bottom a {
 text-decoration: underline;
 text-decoration-thickness: 1px;
 text-underline-offset: 2px;
}

/* 3. Typography */
h1, h2, h3, h4, h5, h6 {
 font-family: var(--font-heading);
 color: var(--color-text);
 line-height: 1.25;
}

h1 { font-size: 2.5rem; margin: 1.5rem 0 1rem; }
h2 { font-size: 1.75rem; margin: 2rem 0 .75rem; }
h3 { font-size: 1.25rem; margin: 1.5rem 0 .5rem; }
h4 { font-size: 1.05rem; margin: 1.25rem 0 .5rem; }

p { margin-bottom: 1rem; }

code, pre {
 font-family: var(--font-mono);
 font-size: 0.9em;
 background: #f0f0eb;
 padding: 1px 5px;
 border-radius: 3px;
}

pre {
 padding: 1rem;
 overflow-x: auto;
 margin: 1rem 0;
}

blockquote {
 border-left: 3px solid var(--color-accent);
 padding: .25rem 1rem;
 margin: 1rem 0;
 color: #444;
 font-style: italic;
 background: var(--color-surface);
}

hr {
 border: 0;
 border-top: 1px solid var(--color-border);
 margin: 2rem 0;
}

/* 4. Top utility bar */
.top-bar {
 background-color: var(--color-utility-bg);
 color: var(--color-utility-text);
 padding: 0 1.5rem;
 height: var(--utility-height);
 display: flex;
 align-items: center;
 gap: 1.5rem;
 max-width: var(--max-width);
 margin: 0 auto;
}

.top-wordmark {
 color: #ffffff;
 font-family: var(--font-heading);
 font-weight: 700;
 font-size: .95rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}

.top-wordmark:hover { text-decoration: none; opacity: 0.85; }

.top-tagline {
 color: rgba(255, 255, 255, 0.7);
 font-size: 0.8rem;
 font-style: italic;
 flex: 1;
}

.top-links {
 display: flex;
 gap: 1rem;
}

.top-links a {
 color: #cccccc;
 font-size: 0.8rem;
 text-transform: uppercase;
 letter-spacing: 0.04em;
}

.top-links a:hover { color: #ffffff; text-decoration: none; }

/* 5. Section tab bar */
.tab-bar {
 background: var(--color-surface);
 border-bottom: 1px solid var(--color-border);
}

.tab-bar-inner {
 max-width: var(--max-width);
 margin: 0 auto;
 padding: 0 1.5rem;
 display: flex;
 gap: 1.75rem;
 height: var(--nav-height);
 align-items: center;
 overflow-x: auto;
}

.tab-bar-inner a {
 color: var(--color-text);
 font-size: 0.85rem;
 font-weight: 500;
 text-transform: uppercase;
 letter-spacing: 0.04em;
 padding: 0.25rem 0;
 border-bottom: 2px solid transparent;
 white-space: nowrap;
}

.tab-bar-inner a:hover { color: var(--color-accent); text-decoration: none; }

.tab-bar-inner a.active {
 color: var(--color-accent);
 border-bottom-color: var(--color-accent);
}

/* 6. Page Hero (for section landing pages) */
.page-hero {
 max-width: var(--max-width);
 margin: 0 auto;
 padding: 3.5rem 1.5rem 2rem;
 text-align: left;
}

.page-hero h1 {
 font-size: 2.75rem;
 margin-bottom: 0.75rem;
}

.page-hero p {
 font-size: 1.1rem;
 color: #444;
 max-width: 760px;
}

.page-content {
 max-width: var(--max-width);
 margin: 0 auto;
 padding: 0 1.5rem 3rem;
}

/* 7. Homepage — Hero section */
.hero-section {
 max-width: var(--max-width);
 margin: 0 auto;
 padding: 2.5rem 1.5rem 1.5rem;
}

.hero-grid {
 display: grid;
 grid-template-columns: 2fr 1fr;
 gap: 2.5rem;
}

@media (max-width: 900px) {
 .hero-grid { grid-template-columns: 1fr; }
}

.hero-featured h2 {
 font-size: 2rem;
 margin: 0.5rem 0 0.75rem;
 line-height: 1.2;
}

.hero-featured h2 a { color: var(--color-text); }
.hero-featured h2 a:hover { color: var(--color-accent); text-decoration: none; }

.hero-featured p {
 color: #444;
 margin-bottom: 1rem;
 font-size: 1.05rem;
}

.hero-sidebar {
 border-left: 1px solid var(--color-border);
 padding-left: 1.5rem;
}

.hero-sidebar h3 {
 font-size: 0.8rem;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 color: var(--color-category);
 margin: 0 0 1rem;
 padding-bottom: 0.5rem;
 border-bottom: 1px solid var(--color-border);
}

.sidebar-article {
 padding: 0.75rem 0;
 border-bottom: 1px solid var(--color-border);
}

.sidebar-article:last-child { border-bottom: none; }

.sidebar-article h4 {
 font-size: 1rem;
 margin: 0.25rem 0 0;
 font-family: var(--font-body);
 font-weight: 600;
 line-height: 1.35;
}

.sidebar-article h4 a { color: var(--color-text); }
.sidebar-article h4 a:hover { color: var(--color-accent); text-decoration: none; }

/* Trade-log hero — at-a-glance stats strip (4-up grid) + wider chart panel */
.trade-hero-stats {
 max-width: 1100px;
 margin: 2rem auto 1.5rem;
 padding: 1.25rem 1.5rem;
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 1rem;
 background: linear-gradient(180deg, #fafaf7 0%, #f4f3ee 100%);
 border: 1px solid #e3e2dc;
 border-radius: 8px;
 box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

@media (max-width: 720px) {
 .trade-hero-stats { grid-template-columns: repeat(2, 1fr); }
}

.trade-hero-stat {
 text-align: left;
 padding: 0.25rem 0.5rem;
 border-left: 3px solid var(--color-accent);
}

.trade-hero-stat .label {
 font-size: 0.7rem;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 color: #888;
 font-weight: 600;
 margin: 0 0 0.25rem;
}

.trade-hero-stat .value {
 font-size: 1.5rem;
 font-weight: 700;
 color: var(--color-text);
 line-height: 1.15;
 margin: 0;
 font-family: var(--font-display);
}

.trade-hero-stat .sub {
 font-size: 0.78rem;
 color: #666;
 margin: 0.25rem 0 0;
}

.trade-hero-stat.hot { border-left-color: #b8401f; }
.trade-hero-stat.cool { border-left-color: #2c5d63; }
.trade-hero-stat.neutral { border-left-color: #b89a3b; }

.trade-hero-chart {
 max-width: 1100px;
 margin: 1.5rem auto 0.5rem;
 padding: 1rem 1.5rem 1.5rem;
 background: #ffffff;
 border: 1px solid #e3e2dc;
 border-radius: 8px;
 box-sizing: border-box;
}

/* Breakout from the article-body 760px column */
.article-body > .trade-hero-chart {
 width: calc((100vw - 760px) / 2 + 760px);
 max-width: 1100px;
 margin-left: 50%;
 transform: translateX(-50%);
}

/* (legacy .trade-hero-wrap chart-overlap rule removed 2026-07-14 14:22 ET;
   chart now sits alone at the top of the article, no sibling) */

/* Trade-fields panel (sidebar inside .position-payoff-layout) */
.trade-hero-chart .hero-label {
 font-size: 0.7rem;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 color: #888;
 font-weight: 600;
 margin: 0 0 0.5rem;
 text-align: center;
}

.trade-hero-chart figure { margin: 0; }
.trade-hero-chart figure img {
 display: block;
 width: 100%;
 height: auto;
 border-radius: 4px;
}

/* Optionstrat affiliate caption below the P/L chart image. */
.chart-affiliate {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: #5a6a7a;
  text-align: center;
  font-style: italic;
  line-height: 1.4;
}

.chart-affiliate a {
  color: #2563eb;
  text-decoration: none;
  font-style: normal;
  font-weight: 500;
}

.chart-affiliate a:hover {
  text-decoration: underline;
}

/* Position Payoff + trade-fields sidebar layout.
   Mike directive 2026-07-14 14:22 ET: chart stays alone at the top; the
   trade-fields panel now sits to the right of the "Position Payoff ..."
   section of the body so the reader sees the field reference next to the
   chart interpretation instead of above it. */
.position-payoff-layout {
 display: grid;
 grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
 gap: 1.5rem;
 max-width: 1100px;
 margin: 1.25rem auto 2rem;
 padding: 0 0;
 align-items: start;
}

/* Breakout from article-body 760px column */
.article-body .position-payoff-layout {
 width: calc(100vw / 0.76 * 0.66);
 max-width: 1100px;
 margin-left: 50%;
 transform: translateX(-50%);
}

.position-payoff-content { min-width: 0; }
.position-payoff-content h2:first-child { margin-top: 0; }

@media (max-width: 860px) {
 .position-payoff-layout,
 .article-body .position-payoff-layout {
 grid-template-columns: 1fr;
 width: 100%;
 max-width: 760px;
 margin-left: auto;
 margin-right: auto;
 transform: none;
 padding: 0 1.5rem;
 }
 .article-body .position-payoff-layout { padding: 0; }
}

.trade-hero-fields {
 background: #ffffff;
 border: 1px solid #e3e2dc;
 border-radius: 8px;
 padding: 1rem 1.25rem 1.25rem;
 box-shadow: 0 1px 4px rgba(0,0,0,0.03);
 align-self: start;
}

.trade-hero-fields .hero-label {
 font-size: 0.7rem;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 color: #888;
 font-weight: 600;
 margin: 0 0 0.75rem;
 padding-bottom: 0.5rem;
 border-bottom: 1px solid var(--color-border, #e3e2dc);
}

.trade-hero-fields dl {
 margin: 0;
 display: grid;
 grid-template-columns: minmax(96px, auto) 1fr;
 gap: 0.4rem 0.9rem;
 font-size: 0.88rem;
 line-height: 1.45;
}

.trade-hero-fields dt {
 color: #666;
 font-weight: 500;
 margin: 0;
}

.trade-hero-fields dd {
 color: #1a1a1a;
 font-weight: 500;
 margin: 0;
 word-wrap: break-word;
 overflow-wrap: anywhere;
}

/* Solo card (no chart): break out of article-body to match chart width.
   Used by closed trades like XSP/SPX where there's no P/L curve image. */
.article-body > .trade-hero-fields--solo {
 width: calc((100vw - 760px) / 2 + 760px);
 max-width: 1100px;
 margin-left: 50%;
 transform: translateX(-50%);
 margin-top: 1rem;
 margin-bottom: 1.5rem;
 box-sizing: border-box;
}

@media (max-width: 860px) {
 .article-body > .trade-hero-fields--solo {
 width: 100%;
 max-width: 760px;
 margin-left: auto;
 margin-right: auto;
 transform: none;
 padding: 0;
 }
}

/* Default table styling for any remaining <table> in article body
   (defensive: the chart+fields breakout replaces the in-body table,
   but future trade articles may keep one in the body). */
.article-body table {
 width: 100%;
 border-collapse: collapse;
 margin: 1.5rem 0 2rem;
 font-size: 0.92rem;
 background: #ffffff;
 border: 1px solid #e3e2dc;
 border-radius: 6px;
 overflow: hidden;
}

.article-body table th,
.article-body table td {
 padding: 0.65rem 0.9rem;
 text-align: left;
 border-bottom: 1px solid #efece4;
 vertical-align: top;
}

.article-body table th {
 background: #f4f3ee;
 font-weight: 600;
 font-size: 0.78rem;
 text-transform: uppercase;
 letter-spacing: 0.06em;
 color: #555;
 border-bottom: 2px solid #d9d6c8;
}

.article-body table tr:last-child td { border-bottom: 0; }
.article-body table td:first-child {
 font-weight: 600;
 color: #444;
 width: 32%;
 white-space: nowrap;
}
.article-body table td:nth-child(2) { color: #1a1a1a; }

/* 8. Date + category */
.date-text {
 font-size: 0.75rem;
 color: var(--color-date);
 text-transform: uppercase;
 letter-spacing: 0.05em;
 font-weight: 600;
}

/* 9. Section headers (homepage) */
.section-header {
 max-width: var(--max-width);
 margin: 0 auto;
 padding: 0 1.5rem;
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 border-top: 1px solid var(--color-border);
 margin-top: 2rem;
 padding-top: 1.5rem;
}

.section-header h2 {
 font-size: 1.25rem;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 margin: 0;
}

.explore-link {
 font-size: 0.85rem;
 color: var(--color-accent);
 font-weight: 500;
}

/* 10. Card grid */
.card-grid {
 max-width: var(--max-width);
 margin: 1.25rem auto 0;
 padding: 0 1.5rem;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1.5rem;
}

@media (max-width: 900px) {
 .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
 .card-grid { grid-template-columns: 1fr; }
}

.article-card {
 background: #ffffff;
 border: 1px solid var(--color-border);
 border-radius: var(--radius);
 padding: 1.25rem;
 transition: box-shadow 0.15s, transform 0.15s;
}

.article-card:hover {
 box-shadow: 0 4px 12px rgba(30, 58, 95, 0.08);
 transform: translateY(-2px);
}

.article-card h3 {
 font-size: 1.1rem;
 margin: 0.5rem 0;
 line-height: 1.3;
}

.article-card h3 a { color: var(--color-text); }
.article-card h3 a:hover { color: var(--color-accent); text-decoration: none; }

.article-card p {
 font-size: 0.92rem;
 color: #555;
 margin: 0.5rem 0 0;
 line-height: 1.55;
}

/* 11. Article body (single-article page) */
.article-body {
 max-width: 760px;
 margin: 0 auto;
 padding: 0 1.5rem 3rem;
 font-size: 1.05rem;
 line-height: 1.75;
 color: #222;
}

.article-body h2 {
 font-size: 1.65rem;
 margin: 2.25rem 0 1rem;
 border-bottom: 1px solid var(--color-border);
 padding-bottom: 0.5rem;
}

.article-body h3 {
 font-size: 1.3rem;
 margin: 1.75rem 0 0.75rem;
}

.article-body p { margin-bottom: 1.25rem; }
.article-body ul, .article-body ol { margin: 0 0 1.25rem 1.5rem; }
.article-body li { margin-bottom: 0.4rem; }

.article-body strong { font-weight: 600; color: #1a1a1a; }
.article-body em { font-style: italic; }

.accent-link {
 color: var(--color-accent);
 font-weight: 500;
}

/* 12. Share bar */
.share-bar {
 display: flex;
 align-items: center;
 gap: 10px;
 margin: 40px 0 32px;
 padding: 16px 0;
 border-top: 1px solid var(--color-border);
 border-bottom: 1px solid var(--color-border);
}

.share-label {
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: #999;
 margin-right: 4px;
}

.share-btn {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 padding: 7px 12px;
 border-radius: 4px;
 font-size: 12px;
 text-decoration: none;
 border: 1px solid var(--color-accent);
 background: transparent;
 cursor: pointer;
 font-family: inherit;
 color: var(--color-accent);
 transition: opacity 0.15s;
}

.share-btn:hover { opacity: 0.7; text-decoration: none; }

/* 13. Disclaimer (in-article) */
.disclaimer {
 margin: 2.5rem 0;
 padding: 1rem 1.25rem;
 background: var(--color-surface);
 border-left: 4px solid var(--color-accent);
 font-size: 0.875rem;
 line-height: 1.65;
 color: #444;
}

.disclaimer strong { color: #1a1a1a; }

/* 14. Footer */
.main-footer {
 background: #111;
 color: #ccc;
 padding: 3rem 1.5rem 1.5rem;
 margin-top: 3rem;
}

.footer-grid {
 max-width: var(--max-width);
 margin: 0 auto;
 display: grid;
 grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
 gap: 2.5rem;
}

@media (max-width: 900px) {
 .footer-grid {
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
 }
}

@media (max-width: 600px) {
 .footer-grid { grid-template-columns: 1fr; }
}

.footer-brand h4 {
 color: #fff;
 font-size: 1.1rem;
 margin-bottom: 0.75rem;
}

.footer-brand p {
 font-size: 0.85rem;
 line-height: 1.6;
 color: #aaa;
}

.footer-nav h5 {
 color: #fff;
 font-size: 0.75rem;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 margin-bottom: 0.75rem;
 font-family: var(--font-body);
 font-weight: 600;
}

.footer-nav ul { list-style: none; }

.footer-nav li {
 margin-bottom: 0.4rem;
 font-size: 0.85rem;
}

.footer-nav a { color: #ccc; }
.footer-nav a:hover { color: #fff; text-decoration: none; }

.footer-bottom {
 max-width: var(--max-width);
 margin: 2.5rem auto 0;
 padding-top: 1.5rem;
 border-top: 1px solid #333;
 font-size: 0.78rem;
 color: #999;
 line-height: 1.5;
}

.footer-bottom p { margin-bottom: 0.5rem; }

/* 15. Resource card (section index) */
.resource-card {
 background: #fff;
 transition: background 0.15s;
}

.resource-card:hover { background: var(--color-surface); }

/* 16. Trade-log entries: data tables look like a broker statement */
.trade-statement {
 background: #fff;
 border: 1px solid var(--color-border);
 border-radius: var(--radius);
 padding: 1.5rem;
 margin: 1.5rem 0;
 font-family: var(--font-mono);
 font-size: 0.9rem;
}

.trade-statement .field {
 display: grid;
 grid-template-columns: 180px 1fr;
 gap: 0.5rem;
 margin-bottom: 0.25rem;
}

.trade-statement .field-label {
 color: var(--color-category);
 font-family: var(--font-body);
 font-size: 0.75rem;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 font-weight: 600;
}

.trade-statement .field-value { color: #1a1a1a; }

.trade-statement .pnl-positive { color: #0a7c2f; font-weight: 600; }
.trade-statement .pnl-negative { color: #c41e3a; font-weight: 600; }

/* 17. Premium CTA banner (only on /premium/) */
.premium-cta {
 background: linear-gradient(135deg, #1e3a5f 0%, #142a45 100%);
 color: #fff;
 padding: 2.5rem 2rem;
 border-radius: var(--radius);
 margin: 2rem 0;
 text-align: center;
}

.premium-cta h2 { color: #fff; margin-bottom: 0.75rem; }
.premium-cta p { color: rgba(255,255,255,0.9); margin-bottom: 1.25rem; max-width: 540px; margin-left: auto; margin-right: auto; }

.premium-cta .btn {
 display: inline-block;
 background: #fff;
 color: var(--color-accent);
 padding: 0.75rem 1.5rem;
 border-radius: 4px;
 font-weight: 600;
 text-decoration: none;
}

.premium-cta .btn:hover { background: #f0f0eb; text-decoration: none; }