/*
Theme Name: AINetizens Light
Theme URI: https://ainetizens.com
Author: AINetizens
Description: Fresh, light, modern AI news and explainer blog theme
Version: 4.0
License: GNU General Public License v2
Text Domain: ainetizens-light
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Fraunces:ital,wght@0,700;0,800;1,700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --white:        #FFFFFF;
  --bg:           #F8F9FA;
  --bg2:          #F0F2F5;
  --bg3:          #E8EAED;
  --border:       #E2E5E9;
  --border2:      #CDD1D6;
  --text:         #1A1D23;
  --text2:        #4B5563;
  --text3:        #9CA3AF;
  --blue:         #2563EB;
  --blue2:        #1D4ED8;
  --blue-light:   #EFF6FF;
  --blue-glow:    rgba(37,99,235,0.08);
  --green:        #059669;
  --green-light:  #ECFDF5;
  --orange:       #EA580C;
  --orange-light: #FFF7ED;
  --purple:       #7C3AED;
  --purple-light: #F5F3FF;
  --red:          #DC2626;
  --red-light:    #FEF2F2;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --r:            8px;
  --r2:           16px;
  --r3:           24px;
  --trans:        all 0.25s cubic-bezier(0.4,0,0.2,1);
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.04);
  --shadow:       0 4px 16px rgba(0,0,0,0.08),0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:    0 12px 40px rgba(0,0,0,0.1),0 4px 12px rgba(0,0,0,0.06);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--white);color:var(--text);font-family:var(--font-body);font-weight:400;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--blue);text-decoration:none;transition:var(--trans)}
a:hover{color:var(--blue2)}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--blue-glow);color:var(--blue)}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--blue)}

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4,h5,h6{font-family:var(--font-body);font-weight:800;line-height:1.15;color:var(--text);letter-spacing:-0.025em}
h1{font-size:clamp(2rem,5vw,3.5rem)}
h2{font-size:clamp(1.4rem,3vw,2rem)}
h3{font-size:clamp(1rem,2vw,1.2rem);font-weight:700;letter-spacing:-0.015em}
p{margin-bottom:1.4rem;font-size:1.0625rem;color:var(--text2);line-height:1.75}

/* ── SCROLL ANIMATIONS ── */
.reveal,.reveal-left,.reveal-scale{opacity:1;transform:none}
.reveal.visible,.reveal-left.visible,.reveal-scale.visible{opacity:1;transform:none}
.reveal-delay-1,.reveal-delay-2,.reveal-delay-3,.reveal-delay-4{transition-delay:0s}

/* ── LAYOUT ── */
.container{max-width:1200px;margin:0 auto;padding:0 28px}

/* ── READING PROGRESS ── */
.reading-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--purple));z-index:9999;transition:width .1s linear}

