/* ==========================================================================
   Single blog post template. Also the shared base layer for the blog
   archive (home.php/archive.php/search.php enqueue this before
   blog-archive.css -- see functions.php) since the two mockups
   (blog-article.html/blog-archive.html) duplicate the same .layout/.rail
   sticky-positioning and job-alert card rules verbatim.

   Page-specific layout only -- chrome (.cxs-blogheader/.site-footer/.shell)
   and shared components (.post-card/.byline/.author/.share-row/etc.) live
   in blog-components.css; tokens in blog-tokens.css (both load first, see
   functions.php's enqueue).
   ========================================================================== */

/* ---------- Shared layout: article/main column + sticky rail ----------
   Identical between blog-article.html and blog-archive.html's own style
   blocks; .layout's own padding is page-specific (see single-only /
   archive-only sections below). */
.cxs-blog-theme .layout > article {
  min-width: 0;
  width: 100%;
}

.cxs-blog-theme .rail {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  margin-top: var(--s-8);
}

.cxs-blog-theme .rail-sticky {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

@media (min-width: 1024px) {
  .cxs-blog-theme .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 368px;
    gap: var(--s-8);
    align-items: start;
  }

  .cxs-blog-theme .rail {
    margin-top: 0;
    position: sticky;
    top: calc(var(--ag-header-h, 64px) + 16px);
    align-self: start;
  }

  /* Single posts: search and the salary card scroll with the page, and only
     .rail-sticky (job-alert card + "More in") sticks. The rail stretches to
     the article's height so that group has room to travel. If the group is
     taller than the viewport (alert card expanded on a short screen) it pins
     by its bottom edge instead; single-post.js keeps --cxs-rail-sticky-h
     current, and without it this resolves to the usual header offset. */
  .cxs-blog-theme.single-post .rail {
    position: relative;
    top: auto;
    align-self: stretch;
  }

  .cxs-blog-theme.single-post .rail-sticky {
    position: sticky;
    top: min(calc(var(--ag-header-h, 64px) + 16px), calc(100vh - var(--cxs-rail-sticky-h, 0px) - 16px));
  }
}

/* ---------- Single-post-only layout ---------- */
.cxs-blog-theme .layout {
  padding-top: var(--s-6);
  padding-bottom: var(--s-section);
}

/* Reading measure, capped on the column instead of on individual text
   blocks. Every child then ends on the same right edge -- paragraphs,
   lists, pull-quotes, the takeaways card -- so nothing stops short of its
   neighbours, which is the failure the older per-element max-widths had.

   Without a cap the measure is decided purely by viewport, and the worst
   case is not the widest screen. Measured on a real article: 100ch at a
   1023px viewport, where the rail has stacked below and the article takes
   the entire shell, against 87ch at 1440px where the rail is holding it
   back. 730px is ~75ch at the 18px body in Segoe UI (what system-ui
   resolves to on Windows) and keeps every breakpoint inside 65-75ch.

   Scoped to .single-post because .layout is shared with the blog archive,
   whose article column is a card grid that needs the full width. */
.cxs-blog-theme.single-post .layout > article {
  max-width: 730px;
  /* Centred only while the rail is stacked underneath (below 1024px), where
     a left-hugging column would leave ~245px of dead space on one side and
     read as a broken grid. Once the rail sits beside it the article must go
     back to hugging left, or the gutter between the two collapses. */
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .cxs-blog-theme.single-post .layout > article {
    margin-inline: 0;
  }
}

/* ---------- Breadcrumb ---------- */
.cxs-blog-theme .breadcrumb-band {
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}

.cxs-blog-theme .breadcrumb {
  font-size: 13px;
  color: var(--muted);
}

.cxs-blog-theme .breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.cxs-blog-theme .breadcrumb ol::-webkit-scrollbar {
  display: none;
}

.cxs-blog-theme .breadcrumb li {
  display: flex;
  align-items: center;
}

.cxs-blog-theme .breadcrumb li + li::before {
  content: "›";
  margin-right: 6px;
  color: var(--muted);
}

