@import "variable.css";

.c-article__content,
.editor-styles-wrapper {
  font-family: var(--h--font-family-base);

  h1 {
    font-size: clamp(
      var(--h--font-size-2xl),
      calc(calc(var(--h--font-size-2xl) / 1px) / 375 * 100vw),
      var(--h--font-size-6xl)
    );
    font-weight: var(--h--font-weight-md);
    line-height: var(--h--line-height-md);
    border-bottom: 1px solid var(--h--color-Navy-100);
    padding-bottom: clamp(20px, calc(20 / 375 * 100vw), 30px);
  }

  h2 {
    font-size: clamp(
      var(--h--font-size-xl),
      calc(calc(var(--h--font-size-xl) / 1px) / 375 * 100vw),
      var(--h--font-size-4xl)
    );
    font-weight: var(--font-weight-md);
    line-height: var(--line-height-md);

    &:where(:not(:first-child)) {
      margin-top: clamp(40px, calc(40 / 375 * 100vw), 50px);
    }
  }

  h3 {
    font-size: clamp(
      var(--h--font-size-md),
      calc(calc(var(--h--font-size-md) / 1px) / 375 * 100vw),
      var(--h--font-size-2xl)
    );
    font-weight: var(--font-weight-md);
    line-height: var(--line-height-md);

    &:where(:not(:first-child)) {
      margin-top: clamp(40px, calc(40 / 375 * 100vw), 50px);
    }
  }

  h4 {
    font-size: clamp(
      var(--h--font-size-xs),
      calc(calc(var(--h--font-size-xs) / 1px) / 375 * 100vw),
      var(--h--font-size-xl)
    );
    font-weight: var(--font-weight-md);
    line-height: var(--line-height-md);

    &:where(:not(:first-child)) {
      margin-top: clamp(30px, calc(30 / 375 * 100vw), 40px);
    }
  }

  h5 {
    font-size: clamp(
      var(--h--font-size-4xs),
      calc(calc(var(--h--font-size-4xs) / 1px) / 375 * 100vw),
      var(--h--font-size-md)
    );
    font-weight: var(--font-weight-md);
    line-height: var(--line-height-md);

    &:where(:not(:first-child)) {
      margin-top: clamp(20px, calc(20 / 375 * 100vw), 30px);
    }
  }

  p:where(:not(:first-child)) {
    margin-top: clamp(20px, calc(20 / 375 * 100vw), 30px);
  }

  :is(h2, h3) + * {
    margin-top: clamp(15px, calc(15 / 375 * 100vw), 20px);
  }

  :is(h4, h5) + * {
    margin-top: clamp(10px, calc(10 / 375 * 100vw), 15px);
  }

  strong {
    font-weight: var(--h--font-weight-xl);
  }

  u {
    text-decoration: underline;
    -webkit-text-decoration-style: solid;
    text-decoration-style: solid;
    text-underline-offset: 10%;
    text-decoration-thickness: 0%;
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto;
  }

  a {
    color: var(--h--color-blue);
    text-decoration: underline;
    -webkit-text-decoration-style: solid;
    text-decoration-style: solid;
    text-underline-offset: 10%;
    text-decoration-thickness: 0%;
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto;
  }

  ul {
    &:where(:not(:first-child)) {
      margin-top: clamp(20px, calc(20 / 375 * 100vw), 30px);
    }
  }

  ul li {
    position: relative;
    padding-left: 12px;

    &::before {
      content: "";
      position: absolute;
      left: 0px;
      display: block;
      width: 4px;
      height: 4px;
      border-radius: var(--border-radius-full);
      background: currentColor;
      top: calc(0.5lh - 2px);
    }
  }

  ol {
    list-style-type: decimal;

    &:where(:not(:first-child)) {
      margin-top: clamp(20px, calc(20 / 375 * 100vw), 30px);
    }
  }

  ol li {
    margin-left: 1.2em;
  }

  img,
  figure {
    max-width: 100% !important;
    width: auto !important;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
    margin-inline: auto;

    &:where(:not(:first-child)) {
      margin-top: clamp(20px, calc(20 / 375 * 100vw), 30px);
    }
  }

  iframe[src*="youtube"],
  iframe[src*="google.com/maps/"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;

    &:where(:not(:first-child)) {
      margin-top: clamp(20px, calc(20 / 375 * 100vw), 30px);
    }
  }
}