/* ============================================================================
 * Kate Angelo — Blog Archive (hybrid Stripe-style list) — v1.3.0
 *
 * v1.3.0 (Daria) — TWO independent fixes/features, both scoped to the left
 * rail only (post list/rows untouched):
 *
 *   1. TRUE NESTED "Topic" TREE. The rail's category list used to be one
 *      flat `<li>` loop (functions.php). Categories that have real children
 *      (checked live via REST — "By Author"/"By Genre" already existed with
 *      real children like Lisa Phillips/John Grisham/Christian Fiction/etc.
 *      set, just accidentally parented under "Book Reviews" instead of
 *      top-level; fixed live via REST, see CHANGELOG.md for the exact term
 *      ID changes) now render as their own nested, collapsible sub-folder —
 *      new `.ka-blog-archive__rail-group` / `__subfolder*` rules below,
 *      reusing the exact same pure-CSS checkbox+chevron collapse technique
 *      as the outer "Topic" folder, just one level deeper and visually
 *      lighter (smaller chevron, no bordered icon box, indented + a
 *      left border) so a parent group is always distinguishable from its
 *      children at a glance. Categories with no children are UNCHANGED —
 *      still the flat `.ka-blog-archive__check` item they always were.
 *
 *   2. MOBILE "FILTERS" COLLAPSE. Below the existing 860px rail-stack
 *      breakpoint, the entire rail (the "/ FILTERS" label + the whole Topic
 *      tree) used to render fully expanded on every viewport — ~28 flat
 *      checkbox items filling the whole first mobile screen before any
 *      actual blog post was reachable. functions.php now prints a hidden
 *      checkbox + `<label>` pair (same pure-CSS technique as the "Topic"
 *      folder — a native `<details>/<summary>` was tried first and found
 *      broken on live-browser verification, see the "MOBILE FILTERS
 *      COLLAPSE" comment near the bottom of this file for the full
 *      writeup) defaulting UNCHECKED/collapsed on every viewport, then
 *      forced open again here purely via CSS at ≥861px (this file's own
 *      existing 860px cutoff) — so desktop is completely unchanged from
 *      every version before v1.3.0. Below 861px, the label becomes a
 *      compact, tappable "Filters" button and the tree stays hidden until
 *      tapped. See the "MOBILE FILTERS COLLAPSE" rule block near the
 *      bottom of this file.
 *
 * Scope: EVERYTHING in this file lives under the single `.ka-blog-archive`
 * wrapper printed by the [ka_blog_archive] shortcode (functions.php). This
 * markup only ever appears wherever that shortcode is placed, so nothing
 * here can leak onto the site's dark nav/footer, other pages, or the
 * single-post template (see blog-single.css for that, scoped separately
 * under body.single-post). Also applies identically to per-category views
 * (`?blog_cat=<slug>`) — those are the SAME shortcode/page, just with a
 * `category_name` WP_Query arg added, so this file needs no per-view
 * duplication.
 *
 * v1.2.8 — Daria: STRICT 4-COLUMN COLLAPSED ROW (date / title / thumbnail
 * peek / "+" toggle, one line, no wrap — stripe.dev/blog reference). Per the
 * established split of concerns between this file and blog-accordion.css
 * (that file's own header: its selectors "are intentionally more specific/
 * later in the cascade so they win over" this file's row rules), the actual
 * 4-column GRID LAYOUT of the collapsed row (`.ka-blog-archive__toggle`),
 * its responsive stacking, and the new `.ka-blog-archive__row-thumb` peek
 * thumbnail all live in blog-accordion.css. This file keeps only the base
 * color/typography tokens for `.ka-blog-archive__date` / `__title` (no
 * layout). The old `.ka-blog-archive__meta` stacked date-over-title wrapper
 * span is retired — the PHP template (functions.php) no longer prints it;
 * date and title are independent grid cells now. The old mobile-only
 * `.ka-blog-archive__title` font-size override at 480px is also retired
 * from this file — 24px-desktop / smaller-mobile title sizing is now owned
 * by blog-accordion.css's own 768px collapse breakpoint, alongside the rest
 * of the row's responsive behaviour.
 *
 * Light-theme island inside the site's existing dark header/footer frame:
 * navy #020F24 text on a light paper background, gold #F5D000 accents.
 * Space Mono for the date/meta line, per the site's established
 * mono-for-meta convention (see formidable-theme.css). HARD CONSTRAINT:
 * this file must never introduce the site's royal-blue/dark-navy brand
 * palette (from site-recolor.css / about-*-fix.css) — the blog is
 * deliberately, separately light-themed.
 *
 * v1.2.0 — Daria: pruned the now-dead `.ka-blog-archive__row-link` (old
 * whole-row link), `.ka-blog-archive__thumb` (old 84×84 inline thumbnail),
 * and `.ka-blog-archive__excerpt` (old 1-line clamp) rules — the row's
 * children were rebuilt into a toggle/panel accordion, see
 * blog-accordion.css/.js for the replacement markup + behaviour.
 * `.ka-blog-archive__meta` / `__date` / `__title` are still live (now
 * inside the toggle button) and `.ka-blog-archive__thumb-placeholder` is
 * still live (now inside the expanded panel's thumb slot) — left as-is.
 *
 * v1.2.6 — Daria, two changes:
 *   1. WIDE LAYOUT: `.ka-blog-archive`'s own max-width raised 1040px ->
 *      1320px (approaching this site's Elementor "Boxed" section width of
 *      1140px, PLUS a page-scoped override of that outer Elementor
 *      container's own max-width — see the `body.page-id-1003` rule below
 *      — so the inner width increase isn't immediately re-clamped by the
 *      outer Elementor section). `.ka-blog-archive__list` (the actual
 *      reading column) only grows modestly, 720px -> 760px, so row line-
 *      length stays sensible — the extra room goes to breathing space
 *      around the list and a wider left rail, not to stretched-out prose.
 *   2. FILTER RAIL REWORK: the flat "Browse" list is replaced with a
 *      stripe.dev/blog-style collapsible folder-tree ("/ FILTERS" label +
 *      a "Topic" folder with a chevron/folder icon + checkbox-styled
 *      category list with counts in parens). See the new
 *      `.ka-blog-archive__folder` / `__chevron` / `__check` / `__box`
 *      rules below; the OLD flat `.ka-blog-archive__rail-label` rule is
 *      pruned (no longer used — the "Browse" plain-text label is replaced
 *      by "/ FILTERS" + the folder label).
 * ==========================================================================
 */

