/*
Theme Name: Crypto Pro Network
Theme URI: https://cryptopronetworkcom.org
Author: Crypto Pro Network
Description: Editorial theme for cryptopronetworkcom.org — one publication, three sections (Crypto, Finance, Markets) with per-section accent. Not a trading platform.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: cpn
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* Neutral editorial palette (light) */
  --bg:        #ffffff;
  --surface:   #f6f8fb;
  --surface-2: #eef1f6;
  --text:      #12151c;
  --text-2:    #4a5568;
  --muted:     #6b7688;
  --border:    #e4e8ef;
  --border-2:  #d3d9e3;

  /* Section accent — overridden per body class. Default = Crypto blue */
  --accent:      #4A8FE7;
  --accent-ink:  #2f6fc0;   /* darker for text-on-white contrast */
  --accent-wash: #4A8FE71a;

  /* Type */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, monospace;

  /* Fluid type scale (1.20 minor-third-ish) */
  --step--1: clamp(.82rem, .80rem + .10vw, .88rem);
  --step-0:  clamp(1rem, .97rem + .15vw, 1.09rem);
  --step-1:  clamp(1.20rem, 1.13rem + .35vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.33rem + .60vw, 1.90rem);
  --step-3:  clamp(1.75rem, 1.55rem + 1.0vw, 2.55rem);
  --step-4:  clamp(2.10rem, 1.75rem + 1.7vw, 3.35rem);

  /* Spacing */
  --sp-1: .375rem; --sp-2: .625rem; --sp-3: 1rem; --sp-4: 1.5rem;
  --sp-5: 2.25rem; --sp-6: 3.25rem; --sp-7: 4.75rem;

  --wrap: 1180px;
  --measure: 720px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16,22,34,.05), 0 6px 24px -12px rgba(16,22,34,.14);
  --ring: 0 0 0 3px var(--accent-wash);
}

