/* Base layout */

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: #ffffff;
  color: #000000;
}

.main-content {
  padding-top: 1.5rem;
}

/* Hero */

.hero-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.hero-inner {
  max-width: 720px;
  margin: 0 auto;
}

.hero-intro {
  font-size: 1.75rem; /* roughly Bootstrap h1 size */
  text-transform: none;
  letter-spacing: 0.02em;
}

.hero-heading {
  font-size: 1.4rem;
  font-weight: 600;
}

.hero-headshot-img {
  max-width: 160px;
  height: auto;
}

/* Buttons row spacing */

.hero-buttons-row {
  margin-top: 0.5rem;
}

/* Sections */

section {
  background-color: transparent;
}

/* Links */

a {
  color: inherit;
  text-decoration: underline;
}

a.btn {
  text-decoration: none;
}

/* Footer */

footer {
  font-size: 0.875rem;
}

/* Light border color to keep it minimal */

.border-top {
  border-top: 1px solid #e5e5e5 !important;
}

/* Dark mode (based on system preference) */

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000000;
    color: #f5f5f5;
  }

  .border-top {
    border-top-color: #333333 !important;
  }

  footer {
    border-top-color: #333333 !important;
  }

  a {
    color: #f5f5f5;
  }

  .btn-primary {
    background-color: #f5f5f5;
    color: #000000;
    border-color: #f5f5f5;
  }

  .btn-outline-secondary {
    color: #f5f5f5;
    border-color: #f5f5f5;
  }

  .btn-outline-secondary:hover {
    background-color: #f5f5f5;
    color: #000000;
  }

  .hero-section {
    /* small contrast so hero stands out slightly */
    background-color: #050505;
  }
}

/* Small screens adjustments */

@media (max-width: 575.98px) {
  .hero-heading {
    font-size: 1.25rem;
  }

  .hero-headshot-img {
    max-width: 140px;
  }
}

/* Extra spacing for "Find me online" links */

section:last-of-type ul li:not(:last-child) {
  margin-bottom: 0.5rem;
}