/**
 * Dzin.pro — 2026 magazine blog-article design.
 * Ported from operator-approved artifact d29b7c7e
 * (reference: wordpress/design/blog-article-redesign-2026.html).
 * Loaded only on single posts via functions.php.
 */

/* ===== Fonts (Manrope, bundled locally — no external CDN, CSP-safe) ===== */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/manrope/manrope-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/manrope/manrope-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/manrope/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/manrope/manrope-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ===== Reset within our root ===== */
.dzb-root, .dzb-root * { box-sizing: border-box; }
body.dzin-blog-2026 { margin: 0; background: #0a2540; }
.dzb-root {
	position: relative; width: 100%; max-width: 1440px; margin: 0 auto;
	font-family: 'Manrope', system-ui, -apple-system, sans-serif;
	background: #0a2540; overflow: hidden; color: #b9cbe2;
	container-type: inline-size;
}
/* Base link colour at ZERO specificity (:where) so every component class
   (.dzb-btn-o, .dzb-nl, …) wins without !important. */
:where(.dzb-root a) { color: #5fa0ff; }
.dzb-pad { padding-left: 72px; padding-right: 72px; }

/* ===== Reading progress ===== */
.dzb-progress { position: sticky; top: 0; left: 0; height: 3px; width: 100%; background: transparent; z-index: 80; }
.dzb-progress__bar { display: block; height: 100%; width: 0%; background: linear-gradient(90deg,#F57C1A,#1A6EF5); }

/* ===== Nav ===== */
.dzb-nav { display: flex; align-items: center; justify-content: space-between; padding-top: 22px; padding-bottom: 22px; position: relative; z-index: 40; }
.dzb-logo { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.dzb-logo__txt { font-weight: 800; font-size: 24px; letter-spacing: -0.01em; }
.dzb-logo__txt .a { color: #fff; }
.dzb-logo__txt .b { color: #5fa0ff; }
.dzb-nav__menu { display: flex; align-items: center; gap: 30px; }
.dzb-nl { color: #cfe0f5; font-size: 15px; font-weight: 600; text-decoration: none; transition: color .15s; display: inline-flex; align-items: center; gap: 6px; }
.dzb-nl:hover { color: #fff; }
.dzb-nl--active { color: #fff; }
.dzb-has-dd { position: relative; }
.dzb-dd { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); min-width: 320px; background: #fff; border-radius: 14px; padding: 10px; box-shadow: 0 24px 50px rgba(0,0,0,0.35); opacity: 0; visibility: hidden; transition: opacity .16s, transform .16s; z-index: 50; }
.dzb-has-dd:hover .dzb-dd { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(6px); }
.dzb-ddi { display: block; color: #0a2540; font-weight: 700; font-size: 15px; text-decoration: none; padding: 12px 14px; border-radius: 9px; }
.dzb-ddi--on, .dzb-ddi:hover { background: #eef4ff; color: #1A6EF5; }
.dzb-burger { display: none; position: relative; }
.dzb-burger > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 11px; }
.dzb-burger > summary::-webkit-details-marker { display: none; }
.dzb-burger .dzb-mobile { position: absolute; top: 56px; right: 0; left: auto; min-width: 240px; display: none; flex-direction: column; gap: 2px; background: #0c2140; border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; padding: 10px; box-shadow: 0 24px 50px rgba(0,0,0,0.45); z-index: 60; }
.dzb-burger[open] .dzb-mobile { display: flex; }
.dzb-mobile a { color: #cfe0f5; text-decoration: none; font-weight: 600; font-size: 15px; padding: 13px 12px; border-radius: 9px; }
.dzb-mobile a:hover { background: rgba(255,255,255,0.06); color: #fff; }

/* ===== Hero ===== */
.dzb-hero { position: relative; padding-top: 16px; padding-bottom: 52px; overflow: hidden; background: radial-gradient(90% 120% at 82% 0%, rgba(245,124,26,0.18) 0%, rgba(10,37,64,0) 55%), linear-gradient(180deg,#0a2540 0%,#0c2d57 100%); }
.dzb-hero__inner { max-width: 1064px; margin: 0 auto; }
.dzb-crumbs { display: flex; align-items: center; gap: 9px; color: #7f9bc0; font-size: 13px; font-weight: 600; margin-bottom: 28px; flex-wrap: wrap; }
.dzb-crumbs a { color: #7f9bc0; text-decoration: none; }
.dzb-crumbs a:hover { color: #fff; }
.dzb-crumbs__cur { color: #cfe0f5; }
.dzb-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(245,124,26,0.14); color: #ffb877; font-weight: 700; font-size: 13px; padding: 6px 13px; border-radius: 999px; }
.dzb-tag__dot { width: 7px; height: 7px; border-radius: 50%; background: #ffb877; }
.dzb-h1 { margin: 20px 0 0; color: #fff; font-weight: 800; font-size: 48px; line-height: 1.08; letter-spacing: -0.03em; max-width: 920px; text-wrap: balance; }
.dzb-dek { margin: 20px 0 0; color: #a9c0dc; font-size: 19px; line-height: 1.6; max-width: 760px; }
.dzb-byline { display: flex; align-items: center; gap: 18px; margin-top: 28px; flex-wrap: wrap; }
.dzb-byline__author { display: flex; align-items: center; gap: 12px; }
.dzb-avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg,#1A6EF5,#0d4fc4); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 16px; }
.dzb-byline__name { color: #fff; font-weight: 700; font-size: 15px; }
.dzb-byline__role { color: #7f9bc0; font-size: 13px; }
.dzb-byline__sep { width: 1px; height: 32px; background: rgba(255,255,255,0.12); }
.dzb-byline__meta { color: #9db4d0; font-size: 14px; font-weight: 600; }
.dzb-checked { display: inline-flex; align-items: center; gap: 7px; background: rgba(79,208,138,0.12); border: 1px solid rgba(79,208,138,0.3); color: #7ff0b8; font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: 999px; }

/* ===== Key facts ===== */
.dzb-facts-wrap { background: #0a2540; padding-top: 32px; }
.dzb-facts { max-width: 1064px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.dzb-fact { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 20px 22px; }
.dzb-fact__v { font-weight: 800; font-size: 26px; letter-spacing: -0.01em; }
.dzb-fact__v--orange { color: #ffb877; }
.dzb-fact__v--mint { color: #7ff0b8; }
.dzb-fact__v--white { color: #fff; }
.dzb-fact__v--blue { color: #5fa0ff; }
.dzb-fact__l { color: #9db4d0; font-size: 13px; margin-top: 4px; }

/* ===== Body + columns ===== */
.dzb-body-wrap { background: #0a2540; padding-top: 44px; padding-bottom: 72px; }
.dzb-cols { display: grid; grid-template-columns: minmax(0,720px) 320px; gap: 56px; justify-content: center; align-items: start; max-width: 1096px; margin: 0 auto; }

/* Article typography (renders the_content) */
.dzb-art > p:first-child { font-size: 20px; color: #cfe0f5; line-height: 1.7; }
.dzb-art p { margin: 0 0 18px; color: #b9cbe2; font-size: 18px; line-height: 1.75; }
.dzb-art li { color: #b9cbe2; font-size: 18px; line-height: 1.68; }
.dzb-art ul, .dzb-art ol { margin: 0 0 18px; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.dzb-art strong, .dzb-art b { color: #fff; font-weight: 700; }
/* Body-text links only (unclassed) — classed elements (CTA buttons) keep their own colour. */
.dzb-art a:not([class]) { color: #5fa0ff; text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(95,160,255,0.35); }
.dzb-art a:not([class]):hover { color: #9cc4ff; }
.dzb-art h3 { margin: 26px 0 12px; color: #e8f0fb; font-weight: 800; font-size: 21px; letter-spacing: -0.01em; }

/* Numbered H2 sections (auto counter) */
.dzb-art { counter-reset: dzb-sec; }
.dzb-art h2 { margin: 42px 0 18px; color: #fff; font-weight: 800; font-size: 28px; letter-spacing: -0.02em; display: flex; align-items: flex-start; gap: 14px; scroll-margin-top: 24px; }
.dzb-art h2::before {
	counter-increment: dzb-sec; content: counter(dzb-sec,decimal-leading-zero);
	flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
	background: rgba(245,124,26,0.16); border: 1px solid rgba(245,124,26,0.4);
	color: #ffb877; font-size: 16px; display: flex; align-items: center; justify-content: center;
}
.dzb-art h2.dzb-no-num::before { display: none; }

/* Reusable body components (authored via classes in post HTML) */
.dzb-callout { border-left: 3px solid #F57C1A; background: rgba(245,124,26,0.07); border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 0 0 18px; }
.dzb-callout p { margin: 0 0 10px; font-size: 16px; color: #cfe0f5; }
.dzb-callout p:last-child { margin: 0; }
.dzb-checklist { background: rgba(95,160,255,0.06); border: 1px solid rgba(95,160,255,0.22); border-radius: 18px; padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; }
.dzb-checklist__i { display: flex; gap: 13px; }
.dzb-checklist__i::before { content: "✓"; flex-shrink: 0; color: #7ff0b8; font-weight: 800; }
.dzb-checklist__i span { color: #cfe0f5; font-size: 16px; line-height: 1.55; }

/* CTA card (in-body) */
.dzb-cta { background: linear-gradient(160deg,rgba(245,124,26,0.16),rgba(217,100,10,0.1)); border: 1px solid rgba(245,124,26,0.3); border-radius: 18px; padding: 28px; margin: 30px 0; }
.dzb-cta--solid { background: linear-gradient(160deg,#F57C1A 0%,#d9640a 100%); border: none; box-shadow: 0 24px 60px rgba(245,124,26,0.3); }
.dzb-cta__ttl { color: #fff; font-weight: 800; font-size: 20px; letter-spacing: -0.01em; }
.dzb-cta p { margin: 12px 0 0; color: #b9cbe2; font-size: 15px; line-height: 1.6; }
.dzb-cta--solid p { color: #fff; opacity: 0.95; }
.dzb-cta__row { display: flex; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.dzb-btn-o { background: #F57C1A; color: #fff; font-weight: 700; font-size: 15px; padding: 13px 24px; border-radius: 11px; text-decoration: none; border-bottom: none; transition: filter .15s; }
.dzb-cta--solid .dzb-btn-o { background: #0a2540; }
.dzb-btn-o:hover { filter: brightness(1.06); color: #fff; }
.dzb-cta__tg { color: #5fa0ff; font-weight: 700; font-size: 15px; text-decoration: none; border-bottom: none; }
.dzb-cta--solid .dzb-cta__tg { color: #fff; }

/* FAQ accordion (post uses <details class="dzb-faq">) */
.dzb-faq { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 20px 24px; margin: 0 0 12px; }
.dzb-faq > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #fff; font-weight: 700; font-size: 17px; }
.dzb-faq > summary::-webkit-details-marker { display: none; }
.dzb-faq > summary::after { content: "+"; color: #F57C1A; font-size: 24px; line-height: 1; transition: transform .2s; }
.dzb-faq[open] > summary::after { transform: rotate(45deg); }
.dzb-faq p { margin: 14px 0 0; font-size: 15px; line-height: 1.65; color: #b9cbe2; }

/* ===== Sidebar ===== */
/* Sticky sidebar: cap to viewport so a tall sidebar (TOC + 2 CTA cards) never
   clips its lower cards below the fold — overflow scrolls internally instead. */
.dzb-side { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; display: flex; flex-direction: column; gap: 18px; }
.dzb-side::-webkit-scrollbar { width: 7px; }
.dzb-side::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 4px; }
.dzb-toc-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; padding: 24px; }
.dzb-toc-card__ttl { color: #ffb877; font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
.dzb-toc { display: flex; flex-direction: column; }
.dzb-toc a { display: flex; gap: 11px; color: #9db4d0; font-size: 14px; font-weight: 600; text-decoration: none; padding: 9px 0; line-height: 1.4; transition: color .15s; }
.dzb-toc a:hover, .dzb-toc a.dzb-active { color: #fff; }
.dzb-toc__n { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; transition: all .15s; }
.dzb-toc a:hover .dzb-toc__n, .dzb-toc a.dzb-active .dzb-toc__n { background: #F57C1A; color: #fff; border-color: #F57C1A; }
.dzb-side-cta { border-radius: 18px; padding: 24px; background: linear-gradient(160deg,#F57C1A 0%,#d9640a 100%); box-shadow: 0 20px 44px rgba(245,124,26,0.28); }
.dzb-side-cta__ttl { color: #fff; font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.dzb-side-cta p { margin: 10px 0 0; color: #fff; opacity: 0.92; font-size: 14px; line-height: 1.55; }
.dzb-side-cta__price { display: flex; align-items: baseline; gap: 7px; margin-top: 16px; color: #fff; font-weight: 800; }
.dzb-side-cta__price span { font-size: 32px; line-height: 1; }
.dzb-side-cta__btn { display: block; text-align: center; margin-top: 16px; background: #fff; color: #d9640a; font-weight: 700; font-size: 15px; padding: 13px; border-radius: 11px; text-decoration: none; }

/* ===== Related ===== */
.dzb-related { background: #0c2d57; padding-top: 66px; padding-bottom: 66px; }
.dzb-related__inner { max-width: 1064px; margin: 0 auto; }
.dzb-related h2 { margin: 0 0 30px; color: #fff; font-weight: 800; font-size: 30px; letter-spacing: -0.02em; }
.dzb-rel-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.dzb-acard { text-decoration: none; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; transition: transform .18s, border-color .18s, background .18s; }
.dzb-acard:hover { transform: translateY(-4px); border-color: rgba(245,124,26,0.4); background: rgba(255,255,255,0.06); }
.dzb-acard__tag { font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 999px; background: rgba(245,124,26,0.14); color: #ffb877; align-self: flex-start; }
.dzb-acard__ttl { margin: 14px 0 0; color: #fff; font-weight: 700; font-size: 17px; line-height: 1.32; }
.dzb-acard__more { color: #5fa0ff; font-size: 14px; font-weight: 600; margin-top: auto; padding-top: 16px; }

/* ===== Footer ===== */
.dzb-footer { background: #06192e; padding: 56px 72px 36px; }
.dzb-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.dzb-footer h4 { color: #fff; font-weight: 700; font-size: 15px; margin: 0 0 14px; }
.dzb-footer__col { display: flex; flex-direction: column; gap: 10px; }
.dzb-footer a { color: #9db4d0; font-size: 14px; text-decoration: none; }
.dzb-footer a:hover { color: #fff; }
.dzb-footer__about { color: #6f88a8; font-size: 14px; line-height: 1.6; max-width: 300px; margin: 16px 0 0; }
.dzb-footer__logo { display: flex; align-items: center; gap: 11px; }
.dzb-footer__copy { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); color: #5a728f; font-size: 13px; }

/* ===== Responsive (container queries) ===== */
@container (max-width: 980px) {
	.dzb-cols { grid-template-columns: 1fr; }
	.dzb-side { position: static; order: -1; max-height: none; overflow: visible; }
	.dzb-facts { grid-template-columns: 1fr 1fr; }
	.dzb-rel-grid { grid-template-columns: 1fr; }
	.dzb-foot-grid { grid-template-columns: 1fr 1fr; }
}
@container (max-width: 760px) {
	.dzb-nav__menu { display: none; }
	.dzb-burger { display: flex; }
	.dzb-pad { padding-left: 22px; padding-right: 22px; }
	.dzb-footer { padding-left: 22px; padding-right: 22px; }
	.dzb-facts { grid-template-columns: 1fr; }
	.dzb-h1 { font-size: 32px; }
	.dzb-foot-grid { grid-template-columns: 1fr; }
}