@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400;1,500&display=swap');

h1, h2, h3, h4, h5, h6,p, div, span {
  font-family: 'Roboto', sans-serif;
}

/* ── Heading spacing best-practice ──
   Use `em` so margin scales with each heading's own font-size.
   Proximity principle: margin-top > margin-bottom so the heading
   visually groups with the content that follows it.
   First headings inside a container often have margin-top collapsed
   or zeroed by the parent's padding, which is the desired effect. */

h1 {
  font-size: var(--text-heading-hero);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-blue);
  line-height: var(--line-height-tight);
  margin-top: 0;
  margin-bottom: 0.5em;
}

h2,
h2 a {
  font-size: var(--text-heading-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-blue);
  line-height: var(--line-height-tight);
  margin-top: 0;
  margin-bottom: 0.5em;
}

h3,
h3 a {
  font-size: var(--text-heading-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand-green);
  text-transform: uppercase;
  line-height: var(--line-height-tight);
  margin-top: 0;
  margin-bottom: 0.4em;
}

h4,
h4 a {
  font-size: var(--text-heading-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  margin-top: 0;
  margin-bottom: 0.4em;
}

h5,
h5 a {
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  margin-top: 0;
  margin-bottom: 0.35em;
}

h6,
h6 a {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand-green);
  line-height: var(--line-height-snug);
  margin-top: 0;
  margin-bottom: 0.35em;
}

/* When headings appear mid-flow in body copy (not as first child),
   add generous top spacing to separate from the preceding section. */
p + h2, p + h3, p + h4, p + h5, p + h6,
ul + h2, ul + h3, ul + h4, ul + h5, ul + h6,
ol + h2, ol + h3, ol + h4, ol + h5, ol + h6 {
  margin-top: 1.5em;
}

/* Hide the main-content wrapper when the body field is empty (no sidebars).
   We use display:none instead of removing the HTML so that Drupal still
   processes {{ page.content }} and its #attached assets (CSS/JS/libraries).
   This is critical for Responsive Background Image, which injects banner
   background-image CSS via the node's render array.                        */
.main-content--body-empty {
  display: none;
}

.header__container .col-md-6.col-sm-12,
.header__container .col-md-2.col-sm-4  {
  transform: translate(0px, 20px);
}