/* ==========================================================================
   Article template -- shared editorial system for standard WordPress Posts.
   Scoped to is_singular('post') only (see functions.php). Styles plain
   semantic tags (h2/h3/p/table/code/ul/ol) so any post's the_content()
   output inherits this automatically -- no special markup required, so
   future posts get the same treatment without per-post classes.
   Visual language matches the site's established editorial pillar pages
   (navy hero, mono technical eyebrow, bordered section rhythm, bordered
   tables, light technical code panels). No gradients, no large shadows.
   ========================================================================== */

.article{background:var(--bg);color:var(--ink)}

/* ---- hero ---- */
.article-hero{background:var(--navy);color:#fff;padding:92px 0 28px}
.article-hero-inner{max-width:850px;margin:0 auto;padding:0 32px}
.article-crumb{display:flex;flex-wrap:wrap;align-items:center;font-size:12.5px;color:#8598B8;margin:0 0 14px}
.article-crumb a{color:#8598B8;text-decoration:none}
.article-crumb a:hover{color:#fff}
.article-crumb a:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.article-crumb span[aria-hidden]{margin:0 8px}
.article-kicker{display:block;font:700 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:#6FDBCC;margin:0 0 14px}
.article-hero h1{font-size:clamp(26px,2.9vw,33px);line-height:1.14;letter-spacing:-.015em;margin:0;max-width:26ch;text-wrap:balance;color:#fff}

/* ---- shell / doc column ---- */
.article-shell{max-width:850px;margin:0 auto;padding:36px 32px 72px}
.article-intro-marker{display:block;font:700 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin:0 0 18px}
.article-featured-image{margin:0 0 32px;line-height:0}
.article-featured-image img{display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:8px}
.article-doc{max-width:100%;min-width:0}
.article-doc>*:first-child{margin-top:0!important;padding-top:0!important;border-top:0!important}

.article-doc h2{font-size:clamp(19px,2.1vw,24px);line-height:1.24;letter-spacing:-.01em;color:var(--navy);margin:40px 0 16px;padding-top:40px;border-top:1px solid var(--border);scroll-margin-top:24px}
.article-doc h3{font-size:15.5px;color:var(--ink);margin:26px 0 10px;padding-top:16px;border-top:1px solid var(--border);scroll-margin-top:24px}
.article-doc p{font-size:16px;line-height:1.72;color:var(--ink);margin:0 0 15px}
.article-doc a{color:var(--blue)}
.article-doc a:hover{text-decoration:underline}
.article-doc a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px}

.article-doc ul,.article-doc ol{margin:0 0 15px;padding-left:22px;font-size:15.5px;line-height:1.72;color:var(--ink)}
.article-doc li{margin:8px 0}

/* ---- figures (article images) ---- */
.article-doc figure.article-figure{margin:28px 0}
.article-doc figure.article-figure img{display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:8px}
.article-doc figure.article-figure figcaption{margin-top:10px;font-size:13px;line-height:1.5;color:var(--muted)}
/* ---- inline code (not inside a <pre> block) ---- */
.article-doc :not(pre)>code{font:600 .86em var(--font-mono);background:#ECEFF4;border:1px solid var(--border);border-radius:5px;padding:1px 5px;word-break:break-word}

/* ---- code blocks: standalone worked-example lines / formulas ---- */
.article-doc pre{background:var(--white);border:1px solid var(--border);border-radius:8px;padding:14px 16px;margin:0 0 15px;overflow-x:auto}
.article-doc pre code{font:600 13.5px/1.6 var(--font-mono);background:none;border:0;padding:0;color:var(--navy);white-space:pre}

/* ---- tables: display:block + overflow-x:auto on the table itself keeps
   horizontal scroll contained to the table without needing a wrapper div
   (which would require touching the stored post content) ---- */
.article-doc table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;border:1px solid var(--border);border-radius:var(--radius-sm);margin:20px 0 15px;font-size:13px;background:var(--white)}
.article-doc th,.article-doc td{text-align:left;padding:11px 14px;line-height:1.5;border-bottom:1px solid var(--border);vertical-align:top}
.article-doc thead th{background:#F0F3F7;color:var(--navy);font:700 10.5px/1.3 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.article-doc tbody tr:last-child th,.article-doc tbody tr:last-child td{border-bottom:0}
.article-doc td code,.article-doc th code{white-space:nowrap}

/* ---- reduced motion: no animation exists here, nothing to guard ---- */

/* ---- responsive ---- */
@media (max-width:720px){
	.article-hero{padding:84px 0 24px}
	.article-shell{padding:28px 20px 48px}
	.article-doc h2{padding-top:28px;margin-top:28px}
}

@media (max-width:560px){
	.article-doc .ipv4-bit{width:12px;height:17px;font-size:8px}
	.article-doc .ipv4-bar-row{flex-direction:column;align-items:flex-start;gap:4px}
	.article-doc .ipv4-bar-row-label{width:auto}
	.article-doc .ipv4-bar-track{width:100%;height:auto;min-height:0;padding:4px}
	.article-doc .ipv4-bar{position:static;display:block;width:100% !important;left:auto !important;white-space:normal;font-size:10.5px;line-height:1.4;padding:5px 8px;text-align:center}
}
/* ---- IPv4/IPv6 guide diagrams -- scoped, reusable for any future post.
   Zero JS, inline-style percentages used only where the position is
   genuinely data-driven (the overlap bar). ---- */
.article-doc .ipv4-fig{margin:28px 0;padding:20px 22px;border:1px solid var(--border);border-radius:9px;background:var(--white)}
.article-doc .ipv4-fig-label{display:block;font:700 11px/1 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}

.article-doc .ipv4-bits{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:4px}
.article-doc .ipv4-octet{display:flex;flex-direction:column;align-items:center;gap:6px}
.article-doc .ipv4-octet-bits{display:flex;gap:2px}
.article-doc .ipv4-bit{width:16px;height:22px;display:flex;align-items:center;justify-content:center;font:700 10px/1 var(--font-mono);border-radius:3px;background:#ECEFF4;color:var(--muted)}
.article-doc .ipv4-bit.is-network{background:var(--teal);color:#fff}
.article-doc .ipv4-octet-value{font:700 13px/1 var(--font-mono);color:var(--navy)}
.article-doc .ipv4-octet-label{font-size:10px;color:var(--muted)}
.article-doc .ipv4-fig-legend{display:flex;gap:18px;margin-top:14px;font-size:12px;color:var(--muted)}
.article-doc .ipv4-fig-legend span{display:inline-flex;align-items:center;gap:6px}
.article-doc .ipv4-fig-legend i{width:10px;height:10px;border-radius:2px;background:#ECEFF4;display:inline-block;font-style:normal}
.article-doc .ipv4-fig-legend i.is-network{background:var(--teal)}

.article-doc .ipv4-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.article-doc .ipv4-cell{border:1px solid var(--border);border-radius:7px;padding:12px 14px;background:var(--bg)}
.article-doc .ipv4-cell.is-reserve{background:var(--white);border-style:dashed}
.article-doc .ipv4-cell-cidr{display:block;font:700 13px/1.3 var(--font-mono);color:var(--navy);margin-bottom:6px}
.article-doc .ipv4-cell-range{display:block;font:600 11.5px/1.4 var(--font-mono);color:var(--muted);margin-bottom:4px}
.article-doc .ipv4-cell-meta{display:block;font-size:11px;color:var(--muted)}

.article-doc .ipv4-bar-rows{display:flex;flex-direction:column;gap:10px}
.article-doc .ipv4-bar-row{display:flex;align-items:center;gap:14px}
.article-doc .ipv4-bar-row-label{flex:none;width:150px;font:600 11.5px/1.3 var(--font-mono);color:var(--ink)}
.article-doc .ipv4-bar-track{position:relative;height:40px;flex:1;border:1px solid var(--border);border-radius:7px;background:var(--bg);overflow:hidden;min-width:0}
.article-doc .ipv4-bar{position:absolute;top:4px;bottom:4px;border-radius:5px;display:flex;align-items:center;justify-content:center;font:700 10.5px/1 var(--font-mono);color:#fff;padding:0 6px;overflow:hidden;white-space:nowrap}
.article-doc .ipv4-bar.is-a{background:#7FB0F5}
.article-doc .ipv4-bar.is-b{background:var(--teal)}

.article-doc .ipv4-funnel{display:flex;flex-direction:column;gap:6px}
.article-doc .ipv4-funnel-item{border:1px solid var(--border);border-left:3px solid #7FB0F5;border-radius:6px;padding:9px 14px;font:600 12.5px/1.3 var(--font-mono);color:var(--ink);background:var(--bg)}
.article-doc .ipv4-funnel-result{margin-top:4px;border:1px solid var(--teal);border-left:3px solid var(--teal);border-radius:6px;padding:11px 14px;font:700 13.5px/1.3 var(--font-mono);color:var(--navy);background:#E4F5EE}