/* ── TICKER ── */
.ticker-bar{background:var(--blue);padding:8px 0;overflow:hidden}
.ticker-inner{display:flex;align-items:center;max-width:100%;padding:0 28px}
.ticker-label{background:rgba(255,255,255,0.2);font-size:0.6875rem;font-weight:700;color:#fff;padding:3px 10px;border-radius:4px;text-transform:uppercase;letter-spacing:0.1em;white-space:nowrap;margin-right:18px;flex-shrink:0}
.ticker-track{overflow:hidden;flex:1}
.ticker-content{display:flex;gap:48px;animation:ticker 45s linear infinite;white-space:nowrap}
.ticker-content a{font-size:0.8125rem;color:rgba(255,255,255,0.85);font-weight:500}
.ticker-content a:hover{color:#fff}
.ticker-sep{color:rgba(255,255,255,0.4);margin:0 4px}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── HEADER ── */
.site-header{position:sticky;top:0;z-index:200;background:rgba(255,255,255,0.95);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:1200px;margin:0 auto;padding:0 28px;gap:20px}
.site-logo{display:flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:1.25rem;font-weight:800;color:var(--text);letter-spacing:-0.025em}
.site-logo .logo-badge{background:var(--blue);color:#fff;font-size:0.6875rem;font-weight:700;padding:2px 7px;border-radius:4px;letter-spacing:0.04em;text-transform:uppercase}
.site-logo:hover{color:var(--text)}
.main-nav{display:flex;align-items:center;gap:2px}
.main-nav a{font-size:0.8125rem;font-weight:600;color:var(--text2);padding:6px 12px;border-radius:var(--r);transition:var(--trans)}
.main-nav a:hover{color:var(--blue);background:var(--blue-light)}
.header-search{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:100px;padding:6px 14px;font-size:0.8125rem;color:var(--text3);cursor:pointer;transition:var(--trans)}
.header-search:hover{border-color:var(--blue);color:var(--blue)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.hamburger span{width:22px;height:2px;background:var(--text);border-radius:2px;transition:var(--trans)}
@media(max-width:960px){.main-nav{display:none}.hamburger{display:flex}.header-search{display:none}}

/* ── HERO ── */
.hero{padding:48px 0;background:var(--white);border-bottom:1px solid var(--border)}
.hero-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:32px}
.hero-eyebrow-text{font-size:0.75rem;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:0.1em}
.hero-eyebrow-line{flex:1;height:1px;background:var(--border)}
.hero-grid{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:start}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr}}

/* Featured card */
.hero-featured{border-radius:var(--r2);overflow:hidden;background:var(--white);border:1px solid var(--border);box-shadow:var(--shadow);transition:var(--trans);display:block}
.hero-featured:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.hero-featured-img{width:100%;height:340px;object-fit:cover;display:block}
.hero-featured-placeholder{height:340px;background:linear-gradient(135deg,var(--blue-light),var(--purple-light));display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.hero-featured-placeholder::after{content:'AI';font-family:var(--font-display);font-size:8rem;font-weight:800;color:rgba(37,99,235,0.08);position:absolute}
.hero-featured-body{padding:28px}
.hero-tag{display:inline-flex;align-items:center;gap:6px;font-size:0.6875rem;font-weight:700;padding:4px 10px;border-radius:100px;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:12px}
.tag-news{background:var(--red-light);color:var(--red)}
.tag-explainer{background:var(--blue-light);color:var(--blue)}
.tag-tutorial{background:var(--green-light);color:var(--green)}
.tag-finance{background:var(--orange-light);color:var(--orange)}
.tag-society{background:var(--purple-light);color:var(--purple)}
.tag-law{background:var(--red-light);color:var(--red)}
.tag-security{background:var(--orange-light);color:var(--orange)}
.hero-featured-title{font-size:clamp(1.4rem,2.5vw,1.9rem);font-weight:800;line-height:1.2;margin-bottom:12px;color:var(--text);letter-spacing:-0.025em}
.hero-featured-title a{color:inherit}
.hero-featured-title a:hover{color:var(--blue)}
.hero-featured-excerpt{font-size:0.9375rem;color:var(--text2);line-height:1.65;margin-bottom:16px;font-weight:400}
.hero-featured-meta{display:flex;align-items:center;gap:12px;font-size:0.75rem;color:var(--text3);font-family:var(--font-mono)}
.hero-featured-meta .dot{width:3px;height:3px;background:var(--border2);border-radius:50%}

/* Stack */
.hero-stack{display:flex;flex-direction:column;gap:0}
.stack-label{font-size:0.6875rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.1em;padding-bottom:14px;border-bottom:2px solid var(--border);margin-bottom:4px}
.hero-stack-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--border);transition:var(--trans)}
.hero-stack-item:hover{padding-left:4px}
.hero-stack-item:last-child{border-bottom:none}
.hero-stack-img{width:72px;height:56px;border-radius:var(--r);object-fit:cover;flex-shrink:0;background:var(--bg2)}
.hero-stack-body{}
.hero-stack-tag{font-size:0.625rem;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:5px}
.hero-stack-title{font-size:0.875rem;font-weight:700;line-height:1.4;color:var(--text);transition:var(--trans)}
.hero-stack-title a{color:inherit}
.hero-stack-item:hover .hero-stack-title{color:var(--blue)}
.hero-stack-meta{font-size:0.6875rem;color:var(--text3);font-family:var(--font-mono);margin-top:5px}

/* ── SECTION STRIPS ── */
.section-strip{display:flex;align-items:center;justify-content:space-between;padding:32px 0 20px;margin-bottom:4px}
.section-strip-left{display:flex;align-items:center;gap:12px}
.section-badge{font-size:0.6875rem;font-weight:700;padding:5px 12px;border-radius:100px;text-transform:uppercase;letter-spacing:0.08em}
.badge-news{background:var(--red-light);color:var(--red)}
.badge-explainer{background:var(--blue-light);color:var(--blue)}
.badge-tutorial{background:var(--green-light);color:var(--green)}
.badge-finance{background:var(--orange-light);color:var(--orange)}
.section-strip-title{font-size:1.1rem;font-weight:800;color:var(--text);letter-spacing:-0.02em}
.section-strip-link{font-size:0.8125rem;font-weight:600;color:var(--blue)}
.section-strip-link:hover{color:var(--blue2)}

