/* Custom cover template styles with modern updates */

/* Links */
a,
a:focus,
a:hover {
  color: #fff;
}

/* Custom navigation */
.nav-masthead .nav-link {
  color: rgba(255, 255, 255, .7);
  border-bottom: .25rem solid transparent;
  font-weight: 500;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  color: rgba(255, 255, 255, 1);
  border-bottom-color: rgba(255, 255, 255, .5);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}

/* Cover container */
.cover-container {
  max-width: 42em;
}

/* Improve text visibility */
h1, h3, .lead, p {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.lead {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.95);
}

/* Social links */
.social-links a {
  transition: transform 0.3s ease, opacity 0.3s ease;
  display: inline-block;
}

.social-links a:hover {
  transform: translateY(-3px);
  opacity: 0.8;
}

/* Ensure full height on mobile */
html,
body {
  height: 100%;
}

body {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .cover-container {
    max-width: 100%;
    padding: 1rem;
  }
  
  h1 {
    font-size: 2rem;
  }
  
  .lead {
    font-size: 1.1rem;
  }
  
  .nav-masthead {
    margin-top: 1rem;
  }
  
  .nav-masthead .nav-link {
    padding: .25rem 0;
    font-size: 0.9rem;
  }
  
  .social-links {
    margin-top: 2rem !important;
  }
}

/* Tablet and up */
@media (min-width: 768px) {
  .nav-masthead {
    margin-top: 0;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  body {
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
  }
}

/* Light mode support */
@media (prefers-color-scheme: light) {
  body {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  }
  
  .text-bg-dark {
    background-color: transparent !important;
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Focus visible for accessibility */
*:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Button hover effects */
.btn {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-light {
  background: #fff;
  color: #111827;
  font-weight: 600;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
  background: #f3f4f6 !important;
  color: #111827 !important;
}

/* Animation for main content */
main {
  animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header animation */
header {
  animation: fadeInDown 0.8s ease-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}