/* ==========================================================================
   Amtivo — Top 5 Major IATF 16949 Nonconformities (five simple cards)
   v3 — absolute units.

   Why px and not rem: the theme sets a reduced root font size (the 62.5%/10px
   convention), so every rem value in this component was rendering at 0.625x.
   Absolute units make the component immune to the root size. font-size and
   line-height carry !important because the theme also declares them on bare
   p / li selectors.

   v4 — numerals set in Montserrat rather than a system monospace stack, so
   clause codes and rank markers render identically for every visitor. To go
   back to the monospace look, restore --c-mono to:
     ui-monospace, "SFMono-Regular", "Roboto Mono", Menlo, Consolas, monospace

   Host on Kinsta outside WordPress content. Scoped to .atv-c. No JavaScript.
   Bump the ?v= number on the stylesheet URL after every re-upload.
   ========================================================================== */

.atv-c {
  --c-cobalt: #1f299c;
  --c-oxford: #16205b;
  --c-tangelo: #f15928;
  --c-seasalt: #f8f9fa;
  --c-rule: #dce0ed;
  --c-ink: #2a3047;
  --c-muted: #6a7189;
  --c-mono: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --c-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  font-family: var(--c-sans);
  font-size: 16px;
  color: var(--c-ink);
  max-width: 940px;
  margin: 0 auto;
}

.atv-c *,
.atv-c *::before,
.atv-c *::after { box-sizing: border-box; }

body .atv-c,
body .atv-c p,
body .atv-c li,
body .atv-c div,
body .atv-c span {
  font-family: var(--c-sans);
}

/* --- Intro --------------------------------------------------------------- */

.atv-c__intro { margin-bottom: 40px; }

body .atv-c p.atv-c__eyebrow {
  font-family: var(--c-mono) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-cobalt);
  margin: 0 0 12px;
}

body .atv-c .atv-c__title {
  font-size: clamp(26px, 18px + 1.9vw, 38px) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.024em;
  font-weight: 700;
  color: var(--c-oxford);
  margin: 0 0 14px;
  max-width: 22ch;
}

body .atv-c p.atv-c__standfirst {
  font-size: 17px !important;
  line-height: 1.62 !important;
  color: var(--c-muted);
  margin: 0;
  max-width: 62ch;
}

/* --- Card --------------------------------------------------------------- */

.atv-c__card {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-rule);
  border-top: 3px solid var(--c-cobalt);
  padding: 30px 32px 32px;
  margin-bottom: 20px;
}

/* Rank marker. Kept in normal flow — the theme overrides `position` on <p>. */
body .atv-c .atv-c__num {
  position: static !important;
  display: block !important;
  float: none !important;
  margin: 0 0 14px !important;
  padding: 0 0 0 9px !important;
  border-left: 2px solid var(--c-tangelo) !important;
  font-family: var(--c-mono) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
  color: var(--c-oxford) !important;
  opacity: 1 !important;
  text-indent: 0 !important;
}

.atv-c__head {
  position: relative;
  padding-bottom: 22px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--c-rule);
}

body .atv-c p.atv-c__clause {
  font-family: var(--c-mono) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-tangelo);
  margin: 0 0 5px;
}

body .atv-c .atv-c__name {
  font-size: clamp(21px, 18px + 0.6vw, 25px) !important;
  line-height: 1.18 !important;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--c-oxford);
  margin-bottom: 12px;
}

/* The top line — the one sentence that carries the card */
body .atv-c p.atv-c__topline {
  font-size: 18px !important;
  line-height: 1.55 !important;
  font-weight: 500;
  color: var(--c-ink);
  margin: 0;
  max-width: 58ch;
}

/* --- Three stages ------------------------------------------------------- */

.atv-c__stages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 40px;
}

.atv-c__stage { position: relative; }

/* Connector between stages */
.atv-c__stage + .atv-c__stage::before {
  content: "";
  position: absolute;
  left: -23px;
  top: 6px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--c-cobalt);
  opacity: 0.45;
}

body .atv-c p.atv-c__stagelabel {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 700;
  letter-spacing: -0.003em;
  color: var(--c-oxford);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-rule);
}

body .atv-c .atv-c__stagenum {
  font-family: var(--c-mono) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 12px !important;
  font-weight: 600;
  color: var(--c-tangelo);
}

body .atv-c ul.atv-c__list {
  list-style: none !important;
  list-style-image: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

body .atv-c ul.atv-c__list li {
  list-style: none !important;
  list-style-image: none !important;
  list-style-type: none !important;
  position: relative;
  margin: 0 !important;
  padding: 5px 0 5px 13px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--c-ink);
  background: none !important;
  text-indent: 0 !important;
  border: 0 !important;
}

/* Kill any marker the theme injects, including a `content: url()` image. */
body .atv-c ul.atv-c__list li::after {
  content: none !important;
  display: none !important;
}

/* Then draw ours. */
body .atv-c ul.atv-c__list li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: 12px !important;
  bottom: auto !important;
  width: 4px !important;
  height: 4px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--c-cobalt) !important;
  background-image: none !important;
  opacity: 0.5 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: none !important;
}

/* --- Closing note ------------------------------------------------------- */

body .atv-c p.atv-c__note {
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--c-ink);
  border-left: 3px solid var(--c-tangelo);
  padding: 2px 0 2px 18px;
  margin: 32px 0 0;
  max-width: 64ch;
}

body .atv-c p.atv-c__source {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--c-muted);
  margin: 24px 0 0;
  max-width: 70ch;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 820px) {
  .atv-c__stages { grid-template-columns: 1fr; gap: 28px; }

  .atv-c__stage + .atv-c__stage::before {
    left: 0;
    top: -19px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid var(--c-cobalt);
    border-bottom: 0;
  }
}

@media (max-width: 560px) {
  .atv-c__card { padding: 24px 20px 26px; }
  body .atv-c p.atv-c__topline { font-size: 17px !important; }
  body .atv-c ul.atv-c__list li { font-size: 15px !important; }
}

/* --- Print --------------------------------------------------------------- */

@media print {
  .atv-c__card {
    page-break-inside: avoid;
    border: 1px solid var(--c-rule);
    border-top: 3px solid var(--c-cobalt);
  }
}