.cxs-blog-theme .breadcrumb a,
.cxs-blog-theme .breadcrumb [aria-current="page"] {
  display: inline-block;
  padding: 13px 2px;
}

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

.cxs-blog-theme .breadcrumb a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.cxs-blog-theme .breadcrumb [aria-current="page"] {
  color: var(--slate);
  font-weight: 500;
}

.cxs-blog-theme .bc-mid {
  display: none;
}

@media (min-width: 768px) {
  .cxs-blog-theme .breadcrumb ol {
    flex-wrap: wrap;
    white-space: normal;
    overflow: visible;
  }

  .cxs-blog-theme .bc-mid {
    display: flex;
  }
}

/* ---------- Article header ---------- */
.cxs-blog-theme .eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.cxs-blog-theme .eyebrow a {
  color: inherit;
}

.cxs-blog-theme article h1 {
  font-size: 26px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.cxs-blog-theme article .byline {
  margin-top: var(--s-4);
}

@media (min-width: 768px) {
  .cxs-blog-theme article h1 {
    font-size: 34px;
  }
}

/* ---------- Hero figure ---------- */
.cxs-blog-theme .hero-fig {
  margin-top: var(--s-6);
}

.cxs-blog-theme .hero-fig .pc-media {
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.cxs-blog-theme .hero-fig figcaption {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 8px;
}

/* ---------- Prose ----------
   Sizes and leading come from the article type scale in blog-tokens.css;
   the measure that scale is tuned against is the column cap above. Follows
   the previous site's article body, which paired an 18px body with its own
   720px column. */
.cxs-blog-theme .prose {
  margin-top: var(--s-8);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--slate);
  /* Long-form copy: prefer an even last line over a single trailing word.
     Cheap here because it only re-flows the final line of each block. */
  text-wrap: pretty;
}

.cxs-blog-theme .prose .lede {
  margin-bottom: var(--s-4);
}

/* Headings pin their own leading. Inheriting the body's would open a
   two-line h2 to 46px and read as two separate headings; --lh-h2 is the
   ratio tuned for display sizes. Size steps 23 -> 26px alongside the h1's
   own 768px step, so the ladder never collapses: a flat 26px would tie the
   mobile h1 exactly and flatten the top of the hierarchy. */
.cxs-blog-theme .prose h2 {
  font-size: var(--t-h2-sm);
  line-height: var(--lh-h2);
  margin: var(--s-8) 0 var(--s-4);
  scroll-margin-top: 90px;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .cxs-blog-theme .prose h2 {
    font-size: var(--t-h2);
  }
}

/* One step above the body, not equal to it: at 18px an h3 would differ from
   its own paragraphs by weight alone and stop reading as a heading.

   :not(.rank-math-question) excludes RankMath FAQ questions, which are h3s
   inside a component that owns its own row height (see faq-rankmath.css).
   They want this size -- and get it from their own rule -- but not the
   article's heading rhythm: the 24px/12px margins here were landing on every
   collapsed FAQ row, adding 12px of dead space per item to a list whose row
   height is otherwise governed by a 44px touch target. Excluding them here
   rather than fighting it from the component side keeps one owner for the
   spacing instead of two rules escalating specificity at each other. */
.cxs-blog-theme .prose h3:not(.rank-math-question) {
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  margin: var(--s-6) 0 var(--s-3);
  text-wrap: balance;
}

.cxs-blog-theme .prose p {
  margin-bottom: 22px;
  color: var(--slate);
}

.cxs-blog-theme .prose a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-underline-offset: 3px;
}

.cxs-blog-theme .prose a:hover {
  text-decoration-color: var(--accent-d);
}

.cxs-blog-theme .prose ul,
.cxs-blog-theme .prose ol {
  margin: 0 0 22px;
}

.cxs-blog-theme .prose li {
  margin-bottom: 10px;
}

.cxs-blog-theme .prose ul {
  list-style: none;
}

.cxs-blog-theme .prose ul li {
  position: relative;
  padding-left: 22px;
}

