/* =============================================================
   KASHI OF NORTH — BLOG / NEWS MAGAZINE LAYER
   Shared by single.php, home.php, archive.php (standard WP posts)
   and single-news.php / archive-news.php (News CPT). Layers on top
   of kon-enhance.css / kon-archive.css — only adds classes that
   don't already exist elsewhere in the design system.
   ============================================================= */

/* ── Shared two-column article layout (main + sidebar) ───────── */
.kon-blog-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--kon-space-2xl);
    padding-block: var(--kon-space-xl);
    align-items: start;
}
@media (max-width: 900px) {
    .kon-blog-layout { grid-template-columns: 1fr; }
}
.kon-blog-sidebar {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--kon-space-lg);
    scrollbar-width: thin;
}
@media (max-width: 900px) { .kon-blog-sidebar { position: static; max-height: none; overflow-y: visible; } }

/* ── Article header ────────────────────────────────────────── */
.kon-blog-header { margin-bottom: var(--kon-space-lg); }
.kon-blog-header__meta { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: var(--kon-space-md); }
.kon-blog-header__title {
    font-family: var(--kon-font-serif);
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
    margin: 0 0 var(--kon-space-md);
    color: var(--kon-ink);
}
.kon-blog-header__excerpt {
    font-size: var(--kon-fs-md);
    color: var(--kon-ink-mid);
    line-height: 1.6;
    margin: 0 0 var(--kon-space-md);
    max-width: 68ch;
}
.kon-blog-header__byline {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    font-size: .85rem;
    color: var(--kon-ink-soft);
}
.kon-blog-header__avatar {
    width: 34px; height: 34px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    border: 2px solid var(--kon-white); box-shadow: var(--kon-shadow-xs);
}
.kon-blog-header__avatar--placeholder {
    display: flex; align-items: center; justify-content: center;
    background: var(--kon-pine-light); color: var(--kon-pine);
    font-weight: 700; font-size: .85rem;
}
.kon-blog-header__author { color: var(--kon-ink); font-weight: 600; }
.kon-blog-header__author a { color: inherit; }
.kon-blog-header__sep { opacity: .4; }
.kon-blog-header__readtime { display: inline-flex; align-items: center; gap: .3rem; }
.kon-blog-header__comments { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.kon-blog-header__comments:hover { color: var(--kon-pine-mid); text-decoration: underline; }

/* Byline strip below the hero: share (left) + date/read/comments meta
   (right) sit side by side, replacing the old avatar+name pairing. */
.kon-blog-header__byline--below-hero {
    justify-content: space-between;
    row-gap: .6rem;
}
.kon-blog-header__share {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.kon-blog-header__share-label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--kon-ink-soft); margin-right: .2rem;
}
.kon-blog-header__meta-line {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    font-size: .85rem;
    color: var(--kon-ink-soft);
}
@media (max-width: 640px) {
    .kon-blog-header__byline--below-hero { justify-content: flex-start; }
}

/* Screen-reader-only utility (used to keep author schema markup
   present without duplicating the visible byline). */
.kon-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Share row (horizontal, top + bottom of article) ─────────── */
.kon-share-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin: var(--kon-space-lg) 0;
    padding-block: var(--kon-space-sm);
    border-top: 1px solid var(--kon-border);
    border-bottom: 1px solid var(--kon-border);
}
.kon-share-row__label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--kon-ink-soft); margin-right: .3rem;
}
.kon-share__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--kon-bg-alt); color: var(--kon-ink-mid);
    transition: transform var(--kon-transition), background var(--kon-transition), color var(--kon-transition);
    border: none; cursor: pointer; font: inherit;
}
.kon-share__btn:hover { transform: translateY(-2px); box-shadow: var(--kon-shadow-hover); }
.kon-share__btn svg { width: 17px; height: 17px; fill: currentColor; }
.kon-share__btn--whatsapp:hover { background: var(--kon-wa-green); color: var(--kon-white); }
.kon-share__btn--facebook:hover { background: #1877F2; color: var(--kon-white); }
.kon-share__btn--twitter:hover  { background: #0F1419; color: var(--kon-white); }
.kon-share__copy {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: 0 .9rem; height: 38px; border-radius: var(--kon-radius-pill);
    background: var(--kon-bg-alt); color: var(--kon-ink-mid);
    font-size: .78rem; font-weight: 600; border: none; cursor: pointer;
    transition: background var(--kon-transition), color var(--kon-transition);
}
.kon-share__copy:hover { background: var(--kon-pine-light); color: var(--kon-pine); }
.kon-share__copy.is-copied { background: var(--kon-pine); color: var(--kon-white); }

/* ── Hero image ────────────────────────────────────────────── */
.kon-blog-hero { margin: 0 0 var(--kon-space-xl); border-radius: var(--kon-radius-lg); overflow: hidden; box-shadow: var(--kon-shadow-card); }
.kon-blog-hero img { width: 100%; max-height: 520px; object-fit: cover; display: block; }
.kon-blog-hero__caption { padding: .6rem var(--kon-space-md); font-size: .78rem; color: var(--kon-ink-soft); background: var(--kon-bg-alt); }

/* Full-width variant — breaks out of .kon-container, edge-to-edge,
   used on single.php so the featured image spans the whole viewport
   instead of sitting inside the article/sidebar grid. */
.kon-blog-hero--full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    box-shadow: none;
}
.kon-blog-hero--full img { max-height: 620px; }
@media (max-width: 640px) {
    .kon-blog-hero--full img { max-height: 320px; }
}

/* Cinematic variant — soft bottom scrim for depth + a mountain-ridge
   silhouette (Himalayan motif) dissolving into the page background,
   both pure CSS/inline SVG so there's no extra image weight. */
.kon-blog-hero--cinematic {
    position: relative;
    line-height: 0; /* removes the stray gap under the <img> */
}
.kon-blog-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16,41,31,0) 55%, rgba(16,41,31,.30) 100%);
    pointer-events: none;
}
.kon-blog-hero__ridge {
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    width: 100%;
    height: 46px;
    pointer-events: none;
}
@media (max-width: 640px) {
    .kon-blog-hero__ridge { height: 26px; }
}

