/* ==========================================================================
   Anders Group UI components for the blog templates, ported from
   andersgroup-ui-design's css/components.css. Requires blog-tokens.css
   (link it first).

   Everything here is scoped under `body.cxs-blog-theme` -- unlike the
   design lab's standalone pages, this is a shared multi-page WordPress
   theme, so bare `.btn`/`.card`/`.chip`/`.pill` selectors would risk
   colliding with rules other page templates define for the same class
   names (confirmed collisions exist in salary.css/single-job.css/
   author-socials.css, all harmless in practice since those templates never
   load alongside the blog chrome -- but scoping here removes the risk
   entirely rather than relying on "never loads together" staying true).

   Hierarchy comes from size and weight, never a second family or heavier
   cut: system-ui only, 700 is the maximum weight. Every color references a
   token -- no hardcoded hex. Each interactive element has a visible focus
   ring and a 44px touch target. All motion is gated behind
   prefers-reduced-motion.
   ========================================================================== */

/* ===== Base ===== */
body.cxs-blog-theme * {
  box-sizing: border-box;
}

body.cxs-blog-theme h1,
body.cxs-blog-theme h2,
body.cxs-blog-theme h3,
body.cxs-blog-theme p,
body.cxs-blog-theme ul,
body.cxs-blog-theme ol,
body.cxs-blog-theme figure {
  margin: 0;
  padding: 0;
}

body.cxs-blog-theme ul,
body.cxs-blog-theme ol {
  list-style: none;
}

body.cxs-blog-theme b,
body.cxs-blog-theme strong {
  font-weight: 700;
}

body.cxs-blog-theme a {
  color: var(--accent);
  text-decoration: none;
}

body.cxs-blog-theme a:hover {
  text-decoration: underline;
}

body.cxs-blog-theme button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

body.cxs-blog-theme input,
body.cxs-blog-theme select,
body.cxs-blog-theme textarea {
  font-family: inherit;
}

body.cxs-blog-theme img,
body.cxs-blog-theme svg {
  max-width: 100%;
}

body.cxs-blog-theme :focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 5px;
}

body.cxs-blog-theme .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cxs-blog-theme .skip-link {
  position: absolute;
  left: var(--s-3);
  top: -56px;
  z-index: 60;
  background: var(--accent);
  color: var(--on-dark);
  padding: 10px 16px;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-weight: 500;
  transition: top 0.15s ease;
}

.cxs-blog-theme .skip-link:focus {
  top: var(--s-3);
}

/* ===== Layout shell (chrome-level container, shared by every section) ===== */
.cxs-blog-theme .shell {
  max-width: calc(var(--ag-shell-content-max, 1240px) + 32px);
  margin: 0 auto;
  padding-left: var(--s-4);
  padding-right: var(--s-4);
}

@media (min-width: 768px) {
  .cxs-blog-theme .shell {
    max-width: calc(var(--ag-shell-content-max, 1240px) + 48px);
    padding-left: var(--s-6);
    padding-right: var(--s-6);
  }
}

@media (min-width: 1024px) {
  .cxs-blog-theme .shell {
    max-width: calc(var(--ag-shell-content-max, 1240px) + 64px);
    padding-left: var(--s-8);
    padding-right: var(--s-8);
  }
}

/* ===== Page wrapper + header/footer chrome (shared by archive & single) =====
   The mockup templates each duplicate this chrome block verbatim (per their
   own comments, "copied from job-page.html") since they're standalone
   files. The chrome now also has a sitewide, independently scoped copy in
   site-chrome.css; these selectors preserve the exact blog rendering while
   the same template parts are shared by every public page. */
.cxs-blog-theme #page {
  background: var(--card);
  min-height: 100vh;
  overflow-x: clip;
}

/* The blog's own copy of the header used to live here, styling the same
   markup as site-chrome.css with a different token vocabulary -- so the header
   rendered differently on /blog/ than everywhere else. There is one header
   now: assets/css/site-header.css, scoped to body.cxs-site-theme, which the
   blog carries too. Nothing blog-specific replaces it. */