.cxs-blog-theme .prose ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.7em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent-d);
}

/* Numbers restored. blog-components.css zeroes list-style on every ul/ol
   under the blog body so nav, card and rail lists come up clean, and .prose
   then re-adds a marker per list type: the square via ::before above for ul,
   decimal here for ol. Only the ul half of that pair existed, so editor
   ordered lists rendered unnumbered.

   In an ordered list the sequence IS content, not decoration -- an eight-step
   procedure whose step 6 reads "do not deduct the same week again" does not
   survive losing its numbers. Treat a bare `list-style: none` on ol as a bug
   wherever prose can reach it. */
.cxs-blog-theme .prose ol {
  list-style: decimal;
  padding-left: 22px;
}

/* Nested levels take their own marker so depth stays legible. */
.cxs-blog-theme .prose ol ol {
  list-style: lower-alpha;
  margin-top: 10px;
}

.cxs-blog-theme .prose ol li {
  padding-left: 4px;
}

/* The marker inherits li colour, which is --slate on a bold-led step; nudging
   it to ink keeps the number as legible as the label it introduces. */
.cxs-blog-theme .prose ol li::marker {
  color: var(--ink);
  font-weight: 700;
  font-feature-settings: var(--tnum);
}

.cxs-blog-theme .prose img {
  border-radius: var(--r);
  margin: 26px 0;
}

/* .cta-inline is a self-contained component (see blog-components.css) --
   its own h3/p must not inherit the article's heading/paragraph rhythm
   above. Same specificity as .prose h3/p, so an equally-scoped override
   here (rather than relying on cascade order across files) guarantees it
   wins regardless of link order. */
.cxs-blog-theme .prose .cta-inline h3 {
  margin: 0;
}

.cxs-blog-theme .prose .cta-inline p {
  max-width: none;
  margin: 4px 0 0;
}

/* Key takeaways: full border + tint carries the emphasis (no colored
   stripe or checkmark bullets -- flowing prose paragraphs, not a list). */
.cxs-blog-theme .takeaways {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-6);
  margin: var(--s-6) 0 var(--s-8);
}

.cxs-blog-theme .takeaways h2 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s-3);
}

/* One step under the article body -- still reads as a quieter summary,
   without the shrunken look 15.5px had once the prose scaled up. Leading
   tracks the prose: the card sits in the same capped column, so its lines
   are the same length and need the same room. */
.cxs-blog-theme .takeaways p {
  font-size: var(--t-summary);
  color: var(--ink);
  line-height: var(--lh-summary);
  text-wrap: pretty;
}

.cxs-blog-theme .takeaways p + p {
  margin-top: 10px;
}

/* Data callout: bold ink figure, not --emph (that token is pay-figure-only
   elsewhere on the site). */
.cxs-blog-theme .datacard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  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 .datacard .fig {
  font-size: 34px;
  font-weight: 700;
  color: var(--ink);
  font-feature-settings: var(--tnum);
  line-height: 1;
  white-space: nowrap;
}

.cxs-blog-theme .datacard .dt {
  font-size: 14.5px;
  color: var(--slate);
  max-width: 44ch;
}

/* Pull-quote: full top/bottom rule, no colored side stripe. !important on
   border-left only: Astra's per-post dynamic CSS
   (astra-theme-dynamic-css-post-{id}.css) injects
   `.wp-block-quote:not(.has-text-align-right):not(.has-text-align-center){
   border-left:5px solid rgba(0,0,0,.05)}` at higher specificity than a
   plain class selector, so it silently wins for border-left specifically
   unless pinned. */
.cxs-blog-theme .pullquote,
.cxs-blog-theme .prose .wp-block-quote {
  margin: var(--s-8) 0;
  padding: var(--s-6) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: none !important;
  font-size: var(--t-quote);
  font-weight: 600;
  color: var(--ink);
  line-height: var(--lh-quote);
  text-wrap: balance;
}

/* Inline related-reading strip */
.cxs-blog-theme .inrel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  padding: var(--s-4) var(--s-6);
  margin: var(--s-8) 0;
}

