/* ==========================================================================
   CCL Knowledgebase redesign (22-09-2026)
   Landing page + topic hubs. Tokens from the "CCL Knowledgebase Redesign"
   build kit. Namespaced .ccl-kb2 so the legacy .ccl-kb-- rules are untouched.
   ========================================================================== */

.ccl-kb2 {
  --kb2-navy: #0B1B3A;
  --kb2-navy-lift: #12244A;
  --kb2-signal: #FFE500;
  --kb2-action: #1D63FF;
  --kb2-action-dark: #0F3FB8;
  --kb2-paper: #FAFAF7;
  --kb2-rule: #E6E6DF;
  --kb2-ink: #0B1220;
  --kb2-muted: #4B5563;
  --kb2-on-navy: #C6D0E4;
  background: #FFFFFF;
  color: var(--kb2-ink);
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.ccl-kb2 *,
.ccl-kb2 *::before,
.ccl-kb2 *::after { box-sizing: border-box; }

.ccl-kb2 h1,
.ccl-kb2 h2,
.ccl-kb2 h3 {
  font-family: "Inter Tight", Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.015em;
}

.ccl-kb2 a { text-decoration: none; }

.ccl-kb2__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Hero ---------------------------------------------------------------- */

.ccl-kb2__hero {
  background: var(--kb2-navy);
  padding: 64px 0 56px;
}

.ccl-kb2__kicker {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kb2-signal);
  margin-bottom: 14px;
}

.ccl-kb2__title {
  margin: 0 0 16px;
  max-width: 17ch;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #FFFFFF;
}

.ccl-kb2__lede {
  margin: 0 0 30px;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--kb2-on-navy);
}

.ccl-kb2__search {
  display: flex;
  gap: 10px;
  max-width: 660px;
  margin-bottom: 26px;
}

.ccl-kb2__search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 16px;
  color: var(--kb2-ink);
}

.ccl-kb2__search input[type="search"]:focus {
  outline: 3px solid var(--kb2-signal);
  outline-offset: 2px;
}

.ccl-kb2__search button {
  flex: 0 0 auto;
  height: 56px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: var(--kb2-action);
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  cursor: pointer;
}

.ccl-kb2__search button:hover { background: var(--kb2-action-dark); }

.ccl-kb2__quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ccl-kb2__quick-label {
  font-size: 14px;
  color: var(--kb2-on-navy);
  margin-right: 4px;
}

.ccl-kb2__pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
}

.ccl-kb2__pill:hover {
  background: var(--kb2-navy-lift);
  border-color: var(--kb2-signal);
  color: #FFFFFF;
}

/* --- Bands --------------------------------------------------------------- */

.ccl-kb2__band { padding: 64px 0; }
.ccl-kb2__band--paper { background: var(--kb2-paper); }

.ccl-kb2__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kb2-action);
  margin-bottom: 10px;
}

.ccl-kb2__eyebrow--light { color: var(--kb2-signal); }

.ccl-kb2__section-title {
  margin: 0 0 12px;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
  font-weight: 800;
  color: var(--kb2-ink);
}

.ccl-kb2__section-lede {
  margin: 0 0 34px;
  max-width: 72ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--kb2-muted);
}

/* --- Three questions ----------------------------------------------------- */

.ccl-kb2__three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.ccl-kb2__q {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border: 1px solid var(--kb2-rule);
  border-radius: 16px;
  background: #FFFFFF;
  color: var(--kb2-ink);
}

.ccl-kb2__q:hover {
  border-color: var(--kb2-action);
  color: var(--kb2-ink);
}

.ccl-kb2__q-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--kb2-navy);
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--kb2-signal);
}

.ccl-kb2__q h3 {
  margin: 4px 0 0;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
}

.ccl-kb2__q p {
  margin: 0;
  flex: 1 1 auto;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kb2-muted);
}

.ccl-kb2__q-go {
  font-size: 15px;
  font-weight: 600;
  color: var(--kb2-action);
}

/* --- Hubs ---------------------------------------------------------------- */

.ccl-kb2__hubs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.ccl-kb2__hub {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border: 1px solid var(--kb2-rule);
  border-radius: 16px;
  background: var(--kb2-paper);
}

.ccl-kb2__hub-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.ccl-kb2__hub-head h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
}

.ccl-kb2__hub-head h3 a { color: var(--kb2-ink); }
.ccl-kb2__hub-head h3 a:hover { color: var(--kb2-action); }

.ccl-kb2__hub-count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: #EEF3FF;
  font-size: 13px;
  font-weight: 700;
  color: #123FAD;
}

.ccl-kb2__hub-blurb {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kb2-muted);
}

.ccl-kb2__hub-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
}

.ccl-kb2__hub-links li { margin: 0; }

.ccl-kb2__hub-links a {
  display: block;
  padding: 7px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--kb2-action);
  border-bottom: 1px solid var(--kb2-rule);
}

.ccl-kb2__hub-links li:last-child a { border-bottom: 0; }
.ccl-kb2__hub-links a:hover { color: var(--kb2-action-dark); text-decoration: underline; }

.ccl-kb2__hub-all {
  font-size: 15px;
  font-weight: 700;
  color: var(--kb2-ink);
}

.ccl-kb2__hub-all:hover { color: var(--kb2-action); }

/* --- Class action strip -------------------------------------------------- */

.ccl-kb2__strip {
  background: var(--kb2-navy);
  padding: 48px 0;
}

.ccl-kb2__strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.ccl-kb2__strip-title {
  margin: 0 0 10px;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  font-weight: 800;
  color: #FFFFFF;
}

.ccl-kb2__strip-body {
  margin: 0;
  max-width: 78ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--kb2-on-navy);
}

/* --- Buttons ------------------------------------------------------------- */

.ccl-kb2__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.ccl-kb2__btn--signal {
  background: var(--kb2-signal);
  color: var(--kb2-ink);
  font-weight: 700;
}

.ccl-kb2__btn--signal:hover { background: #F5DC00; color: var(--kb2-ink); }

.ccl-kb2__btn--action { background: var(--kb2-action); color: #FFFFFF; }
.ccl-kb2__btn--action:hover { background: var(--kb2-action-dark); color: #FFFFFF; }

.ccl-kb2__btn--quiet {
  border: 1.5px solid var(--kb2-ink);
  color: var(--kb2-ink);
}

.ccl-kb2__btn--quiet:hover { background: var(--kb2-ink); color: #FFFFFF; }

/* --- Latest guides ------------------------------------------------------- */

.ccl-kb2__latest-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.ccl-kb2__latest-head .ccl-kb2__section-title { margin-bottom: 0; }

.ccl-kb2__quiet-link {
  font-size: 15px;
  font-weight: 600;
  color: var(--kb2-action);
  white-space: nowrap;
}

.ccl-kb2__latest {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.ccl-kb2__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  border: 1px solid var(--kb2-rule);
  border-radius: 16px;
  background: #FFFFFF;
  color: var(--kb2-ink);
}

.ccl-kb2__card:hover { border-color: var(--kb2-action); }

.ccl-kb2__tag {
  align-self: flex-start;
  padding: 4px 9px;
  border-radius: 6px;
  background: #EEF3FF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #123FAD;
}

.ccl-kb2__meta {
  font-size: 13px;
  color: var(--kb2-muted);
}

.ccl-kb2__card h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
}

.ccl-kb2__card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kb2-muted);
}

/* --- Search results ------------------------------------------------------ */

.ccl-kb2__results { padding: 48px 0 8px; }

.ccl-kb2__empty {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--kb2-muted);
}

.ccl-kb2__result-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ccl-kb2__result-list li { border-top: 1px solid var(--kb2-rule); }
.ccl-kb2__result-list li:last-child { border-bottom: 1px solid var(--kb2-rule); }

.ccl-kb2__result-list a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 0;
  color: var(--kb2-ink);
}

.ccl-kb2__result-title {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 700;
}

.ccl-kb2__result-list a:hover .ccl-kb2__result-title { color: var(--kb2-action); }

.ccl-kb2__result-excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--kb2-muted);
}

/* --- Closing CTA --------------------------------------------------------- */

.ccl-kb2__cta {
  background: var(--kb2-signal);
  padding: 56px 0;
}

.ccl-kb2__cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.ccl-kb2__cta-title {
  margin: 0;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
  font-weight: 800;
  color: var(--kb2-ink);
}

.ccl-kb2__cta-body {
  margin: 0;
  max-width: 70ch;
  font-size: 17px;
  line-height: 1.6;
  color: #3A3400;
}

.ccl-kb2__cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

