:root {
  --legacy-primary: #e06c4a;
  --legacy-secondary: #6e7879;
  --legacy-success: #73E04A;
  --legacy-warning: #e7b6af;
  --legacy-info: #4ABEE0;
  --legacy-tan: #d6cfc9;
  --legacy-turquoise: #9abbc0;
  --legacy-yellow: #dac663;

  --legacy-white: #ffffff;
  --legacy-light: #f8f6f3;
  --legacy-dark: #343a40;

  --legacy-radius: 1rem;
  --legacy-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
}

/* Global */
section {
  font-size: 20px;
  line-height: 2;
}

a {
  color: var(--legacy-primary);
}

a:hover {
  color: var(--legacy-secondary);
}

/* Utility color classes */
.my-primary {
  background-color: var(--legacy-primary);
}

.mytext-primary {
  color: var(--legacy-primary);
}

.my-secondary {
  background-color: var(--legacy-secondary);
}

.mytext-secondary {
  color: var(--legacy-secondary);
}

.my-success {
  background-color: var(--legacy-success);
}

.mytext-success {
  color: var(--legacy-success);
}

.my-warning {
  background-color: var(--legacy-warning);
}

.mytext-warning {
  color: var(--legacy-warning);
}

.my-info {
  background-color: var(--legacy-info);
}

.mytext-info {
  color: var(--legacy-info);
}

.my-tan {
  background-color: var(--legacy-tan);
}

.mytext-tan {
  color: var(--legacy-tan);
}

.my-turqoise,
.my-turquoise {
  background-color: var(--legacy-turquoise);
}

.mytext-turqoise,
.mytext-turquoise {
  color: var(--legacy-turquoise);
}

.my-yellow {
  background-color: var(--legacy-yellow);
}

.mytext-yellow {
  color: var(--legacy-yellow);
}

/* Navigation */
nav .navbar-nav li a {
  color: var(--legacy-secondary) !important;
}

nav .navbar-nav li a:hover,
nav .navbar-nav li a:active,
nav .navbar-nav li a:focus {
  color: var(--legacy-yellow) !important;
}

/* Buttons */
.btn-legacy-primary {
  background-color: var(--legacy-primary);
  border-color: var(--legacy-primary);
  color: var(--legacy-white);
}

.btn-legacy-primary:hover {
  background-color: var(--legacy-secondary);
  border-color: var(--legacy-secondary);
  color: var(--legacy-white);
}

.btn-legacy-outline {
  border-color: var(--legacy-secondary);
  color: var(--legacy-secondary);
}

.btn-legacy-outline:hover {
  background-color: var(--legacy-secondary);
  color: var(--legacy-white);
}

/* Related Pages / Helpful Next Steps */
.related-pages {
  background: linear-gradient(135deg, var(--legacy-light), var(--legacy-tan));
  border-radius: var(--legacy-radius);
  box-shadow: var(--legacy-shadow);
  padding: 2rem;
  margin-top: 3rem;
  margin-bottom: 0; /* 👈 remove bottom gap */
}

.related-pages .eyebrow {
  color: var(--legacy-primary);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.related-pages h2 {
  color: var(--legacy-secondary);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.related-pages p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.related-link-card {
  display: block;
  height: 100%;
  background-color: var(--legacy-white);
  border: 1px solid rgba(110, 120, 121, 0.18);
  border-left: 5px solid var(--legacy-primary);
  border-radius: var(--legacy-radius);
  padding: 1.25rem;
  text-decoration: none;
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-left-color 0.2s ease;
}

.related-link-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--legacy-shadow);
  border-left-color: var(--legacy-yellow);
}

.related-link-card h3 {
  color: var(--legacy-secondary);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.related-link-card p {
  color: var(--legacy-dark);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0;
}

.related-link-card.featured {
  background-color: var(--legacy-secondary);
  border-left-color: var(--legacy-yellow);
}

.related-link-card.featured h3,
.related-link-card.featured p {
  color: var(--legacy-white);
}

/* Accessibility */
:focus-visible {
  outline: 3px solid var(--legacy-yellow);
  outline-offset: 3px;
}