.ka-blog-archive {
  --ka-ink: #020F24;
  --ka-gold: #F5D000;
  --ka-gold-ink: #7A5F00; /* AA-safe gold-on-light for hover text (raw
                              #F5D000 fails contrast as TEXT on a light bg —
                              it's used here only as a background tint /
                              active-state fill, never as text color). */
  --ka-bg: #FDFCF8;
  --ka-hairline: rgba(2, 15, 36, 0.12);

  display: flex;
  align-items: flex-start;
  gap: 56px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 56px 32px 96px;
  background: var(--ka-bg);
  color: var(--ka-ink);
  font-size: 16px;
}

/* Loosen the outer Elementor "Boxed" section's own 1140px cap on the
   /blog/ page (id 1003) ONLY — scoped by page ID so no other Boxed section
   anywhere else on the site is affected. Without this, `.ka-blog-archive`'s
   own wider max-width above would just get re-clamped by Elementor's
   default container width one level up. */
body.page-id-1003 .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1360px;
}

.ka-blog-archive,
.ka-blog-archive * {
  box-sizing: border-box;
}

/* ── Left rail ─────────────────────────────────────────────────────────── */
.ka-blog-archive__rail {
  flex: 0 0 250px;
  position: sticky;
  top: 120px;
}

/* "/ FILTERS" — literal slash-prefixed label, stripe.dev/blog convention. */
.ka-blog-archive__slash {
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ka-ink);
  margin: 0 0 18px;
}