.ccl-kb2__cta .ccl-kb2__btn--action { background: var(--kb2-navy); }
.ccl-kb2__cta .ccl-kb2__btn--action:hover { background: var(--kb2-navy-lift); }

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

@media (max-width: 1024px) {
  .ccl-kb2__three,
  .ccl-kb2__hubs,
  .ccl-kb2__latest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccl-kb2__strip-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 720px) {
  .ccl-kb2__hero { padding: 44px 0 40px; }
  .ccl-kb2__band { padding: 44px 0; }
  .ccl-kb2__three,
  .ccl-kb2__hubs,
  .ccl-kb2__latest { grid-template-columns: minmax(0, 1fr); }
  .ccl-kb2__search { flex-direction: column; }
  .ccl-kb2__search input[type="search"],
  .ccl-kb2__search button { width: 100%; }
  .ccl-kb2__latest-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ==========================================================================
   Topic hub (taxonomy-knowledgebase_category.php)
   ========================================================================== */

.ccl-kb2__hero--hub { padding: 34px 0 40px; }

.ccl-kb2__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 14px;
  color: #8FA3C8;
}

.ccl-kb2__crumbs a { color: var(--kb2-on-navy); }
.ccl-kb2__crumbs a:hover { color: #FFFFFF; text-decoration: underline; }
.ccl-kb2__crumbs-here { color: var(--kb2-signal); font-weight: 600; }

.ccl-kb2__hub-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
}

.ccl-kb2__hub-hero > div { max-width: 760px; }

.ccl-kb2__title--hub {
  max-width: none;
  margin-bottom: 14px;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.ccl-kb2__hub-hero .ccl-kb2__lede { margin-bottom: 0; }

.ccl-kb2__hub-tally {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--kb2-signal);
  white-space: nowrap;
}

/* --- Filter strip -------------------------------------------------------- */

.ccl-kb2__filters {
  background: #FFFFFF;
  border-bottom: 1px solid var(--kb2-rule);
  padding: 16px 0;
}

.ccl-kb2__filters-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ccl-kb2__filters-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--kb2-muted);
  margin-right: 2px;
}

.ccl-kb2__filter {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #DDDDD4;
  border-radius: 999px;
  background: var(--kb2-paper);
  font-size: 14px;
  font-weight: 500;
  color: var(--kb2-ink);
}

.ccl-kb2__filter:hover { border-color: var(--kb2-action); color: var(--kb2-action); }

.ccl-kb2__filter.is-active {
  background: var(--kb2-navy);
  border-color: var(--kb2-navy);
  color: #FFFFFF;
  font-weight: 600;
}

.ccl-kb2__filter.is-active:hover { color: #FFFFFF; }

/* --- Hub body ------------------------------------------------------------ */

.ccl-kb2__hub-body {
  display: flex;
  align-items: flex-start;
  gap: 56px;
}

.ccl-kb2__guides {
  flex: 1 1 auto;
  min-width: 0;
}

.ccl-kb2__guides-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
}

.ccl-kb2__guides-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--kb2-ink);
}

.ccl-kb2__guides-order { font-size: 14px; color: var(--kb2-muted); }

.ccl-kb2__guide {
  display: flex;
  gap: 28px;
  padding: 24px 0;
  border-top: 1px solid var(--kb2-rule);
  color: var(--kb2-ink);
}

.ccl-kb2__guide:last-of-type { border-bottom: 1px solid var(--kb2-rule); }

.ccl-kb2__guide-meta {
  flex: 0 0 132px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.ccl-kb2__guide-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ccl-kb2__guide-title {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ccl-kb2__guide:hover .ccl-kb2__guide-title { color: var(--kb2-action); }

.ccl-kb2__guide-excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--kb2-muted);
}

.ccl-kb2__guide-go {
  flex: 0 0 auto;
  align-self: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--kb2-action);
  white-space: nowrap;
}

.ccl-kb2__pagination { margin-top: 28px; }

.ccl-kb2__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  margin: 0 4px 8px 0;
  border: 1px solid var(--kb2-rule);
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 15px;
  color: var(--kb2-ink);
}

.ccl-kb2__pagination .page-numbers:hover { border-color: var(--kb2-action); color: var(--kb2-action); }

.ccl-kb2__pagination .page-numbers.current {
  background: var(--kb2-navy);
  border-color: var(--kb2-navy);
  color: #FFFFFF;
  font-weight: 600;
}

.ccl-kb2__pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Rail ---------------------------------------------------------------- */

.ccl-kb2__rail {
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ccl-kb2__rail-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px;
  border: 1px solid var(--kb2-rule);
  border-radius: 16px;
  background: #FFFFFF;
}

.ccl-kb2__rail-card h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--kb2-ink);
}

.ccl-kb2__rail-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--kb2-muted);
}

.ccl-kb2__rail-card--navy {
  border-color: var(--kb2-navy);
  background: var(--kb2-navy);
}

.ccl-kb2__rail-card--navy h2 { color: #FFFFFF; }
.ccl-kb2__rail-card--navy p { color: var(--kb2-on-navy); }

.ccl-kb2__rail-card--signal {
  border-color: var(--kb2-signal);
  background: var(--kb2-signal);
}

.ccl-kb2__rail-card--signal p { color: #3A3400; }
.ccl-kb2__rail-card--signal .ccl-kb2__btn--action { background: var(--kb2-navy); }
.ccl-kb2__rail-card--signal .ccl-kb2__btn--action:hover { background: var(--kb2-navy-lift); }

.ccl-kb2__rail-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--kb2-action);
}

.ccl-kb2__rail-link:hover { color: var(--kb2-action-dark); text-decoration: underline; }

@media (max-width: 1024px) {
  .ccl-kb2__hub-body { flex-direction: column; gap: 40px; }
  .ccl-kb2__rail { flex: 1 1 auto; width: 100%; }
  .ccl-kb2__hub-hero { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (max-width: 720px) {
  .ccl-kb2__guide { flex-direction: column; gap: 12px; }
  .ccl-kb2__guide-meta { flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .ccl-kb2__guide-go { align-self: flex-start; }
}

/* ==========================================================================
   Article template additions (single-knowledgebase.php)
   Contents rail, in-topic prev/next, and the deadline chip, per the
   "Article — desktop" artboard.
   ========================================================================== */

.ccl-nofault--article.has-toc .ccl-nofault--article-container {
  max-width: 1160px;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 56px;
}

.ccl-nofault--toc {
  position: sticky;
  top: 110px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 24px;
  border: 1px solid #E6E6DF;
  border-radius: 16px;
  background: #FAFAF7;
}

.ccl-nofault--toc-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4B5563;
}

.ccl-nofault--toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ccl-nofault--toc-list li { margin: 0; }

.ccl-nofault--toc-list a {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  font-size: 14px;
  line-height: 1.45;
  color: #22303F;
  text-decoration: none;
}

.ccl-nofault--toc-list a span {
  flex: 0 0 auto;
  width: 18px;
  font-weight: 700;
  color: #1D63FF;
}

.ccl-nofault--toc-list a:hover { color: #1D63FF; }

.ccl-nofault--article-content h2 { scroll-margin-top: 152px; }

/* --- Deadline chip (used inside article bodies) -------------------------- */

.ccl-nofault--chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  margin: 2px 0 10px;
  border-radius: 999px;
  background: #FFE500;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
  color: #0B1220;
}

.ccl-nofault--chip i { font-size: 0.8rem; }

/* --- Prev / next inside the topic ---------------------------------------- */

.ccl-nofault--adjacent { padding: 8px 0 40px; }

.ccl-nofault--adjacent-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.ccl-nofault--adjacent-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 24px;
  border: 1px solid #E6E6DF;
  border-radius: 16px;
  background: #FFFFFF;
  text-decoration: none;
}

.ccl-nofault--adjacent-link.is-empty { border: 0; background: transparent; }

.ccl-nofault--adjacent-link.is-next { text-align: right; }

.ccl-nofault--adjacent-label {
  font-size: 13px;
  font-weight: 600;
  color: #1D63FF;
}

.ccl-nofault--adjacent-title {
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
  color: #0B1220;
}

a.ccl-nofault--adjacent-link:hover { border-color: #1D63FF; }

@media (max-width: 1024px) {
  .ccl-nofault--article.has-toc .ccl-nofault--article-container {
    grid-template-columns: minmax(0, 1fr);
    max-width: 800px;
    gap: 28px;
  }
  .ccl-nofault--toc { position: static; top: auto; }
}

@media (max-width: 720px) {
  .ccl-nofault--adjacent-container { grid-template-columns: minmax(0, 1fr); }
  .ccl-nofault--adjacent-link.is-next { text-align: left; }
  .ccl-nofault--adjacent-link.is-empty { display: none; }
}

.ccl-nofault--chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.ccl-nofault--chips .ccl-nofault--chip { margin: 0; }

/* The theme gives <main> overflow-y: auto, which makes it the scroll container and
   stops position: sticky engaging. overflow-x: clip keeps the horizontal guard
   without creating a scroll container. */
body .ccl-nofault--wrapper main {
  overflow-x: clip;
  overflow-y: visible;
}

/* --- Collapsible contents on small screens ------------------------------- */

.ccl-nofault--toc-d { width: 100%; }
.ccl-nofault--toc-d > summary { list-style: none; cursor: pointer; }
.ccl-nofault--toc-d > summary::-webkit-details-marker { display: none; }
.ccl-nofault--toc-d[open] > .ccl-nofault--toc-list { margin-top: 12px; }

@media (min-width: 1025px) {
  .ccl-nofault--toc-d > summary { cursor: default; pointer-events: none; }
}

@media (max-width: 1024px) {
  .ccl-nofault--toc-d > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #0B1220;
  }
  .ccl-nofault--toc-d > summary::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid #1D63FF;
    border-bottom: 2px solid #1D63FF;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
  }
  .ccl-nofault--toc-d[open] > summary::after { transform: rotate(-135deg); }
}

