@use "../_layout/mixins";

$h: "h2, .h2, h3, .h3, h4, .h4, h5, .h5";

h1,
.h1 {
  font-size: var(--step-5);
}
h2,
.h2 {
  font-size: var(--step-4);
}
h3,
.h3 {
  font-size: var(--step-3);
}
h4,
.h4 {
  font-size: var(--step-2);
}
h5,
.h5 {
  font-size: var(--step-1);
}
:where(h1, .h1, #{$h}) {
  line-height: 1.1;
  font-weight: var(--bold-weight);
  display: block;
}
#{$h} {
  & + * {
    margin-block-start: 0.5em;
  }
  & + .figure {
    //need to add the .figure specificity to overwrite the margin-block: 2em in src/components/_layout/media.scss
    margin-block-start: 1.25em;
  }
}
h2,
.h2 {
  &:not(:first-child) {
    margin-block-start: 0.805em;
  }
}
h3,
.h3,
h4,
.h4,
h5,
.h5 {
  &:not(:first-child) {
    margin-block-start: 0.645em;
  }
}

$headingPairs: (
  "h2, .h2": "h3, .h3, h4, .h4, h5, .h5",
  "h3, .h3": "h4, .h4, h5, .h5",
  "h4, .h4": "h5, .h5",
);
@each $parent, $child in $headingPairs {
  :is(#{$parent}) + :is(#{$child}) {
    margin-block-start: 0.32em;
  }
}

.h--section {
  border-block-end: 1px solid var(--neutral--dark);
  padding-block-end: 0.2rem;
}

a:where([href]) {
  cursor: pointer;
  @include mixins.link();
}
:where(.prose) a:where([href]) {
  &:not(:has(img)) {
    @include mixins.inlineLink();
    word-break: break-word;
  }
}
.plainLink {
  @include mixins.plainLink();
}
.plainLink--inverse {
  @include mixins.plainLinkInverse();
}
.pageLink {
  @include mixins.blockLink();
}
.pageLink--inverse {
  @include mixins.blockLink($inverse: true);
}

:where(p) {
  margin-block-end: 1em;
  margin-block-start: 1em;
  &:first-child {
    margin-block-start: 0;
  }
  &:last-child {
    margin-block-end: 0;
  }
}

strong,
b {
  font-weight: var(--bold-weight);
}
em,
i {
  font-style: italic;
}

.lead {
  font-size: clamp(1.1563rem, 1.1236rem + 0.163vw, 1.25rem);
}

.boldIcon {
  @include mixins.boldIcon();
}

// placeholder space for font awesome icons to avoid shifted layout when they load
html.fontawesome-i2svg-pending {
  .fa-fw {
    width: 1.25em;
    display: inline-block;
  }
}