/* ==============================================
   RESET & BASE
   ============================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: #2C2C2A;
  background: var(--color-white);
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-2);
}

/* Links are #007698 on #FFFFFF (5.19:1, fine against the background) but
   only 2.70:1 against body text #2C2C2A. WCAG technique G183 allows a
   colour-only link when that figure is at least 3:1, so inside prose the
   colour alone is not a sufficient cue and an underline is required.
   Navigation, buttons and cards stay undecorated: their position and
   styling already identify them. (Audit KARNA-A11Y-012, WCAG 1.4.1 A.) */
a { color: var(--color-blue); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

.article-content a,
.page-body a,
.cs-prose a,
.entry-content a {
  text-decoration: underline;
  text-underline-offset: 2px;
}