/* --- Sticky action bar (phones only) ------------------------------------- */

.ccl-nofault--actionbar { display: none; }

@media (max-width: 720px) {
  .ccl-nofault--actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    box-sizing: border-box;
    padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
    background: #FFFFFF;
    border-top: 1px solid #E6E6DF;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .ccl-nofault--actionbar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
  }
  .ccl-nofault--actionbar-primary { flex: 1 1 auto; background: #1D63FF; color: #FFFFFF; }
  .ccl-nofault--actionbar-call {
    flex: 0 0 auto;
    gap: 8px;
    padding: 0 18px;
    border: 1.5px solid #0B1220;
    color: #0B1220;
  }
  .ccl-nofault--wrapper { padding-bottom: 88px; }
}

/* ==========================================================================
   Article page — bringing single-knowledgebase.php onto the artboard
   ("Article — desktop"). These override the legacy .ccl-nofault-- rules in
   main.css, which loads after this file, so they carry a body prefix.
   ========================================================================== */

body .ccl-nofault--wrapper {
  --kb2-navy: #0B1B3A;
  --kb2-navy-lift: #12244A;
  --kb2-signal: #FFE500;
  --kb2-action: #1D63FF;
  --kb2-paper: #FAFAF7;
  --kb2-rule: #E6E6DF;
  --kb2-ink: #0B1220;
  --kb2-body: #22303F;
  --kb2-muted: #4B5563;
  --kb2-on-navy: #C6D0E4;
}

/* --- Hero --------------------------------------------------------------- */

body .ccl-nofault--hero {
  background-image: none;
  background-color: var(--kb2-navy);
  padding: 34px 0 40px;
}

body .ccl-nofault--hero-content {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

body .ccl-nofault--breadcrumbs { color: #8FA3C8; font-size: 14px; }
body .ccl-nofault--breadcrumb-link { color: var(--kb2-on-navy); }
body .ccl-nofault--breadcrumb-link:hover { color: #FFFFFF; }
body .ccl-nofault--breadcrumb-current { color: var(--kb2-signal); font-weight: 600; }

.ccl-nofault--herochips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

body .ccl-nofault--typechip,
body .ccl-nofault--hero-category {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  backdrop-filter: none;
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

body .ccl-nofault--typechip {
  border: 0;
  background: var(--kb2-signal);
  color: var(--kb2-ink);
}

body .ccl-nofault--hero-category {
  background: transparent;
  border: 1px solid #33456E;
  color: var(--kb2-on-navy);
}

body .ccl-nofault--hero-category i { color: var(--kb2-on-navy); }

body .ccl-nofault--hero-content h1 {
  max-width: 940px;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

body .ccl-nofault--hero-meta { gap: 18px; padding-top: 6px; }
body .ccl-nofault--hero-meta-item { font-size: 14px; color: var(--kb2-on-navy); }
body .ccl-nofault--hero-meta-item i { color: #8FA3C8; }

/* --- Reading progress --------------------------------------------------- */

.ccl-nofault--progress { height: 4px; background: var(--kb2-rule); }
.ccl-nofault--progress > span {
  display: block;
  width: 0;
  height: 4px;
  background: var(--kb2-signal);
  transition: width 0.08s linear;
}

/* --- Two columns: body, then rail --------------------------------------- */

body .ccl-nofault--article { padding-top: 44px; padding-bottom: 56px; }

body .ccl-nofault--article.has-toc .ccl-nofault--article-container,
body .ccl-nofault--article .ccl-nofault--article-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 64px;
}

body .ccl-nofault--article-content {
  min-width: 0;
  max-width: 796px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--kb2-body);
}

body .ccl-nofault--article-content > h2 {
  margin: 34px 0 0;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--kb2-ink);
  scroll-margin-top: 152px;
}

body .ccl-nofault--article-content > h2:first-child { margin-top: 0; }
body .ccl-nofault--article-content > p { margin: 14px 0 0; }

/* --- The short answer --------------------------------------------------- */

body .ccl-nofault--takeaways {
  background: #FFFFFF;
  border: 2px solid var(--kb2-navy);
  border-radius: 16px;
  padding: 26px 28px;
  margin: 0 0 30px;
}

body .ccl-nofault--takeaways h3 {
  display: block;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--kb2-ink);
  margin: 0 0 14px;
}

body .ccl-nofault--takeaways h3 i { display: none; }

body .ccl-nofault--takeaways ul { display: flex; flex-direction: column; gap: 9px; }

body .ccl-nofault--takeaways ul li {
  padding: 0 0 0 20px;
  border-bottom: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--kb2-body);
}

body .ccl-nofault--takeaways ul li::before {
  content: "";
  top: 11px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--kb2-navy);
  font-size: 0;
}

/* --- Numbered steps ----------------------------------------------------- */

body .ccl-nofault--article-content > h2.ccl-nofault--step {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: -0.01em;
  margin-top: 36px;
}

body .ccl-nofault--article-content > h2.ccl-nofault--step::before {
  content: attr(data-step);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--kb2-navy);
  font-size: 17px;
  font-weight: 800;
  color: var(--kb2-signal);
}

body .ccl-nofault--article-content > h2.ccl-nofault--step + .ccl-nofault--chips { margin-left: 60px; }

/* --- Callouts and tables ------------------------------------------------ */

body .ccl-nofault--highlight {
  background: #FFFFFF;
  background-image: none;
  border: 1px solid var(--kb2-rule);
  border-left: 1px solid var(--kb2-rule);
  border-radius: 14px;
  padding: 22px 24px;
  margin: 22px 0;
}

body .ccl-nofault--highlight h4 {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--kb2-ink);
}

body .ccl-nofault--table-wrapper {
  border: 1px solid var(--kb2-rule);
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
  margin: 22px 0;
}

body .ccl-nofault--table { border-collapse: collapse; width: 100%; }
body .ccl-nofault--table thead th {
  background: var(--kb2-navy);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 12px 18px;
  text-align: left;
}
body .ccl-nofault--table td { padding: 13px 18px; border-top: 1px solid var(--kb2-rule); font-size: 16px; }
body .ccl-nofault--table tbody tr:first-child td { border-top: 0; }
body .ccl-nofault--table td:first-child { font-weight: 600; color: var(--kb2-ink); }

/* --- Rail --------------------------------------------------------------- */

.ccl-nofault--rail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 110px;
  align-self: start;
}

.ccl-nofault--railcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--kb2-rule);
  border-radius: 16px;
  background: #FFFFFF;
}

body .ccl-nofault--railcard h2 {
  margin: 0;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--kb2-ink);
  text-transform: none;
  letter-spacing: -0.01em;
}

body .ccl-nofault--railcard p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--kb2-muted); }

