/* Spiritual Tours to India - Custom CSS */

/* Orange color utilities (Tailwind 2.x doesn't include orange by default) */
.bg-orange-50 { background-color: #fff7ed; }
.bg-orange-100 { background-color: #ffedd5; }
.bg-orange-600 { background-color: #ea580c !important; }
.bg-orange-700 { background-color: #c2410c !important; }
.bg-orange-800 { background-color: #9a3412 !important; }
.bg-orange-900 { background-color: #7c2d12 !important; }
.text-orange-600 { color: #ea580c !important; }
.text-orange-700 { color: #c2410c !important; }
.text-orange-800 { color: #9a3412 !important; }
.border-orange-600 { border-color: #ea580c !important; }
.border-orange-300 { border-color: #fdba74 !important; }
.hover\:bg-orange-700:hover { background-color: #c2410c !important; }
.hover\:text-orange-600:hover { color: #ea580c !important; }
.hover\:text-orange-700:hover { color: #c2410c !important; }

.from-orange-50 { --tw-gradient-from: #fff7ed; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 247, 237, 0)); }
.to-amber-50 { --tw-gradient-to: #fffbeb; }
.from-amber-50 { --tw-gradient-from: #fffbeb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 251, 235, 0)); }

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

/* Font family defaults */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Headings use Lora */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Lora', Georgia, serif;
}

/* Scroll offset for sticky header */
section {
    scroll-margin-top: 80px;
}

/* Custom transitions */
a,
button {
    transition: all 0.3s ease;
}

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

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

/* FAQ answer smooth slide */
.faq-answer {
    transition: max-height 0.3s ease;
    overflow: hidden;
}

/* Fade-in animation for scroll reveal */
.fade-target {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Back to top button transition */
#back-to-top {
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

/* Custom hover effects for cards */
.shadow-md:hover {
    transform: translateY(-4px);
    transition: all 0.3s ease;
}

/* Custom focus states for form inputs */
input:focus,
textarea:focus,
select:focus {
    outline: none;
}

/* Ensure images load smoothly */
img {
    transition: opacity 0.3s ease;
}

/* Removed opacity: 0 rule that was hiding lazy-loaded images
   Images will lazy-load natively without fade-in animation */

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

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

::-webkit-scrollbar-thumb {
    background: #ff9933;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #e67300;
}

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

/* Hero section overlay */
#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.6));
}

/* Custom gradient backgrounds */
.bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

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

/* Print styles */
@media print {
    header,
    footer,
    #back-to-top,
    button {
        display: none !important;
    }
}

/* Accessibility improvements */
a:focus,
button:focus {
    outline: 2px solid #ff9933;
    outline-offset: 2px;
}

/* Skip to main content link (optional) */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #ff9933;
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

/* Loading state for images */
img[loading="lazy"]:not([src]) {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Responsive typography adjustments */
@media (max-width: 640px) {
    html {
        font-size: 14px;
    }
}

@media (min-width: 1024px) {
    html {
        font-size: 16px;
    }
}

/* Cache control for development */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}