.cxs-blog-theme .inrel .lab {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.cxs-blog-theme .inrel a {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  padding: 4px 0;
}

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

/*
 * Native Gutenberg table block, styled as a comparison table. The mockup's
 * static .prose never needed table/embed rules (its content is
 * hand-authored HTML), but real post content uses Gutenberg blocks, so
 * these are layered on top of the prose type scale above rather than
 * dropped. The shadow/radius/clip live on the .wp-block-table figure
 * wrapper rather than the <table> itself (border-radius clips unreliably
 * with border-collapse on table elements). Cells reset `border` to none
 * before re-adding a bottom rule: core's block-library CSS
 * (`.wp-block-table td,th{border:1px solid}`) sets all four sides.
 */
.cxs-blog-theme .prose .wp-block-table {
  margin: 26px 0;
  border-radius: var(--r);
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: var(--shadow);
  scrollbar-width: thin;
}

/*
 * Tables with 5+ columns can't fit a phone viewport without crushing every
 * cell to one letter per line, so give them a floor and let the figure
 * wrapper scroll sideways instead. table-layout must revert to auto
 * because the editor's .has-fixed-layout would split the floor into
 * equal-width columns regardless of content.
 */
.cxs-blog-theme .prose .wp-block-table:has(tr > :nth-child(5)) table {
  min-width: 640px;
  table-layout: auto;
}

.cxs-blog-theme .prose .wp-block-table:has(tr > :nth-child(5)) td,
.cxs-blog-theme .prose .wp-block-table:has(tr > :nth-child(5)) th {
  word-break: normal;
}

.cxs-blog-theme .prose .wp-block-table table,
.cxs-blog-theme .prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  margin: 0;
}

