/*
Theme Name: Voozon
Theme URI: https://voozon.xyz
Description: Clean editorial theme for Voozon — a multi-subject blog built for informational depth, extraction and citation. Dual light/dark, self-hosted type, signature Quick Answer + review components, strict E-E-A-T furniture.
Author: Voozon
Version: 1.0.2
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: voozon
*/

/* ============================================================ FONTS ============================================================ */
@font-face { font-family: 'Fraunces'; src: url('assets/fonts/Fraunces.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('assets/fonts/Fraunces-Italic.woff2') format('woff2'); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('assets/fonts/Inter.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ============================================================ TOKENS ============================================================ */
:root {
  --canvas: #FFFFFF;
  --surface-1: #F7F8FA;
  --surface-2: #EDEFF3;
  --hairline: #DEE2E8;
  --hairline-strong: #C6CCD6;
  --text-primary: #14181F;
  --text-secondary: #4A5361;
  --text-tertiary: #78818E;

  --accent: #4338CA;
  --accent-hover: #362BA8;
  --accent-soft: #ECEBFB;
  --link: #4338CA;
  --link-visited: #6D3B9E;
  --positive: #16714C;
  --caution: #B0760A;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --container: 1160px;
  --measure: 700px;
  --rail: 280px;
  --radius: 6px;
  --radius-lg: 12px;
  --ease: cubic-bezier(.2,0,0,1);
  --shadow: 0 1px 2px rgba(20,24,31,.04), 0 8px 24px -14px rgba(20,24,31,.12);
}
:root[data-theme="dark"] {
  --canvas:#0E1116; --surface-1:#161A21; --surface-2:#1E242D; --hairline:#28303B; --hairline-strong:#3B4553;
  --text-primary:#EAEDF2; --text-secondary:#A8B0BC; --text-tertiary:#79828F;
  --accent:#8B85F0; --accent-hover:#A29DF4; --accent-soft:#1C2030; --link:#8B85F0; --link-visited:#B79BE0;
  --positive:#57BC93; --caution:#E0AC4C;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -16px rgba(0,0,0,.6);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --canvas:#0E1116; --surface-1:#161A21; --surface-2:#1E242D; --hairline:#28303B; --hairline-strong:#3B4553;
  --text-primary:#EAEDF2; --text-secondary:#A8B0BC; --text-tertiary:#79828F;
  --accent:#8B85F0; --accent-hover:#A29DF4; --accent-soft:#1C2030; --link:#8B85F0; --link-visited:#B79BE0;
  --positive:#57BC93; --caution:#E0AC4C;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -16px rgba(0,0,0,.6);
}}

/* ============================================================ BASE ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} }
body{ margin:0; background:var(--canvas); color:var(--text-primary); font-family:var(--sans); font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:2px; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
hr{ border:0; border-top:1px solid var(--hairline); margin:40px 0; }
.wrap{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.vh{ position:absolute!important; width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; }
.skip{ position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:10px 16px; z-index:100; }
.skip:focus{ left:12px; top:12px; }
::selection{ background:var(--accent-soft); }

/* ============================================================ TYPE ============================================================ */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.18; color:var(--text-primary); margin:0 0 .5em; letter-spacing:-.01em; text-wrap:balance; }
h1{ font-size:33px; } h2{ font-size:27px; margin-top:1.6em; } h3{ font-size:22px; margin-top:1.4em; } h4{ font-size:19px; }
@media(min-width:720px){ h1{font-size:42px} h2{font-size:30px} }
p{ margin:0 0 1.15em; } strong{font-weight:700} em{font-style:italic}
.kicker{ display:inline-block; font-family:var(--sans); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); }
.metaline{ font-family:var(--sans); font-size:13px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.04em; }