/* Byline variant — sits in its own full-width strip below the hero
   (moved out of .kon-blog-header on single.php) instead of directly
   under the title. */
.kon-blog-header__byline--below-hero {
    padding-block: var(--kon-space-md);
    margin-bottom: var(--kon-space-lg);
    border-bottom: 1px solid var(--kon-border);
}

/* ── Table of Contents ────────────────────────────────────────── */
.kon-toc {
    background: var(--kon-white);
    border: 1px solid var(--kon-border);
    border-radius: var(--kon-radius-md);
    padding: var(--kon-space-md) var(--kon-space-lg) var(--kon-space-lg);
    box-shadow: var(--kon-shadow-xs);
    overflow: hidden;
}
.kon-toc__title {
    display: flex; align-items: center; gap: .4rem;
    font-family: var(--kon-font-serif); font-size: .92rem; font-weight: 600;
    color: var(--kon-ink); margin: 0 0 .6rem; cursor: default;
}

/* Progress strip — fills as the reader scrolls through the article */
.kon-toc__progress {
    display: flex; align-items: center; gap: .6rem;
    margin: 0 0 var(--kon-space-md);
}
.kon-toc__progress-track {
    flex: 1; height: 5px; border-radius: 999px; background: var(--kon-bg-alt); overflow: hidden;
}
.kon-toc__progress-fill {
    display: block; height: 100%; width: 0%; border-radius: 999px;
    background: linear-gradient(90deg, var(--kon-pine-mid), var(--kon-orange));
    transition: width .15s linear;
}
.kon-toc__progress-label {
    flex-shrink: 0; font-size: .68rem; font-weight: 700; color: var(--kon-ink-soft);
    min-width: 34px; text-align: right; font-variant-numeric: tabular-nums;
}

/* Stepper list: connecting rail + dot per heading */
.kon-toc__list { list-style: none; margin: 0; padding: 0 0 0 1.35rem; position: relative; }
.kon-toc__list::before {
    content: '';
    position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px;
    background: var(--kon-border);
    border-radius: 2px;
}
.kon-toc__item { position: relative; }
.kon-toc__item--h3 { padding-left: .9rem; }
.kon-toc__item--h3::before {
    content: ''; position: absolute; left: -8px; top: 13px; width: 6px; height: 1px; background: var(--kon-border);
}
.kon-toc__dot {
    position: absolute; left: -1.35rem; top: 11px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--kon-white); border: 2px solid var(--kon-border);
    transition: background var(--kon-transition), border-color var(--kon-transition), transform var(--kon-transition);
    z-index: 1;
}
.kon-toc__item--h3 .kon-toc__dot { width: 6px; height: 6px; left: -.85rem; top: 12px; }
.kon-toc__item.is-read .kon-toc__dot { background: var(--kon-pine-mid); border-color: var(--kon-pine-mid); }
.kon-toc__item.is-active .kon-toc__dot { background: var(--kon-orange); border-color: var(--kon-orange); transform: scale(1.3); }
.kon-toc__link {
    display: block; padding: .38rem .5rem; border-radius: var(--kon-radius-sm);
    font-size: .84rem; line-height: 1.4; color: var(--kon-ink-mid);
    transition: all var(--kon-transition);
}
.kon-toc__link:hover { background: var(--kon-bg-alt); color: var(--kon-pine); }
.kon-toc__item.is-active .kon-toc__link { color: var(--kon-orange); font-weight: 700; background: var(--kon-orange-light); }
.kon-toc__item.is-read .kon-toc__link { color: var(--kon-ink); }