/* ── CATEGORY PILLS ── */
.cat-strip{display:flex;gap:8px;flex-wrap:wrap;padding:16px 0 24px}
.cat-pill{font-size:0.8125rem;font-weight:600;color:var(--text2);padding:6px 16px;border:1.5px solid var(--border);border-radius:100px;transition:var(--trans);cursor:pointer;background:var(--white)}
.cat-pill:hover,.cat-pill.active{color:var(--blue);border-color:var(--blue);background:var(--blue-light)}

/* ── POSTS GRID ── */
.posts-section{padding:48px 0}
.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:40px}
@media(max-width:900px){.posts-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.posts-grid{grid-template-columns:1fr}}

.post-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;transition:var(--trans);display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.post-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:transparent}
.post-card-img{height:188px;overflow:hidden;background:var(--bg2);position:relative}
.post-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease}
.post-card:hover .post-card-img img{transform:scale(1.04)}
.post-card-img-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;background:linear-gradient(135deg,var(--bg2),var(--bg3))}
.post-card-body{padding:20px;flex:1;display:flex;flex-direction:column}
.post-card-tag{margin-bottom:10px}
.post-card-title{font-size:1rem;font-weight:700;line-height:1.4;margin-bottom:8px;color:var(--text);letter-spacing:-0.015em}
.post-card-title a{color:inherit;transition:var(--trans)}
.post-card-title a:hover{color:var(--blue)}
.post-card-excerpt{font-size:0.875rem;color:var(--text2);line-height:1.6;flex:1;font-weight:400}
.post-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.post-card-date{font-size:0.6875rem;color:var(--text3);font-family:var(--font-mono)}
.post-card-read{font-size:0.75rem;font-weight:600;color:var(--blue);display:flex;align-items:center;gap:4px}
.post-card-read:hover{color:var(--blue2)}

/* ── FEATURED ROW (wide card) ── */
.post-card-wide{display:grid;grid-template-columns:280px 1fr;border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;background:var(--white);box-shadow:var(--shadow-sm);transition:var(--trans);margin-bottom:24px}
.post-card-wide:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.post-card-wide .post-card-img{height:100%;min-height:180px}
.post-card-wide .post-card-body{padding:28px}
@media(max-width:640px){.post-card-wide{grid-template-columns:1fr}}

/* ── TOPICS GRID ── */
.topics-section{padding:48px 0;background:var(--bg)}
.topics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.topics-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.topics-grid{grid-template-columns:1fr 1fr}}
.topic-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:24px 20px;transition:var(--trans);position:relative;overflow:hidden;cursor:pointer;box-shadow:var(--shadow-sm)}
.topic-card:hover{box-shadow:var(--shadow);border-color:var(--blue);transform:translateY(-2px)}
.topic-card:hover .topic-name{color:var(--blue)}
.topic-icon{font-size:1.75rem;margin-bottom:12px;display:block}
.topic-name{font-size:0.9375rem;font-weight:700;color:var(--text);letter-spacing:-0.015em;margin-bottom:4px;transition:var(--trans)}
.topic-count{font-size:0.6875rem;color:var(--text3);font-family:var(--font-mono)}
.topic-card a{position:absolute;inset:0}

