/* ==========================================================================
   Apex blog components
   Drop-in stylesheet for the apex-auto-pros theme.

   Install: copy to wp-content/themes/apex-auto-pros/assets/css/blog.css and
   enqueue it on is_singular('post') || is_home() || is_archive().

   Contract: the renderer emits ONLY these class names and never inline
   styles. Restyling the blog means editing this file, not 124 posts.
   ========================================================================== */

:root {
  --apex-blog-ink: var(--apex-site-ink, #07090c);
  --apex-blog-paper: var(--apex-site-paper, #f4f2ec);
  --apex-blog-signal: var(--apex-site-signal, #c9ff36);
  --apex-blog-muted: #5d646d;
  --apex-blog-line: rgba(7, 9, 12, 0.14);
  --apex-blog-line-strong: rgba(7, 9, 12, 0.32);
  --apex-blog-panel: #fff;
  --apex-blog-pro: #1c6b3f;
  --apex-blog-con: #a3312a;
  --apex-blog-warn-bg: #fdf6dd;
  --apex-blog-warn-line: #c9a227;
  --apex-blog-radius: 2px;
  --apex-blog-gap: clamp(1.25rem, 3vw, 2rem);

  /* note severities. The renderer emits five and only five type values
     (build map section 2 C11): caution | warning | tip | danger | info.
     Before 1.1.0 none of the modifiers had a rule, so a "danger" note about
     acid wheel cleaner etching polished aluminium looked identical to a tip. */
  --apex-blog-note-caution-bg: #fdf6dd;
  --apex-blog-note-caution-line: #c9a227;
  --apex-blog-note-warning-bg: #fdece0;
  --apex-blog-note-warning-line: #c2600d;
  --apex-blog-note-danger-bg: #fbeae8;
  --apex-blog-note-danger-line: #a3312a;
  --apex-blog-note-tip-bg: #e8f2ec;
  --apex-blog-note-tip-line: #1c6b3f;
  --apex-blog-note-info-bg: #e9eef4;
  --apex-blog-note-info-line: #35506b;
}

/* --------------------------------------------------------------------------
   flow and typography
   -------------------------------------------------------------------------- */

.apex-article-content {
  color: var(--apex-blog-ink);
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
}

.apex-article-content > * + * { margin-block-start: 1.15em; }

.apex-article-content p { max-width: 68ch; }

.apex-article-content .apex-h2 {
  margin-block-start: 2.4em;
  margin-block-end: 0.6em;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
  scroll-margin-top: 5rem;
}

.apex-article-content .apex-h3 {
  margin-block-start: 2em;
  margin-block-end: 0.5em;
  font-size: 1.2rem;
  font-weight: 700;
  scroll-margin-top: 5rem;
}

.apex-lede {
  font-size: 1.25rem;
  line-height: 1.45;
  font-weight: 500;
}

.apex-blog-hero img {
  width: 100%;
  height: auto;
  border-radius: var(--apex-blog-radius);
}

/* --------------------------------------------------------------------------
   FTC affiliate disclosure  (renderer 1.1.0, build map section 3.8)

   Plain text, never a link or a <details>: the FTC rejects hyperlinked and
   easily-avoidable disclosures. Quiet, but above the first affiliate link and
   never visually hidden.
   -------------------------------------------------------------------------- */

.apex-disclosure {
  margin-block: 1.4rem;
  padding-block: 0.7rem;
  border-block: 1px solid var(--apex-blog-line);
  max-width: none;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--apex-blog-muted);
}

/* --------------------------------------------------------------------------
   credentials
   -------------------------------------------------------------------------- */

.apex-credentials {
  border-inline-start: 3px solid var(--apex-blog-signal);
  background: var(--apex-blog-panel);
  padding: 1.15rem 1.4rem;
  border-radius: var(--apex-blog-radius);
}

.apex-credentials__title {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--apex-blog-muted);
}

.apex-credentials__list {
  margin: 0;
  padding-inline-start: 1.1rem;
  font-size: 0.95rem;
  display: grid;
  gap: 0.3rem;
}

/* --------------------------------------------------------------------------
   jump-to navigation
   -------------------------------------------------------------------------- */

.apex-jump {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  border-block: 1px solid var(--apex-blog-line);
  padding-block: 1rem;
}

.apex-jump a {
  color: inherit;
  text-decoration: none;
  border-block-end: 1px solid var(--apex-blog-line-strong);
}

.apex-jump a:hover { border-block-end-color: var(--apex-blog-ink); }

/* --------------------------------------------------------------------------
   top picks
   -------------------------------------------------------------------------- */

.apex-picks { margin-block: 2.5rem; }

.apex-picks__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--apex-blog-line);
}