.kon-toc__top {
    display: flex; align-items: center; gap: .35rem;
    margin-top: var(--kon-space-md); padding-top: var(--kon-space-sm);
    border-top: 1px dashed var(--kon-border);
    font-size: .76rem; font-weight: 600; color: var(--kon-pine-mid);
    background: none; border-left: none; border-right: none; border-bottom: none;
    cursor: pointer; width: 100%; text-align: left;
}
.kon-toc__top:hover { color: var(--kon-pine); }

@media (max-width: 900px) {
    .kon-toc summary::-webkit-details-marker { display: none; }
    .kon-toc summary { list-style: none; cursor: pointer; }
    .kon-toc__title::after { content: '▾'; margin-left: auto; font-size: .7rem; transition: transform var(--kon-transition); }
    .kon-toc[open] .kon-toc__title::after { transform: rotate(180deg); }
    .kon-toc:not([open]) .kon-toc__progress { display: none; }
}

/* Mobile inline accordion — lighter/flatter than the desktop sidebar
   card so it reads as a quick-jump control, not another block of UI. */
.kon-toc--mobile-only {
    background: var(--kon-bg-alt);
    border: 1px solid var(--kon-border);
    box-shadow: none;
    padding: .7rem var(--kon-space-md);
}
.kon-toc--mobile-only .kon-toc__title { margin: 0; }
.kon-toc--mobile-only[open] .kon-toc__title { margin-bottom: .5rem; }
.kon-toc--mobile-only .kon-toc__list { padding-top: .3rem; }

/* ── Article body (shared prose styling; kon-news-body already exists
     with equivalent rules for News — this mirrors it for Blog) ───── */
.kon-blog-body { font-size: 1.03rem; line-height: 1.85; color: var(--kon-ink-mid); max-width: 74ch; }
.kon-blog-body > *:first-child { margin-top: 0; }
.kon-blog-body p { margin-bottom: 1.25em; }
.kon-blog-body h2 {
    font-family: var(--kon-font-serif); font-size: 1.45rem; font-weight: 600; color: var(--kon-ink);
    margin: 1.9em 0 .6em; padding-left: .85rem; border-left: 4px solid var(--kon-orange);
    scroll-margin-top: 96px;
}
.kon-blog-body h3 { font-family: var(--kon-font-serif); font-size: 1.15rem; font-weight: 600; color: var(--kon-ink); margin: 1.5em 0 .5em; scroll-margin-top: 96px; }
.kon-blog-body ul, .kon-blog-body ol { padding-left: 1.4rem; margin-bottom: 1.25em; }
.kon-blog-body li { margin-bottom: .4em; }
.kon-blog-body a { color: var(--kon-pine-mid); text-decoration: underline; text-decoration-color: var(--kon-pine-light); text-underline-offset: 2px; }
.kon-blog-body a:hover { color: var(--kon-pine); }
.kon-blog-body img { border-radius: var(--kon-radius-md); max-width: 100%; height: auto; margin: 1.4em 0; }
.kon-blog-body blockquote {
    border-left: 3px solid var(--kon-orange);
    margin: var(--kon-space-lg) 0; padding: var(--kon-space-md) var(--kon-space-lg);
    background: var(--kon-orange-light); border-radius: 0 var(--kon-radius-md) var(--kon-radius-md) 0;
    font-style: italic; color: var(--kon-ink); font-family: var(--kon-font-serif); font-size: 1.05rem;
}
.kon-blog-body figure { margin: 1.6em 0; }
.kon-blog-body figcaption { font-size: .82rem; color: var(--kon-ink-soft); text-align: center; margin-top: .5rem; }
.kon-blog-body table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .92rem; }
.kon-blog-body th, .kon-blog-body td { padding: .6rem .8rem; border: 1px solid var(--kon-border); text-align: left; }
.kon-blog-body th { background: var(--kon-bg-alt); font-weight: 700; }
@media (max-width: 640px) {
    .kon-blog-body { font-size: 1rem; line-height: 1.75; }
    .kon-blog-body h2 { font-size: 1.28rem; }
    .kon-blog-body h3 { font-size: 1.08rem; }
}

