/* ================================================
   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; }

/* 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; }