/*
Theme Name: DFX Investopedia
Theme URI: https://dominionfx.net/
Author: DFX Research Team
Description: Lightweight, Investopedia-like WordPress theme. Sticky TV ticker, headline+list front page, A–Z glossary hub + /terms/{letter} archives. jQuery-free, Core Web Vitals friendly.
Version: 1.2.1
License: GPL-2.0-or-later
Text Domain: dfx-investopedia
*/

/* =Reset & tokens ========================================================= */
html{box-sizing:border-box;scroll-behavior:smooth}
*,*:before,*:after{box-sizing:inherit}
:root{
  --max-w:1100px; --pad:16px; --pad-md:20px; --pad-lg:28px;
  --fg:#0f172a; --muted:#475569; --border:#e2e8f0; --bg-soft:#f8fafc; --accent:#2b6cb0;
}
body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;color:var(--fg);background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:#0a58ca;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad)}
.hidden{display:none!important}
:focus-visible{outline:3px solid #94a3b8;outline-offset:2px}

/* =TV ticker =============================================================== */
.tv-ticker{position:sticky;top:0;z-index:40;background:#0b1220;color:#dde7ff;border-bottom:1px solid #0b1220}
.tv-ticker .inner{display:flex;gap:12px;align-items:center;padding:.4rem var(--pad)}
.tv-ticker .label{display:none!important} /* “Markets” etiketi gizli */

/* =Header ================================================================== */
.site-header{background:#fff;border-bottom:1px solid var(--border)}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;padding:.8rem var(--pad)}
.brand{font-weight:900;letter-spacing:.2px;font-size:1.25rem;color:var(--fg)}
.nav .menu{display:flex;gap:16px;margin:0;padding:0;list-style:none}
.nav .menu a{color:var(--fg);font-weight:600}
.nav .menu a:hover{color:#1f3b8a}

/* =Cards & lists =========================================================== */
.grid{display:grid;gap:18px}
@media (min-width:768px){.grid-hero{grid-template-columns:2fr 1fr}}

.card{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(15,23,42,.04)}
.card .thumb{aspect-ratio:16/9;background:#e2e8f0}
.card .content{padding:14px}
.card h1,.card h2,.card h3{margin:.2rem 0 .4rem;line-height:1.2}
.card p{margin:0;color:var(--muted)}

ul.headlines{list-style:none;padding:0;margin:0}
ul.headlines li{padding:.6rem 0;border-bottom:1px solid var(--border)}
ul.headlines li:last-child{border-bottom:0}

/* =Typography ============================================================== */
.post-title{font-size:clamp(1.25rem,1.1rem+1.2vw,1.75rem)}
.post-excerpt{color:var(--muted)}
.article{max-width:780px;margin:0 auto;padding:1rem var(--pad)}
.article h1{font-size:clamp(1.6rem,1.2rem+1.6vw,2.2rem)}

/* =Ads ===================================================================== */
.ad-slot{width:100%;min-height:90px;background:#f1f5f9;border:1px dashed #cbd5e1;border-radius:10px;display:grid;place-items:center;color:#64748b;font-size:.9rem}

/* =Footer ================================================================== */
.site-footer{margin-top:24px;border-top:1px solid var(--border);background:#fff}
.site-footer .inner{padding:1rem var(--pad);color:var(--muted);display:grid;gap:10px}
.site-footer .brand{font-size:1rem}

/* =Glossary (delegated to MU-plugin) ===================================== */
/* Investopedia-like A–Z bar and 4-column grid are fully styled by
   MU-plugin: wp-content/mu-plugins/dfx-glossary-alpha-grid.php
   Theme keeps *no* global .alpha/.letter-grid rules to avoid conflicts. */

/* Keep H1 for SEO but visually hide it on glossary index */
.page-template-page-glossary-index h1{position:absolute;left:-9999px}
/* ===== DFX — Investopedia-style Glossary =====
   Drop-in CSS. Place in MU-plugin inline CSS or theme style.css. 
   Targets both index (.dfx-gp) and letter archive (.dfx-gx).
================================================ */

/* --- Tokens / base --- */
.dfx-gp, .dfx-gx{ --fg:#111827; --muted:#52525b; --link:#1d4ed8; --link-quiet:#4338ca; --line:#e5e7eb; --bg:#f3f4f6; --max:1220px; --gap:16px }
.dfx-gp a, .dfx-gx a{ color:var(--fg); text-decoration:none }
.dfx-gp a:hover, .dfx-gx a:hover{ text-decoration:underline; color:var(--link) }

/* --- FULL-BLEED ALPHA BAR (sticky, matches Investopedia proportions) --- */
.dfx-gp .alpha-wrap, .dfx-gx .alpha-wrap{ position:sticky; top:72px; z-index:9; background:var(--bg); border-bottom:1px solid var(--line); width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw) }
.dfx-gp .alpha, .dfx-gx .alpha{ display:flex; flex-wrap:wrap; gap:8px; padding:10px 14px; margin:0 auto; max-width:var(--max); list-style:none }
.dfx-gp .alpha li::marker, .dfx-gx .alpha li::marker{ content:'' }

/* Button: 32x32, small radius, subtle shadow-like border */
.dfx-gp .alpha-btn, .dfx-gx .alpha-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; font-weight:700; font-size:14px;
  color:var(--fg); background:#fff; border:1px solid var(--line); border-radius:6px;
}
.dfx-gp .alpha-btn:hover, .dfx-gx .alpha-btn:hover{ background:#eef2f7 }
.dfx-gp .alpha-btn.is-active, .dfx-gx .alpha-btn.is-active{ background:#e5e7eb }

/* --- LETTER SECTION HEADING (#, A, B...) --- */
.dfx-gp .group .title, .dfx-gx .letter-heading{
  font:700 18px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:#4338ca; /* Investopedia'ya yakın mor-lacivert */
  margin:16px 0 8px;
}

/* --- LIST GRID (plain text, no cards) --- */
.dfx-gp .grid, .dfx-gx .grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px 28px; padding:0 6px }
.dfx-gp .term, .dfx-gx .term{ display:block; padding:4px 0; min-height:auto }
.dfx-gp .muted, .dfx-gx .muted{ color:var(--muted) }

/* --- SEE LINK under each block (centered like Investopedia) --- */
.dfx-gp .see-row{ display:flex; justify-content:center; margin:10px 0 22px }
.dfx-gp .see{ color:var(--link-quiet); font-weight:500; }
.dfx-gp .see:hover{ text-decoration:underline; color:var(--link) }

/* --- Separators --- */
.dfx-gp .group{ border-bottom:1px solid #eef2f4; padding-bottom:8px; margin-bottom:6px }

/* --- Responsive breakpoints (4 → 2 → 1 sütun) --- */
@media (max-width: 1024px){ .dfx-gp .grid, .dfx-gx .grid{ grid-template-columns:repeat(3,1fr) } }
@media (max-width: 820px){  .dfx-gp .grid, .dfx-gx .grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width: 520px){  .dfx-gp .grid, .dfx-gx .grid{ grid-template-columns:1fr } }

/* --- Single-row guarantee for the A–Z band --- */
@media (min-width: 1100px){ .dfx-gp .alpha, .dfx-gx .alpha{ max-width:1220px } }
/* 27*32 + 26*8 = 1072px → 1220px içine rahat sığar. */

.dfx-gp .see-row {
  display: flex;
  justify-content: flex-end;   /* ortadan sağa hizala */
  margin: 10px 0 22px;
}
.dfx-gp .see {
  padding-right: 8px;          /* sağ kenara biraz hava */
}
/* Core layout */
.dfx-instrument-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}

.dfx-instrument-article {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

/* Header */
.dfx-instrument-header {
  margin-bottom: 24px;
}

.dfx-instrument-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.dfx-instrument-header-main {
  max-width: 60%;
}

@media (max-width: 768px) {
  .dfx-instrument-header-main {
    max-width: 100%;
  }
}

.dfx-instrument-kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 4px;
}

.dfx-instrument-title {
  font-size: 30px;
  line-height: 1.15;
  margin: 0 0 6px;
}

@media (max-width: 768px) {
  .dfx-instrument-title {
    font-size: 24px;
  }
}

.dfx-instrument-subline {
  margin: 0;
  font-size: 14px;
  color: #4b5563;
}

.dfx-instrument-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dfx-instrument-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #0f172a0d;
  border: 1px solid #e5e7eb;
  font-size: 12px;
}

.dfx-pill-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: #6b7280;
}

.dfx-pill-value {
  font-weight: 600;
  color: #111827;
}

/* Chart block */
.dfx-instrument-chart-block {
  margin: 24px 0 28px;
  padding: 16px 16px 18px;
  border-radius: 18px;
  background: #020617;
  border: 1px solid #111827;
}

.dfx-instrument-chart-block .dfx-section-title {
  color: #e5e7eb;
  margin-top: 0;
}

.dfx-tv-chart-wrapper {
  margin-top: 8px;
  border-radius: 12px;
  overflow: hidden;
  background: #020617;
  min-height: 280px;
}

.dfx-tv-chart {
  width: 100%;
  height: 360px;
}

@media (max-width: 768px) {
  .dfx-tv-chart {
    height: 260px;
  }
}

.dfx-tv-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: #9ca3af;
}

.dfx-tv-missing {
  margin: 0;
  font-size: 14px;
  color: #e5e7eb;
}

/* Sections */
.dfx-section-title {
  font-size: 18px;
  margin: 24px 0 10px;
}

/* Snapshot */
.dfx-instrument-snapshot {
  margin-bottom: 24px;
  padding: 18px 20px;
  border-radius: 18px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

.dfx-instrument-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 900px) {
  .dfx-instrument-snapshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .dfx-instrument-snapshot-grid {
    grid-template-columns: 1fr;
  }
}

.dfx-snapshot-item {
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

.dfx-snapshot-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
  margin-bottom: 4px;
}

.dfx-snapshot-value {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.dfx-snapshot-note {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
}

/* Deep dive */
.dfx-instrument-body {
  margin-bottom: 40px;
}

.dfx-instrument-content {
  padding: 16px 20px;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
}

.dfx-instrument-content p {
  margin-bottom: 1em;
}

.dfx-instrument-content p:last-child {
  margin-bottom: 0;
}