.apex-pick {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: var(--apex-blog-gap);
  align-items: center;
  padding-block: 1.1rem;
  border-block-end: 1px solid var(--apex-blog-line);
}

.apex-pick[data-hidden]:not([data-open]) { display: none; }

.apex-pick__media img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  display: block;
}

.apex-pick__category {
  margin: 0 0 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--apex-blog-muted);
}

.apex-pick__name {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 700;
}

.apex-pick__more { margin: 0; font-size: 0.88rem; }
.apex-pick__more a { color: inherit; }

.apex-picks__toggle {
  margin-block-start: 1.1rem;
  width: 100%;
  padding: 0.75rem 1rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--apex-blog-ink);
  background: transparent;
  border: 1px solid var(--apex-blog-line-strong);
  border-radius: var(--apex-blog-radius);
  cursor: pointer;
}

.apex-picks__toggle:hover { background: var(--apex-blog-signal); border-color: var(--apex-blog-ink); }

/* --------------------------------------------------------------------------
   buy buttons  (the money element - keep prominent)
   -------------------------------------------------------------------------- */

.apex-buy {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--apex-blog-ink);
  background: var(--apex-blog-signal);
  border: 1px solid var(--apex-blog-ink);
  border-radius: var(--apex-blog-radius);
  white-space: nowrap;
}

.apex-buy:hover { filter: brightness(0.94); }
.apex-buy--primary { padding: 0.75rem 1.25rem; font-size: 0.95rem; }

/* The label half. Unstyled until 1.1.0 even though its `__price` sibling was
   styled: on a narrow screen `.apex-buy` goes full width, and without this the
   long "Check price at Amazon" label pushed the price out of the button. */
.apex-buy__retailer {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.apex-buy__price {
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

/* Only emitted when price_state is "stamped": a price the pipeline captured at
   a known moment must say when. Suppressed prices emit neither span. */
.apex-buy__asof {
  margin: 0.4rem 0 0;
  max-width: none;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--apex-blog-muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   comparison table
   -------------------------------------------------------------------------- */

.apex-compare { overflow-x: auto; margin-block: 1.5rem; }

.apex-compare table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.apex-compare th,
.apex-compare td {
  padding: 0.7rem 0.85rem;
  text-align: left;
  border-block-end: 1px solid var(--apex-blog-line);
}

.apex-compare thead th {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--apex-blog-muted);
  border-block-end: 1px solid var(--apex-blog-line-strong);
}

.apex-compare tbody th { font-weight: 700; }
.apex-compare tbody tr:nth-child(even) { background: rgba(7, 9, 12, 0.025); }

/* --------------------------------------------------------------------------
   product insert
   -------------------------------------------------------------------------- */

.apex-product {
  margin-block: 2.5rem;
  border: 1px solid var(--apex-blog-line-strong);
  border-radius: var(--apex-blog-radius);
  background: var(--apex-blog-panel);
  scroll-margin-top: 5rem;
}

.apex-product__head {
  display: grid;
  grid-template-columns: minmax(0, 34%) 1fr;
  gap: var(--apex-blog-gap);
  align-items: center;
  padding: var(--apex-blog-gap);
}

.apex-product__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* The text column of the insert head. `min-width: 0` is what stops a long
   product name from blowing out the grid track instead of wrapping. */
.apex-product__intro { min-width: 0; }

.apex-product__category {
  margin: 0 0 0.4rem;
  display: inline-block;
  padding: 0.25rem 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--apex-blog-ink);
  background: var(--apex-blog-signal);
  border-radius: var(--apex-blog-radius);
}

.apex-product__name {
  margin: 0 0 0.9rem;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  line-height: 1.18;
  font-weight: 700;
}

.apex-product__credit {
  margin: 0.7rem 0 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--apex-blog-muted);
}