/* ── Conversion CTA banner (transparent glass) ─────────────────
   Frosted-glass panel with a transparent backdrop — no more solid
   dark gradient box; the page's own background shows through, with
   two soft blurred colour "blobs" providing the warmth the blur
   filter refracts. One shared colour + type treatment (light glass
   panel, ink text, sunset-orange CTA accent, Poppins heading) is
   used everywhere this component is called — single.php,
   single-news.php, archive-news.php, and the blog listing all
   render identically; only copy and `compact` sizing differ per call.
   ------------------------------------------------------------- */
.kon-cta-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--kon-radius-xl);
    padding: var(--kon-space-2xl) var(--kon-space-lg);
    margin: var(--kon-space-xl) 0;
    background: transparent;
}
.kon-cta-banner__blob {
    position: absolute; z-index: 0; border-radius: 50%; filter: blur(60px); pointer-events: none;
}
.kon-cta-banner__blob--a { width: 280px; height: 280px; top: -90px; right: -60px; background: rgba(228, 100, 42, .22); }
.kon-cta-banner__blob--b { width: 240px; height: 240px; bottom: -100px; left: 8%; background: rgba(45, 106, 79, .20); }

.kon-cta-banner__glass {
    position: relative; z-index: 1;
    background: rgba(255, 255, 255, .38);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(228, 100, 42, .28);
    border-radius: var(--kon-radius-lg);
    padding: var(--kon-space-2xl);
    box-shadow: 0 8px 32px rgba(27, 67, 50, .10), inset 0 1px 0 rgba(255, 255, 255, .5);
    text-align: center;
    color: var(--kon-ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kon-space-xl);
    flex-wrap: wrap;
}

.kon-cta-banner__content { flex: 1 1 340px; min-width: 0; text-align: left; }

.kon-cta-banner__logo { display: inline-flex; padding: .5rem 1rem; background: rgba(255, 255, 255, .92); border-radius: var(--kon-radius-md); margin-bottom: var(--kon-space-sm); }
.kon-cta-banner__logo img { display: block; max-width: 140px; max-height: 44px; width: auto; height: auto; }

.kon-cta-banner__kicker {
    display: inline-block;
    font-family: var(--kon-font-display);
    font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--kon-orange-dk);
    background: rgba(228, 100, 42, .12);
    border: 1px solid rgba(228, 100, 42, .35);
    padding: .3em .85em;
    border-radius: var(--kon-radius-pill);
    margin-bottom: .65rem;
}

.kon-cta-banner__title {
    font-family: var(--kon-font-display); font-weight: 800; letter-spacing: -.01em; line-height: 1.2;
    font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 .4rem; color: var(--kon-ink);
}
.kon-cta-banner__subtitle { font-family: var(--kon-font-sans); font-size: 1.02rem; font-weight: 500; color: var(--kon-ink-mid); margin: 0; }
.kon-cta-banner__text { font-size: .94rem; line-height: 1.65; color: var(--kon-ink-mid); margin: .6rem 0 0; max-width: 56ch; }
.kon-cta-banner__highlight { font-size: .9rem; font-style: italic; color: var(--kon-ink-soft); margin: .6rem 0 0; max-width: 56ch; }

.kon-cta-banner__side {
    display: flex; flex-direction: column; align-items: flex-end; gap: .65rem; flex: 0 0 auto;
}
.kon-cta-banner__actions { display: flex; gap: .75rem; flex-wrap: nowrap; justify-content: flex-end; margin: 0; }
.kon-cta-banner .kon-btn { font-weight: 700; white-space: nowrap; }

.kon-cta-banner .kon-btn--primary {
    background: linear-gradient(135deg, var(--kon-orange) 0%, var(--kon-orange-dk) 100%);
    color: var(--kon-white);
    box-shadow: 0 10px 24px -8px rgba(228, 100, 42, .55);
}
.kon-cta-banner .kon-btn--primary:hover {
    background: linear-gradient(135deg, var(--kon-orange-dk) 0%, var(--kon-orange-dk) 100%);
    color: var(--kon-white);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -8px rgba(228, 100, 42, .65);
}

.kon-btn--glass {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .75em 1.6em; border-radius: var(--kon-radius-pill);
    background: transparent; color: var(--kon-pine);
    border: 1.5px solid var(--kon-pine);
    text-decoration: none; transition: background var(--kon-transition), transform var(--kon-transition);
}
.kon-btn--glass:hover { background: var(--kon-pine-light); transform: translateY(-2px); }

.kon-cta-banner__tagline {
    font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--kon-ink-soft); margin: 0;
    text-align: right; white-space: nowrap;
}