.ccl-nofault--railcard--navy { border-color: var(--kb2-navy); background: var(--kb2-navy); }
body .ccl-nofault--railcard--navy h2 { color: #FFFFFF; }
body .ccl-nofault--railcard--navy p { color: var(--kb2-on-navy); }

.ccl-nofault--railcard--signal { border-color: var(--kb2-signal); background: var(--kb2-signal); }
body .ccl-nofault--railcard--signal p { color: #3A3400; }

.ccl-nofault--railpill {
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--kb2-signal);
  font-size: 12px;
  font-weight: 700;
  color: var(--kb2-ink);
}

.ccl-nofault--railbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.ccl-nofault--railbtn--signal { background: var(--kb2-signal); color: var(--kb2-ink); font-weight: 700; }
.ccl-nofault--railbtn--navy { background: var(--kb2-navy); color: #FFFFFF; }
.ccl-nofault--railbtn--navy:hover { background: var(--kb2-navy-lift); color: #FFFFFF; }
.ccl-nofault--railbtn--quiet { border: 1.5px solid var(--kb2-ink); color: var(--kb2-ink); }
.ccl-nofault--raillink { font-size: 15px; font-weight: 600; color: var(--kb2-action); text-decoration: none; }

.ccl-nofault--rail .ccl-nofault--toc { position: static; top: auto; }

@media (max-width: 1024px) {
  body .ccl-nofault--article.has-toc .ccl-nofault--article-container,
  body .ccl-nofault--article .ccl-nofault--article-container {
    grid-template-columns: minmax(0, 1fr);
    max-width: 800px;
    gap: 32px;
  }
  .ccl-nofault--rail { position: static; top: auto; }
  body .ccl-nofault--article-content > h2.ccl-nofault--step + .ccl-nofault--chips { margin-left: 0; }
}

/* --- Final pass to the artboard ----------------------------------------- */

body .ccl-nofault--hero::before { display: none; }

body .ccl-nofault--rail .ccl-nofault--toc { padding: 22px; gap: 10px; }
body .ccl-nofault--rail .ccl-nofault--toc-list { gap: 0; }

body .ccl-nofault--rail .ccl-nofault--toc-list a {
  gap: 0;
  padding: 5px 0 5px 12px;
  border-left: 3px solid #EFEFE8;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--kb2-body);
}

body .ccl-nofault--rail .ccl-nofault--toc-list a span { display: none; }

body .ccl-nofault--rail .ccl-nofault--toc-list a:hover {
  border-left-color: var(--kb2-action);
  color: var(--kb2-action);
}

body .ccl-nofault--rail .ccl-nofault--toc-list a.is-current {
  border-left-color: var(--kb2-signal);
  font-weight: 600;
  color: var(--kb2-ink);
}

body .ccl-nofault--rating { padding: 0 0 8px; background: none; }

body .ccl-nofault--rating-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 22px 26px;
  border: 1px solid var(--kb2-rule);
  border-radius: 14px;
  background: #FFFFFF;
  text-align: left;
}

body .ccl-nofault--rating-title {
  margin: 0;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--kb2-ink);
}

body .ccl-nofault--rating-buttons { margin: 0; gap: 10px; }

body .ccl-nofault--rating-btn {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid #DDDDD4;
  border-radius: 999px;
  background: var(--kb2-paper);
  font-size: 15px;
  font-weight: 600;
  color: var(--kb2-ink);
}

body .ccl-nofault--rating-btn.thumbs-up i { color: #1B7A4B; }
body .ccl-nofault--rating-btn.thumbs-down i { color: #A33; }
body .ccl-nofault--rating-btn:hover { border-color: var(--kb2-ink); }

@media (max-width: 720px) {
  body .ccl-nofault--rating-container { margin: 0 20px; }
}

/* --- Article column: the artboard keeps the rating, prev/next, related
   guides and disclaimer inside the 796px column, beside the rail ---------- */

.ccl-nofault--articlecol {
  min-width: 0;
  max-width: 796px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

body .ccl-nofault--articlecol > section,
body .ccl-nofault--articlecol > nav {
  margin: 0;
  padding: 0;
  background: none;
}

body .ccl-nofault--articlecol > section > div,
body .ccl-nofault--articlecol > nav > div {
  max-width: none;
  margin: 0;
  padding: 0;
}

body .ccl-nofault--articlecol .ccl-nofault--rating-container {
  padding: 22px 26px;
  border: 1px solid var(--kb2-rule);
  border-radius: 14px;
  background: #FFFFFF;
}

body .ccl-nofault--articlecol .ccl-nofault--adjacent-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* --- Related guides ----------------------------------------------------- */

body .ccl-nofault--related-header { margin: 0 0 16px; padding: 0; text-align: left; }

body .ccl-nofault--related-title {
  display: block;
  margin: 0;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--kb2-ink);
  text-transform: none;
}

body .ccl-nofault--related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

body .ccl-nofault--related-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 20px;
  border: 1px solid var(--kb2-rule);
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: none;
  color: var(--kb2-ink);
}

body .ccl-nofault--related-card:hover { border-color: var(--kb2-action); transform: none; box-shadow: none; }

body .ccl-nofault--related-card-icon,
body .ccl-nofault--related-card-arrow { display: none; }

body .ccl-nofault--related-card-meta {
  order: -1;
  margin: 0;
  padding: 0;
  border: 0;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--kb2-muted);
}

body .ccl-nofault--related-card-title {
  display: block;
  margin: 0;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--kb2-ink);
}

/* --- Disclaimer --------------------------------------------------------- */

body .ccl-nofault--disclaimer-note {
  margin: 0;
  padding: 18px 20px;
  border-radius: 12px;
  background: #F1F1EA;
  font-size: 14px;
  line-height: 1.65;
  color: var(--kb2-muted);
  max-width: none;
}

body .ccl-nofault--disclaimer-note strong { color: var(--kb2-body); }

@media (max-width: 1024px) {
  .ccl-nofault--articlecol { max-width: none; }
}

@media (max-width: 720px) {
  body .ccl-nofault--related-grid { grid-template-columns: minmax(0, 1fr); }
  body .ccl-nofault--articlecol .ccl-nofault--adjacent-container { grid-template-columns: minmax(0, 1fr); }
  body .ccl-nofault--articlecol .ccl-nofault--rating-container { margin: 0; }
}

/* Artboard meta reads "Guide &middot; 5 min read", without icons. */
body .ccl-nofault--related-card-meta-item i { display: none; }
body .ccl-nofault--related-card-meta-item { gap: 0; }
body .ccl-nofault--related-card-meta-item:nth-child(2) { order: -1; }
body .ccl-nofault--related-card-meta-item:nth-child(2)::after {
  content: "\00B7";
  margin: 0 6px;
  color: var(--kb2-muted);
}


/* --- Split card: two-column "who is covered" ---------------------------- */
/* Article artboard, "What is WorkCover Queensland?" section.                */

body .ccl-kb2-split {
  display: flex;
  border: 1px solid var(--kb2-rule);
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
  margin: 22px 0;
}

