/* Sixtinische Kapelle Tickets - Custom Styles */

/* Custom Properties */
:root {
    --gold: #C9A227;
    --gold-light: #E5C158;
    --navy: #1E3A5F;
    --navy-dark: #0F1F33;
    --burgundy: #722F37;
    --cream: #FFF8F0;
    --cream-dark: #F5EDE0;
}

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

/* Custom Colors for Tailwind */
.bg-cream { background-color: var(--cream); }
.bg-cream-dark { background-color: var(--cream-dark); }
.bg-navy { background-color: var(--navy); }
.bg-navy-dark { background-color: var(--navy-dark); }
.bg-gold { background-color: var(--gold); }
.bg-burgundy { background-color: var(--burgundy); }

.text-gold { color: var(--gold); }
.text-navy { color: var(--navy); }
.text-navy-dark { color: var(--navy-dark); }
.text-burgundy { color: var(--burgundy); }
.text-cream { color: var(--cream); }

.border-gold { border-color: var(--gold); }
.border-navy { border-color: var(--navy); }
.border-burgundy { border-color: var(--burgundy); }

/* Hover variants */
.hover\:bg-gold:hover { background-color: var(--gold); }
.hover\:bg-navy:hover { background-color: var(--navy); }
.hover\:bg-navy-dark:hover { background-color: var(--navy-dark); }
.hover\:text-gold:hover { color: var(--gold); }
.hover\:text-navy:hover { color: var(--navy); }
.hover\:border-gold:hover { border-color: var(--gold); }

/* Custom Font Families */
.font-serif {
    font-family: 'Cormorant Garamond', Georgia, serif;
}

body {
    font-family: 'Source Sans 3', 'Segoe UI', Roboto, sans-serif;
}

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

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

@keyframes pulse-gold {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.4);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(201, 162, 39, 0);
    }
}

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

.slide-in-up {
    animation: slideInUp 0.8s ease-out;
}

.pulse-gold {
    animation: pulse-gold 2s infinite;
}

/* Mobile menu transitions */
#mobile-menu {
    transition: all 0.3s ease-in-out;
}

#mobile-menu.hidden {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
}

#mobile-menu:not(.hidden) {
    opacity: 1;
    max-height: 500px;
}

/* FAQ Toggle Animation */
.faq-toggle .faq-icon {
    transition: transform 0.3s ease;
}

.faq-toggle.active .faq-icon {
    transform: rotate(180deg);
}

.faq-content {
    transition: all 0.3s ease;
    max-height: 0;
    overflow: hidden;
}

.faq-content:not(.hidden) {
    max-height: 500px;
}

/* Smooth hover transitions */
.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Card hover effects */
.group:hover .group-hover\:scale-110 {
    transform: scale(1.1);
}

.group:hover .group-hover\:text-gold {
    color: var(--gold);
}

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

::-webkit-scrollbar-track {
    background: var(--cream);
}

::-webkit-scrollbar-thumb {
    background: var(--navy);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

/* Focus styles for accessibility */
button:focus,
a:focus,
input:focus {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* Table styles */
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    text-align: left;
}

/* Hero gradient overlay */
.hero-overlay {
    background: linear-gradient(
        to bottom,
        rgba(30, 58, 95, 0.8) 0%,
        rgba(30, 58, 95, 0.6) 50%,
        rgba(30, 58, 95, 0.9) 100%
    );
}

/* Gold gradient backgrounds */
.bg-gold-gradient {
    background: linear-gradient(135deg, var(--gold) 0%, #E5C158 100%);
}

/* Navy gradient backgrounds */
.bg-navy-gradient {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
}

/* Backdrop blur for glass effect */
.backdrop-blur-sm {
    backdrop-filter: blur(4px);
}

.backdrop-blur-lg {
    backdrop-filter: blur(16px);
}

/* Print styles */
@media print {
    nav,
    footer,
    button,
    .no-print {
        display: none !important;
    }
    
    body {
        background: white;
    }
    
    a {
        text-decoration: none;
        color: black;
    }
}

/* Utility Classes */
.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.shadow-gold {
    box-shadow: 0 4px 14px 0 rgba(201, 162, 39, 0.39);
}

/* Prose styling for article content */
.prose h2 {
    color: var(--navy);
}

.prose h3 {
    color: var(--navy);
}

.prose strong {
    color: var(--navy);
}

.prose a {
    color: var(--gold);
    text-decoration: underline;
}

.prose a:hover {
    color: var(--burgundy);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .font-serif {
        font-size: 0.95em;
    }
}