/**
 * @file
 * Section 5: Headings (h1-h6).
 *
 * Split from css/staged-edits-from-gui.css (see docs/Theme updates.md for
 * the full split file list).
 */

/* @TODO Nina needs to compare with original non-KORUMO CSS file */

.h1,
h1 {
  text-align: center;
  font-size: clamp(2.75rem, 6.5vw, 3.75rem);
  line-height: 1.15;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
  /* added so 30px padding subtracts from width rather than adding to it (prevents overflow on narrow columns) */
  max-width: 100%;
  /* prevents H1 from pushing wider than its column */
  /* @TODO @nina below synced from futura.css */
	font-weight: 500;
  text-transform: uppercase;

}

.h1 a,
h1 a {
  font-size: clamp(2.75rem, 6.5vw, 3.75rem);
}

.h2,
h2 {
  color: var(--bs-info-text-emphasis);
  font-weight: 500;
  font-size: clamp(2.025rem, 4.5vw, 3.375rem);
  line-height: 1;
  padding-bottom: 0.625rem;
  /* @TODO Need to check with Al if this is okay here */
}

.h2 a,
h2 a {
  font-size: clamp(2.025rem, 4.5vw, 3.375rem);
}

.h3,
h3 {
  color: var(--bs-indigo);
  text-align: center;
  /* I think 2 variations of H2 maybe? Half the time will need it to be --bs-heading-color instead) */
  font-weight: 600;
  /* Check - maybe 700 */
  font-size: 2rem;
  /* baseline H2 - not from initial typography css - original style (don't know from where) looked like it had a calculation */
  line-height: 1.25;
  margin-bottom: 0.625rem;
  /* @TODO Need to check with Al if this is okay here */
  text-transform: uppercase;
}

.h3 a,
h3 a {
  font-size: 2rem;
  /* @TODO @nina below synced from futura.css */
	letter-spacing: 2px;
}

.h4,
h4 {
  color: var(--bs-gray-dark);
  text-transform: capitalize;
  font-size: clamp(1.125rem, 2.5vw, 1.875rem);
  line-height: 1;
  letter-spacing: unset;
  font-weight: 500;
  padding-bottom: 10px;
  /* @TODO Need to check with Al if this is okay here */
  margin-bottom: 0;
  /* @TODO Need to check with Al if this is okay here */
}

.h4 a,
h4 a {
  font-size: clamp(1.125rem, 2.5vw, 1.875rem);
  color: var(--bs-light);
}

.h5,
h5 {
  font-size: clamp(1.3625rem, 2.333333333vw, 1.5625rem);
  color: var(--bs-dark);
  margin: 1.125rem 0 0.5rem 0;
  padding: 0 0 0.5rem 0;
  font-weight: 500;
}

.h5 a,
h5 a {
  font-size: clamp(1.3625rem, 2.333333333vw, 1.5625rem);
}

.h6,
h6 {
  color: var(--bs-secondary);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.h6 a,
h6 a {
  color: var(--bs-secondary);
}

/*  Anchor scroll positioning — places jump targets below the fixed header
    so the heading/anchor is fully visible after click, not hidden behind it.
    Uses --header-height so it adapts to mobile/desktop automatically.
    Targets [id] (not specific tags) so it works for every type of jump target:
    headings, strong tags, container divs (like id="top"), etc. */
:is(.node--type-knowledge-base, .node--type-knowledge-base-internal) [id] {
  scroll-margin-top: calc(var(--header-height) - 0.05rem);
}