body .ccl-kb2-split__col {
  flex: 1 1 0;
  min-width: 0;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body .ccl-kb2-split__col + .ccl-kb2-split__col {
  border-left: 1px solid var(--kb2-rule);
}

body .ccl-kb2-split__col--no { background: #FDFBF3; }

body .ccl-kb2-split__label {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.3;
}

body .ccl-kb2-split__col--yes .ccl-kb2-split__label { color: #1B7A4B; }
body .ccl-kb2-split__col--no  .ccl-kb2-split__label { color: #8A5A00; }

body .ccl-kb2-split__col p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kb2-body);
}

@media (max-width: 720px) {
  body .ccl-kb2-split { flex-direction: column; }
  body .ccl-kb2-split__col + .ccl-kb2-split__col {
    border-left: 0;
    border-top: 1px solid var(--kb2-rule);
  }
  body .ccl-kb2-split__col { padding: 16px 18px; }
}

/* --- Info note: the artboard's blue aside ------------------------------- */
/* The artboard keeps two weights of aside: a white card for a warning or a  */
/* deadline, and this blue note for a useful fact. The icon already in the   */
/* markup decides which one a box gets.                                      */

body .ccl-nofault--highlight:has(> h4 > i.fa-info-circle),
body .ccl-nofault--highlight:has(> h4 > i.fa-lightbulb),
body .ccl-nofault--highlight:has(> h4 > i.fa-stethoscope) {
  background: #EEF3FF;
  background-image: none;
  border: 0;
  border-left: 3px solid var(--kb2-action);
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
}

body .ccl-nofault--highlight:has(> h4 > i.fa-info-circle) h4,
body .ccl-nofault--highlight:has(> h4 > i.fa-lightbulb) h4,
body .ccl-nofault--highlight:has(> h4 > i.fa-stethoscope) h4 {
  color: #123FAD;
}

body .ccl-nofault--highlight:has(> h4 > i.fa-info-circle) h4 i,
body .ccl-nofault--highlight:has(> h4 > i.fa-lightbulb) h4 i,
body .ccl-nofault--highlight:has(> h4 > i.fa-stethoscope) h4 i {
  color: #123FAD;
}

body .ccl-nofault--highlight:has(> h4 > i.fa-info-circle) p,
body .ccl-nofault--highlight:has(> h4 > i.fa-lightbulb) p,
body .ccl-nofault--highlight:has(> h4 > i.fa-stethoscope) p,
body .ccl-nofault--highlight:has(> h4 > i.fa-info-circle) li,
body .ccl-nofault--highlight:has(> h4 > i.fa-lightbulb) li,
body .ccl-nofault--highlight:has(> h4 > i.fa-stethoscope) li {
  color: #14223A;
}


/* --- Mobile reading order ----------------------------------------------- */
/* The "Article - mobile" artboard puts the contents row directly under the  */
/* short-answer card and keeps the rail cards for later. Below 1024px the    */
/* rail dissolves into the page grid so its parts can be ordered that way.   */

@media (max-width: 1024px) {
  body .ccl-nofault--article-container > .ccl-nofault--rail,
  body .ccl-nofault--article-container > .ccl-nofault--articlecol { display: contents; }
  body .ccl-nofault--article-container > .ccl-nofault--articlecol > .ccl-nofault--takeaways { order: -2; }
  body .ccl-nofault--article-container > .ccl-nofault--rail > .ccl-nofault--toc { order: -1; }
  body .ccl-nofault--article-container > .ccl-nofault--articlecol > .ccl-nofault--article-content { order: 0; }
  body .ccl-nofault--article-container > .ccl-nofault--rail > .ccl-nofault--railcard { order: 1; }
  body .ccl-nofault--article-container > .ccl-nofault--articlecol > .ccl-nofault--rating { order: 2; }
  body .ccl-nofault--article-container > .ccl-nofault--articlecol > .ccl-nofault--adjacent { order: 3; }
  body .ccl-nofault--article-container > .ccl-nofault--articlecol > .ccl-nofault--related { order: 4; }
  body .ccl-nofault--article-container > .ccl-nofault--articlecol > .ccl-nofault--disclaimer { order: 5; }
}

/* --- Touch targets on phones -------------------------------------------- */
/* The build kit sets a 44px minimum. Below 720px the hub sub-topic links,   */
/* the browse link and the quiet links are given that height.                */

@media (max-width: 720px) {
  body .ccl-kb2__hub-links a,
  body .ccl-kb2__hub-all,
  body .ccl-kb2__quiet-link,
  body .ccl-kb2__latest-head a,
  body .ccl-kb2__guide-go {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  body .ccl-kb2__hub-head h3 a,
  body .ccl-kb2__filter,
  body .ccl-kb2__rail-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  body .ccl-nofault--toc-list a,
  body .ccl-nofault--raillink {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  body .ccl-kb2__hub-links a { width: 100%; }
}

/* --- Claim estimator chooser (template-kb-estimator.php) ---------------- */
/* Groups of evaluator cards under one band. The cards reuse the hub card so   */
/* nothing new is introduced to the kit.                                       */

.ccl-kb2__est-group { margin-top: 46px; }
.ccl-kb2__est-group:first-of-type { margin-top: 0; }

.ccl-kb2__est-title {
  margin: 0 0 6px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--kb2-ink);
}

.ccl-kb2__est-lede {
  margin: 0 0 20px;
  max-width: 72ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kb2-muted);
}

@media (max-width: 720px) {
  .ccl-kb2__est-group { margin-top: 36px; }
}

/* --- Hero search, to the Main artboard --------------------------------- */
/* The artboard shows a visible yellow label, a white 60px box with a search   */
/* glyph, and a yellow submit in Inter Tight. The first pass had a blue pill   */
/* and a hidden label, and the button fell back to Arial.                      */

.ccl-kb2__search { flex-direction: column; gap: 14px; max-width: 760px; }

.ccl-kb2__search-label { font-size: 14px; font-weight: 600; color: var(--kb2-signal); }

.ccl-kb2__search-row { display: flex; gap: 10px; }

.ccl-kb2__search-box {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 20px;
  background: #FFFFFF;
  border-radius: 10px;
}

.ccl-kb2__search-box:focus-within { outline: 3px solid var(--kb2-signal); outline-offset: 2px; }

.ccl-kb2__search-icon { flex: 0 0 auto; color: var(--kb2-muted); }

.ccl-kb2__search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  border-radius: 0;
  background: transparent;
  font-family: Inter, system-ui, sans-serif;
  font-size: 17px;
  color: var(--kb2-ink);
}

.ccl-kb2__search button {
  flex: 0 0 auto;
  height: 60px;
  padding: 0 34px;
  border: 0;
  border-radius: 10px;
  background: var(--kb2-signal);
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--kb2-ink);
  cursor: pointer;
}

.ccl-kb2__search button:hover { background: #F2D900; }

.ccl-kb2__quick-label { font-weight: 600; color: #8FA3C8; }

.ccl-kb2__pill { border-color: #33456E; }

@media (max-width: 720px) {
  .ccl-kb2__search-row { flex-direction: column; }
  .ccl-kb2__search-box { width: 100%; height: 52px; }
  .ccl-kb2__search button { width: 100%; height: 52px; padding: 0; }
}

/* --- Standing on its own feet ------------------------------------------- */
/* The redesign had been leaning on main.css’s legacy .ccl-nofault-- block for  */
/* the base font, leading and colour, the wrapper’s white ground, the flex      */
/* layout of the breadcrumbs and hero meta row, and the list reset inside the  */
/* short-answer card. Deleting that block used to move 95 of the 98 elements   */
/* on an article. Restating it here means the design owns itself, and the      */
/* legacy block can be retired from main.css without the page shifting.        */

.ccl-nofault--wrapper {
  background: #FFFFFF;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1E293B;
}

.ccl-nofault--hero,
.ccl-nofault--hero-content { position: relative; }

.ccl-nofault--article { background: #FFFFFF; }

.ccl-nofault--breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  line-height: 1.4;
}

.ccl-nofault--breadcrumb-link,
.ccl-nofault--breadcrumb-current,
.ccl-nofault--breadcrumb-separator { display: inline-block; }

.ccl-nofault--hero h1 { margin: 0 0 24px; }

.ccl-nofault--hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.ccl-nofault--hero-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  line-height: 1.4;
}

.ccl-nofault--takeaways h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.ccl-nofault--takeaways ul { margin: 0; padding: 0; list-style: none; }
.ccl-nofault--takeaways li { position: relative; margin: 0; padding-left: 20px; list-style: none; }

.ccl-nofault--highlight h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }

/* --- Standing on its own feet, part two --------------------------------- */

.ccl-nofault--wrapper h1,
.ccl-nofault--wrapper h2,
.ccl-nofault--wrapper h3,
.ccl-nofault--wrapper h4,
.ccl-nofault--wrapper h5,
.ccl-nofault--wrapper h6 { font-family: "Inter Tight", Inter, sans-serif; }

.ccl-nofault--hero { overflow: hidden; }
.ccl-nofault--article { padding-left: 20px; padding-right: 20px; }

.ccl-nofault--breadcrumb-separator { font-size: 0.7em; line-height: 1.4; color: rgba(255, 255, 255, 0.5); }
.ccl-nofault--breadcrumb-separator i { font-size: 0.7em; }

.ccl-nofault--hero-meta-item i { font-size: 1em; line-height: 1; }

.ccl-nofault--article-content ol { margin: 24px 0; padding-left: 0; }

.ccl-nofault--table {
  background: #FFFFFF;
  border-top: 2px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
}

.ccl-nofault--rating,
.ccl-nofault--related,
.ccl-nofault--disclaimer { border-top: 1px solid #E5E7EB; }

.ccl-nofault--rating-buttons { display: flex; justify-content: center; }
.ccl-nofault--rating-btn { display: flex; align-items: center; gap: 10px; font-family: Inter, sans-serif; }
.ccl-nofault--rating-btn i { font-size: 1.8em; line-height: 1; color: var(--kb2-action); }

.ccl-nofault--rating-thanks {
  display: none;
  margin-top: 16px;
  padding-left: 20px;
  border-radius: 8px;
  background: rgba(29, 99, 255, 0.1);
  color: var(--kb2-action);
}

.ccl-nofault--related-title { display: flex; align-items: center; gap: 12px; }
.ccl-nofault--related-card { overflow: hidden; }
.ccl-nofault--related-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border-radius: 12px;
}
.ccl-nofault--related-card-icon i { font-size: 1.3em; line-height: 1; }
.ccl-nofault--related-card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ccl-nofault--related-card-meta { display: flex; align-items: center; }
.ccl-nofault--related-card-meta-item { display: flex; align-items: center; }

/* --- Standing on its own feet, part three ------------------------------- */
/* The last of it: icon sizing and colour inside the takeaways, the related  */
/* cards and the rating row, plus two gradients the artboards retired that   */
/* were still coming from the legacy block.                                 */

.ccl-nofault--takeaways h3 i.fas { font-size: 1.8em; line-height: 1; color: var(--kb2-action); }

.ccl-nofault--highlight h4 { line-height: 1.2; }
.ccl-nofault--rating-title { line-height: 1.2; }
.ccl-nofault--table td { line-height: 1.6; }

.ccl-nofault--table thead { background-image: none; }
.ccl-nofault--related-card-icon { background-image: none; }

.ccl-nofault--related-card { position: relative; }
.ccl-nofault--related-card-icon i.fas { font-size: 1.3em; line-height: 1; color: var(--kb2-action); }
.ccl-nofault--related-card-title i.fas { color: var(--kb2-action); }
.ccl-nofault--related-card-meta-item i.fas { font-size: 0.8em; line-height: 1; }

.ccl-nofault--rating-thanks { padding-top: 12px; font-weight: 600; }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   Artboard icons and the current nav item          CCL 22-09-2026
   The Main artboard carries a stroke icon inside every quick pill and a
   44px tinted square at the head of every hub card, and it shows the nav
   item you are on underlined in signal yellow. None of that existed here.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.ccl-kb2__quick .ccl-kb2__pill {
  gap: 8px;
  font-weight: 600;
}

.ccl-kb2__quick .ccl-kb2__pill svg {
  display: block;
  flex: 0 0 auto;
}

.ccl-kb2 .ccl-kb2__hub { gap: 16px; }

.ccl-kb2 .ccl-kb2__hub-head {
  align-items: center;
  gap: 14px;
}

.ccl-kb2__hub-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #EEF3FF;
}