.kon-cta-banner--compact { padding: var(--kon-space-xl) var(--kon-space-lg); }
.kon-cta-banner--compact .kon-cta-banner__glass { padding: var(--kon-space-lg); }
.kon-cta-banner--compact .kon-cta-banner__title { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
.kon-cta-banner--compact .kon-cta-banner__logo { margin-bottom: var(--kon-space-xs); }
.kon-cta-banner--compact .kon-cta-banner__highlight { display: none; }

@media (max-width: 780px) {
    .kon-cta-banner__glass {
        flex-direction: column;
        text-align: center;
        padding: var(--kon-space-lg);
    }
    .kon-cta-banner__content { text-align: center; }
    .kon-cta-banner__side { align-items: center; }
    .kon-cta-banner__actions { justify-content: center; flex-wrap: wrap; }
    .kon-cta-banner__actions .kon-btn { width: 100%; justify-content: center; }
    .kon-cta-banner__tagline { text-align: center; white-space: normal; }
}

/* ── Tags ──────────────────────────────────────────────────── */
.kon-blog-tags {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin: var(--kon-space-xl) 0 var(--kon-space-lg);
    padding-top: var(--kon-space-lg);
    border-top: 1px solid var(--kon-border);
}
.kon-blog-tag {
    display: inline-block; padding: .3em 1em; border-radius: var(--kon-radius-pill);
    background: var(--kon-bg-alt); color: var(--kon-ink-mid); font-size: .78rem; font-weight: 500;
    text-decoration: none; border: 1px solid var(--kon-border); transition: all var(--kon-transition);
}
.kon-blog-tag:hover { background: var(--kon-pine-light); color: var(--kon-pine); border-color: transparent; }

/* ── Author box (author details now live at the bottom of the post) ── */
.kon-author-box {
    display: flex; gap: var(--kon-space-md); align-items: flex-start;
    background: var(--kon-bg-alt);
    border: 1px solid var(--kon-border);
    border-left: 3px solid var(--kon-pine-mid);
    border-radius: var(--kon-radius-lg);
    padding: var(--kon-space-lg);
    margin: var(--kon-space-xl) 0;
    box-shadow: var(--kon-shadow-xs);
    transition: box-shadow var(--kon-transition);
}
.kon-author-box:hover { box-shadow: var(--kon-shadow-hover); }
.kon-author-box__avatar {
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 3px solid var(--kon-white); box-shadow: var(--kon-shadow-xs);
}
.kon-author-box__avatar--placeholder {
    display: flex; align-items: center; justify-content: center;
    background: var(--kon-pine-light); color: var(--kon-pine); font-weight: 700; font-size: 1.2rem;
}
.kon-author-box__label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--kon-ink-soft); margin: 0 0 .15rem; }
.kon-author-box__name { font-family: var(--kon-font-serif); font-size: 1.08rem; font-weight: 600; color: var(--kon-ink); margin: 0 0 .3rem; }
.kon-author-box__bio { font-size: .86rem; color: var(--kon-ink-mid); line-height: 1.6; margin: 0 0 .5rem; }
.kon-author-box__link {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .8rem; font-weight: 600; color: var(--kon-pine-mid);
    text-decoration: none; transition: color var(--kon-transition), gap var(--kon-transition);
}
.kon-author-box__link:hover { color: var(--kon-pine); gap: .45rem; }
@media (max-width: 480px) {
    .kon-author-box { flex-direction: column; align-items: flex-start; }
}

/* ── Sidebar widgets (mirrors .kon-news-sidebar__*) ───────────── */
.kon-blog-sidebar__section { }
.kon-blog-sidebar__title { font-family: var(--kon-font-serif); font-size: 1rem; font-weight: 600; margin: 0 0 var(--kon-space-md); padding-bottom: .5rem; border-bottom: 2px solid var(--kon-pine-mid); color: var(--kon-ink); }
.kon-blog-sidebar__list { display: flex; flex-direction: column; gap: .75rem; }
.kon-blog-sidebar__item { display: flex; gap: .75rem; text-decoration: none; padding: .5rem; border-radius: var(--kon-radius-md); transition: background var(--kon-transition); }
.kon-blog-sidebar__item:hover { background: var(--kon-bg-alt); }
.kon-blog-sidebar__thumb { width: 64px; height: 52px; object-fit: cover; border-radius: var(--kon-radius-sm); flex-shrink: 0; }
.kon-blog-sidebar__thumb--placeholder { background: var(--kon-pine-light); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.kon-blog-sidebar__cat { display: block; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--kon-pine-mid); margin-bottom: .15rem; }
.kon-blog-sidebar__item-title { display: block; font-size: .82rem; font-weight: 600; color: var(--kon-ink); line-height: 1.3; margin-bottom: .2rem; }
.kon-blog-sidebar__date { font-size: .72rem; color: var(--kon-ink-soft); }

/* =============================================================
   ARCHIVE / INDEX (home.php, archive.php, archive-news.php)
   Magazine mix: one big featured card + responsive grid below.
   ============================================================= */