/* ── EXPLAINER BAND ── */
.explainer-band{background:linear-gradient(135deg,var(--blue) 0%,#1e40af 100%);padding:64px 0;position:relative;overflow:hidden}
.explainer-band::before{content:'?';position:absolute;right:5%;top:50%;transform:translateY(-50%);font-family:var(--font-display);font-size:20rem;font-weight:800;color:rgba(255,255,255,0.04);line-height:1;pointer-events:none}
.explainer-band-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;position:relative;z-index:1}
@media(max-width:768px){.explainer-band-inner{grid-template-columns:1fr}}
.explainer-band-text h2{color:#fff;font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:12px}
.explainer-band-text p{color:rgba(255,255,255,0.8);font-size:0.9375rem;margin-bottom:0}
.explainer-cards{display:flex;flex-direction:column;gap:12px}
.explainer-mini{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);border-radius:var(--r2);padding:16px 20px;backdrop-filter:blur(4px);display:flex;gap:14px;align-items:center;transition:var(--trans)}
.explainer-mini:hover{background:rgba(255,255,255,0.18);transform:translateX(4px)}
.explainer-mini-icon{font-size:1.5rem;flex-shrink:0}
.explainer-mini-title{font-size:0.9rem;font-weight:600;color:#fff;margin-bottom:2px}
.explainer-mini-desc{font-size:0.75rem;color:rgba(255,255,255,0.7)}
.explainer-mini a{position:absolute;inset:0}

/* ── SIDEBAR ── */
.sidebar-widget{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:22px;margin-bottom:20px;box-shadow:var(--shadow-sm)}
.widget-title{font-size:0.6875rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}

/* ── SINGLE POST ── */
.single-hero{padding:48px 0 0;background:var(--white)}
.single-hero .container{max-width:860px}
.single-title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;line-height:1.15;letter-spacing:-0.03em;margin-bottom:24px;color:var(--text)}
.single-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:28px}
.author-chip{display:flex;align-items:center;gap:10px}
.author-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--purple));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.875rem;color:#fff;flex-shrink:0}
.author-name{font-size:0.9375rem;font-weight:700;color:var(--text)}
.author-role{font-size:0.75rem;color:var(--text3)}
.meta-sep{width:1px;height:28px;background:var(--border)}
.meta-item{font-size:0.8125rem;color:var(--text3);font-family:var(--font-mono);display:flex;align-items:center;gap:5px}
.single-feat-img{width:100%;max-height:480px;object-fit:cover;border-radius:var(--r2);margin:32px 0;border:1px solid var(--border)}

/* ── POST CONTENT ── */
.post-content{font-size:1.0625rem;line-height:1.85;color:var(--text2);max-width:720px}
.post-content h2{font-size:1.5rem;font-weight:800;margin:48px 0 16px;color:var(--text);letter-spacing:-0.025em;padding-top:40px;border-top:1px solid var(--border)}
.post-content h3{font-size:1.1rem;font-weight:700;margin:32px 0 12px;color:var(--text)}
.post-content p{margin-bottom:22px}
.post-content strong{color:var(--text);font-weight:700}
.post-content a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.post-content a:hover{color:var(--blue2)}
.post-content blockquote{border-left:4px solid var(--blue);padding:18px 24px;margin:28px 0;background:var(--blue-light);border-radius:0 var(--r) var(--r) 0;font-style:italic;font-family:var(--font-display);font-size:1.15rem;color:var(--blue2)}
.post-content code{background:var(--bg2);border:1px solid var(--border);border-radius:4px;padding:2px 7px;font-family:var(--font-mono);font-size:0.875em;color:var(--blue)}
.post-content pre{background:var(--text);border-radius:var(--r2);padding:24px;overflow-x:auto;margin:24px 0}
.post-content pre code{background:none;border:none;padding:0;color:#E2E8F0;font-size:0.875rem}
.post-content ul,.post-content ol{padding-left:24px;margin-bottom:22px}
.post-content li{margin-bottom:8px}
.post-content img{border-radius:var(--r2);margin:28px 0;width:100%}
.post-content table{width:100%;border-collapse:collapse;margin:24px 0;font-size:0.9rem}
.post-content th{background:var(--bg2);padding:10px 14px;text-align:left;font-weight:700;border:1px solid var(--border)}
.post-content td{padding:10px 14px;border:1px solid var(--border)}
.post-content tr:nth-child(even) td{background:var(--bg)}

/* Key Takeaways box */
.post-content .key-takeaways{background:var(--blue-light);border:1px solid rgba(37,99,235,0.2);border-radius:var(--r2);padding:24px;margin:32px 0}
.post-content .key-takeaways h4{color:var(--blue);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:12px}

/* ── AUTHOR BIO ── */
.author-bio{background:var(--bg);border:1px solid var(--border);border-radius:var(--r2);padding:28px;margin:52px 0;display:flex;gap:20px}
.author-bio-avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--purple));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.25rem;color:#fff;flex-shrink:0}
.author-bio-name{font-weight:700;font-size:1rem;margin-bottom:6px;color:var(--text)}
.author-bio-text{font-size:0.9rem;color:var(--text2);line-height:1.65}

