/* Custom styles to complement Tailwind CSS */

/* Smooth scrolling for the entire page */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #1e3a8a;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #1e40af;
}

/* Enhanced focus states for accessibility */
.nav-link:focus,
button:focus,
input:focus,
select:focus {
  outline: 2px solid #1e40af;
  outline-offset: 2px;
}

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

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* Enhanced hover effects for cards */
.reading-group label:hover,
#hymn-list > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* Custom button animations */
#generate-pdf:active,
.download-btn:active {
  transform: scale(0.98);
}

/* Enhanced video modal */
#video-modal {
  backdrop-filter: blur(4px);
}

/* Enhanced document modal */
#document-modal {
  backdrop-filter: blur(4px);
}

/* Document content styling */
#document-content h2 {
  color: #1e3a8a;
  margin-bottom: 1rem;
}

#document-content h3 {
  color: #1e3a8a;
  margin-bottom: 0.75rem;
}

#document-content h4 {
  color: #1e3a8a;
  margin-bottom: 0.5rem;
}

#document-content ul {
  margin-left: 1rem;
}

#document-content li {
  margin-bottom: 0.25rem;
}

/* Two-column layout enhancements */
@media (min-width: 1024px) {
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  /* Ensure equal height columns */
  .lg\:grid-cols-2 > div {
    height: fit-content;
  }
}

/* Responsive text sizing */
@media (max-width: 640px) {
  .text-4xl {
    font-size: 2rem;
  }
  .text-6xl {
    font-size: 3rem;
  }
}

/* Enhanced download section styling */
.download-btn {
  transition: all 0.2s ease;
}

.download-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
}

/* Condolence message styling */
.bg-blue-50 {
  background-color: #eff6ff;
}

.border-catholic-blue {
  border-color: #1e3a8a;
}

/* Catholic purple color definitions */
.bg-catholic-purple {
  background-color: #7c3aed;
}

.text-catholic-purple {
  color: #7c3aed;
}

.border-catholic-purple {
  border-color: #7c3aed;
}

/* Flow diagram styling */
.flow-step {
  transition: all 0.3s ease;
}

.flow-step:hover {
  transform: scale(1.05);
}

/* Enhanced gradient backgrounds */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-catholic-blue {
  --tw-gradient-from: #1e3a8a;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(30, 58, 138, 0));
}

.to-catholic-purple {
  --tw-gradient-to: #7c3aed;
}

/* Print styles */
@media print {
  nav, #video-modal, #document-modal, button, .no-print {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
  
  main {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  
  /* Ensure two-column layout prints properly */
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Enhanced mobile responsiveness */
@media (max-width: 1023px) {
  /* Stack columns on mobile */
  .lg\:grid-cols-2 {
    grid-template-columns: 1fr;
  }
  
  /* Add spacing between stacked sections */
  .lg\:grid-cols-2 > div:first-child {
    margin-bottom: 2rem;
  }
}

/* Document preview content styling */
#document-content .border-l-4 {
  border-left-width: 4px;
}

#document-content .bg-gray-50 {
  background-color: #f9fafb;
}

#document-content .bg-blue-50 {
  background-color: #eff6ff;
}

#document-content .bg-yellow-50 {
  background-color: #fefce8;
}

/* Enhanced theme tag styling */
#document-content .bg-catholic-blue,
#document-content .bg-catholic-gold,
#document-content .bg-catholic-red,
#document-content .bg-green-600 {
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Costs section styling */
#costs li {
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.5rem;
}

#costs li:last-child {
  border-bottom: none;
}

/* Enhanced button hover effects */
.bg-gradient-to-r:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.3);
}

/* Flow diagram arrow animations */
.flow-arrow {
  transition: all 0.3s ease;
}

.flow-arrow:hover {
  transform: scale(1.1);
  color: #d97706;
}

/* Enhanced card borders */
.border-l-4.border-catholic-blue,
.border-l-4.border-catholic-purple,
.border-l-4.border-catholic-red {
  border-left-width: 4px;
  transition: all 0.3s ease;
}

.border-l-4.border-catholic-blue:hover,
.border-l-4.border-catholic-purple:hover,
.border-l-4.border-catholic-red:hover {
  transform: translateX(4px);
}

/* Purple gradient backgrounds */
.bg-gradient-to-r.from-purple-50.to-blue-50 {
  background-image: linear-gradient(to right, #faf5ff, #eff6ff);
}

.bg-purple-50 {
  background-color: #faf5ff;
}

/* Styling for details/summary */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
details > summary::before {
  content: '▶';
  margin-right: 0.5rem;
  font-size: 0.8em;
  transition: transform 0.2s ease-in-out;
}
details[open] > summary::before {
  transform: rotate(90deg);
}
details[open] > summary {
  opacity: 1;
}
details:not([open]) > summary {
    opacity: 0.7;
}