.ccl-kb2__hub-icon svg { display: block; }

.ccl-kb2 .ccl-kb2__hub-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ccl-kb2 .ccl-kb2__hub-title a { color: var(--kb2-ink); }
.ccl-kb2 .ccl-kb2__hub-title a:hover { color: var(--kb2-action); }

a.cc-link.is-current {
  font-weight: 700;
  box-shadow: inset 0 -3px 0 0 #FFE500;
}

/* --- Article standfirst -------------------------------------------------- */
/* CCL 22-09-2026: the Article artboard sets one line of 18px body copy
   between the H1 and the byline row. */

.ccl-nofault--hero-lede {
  margin: 0;
  max-width: 820px;
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  color: #C6D0E4;
}

@media (max-width: 720px) {
  .ccl-nofault--hero-lede { font-size: 16px; }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   Phone: the compact shapes from the Mobile artboard   CCL 22-09-2026
   On a phone the canvas drops each hub card to a single tappable row - icon,
   title, arrow - because six full cards is nearly three thousand pixels of
   scrolling. It also drops the hero pills, since every one of them points at
   a hub that is now a row a thumb away. Headings are left as they are: the
   canvas swaps them for their eyebrows, which would cost the page its H2s.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

@media (max-width: 720px) {

  .ccl-kb2--home .ccl-kb2__quick { display: none; }

  .ccl-kb2--home .ccl-kb2__hubs {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ccl-kb2--home .ccl-kb2__hub {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
  }

  .ccl-kb2--home .ccl-kb2__hub-head { display: contents; }

  .ccl-kb2--home .ccl-kb2__hub-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .ccl-kb2--home .ccl-kb2__hub-count,
  .ccl-kb2--home .ccl-kb2__hub-blurb,
  .ccl-kb2--home .ccl-kb2__hub-links { display: none; }

  .ccl-kb2--home .ccl-kb2__hub-title {
    font-size: 17px;
    line-height: 1.3;
  }

  .ccl-kb2--home .ccl-kb2__hub-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
  }

  .ccl-kb2--home .ccl-kb2__hub-all::after {
    content: "\2192";
    font-size: 20px;
    line-height: 1;
    color: var(--kb2-action);
  }

  .ccl-kb2 .ccl-kb2__cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ccl-kb2 .ccl-kb2__cta-actions .ccl-kb2__btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 720px) {
  /* the actions row is a flex item of a column parent, so it needs telling
     to fill the width before its buttons can. */
  .ccl-kb2 .ccl-kb2__cta-actions {
    width: 100%;
    align-self: stretch;
  }
}

/* --- Group actions on the strip ------------------------------------------ */
/* CCL 22-09-2026: the named actions become their own links, so a reader who
   recognises the flight number does not have to go via the index page. */

.ccl-kb2__strip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.ccl-kb2 .ccl-kb2__pill--sm {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
}

/* --- Estimator group headings ------------------------------------------- */
/* CCL 22-09-2026: the chooser groups carry the same situation icon as the
   matching hub card on the landing page, so the two pages read as one. */

.ccl-kb2 .ccl-kb2__est-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ccl-kb2 .ccl-kb2__est-title svg {
  display: block;
  flex: 0 0 auto;
}

/* --- Callout headings, whichever level they arrive at -------------------- */
/* CCL 22-09-2026: the callout heading used to be an H4 in every guide and the
   rules above are written for that tag. The article template now pulls a
   heading up a rung where it would otherwise skip a level, so a callout can
   arrive as an H3. These restate the same treatment for either tag. */

body .ccl-nofault--highlight :is(h3, h4) {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--kb2-ink);
}

body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-info-circle),
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-lightbulb),
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-stethoscope) {
  background: #EEF3FF;
  background-image: none;
  border: 0;
  border-left: 3px solid var(--kb2-action);
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
}

body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-info-circle) :is(h3, h4),
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-lightbulb) :is(h3, h4),
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-stethoscope) :is(h3, h4) {
  color: #123FAD;
}

body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-info-circle) :is(h3, h4) i,
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-lightbulb) :is(h3, h4) i,
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-stethoscope) :is(h3, h4) i {
  color: #123FAD;
}

body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-info-circle) p,
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-lightbulb) p,
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-stethoscope) p,
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-info-circle) li,
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-lightbulb) li,
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-stethoscope) li {
  color: #14223A;
}

/* --- Keyboard focus ------------------------------------------------------ */
/* CCL 22-09-2026: the redesign defined no focus treatment at all, so a
   keyboard user got whatever the browser draws by default - which over the
   navy bands is close to invisible. Action blue on paper, signal yellow on
   the navy, navy on the yellow. :focus-visible only, so a mouse click does
   not leave a ring behind it. */

.ccl-kb2 a:focus-visible,
.ccl-kb2 button:focus-visible,
.ccl-kb2 input:focus-visible,
.ccl-kb2 select:focus-visible,
.ccl-kb2 summary:focus-visible,
.ccl-nofault--wrapper a:focus-visible,
.ccl-nofault--wrapper button:focus-visible,
.ccl-nofault--wrapper summary:focus-visible {
  outline: 3px solid #1D63FF;
  outline-offset: 2px;
}

.ccl-kb2__hero a:focus-visible,
.ccl-kb2__hero button:focus-visible,
.ccl-kb2__hero input:focus-visible,
.ccl-kb2__strip a:focus-visible,
.ccl-kb2 .ccl-kb2__rail-card--navy a:focus-visible,
.ccl-nofault--hero a:focus-visible,
.ccl-nofault--railcard--navy a:focus-visible {
  outline-color: #FFE500;
}

.ccl-kb2__cta a:focus-visible,
.ccl-kb2__cta button:focus-visible,
.ccl-kb2 .ccl-kb2__rail-card--signal a:focus-visible,
.ccl-nofault--railcard--signal a:focus-visible {
  outline-color: #0B1B3A;
}

/* --- Wide tables on a phone --------------------------------------------- */
/* CCL 22-09-2026: the wrapper had overflow:hidden, to clip the rounded
   corners. On a 390px screen that quietly amputated the table - a
   three-column comparison lost its third column with no way to reach it.
   It scrolls sideways now, with a fade on the right edge so a reader can
   see there is more, and the table keeps a readable minimum width instead
   of squashing its columns to nothing. */