.apex-product__notes {
  padding: 0 var(--apex-blog-gap) var(--apex-blog-gap);
  font-size: 0.95rem;
}

.apex-product__notes p { margin: 0 0 0.6rem; max-width: none; }
.apex-product__notes p:last-child { margin-bottom: 0; }

/* pros / cons */

.apex-verdict {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-block-start: 1px solid var(--apex-blog-line);
}

.apex-verdict__col { padding: 1.1rem var(--apex-blog-gap); }
.apex-verdict__col--pro { border-inline-end: 1px solid var(--apex-blog-line); }

.apex-verdict__title {
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.apex-verdict__col--pro .apex-verdict__title { color: var(--apex-blog-pro); }
.apex-verdict__col--con .apex-verdict__title { color: var(--apex-blog-con); }

.apex-verdict__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
  font-size: 0.93rem;
}

.apex-verdict__list li { padding-inline-start: 1.35rem; position: relative; }

.apex-verdict__list li::before {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  font-weight: 700;
}

.apex-verdict__col--pro li::before { content: "+"; color: var(--apex-blog-pro); }
.apex-verdict__col--con li::before { content: "\2212"; color: var(--apex-blog-con); }

/* --------------------------------------------------------------------------
   warnings / notes
   -------------------------------------------------------------------------- */

.apex-notes { display: grid; gap: 0.6rem; margin-block: 1.5rem; }

.apex-note {
  margin: 0 var(--apex-blog-gap) var(--apex-blog-gap);
  padding: 0.85rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 500;
  background: var(--apex-blog-warn-bg);
  border-inline-start: 3px solid var(--apex-blog-warn-line);
  border-radius: var(--apex-blog-radius);
  max-width: none;
}

.apex-notes .apex-note { margin: 0; }

/* Severity modifiers. `caution` is the base amber and is spelled out anyway so
   the set is exhaustive and greppable. An unknown type keeps the base look. */

.apex-note--caution {
  background: var(--apex-blog-note-caution-bg);
  border-inline-start-color: var(--apex-blog-note-caution-line);
}

.apex-note--warning {
  background: var(--apex-blog-note-warning-bg);
  border-inline-start-color: var(--apex-blog-note-warning-line);
}

.apex-note--danger {
  background: var(--apex-blog-note-danger-bg);
  border-inline-start-color: var(--apex-blog-note-danger-line);
  border-inline-start-width: 4px;
  font-weight: 600;
}

.apex-note--tip {
  background: var(--apex-blog-note-tip-bg);
  border-inline-start-color: var(--apex-blog-note-tip-line);
}

.apex-note--info {
  background: var(--apex-blog-note-info-bg);
  border-inline-start-color: var(--apex-blog-note-info-line);
}

/* --------------------------------------------------------------------------
   common mistakes
   -------------------------------------------------------------------------- */

.apex-mistakes {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: apex-mistake;
  display: grid;
  gap: 1.1rem;
}

.apex-mistakes li {
  counter-increment: apex-mistake;
  padding-inline-start: 3rem;
  position: relative;
}

.apex-mistakes li::before {
  content: counter(apex-mistake, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  top: 0.05em;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--apex-blog-muted);
  font-variant-numeric: tabular-nums;
}