/* ── RELATED ── */
.related-posts{margin:52px 0;padding-top:40px;border-top:1px solid var(--border)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
@media(max-width:768px){.related-grid{grid-template-columns:1fr}}

/* ── PAGINATION ── */
.pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin:48px 0}
.pagination a,.pagination span{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r);font-family:var(--font-mono);font-size:0.875rem;color:var(--text2);transition:var(--trans)}
.pagination a:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light)}
.pagination .current{background:var(--blue);color:#fff;border-color:var(--blue);font-weight:700}

/* ── FOOTER ── */
.site-footer{background:var(--text);padding:64px 0 0;margin-top:80px}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:52px}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:480px){.footer-top{grid-template-columns:1fr}}
.footer-logo{font-size:1.25rem;font-weight:800;color:#fff;letter-spacing:-0.025em;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.footer-logo .logo-badge{background:var(--blue);font-size:0.6875rem;font-weight:700;padding:2px 7px;border-radius:4px}
.footer-desc{font-size:0.875rem;color:rgba(255,255,255,0.5);line-height:1.7;font-weight:300;margin-bottom:0}
.footer-col-title{font-size:0.6875rem;font-weight:700;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:16px}
.footer-links{list-style:none}
.footer-links li{margin-bottom:10px}
.footer-links a{font-size:0.875rem;color:rgba(255,255,255,0.6);transition:var(--trans)}
.footer-links a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding:20px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-bottom span{font-size:0.75rem;color:rgba(255,255,255,0.3);font-family:var(--font-mono)}

/* ══════════════════════════════════════════════════════════
   DARK MODE — TOGGLE CONTROL
   ══════════════════════════════════════════════════════════ */

/* Toggle button base */
.dark-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  padding: 5px 12px 5px 6px;
  cursor: pointer;
  transition: var(--trans);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text2);
  font-family: var(--font-body);
  white-space: nowrap;
}
.dark-toggle:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.toggle-track {
  width: 28px;
  height: 16px;
  background: var(--border2);
  border-radius: 100px;
  position: relative;
  transition: background 0.25s;
  flex-shrink: 0;
}
.toggle-thumb {
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ══════════════════════════════════════════════════════════
   DARK MODE — COLOR OVERRIDES
   All surfaces, text, borders, and interactive states are
   overridden so nothing is left using light-mode values.
   ══════════════════════════════════════════════════════════ */

body.dark-mode {
  --white:        #1A1D23;
  --bg:           #13151A;
  --bg2:          #1F2229;
  --bg3:          #252830;
  --border:       #2E3340;
  --border2:      #3A3F4E;
  --text:         #F0F2F5;
  --text2:        #A8B0C0;
  --text3:        #636B7A;
  --blue:         #4D8EF7;
  --blue2:        #6BA3FA;
  --blue-light:   rgba(77,142,247,0.12);
  --blue-glow:    rgba(77,142,247,0.15);
  --green:        #34D399;
  --green-light:  rgba(52,211,153,0.12);
  --orange:       #FB923C;
  --orange-light: rgba(251,146,60,0.12);
  --purple:       #A78BFA;
  --purple-light: rgba(167,139,250,0.12);
  --red:          #F87171;
  --red-light:    rgba(248,113,113,0.12);
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow:       0 4px 16px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2);
  --shadow-lg:    0 12px 40px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.25);
  background: var(--bg);
  color: var(--text);
}

/* ── Scrollbar ── */
body.dark-mode ::-webkit-scrollbar-track { background: var(--bg); }
body.dark-mode ::-webkit-scrollbar-thumb { background: var(--border2); }

/* ── Toggle active state ── */
body.dark-mode .toggle-track { background: var(--blue); }
body.dark-mode .toggle-thumb { transform: translateX(12px); }
body.dark-mode .dark-toggle  { border-color: var(--border2); color: var(--text2); }

/* ── Site header ── */
body.dark-mode .site-header {
  background: rgba(26, 29, 35, 0.95);
  border-bottom-color: var(--border);
}
body.dark-mode .hamburger span { background: var(--text); }
body.dark-mode .header-search {
  background: var(--bg2);
  border-color: var(--border);
  color: var(--text3);
}
body.dark-mode .header-search:hover { border-color: var(--blue); color: var(--blue); }

