/* Certification pages — extends styles.css.
   Loaded only by certification.html and certification-practitioner.html.

   Reuses the site's own vocabulary wherever it exists: .container, .eyebrow,
   .lede, .btn / .btn-primary / .btn-ghost, .cees / .cee / .cee-letter for the
   FORGE letters, and the shared .nav header and footer.site shell. Only the
   things this content genuinely needs and the site does not already have are
   defined below.

   PALETTE: --copper (#641F2C) is the maroon brand mark; --gold (#9A7849) is the
   secondary. Both are used for rules, marks and large type. Small body text
   stays on --ink / --ink-2 / --muted, which the site has already tuned for
   contrast — the token file carries two "do not lighten" warnings and this
   sheet does not undo them. */

/* --cert-quiet, not --muted. The site token #7A7268 measures 4.14:1 on
   --paper and fails WCAG 1.4.3 for normal text — axe found 11 instances on
   these two pages alone. The token is used site-wide, so it is NOT changed
   here; this sheet carries a compliant value of its own and the token is left
   for the owner to decide on. Same hue, lightness reduced until it clears. */
:root { --cert-quiet: #746C63; }   /* 4.51:1 on --paper */

.cert-crumb { font-size: 13px; color: var(--cert-quiet); padding: 26px 0 0; }
/* WCAG 1.4.1: a link inside a line of text needs a non-colour cue. */
.cert-crumb a { color: var(--copper); text-decoration: underline; text-underline-offset: 2px; }

.cert-sec { padding: 54px 0 0; }
.cert-sec h2 { font-family: var(--serif); font-size: 30px; letter-spacing: -0.3px; color: var(--ink); }
.cert-sec > .container > p { color: var(--ink-2); max-width: 66ch; margin-top: 10px; line-height: 1.65; }

/* Availability. Every certification level carries one, and the states are never
   colour-only — each carries its own word, so it survives greyscale, print and
   colour-blindness (WCAG 1.4.1). */
.cert-avail {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.8px; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--cert-quiet);
}
.cert-avail::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cert-quiet); }
.cert-avail.is-dev { color: var(--gold-deep); border-color: var(--gold-soft); }
.cert-avail.is-dev::before { background: var(--gold); }

/* The pathway. Four levels that read as ONE ladder — distinguished by a Roman
   numeral and an availability label, not by four different colours. Four hues
   would read as four unrelated products. */
.cert-path { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; }
.cert-lvl {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 26px; box-shadow: var(--shadow-soft);
}
.cert-lvl .rn {
  font-family: var(--serif); font-size: 27px; color: var(--copper);
  line-height: 1; margin-bottom: 14px;
}
.cert-lvl h3 { font-family: var(--serif); font-size: 19px; line-height: 1.25; margin-bottom: 10px; color: var(--ink); }
.cert-lvl .sum { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.cert-lvl .who { font-size: 13px; line-height: 1.55; color: var(--cert-quiet); margin-top: 14px; }
.cert-lvl h4 {
  font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.9px;
  text-transform: uppercase; color: var(--cert-quiet); margin: 18px 0 8px;
}
.cert-lvl ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cert-lvl li { font-size: 13.5px; line-height: 1.5; padding-left: 17px; position: relative; color: var(--ink-2); }
.cert-lvl li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border: 1.5px solid var(--gold); border-radius: 1px;
}
.cert-lvl .foot { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; gap: 13px; align-items: flex-start; }
.cert-lvl .note { font-size: 11.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--cert-quiet); }

/* Requirements, assessment methods, brand architecture — one card family. */
.cert-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 26px; }
.cert-cards.trio { grid-template-columns: repeat(3, 1fr); }
.cert-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 24px; box-shadow: var(--shadow-soft);
}
.cert-card .n {
  font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--gold-deep);
}
.cert-card h3 { font-family: var(--serif); font-size: 18px; margin: 8px 0; color: var(--ink); }
.cert-card p { font-size: 14px; line-height: 1.6; color: var(--ink-2); }

.cert-req { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-top: 26px; }
.cert-req div {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 17px 19px; font-size: 14px; font-weight: 600; color: var(--ink);
}

.cert-quote {
  margin-top: 34px; padding: 26px 30px;
  border-left: 3px solid var(--copper); background: var(--card);
  border-radius: 0 var(--r) var(--r) 0;
  font-family: var(--serif); font-size: 21px; line-height: 1.5; color: var(--ink);
}
.cert-note {
  margin-top: 22px; padding: 18px 22px; background: var(--card);
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 0 var(--r) var(--r) 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-2);
}
.cert-note strong { color: var(--ink); }