body .ccl-nofault--table-wrapper {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

body .ccl-nofault--table-wrapper > table {
  min-width: 520px;
}

@media (max-width: 720px) {
  body .ccl-nofault--table-wrapper {
    background-image: linear-gradient(to right, rgba(11, 18, 32, 0) 0%, rgba(11, 18, 32, 0.10) 100%);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 28px 100%;
    background-attachment: local, scroll;
  }
}

/* --- Auto-inserted links inside a table header --------------------------- */
/* CCL 22-09-2026: the internal-linking plugin occasionally turns a phrase in a
   column header into a link, which then renders as blue underlined text on the
   navy header bar. Three headers across the estate. The link still works; it
   just stops shouting. */

body .ccl-nofault--table th a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

body .ccl-nofault--table th a:hover,
body .ccl-nofault--table th a:focus-visible {
  color: inherit;
  border-bottom-color: currentColor;
}

/* --- Comparison tables on a phone ---------------------------------------- */
/* CCL 22-09-2026: scrolling a wide table sideways on a 390px screen is not
   reading it - the row you are on slides away and the column you are reading
   is sliced mid-word at the edge. Below 720px each row becomes a card and
   each value carries its column name, taken from the header row by the script
   in the template. Above 720px the table is a table. */

@media (max-width: 720px) {

  body .ccl-nofault--table-wrapper:has(> table[data-stackable]) {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    background-image: none;
  }

  body .ccl-nofault--table[data-stackable],
  body .ccl-nofault--table-wrapper > table[data-stackable] {
    display: block;
    width: 100%;
    min-width: 0;
    border-collapse: separate;
  }

  body table[data-stackable] > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  body table[data-stackable] > tbody { display: block; }

  body table[data-stackable] > tbody > tr {
    display: block;
    margin: 0 0 12px;
    padding: 16px 18px;
    border: 1px solid var(--kb2-rule, #E6E6DF);
    border-radius: 14px;
    background: #FFFFFF;
  }

  body table[data-stackable] > tbody > tr:last-child { margin-bottom: 0; }

  body table[data-stackable] > tbody > tr > td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    font-size: 15px;
    line-height: 1.55;
  }

  body table[data-stackable] > tbody > tr > td + td { margin-top: 12px; }

  body table[data-stackable] > tbody > tr > td:first-child {
    font-family: "Inter Tight", Inter, sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--kb2-ink, #0B1220);
  }

  body table[data-stackable] > tbody > tr > td + td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--kb2-action, #1D63FF);
  }
}

/* CCL 22-09-2026: the search form carried a bottom margin to clear the quick
   pills. The pills are hidden on a phone, so that margin was leaving 66px of
   empty navy under the Search button. */

@media (max-width: 720px) {
  .ccl-kb2--home .ccl-kb2__search { margin-bottom: 0; }
}

/* --- Pull quotes ---------------------------------------------------------- */
/* CCL 23-09-2026: 25 guides quote someone - a minister, a regulator, a road
   authority - and the design had no treatment for it, so they arrived as body
   text with a 40px indent and nothing else. They are quotations, not callouts,
   so they keep their own shape: a signal rule and slightly larger type, not
   the white card a warning gets. */