/* ── Ticker ── */
body.dark-mode .ticker-bar { background: #0F1117; }

/* ── Hero ── */
body.dark-mode .hero {
  background: var(--white);
  border-bottom-color: var(--border);
}
body.dark-mode .hero-featured {
  background: var(--bg2);
  border-color: var(--border);
}
body.dark-mode .hero-featured:hover { box-shadow: var(--shadow-lg); }
body.dark-mode .hero-featured-placeholder {
  background: linear-gradient(135deg, var(--bg3), var(--bg2));
}
body.dark-mode .hero-featured-placeholder::after { color: rgba(77,142,247,0.06); }
body.dark-mode .hero-featured-title { color: var(--text); }
body.dark-mode .hero-featured-title a { color: var(--text); }
body.dark-mode .hero-featured-title a:hover { color: var(--blue); }
body.dark-mode .hero-featured-excerpt { color: var(--text2); }
body.dark-mode .hero-featured-meta { color: var(--text3); }

/* Hero stack */
body.dark-mode .hero-stack-item { border-bottom-color: var(--border); }
body.dark-mode .hero-stack-img  { background: var(--bg2); }
body.dark-mode .hero-stack-title { color: var(--text); }
body.dark-mode .hero-stack-title a { color: var(--text); }
body.dark-mode .hero-stack-item:hover .hero-stack-title { color: var(--blue); }
body.dark-mode .stack-label { border-bottom-color: var(--border); color: var(--text3); }

/* ── Section strips ── */
body.dark-mode .section-strip-title { color: var(--text); }
body.dark-mode .cat-pill {
  background: var(--bg2);
  border-color: var(--border);
  color: var(--text2);
}
body.dark-mode .cat-pill:hover,
body.dark-mode .cat-pill.active {
  color: var(--blue);
  border-color: var(--blue);
  background: var(--blue-light);
}

/* ── Post cards ── */
body.dark-mode .post-card {
  background: var(--bg2);
  border-color: var(--border);
}
body.dark-mode .post-card:hover { border-color: transparent; }
body.dark-mode .post-card-img  { background: var(--bg3); }
body.dark-mode .post-card-img-placeholder { background: linear-gradient(135deg, var(--bg3), var(--bg2)); }
body.dark-mode .post-card-title { color: var(--text); }
body.dark-mode .post-card-title a { color: var(--text); }
body.dark-mode .post-card-title a:hover { color: var(--blue); }
body.dark-mode .post-card-excerpt { color: var(--text2); }
body.dark-mode .post-card-footer { border-top-color: var(--border); }
body.dark-mode .post-card-date { color: var(--text3); }

/* Wide post card */
body.dark-mode .post-card-wide {
  background: var(--bg2);
  border-color: var(--border);
}

/* ── Topics section ── */
body.dark-mode .topics-section { background: var(--bg); }
body.dark-mode .topic-card {
  background: var(--bg2);
  border-color: var(--border);
}
body.dark-mode .topic-card:hover { border-color: var(--blue); }
body.dark-mode .topic-name { color: var(--text); }
body.dark-mode .topic-card:hover .topic-name { color: var(--blue); }
body.dark-mode .topic-count { color: var(--text3); }

/* ── Explainer band ── */
body.dark-mode .explainer-band {
  background: linear-gradient(135deg, #1a2f5e 0%, #0f1a3a 100%);
}
body.dark-mode .explainer-mini {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
}
body.dark-mode .explainer-mini:hover { background: rgba(255,255,255,0.12); }

/* ── Sidebar widgets ── */
body.dark-mode .sidebar-widget {
  background: var(--bg2);
  border-color: var(--border);
}
body.dark-mode .widget-title {
  color: var(--text3);
  border-bottom-color: var(--border);
}

/* ── Single post ── */
body.dark-mode .single-hero { background: var(--white); }
body.dark-mode .single-title { color: var(--text); }
body.dark-mode .author-name  { color: var(--text); }
body.dark-mode .author-role  { color: var(--text3); }
body.dark-mode .meta-item    { color: var(--text3); }
body.dark-mode .meta-sep     { background: var(--border); }
body.dark-mode .single-feat-img { border-color: var(--border); }

/* ── Post content ── */
body.dark-mode .post-content { color: var(--text2); }
body.dark-mode .post-content h2 {
  color: var(--text);
  border-top-color: var(--border);
}
body.dark-mode .post-content h3  { color: var(--text); }
body.dark-mode .post-content strong { color: var(--text); }
body.dark-mode .post-content a { color: var(--blue); }
body.dark-mode .post-content a:hover { color: var(--blue2); }
body.dark-mode .post-content blockquote {
  background: var(--blue-light);
  border-left-color: var(--blue);
  color: var(--blue2);
}
body.dark-mode .post-content code {
  background: var(--bg3);
  border-color: var(--border);
  color: var(--blue2);
}
body.dark-mode .post-content pre { background: var(--bg); }
body.dark-mode .post-content pre code { color: #CBD5E1; }
body.dark-mode .post-content th {
  background: var(--bg3);
  border-color: var(--border);
  color: var(--text);
}
body.dark-mode .post-content td { border-color: var(--border); color: var(--text2); }
body.dark-mode .post-content tr:nth-child(even) td { background: var(--bg2); }
body.dark-mode .post-content .key-takeaways {
  background: var(--blue-light);
  border-color: rgba(77,142,247,0.2);
}
body.dark-mode .post-content .key-takeaways h4 { color: var(--blue2); }

/* ── Author bio ── */
body.dark-mode .author-bio {
  background: var(--bg2);
  border-color: var(--border);
}
body.dark-mode .author-bio-name { color: var(--text); }
body.dark-mode .author-bio-text { color: var(--text2); }

/* ── Related posts ── */
body.dark-mode .related-posts { border-top-color: var(--border); }

/* ── Pagination ── */
body.dark-mode .pagination a,
body.dark-mode .pagination span {
  border-color: var(--border);
  color: var(--text2);
  background: var(--bg2);
}
body.dark-mode .pagination a:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-light);
}
body.dark-mode .pagination .current {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* ── Footer ── */
body.dark-mode .site-footer { background: #0D0F14; }
body.dark-mode .footer-bottom { border-top-color: rgba(255,255,255,0.06); }

/* ── Mobile nav overlay ── */
body.dark-mode #mobileNav {
  background: var(--bg2);
  border-top-color: var(--border);
}
body.dark-mode #mobileNav a { color: var(--text2); }
body.dark-mode #mobileNav a:hover { color: var(--blue); }

/* ── Search results / archive pages ── */
body.dark-mode .search-no-results,
body.dark-mode .archive-header { color: var(--text); }

/* ── 404 page ── */
body.dark-mode .error-page { color: var(--text); }

/* ── Page-specific sections (fastwrite, yuktiastro, voicelime) ── */
body.dark-mode section,
body.dark-mode .page-section {
  background: inherit;
  color: var(--text);
}
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background: var(--bg2);
  border-color: var(--border);
  color: var(--text);
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder { color: var(--text3); }
body.dark-mode input:focus,
body.dark-mode textarea:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 3px var(--blue-glow);
}

/* ── Inline & utility ── */
body.dark-mode hr { border-color: var(--border); }
body.dark-mode mark {
  background: rgba(77,142,247,0.2);
  color: var(--blue2);
}

.ainz-email-capture {
  background: #1a1d27 !important;
  border: 1px solid #2e3144 !important;
  border-left: 4px solid #6366f1 !important;
  padding: 24px 28px !important;
  margin-bottom: 36px !important;
  border-radius: 14px !important;
}

.ainz-email-capture .ml-form-embedContainer,
.ainz-email-capture .ml-form-embedWrapper,
.ainz-email-capture .ml-form-embedBody,
.ainz-email-capture .ml-form-embedContent {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.ainz-email-capture input[type="email"] {
  background: #13151a !important;
  border: 1px solid #2e3144 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 0.9rem !important;
  width: 100% !important;
}

.ainz-email-capture .ml-form-embedSubmit,
.ainz-email-capture .ml-form-embedSubmit button {
  text-align: left !important;
  display: block !important;
  width: auto !important;
  margin-left: 0 !important;
}

.ainz-email-capture button[type="submit"] {
  background: #6366f1 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  margin-top: 8px !important;
  display: inline-block !important;
}

.ainz-email-capture h4,
.ainz-email-capture p.ml-form-embedContent {
  display: none !important;
}

.ainz-email-capture {
  background: var(--blue-light) !important;
  border: 1px solid var(--border) !important;
  border-left: 4px solid var(--blue) !important;
  padding: 24px 28px !important;
  margin-bottom: 36px !important;
  border-radius: var(--r2) !important;
}

.ainz-email-capture input[type="email"] {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--r) !important;
  padding: 10px 14px !important;
  font-size: 0.9rem !important;
  width: 100% !important;
}

.ainz-email-capture button[type="submit"] {
  background: var(--blue) !important;
  color: var(--white) !important;
}

.ainz-email-capture button[type="submit"]:hover {
  background: var(--blue2) !important;
}

/* ══════════════════════════════════════════════════════════
   MOBILE FIXES — COMPREHENSIVE
   ══════════════════════════════════════════════════════════ */

/* ── Global touch improvements ── */
* { -webkit-tap-highlight-color: transparent; }
button, a, [role="button"] { touch-action: manipulation; }

/* ── Header: hide dark toggle label on small screens, keep toggle visible ── */
@media(max-width:960px) {
  /* Dark toggle moves to the right of hamburger at mobile */
  .dark-toggle { padding: 5px 8px; gap: 5px; }
  #darkLabel { display: none; } /* hide "Dark"/"Light" text label, keep toggle track */
}
@media(max-width:380px) {
  /* Very small phones: shrink logo a bit */
  .site-logo { font-size: 1rem; }
  .header-inner { padding: 0 16px; gap: 10px; }
  .container { padding: 0 16px; }
}

/* ── Mobile nav: use classes instead of relying on inline style vars ── */
#mobileNav {
  background: var(--white);
  border-top: 1px solid var(--border);
}
#mobileNav a {
  color: var(--text2);
  padding: 10px 0;
  display: block;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  transition: color 0.2s;
}
#mobileNav a:last-child { border-bottom: none; }
#mobileNav a:hover, #mobileNav a:active { color: var(--blue); }