/* ── Folder — collapsible "Topic" group. Pure CSS collapse via a hidden
   checkbox; no JS required, degrades to "always expanded" if CSS somehow
   fails to load (checkbox defaults to visually-hidden-but-present, list
   stays in normal flow). ── */
.ka-blog-archive__folder {
  border: 1px solid var(--ka-hairline);
  border-radius: 4px;
  padding: 4px;
  background: #fff;
}
.ka-blog-archive__folder-toggle {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.ka-blog-archive__folder-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 8px;
  cursor: pointer;
  border-radius: 3px;
  font-family: 'Space Mono', monospace;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ka-ink);
  user-select: none;
}
.ka-blog-archive__folder-label:hover {
  background: rgba(245, 208, 0, 0.16);
}
.ka-blog-archive__chevron {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 6px;
  border-color: transparent transparent transparent var(--ka-ink);
  transition: transform 0.15s ease;
  flex: 0 0 auto;
}
.ka-blog-archive__folder-toggle:checked ~ .ka-blog-archive__folder-label .ka-blog-archive__chevron {
  transform: rotate(90deg);
}
.ka-blog-archive__folder-icon {
  display: inline-block;
  width: 15px;
  height: 12px;
  flex: 0 0 auto;
  background: var(--ka-gold-ink);
  opacity: 0.85;
  clip-path: polygon(0 15%, 40% 15%, 50% 30%, 100% 30%, 100% 90%, 0 90%);
}
.ka-blog-archive__folder-name {
  line-height: 1;
}

/* List hidden by default; shown once the (default-checked) toggle is on.
   Unchecking the toggle collapses the folder. */
.ka-blog-archive__folder .ka-blog-archive__rail-list {
  display: none;
  margin-top: 2px;
}
.ka-blog-archive__folder-toggle:checked ~ .ka-blog-archive__rail-list {
  display: block;
}

.ka-blog-archive__rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ka-blog-archive__rail-list li {
  margin: 0 0 2px;
}

/* ── Nested sub-folder groups (v1.3.0) ────────────────────────────────────
   A category with real children (e.g. "By Author", "By Genre" — see the
   file header for the live-data fix that made these render as top-level
   groups instead of Book Reviews' children) renders as its own mini
   collapsible folder, ONE level nested under the outer "Topic" folder.
   Same pure-CSS checkbox+chevron collapse technique as the Topic folder
   itself (functions.php prints a hidden checkbox + label pair per group),
   just visually lighter/smaller so it's clearly a sub-level, never
   confusable with the outer folder or with a real leaf filter item:
   no bordered folder-icon swatch, a smaller chevron, and — the primary
   "this is nested" cue — indentation plus a left hairline border on its
   child list. */
.ka-blog-archive__rail-group {
  margin: 0 0 2px;
}
.ka-blog-archive__subfolder-toggle {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.ka-blog-archive__subfolder-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ka-ink);
  user-select: none;
}
.ka-blog-archive__subfolder-label:hover {
  background: rgba(245, 208, 0, 0.16);
}
.ka-blog-archive__chevron--sub {
  border-width: 4px 0 4px 5px;
}
.ka-blog-archive__subfolder-toggle:checked ~ .ka-blog-archive__subfolder-label .ka-blog-archive__chevron--sub {
  transform: rotate(90deg);
}
/* Children hidden by default; shown once this sub-folder's own (per-group)
   toggle is checked. functions.php pre-checks this toggle only when the
   currently-active ?blog_cat= filter lives inside this specific group, so
   a direct link to a nested category lands with its own group already
   expanded rather than hiding the active item. */
.ka-blog-archive__rail-list--nested {
  display: none;
  margin: 2px 0 0 20px;
  padding-left: 10px;
  border-left: 2px solid var(--ka-hairline);
}
.ka-blog-archive__subfolder-toggle:checked ~ .ka-blog-archive__rail-list--nested {
  display: block;
}
/* Children keep the exact same `.ka-blog-archive__check` treatment as any
   top-level leaf category — the indentation + border-left above is what
   visually distinguishes "this is a nested child" already, no separate
   font/color override needed on the item itself. */