/* =============================================================
   BLOG FILTER SIDEBAR (home.php / archive.php)
   Static — no JS pin/sticky behaviour, deliberately. Search,
   category list, sort, and view toggle all live together in one
   panel next to the post grid instead of a horizontal bar above it.
   ============================================================= */
.kon-blog-archive-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--kon-space-2xl);
    align-items: start;
}
@media (max-width: 900px) {
    .kon-blog-archive-layout { grid-template-columns: 1fr; }
}

.kon-blog-filters {
    background: var(--kon-white);
    border: 1px solid var(--kon-border);
    border-radius: var(--kon-radius-lg);
    padding: var(--kon-space-lg);
    box-shadow: var(--kon-shadow-xs);
}
.kon-blog-filters__section { padding-block: var(--kon-space-md); }
.kon-blog-filters__section:first-child { padding-top: 0; }
.kon-blog-filters__section + .kon-blog-filters__section { border-top: 1px solid var(--kon-border); }
.kon-blog-filters__section .kon-filter-label { display: block; margin-bottom: .5rem; }
.kon-blog-filters__section .kon-filter-group { gap: .5rem; }
.kon-blog-filters .kon-filter-select { width: 100%; min-width: 0; }
.kon-blog-filters .kon-view-toggle { width: 100%; }
.kon-blog-filters .kon-view-toggle__btn { flex: 1; width: auto; }
.kon-blog-filters__count {
    margin: var(--kon-space-md) 0 0; padding-top: var(--kon-space-md);
    border-top: 1px solid var(--kon-border);
    font-size: .8rem; color: var(--kon-ink-soft); text-align: center;
}

/* Search field — submit arrow replaces the old inline icon-only look
   now that the box stands alone in its own sidebar section */
.kon-blog-filters .kon-blog-search input { padding-right: 2.4em; }
.kon-blog-search__submit {
    position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: 50%; border: none;
    background: var(--kon-pine-light); color: var(--kon-pine);
    font-size: .85rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background var(--kon-transition), color var(--kon-transition);
}
.kon-blog-search__submit:hover { background: var(--kon-pine-mid); color: var(--kon-white); }

/* Category list — vertical, with counts, replacing the old chip row */
.kon-blog-filters__cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.kon-blog-filters__cat-link {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .45rem .65rem; border-radius: var(--kon-radius-md);
    font-size: .86rem; color: var(--kon-ink-mid); text-decoration: none;
    transition: background var(--kon-transition), color var(--kon-transition);
}
.kon-blog-filters__cat-link:hover { background: var(--kon-bg-alt); color: var(--kon-pine); }
.kon-blog-filters__cat-link.is-active { background: var(--kon-pine-light); color: var(--kon-pine); font-weight: 700; }
.kon-blog-filters__cat-count {
    font-size: .72rem; font-weight: 600; color: var(--kon-ink-soft);
    background: var(--kon-bg-alt); padding: .1em .55em; border-radius: var(--kon-radius-pill);
    flex-shrink: 0;
}
.kon-blog-filters__cat-link.is-active .kon-blog-filters__cat-count { background: rgba(255,255,255,.6); color: var(--kon-pine); }

.kon-blog-main { min-width: 0; }
   the Sort By control's label/height exactly and aligns cleanly no
   matter how the bar wraps. See .kon-filter-bar--search overrides
   in kon-archive.css for the responsive/wrap safety net. */
.kon-filter-group--search { flex: 1 1 220px; max-width: 380px; }
.kon-blog-search { position: relative; }
.kon-blog-search input {
    width: 100%; box-sizing: border-box;
    padding: .55em 1rem .55em 2.3em; border-radius: var(--kon-radius-md);
    border: 1px solid var(--kon-border-strong); background: var(--kon-white);
    font-size: .88rem; color: var(--kon-ink); font-family: var(--kon-font-sans);
}
.kon-blog-search input:focus { outline: none; border-color: var(--kon-pine-mid); box-shadow: 0 0 0 3px var(--kon-pine-light); }
.kon-blog-search__icon { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); opacity: .5; font-size: .9rem; pointer-events: none; }