/* ── Ticker: hide label on tiny screens ── */
@media(max-width:400px) {
  .ticker-label { display: none; }
  .ticker-inner { padding: 0 16px; }
}

/* ── Hero: responsive image height ── */
@media(max-width:540px) {
  .hero-featured-img,
  .hero-featured-placeholder { height: 220px; }
  .hero-featured-body { padding: 18px; }
  .hero { padding: 28px 0; }
}

/* ── Hero meta: wrap gracefully, hide separating dots on small screens ── */
@media(max-width:500px) {
  .hero-featured-meta { flex-wrap: wrap; gap: 6px; }
  .hero-featured-meta .dot { display: none; }
}

/* ── Category pills: horizontal scroll on small screens ── */
.cat-strip {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  padding-bottom: 8px;
  margin-bottom: 16px;
}
.cat-strip::-webkit-scrollbar { display: none; }
/* Re-enable wrapping on larger screens */
@media(min-width:600px) {
  .cat-strip { flex-wrap: wrap; overflow-x: visible; padding-bottom: 24px; margin-bottom: 0; }
}
.cat-pill { flex-shrink: 0; }

/* ── Single post layout: move sidebar below content on mobile ── */
@media(max-width:1023px) {
  .single-layout {
    grid-template-columns: 1fr !important;
  }
  .single-layout aside {
    display: none !important; /* JS handles this but ensure CSS backs it up */
  }
}