.cxs-blog-theme .site-footer {
  background: var(--navy);
  color: var(--on-dark-2);
}

.cxs-blog-theme .footer-inner {
  padding-top: 44px;
  padding-bottom: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8) 64px;
  align-items: flex-start;
}

.cxs-blog-theme .footer-cols {
  display: flex;
  gap: var(--s-8) 64px;
  flex-wrap: wrap;
}

.cxs-blog-theme .footer-col h3 {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-3);
  margin-bottom: var(--s-3);
  font-weight: 700;
}

.cxs-blog-theme .footer-col ul {
  display: grid;
  gap: var(--s-2);
}

.cxs-blog-theme .footer-col a {
  color: var(--on-dark-2);
  text-decoration: none;
  font-size: 14px;
  display: inline-block;
  padding: 6px 0;
}

.cxs-blog-theme .footer-col a:hover {
  text-decoration: underline;
}

.cxs-blog-theme .footer-legal {
  border-top: 1px solid var(--line-on-dark);
  padding-top: var(--s-4);
  padding-bottom: var(--s-6);
  font-size: 12px;
  color: var(--on-dark-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
}

/* Header/footer logo -- cxs_header_logo() returns <a class="logo"> with
   either an <img class="brandimg"> (real uploaded logo) or plain text
   (site name fallback), unlike the mockup's fixed-size base64 lockup, so
   sizing needs to accommodate a real image instead of a hardcoded box. */
.cxs-blog-theme .logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
}

.cxs-blog-theme .logo:hover {
  text-decoration: none;
}

.cxs-blog-theme .logo img {
  max-height: 32px;
  width: auto;
  display: block;
}

.cxs-blog-theme .site-footer .logo {
  color: var(--on-dark);
}

/* ===== Typography roles ===== */
.cxs-blog-theme .disp {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.cxs-blog-theme h1,
.cxs-blog-theme h2,
.cxs-blog-theme h3 {
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.18;
  font-weight: 700;
}

.cxs-blog-theme .tnum {
  font-feature-settings: var(--tnum);
}

.cxs-blog-theme .kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.cxs-blog-theme .lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate);
}

/* ===== Buttons ===== */
.cxs-blog-theme .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 22px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.cxs-blog-theme .btn:hover {
  text-decoration: none;
}

.cxs-blog-theme .btn:active {
  transform: translateY(1px);
}

.cxs-blog-theme .btn-block {
  display: flex;
  width: 100%;
  border-radius: var(--r-btn);
  min-height: 52px;
  padding: 15px;
  font-size: 16px;
}

/* Primary -- the single high-intent action. Lime fill, ink text. */
.cxs-blog-theme .btn-primary {
  background: var(--action-cta);
  color: var(--action-ink);
  box-shadow: var(--action-shadow);
}

.cxs-blog-theme .btn-primary:hover {
  background: var(--action-d);
  transform: translateY(-1px);
}

.cxs-blog-theme .btn-primary:active {
  transform: translateY(0);
}

/* Navy -- the action on all-white surfaces where lime alone wouldn't be
   the most isolated element. Navy fill, lime text (max contrast). */
.cxs-blog-theme .btn-navy {
  background: var(--navy);
  color: var(--action);
  box-shadow: 0 6px 20px rgba(11, 34, 57, 0.24);
}

.cxs-blog-theme .btn-navy:hover {
  background: var(--accent-d);
  transform: translateY(-1px);
}

/* Ghost / outline -- quiet secondary ("Search jobs"). */
.cxs-blog-theme .btn-out {
  background: var(--card);
  color: var(--accent);
  border: 1.6px solid var(--accent-line);
  font-weight: 600;
}

.cxs-blog-theme .btn-out:hover {
  border-color: var(--accent);
  background: var(--canvas);
}

/* Soft -- lowest-emphasis tinted action. */
.cxs-blog-theme .btn-soft {
  background: var(--accent-soft);
  color: var(--accent);
  border: 0;
  border-radius: 10px;
  font-weight: 600;
}

.cxs-blog-theme .btn-soft:hover {
  background: var(--accent-line);
}