body .ccl-nofault--article-content blockquote {
  margin: 26px 0;
  padding: 2px 0 2px 22px;
  border-left: 3px solid var(--kb2-signal, #FFE500);
  font-size: 18px;
  line-height: 1.6;
  color: var(--kb2-ink, #0B1220);
}

body .ccl-nofault--article-content blockquote p { margin: 0 0 10px; }
body .ccl-nofault--article-content blockquote p:last-child { margin-bottom: 0; }

body .ccl-nofault--article-content blockquote em { font-style: italic; }

@media (max-width: 720px) {
  body .ccl-nofault--article-content blockquote {
    margin: 20px 0;
    padding-left: 16px;
    font-size: 17px;
  }
}

/* The cards in a row are stretched to a common height, so a card whose
   blurb runs one line shorter left its footer link floating with dead
   space beneath it — visible across the estimator's situation cards.
   Push the link to the foot of whatever height the row settles on. */
body .ccl-kb2__hub {
	display: flex;
	flex-direction: column;
}

body .ccl-kb2__hub-all {
	margin-top: auto;
}

/* ===============================================================
   Phone geometry for the article, from the mobile artboard: one
   20px gutter, cards spanning the column, and nothing nested
   inside something else that also pads.

   Live, the section padded 20, the container padded another 24,
   the card another 28 and the list another 20 — 92px of a 390px
   screen gone on the left alone, which ran the short answer at
   twenty-six characters a line.
   =============================================================== */

@media (max-width: 720px) {

	body .ccl-nofault--article {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* The section already gives the gutter; the container must not
	   give a second one. */
	body .ccl-nofault--article .ccl-nofault--article-container,
	body .ccl-nofault--article.has-toc .ccl-nofault--article-container {
		padding-left: 0;
		padding-right: 0;
	}

	body .ccl-nofault--takeaways {
		padding-left: 20px;
		padding-right: 20px;
	}

	body .ccl-nofault--takeaways ul li { padding-left: 26px; }

	body .ccl-nofault--highlight,
	body .ccl-nofault--adjacent-link,
	body .ccl-nofault--railcard,
	body .ccl-nofault--rating-container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ============================================================================
   INK & AMBER - knowledgebase surface
   Added 2026-09-23. Appended last, so it lands after everything above it.

   Why this exists:
   The knowledgebase used to sit on flat white with navy furniture and signal
   yellow for emphasis. Signal yellow is also the masthead, so every page
   competed with its own header, and a white card on a white page needed a 1px
   outline just to exist. This layer puts the article on warm paper, lets the
   white cards float without outlines, and moves emphasis to amber so the brand
   yellow is left doing one job. The dark panel is reserved for deadlines,
   because a missed date is the thing that quietly ends a claim.

   How it works:
   ccl-kb2.css already defines a small token set on .ccl-kb2 and on
   body .ccl-nofault--wrapper. Re-pointing those eleven tokens moves most of
   the palette in one place. The rules after them cover the elements that were
   written with literal colours rather than tokens, plus the structural changes
   (borders off, larger radii).

   Every colour below was measured against its own background for WCAG AA at
   the size and weight it is actually used at, on a rendered article, not in
   the abstract. Three rail-card combinations failed that check while this was
   being built and are corrected here rather than shipped.
   ========================================================================= */

body .ccl-nofault--wrapper,
body .ccl-kb2 {
	--kb2-navy: #2A2620;
	--kb2-navy-lift: #3A342B;
	--kb2-signal: #E0A94A;
	--kb2-action: #9C6412;
	--kb2-action-dark: #7A5210;
	--kb2-paper: #F8F6F1;
	--kb2-rule: #E7E1D5;
	--kb2-ink: #1D1B16;
	--kb2-body: #302D24;
	--kb2-muted: #6B6558;
	--kb2-on-navy: #C6BCA8;

	/* Added by this layer. */
	--kbi-card: #FFFFFF;
	--kbi-soft: #F0E6D4;
	--kbi-deep-line: #5E5647;
	--kbi-deep-quiet: #9A917E;
}

/* --- the page --------------------------------------------------------- */

body .ccl-nofault--article {
	background: var(--kb2-paper);
}

/* --- cards: the outlines come out ------------------------------------- */

body .ccl-nofault--takeaways,
body .ccl-nofault--highlight,
body .ccl-nofault--toc,
body .ccl-nofault--related-card,
body .ccl-nofault--rating-container,
body .ccl-nofault--adjacent-link,
body .ccl-nofault--rating-btn {
	background: var(--kbi-card);
}

body .ccl-nofault--takeaways,
body .ccl-nofault--highlight,
body .ccl-nofault--toc,
body .ccl-nofault--related-card,
body .ccl-nofault--rating-container,
body .ccl-nofault--adjacent-link {
	border: 0;
}

body .ccl-nofault--takeaways {
	border-radius: 22px;
}

body .ccl-nofault--highlight,
body .ccl-nofault--toc,
body .ccl-nofault--related-card,
body .ccl-nofault--rating-container,
body .ccl-nofault--adjacent-link {
	border-radius: 18px;
}

body .ccl-nofault--rating-btn {
	border-color: var(--kb2-rule);
	color: var(--kb2-body);
}

body .ccl-nofault--rating-btn:hover,
body .ccl-nofault--rating-btn:focus {
	border-color: var(--kb2-action);
	color: var(--kb2-action-dark);
}

/* --- hero -------------------------------------------------------------- */

/* The type chip was signal yellow, which put a second masthead-coloured
   block at the top of every article. Soft amber says the same thing. */
body .ccl-nofault--typechip {
	background: var(--kbi-soft);
	color: var(--kb2-action-dark);
}

body .ccl-nofault--hero .ccl-nofault--hero-lede {
	color: var(--kb2-on-navy);
}

body .ccl-nofault--hero-category {
	border-color: var(--kbi-deep-line);
}

body .ccl-nofault--breadcrumb-current {
	color: #D8CFBC;
}

/* Was #8FA3C8; on this panel it measured 2.65 and the crumbs ran together. */
body .ccl-nofault--breadcrumb-separator {
	color: var(--kbi-deep-quiet);
}

/* --- reading progress -------------------------------------------------- */

body .ccl-nofault--progress {
	background: var(--kb2-rule);
}

body .ccl-nofault--progress > * {
	background: var(--kb2-action);
}

/* --- contents ---------------------------------------------------------- */

body .ccl-nofault--toc .ccl-nofault--toc-title,
body .ccl-nofault--toc-d > summary {
	color: var(--kb2-muted);
}

body .ccl-nofault--wrapper .ccl-nofault--toc-list a {
	color: var(--kb2-body);
}

body .ccl-nofault--wrapper .ccl-nofault--toc-list a:hover,
body .ccl-nofault--wrapper .ccl-nofault--toc-list a:focus,
body .ccl-nofault--wrapper .ccl-nofault--toc-list a.is-current {
	color: var(--kb2-action-dark);
}

/* --- body copy --------------------------------------------------------- */

body .ccl-nofault--article-content a:not([class]) {
	color: var(--kb2-action);
}

body .ccl-nofault--article-content a:not([class]):hover,
body .ccl-nofault--article-content a:not([class]):focus {
	color: var(--kb2-action-dark);
}

/* --- rail cards --------------------------------------------------------
   Two variants with opposite backgrounds, so each needs its own text
   colours. Getting this wrong is what produced 1.14:1 and 1.0:1 readings
   during the build. */

body .ccl-nofault--railcard,
body .ccl-nofault--railcard--navy {
	background: var(--kb2-navy);
	border-color: var(--kb2-navy);
}

body .ccl-nofault--railcard h2,
body .ccl-nofault--railcard h3,
body .ccl-nofault--railcard--navy h2,
body .ccl-nofault--railcard--navy h3 {
	color: #FFFFFF;
}

body .ccl-nofault--railcard p,
body .ccl-nofault--railcard--navy p {
	color: var(--kb2-on-navy);
}

body .ccl-nofault--railcard .ccl-nofault--raillink,
body .ccl-nofault--railcard--navy .ccl-nofault--raillink {
	color: var(--kb2-signal);
}

body .ccl-nofault--railcard--signal {
	background: var(--kbi-soft);
	border-color: var(--kbi-soft);
}

body .ccl-nofault--railcard--signal h2,
body .ccl-nofault--railcard--signal h3 {
	color: var(--kb2-ink);
}

body .ccl-nofault--railcard--signal p {
	color: var(--kb2-body);
}

body .ccl-nofault--railcard--signal .ccl-nofault--raillink {
	color: var(--kb2-action-dark);
}

body .ccl-nofault--railbtn--navy {
	background: var(--kb2-action);
	color: #FFFFFF;
}

body .ccl-nofault--railbtn--signal {
	background: var(--kb2-signal);
	color: var(--kb2-navy);
}

/* The quiet button appears in both cards, so it takes its colours from the
   card it is in rather than assuming a dark one. */
body .ccl-nofault--railcard .ccl-nofault--railbtn--quiet,
body .ccl-nofault--railcard--navy .ccl-nofault--railbtn--quiet {
	border-color: var(--kbi-deep-line);
	color: #EDE6D8;
}

body .ccl-nofault--railcard--signal .ccl-nofault--railbtn--quiet {
	border-color: #C9B894;
	color: var(--kb2-action-dark);
}

body .ccl-nofault--railpill {
	background: var(--kb2-signal);
	color: var(--kb2-navy);
}

/* --- related and adjacent ---------------------------------------------- */

body .ccl-nofault--related-card-icon,
body .ccl-nofault--related-card-arrow {
	color: var(--kb2-action);
}

body .ccl-nofault--related-card-title,
body .ccl-nofault--adjacent-title {
	color: var(--kb2-ink);
}

body .ccl-nofault--adjacent-label {
	color: var(--kb2-muted);
}

/* --- tables ------------------------------------------------------------ */

body .ccl-nofault--table th {
	background: var(--kb2-navy);
	color: #FFFFFF;
}

body .ccl-nofault--table td {
	color: var(--kb2-body);
	border-color: var(--kb2-rule);
}

/* --- disclaimer -------------------------------------------------------- */

body .ccl-nofault--disclaimer {
	border-color: var(--kb2-rule);
}

/* --- knowledgebase home, topic and search ------------------------------
   The article moved to paper-with-white-cards above. These templates were
   the other way round (white page, paper cards) and kept a few literal
   blues that the token re-point could not reach, so the hub cards still
   had pale-blue icon chips and blue counts sitting on warm cream. This
   brings them into line. */

body .ccl-kb2 {
	background: var(--kb2-paper);
}

body .ccl-kb2__hub,
body .ccl-kb2__result-list > li,
body .ccl-kb2__q {
	background: #FFFFFF;
	border: 0;
}

body .ccl-kb2__hub-icon,
body .ccl-kb2__hub-count,
body .ccl-kb2__tag {
	background: var(--kbi-soft);
}

body .ccl-kb2__hub-count,
body .ccl-kb2__tag {
	color: var(--kb2-action-dark);
}

body .ccl-kb2__pill {
	border-color: var(--kbi-deep-line);
}

body .ccl-kb2__quick-label {
	color: var(--kbi-deep-quiet);
}

/* --- info callouts -----------------------------------------------------
   ccl-kb2.css gives a highlight box a blue treatment when its heading
   carries an info, lightbulb or stethoscope icon. Those selectors use
   :has(), so they outrank a plain .ccl-nofault--highlight rule. They are
   matched here rather than fought, and recoloured to the warm equivalent
   so the callout keeps its meaning without reintroducing blue.
   Measured on a rendered article: heading 5.58:1, body copy 10.9:1. */

body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-info-circle),
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-lightbulb),
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-stethoscope) {
	background: var(--kbi-soft);
}

body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-info-circle) :is(h3, h4),
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-lightbulb) :is(h3, h4),
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-stethoscope) :is(h3, h4),
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-info-circle) :is(h3, h4) i,
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-lightbulb) :is(h3, h4) i,
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-stethoscope) :is(h3, h4) i {
	color: var(--kb2-action-dark);
}

body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-info-circle) p,
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-lightbulb) p,
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-stethoscope) p {
	color: var(--kb2-body);
}

/* Internal links inserted by the linking plugin carry a class, so the
   unclassed-link rule above does not reach them. */
body .ccl-nofault--article-content a,
body .ccl-nofault--article-content a.wpil_keyword_link {
	color: var(--kb2-action);
}

body .ccl-nofault--article-content a:hover,
body .ccl-nofault--article-content a:focus,
body .ccl-nofault--article-content a.wpil_keyword_link:hover {
	color: var(--kb2-action-dark);
}

body .ccl-nofault--breadcrumbs,
body .ccl-nofault--breadcrumbs i {
	color: var(--kbi-deep-quiet);
}

/* A link on the soft callout fill needs the darker amber: the standard
   one measured 4.0:1 there. */
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-info-circle) a,
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-lightbulb) a,
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-stethoscope) a,
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-info-circle) a.wpil_keyword_link,
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-lightbulb) a.wpil_keyword_link,
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-stethoscope) a.wpil_keyword_link {
	color: var(--kb2-action-dark);
}

/* --- the rest of the callout family ------------------------------------
   Only info, lightbulb and stethoscope ever had a treatment. Everything
   else fell through to a plain card, which left all 47 warning callouts
   in the knowledgebase looking less important than a tip. This applies
   the rule the rest of the design already follows: dark means a deadline.

   Three steps, no new colours:
     soft amber fill   info, tip, medical  - context you may want
     deep left edge    warning, clock      - something that can end a claim
     amber left edge   calculator, money, gavel, checklist - a tool or a rule
*/

body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-exclamation-triangle),
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-clock) {
	border-top: 0;
	border-right: 0;
	border-bottom: 0;
	border-left: 3px solid var(--kb2-navy);
}

body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-exclamation-triangle) :is(h3, h4),
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-clock) :is(h3, h4),
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-exclamation-triangle) :is(h3, h4) i,
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-clock) :is(h3, h4) i {
	color: var(--kb2-navy);
}

body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-calculator),
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-dollar-sign),
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-gavel),
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-list-check) {
	border-top: 0;
	border-right: 0;
	border-bottom: 0;
	border-left: 3px solid var(--kb2-action);
}

body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-calculator) :is(h3, h4) i,
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-dollar-sign) :is(h3, h4) i,
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-gavel) :is(h3, h4) i,
body .ccl-nofault--highlight:has(> :is(h3, h4) > i.fa-list-check) :is(h3, h4) i {
	color: var(--kb2-action);
}