body {
  padding-top: 70px;
  padding-bottom: 30px;
}

.theme-dropdown .dropdown-menu {
  position: static;
  display: block;
  margin-bottom: 20px;
}

.theme-showcase > p > .btn {
  margin: 5px 0;
}

.theme-showcase .navbar .container {
  width: auto;
}

footer {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.footer-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.footer-find-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-copyright {
  flex: 1;
  text-align: center;
}

.footer-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.footer-built-label,
.footer-find-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #767676;
  line-height: 1;
}

.footer-built-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 767px) {
  footer {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .footer-left { order: 2; flex: none; align-items: center; }
  .footer-copyright { order: 1; flex: none; }
  .footer-right { order: 3; flex: none; align-items: center; }
}

.page-image {
  text-align: center;
}

.page-image img {
  display: block;
  margin: 20px auto;
}

.section-card {
  text-align: center;
}

.td-middle {
  vertical-align: middle;
}


/* Underline inline links so they're distinguishable without relying on color alone (WCAG 1.4.1) */
p a, li a {
  text-decoration: underline;
}
/* Navbar and footer links are visually distinct by context — no underline needed */
.navbar li a,
footer a {
  text-decoration: none;
}

/* Explicit focus ring so keyboard users always see a visible indicator (WCAG 2.4.7) */
:focus-visible {
  outline: 3px solid #0077B5;
  outline-offset: 2px;
}

/* Bootstrap 5 removed .page-header; restore the BS3 styling */
.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eee;
}

/* Jumbotron has a #eeeeee background; Bootstrap 5's default link #0d6efd gives only ~3.2:1 contrast there.
   Override to a darker shade that meets 4.5:1 on #eeeeee. */
.jumbotron a {
  color: #1a5276;
}

.social-icon {
  transition: color 0.2s ease;
}
.social-linkedin  { color: #0077B5; }
.social-instagram { color: #E1306C; }
.social-facebook  { color: #1877F2; }
.social-youtube   { color: #FF0000; }
.social-github    { color: #181717; }

.social-linkedin:hover   { color: #F5A623; }
.social-instagram:hover  { color: #00BCD4; }
.social-facebook:hover   { color: #4CAF50; }
.social-youtube:hover    { color: #9C27B0; }
.social-github:hover     { color: #FFD700; }

.social-bootstrap   { color: #7952B3; }
.social-fontawesome { color: #528DD3; }
.social-google      { color: #4285F4; }
.social-claude      { color: #CC785C; }

.social-bootstrap:hover   { color: #FF6B6B; }
.social-fontawesome:hover { color: #4CAF50; }
.social-google:hover      { color: #FF5722; }
.social-claude:hover      { color: #9C27B0; }