.cxs-blog-theme .btn-soft:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===== Pills, chips ===== */
.cxs-blog-theme .chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  padding: 5px 11px;
  border-radius: var(--r-pill);
}

/* ===== Cards ===== */
.cxs-blog-theme .card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.cxs-blog-theme .card-pad {
  padding: var(--s-6);
}

/* ===== Breadcrumbs ===== */
.cxs-blog-theme .crumbs {
  font-size: 13px;
  color: var(--muted);
}

.cxs-blog-theme .crumbs a {
  color: var(--slate);
  font-weight: 600;
}

.cxs-blog-theme .crumbs a:hover {
  color: var(--accent);
}

/* ===== Section heading ===== */
.cxs-blog-theme .section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}

.cxs-blog-theme .section-head h2 {
  font-size: 19px;
}

.cxs-blog-theme .section-head a {
  font-size: 14px;
  font-weight: 600;
}

/* ===== Avatar (initials, shared by byline + author-bio) ===== */
.cxs-blog-theme .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  background: var(--cta);
  color: var(--on-navy-hi);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
}

.cxs-blog-theme .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cxs-blog-theme .avatar.lg {
  width: 56px;
  height: 56px;
  font-size: 18px;
}

.cxs-blog-theme .avatar.xl {
  width: 80px;
  height: 80px;
  font-size: 26px;
}

.cxs-blog-theme .author-hero .avatar.xl {
  width: 96px;
  height: 96px;
  font-size: 30px;
}

@media (min-width: 768px) {
  .cxs-blog-theme .author-hero .avatar.xl {
    width: 120px;
    height: 120px;
    font-size: 36px;
  }
}

/* ===== Byline (post meta: avatar + name + date/read time + categories) ===== */
.cxs-blog-theme .byline {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}

.cxs-blog-theme .byline .bl-name {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
}

.cxs-blog-theme .byline .bl-name:hover {
  color: var(--accent);
}

.cxs-blog-theme .byline .bl-meta {
  font-size: 13px;
  color: var(--muted);
  font-feature-settings: var(--tnum);
}

.cxs-blog-theme .byline .bl-cats {
  font-size: 13px;
  color: var(--slate);
}

.cxs-blog-theme .byline .bl-cats a {
  color: var(--accent);
  font-weight: 600;
}

/* ===== Author bio (end-of-article block) ===== */
.cxs-blog-theme .author {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  padding: var(--s-6);
  background: var(--panel);
  border-radius: var(--r);
}

.cxs-blog-theme .author .an {
  font-size: 15px;
}

.cxs-blog-theme .author .an a {
  color: var(--ink);
}

.cxs-blog-theme .author .an a:hover {
  color: var(--accent);
}

.cxs-blog-theme .author .ab {
  font-size: 13.5px;
  color: var(--slate);
  line-height: 1.6;
  margin-top: 4px;
}

.cxs-blog-theme .author .more {
  display: inline-block;
  margin-top: 8px;
  font-weight: 600;
  font-size: 13.5px;
}

/* ===== Author hero (identity block on an author archive) ===== */
/* --ah-measure is the reading measure the identity column is bound to from
   1024up; it is 75ch at the .lede size the bio renders in, resolved to px
   because the grid track computes ch against .ah-top's own (smaller) font
   size and would come out ~140px short. --ah-media-col and --ah-portrait are
   read in the 1024 block below. */
.cxs-blog-theme .author-hero {
  --ah-measure: 800px;
  --ah-media-col: 320px;
  --ah-portrait: 144px;
  background: var(--canvas);
  border-bottom: 1px solid var(--action-line);
}

/* Longhands preserve .shell's horizontal gutter. A padding shorthand here
   would override its padding-left/right and pull the hero out of alignment. */
.cxs-blog-theme .author-hero .ah-in {
  padding-top: var(--s-8);
  padding-bottom: var(--s-section);
}

.cxs-blog-theme .author-hero .ah-top {
  display: grid;
  grid-template-areas: "media" "id";
  gap: var(--s-6);
  align-items: start;
}

.cxs-blog-theme .author-hero .ah-media {
  grid-area: media;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: flex-start;
}