/* The brand expression block — the one place the maroon carries a full panel. */
.cert-expr {
  margin-top: 30px; padding: 30px 34px; background: var(--navy); color: #F3EAEA;
  border-radius: var(--r); font-family: var(--serif); font-size: 20px; line-height: 1.7;
}
.cert-expr b { color: var(--gold-soft); font-weight: 400; }

/* The linear lifecycle. */
.cert-flow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-top: 30px;
  padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
}
.cert-flow span { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.cert-flow i { color: var(--gold); font-style: normal; }

/* Two-column competency / governance lists. */
.cert-two { columns: 2; column-gap: 40px; margin-top: 24px; padding: 0; }
.cert-two li {
  break-inside: avoid; list-style: none; position: relative;
  padding: 8px 0 8px 22px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
}
.cert-two li::before {
  content: ""; position: absolute; left: 0; top: 16px;
  width: 9px; height: 2px; background: var(--gold);
}

/* Credential specification. A semantic two-column table, deliberately NOT in an
   accordion: this is the content an employer verifies, so it must be readable,
   findable and printable. */
.cert-spec {
  width: 100%; border-collapse: collapse; margin-top: 24px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.cert-spec th, .cert-spec td {
  text-align: left; vertical-align: top; padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft); font-size: 14.5px; line-height: 1.6; color: var(--ink-2);
}
.cert-spec tr:last-child th, .cert-spec tr:last-child td { border-bottom: 0; }
.cert-spec th { width: 30%; font-weight: 700; color: var(--ink); background: var(--paper-2); }
.cert-spec caption { text-align: left; font-size: 13px; color: var(--cert-quiet); padding-bottom: 12px; }

/* Candidate journey — the number is the graphic. */
.cert-journey { counter-reset: cstep; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; margin-top: 26px; padding: 0; }
.cert-journey li {
  counter-increment: cstep; list-style: none; display: flex; gap: 15px; align-items: baseline;
  padding: 13px 0; border-top: 1px solid var(--line-soft); font-size: 14.5px; color: var(--ink-2);
}
.cert-journey li::before {
  content: counter(cstep, decimal-leading-zero);
  font-family: var(--serif); font-size: 15px; color: var(--gold-deep); flex: 0 0 28px;
}

.cert-policies { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; margin-top: 22px; padding: 0; }
.cert-policies li {
  list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 13px 0; border-top: 1px solid var(--line-soft); font-size: 14.5px; color: var(--ink-2);
}
.cert-soon {
  font-size: 11px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase;
  color: var(--cert-quiet); white-space: nowrap;
}

.cert-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 26px; }

@media (max-width: 1000px) {
  .cert-path, .cert-cards, .cert-cards.trio, .cert-req { grid-template-columns: repeat(2, 1fr); }
  .cert-two { columns: 1; }
  .cert-journey, .cert-policies { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cert-path, .cert-cards, .cert-cards.trio, .cert-req { grid-template-columns: 1fr; }
  .cert-sec h2 { font-size: 25px; }
  /* The spec table linearises rather than scrolling sideways — a credential
     criterion the reader has to pan to find is one they will not read. */
  .cert-spec, .cert-spec tbody, .cert-spec tr, .cert-spec th, .cert-spec td { display: block; }
  .cert-spec th { width: auto; border-bottom: 0; padding-bottom: 3px; background: transparent; }
  .cert-spec td { padding-top: 0; }
}

/* Print — the credential specification is a document a candidate or an employer
   puts in front of someone else. */
@media print {
  header.nav, footer.site, .btn, .cert-crumb, .cert-cta { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .container { max-width: none; padding: 0; }
  .cert-spec { border: 1px solid #999; }
  .cert-spec th, .cert-spec td { border-bottom: 1px solid #ccc; }
  .cert-card, .cert-lvl, .cert-note, .cert-quote { border: 1px solid #ccc; break-inside: avoid; box-shadow: none; }
  .cert-expr { background: #fff; color: #000; border: 1px solid #999; }
  .cert-expr b { color: #000; font-weight: 700; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* Links inside prose need a non-colour cue (WCAG 1.4.1). Scoped so buttons
   and the nav keep their clean treatment. */
.cert-sec p a:not(.btn), .cert-policies a, .cert-two a {
  text-decoration: underline; text-underline-offset: 2px;
}