/* Featured hero card */
.kon-blog-featured {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--kon-space-xl);
    align-items: stretch; text-decoration: none; color: inherit;
    background: var(--kon-white); border-radius: var(--kon-radius-lg);
    overflow: hidden; box-shadow: var(--kon-shadow-card); margin-bottom: var(--kon-space-2xl);
    transition: box-shadow var(--kon-transition), transform var(--kon-transition);
}
.kon-blog-featured:hover { box-shadow: var(--kon-shadow-strong); transform: translateY(-3px); }
.kon-blog-featured__img { position: relative; min-height: 280px; }
.kon-blog-featured__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kon-blog-featured__placeholder { width: 100%; height: 100%; min-height: 280px; display: flex; align-items: center; justify-content: center; background: var(--kon-pine-light); font-size: 3rem; }
.kon-blog-featured__badge {
    position: absolute; top: var(--kon-space-md); left: var(--kon-space-md);
    background: var(--kon-orange); color: var(--kon-white); font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; padding: .35em .9em; border-radius: var(--kon-radius-pill);
}
.kon-blog-featured__body { padding: var(--kon-space-xl) var(--kon-space-xl) var(--kon-space-xl) 0; display: flex; flex-direction: column; justify-content: center; }
.kon-blog-featured__cat { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--kon-pine-mid); margin-bottom: .5rem; }
.kon-blog-featured__title { font-family: var(--kon-font-serif); font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 600; line-height: 1.2; color: var(--kon-ink); margin: 0 0 .6rem; }
.kon-blog-featured__excerpt { font-size: .94rem; color: var(--kon-ink-mid); line-height: 1.6; margin: 0 0 var(--kon-space-md); }
.kon-blog-featured__meta { font-size: .8rem; color: var(--kon-ink-soft); display: flex; gap: .5rem; align-items: center; }
@media (max-width: 780px) {
    .kon-blog-featured { grid-template-columns: 1fr; }
    .kon-blog-featured__body { padding: var(--kon-space-lg); }
}

/* Grid of cards */
.kon-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kon-space-xl); }
@media (max-width: 980px) { .kon-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .kon-blog-grid { grid-template-columns: 1fr; } }

.kon-blog-card {
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
    background: var(--kon-white); border-radius: var(--kon-radius-lg); overflow: hidden;
    box-shadow: var(--kon-shadow-card); transition: box-shadow var(--kon-transition), transform var(--kon-transition);
    height: 100%;
}
.kon-blog-card:hover { box-shadow: var(--kon-shadow-hover); transform: translateY(-3px); }
.kon-blog-card__img { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--kon-pine-light); }
.kon-blog-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--kon-transition-slow); }
.kon-blog-card:hover .kon-blog-card__img img { transform: scale(1.06); }
.kon-blog-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.kon-blog-card__cat {
    position: absolute; top: .7rem; left: .7rem; background: rgba(27,67,50,.88); color: var(--kon-white);
    font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    padding: .3em .8em; border-radius: var(--kon-radius-pill); backdrop-filter: blur(4px);
}
.kon-blog-card__body { padding: var(--kon-space-md) var(--kon-space-lg) var(--kon-space-lg); display: flex; flex-direction: column; flex: 1; }
.kon-blog-card__title { font-family: var(--kon-font-serif); font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: var(--kon-ink); margin: 0 0 .5rem; }
.kon-blog-card__excerpt { font-size: .85rem; color: var(--kon-ink-mid); line-height: 1.55; margin: 0 0 var(--kon-space-sm); flex: 1; }
.kon-blog-card__meta { font-size: .74rem; color: var(--kon-ink-soft); display: flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: .4rem; border-top: 1px solid var(--kon-border); }

/* List view */
.kon-blog-grid.is-list { grid-template-columns: 1fr; gap: var(--kon-space-md); }
.kon-blog-grid.is-list .kon-blog-card { flex-direction: row; }
.kon-blog-grid.is-list .kon-blog-card__img { width: 220px; aspect-ratio: auto; flex-shrink: 0; }
.kon-blog-grid.is-list .kon-blog-card__body { justify-content: center; }
.kon-blog-grid.is-list .kon-blog-card__excerpt { -webkit-line-clamp: 2; }
@media (max-width: 640px) {
    .kon-blog-grid.is-list .kon-blog-card { flex-direction: column; }
    .kon-blog-grid.is-list .kon-blog-card__img { width: 100%; aspect-ratio: 16/10; }
}

/* =============================================================
   COMMENTS (single.php → comments.php)
   Styles WordPress's default HTML5 comment walker output — no
   custom Walker class, just CSS against the standard core markup:
   .comment-list, .comment, .comment-body, .comment-meta,
   .comment-author, .avatar, .comment-content, .reply, .children
   (nested replies), plus the default comment_form() field markup.
   ============================================================= */
.kon-comments-wrap { margin-top: var(--kon-space-2xl); padding-top: var(--kon-space-xl); border-top: 1px solid var(--kon-border); }
.kon-comments__heading {
    display: flex; align-items: center; gap: .5rem;
    font-family: var(--kon-font-serif); font-size: 1.25rem; font-weight: 600;
    color: var(--kon-ink); margin: 0 0 var(--kon-space-lg);
}
.kon-comments__heading span { color: var(--kon-pine-mid); }