.cxs-blog-theme .author-hero .ah-id {
  grid-area: id;
  min-width: 0;
}

.cxs-blog-theme .author-hero .ah-role {
  margin-top: var(--s-2);
  margin-bottom: 0;
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 600;
}

.cxs-blog-theme .author-hero h1 {
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}

/* No measure cap of its own from 1024up: the identity column carries it as a
   grid track (--ah-measure), so the h1, the role and the bio all break on the
   same edge instead of the bio alone stopping short of a wider column. Below
   that the column is already narrower than the measure, so 75ch is inert. */
.cxs-blog-theme .author-hero .ah-bio {
  font-size: 16px; /* one step under the 17px .lede, per Anders' 2026-09 request */
  max-width: 75ch;
  margin-top: var(--s-3);
}

.cxs-blog-theme .author-hero .ah-bio p {
  margin: 0 0 var(--s-3);
}

.cxs-blog-theme .author-hero .ah-bio p:last-child {
  margin-bottom: 0;
}

.cxs-blog-theme .author-hero .ah-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-4);
}

.cxs-blog-theme .author-hero .ah-links > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  word-break: break-word;
}

.cxs-blog-theme .author-hero .ah-links > a svg {
  flex: none;
}

.cxs-blog-theme .author-hero .ah-social {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

/* Width comes from the media column, never from a cap here. The old 280px cap
   only ever bit in the stacked layout — from 640 the column is narrower than
   it anyway — where it held the notes to 280px inside a full-bleed column and
   wrapped them early for no reason. */
.cxs-blog-theme .author-hero .ah-linklist {
  max-width: none;
}

.cxs-blog-theme .author-hero .ah-linklist h2 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--s-2);
}

.cxs-blog-theme .author-hero .ah-linklist ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.cxs-blog-theme .author-hero .ah-linklist li {
  border-left: 2px solid var(--action-line);
  padding-left: var(--s-3);
}

/* Sizing lives on the li so the anchor and its unlinked note share one metric.
   Only the leading keyword is the anchor, so it keeps the site's link colour
   and gets the weight step — with a sentence of plain text beside it, colour
   plus weight is what marks which words are actually clickable. */
.cxs-blog-theme .author-hero .ah-linklist li {
  font-size: 15px;
  line-height: 1.5;
}

.cxs-blog-theme .author-hero .ah-linklist a {
  font-weight: 700;
  color: var(--accent);
}

.cxs-blog-theme .author-hero .ah-linklist a:hover {
  text-decoration: underline;
}

.cxs-blog-theme .author-hero .ah-linknote {
  font-weight: 400;
  color: var(--slate);
}

@media (min-width: 640px) {
  .cxs-blog-theme .author-hero .ah-top {
    grid-template-columns: minmax(180px, 240px) 1fr;
    grid-template-areas: "media id";
  }
}

@media (min-width: 768px) {
  .cxs-blog-theme .author-hero .ah-top {
    gap: var(--s-6);
  }

  .cxs-blog-theme .author-hero h1 {
    font-size: 40px;
  }
}

/* Both tracks are bounded from here up, and the slack goes to the gutter.
   A `1fr` identity track measured 976px against a bio that stops at its 75ch
   measure (811px), so ~165px hung off the right of the hero with nothing in
   it, while the media column sat at 240px and wrapped every link-list item to
   five lines. Bounding the identity track at the measure and handing the
   media column 320px fixes both; space-between then parks the remainder
   between the two columns as a real gutter rather than as a dead right edge.
   Below 1216px the tracks overflow and shrink together, so the media column
   still grows monotonically out of the 240px it had at 640. */
@media (min-width: 1024px) {
  .cxs-blog-theme .author-hero .ah-top {
    grid-template-columns: minmax(0, var(--ah-media-col)) minmax(0, var(--ah-measure));
    column-gap: var(--s-8);
    justify-content: space-between;
  }

  /* Portrait grows with its column. 144px is 75% of the 192px it shipped at
     (Anders asked for a 25% smaller headshot, 2026-09). The registered crop is
     320x320 from a 406x597 source, so anything past 320px would upscale and
     needs a bigger `cxs-author-avatar` size plus a thumbnail regen, not more
     CSS. */
  .cxs-blog-theme .author-hero .avatar.xl {
    width: var(--ah-portrait);
    height: var(--ah-portrait);
    font-size: 42px;
  }

  .cxs-blog-theme .author-hero .ah-bio {
    max-width: none;
  }
}