.apex-mistakes h3 { margin: 0 0 0.3rem; font-size: 1.02rem; font-weight: 700; }
.apex-mistakes p { margin: 0; font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.apex-faq { border-block-start: 1px solid var(--apex-blog-line); }

.apex-faq__item { border-block-end: 1px solid var(--apex-blog-line); }

.apex-faq__item summary {
  padding: 0.95rem 2rem 0.95rem 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.apex-faq__item summary::-webkit-details-marker { display: none; }

.apex-faq__item summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: 0;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1;
  top: 0.85rem;
}

.apex-faq__item[open] summary::after { content: "\2212"; }

.apex-faq__answer { padding-block-end: 1rem; font-size: 0.97rem; }
.apex-faq__answer p { margin: 0; }

/* --------------------------------------------------------------------------
   related guides  (internal linking - do not remove, it drives indexing)
   -------------------------------------------------------------------------- */

.apex-related {
  list-style: none;
  margin: 0;
  padding: 1rem 0 0;
  display: grid;
  gap: 0.5rem;
  border-block-start: 1px solid var(--apex-blog-line);
}

.apex-related a { color: inherit; }

/* --------------------------------------------------------------------------
   responsive
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .apex-pick {
    grid-template-columns: 64px 1fr;
    grid-template-areas: "media body" "buy buy";
    row-gap: 0.8rem;
  }
  .apex-pick__media { grid-area: media; }
  .apex-pick__body { grid-area: body; }
  .apex-pick__buy { grid-area: buy; }
  .apex-pick__media img { width: 64px; height: 64px; }
  .apex-buy { width: 100%; justify-content: center; }

  .apex-product__head { grid-template-columns: 1fr; }
  .apex-verdict { grid-template-columns: 1fr; }
  .apex-verdict__col--pro {
    border-inline-end: 0;
    border-block-end: 1px solid var(--apex-blog-line);
  }
}

/* --------------------------------------------------------------------------
   NO DARK SCHEME. Deliberate. Do not add one back without also giving
   `.apex-article` a dark ground.

   Until renderer 1.1.0 this file ended with a `@media (prefers-color-scheme:
   dark)` block that redefined `--apex-blog-ink` to `#eef1f4` on
   `:root:not([data-theme="light"]) .apex-article-content`. The comment above
   it said "only if the theme opts in" -- but the theme has no way to opt out:
   `color-scheme: light` does not suppress the media query, the theme never
   stamps `data-theme`, and `.apex-article` takes a hard-coded `#f4f2ec`
   background from `site.css`. Net effect for every visitor whose OS is in dark
   mode -- a large share of mobile -- was #eef1f4 text on #f4f2ec paper across
   all 124 posts. Removed per dossier 11 section 2.4 / build map risk R9.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   BEGIN LEGACY SHIM  (dossier 11 sections 5.1 and 5.3)

   Nothing below this marker styles renderer output. It keeps the ~1,038
   affiliate buy buttons in the pre-renderer BlogCreator markup readable during
   the window between the theme cutover and the last post being re-rendered.

   Why it is needed: every legacy button carries the WordPress core
   default-palette slugs `has-vivid-cyan-blue-background-color has-white-color`.
   The new theme sets `theme.json: "defaultPalette": false`, so WordPress emits
   neither the custom properties nor the `.has-*` rules, and the buttons become
   white text with no background on #f4f2ec paper. That is the whole affiliate
   surface of 83 posts going invisible on cutover day.

   Corollary: never rename or remove the ink / paper / signal / muted slugs in
   theme.json while legacy posts exist. Slugs are baked into post content as
   class names. Change the hex, keep the slug.

   DELETE THIS BLOCK once no legacy-markup post remains.
   -------------------------------------------------------------------------- */

.apex-article-content .wp-block-button__link.has-vivid-cyan-blue-background-color {
  background-color: var(--apex-blog-signal);
  color: var(--apex-blog-ink);
  border: 1px solid var(--apex-blog-ink);
  border-radius: var(--apex-blog-radius);
}

.apex-article-content .wp-block-button__link.has-white-color { color: var(--apex-blog-ink); }

/* The legacy "View More Products" control is a checkbox hack whose <input> is
   stripped from the rendered output, so on the live site today the label and
   "View Less" both show at once and neither does anything. Hide the dead
   control rather than leave two contradictory labels on the page. */
.apex-article-content .view-more-label { display: none; }

/* END LEGACY SHIM
   -------------------------------------------------------------------------- */

@media print {
  .apex-picks__toggle, .apex-buy { display: none !important; }
  .apex-faq__item { break-inside: avoid; }
}