/* blog-article.css — extracted 1:1 from the Stipendium Hungaricum post so every blog page looks identical.
   Upload to /css/blog-article.css and link it from each post. */
:root { --ink:#18181b; --sub:#52525b; --line:#e4e4e7; --link:#1d4ed8; }
*,*::before,*::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { font-size:16px; scroll-padding-top:80px; }
body { font-family:'DM Sans',sans-serif; color:var(--ink); -webkit-font-smoothing:antialiased; }
h1,h2,h3,.font-display { font-family:'Sora',sans-serif; }

.grid-shell { display:grid; grid-template-columns: minmax(0,160px) minmax(0,1fr) minmax(0,160px); gap:0; max-width:1440px; margin:0 auto; }
@media (max-width:1279px){ .grid-shell { grid-template-columns: 1fr; } }

.ad-slot { display:none; }
@media (min-width:1280px){
    .ad-slot { display:block; }
    .ad-rail { position:sticky; top:100px; width:160px; min-height:60px; }
}

.content-col { padding:0 1.25rem; }
@media (min-width:640px){ .content-col { padding:0 2rem; } }

.layout { display:flex; gap:3rem; max-width:920px; margin:0 auto; }
.layout-side { display:none; }
@media (min-width:1024px){
    .layout { max-width:1040px; }
    .layout-side { display:block; width:220px; flex-shrink:0; }
}

#toc-side { position:sticky; top:96px; }

.side-link { display:block; font-size:13px; line-height:1.5; color:var(--sub); padding:.5rem 0; border-bottom:1px solid var(--line); text-decoration:none; }
.side-link:hover { color:var(--link); }
.side-link:last-child { border-bottom:none; }

.toc-link { display:block; font-size:13px; color:var(--sub); padding:.35rem 0; text-decoration:none; border-left:2px solid transparent; padding-left:.75rem; }
.toc-link:hover, .toc-link.active { color:var(--ink); border-left-color:var(--ink); font-weight:500; }

.prose-article { max-width:680px; }
.prose-article h2 { font-size:1.5rem; font-weight:700; color:var(--ink); margin-top:3rem; margin-bottom:1rem; letter-spacing:-.01em; line-height:1.3; border-top:1px solid var(--line); padding-top:2.25rem; }
.prose-article > h2:first-child { border-top:none; padding-top:0; margin-top:0; }
.prose-article h3 { font-size:1.1rem; font-weight:600; color:var(--ink); margin-top:2rem; margin-bottom:.75rem; }
.prose-article p { font-size:16px; line-height:1.8; color:#3f3f46; margin-bottom:1.25rem; }
.prose-article ul, .prose-article ol { margin:0 0 1.25rem 0; padding-left:1.25rem; }
.prose-article ul { list-style:disc; }
.prose-article ol { list-style:decimal; }
.prose-article li { font-size:16px; line-height:1.75; color:#3f3f46; margin-bottom:.5rem; padding-left:.25rem; }
.prose-article a { color:var(--link); text-decoration:underline; text-underline-offset:2px; }
.prose-article strong { color:var(--ink); font-weight:600; }

table.data-table { width:100%; border-collapse:collapse; font-size:14px; margin:1.5rem 0 2rem 0; }
table.data-table caption { text-align:left; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:.5rem; }
table.data-table th { text-align:left; font-weight:600; color:var(--ink); padding:.6rem .75rem; border-bottom:1px solid var(--ink); }
table.data-table td { padding:.65rem .75rem; border-bottom:1px solid var(--line); color:#3f3f46; vertical-align:top; }
table.data-table tr:last-child td { border-bottom:1px solid var(--line); }

details.faq-item { border-bottom:1px solid var(--line); padding:1rem 0; }
details.faq-item summary { cursor:pointer; list-style:none; font-weight:600; font-size:15px; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:1rem; }
details.faq-item summary::-webkit-details-marker { display:none; }
details.faq-item summary::after { content:'+'; font-size:20px; font-weight:400; color:var(--sub); flex-shrink:0; }
details.faq-item[open] summary::after { content:'–'; }
details.faq-item p { margin-top:.75rem; font-size:14.5px; line-height:1.75; color:var(--sub); }

.tip-item { display:flex; gap:1rem; padding:1.25rem 0; border-bottom:1px solid var(--line); }
.tip-num { font-family:'Sora',sans-serif; font-size:1.5rem; color:#a1a1aa; flex-shrink:0; width:2rem; }
.tip-item:last-child { border-bottom:none; }

.resource-box { background:#F9FAFB; border:1px solid var(--line); border-radius:.6rem; padding:1.25rem 1.5rem; margin:1.75rem 0; }
.resource-box p.resource-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--sub); margin-bottom:.75rem; }
.resource-box ul { margin:0; padding-left:1.1rem; }
.resource-box li { font-size:14.5px; margin-bottom:.4rem; }
.resource-box li:last-child { margin-bottom:0; }

.pullquote { font-family:'Sora',sans-serif; font-size:1.15rem; font-weight:600; color:var(--ink); line-height:1.5; border-left:3px solid var(--ink); padding:.25rem 0 .25rem 1.25rem; margin:1.75rem 0; }

.doc-item { padding:1.1rem 0; border-bottom:1px solid var(--line); }
.doc-item:last-child { border-bottom:none; }
.doc-item p.doc-name { font-size:15px; font-weight:600; color:var(--ink); margin-bottom:.35rem; }
.doc-item p.doc-desc { font-size:14.5px; line-height:1.7; color:var(--sub); margin-bottom:0; }

/* ── Additions for on-page SEO / accessibility (reuse the existing look) ── */
.skip-link { position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:.6rem 1rem; z-index:100; font-size:14px; }
.skip-link:focus { left:1rem; top:1rem; }

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid var(--link); outline-offset:2px; }

.toc-inline a { display:block; min-height:24px; font-size:14.5px; line-height:1.6; margin-bottom:.4rem; }
.toc-inline ol { margin:0; padding-left:1.25rem; }

#back-to-top { position:fixed; right:1rem; bottom:1rem; width:48px; height:48px; border-radius:9999px; background:var(--ink); color:#fff; border:none; font-size:18px; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .2s; z-index:40; }
#back-to-top.show { opacity:1; pointer-events:auto; }
#back-to-top:hover { background:#3f3f46; }