/* ===== Share row (end-of-article social links) ===== */
.cxs-blog-theme .share-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.cxs-blog-theme .share-row .lab {
  font-size: 13px;
  font-weight: 700;
  color: var(--slate);
}

.cxs-blog-theme .share-row a,
.cxs-blog-theme .share-row button,
.cxs-blog-theme .author-hero .ah-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--slate);
  line-height: 1;
  flex: none;
}

.cxs-blog-theme .share-row a:hover,
.cxs-blog-theme .share-row button:hover,
.cxs-blog-theme .author-hero .ah-social a:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

.cxs-blog-theme .author-hero .ah-social a {
  width: 32px;
  height: 32px;
  background: var(--card);
}

.cxs-blog-theme .author-hero .ah-social a svg {
  width: 16px;
  height: 16px;
}

/* ===== Post media (placeholder art: gradient token + inline SVG icon) ===== */
.cxs-blog-theme .pc-media {
  position: relative;
  aspect-ratio: 16 / 9;
  flex: none;
  overflow: hidden;
  background: var(--hero-dark);
  color: var(--on-dark-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cxs-blog-theme .pc-media.alt {
  background: var(--cta);
}

.cxs-blog-theme .pc-media svg {
  width: 30%;
  height: 30%;
  opacity: 0.92;
}

.cxs-blog-theme .pc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

/* ===== Post card (archive grid + related grid, whole-card link) ===== */
.cxs-blog-theme .post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  color: inherit;
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.cxs-blog-theme .post-card:hover,
.cxs-blog-theme .post-card:focus-visible {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}

.cxs-blog-theme .post-card .pc-body {
  padding: var(--s-card);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}

.cxs-blog-theme .post-card .pc-body > .chip {
  align-self: flex-start;
}

.cxs-blog-theme .post-card .pc-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.28;
  text-wrap: balance;
}

.cxs-blog-theme .post-card .pc-excerpt {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.55;
  flex: 1;
}

.cxs-blog-theme .post-card .pc-meta {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12.5px;
  color: var(--muted);
  font-feature-settings: var(--tnum);
}

.cxs-blog-theme .post-card .pc-meta .sep {
  color: var(--accent-line);
}

/* Featured variant -- larger, 2-col from tablet up */
.cxs-blog-theme .post-card.feat .pc-title {
  font-size: 20px;
}

.cxs-blog-theme .post-card.feat .pc-excerpt {
  font-size: 15px;
}

@media (min-width: 768px) {
  .cxs-blog-theme .post-card.feat {
    flex-direction: row;
  }

  .cxs-blog-theme .post-card.feat .pc-media {
    width: 44%;
    aspect-ratio: auto;
  }

  .cxs-blog-theme .post-card.feat .pc-body {
    flex: 1;
    justify-content: center;
    padding: var(--s-8);
  }

  .cxs-blog-theme .post-card.feat .pc-title {
    font-size: 25px;
  }
}

/* ===== Post grid (responsive card grid, 1 -> 2 -> 3 col) ===== */
.cxs-blog-theme .post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}

@media (min-width: 640px) {
  .cxs-blog-theme .post-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .cxs-blog-theme .post-grid.cols-3 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .cxs-blog-theme .post-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== Category tabs (archive filter row) -- horizontal scroll, never
   wraps, so a pill row that doesn't fit scrolls instead of breaking into a
   cramped multi-row block. ===== */
.cxs-blog-theme .cat-tabs {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
  overscroll-behavior-inline: contain;
}

.cxs-blog-theme .cat-tabs::-webkit-scrollbar {
  display: none;
}

.cxs-blog-theme .cat-tabs.is-scrollable {
  cursor: grab;
  user-select: none;
}

.cxs-blog-theme .cat-tabs.is-dragging {
  cursor: grabbing;
}

.cxs-blog-theme .cat-tabs.has-scroll-right {
  -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--s-8)), transparent);
  mask-image: linear-gradient(to right, black calc(100% - var(--s-8)), transparent);
}