.cxs-blog-theme .prose table {
  margin: 26px 0;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.cxs-blog-theme .prose .wp-block-table td,
.cxs-blog-theme .prose .wp-block-table th,
.cxs-blog-theme .prose table td,
.cxs-blog-theme .prose table th {
  border: none;
  padding: 12px 16px;
  text-align: left;
}

.cxs-blog-theme .prose .wp-block-table th,
.cxs-blog-theme .prose table th,
.cxs-blog-theme .prose .wp-block-table tr:first-child td,
.cxs-blog-theme .prose table tr:first-child td {
  background: var(--navy);
  color: var(--on-dark);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.cxs-blog-theme .prose .wp-block-table td,
.cxs-blog-theme .prose table td {
  border-bottom: 1px solid var(--line);
}

.cxs-blog-theme .prose .wp-block-table tr:nth-child(even) td,
.cxs-blog-theme .prose table tr:nth-child(even) td {
  background: var(--panel);
}

.cxs-blog-theme .prose .wp-block-embed {
  margin: 26px 0;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.cxs-blog-theme .article-foot {
  margin-top: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

/* ---------- Related grid (full-width, below the two-column zone) ---------- */
.cxs-blog-theme .related {
  padding-block: var(--s-section);
}

.cxs-blog-theme .related .section-head {
  margin-bottom: var(--s-6);
}

/* ---------- Newsletter ---------- */
.cxs-blog-theme .nl-section {
  padding-bottom: var(--s-section);
}

/* ---------- Job-alert card ("apply"/"crown") ----------
   This is a dedicated Anders Blog CF7 form whose canonical markup lives in
   scripts/create-blog-forms.php. The .field/.ja-more structure deliberately
   matches the source-design HTML instead of reusing the jobs archive form. */
.cxs-blog-theme .apply {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: visible;
  scroll-margin-top: 90px;
}

.cxs-blog-theme .apply .crown {
  background: var(--hero-dark);
  color: var(--on-dark-2);
  padding: var(--s-6);
  border-radius: var(--r) var(--r) 0 0;
}

.cxs-blog-theme .apply .crown h3 {
  color: var(--on-dark);
  font-size: 18px;
  margin: 0 0 4px;
}

.cxs-blog-theme .apply .crown p {
  font-size: 13.5px;
  color: var(--on-dark-2);
  margin: 0;
  line-height: 1.5;
}

.cxs-blog-theme .apply-body {
  padding: var(--s-6);
}

/* CF7's own field markup, phone-first: the phone field (.alertrow) is the
   one visible field before the card opens -- matches the mockup's "phone
   required up front" pattern more closely than the original email-first
   collapsed state. Name/email/location/consent/submit
   (.alertgrid__inner) stay hidden until .open (added by
   single-post.js's openAlertCard() on first interaction). */
.cxs-blog-theme .apply .alertrow {
  display: block;
  margin-bottom: 0;
}

/* single-post.js relocates the phone field out of .alertrow into
   .alertgrid__inner the first time the card opens (see openAlertCard());
   the now-empty wrapper is hidden rather than left as a blank gap. */
.cxs-blog-theme .apply.open .alertrow {
  display: none;
}

.cxs-blog-theme .apply .alertgrid__inner {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.3s ease,
    opacity 0.2s ease,
    margin-top 0.3s ease;
}

.cxs-blog-theme .apply.open .alertgrid__inner {
  margin-top: 9px;
  max-height: 600px;
  overflow: visible;
  opacity: 1;
}

.cxs-blog-theme .apply .alertgrid__inner .wpcf7-form-control-wrap {
  display: block;
}

.cxs-blog-theme .apply .cxs-alert-field {
  position: relative;
}

.cxs-blog-theme .apply input[type="text"],
.cxs-blog-theme .apply input[type="tel"],
.cxs-blog-theme .apply input[type="email"],
.cxs-blog-theme .apply select,
.cxs-blog-theme .apply .advs-trigger {
  width: 100%;
  min-height: 52px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-field);
  padding: 0 13px;
  font-size: 15px;
  background: var(--card);
  color: var(--ink);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.cxs-blog-theme .apply select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23526374' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px;
}

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

/* The advSelect dropdown's search field lives on its own white panel, but
   the generic input skin above bleeds onto it too (border + focus ring).
   Strip it back to the panel's own plain field styling. */
.cxs-blog-theme .apply .advs-search input[type="text"] {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  padding: 2px 0;
  min-height: 0;
}

.cxs-blog-theme .apply .advs-search input[type="text"]:focus {
  outline: none;
  border: none;
  box-shadow: none;
  background-color: transparent;
}

/* blog-components.css zeroes list padding for the whole blog theme
   (`body.cxs-blog-theme ul`), which outweighs the dropdown component's own
   `.advs-list` gutter. Without it the hover/selected pill runs edge-to-edge
   against the panel border instead of sitting inset like it does on the
   other pages that use advSelect. Restore the component's own spacing. */
body.cxs-blog-theme .advs-list {
  padding: 6px;
}

.cxs-blog-theme .apply input[type="text"]:focus,
.cxs-blog-theme .apply input[type="tel"]:focus,
.cxs-blog-theme .apply input[type="email"]:focus,
.cxs-blog-theme .apply select:focus,
.cxs-blog-theme .apply .advs-trigger.is-open,
.cxs-blog-theme .apply .advs-trigger:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.cxs-blog-theme .apply .alertconsent,
.cxs-blog-theme .apply .alertconsent label,
.cxs-blog-theme .apply .alertconsent .wpcf7-list-item-label {
  font-size: 12px;
  color: var(--slate);
  font-weight: 400;
  line-height: 1.5;
}

.cxs-blog-theme .apply .alertconsent .wpcf7-list-item {
  margin: 0;
}

.cxs-blog-theme .apply .alertconsent label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.cxs-blog-theme .apply .alertconsent input {
  accent-color: var(--accent);
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
  flex: none;
}

.cxs-blog-theme .apply input[type="submit"] {
  width: 100%;
  min-height: 52px;
  background: var(--action-cta);
  color: var(--action-ink);
  font-weight: 700;
  font-size: 16px;
  padding: 15px;
  border-radius: var(--r-btn);
  border: none;
  cursor: pointer;
  box-shadow: var(--action-shadow);
  transition: 0.18s ease;
}

.cxs-blog-theme .apply input[type="submit"]:hover {
  background: var(--action-d);
  transform: translateY(-1px);
}

.cxs-blog-theme .apply .ja-fine {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 10px;
  text-align: center;
}

/* CF7 inserts a form-control wrapper around each input, so the source
   design's adjacent floating-label selectors are expressed through the
   .field state instead. single-post.js keeps .is-filled current. */
.cxs-blog-theme .apply .field {
  position: relative;
  margin-bottom: 11px;
}

.cxs-blog-theme .apply .field > .wpcf7-form-control-wrap {
  display: block;
}

.cxs-blog-theme .apply .field input,
.cxs-blog-theme .apply .field select,
.cxs-blog-theme .apply .field textarea {
  width: 100%;
  min-height: 52px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-field);
  padding: 20px 13px 7px;
  font-size: 15px;
  color: var(--ink);
  background-color: var(--card);
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.cxs-blog-theme .apply .field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
}

/* Without JavaScript, Desired states remains a usable native listbox. Once
   advSelect enhances it, the native control leaves the page flow as usual. */
.cxs-blog-theme .apply .field select[multiple]:not(.advs-native) {
  min-height: 132px;
  padding: 24px 13px 10px;
  background-image: none;
}

/* The enhanced select is a button rather than a native field, so give its
   value the same lower text line as the filled inputs above. This keeps each
   selected taxonomy value clear of the floated label instead of vertically
   centering both pieces of text in the control. */
.cxs-blog-theme .apply .field .advs-trigger {
  padding: 20px 32px 7px 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23526374' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px;
}

/* Desired states names remain visible as the visitor builds a multiselect.
   The reusable select component keeps its compact count for other forms. */
.cxs-blog-theme .apply .cxs-job-alert-states + .advs-trigger .advs-value {
  white-space: normal;
  line-height: 1.35;
}

.cxs-blog-theme .apply .field .advs-trigger:disabled {
  cursor: not-allowed;
  color: var(--slate);
  background-color: var(--canvas);
  box-shadow: none;
}

.cxs-blog-theme .apply .field.is-invalid .advs-trigger {
  border-color: var(--danger-line);
  background-color: var(--danger-soft);
  box-shadow: 0 0 0 3px rgba(180, 35, 24, .08);
}

.cxs-blog-theme .apply .field label {
  position: absolute;
  left: 13px;
  top: 26px;
  z-index: 1;
  transform: translateY(-50%);
  font-size: 15px;
  color: var(--muted);
  pointer-events: none;
  transition: 0.15s ease;
}

.cxs-blog-theme .apply .field:focus-within label,
.cxs-blog-theme .apply .field.is-filled label,
.cxs-blog-theme .apply .field.filled label {
  top: 7px;
  transform: none;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.cxs-blog-theme .apply .field .opt {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 500;
}

.cxs-blog-theme .apply .row2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.cxs-blog-theme .apply .row2 > .field {
  min-width: 0;
}

/* Email is full-width in the no-JS fallback. The script completes this row by
   moving the focused Mobile number field beside it when the card expands. */
.cxs-blog-theme .apply .cxs-blog-alert-contact-row:not(.is-complete) {
  grid-template-columns: minmax(0, 1fr);
}

.cxs-blog-theme .apply .ja-more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.3s ease,
    opacity 0.2s ease;
}

.cxs-blog-theme .apply .ja-more > div {
  min-height: 0;
  overflow: hidden;
}

.cxs-blog-theme .apply:focus-within .ja-more,
.cxs-blog-theme .apply.ja-open .ja-more {
  grid-template-rows: 1fr;
  opacity: 1;
}

.cxs-blog-theme .apply:focus-within .ja-more > div,
.cxs-blog-theme .apply.ja-open .ja-more > div {
  overflow: visible;
}

@media (max-width: 479px) {
  .cxs-blog-theme .apply .row2 {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .cxs-blog-theme .apply .field input,
  .cxs-blog-theme .apply .field select,
  .cxs-blog-theme .apply .field textarea,
  .cxs-blog-theme .apply .field .advs-trigger {
    font-size: 16px;
  }
}

/* ---------- Salary reports rail card ----------
   template-parts/blog-salary-reports.php. The palette is the client's ad
   design, kept verbatim and deliberately not the blog tokens; it is declared
   once here so the rules below only reference these properties. */
.cxs-blog-theme .cxs-salary-ad {
  --sa-accent: #aee63a;
  --sa-accent-ink: #0b2340;
  --sa-top: #13365f;
  --sa-bottom: #0c2542;
  --sa-glow: rgba(96, 160, 92, 0.38);
  --sa-glow-end: rgba(96, 160, 92, 0);
  --sa-sub: #a9bcd3;
  --sa-bar-top: #c6ef5e;
  --sa-bar-bottom: #4d7c4c;
  --sa-text: #fff;
  --sa-axis: rgba(255, 255, 255, 0.25);
  --sa-item: rgba(255, 255, 255, 0.06);
  --sa-item-line: rgba(255, 255, 255, 0.09);
  --sa-item-hover: rgba(174, 230, 58, 0.1);
  --sa-item-hover-line: rgba(174, 230, 58, 0.45);

  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding: 22px 18px 18px;
  border-radius: var(--r);
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 4%, var(--sa-glow), var(--sa-glow-end) 40%),
    linear-gradient(180deg, var(--sa-top) 0%, var(--sa-bottom) 100%);
  color: var(--sa-text);
  line-height: 1.3;
}

.cxs-blog-theme .cxs-salary-ad__eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sa-accent);
}