/* ============================================================ HEADER ============================================================ */
.site-header{ border-bottom:1px solid var(--hairline); background:var(--canvas); position:sticky; top:0; z-index:40; }
.masthead{ display:flex; align-items:center; gap:22px; height:68px; }
.brand{ font-family:var(--serif); font-weight:600; font-size:26px; letter-spacing:-.02em; color:var(--text-primary); line-height:1; }
.brand:hover{ text-decoration:none; }
.brand .dot{ color:var(--accent); }
.brand-tag{ font-family:var(--sans); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-tertiary); display:block; margin-top:3px; font-weight:600; }
.mainnav{ display:flex; gap:20px; margin-left:auto; font-family:var(--sans); }
.mainnav a{ color:var(--text-secondary); text-transform:uppercase; letter-spacing:.05em; font-size:12.5px; font-weight:600; padding:4px 0; border-bottom:2px solid transparent; }
.mainnav a:hover,.mainnav a[aria-current="page"]{ color:var(--text-primary); text-decoration:none; border-bottom-color:var(--accent); }
.hdr-tools{ display:flex; gap:4px; align-items:center; padding-left:8px; border-left:1px solid var(--hairline); }
.icon-btn{ background:none; border:0; color:var(--text-secondary); cursor:pointer; padding:8px; border-radius:var(--radius); display:inline-flex; }
.icon-btn:hover{ background:var(--surface-1); color:var(--text-primary); }
.hamburger{ display:none; }
@media(max-width:860px){ .mainnav{display:none} .hamburger{display:inline-flex} }
.drawer{ position:fixed; inset:0 0 0 auto; width:min(320px,86vw); background:var(--canvas); border-left:1px solid var(--hairline); transform:translateX(100%); transition:transform .25s var(--ease); z-index:60; padding:20px; overflow:auto; }
.drawer.open{ transform:none; } .scrim{ position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .25s; z-index:55; } .scrim.open{opacity:1;pointer-events:auto}
.drawer a{ display:block; padding:12px 0; border-bottom:1px solid var(--hairline); color:var(--text-primary); font-weight:600; }

/* ============================================================ CHIPS / BADGES ============================================================ */
.chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); padding:4px 10px; border-radius:100px; }
.chip--outline{ background:transparent; border:1px solid var(--hairline-strong); color:var(--text-secondary); }

/* ============================================================ LAYOUT — POST ============================================================ */
.post-layout{ display:grid; grid-template-columns:minmax(0,1fr); gap:40px; margin:40px 0 80px; }
@media(min-width:1000px){ .post-layout{ grid-template-columns:minmax(0,var(--measure)) var(--rail); justify-content:center; } }
.post-body{ max-width:var(--measure); font-size:18px; }
.post-body p{ margin:0 0 1.3em; }
.post-body h2,.post-body h3{ scroll-margin-top:90px; }
.post-body a{ text-decoration:underline; text-underline-offset:2px; }
.post-body img{ border-radius:var(--radius); margin:1.6em 0; }
.post-body figure{ margin:1.8em 0; } .post-body figcaption{ font-size:13px; color:var(--text-tertiary); margin-top:8px; }
.post-body ul,.post-body ol{ padding-left:1.3em; margin:0 0 1.3em; } .post-body li{ margin:.4em 0; }
.post-body blockquote{ margin:1.6em 0; padding:.2em 0 .2em 1.1em; border-left:3px solid var(--accent); font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--text-primary); }
.dropcap::first-letter{ font-family:var(--serif); font-weight:700; float:left; font-size:3.4em; line-height:.8; padding:.05em .1em 0 0; color:var(--accent); }
.rail{ font-family:var(--sans); }
.rail-sticky{ position:sticky; top:90px; }

/* Breadcrumb */
.crumbs{ font-family:var(--sans); font-size:13px; color:var(--text-tertiary); margin:0 0 14px; }
.crumbs a{ color:var(--text-secondary); } .crumbs span{ margin:0 6px; }

/* Standfirst */
.standfirst{ font-family:var(--serif); font-size:21px; line-height:1.5; color:var(--text-secondary); margin:0 0 24px; }

/* Article hero image */
.post-hero{ margin:0 0 28px; }
.post-hero img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-lg); background:var(--surface-2); }

/* Byline row */
.byline{ display:flex; align-items:center; gap:12px; padding:16px 0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); margin:0 0 28px; font-family:var(--sans); }
.byline img{ width:44px; height:44px; border-radius:50%; }
.byline .by-name{ font-weight:700; color:var(--text-primary); font-size:14px; }
.byline .by-meta{ font-size:12.5px; color:var(--text-tertiary); }