.cxs-blog-theme .cat-tabs.has-scroll-left {
  -webkit-mask-image: linear-gradient(to right, transparent, black var(--s-8));
  mask-image: linear-gradient(to right, transparent, black var(--s-8));
}

.cxs-blog-theme .cat-tabs.has-scroll-left.has-scroll-right {
  -webkit-mask-image: linear-gradient(to right, transparent, black var(--s-8), black calc(100% - var(--s-8)), transparent);
  mask-image: linear-gradient(to right, transparent, black var(--s-8), black calc(100% - var(--s-8)), transparent);
}

.cxs-blog-theme .cat-tabs a {
  flex: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}

.cxs-blog-theme .cat-tabs a:hover {
  border-color: var(--accent);
  text-decoration: none;
}

.cxs-blog-theme .cat-tabs a[aria-current="page"] {
  background: var(--accent);
  color: var(--on-navy-hi);
  border-color: var(--accent);
}

/* ===== Pagination ===== */
.cxs-blog-theme .pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  justify-content: center;
}

.cxs-blog-theme .pager a,
.cxs-blog-theme .pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-field);
  font-weight: 700;
  font-size: 14px;
  font-feature-settings: var(--tnum);
  color: var(--slate);
  background: var(--card);
  border: 1px solid var(--line);
}

.cxs-blog-theme .pager a:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

/* WP's paginate_links() renders the current page as a <span>, not an <a> --
   the selector below matches either, so aria-current="page" (added in
   template-parts/blog-archive-main.php alongside the page-numbers ->
   pager-link class rename) works on both element types. */
.cxs-blog-theme .pager [aria-current="page"] {
  background: var(--accent);
  color: var(--on-navy-hi);
  border-color: var(--accent);
}

/* ===== Inline CTA band (job-center conversion unit) ===== */
.cxs-blog-theme .cta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r);
  padding: var(--s-6);
  margin: var(--s-6) 0;
}

.cxs-blog-theme .cta-inline h3 {
  font-size: 19px;
  margin: 0;
}

.cxs-blog-theme .cta-inline p {
  color: var(--slate);
  font-size: 14px;
  margin: 4px 0 0;
}

/* ===== Rail card heading (wraps .poplist) ===== */
.cxs-blog-theme .rail-card h3 {
  font-size: 16px;
  margin-bottom: var(--s-4);
}

/* ===== Blog sidebar search ===== */
.cxs-blog-theme .cxs-blog-search label {
  display: block;
  margin: 0;
  font: inherit;
}

.cxs-blog-theme .cxs-blog-search-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-2);
}

.cxs-blog-theme .cxs-blog-search input[type="search"] {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-field);
  background: var(--card);
  color: var(--ink);
  caret-color: var(--accent);
  font-size: 16px;
  line-height: 1.4;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.cxs-blog-theme .cxs-blog-search input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.cxs-blog-theme .cxs-blog-search input:hover {
  border-color: var(--accent);
}

.cxs-blog-theme .cxs-blog-search input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.cxs-blog-theme .cxs-blog-search .btn {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--r-btn);
  box-shadow: none;
}