/* Comment list + threading */
.comment-list, .comment-list .children {
    list-style: none; margin: 0; padding: 0;
}
.comment-list { display: flex; flex-direction: column; gap: var(--kon-space-md); }
.comment-list .children { margin-top: var(--kon-space-md); padding-left: var(--kon-space-lg); border-left: 2px solid var(--kon-border); display: flex; flex-direction: column; gap: var(--kon-space-md); }
.comment-list > li + li { padding-top: var(--kon-space-md); border-top: 1px solid var(--kon-border); }

.comment-body { display: flex; gap: var(--kon-space-md); align-items: flex-start; }
.comment-body .avatar {
    width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid var(--kon-white); box-shadow: var(--kon-shadow-xs);
}
.comment-body > div,
.comment-body .comment-content-wrap { flex: 1; min-width: 0; }
.comment-meta { margin-bottom: .3rem; }
.comment-author.vcard { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.comment-author .fn { font-style: normal; font-weight: 700; color: var(--kon-ink); font-size: .92rem; }
.comment-author .says { display: none; }
.comment-metadata { font-size: .76rem; }
.comment-metadata a { color: var(--kon-ink-soft); text-decoration: none; }
.comment-metadata a:hover { color: var(--kon-pine-mid); text-decoration: underline; }
.comment-metadata .edit-link a { color: var(--kon-orange); }

.comment-content { font-size: .92rem; line-height: 1.65; color: var(--kon-ink-mid); }
.comment-content p { margin: .4em 0 0; }
.comment-content p:first-child { margin-top: 0; }

.comment .reply { margin-top: .5rem; }
.comment-reply-link {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .78rem; font-weight: 700; color: var(--kon-pine-mid);
    text-decoration: none; padding: .2rem .7rem; border-radius: var(--kon-radius-pill);
    background: var(--kon-pine-light); transition: all var(--kon-transition);
}
.comment-reply-link:hover { background: var(--kon-pine-mid); color: var(--kon-white); }

.comment.bypostauthor > .comment-body { position: relative; }
.comment.bypostauthor > .comment-body::before {
    content: 'Author';
    position: absolute; top: -2px; right: 0;
    font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--kon-orange); background: var(--kon-orange-light);
    padding: .15em .6em; border-radius: var(--kon-radius-pill);
}
.comment.pending .comment-body { opacity: .85; }
.comment.pending .comment-body::after {
    content: '⏳ Awaiting moderation';
    display: block; font-size: .74rem; font-style: italic; color: var(--kon-ink-soft); margin-top: .4rem;
}

.no-comments { font-size: .9rem; color: var(--kon-ink-soft); padding: var(--kon-space-md) 0; }

/* Comment form */
.kon-comment-form { margin-top: var(--kon-space-xl); }
.comment-reply-title { margin-top: 0; }
.comment-notes, .logged-in-as { font-size: .84rem; color: var(--kon-ink-soft); margin-bottom: var(--kon-space-md); }
.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-url { margin: 0 0 var(--kon-space-md); }
.kon-comment-form label { display: block; font-size: .78rem; font-weight: 700; color: var(--kon-ink); margin-bottom: .35rem; }
.kon-comment-form input[type="text"],
.kon-comment-form input[type="email"],
.kon-comment-form input[type="url"],
.kon-comment-form textarea {
    width: 100%; box-sizing: border-box; padding: .7em .9em;
    border: 1px solid var(--kon-border-strong); border-radius: var(--kon-radius-md);
    font-family: var(--kon-font-sans); font-size: .92rem; color: var(--kon-ink);
    background: var(--kon-white); resize: vertical;
}
.kon-comment-form input:focus, .kon-comment-form textarea:focus {
    outline: none; border-color: var(--kon-pine-mid); box-shadow: 0 0 0 3px var(--kon-pine-light);
}
.comment-form-cookies-consent { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--kon-ink-soft); margin-bottom: var(--kon-space-md); }
.comment-form-cookies-consent input { width: auto; }
.form-submit { margin: 0; }
.kon-comments__pagination { margin-top: var(--kon-space-lg); }

@media (min-width: 560px) {
    .kon-comment-form .comment-form-author,
    .kon-comment-form .comment-form-email {
        display: inline-block; width: calc(50% - .5rem);
        vertical-align: top;
    }
    .kon-comment-form .comment-form-author { margin-right: 1rem; }
}
@media (max-width: 640px) {
    .comment-body { gap: var(--kon-space-sm); }
    .comment-body .avatar { width: 36px; height: 36px; }
    .comment-list .children { padding-left: var(--kon-space-md); }
}