/* Checkbox-styled filter link — a real <a> (GET-param filtering, same
   mechanism as before) styled to look like a checkbox list item, per the
   brief's preferred "simplest reliable option". Single-category-at-a-time,
   same as the flat list it replaces — not true multi-select. */
.ka-blog-archive__check {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px 7px 26px;
  border-radius: 3px;
  text-decoration: none;
  color: var(--ka-ink);
  font-size: 0.9rem;
  line-height: 1.3;
  transition: background 0.15s ease;
}
.ka-blog-archive__check:hover,
.ka-blog-archive__check:focus-visible {
  background: rgba(245, 208, 0, 0.22);
}
.ka-blog-archive__box {
  position: relative;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-left: -18px;
  border: 1.5px solid rgba(2, 15, 36, 0.4);
  border-radius: 2px;
  background: #fff;
}
li.is-active .ka-blog-archive__box {
  background: var(--ka-ink);
  border-color: var(--ka-ink);
}
li.is-active .ka-blog-archive__box::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
li.is-active .ka-blog-archive__check {
  font-weight: 700;
  background: rgba(245, 208, 0, 0.28);
}
.ka-blog-archive__check-label {
  flex: 1 1 auto;
  min-width: 0;
}
.ka-blog-archive__rail-count {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  opacity: 0.55;
}

/* ── List ──────────────────────────────────────────────────────────────── */
.ka-blog-archive__list {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 760px;
}
.ka-blog-archive__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ka-blog-archive__row {
  border-bottom: 1px solid var(--ka-hairline);
}
.ka-blog-archive__row:first-child {
  border-top: 1px solid var(--ka-hairline);
}
.ka-blog-archive__thumb-placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

/* Base color/typography tokens only — grid placement, sizing, truncation,
   and responsive behaviour for these two elements live in
   blog-accordion.css (v1.2.8), which loads after this file and owns the
   collapsed row's actual layout. */
.ka-blog-archive__date {
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(2, 15, 36, 0.5);
}
.ka-blog-archive__title {
  margin: 0;
  font-weight: 700;
  color: var(--ka-ink);
  /* v1.2.7 sitewide heading face, applied explicitly here rather than
     relied-on-via-inheritance from the ancestor <h3> (which also gets it
     from site-recolor.css's sitewide `h1..h6` rule) — explicit per this
     project's "make it explicit so it can't silently regress" convention
     (see the v1.2.6 orderby/order comment in functions.php for the same
     discipline). */
  font-family: 'Oswald', Impact, sans-serif;
}
.ka-blog-archive__empty {
  font-size: 1rem;
  color: rgba(2, 15, 36, 0.6);
}

/* ── Pagination ────────────────────────────────────────────────────────── */
.ka-blog-archive__pagination {
  margin-top: 32px;
}
.ka-blog-archive__pagination ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.ka-blog-archive__pagination a,
.ka-blog-archive__pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 3px;
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  color: var(--ka-ink);
  text-decoration: none;
  border: 1px solid var(--ka-hairline);
}
.ka-blog-archive__pagination a:hover,
.ka-blog-archive__pagination a:focus-visible {
  background: var(--ka-gold);
  border-color: var(--ka-gold);
}
.ka-blog-archive__pagination span.dots {
  border-color: transparent;
}
.ka-blog-archive__pagination span.current {
  background: var(--ka-ink);
  color: #fff;
  border-color: var(--ka-ink);
}

