/* ==========================================================================
   Cobaltmaize icon system
   ---------------------------------------------------------------------------
   Line art from Lucide (https://lucide.dev), ISC License. Every icon on the
   site draws from this one family: one stroke weight, one accent colour, one
   24px grid. Nothing here overrides main.css -- it only adds .cm-icon.

   Loaded after main.css so the --cm-gold / --cm-blue tokens already exist.
   ========================================================================== */

:root {
  /* Single accent for every icon on the site. The site background is deep
     navy, so gold is the only accent with enough contrast to carry line art
     at small sizes -- the existing donate badges already use #f0c419 for the
     same reason. Swap this one value to re-tint the entire system. */
  --cm-icon-accent: var(--cm-gold-500, #d4a017);
  --cm-icon-muted:  var(--cm-text-faint, #8088a0);
  --cm-icon-bright: var(--cm-gold-300, #f0c419);

  /* One stroke weight for the whole family. Matched to the 1.6 already used
     by the FAQ chevron and the marquee placeholder glyphs, so the new icons
     and the theme's existing inline SVGs read as one set. */
  --cm-icon-stroke: 1.6;

  --cm-icon-size:   1.25rem;  /* inline, next to body text */
  --cm-icon-size-m: 1.75rem;  /* list and card bullets     */
  --cm-icon-size-l: 2.5rem;   /* feature tiles             */
}

/* The sprite itself must not occupy layout. Do not use display:none --
   that suppresses rendering of <use> references in some engines. */
.cm-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.cm-icon {
  width: var(--cm-icon-size);
  height: var(--cm-icon-size);
  display: inline-block;
  vertical-align: middle;
  flex: none;

  fill: none;
  stroke: currentColor;
  stroke-width: var(--cm-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;

  /* Stroke keeps its visual weight regardless of the rendered size, so a
     2.75rem tile icon and a 1.5rem inline icon look like one family. */
  vector-effect: non-scaling-stroke;
  color: var(--cm-icon-accent);
}

/* --- sizes -------------------------------------------------------------- */
.cm-icon--m { width: var(--cm-icon-size-m); height: var(--cm-icon-size-m); }
.cm-icon--l { width: var(--cm-icon-size-l); height: var(--cm-icon-size-l); }

/* --- tone --------------------------------------------------------------- */
.cm-icon--muted   { color: var(--cm-icon-muted); }
.cm-icon--inherit { color: inherit; }

/* Icons sitting inside a link adopt the link's colour on hover, so they
   never read as a separate element from the text they label. */
a:hover .cm-icon--inherit,
a:focus .cm-icon--inherit { color: inherit; }

/* A card that lights up on hover brightens its icon with it. */
.cm-solutions__card:hover .cm-icon,
.cm-solutions__card:focus .cm-icon { color: var(--cm-icon-bright); }

/* --- capability tile (icon above a heading) ----------------------------- */
.cm-caps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.75rem 2rem;
  margin-top: 2.25rem;
}
.cm-caps__item { text-align: left; }
.cm-caps__icon { display: block; margin-bottom: 0.75rem; }
.cm-caps__name {
  font-family: var(--cm-font-display, Georgia, serif);
  font-size: 1.15rem;
  margin: 0 0 0.35rem;
  color: var(--cm-text, #e9ecf3);
}
.cm-caps__body {
  margin: 0;
  color: var(--cm-text-soft, #b5bccc);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* --- "What we make" capability section ---------------------------------- */
.cm-caps { padding: 76px 0; }
.cm-caps__group { margin-top: 3.25rem; }
.cm-caps__group + .cm-caps__group {
  margin-top: 4rem;
  padding-top: 3.25rem;
  border-top: 1px solid rgba(212,160,23,.16);
}
.cm-caps__grouphead { max-width: 720px; }
.cm-caps__grouptitle {
  font-family: var(--cm-font-display, Georgia, serif);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--cm-gold-300, #f0c419);
  margin: .55rem 0 .4rem;
}
.cm-caps__grouplede {
  color: var(--cm-text-soft, #b5bccc);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0;
}
.cm-caps__more { margin-top: 3rem; text-align: center; }
.cm-caps__more .cm-icon { margin-left: .45rem; }

/* --- icons added to existing components --------------------------------- */
.cm-solutions__icon { margin-bottom: 2px; }
.cm-pillars__icon   { display: block; margin-bottom: .7rem; }

/* The FAQ chevron lives inside a 26px ring, so it needs to sit smaller than
   the default inline size. Rotation stays on the wrapper, as before. */
.cm-fpfaq__icon .cm-icon { width: 14px; height: 14px; }

/* --- inline feature row (icon beside text) ------------------------------ */
.cm-feature { display: flex; gap: 0.9rem; align-items: flex-start; }
.cm-feature__icon { margin-top: 0.15rem; }

/* --- icon in front of a footer contact line ----------------------------- */
.cm-footer__contact li { display: flex; align-items: center; gap: 0.55rem; }

/* --- compact team strip at the bottom of every page --------------------- */
.cm-teamstrip {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin: 0 0 2rem;
  padding: 0 0 1.75rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.cm-teamstrip__link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease;
}
.cm-teamstrip__link:hover,
.cm-teamstrip__link:focus {
  border-color: var(--cm-gold-500, #d4a017);
  background: rgba(255,255,255,.03);
  text-decoration: none;
}
.cm-teamstrip__photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-size: cover;
  background-position: center top;
  flex: none;
  border: 1px solid rgba(255,255,255,.15);
}
.cm-teamstrip__text { display: flex; flex-direction: column; line-height: 1.25; }
.cm-teamstrip__name {
  font-family: var(--cm-font-display, Georgia, serif);
  font-size: 1.05rem;
  color: var(--cm-text, #e9ecf3);
}
.cm-teamstrip__role {
  font-size: 0.78rem;
  color: var(--cm-text-faint, #8088a0);
  letter-spacing: .02em;
}
.cm-teamstrip__link:hover .cm-teamstrip__name { color: var(--cm-gold-300, #f0c419); }

/* --- accessibility ------------------------------------------------------ */
/* Decorative icons are aria-hidden in markup. An icon that is the only
   content of a control needs a visually-hidden label instead. */
.cm-icon-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-contrast: more) {
  :root {
    --cm-icon-stroke: 2.1;
    --cm-icon-accent: var(--cm-gold-300, #f0c419);
    --cm-icon-muted:  var(--cm-text-soft, #b5bccc);
  }
}

@media (max-width: 640px) {
  :root { --cm-icon-size-l: 2.1rem; }
  .cm-teamstrip { gap: .75rem; }
}


/* =========================================================================
   v3 RETINT — 18 August 2026

   The icon system was built gold because cobalt line art was invisible on
   the old #0e1d3f background. The v3 design inverts that: the canvas is
   white, so cobalt is the legible choice and gold is reserved for fills.
   Both reference designs draw their icons in blue, which is the same call.

   This file is enqueued AFTER main.css, so a .cm-icon colour set there
   loses to the .cm-icon rule above. Retinting therefore has to happen here,
   by re-pointing the token rather than by adding more specific selectors.

   The three inverted surfaces — the cobalt band, the gold band and the
   footer — get their own accent, because a cobalt icon on a cobalt band is
   no more visible than a cobalt icon on navy was.
   ========================================================================= */
:root {
  --cm-icon-accent: var(--cm-accent, #1a4dc9);
  --cm-icon-muted:  var(--cm-text-faint, #6b7896);
  --cm-icon-bright: var(--cm-accent-deep, #123a9e);
}

.cm-band--cobalt {
  --cm-icon-accent: var(--cm-gold-fill, #f0c419);
  --cm-icon-bright: #ffffff;
  --cm-icon-muted:  rgba(255,255,255,.72);
}

.cm-band--gold {
  --cm-icon-accent: #0a1530;
  --cm-icon-bright: #123a9e;
  --cm-icon-muted:  rgba(22,17,10,.66);
}

.cm-footer {
  --cm-icon-accent: var(--cm-gold-fill, #f0c419);
  --cm-icon-bright: #ffd84d;
  --cm-icon-muted:  #8e9ab6;
}


/* The capability group title was set here, in gold, because this file loads
   after main.css and needed to win. On the v3 white canvas it has to be
   navy like every other heading — same reason, same place. */
.cm-caps__grouptitle { color: var(--cm-text, #0d1b3a); }
.cm-teamstrip__link:hover .cm-teamstrip__name { color: var(--cm-gold-fill, #f0c419); }