@use 'sass:map';
@use '../base/var' as *;

strong {
  font-family: var(--smc-font-serif);
  font-weight: 900;
}

p {
  margin-top: 1rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-weight: map.get($heading, 'font-weight');
  line-height: 1.5;
  .octicon-link {
    color: #1b1f23;
    vertical-align: middle;
    visibility: hidden;
  }
  &:hover .anchor {
    text-decoration: none;
  }
  &:hover .anchor .octicon-link {
    visibility: visible;
  }
}

h1 {
  font-size: map.get($heading, 'h1', 'font-size');
  border-bottom: 1px solid var(--smc-header-bottom-color);
}

h2 {
  font-size: map.get($heading, 'h2', 'font-size');
  border-bottom: 1px solid var(--smc-header-bottom-color);
}

h3 {
  font-size: map.get($heading, 'h3', 'font-size');
}

h4 {
  font-size: map.get($heading, 'h4', 'font-size');
}

h5 {
  font-size: map.get($heading, 'h5', 'font-size');
}

h6 {
  font-size: map.get($heading, 'h6', 'font-size');
}

@media screen and (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.8rem;
  }
  h3 {
    font-size: 1.6rem;
  }
  h4 {
    font-size: 1.4rem;
  }
  h5 {
    font-size: 1.2rem;
  }
  h6 {
    font-size: 1rem;
  }
}