/* ============================================================ SIGNATURE: QUICK ANSWER ============================================================ */
.quick-answer{ border:1.5px solid var(--hairline-strong); border-left:4px solid var(--accent); border-radius:var(--radius); padding:18px 22px; margin:0 0 28px; background:var(--surface-1); }
.quick-answer h2{ font-family:var(--sans); font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); margin:0 0 8px; }
.quick-answer p{ margin:0; font-size:17px; line-height:1.6; color:var(--text-primary); }

/* Tested box (reviews) */
.tested-box{ border:1px solid var(--hairline); border-radius:var(--radius); background:var(--surface-1); padding:18px 22px; margin:0 0 24px; font-family:var(--sans); font-size:14.5px; }
.tested-box h3{ font-family:var(--sans); font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-tertiary); margin:0 0 10px; }
.tested-box dl{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:0; }
.tested-box dt{ color:var(--text-tertiary); } .tested-box dd{ margin:0; color:var(--text-primary); }

/* Pros/cons */
.proscons{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:24px 0; }
@media(max-width:600px){ .proscons{grid-template-columns:1fr} }
.proscons .col{ border:1px solid var(--hairline); border-radius:var(--radius); padding:16px 18px; }
.proscons h4{ font-family:var(--sans); font-size:13px; text-transform:uppercase; letter-spacing:.06em; margin:0 0 10px; }
.proscons .pros h4{ color:var(--positive); } .proscons .cons h4{ color:var(--caution); }
.proscons ul{ margin:0; padding-left:1.1em; font-size:15px; }

/* Comparison table */
.cmp-table{ overflow-x:auto; margin:24px 0; }
.cmp-table table{ width:100%; border-collapse:collapse; font-family:var(--sans); font-size:14.5px; }
.cmp-table th,.cmp-table td{ padding:10px 14px; border-bottom:1px solid var(--hairline); text-align:left; }
.cmp-table thead th{ position:sticky; top:0; background:var(--surface-2); }

/* Affiliate disclosure */
.affiliate-note{ font-family:var(--sans); font-size:13px; color:var(--text-tertiary); background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--radius); padding:10px 14px; margin:0 0 24px; }

/* FAQ */
.faq{ margin:36px 0; } .faq details{ border-bottom:1px solid var(--hairline); }
.faq summary{ font-family:var(--serif); font-weight:600; font-size:19px; padding:16px 0; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:"+"; color:var(--accent); font-family:var(--sans); }
.faq details[open] summary::after{ content:"−"; } .faq details p{ padding:0 0 16px; margin:0; color:var(--text-secondary); }

/* Author card */
.author-card{ display:flex; gap:16px; align-items:flex-start; border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:20px; margin:40px 0; background:var(--surface-1); font-family:var(--sans); }
.author-card img{ width:64px; height:64px; border-radius:50%; flex:none; }
.author-card .ac-name{ font-family:var(--serif); font-size:19px; font-weight:600; margin:0 0 2px; }
.author-card .ac-role{ font-size:12.5px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.06em; margin:0 0 8px; }
.author-card p{ font-size:14.5px; color:var(--text-secondary); margin:0 0 8px; }
.author-card a{ font-size:13px; font-weight:600; }

/* Newsletter inline */
.nl-inline{ border:1px solid var(--hairline-strong); border-radius:var(--radius-lg); padding:26px; margin:40px 0; background:var(--surface-1); text-align:center; }
.nl-inline h3{ margin:0 0 6px; } .nl-inline p{ color:var(--text-secondary); font-size:15px; margin:0 0 16px; }
.nl-form{ display:flex; gap:8px; max-width:420px; margin:0 auto; }
.nl-form input{ flex:1; border:1.5px solid var(--hairline-strong); background:var(--canvas); color:var(--text-primary); border-radius:var(--radius); padding:.7em 1em; font-family:var(--sans); font-size:15px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--sans); font-weight:600; font-size:15px; padding:.7em 1.3em; border-radius:var(--radius); border:1.5px solid transparent; cursor:pointer; }
.btn-accent{ background:var(--accent); color:#fff; } .btn-accent:hover{ background:var(--accent-hover); text-decoration:none; }
.btn-ghost{ background:transparent; color:var(--accent); border-color:var(--hairline-strong); }

/* TOC */
.toc{ border:1px solid var(--hairline); border-radius:var(--radius); padding:16px 18px; font-family:var(--sans); }
.toc h4{ font-family:var(--sans); font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--text-tertiary); margin:0 0 10px; }
.toc ul{ list-style:none; margin:0; padding:0; } .toc li{ margin:6px 0; } .toc a{ font-size:14px; color:var(--text-secondary); }
.toc a.active{ color:var(--accent); font-weight:600; }