.cxs-blog-theme .cxs-salary-ad__title {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--sa-text);
}

.cxs-blog-theme .cxs-salary-ad__sub {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--sa-sub);
}

.cxs-blog-theme .cxs-salary-ad__chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 64px;
  border-bottom: 1px solid var(--sa-axis);
}

.cxs-blog-theme .cxs-salary-ad__chart span {
  flex: 1;
  min-height: 2px;
  border-radius: 4px 4px 1px 1px;
  background: linear-gradient(180deg, var(--sa-bar-top), var(--sa-bar-bottom));
}

.cxs-blog-theme .cxs-salary-ad__chart span:nth-child(1) { height: 27%; }
.cxs-blog-theme .cxs-salary-ad__chart span:nth-child(2) { height: 66%; }
.cxs-blog-theme .cxs-salary-ad__chart span:nth-child(3) { height: 100%; }
.cxs-blog-theme .cxs-salary-ad__chart span:nth-child(4) { height: 46%; }
.cxs-blog-theme .cxs-salary-ad__chart span:nth-child(5) { height: 12%; }
.cxs-blog-theme .cxs-salary-ad__chart span:nth-child(6) { height: 4%; }

.cxs-blog-theme .cxs-salary-ad__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cxs-blog-theme .cxs-salary-ad__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 10px 10px 10px 14px;
  border: 1px solid var(--sa-item-line);
  border-radius: 12px;
  background: var(--sa-item);
  color: var(--sa-text);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.cxs-blog-theme .cxs-salary-ad__item:hover {
  background: var(--sa-item-hover);
  border-color: var(--sa-item-hover-line);
  color: var(--sa-text);
  text-decoration: none;
}

.cxs-blog-theme .cxs-salary-ad__item:focus-visible {
  outline: 3px solid var(--sa-text);
  outline-offset: 2px;
  border-radius: 12px;
}

.cxs-blog-theme .cxs-salary-ad__name {
  font-size: 15px;
  font-weight: 700;
}

.cxs-blog-theme .cxs-salary-ad__arrow {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  background: var(--sa-accent);
  color: var(--sa-accent-ink);
}

@media (prefers-reduced-motion: reduce) {
  .cxs-blog-theme .cxs-salary-ad__item {
    transition: none;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .cxs-blog-theme .rail {
    margin-top: var(--s-8);
  }
}