/* ===== Rail list (numbered links: editor's picks / more in category) ===== */
.cxs-blog-theme .poplist {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.cxs-blog-theme .poplist li {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}

.cxs-blog-theme .poplist .n {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-feature-settings: var(--tnum);
}

.cxs-blog-theme .poplist a {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

.cxs-blog-theme .poplist a:hover {
  color: var(--accent);
}

/* ===== Newsletter panel (supporting, footer-adjacent conversion unit) ===== */
.cxs-blog-theme .nl-panel {
  background: var(--canvas);
  border: 1px solid var(--action-line);
  border-radius: var(--r);
  padding: var(--s-8);
  text-align: center;
}

.cxs-blog-theme .nl-panel h2 {
  font-size: 23px;
}

.cxs-blog-theme .nl-panel p {
  color: var(--slate);
  font-size: 15px;
  margin-top: 6px;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

.cxs-blog-theme .nl-panel .nl-row {
  display: flex;
  gap: 10px;
  max-width: 420px;
  margin: var(--s-4) auto 0;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

.cxs-blog-theme .nl-panel .wpcf7-form-control-wrap {
  flex: 1;
  min-width: 180px;
}

.cxs-blog-theme .nl-panel input[type="email"] {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--s-4);
  border-radius: var(--r-field);
  border: 1px solid var(--accent-line);
  background: var(--card);
  font-size: 15px;
  color: var(--ink);
}

.cxs-blog-theme .nl-panel input[type="email"]:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.cxs-blog-theme .nl-panel .wpcf7-spinner {
  position: absolute;
}

/* Colour and border carry the state on their own — the status icon and the wide
   left gutter it sat in are gone, so the text starts at the same inset as every
   other side. Matches anders-cf7.css, so a response block reads the same on a
   blog form as on a job form. */
.cxs-blog-theme .wpcf7 form .wpcf7-response-output {
  display: block;
  margin: var(--s-3) 0 0;
  padding: 12px 14px;
  border: 1px solid var(--danger-line);
  border-radius: var(--r-sm);
  background: var(--danger-soft);
  box-shadow: 0 1px 2px rgba(1, 22, 36, 0.04);
  color: var(--danger);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}

.cxs-blog-theme .wpcf7 form .wpcf7-response-output:empty {
  display: none;
}

/* `.resetting` rides along with `.sent`, as in anders-cf7.css: a successful
   send calls form.reset(), which holds the form in `resetting` for the length
   of CF7's refill round trip and writes the success message during it. The base
   rule above re-shows the block CF7 hides in that state, so without this the
   message would be painted in the error colours until the refill lands. */
.cxs-blog-theme .wpcf7 form.sent .wpcf7-response-output,
.cxs-blog-theme .wpcf7 form.resetting .wpcf7-response-output {
  border-color: #a9d8bf;
  background: var(--green-soft);
  color: var(--green);
}

.cxs-blog-theme .wpcf7 .wpcf7-not-valid-tip {
  display: flex;
  align-items: flex-start;
  margin: 6px 2px 0;
  color: var(--danger);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
}

.cxs-blog-theme .wpcf7 .wpcf7-not-valid-tip::before {
  display: none;
  content: none;
}

.cxs-blog-theme .nl-panel input.wpcf7-not-valid,
.cxs-blog-theme .apply input.wpcf7-not-valid,
.cxs-blog-theme .apply select.wpcf7-not-valid,
.cxs-blog-theme .apply textarea.wpcf7-not-valid {
  border-color: var(--danger-line);
  background: var(--danger-soft);
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.08);
}

.cxs-blog-theme .apply .field.is-invalid input.wpcf7-not-valid,
.cxs-blog-theme .apply .field.is-invalid select.wpcf7-not-valid,
.cxs-blog-theme .apply .field.is-invalid textarea.wpcf7-not-valid {
  border-color: var(--danger-line);
  background: var(--danger-soft);
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.08);
}

.cxs-blog-theme .apply .field.is-invalid label {
  color: var(--danger);
}

.cxs-blog-theme .nl-panel .wpcf7 form .wpcf7-response-output {
  box-sizing: border-box;
  width: min(100%, 420px);
  max-width: 420px;
  margin: var(--s-3) auto 0;
}

.cxs-blog-theme .wpcf7 .wpcf7-spinner {
  display: none;
  margin: 0 0 0 var(--s-2);
  vertical-align: middle;
}

.cxs-blog-theme .wpcf7 form.submitting .wpcf7-spinner {
  display: inline-block;
}

.cxs-blog-theme .apply .wpcf7 form.submitting .wpcf7-spinner {
  display: block;
  margin: var(--s-2) auto 0;
}

/* ===== Motion -- everything above animates only when motion is allowed ===== */
@media (prefers-reduced-motion: reduce) {
  .cxs-blog-theme *,
  .cxs-blog-theme *::before,
  .cxs-blog-theme *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}