/* ==========================================================================
   Base Styles - Typography, Body, Links
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--font-heading);
  font-weight: 800 !important;
  font-style: normal;
  font-display: swap;
  line-height: 1.2;
}

h1 {
  font-size: 2.9rem;
  font-weight: 600;

  @media(max-width: 991px) {
    font-size: calc(1.375rem + 1.5vw);
  }
}

body {
  font-family: var(--font-body);
  color: var(--color-text-base);
  background-color: white;
  padding-bottom: 0;
  /* Never let the browser fake a missing bold/italic cut — switch faces
     or skip the style instead (Roboto Slab ships no italic). */
  font-synthesis: none;
}

section.container {
  margin-bottom: 3.5rem;
}

/* Links */
a {
  color: var(--color-text-base);
  text-decoration-color: var(--color-text-base);
  /* Default browser underlines are too heavy and crowd descenders. */
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;

  &:hover {
    color: var(--color-action);
    text-decoration: none;
  }

  &.link-post {
    color: var(--color-text-base);
    text-decoration: none;

    &:hover {
      color: var(--color-text-base);
      text-decoration: underline;
    }
  }
}

article a.link-post {
  color: var(--color-text-base);
  text-decoration: none;

  &:hover {
    color: var(--color-text-base);
    text-decoration: underline;
  }
}

/* Background Utilities */
.bg-light {
  background-color: var(--color-text-inverse) !important;
  border-bottom: 1px solid var(--color-border);
}

.bg-dark {
  background-color: var(--color-surface-dark) !important;

  .nav-link,
  a,
  .btn {
    color: var(--color-text-inverse);

    &:hover {
      color: var(--color-surface-dark);
    }
  }

  .navbar-brand {
    color: var(--color-text-inverse);

    &:hover {
      color: var(--color-highlight);
    }
  }
}