/* ── Single post meta: tighten on small screens ── */
@media(max-width:600px) {
  .single-meta { gap: 8px; }
  .meta-sep { display: none; }
  .single-title { letter-spacing: -0.02em; }
}

/* ── Post card wide: give image a proper height when stacked ── */
@media(max-width:640px) {
  .post-card-wide .post-card-img { height: 200px; min-height: 200px; }
}

/* ── Section strip: prevent overflow on mobile ── */
@media(max-width:480px) {
  .section-strip { padding: 20px 0 14px; }
  .section-strip-title { font-size: 0.9375rem; }
  .section-badge { font-size: 0.625rem; padding: 4px 9px; }
}

/* ── Explainer band: reduce padding on mobile ── */
@media(max-width:540px) {
  .explainer-band { padding: 40px 0; }
  .explainer-band::before { font-size: 12rem; }
}

/* ── Post content: ensure pre/code doesn't overflow ── */
.post-content pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.post-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media(max-width:600px) {
  .post-content { font-size: 1rem; }
  .post-content h2 { font-size: 1.25rem; }
  .post-content h3 { font-size: 1rem; }
  .post-content blockquote { padding: 14px 16px; font-size: 1rem; }
}

/* ── Author bio: stack on mobile ── */
@media(max-width:480px) {
  .author-bio { flex-direction: column; padding: 20px; }
}

/* ── Pagination: tighten on mobile ── */
@media(max-width:480px) {
  .pagination { gap: 4px; }
  .pagination a, .pagination span { min-width: 36px; height: 36px; font-size: 0.8125rem; }
}

/* ── Footer: reduce padding on mobile ── */
@media(max-width:480px) {
  .site-footer { padding: 40px 0 0; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ── Posts grid gap tightened on small screens ── */
@media(max-width:540px) {
  .posts-grid { gap: 16px; }
  .posts-section { padding: 32px 0; }
}

/* ── Topics section: ensure 2-col on very small screens ── */
@media(max-width:360px) {
  .topics-grid { grid-template-columns: 1fr; }
}

/* ── Related grid on mobile ── */
@media(max-width:540px) {
  .related-grid { grid-template-columns: 1fr; gap: 14px; }
}


/* ── Mobile nav menu (class-based, dark mode safe) ── */
.mobile-nav-menu {
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 12px 28px 16px;
  flex-direction: column;
  gap: 0;
}
@media(max-width:380px) {
  .mobile-nav-menu { padding: 10px 16px 14px; }
}