/* ============================================================ CARDS / GRIDS ============================================================ */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:28px; margin:24px 0; }
.card{ border:1px solid var(--hairline); border-radius:var(--radius-lg); overflow:hidden; background:var(--canvas); transition:border-color .15s, transform .15s; position:relative; }
.card::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .2s var(--ease); }
.card:hover{ border-color:var(--hairline-strong); } .card:hover::before{ transform:scaleX(1); }
.card .thumb{ aspect-ratio:16/9; background:var(--surface-2); overflow:hidden; } .card .thumb img{ width:100%; height:100%; object-fit:cover; }
.card .cbody{ padding:18px 20px; } .card h3{ font-size:19px; margin:8px 0; line-height:1.25; } .card h3 a{ color:var(--text-primary); }
.card .cdek{ font-size:14.5px; color:var(--text-secondary); margin:0 0 12px; } .card .cmeta{ font-family:var(--sans); font-size:12px; color:var(--text-tertiary); }

.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:52px 0 4px; border-bottom:2px solid var(--text-primary); padding-bottom:8px; }
.section-head h2{ margin:0; font-size:24px; } .section-head .more{ font-family:var(--sans); font-size:13px; font-weight:600; }

/* Lead (home) */
.lead-grid{ display:grid; gap:28px; margin:36px 0; } @media(min-width:900px){ .lead-grid{ grid-template-columns:1.4fr 1fr; } }
.lead-main .lead-img{ display:block; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; background:var(--surface-2); margin-bottom:16px; }
.lead-main .lead-img img{ width:100%;height:100%;object-fit:cover; }
.lead-main h2{ font-size:32px; margin:.2em 0; } @media(min-width:720px){ .lead-main h2{ font-size:38px; } }
.lead-main h2 a{ color:var(--text-primary); }
.lead-side{ display:flex; flex-direction:column; gap:18px; }
.list-row{ border-bottom:1px solid var(--hairline); padding-bottom:16px; } .list-row:last-child{border-bottom:0}
.list-row h3{ font-size:18px; margin:6px 0; } .list-row h3 a{ color:var(--text-primary); }

.home-hero{ padding:44px 0 8px; }
.home-hero .kicker{ margin-bottom:10px; }
.home-hero h1{ font-size:clamp(30px,5vw,46px); max-width:16ch; }
.home-hero p{ font-size:19px; color:var(--text-secondary); max-width:60ch; }

/* Pagination */
.pagination{ display:flex; gap:8px; justify-content:center; margin:48px 0; font-family:var(--sans); }
.pagination .page-numbers{ padding:8px 14px; border:1px solid var(--hairline); border-radius:var(--radius); color:var(--text-secondary); }
.pagination .current{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* ============================================================ FOOTER ============================================================ */
.site-footer{ border-top:1px solid var(--hairline); background:var(--surface-1); margin-top:80px; padding:48px 0 32px; font-family:var(--sans); font-size:14px; }
.footer-top{ display:grid; gap:32px; grid-template-columns:1.5fr 1fr 1fr 1fr; } @media(max-width:820px){ .footer-top{ grid-template-columns:1fr 1fr; } }
.footer-brand .brand{ font-size:22px; } .footer-brand p{ color:var(--text-secondary); margin:12px 0; max-width:34ch; }
.fcol h4{ font-family:var(--sans); font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-tertiary); margin:0 0 12px; }
.fcol ul{ list-style:none; margin:0; padding:0; } .fcol li{ margin:8px 0; } .fcol a{ color:var(--text-secondary); }
.footer-bottom{ margin-top:36px; padding-top:20px; border-top:1px solid var(--hairline); color:var(--text-tertiary); font-size:13px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.disambig-line{ color:var(--text-tertiary); font-size:12.5px; max-width:70ch; }