/* Vocabcord Blog — shared stylesheet */

/* === Design tokens === */
:root{--coral:#EA3323;--coral-dark:#BB291C;--coral-glow:rgba(234,51,35,.15);--emerald:#2ec862;--ink:#14100c;--ink-soft:#3a3530;--sand:#f5f0e9;--sand-dark:#ebe3d7;--white:#fff;--muted:#8a827a;--shadow:none;--radius:14px;--radius-lg:20px;--font-stack:-apple-system,BlinkMacSystemFont,"SF Pro Rounded",ui-rounded,"Avenir Next","Helvetica Neue",Arial,sans-serif;--font-rounded:"SF Pro Rounded",ui-rounded,-apple-system,BlinkMacSystemFont,"Avenir Next Rounded","Nunito","Helvetica Neue",Arial,sans-serif}

/* === Reset === */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{font-family:var(--font-stack);color:var(--ink);background-color:var(--sand);background-image:linear-gradient(180deg,var(--white) 0%,var(--white) 22%,var(--sand) 100%);background-repeat:no-repeat;background-size:100% 800px;line-height:1.55;font-size:17px;min-height:100vh;display:flex;flex-direction:column}
/* Sticky-footer pattern: .page grows to fill vertical space when content
   is shorter than the viewport, pushing the footer to the bottom. When
   content is naturally tall, .page takes its content height and footer
   sits below with its own margin. */
.page{flex:1}
a{color:var(--coral);text-decoration:none;font-weight:600;transition:color .15s ease}
a:hover{color:var(--coral-dark)}

/* === Layout === */
.container{max-width:780px;margin:0 auto;padding:0 24px}

/* === Nav === */
/* Match homepage's .nav: padding 24px 0 (was 28px 0 0). Without the
   matching bottom padding, the brand + nav-links sit ~20px higher on
   blog/support than on the homepage, causing a visible "jump" when
   navigating between pages. */
.nav{padding:24px 0}
.nav-inner{display:flex;align-items:center;gap:12px}
.brand{font-family:var(--font-rounded);font-weight:900;font-size:22px;color:var(--ink);letter-spacing:-.02em;display:flex;align-items:center;margin-right:auto}
.brand:hover{color:var(--ink)}
.brand-icon{width:32px;height:32px;border-radius:7px;margin-right:10px;object-fit:cover;flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:16px;font-size:15px}
.nav-links a{color:var(--ink-soft);font-weight:500}
.nav-links a:hover{color:var(--coral)}

/* === Lang switcher === */
.lang-switcher{position:relative;display:flex;align-items:center}
.lang-btn{background:none;border:1px solid var(--sand-dark);border-radius:8px;padding:4px 10px;cursor:pointer;color:var(--ink-soft);display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;font-family:var(--font-stack);line-height:1;transition:border-color .15s,color .15s}
.lang-btn:hover{border-color:var(--coral);color:var(--coral)}
.lang-btn svg{display:block;flex-shrink:0}
.lang-menu{display:none;position:absolute;top:calc(100% + 4px);right:0;background:var(--white);border:1px solid var(--sand-dark);border-radius:12px;padding:6px 0;min-width:140px;box-shadow:0 8px 24px rgba(0,0,0,.08);z-index:100}
.lang-menu::before{content:'';position:absolute;top:-8px;left:0;right:0;height:8px}
.lang-switcher:hover .lang-menu,.lang-switcher.open .lang-menu{display:block}
.lang-menu a{display:block;padding:7px 16px;font-size:14px;font-weight:500;color:var(--ink-soft);white-space:nowrap}
.lang-menu a:hover{background:var(--sand);color:var(--coral)}

/* === Blog language filter === */
.lang-filter{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.lang-filter button{padding:6px 14px;border-radius:99px;font-size:13px;font-weight:600;border:1px solid var(--sand-dark);background:var(--white);color:var(--ink-soft);cursor:pointer;font-family:var(--font-stack);transition:all .15s ease}
.lang-filter button:hover{border-color:var(--coral);color:var(--coral)}
.lang-filter button.active{background:var(--coral);color:#fff;border-color:var(--coral)}

/* === Footer === */
.footer{padding:32px 0 28px;text-align:center;color:rgba(245,240,233,.4);font-size:13px;background:var(--ink);border-top:none;margin-top:60px}
.footer-links{display:flex;justify-content:center;gap:24px;margin-bottom:16px;flex-wrap:wrap}
.footer-links a{color:rgba(245,240,233,.55);font-weight:500}
.footer-links a:hover{color:var(--coral)}
.footer a{color:rgba(245,240,233,.55)}
.footer a:hover{color:var(--coral)}

/* === Page (shared content styling) === */
.page{padding:60px 32px 80px;max-width:680px;margin:0 auto}
.page h1{font-family:var(--font-rounded);font-size:clamp(32px,5vw,44px);font-weight:900;letter-spacing:-.02em;line-height:1.1;margin-bottom:8px}
.page .updated{color:var(--muted);font-size:14px;margin-bottom:36px}
.page h2{font-family:var(--font-rounded);font-size:22px;font-weight:800;margin:36px 0 12px;letter-spacing:-.01em}
.page h3{font-family:var(--font-rounded);font-size:17px;font-weight:800;margin:24px 0 8px}
.page p{margin-bottom:14px;color:var(--ink-soft)}
.page ul{margin:0 0 14px 22px;color:var(--ink-soft)}
.page ol{margin:0 0 14px 22px;color:var(--ink-soft)}
.page li{margin-bottom:6px}
.page strong{color:var(--ink)}
.page code{background:var(--sand-dark);padding:2px 6px;border-radius:4px;font-size:15px}

/* === Blog index === */
.blog-index{display:flex;flex-direction:column;gap:20px;margin-top:32px}
.post-card{display:block;background:var(--white);border:1px solid var(--sand-dark);border-radius:var(--radius);padding:24px 28px;transition:box-shadow .15s ease,transform .15s ease;color:var(--ink)}
.post-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.06);transform:translateY(-2px);color:var(--ink)}
.post-card h2{font-family:var(--font-rounded);font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1.2;margin-bottom:6px;color:var(--ink)}
.post-card .post-excerpt{color:var(--ink-soft);font-size:15px;line-height:1.5;margin-bottom:8px}
.post-card .post-meta{color:var(--muted);font-size:13px}
.post-tag{display:inline-block;background:var(--coral-glow);color:var(--coral);font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px;margin-bottom:10px;letter-spacing:.02em;text-transform:uppercase}

/* === Blog post === */
.breadcrumb{font-size:14px;color:var(--muted);margin-bottom:24px}
.breadcrumb a{color:var(--muted);font-weight:500}
.breadcrumb a:hover{color:var(--coral)}

.post-header{margin-bottom:36px}
.post-header h1{margin-bottom:12px}
.post-meta{color:var(--muted);font-size:14px}

.post-body h2{font-family:var(--font-rounded);font-size:22px;font-weight:800;margin:40px 0 12px;letter-spacing:-.01em;line-height:1.2;color:var(--ink)}
.post-body h3{font-family:var(--font-rounded);font-size:17px;font-weight:800;margin:28px 0 8px;color:var(--ink)}
.post-body p{margin-bottom:16px;color:var(--ink-soft);line-height:1.65}
.post-body ul{margin:0 0 16px 22px;color:var(--ink-soft)}
.post-body ol{margin:0 0 16px 22px;color:var(--ink-soft);line-height:1.65}
.post-body li{margin-bottom:8px}
.post-body strong{color:var(--ink)}
.post-body img{max-width:100%;height:auto;border-radius:var(--radius);margin:20px 0}
.post-body blockquote{border-left:3px solid var(--coral);padding:12px 20px;margin:20px 0;background:var(--coral-glow);border-radius:0 var(--radius) var(--radius) 0}
.post-body blockquote p{margin:0;color:var(--ink-soft)}
.post-body code{background:var(--sand-dark);padding:2px 6px;border-radius:4px;font-size:15px}
.post-body table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px}
.post-body th{text-align:left;font-weight:800;padding:10px 12px;border-bottom:2px solid var(--sand-dark);font-family:var(--font-rounded);color:var(--ink)}
.post-body td{padding:10px 12px;border-bottom:1px solid var(--sand-dark);color:var(--ink-soft)}
.post-body tr:last-child td{border-bottom:none}