/* ── MOBILE FILTERS COLLAPSE (v1.3.0) ─────────────────────────────────────
 * functions.php now prints a hidden checkbox + `<label>` pair
 * (`#ka-blog-filters-toggle` / `.ka-blog-archive__filters-toggle`) as the
 * first two children of `.ka-blog-archive__rail`, followed by a
 * `.ka-blog-archive__rail-inner` div holding everything the rail used to
 * print directly (the "/ FILTERS" label + the whole Topic tree). The
 * checkbox defaults UNCHECKED in the markup on every viewport.
 *
 * A first attempt wrapped the rail in a native `<details>/<summary>`
 * instead. Verified live in a real browser (Playwright) and found broken:
 * Chromium hides a closed `<details>`'s non-summary children via an
 * internal shadow-DOM `<slot>`, not a plain CSS `display` value, so NO
 * author CSS — including `display: block !important` — can force it back
 * open; the content simply never rendered at any viewport, confirmed via
 * screenshot even though computed `display` still read "block". Switched
 * to this checkbox+label technique instead — the SAME one already used
 * for the "Topic" folder and its v1.3.0 sub-folders — because it's real,
 * plain CSS `display` all the way down, so the desktop force-open rule
 * below actually works (also verified live).
 *
 *   - `.ka-blog-archive__filters-toggle` (the visible "Filters" button) is
 *     hidden at desktop widths by the un-scoped rule just below — desktop
 *     never shows a toggle at all, exactly like every version before
 *     v1.3.0.
 *   - At ≥861px, `.ka-blog-archive__rail-inner` is forced to
 *     `display: block !important` regardless of the checkbox's checked
 *     state — desktop renders as if the rail were always expanded, same
 *     as every prior version.
 *   - Below 861px, nothing forces it open: `.ka-blog-archive__rail-inner`
 *     defaults `display: none` (checkbox unchecked) and only shows once
 *     the "Filters" label is tapped (`:checked ~` sibling rule) — zero JS,
 *     works with JS disabled, keyboard-operable (native checkbox+label).
 */
.ka-blog-archive__filters-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.ka-blog-archive__filters-toggle {
  display: none;
}
@media (min-width: 861px) {
  .ka-blog-archive__rail-inner {
    display: block !important;
  }
}

/* ── Responsive: rail drops above the list, folder-tree stays vertical
   (v1.2.6 — the old horizontal-scroll-strip treatment doesn't fit a
   checkbox list the way it fit the old flat pill nav) ─────────────────── */
@media (max-width: 860px) {
  .ka-blog-archive {
    flex-direction: column;
    gap: 24px;
    padding: 40px 20px 72px;
  }
  .ka-blog-archive__rail {
    position: static;
    flex: none;
    width: 100%;
  }
  .ka-blog-archive__list {
    max-width: none;
  }

  /* v1.3.0 — the compact, tappable "Filters" button. Only rendered/visible
     below the rail-stack breakpoint; `.ka-blog-archive__rail-inner` (the
     "/ FILTERS" label + entire Topic tree) is hidden by default here and
     only shown once the checkbox above it is checked (tapped). */
  .ka-blog-archive__filters-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--ka-hairline);
    border-radius: 4px;
    font-family: 'Space Mono', monospace;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ka-ink);
    cursor: pointer;
    user-select: none;
  }
  .ka-blog-archive__filters-toggle:hover {
    background: rgba(245, 208, 0, 0.16);
  }
  .ka-blog-archive__filters-input:focus-visible ~ .ka-blog-archive__filters-toggle {
    outline: 2px solid var(--ka-gold-ink);
    outline-offset: 2px;
  }
  .ka-blog-archive__filters-icon {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 6px;
    border-color: transparent transparent transparent var(--ka-ink);
    transition: transform 0.15s ease;
    flex: 0 0 auto;
  }
  /* Rotates to point down once the "Filters" checkbox is checked (tapped
     open) — driven directly off the checkbox's own :checked state, no
     JS/class needed, same sibling-selector technique as the Topic folder's
     own chevron. */
  .ka-blog-archive__filters-input:checked ~ .ka-blog-archive__filters-toggle .ka-blog-archive__filters-icon {
    transform: rotate(90deg);
  }
  .ka-blog-archive__rail-inner {
    display: none;
    margin-top: 12px;
  }
  .ka-blog-archive__filters-input:checked ~ .ka-blog-archive__rail-inner {
    display: block;
  }
}
/* Title sizing at narrower widths (was a flat 480px override here through
   v1.2.7) is now handled by blog-accordion.css's 768px row-collapse
   breakpoint, alongside the rest of the 4-column-to-stacked layout change —
   see that file for the full responsive strategy. */