/* Waypoint North — utility classes
   These replace inline style="" attributes so the CSP can use
   style-src without 'unsafe-inline'. Selector specificity is deliberately
   matched to whatever the inline style was previously overriding, so the
   rendered result is identical — including hover states.

   IMPORTANT: this file must load AFTER the main inline <style> block. */

/* --- layout --- */
.u-p0            { padding: 0; }
.u-jc-center     { justify-content: center; }
.u-mt3           { margin-top: 3px; }
.u-flex-c10      { display: flex; align-items: center; gap: 10px; }

/* --- differentiator card 06 (navy variant) ---
   Also targets :hover, because the old inline style outranked
   .diff-card:hover{background:var(--white)} and must continue to. */
.diff-card.u-card-navy,
.diff-card.u-card-navy:hover {
  background: var(--navy);
  border-top: 3px solid var(--amber);
}
/* .diff-card h3 / .diff-card p are (0,1,1); these must outrank them. */
.diff-card h3.u-white { color: var(--white); }
.diff-card p.u-mid    { color: var(--mid); }
.u-amber              { color: var(--amber); }

/* --- SVG animation custom properties (were inline --len / --d) --- */
.sv-len-120 { --len: 120; }
.sv-len-26  { --len: 26; }
.sv-d-15    { --d: .15s; }
.sv-d-20    { --d: .2s; }
.sv-d-30    { --d: .3s; }
.sv-d-35    { --d: .35s; }
.sv-d-45    { --d: .45s; }
.sv-d-50    { --d: .5s; }
.sv-d-60    { --d: .6s; }
.sv-d-65    { --d: .65s; }

/* --- news + article pages --- */
.u-icon22 { width: 22px; height: 22px; object-fit: contain; }
.u-thumb-wide {
  width: 100%;
  height: 140px;
  object-fit: cover;
  object-position: top;
  margin-bottom: 14px;
  border-top: 3px solid var(--amber);
}
/* LinkedIn buttons (were multi-line inline styles) */
/* Scoped to .john-card because .john-card a (0,1,1) and .john-card a:hover
   (0,2,1) would otherwise repaint this button amber — the inline style used
   to outrank both. */
.john-card a.u-linkedin-btn,
.john-card a.u-linkedin-btn:hover {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);
  padding: 14px 20px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  margin-top: 2px;
  border: 1px solid rgba(255,255,255,.1);
  transition: all .2s;
}
.u-linkedin-outline {
  display: block;
  margin-top: 16px;
  text-align: center;
  padding: 9px 16px;
  border: 1px solid rgba(232,160,32,.4);
  color: var(--amber);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all .2s;
}

/* Outranks .sb-btn and .sb-btn:hover, as the inline style did. */
.sb-btn.u-navy-white,
.sb-btn.u-navy-white:hover {
  background: var(--navy);
  color: var(--white);
}