/* Per-section accent (body class set in functions.php) */
body.sec-crypto  { --accent:#4A8FE7; --accent-ink:#2f6fc0; --accent-wash:#4A8FE71a; }
body.sec-finance { --accent:#3E9E72; --accent-ink:#2f7d59; --accent-wash:#3E9E721c; }
body.sec-markets { --accent:#C9862B; --accent-ink:#a66c1e; --accent-wash:#C9862B1f; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0d1017; --surface:#141922; --surface-2:#1b212c; --text:#e7ebf2; --text-2:#b3bccb;
    --muted:#8b96a8; --border:#232b38; --border-2:#2e3847;
    --accent-ink: var(--accent);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --bg:#0d1017; --surface:#141922; --surface-2:#1b212c; --text:#e7ebf2; --text-2:#b3bccb;
  --muted:#8b96a8; --border:#232b38; --border-2:#2e3847;
  --accent-ink: var(--accent);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.6);
}
/* In dark mode accents need to be a touch brighter as text */
:root[data-theme="dark"] body.sec-crypto,
:root:not([data-theme="light"]) body.sec-crypto  { --accent:#6aa6ef; }
:root[data-theme="dark"] body.sec-finance,
:root:not([data-theme="light"]) body.sec-finance { --accent:#57b98a; }
:root[data-theme="dark"] body.sec-markets,
:root:not([data-theme="light"]) body.sec-markets { --accent:#dba24c; }

/* ============================================================
   RESET / BASE
   ============================================================ */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-sans); font-size:var(--step-0); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video { max-width:100%; height:auto; display:block; }
a { color:var(--accent-ink); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,h4 { line-height:1.18; font-weight:700; letter-spacing:-.015em; margin:0 0 .5em; color:var(--text); }
h1 { font-size:var(--step-4); }
h2 { font-size:var(--step-2); }
h3 { font-size:var(--step-1); }
p { margin:0 0 1.1em; }
hr { border:0; border-top:1px solid var(--border); margin:var(--sp-5) 0; }
.wrap { max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:1rem; top:1rem; z-index:100; background:var(--accent); color:#fff; padding:.6rem 1rem; border-radius:8px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header { border-bottom:1px solid var(--border); background:var(--bg); position:sticky; top:0; z-index:40; }
.masthead { display:flex; align-items:center; gap:var(--sp-4); padding-block:.8rem; }
.brand { font-family:var(--font-serif); font-weight:600; font-size:1.35rem; letter-spacing:-.02em; color:var(--text); white-space:nowrap; }
.brand:hover { text-decoration:none; }
.brand .cpn-net { color:var(--accent); }
.brand small { display:block; font-family:var(--font-sans); font-weight:500; font-size:.66rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.mainnav { display:flex; gap:1.15rem; margin-left:auto; align-items:center; flex-wrap:wrap; }
.mainnav a { color:var(--text-2); font-weight:550; font-size:.95rem; }
.mainnav a:hover, .mainnav a[aria-current] { color:var(--accent-ink); text-decoration:none; }
.hdr-tools { display:flex; gap:.4rem; align-items:center; }
.icon-btn { background:none; border:1px solid var(--border); color:var(--text-2); width:38px; height:38px; border-radius:9px; display:grid; place-items:center; cursor:pointer; }
.icon-btn:hover { border-color:var(--accent); color:var(--accent-ink); }
.hamburger { display:none; }

/* Section switcher — the three properties, current marked */
.sec-switch { display:flex; gap:2px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:3px; }
.sec-switch a { font-size:.82rem; font-weight:600; padding:.3rem .7rem; border-radius:7px; color:var(--text-2); }
.sec-switch a:hover { text-decoration:none; color:var(--text); }
.sec-switch a.on { background:var(--bg); color:var(--accent-ink); box-shadow:var(--shadow); }
.sec-switch a[data-s="crypto"].on  { color:#2f6fc0; }
.sec-switch a[data-s="finance"].on { color:#2f7d59; }
.sec-switch a[data-s="markets"].on { color:#a66c1e; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { border-top:1px solid var(--border); background:var(--surface); margin-top:var(--sp-7); }
.footer-top { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--sp-4); padding-block:var(--sp-5); }
.footer-brand p { color:var(--text-2); font-size:.9rem; max-width:34ch; }
.fcol h4 { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:.7rem; }
.fcol ul { list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.fcol a { color:var(--text-2); font-size:.9rem; }
.fcol a:hover { color:var(--accent-ink); }
.disclaimer { border-top:1px solid var(--border); padding-block:var(--sp-3); font-size:.82rem; color:var(--muted); }
.disclaimer strong { color:var(--text-2); }
.footer-bottom { border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-block:var(--sp-3); font-size:.82rem; color:var(--muted); }

/* ============================================================
   CHIPS / KICKERS / BUTTONS
   ============================================================ */
.kicker { display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:.5rem; }
.chip { display:inline-block; font-size:.72rem; font-weight:650; letter-spacing:.02em; padding:.22rem .6rem; border-radius:999px; background:var(--accent-wash); color:var(--accent-ink); }
.chip--crypto  { background:#4A8FE71a; color:#2f6fc0; }
.chip--finance { background:#3E9E721c; color:#2f7d59; }
.chip--markets { background:#C9862B1f; color:#a66c1e; }
.btn { display:inline-flex; align-items:center; gap:.5rem; background:var(--accent); color:#fff; font-weight:650; padding:.7rem 1.2rem; border-radius:10px; border:0; cursor:pointer; }
.btn:hover { text-decoration:none; filter:brightness(1.05); }
.btn--ghost { background:transparent; color:var(--accent-ink); border:1px solid var(--border-2); }

/* ============================================================
   HOME HUB
   ============================================================ */
.home-hero { padding-block:var(--sp-6) var(--sp-5); border-bottom:1px solid var(--border); }
.home-hero h1 { max-width:16ch; font-size:var(--step-4); }
.home-hero p { max-width:60ch; color:var(--text-2); font-size:var(--step-1); }
.hero-note { margin-top:var(--sp-3); font-size:.85rem; color:var(--muted); border-left:3px solid var(--accent); padding-left:.8rem; }

.sec-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); margin-block:var(--sp-5); }
.sec-card { border:1px solid var(--border); border-radius:var(--radius); padding:var(--sp-4); background:var(--bg); transition:border-color .15s, transform .15s; }
.sec-card:hover { border-color:var(--accent); transform:translateY(-1px); }
.sec-card .dot { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; color:#fff; font-weight:700; margin-bottom:.7rem; }
.sec-card.s-crypto .dot  { background:#4A8FE7; }
.sec-card.s-finance .dot { background:#3E9E72; }
.sec-card.s-markets .dot { background:#C9862B; }
.sec-card h3 { margin-bottom:.3rem; }
.sec-card p { color:var(--text-2); font-size:.92rem; margin-bottom:.6rem; }
.sec-card .more { font-weight:650; font-size:.9rem; }

.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-block:var(--sp-5) var(--sp-3); border-bottom:1px solid var(--border); padding-bottom:.5rem; }
.section-head h2 { margin:0; font-size:var(--step-2); }
.section-head .more { font-size:.9rem; font-weight:650; }

/* ============================================================
   CARDS GRID
   ============================================================ */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.card { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--bg); display:flex; flex-direction:column; transition:border-color .15s, transform .15s; }
.card:hover { border-color:var(--accent); transform:translateY(-1px); }
.card .thumb { aspect-ratio:16/9; background:var(--surface-2); display:block; }
.card .thumb img { width:100%; height:100%; object-fit:cover; }
.thumb-ph { width:100%; height:100%; background:linear-gradient(135deg,var(--surface),var(--surface-2)); }
.cbody { padding:var(--sp-3) var(--sp-3) var(--sp-4); display:flex; flex-direction:column; gap:.5rem; }
.card h3 { font-size:var(--step-1); margin:.15rem 0 0; }
.card h3 a { color:var(--text); }
.card h3 a:hover { color:var(--accent-ink); text-decoration:none; }
.cdek { color:var(--text-2); font-size:.9rem; margin:0; }
.cmeta { color:var(--muted); font-size:.8rem; margin-top:auto; }

.list-plain { list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-3); }
.list-row { border-bottom:1px solid var(--border); padding-bottom:var(--sp-3); }
.list-row h3 { font-size:var(--step-1); margin:.2rem 0; }
.list-row h3 a { color:var(--text); }

/* ============================================================
   ARTICLE / SINGLE
   ============================================================ */
.post-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:var(--sp-6); padding-block:var(--sp-5); align-items:start; }
.post-body { min-width:0; max-width:var(--measure); }
.crumbs { font-size:.82rem; color:var(--muted); margin-bottom:.8rem; display:flex; gap:.4rem; flex-wrap:wrap; }
.crumbs a { color:var(--muted); }
.crumbs a:hover { color:var(--accent-ink); }
.post-body h1 { font-size:var(--step-3); margin-top:.4rem; }
.standfirst { font-size:var(--step-1); color:var(--text-2); line-height:1.5; margin-bottom:var(--sp-3); }

.byline { display:flex; align-items:center; gap:.7rem; padding-block:var(--sp-3); border-block:1px solid var(--border); margin-bottom:var(--sp-4); }
.by-name { font-weight:650; font-size:.92rem; }
.by-meta { color:var(--muted); font-size:.82rem; }
.cpn-av { border-radius:50%; object-fit:cover; background:var(--surface-2); }
.cpn-av-ini { border-radius:50%; display:inline-grid; place-items:center; background:var(--accent); color:#fff; font-weight:700; }

.post-hero { margin:0 0 var(--sp-4); border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); }
.post-hero img { width:100%; }

/* AEO furniture */
.quick-answer { background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:var(--radius-sm); padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-4); }
.quick-answer h2 { font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-ink); margin:0 0 .35rem; }
.quick-answer p { margin:0; font-size:1.02rem; }
.key-points { border:1px solid var(--border); border-radius:var(--radius-sm); padding:var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5); margin-bottom:var(--sp-4); background:var(--bg); }
.key-points h2 { font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 .4rem; }
.key-points ul { margin:0; padding-left:1.1rem; }
.key-points li { margin-bottom:.35rem; }

.risk-note { background:var(--accent-wash); border-radius:var(--radius-sm); padding:.8rem 1rem; font-size:.86rem; color:var(--text-2); margin-bottom:var(--sp-4); }
.risk-note strong { color:var(--text); }

.entry { font-size:1.06rem; }
.entry > h2 { margin-top:var(--sp-5); scroll-margin-top:5rem; }
.entry > h3 { margin-top:var(--sp-4); scroll-margin-top:5rem; }
.entry ul, .entry ol { padding-left:1.3rem; }
.entry li { margin-bottom:.4rem; }
.entry blockquote { margin:var(--sp-4) 0; padding-left:1.1rem; border-left:3px solid var(--accent); color:var(--text-2); font-style:italic; }
.entry code { font-family:var(--font-mono); font-size:.9em; background:var(--surface-2); padding:.1em .35em; border-radius:5px; }
.entry pre { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:var(--sp-3); overflow:auto; }
.entry table { width:100%; border-collapse:collapse; margin:var(--sp-4) 0; font-size:.92rem; }
.entry th, .entry td { border:1px solid var(--border); padding:.55rem .7rem; text-align:left; }
.entry th { background:var(--surface); }
.entry img { border-radius:var(--radius-sm); margin:var(--sp-4) 0; }
.entry a { text-decoration:underline; text-underline-offset:2px; }

/* Sources */
.sources { border-top:1px solid var(--border); margin-top:var(--sp-5); padding-top:var(--sp-4); }
.sources h2 { font-size:var(--step-1); }
.sources ol { padding-left:1.2rem; font-size:.9rem; color:var(--text-2); }
.sources li { margin-bottom:.45rem; }

/* FAQ */
.faq { margin-top:var(--sp-5); }
.faq h2 { font-size:var(--step-2); margin-bottom:var(--sp-3); }
.faq details { border:1px solid var(--border); border-radius:var(--radius-sm); padding:.4rem 1rem; margin-bottom:.6rem; background:var(--bg); }
.faq summary { cursor:pointer; font-weight:600; padding:.55rem 0; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; float:right; color:var(--accent-ink); font-weight:700; }
.faq details[open] summary::after { content:"–"; }
.faq details p { margin:.2rem 0 .7rem; color:var(--text-2); font-size:.95rem; }

/* Author card + review meta */
.review-meta { display:flex; gap:1.2rem; flex-wrap:wrap; font-size:.82rem; color:var(--muted); margin-top:var(--sp-4); padding:var(--sp-3); background:var(--surface); border-radius:var(--radius-sm); }
.review-meta b { color:var(--text-2); font-weight:600; }
.author-card { display:flex; gap:1rem; align-items:flex-start; border:1px solid var(--border); border-radius:var(--radius); padding:var(--sp-4); margin-top:var(--sp-5); background:var(--bg); }
.author-card .ac-name { font-weight:700; }
.author-card .ac-role { color:var(--muted); font-size:.85rem; margin-bottom:.4rem; }
.author-card p { font-size:.9rem; color:var(--text-2); margin:0 0 .4rem; }

/* Rail / TOC */
.rail { position:sticky; top:5rem; }
.toc { border:1px solid var(--border); border-radius:var(--radius); padding:var(--sp-3) var(--sp-4); background:var(--surface); }
.toc h4 { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 .6rem; }
.toc ul { list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
.toc a { color:var(--text-2); font-size:.86rem; line-height:1.35; display:block; }
.toc a:hover, .toc a.active { color:var(--accent-ink); text-decoration:none; }

/* ============================================================
   GLOSSARY
   ============================================================ */
.glossary-az { display:flex; flex-wrap:wrap; gap:.3rem; margin-block:var(--sp-4); }
.glossary-az a { border:1px solid var(--border); border-radius:8px; padding:.3rem .6rem; font-weight:650; font-size:.85rem; color:var(--text-2); }
.glossary-az a:hover { border-color:var(--accent); color:var(--accent-ink); text-decoration:none; }
.term-list { list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-3); }
.term-item { border:1px solid var(--border); border-radius:var(--radius-sm); padding:var(--sp-3) var(--sp-4); }
.term-item h3 { margin:0 0 .3rem; font-size:var(--step-1); }
.term-item p { margin:0; color:var(--text-2); font-size:.94rem; }

/* ============================================================
   PAGE / PROSE
   ============================================================ */
.page-narrow { max-width:var(--measure); margin-inline:auto; padding-block:var(--sp-5); }
.prose { font-size:1.05rem; }
.prose h2 { margin-top:var(--sp-5); }
.prose ul { padding-left:1.3rem; }

/* Homepage pillar */
.home-pillar { border-top:1px solid var(--border); margin-top:var(--sp-6); padding-top:var(--sp-5); }
.home-pillar .wrap-narrow { max-width:var(--measure); margin-inline:auto; }
.home-pillar h2 { font-size:var(--step-2); margin-top:var(--sp-5); scroll-margin-top:5rem; }
.home-pillar h2:first-of-type { margin-top:0; }
.home-pillar p, .home-pillar li { font-size:1.04rem; }
.home-pillar ul { padding-left:1.3rem; }
.home-pillar .faq { margin-top:var(--sp-3); }

/* Archive intro */
.archive-intro { padding-block:var(--sp-5) var(--sp-3); border-bottom:1px solid var(--border); margin-bottom:var(--sp-4); }
.archive-intro h1 { font-size:var(--step-3); }
.archive-intro p { max-width:65ch; color:var(--text-2); font-size:var(--step-1); }

/* Pagination */
.pagination { display:flex; gap:.5rem; justify-content:center; margin-block:var(--sp-5); flex-wrap:wrap; }
.pagination a, .pagination span { border:1px solid var(--border); border-radius:8px; padding:.5rem .85rem; color:var(--text-2); font-weight:600; font-size:.9rem; }
.pagination .current { background:var(--accent); color:#fff; border-color:var(--accent); }

/* Newsletter */
.newsletter { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--sp-5); margin-block:var(--sp-5); text-align:center; }
.newsletter h2 { margin-bottom:.3rem; }
.newsletter p { color:var(--text-2); max-width:50ch; margin-inline:auto; }
.nl-form { display:flex; gap:.5rem; max-width:420px; margin:var(--sp-3) auto 0; }
.nl-form input { flex:1; padding:.7rem .9rem; border:1px solid var(--border-2); border-radius:10px; background:var(--bg); color:var(--text); }

/* Mobile drawer */
.scrim { position:fixed; inset:0; background:rgba(10,13,20,.5); opacity:0; visibility:hidden; transition:.2s; z-index:45; }
.scrim.open { opacity:1; visibility:visible; }
.drawer { position:fixed; top:0; right:0; height:100%; width:min(82vw,320px); background:var(--bg); border-left:1px solid var(--border); transform:translateX(100%); transition:.22s; z-index:46; padding:var(--sp-5) var(--sp-4); display:flex; flex-direction:column; gap:.2rem; overflow-y:auto; }
.drawer.open { transform:none; }
.drawer a { padding:.7rem .3rem; color:var(--text); font-weight:550; border-bottom:1px solid var(--border); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px) {
  .post-layout { grid-template-columns:1fr; }
  .rail { display:none; }
  .cards, .sec-cards { grid-template-columns:repeat(2,1fr); }
  .footer-top { grid-template-columns:1fr 1fr; }
}
@media (max-width:680px) {
  .mainnav { display:none; }
  .hamburger { display:grid; }
  .sec-switch { display:none; }
  .cards, .sec-cards { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr 1fr; }
  .home-hero { padding-block:var(--sp-5) var(--sp-4); }
}