/* Table of contents */
.toc{background:var(--white);border:1px solid var(--sand-dark);border-radius:var(--radius);padding:20px 24px;margin:24px 0 36px}
.toc-title{font-family:var(--font-rounded);font-size:15px;font-weight:800;margin-bottom:10px;color:var(--ink)}
.toc ol{margin:0 0 0 20px;color:var(--ink-soft);font-size:15px}
.toc li{margin-bottom:4px}
.toc a{color:var(--ink-soft);font-weight:500}
.toc a:hover{color:var(--coral)}

/* FAQ section */
.faq-section{margin-top:40px}
.faq-section h2{font-family:var(--font-rounded);font-size:22px;font-weight:800;margin-bottom:20px;color:var(--ink)}
.faq-section dt{font-weight:800;font-family:var(--font-rounded);color:var(--ink);margin-top:20px;margin-bottom:6px;font-size:16px}
.faq-section dd{color:var(--ink-soft);margin-bottom:16px;line-height:1.6}

/* CTA box */
.cta-box{background:var(--ink);border-radius:var(--radius);padding:28px 32px;margin:40px 0;text-align:center}
.cta-box p{color:rgba(245,240,233,.85);margin-bottom:14px;font-size:17px;font-family:var(--font-rounded)}
.cta-box strong{color:var(--sand)}
.cta-box a{display:inline-block;background:var(--coral);color:#fff;padding:12px 28px;border-radius:99px;font-weight:800;font-family:var(--font-rounded);font-size:16px;transition:background .15s ease,transform .15s ease}
.cta-box a:hover{background:var(--coral-dark);color:#fff;transform:translateY(-1px)}

/* Related posts */
.related-posts{margin-top:44px;padding-top:32px;border-top:1px solid var(--sand-dark)}
.related-posts h2{font-family:var(--font-rounded);font-size:18px;font-weight:800;margin-bottom:12px;color:var(--ink)}
.related-posts ul{list-style:none;margin:0;padding:0}
.related-posts li{margin-bottom:8px}
.related-posts a{font-weight:600;font-size:15px}

/* === Dark mode === */
html.dark{--coral:#FF6E55;--coral-dark:#EA3323;--coral-glow:rgba(255,110,85,.12);--ink:#f5f0e9;--ink-soft:#d8cfc3;--sand:#14100c;--sand-dark:#1f1a16;--white:#1f1a16;--muted:#8a827a;--shadow:0 2px 24px rgba(0,0,0,.4)}html.dark .post-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.3)}html.dark .cta-box,html.dark .footer{background:#14100c}

/* === Theme toggle === */
.theme-btn{background:none;border:1px solid var(--sand-dark);border-radius:8px;padding:4px 8px;cursor:pointer;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;line-height:1;transition:border-color .15s,color .15s}.theme-btn:hover{border-color:var(--coral);color:var(--coral)}.theme-btn svg{display:block;width:16px;height:16px}html:not(.dark) .theme-sun{display:none}html.dark .theme-moon{display:none}

/* === Hamburger === */
.hamburger{display:none;background:none;border:1px solid var(--sand-dark);border-radius:8px;padding:4px 6px;cursor:pointer;color:var(--ink-soft);align-items:center;justify-content:center;line-height:1;transition:border-color .15s,color .15s}
.hamburger:hover{border-color:var(--coral);color:var(--coral)}
.hamburger svg{display:block}

/* === Floating blog CTA — desktop sidebar === */
.blog-cta-sidebar{display:none;position:fixed;top:50%;transform:translateY(-50%);right:calc((100vw - 680px) / 2 - 200px);width:160px;text-align:center;z-index:40}
.blog-cta-sidebar .cta-qr{width:120px;height:120px;border-radius:14px;background:var(--white);border:1px solid var(--sand-dark);padding:8px;display:block;margin:0 auto}
.blog-cta-sidebar .cta-badge{display:block;width:134px;margin:12px auto 0}
.blog-cta-sidebar .cta-label{font-size:12px;color:var(--muted);margin-top:8px;font-weight:600;letter-spacing:.01em}
@media(min-width:1120px){.blog-cta-sidebar{display:block}}

/* === Floating blog CTA — mobile/tablet bottom banner === */
.blog-cta-banner{display:none;position:fixed;bottom:0;left:0;right:0;z-index:50;background:var(--white);border-top:1px solid var(--sand-dark);padding:10px 16px;box-shadow:0 -2px 16px rgba(0,0,0,.06);align-items:center;justify-content:center;gap:0}
.blog-cta-banner .cta-banner-inner{display:flex;align-items:center;gap:10px;max-width:480px;margin:0 auto;text-decoration:none}
.blog-cta-banner .cta-banner-icon{width:40px;height:40px;border-radius:9px;flex-shrink:0}
.blog-cta-banner .cta-banner-text{flex:1;font-size:14px;color:var(--ink-soft);line-height:1.3}
.blog-cta-banner .cta-banner-text strong{color:var(--ink);font-weight:800;font-family:var(--font-rounded);display:block;font-size:15px}
.blog-cta-banner .cta-banner-btn{background:var(--coral);color:#fff;font-size:14px;font-weight:800;font-family:var(--font-rounded);padding:7px 18px;border-radius:99px;flex-shrink:0;transition:background .15s}
.blog-cta-banner .cta-banner-btn:hover{background:var(--coral-dark)}
.blog-cta-banner .cta-banner-close{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;padding:0 0 0 8px;line-height:1;flex-shrink:0;transition:color .15s}
.blog-cta-banner .cta-banner-close:hover{color:var(--ink-soft)}
@media(max-width:1119px){.blog-cta-banner{display:flex}body{padding-bottom:64px}}
html.dark .blog-cta-banner{box-shadow:0 -2px 16px rgba(0,0,0,.3)}
/* QR codes encode black-on-light — keep the substrate light in dark mode
   so cameras can still resolve the modules. */
html.dark .blog-cta-sidebar .cta-qr{background:#fff;border-color:rgba(255,255,255,.12)}

/* === Mobile === */
@media(max-width:560px){.nav-inner{position:relative}.nav-links{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--white);border:1px solid var(--sand-dark);border-radius:12px;padding:8px 0;flex-direction:column;align-items:stretch;min-width:180px;box-shadow:0 8px 24px rgba(0,0,0,.08);z-index:100;font-size:15px}.nav-links.open{display:flex}.nav-links a{display:block;padding:10px 20px;font-weight:500;color:var(--ink-soft)}.nav-links a:hover{background:var(--sand);color:var(--coral)}.nav-links .theme-btn{margin:4px 12px;border-radius:8px}.hamburger{display:flex}.post-card{padding:20px}.page{padding:40px 20px 60px}}