/* ============================================
   Fly Me To The Moon Fit — Custom Styles
   Brand-specific styles beyond Tailwind CSS
   ============================================ */

/* --- Smooth scrolling --- */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem; /* Account for sticky header */
}

/* --- Base typography --- */
body {
    font-family: 'Josefin Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Hero logo glow effect --- */
.hero-logo-glow {
    box-shadow:
        0 0 30px rgba(255, 20, 147, 0.3),
        0 0 60px rgba(255, 20, 147, 0.15),
        0 0 100px rgba(139, 92, 246, 0.1);
    animation: logo-pulse 4s ease-in-out infinite;
}

@keyframes logo-pulse {
    0%, 100% {
        box-shadow:
            0 0 30px rgba(255, 20, 147, 0.3),
            0 0 60px rgba(255, 20, 147, 0.15),
            0 0 100px rgba(139, 92, 246, 0.1);
    }
    50% {
        box-shadow:
            0 0 40px rgba(255, 20, 147, 0.4),
            0 0 80px rgba(255, 20, 147, 0.2),
            0 0 120px rgba(139, 92, 246, 0.15);
    }
}

/* --- FAQ accordion transitions --- */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    padding-top: 0;
    padding-bottom: 0;
}

.faq-content.hidden {
    display: block !important; /* Override Tailwind hidden for transition */
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.faq-content.open {
    max-height: 800px;
    padding-bottom: 1.5rem;
}

.faq-chevron {
    transition: transform 0.3s ease;
}

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

.faq-toggle {
    cursor: pointer;
}

.faq-toggle:hover {
    background-color: rgba(255, 20, 147, 0.03);
}

/* --- Header scroll state --- */
#header {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#header.scrolled {
    background-color: rgba(26, 26, 46, 0.98);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* --- Mobile menu transition --- */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

#mobile-menu.open {
    max-height: 400px;
}

#mobile-menu.hidden {
    display: block !important;
    max-height: 0;
}

/* --- Smooth CTA button hover --- */
a[href*="arketa"] {
    transition: all 0.2s ease;
}

/* --- Image loading placeholder --- */
img {
    background-color: #f3f4f6;
}

/* --- Focus styles for accessibility --- */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #FF1493;
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Selection color --- */
::selection {
    background-color: rgba(255, 20, 147, 0.2);
    color: #1a1a2e;
}

/* --- Responsive adjustments --- */
@media (max-width: 640px) {
    .hero-logo-glow {
        box-shadow:
            0 0 20px rgba(255, 20, 147, 0.25),
            0 0 40px rgba(255, 20, 147, 0.1);
    }
}

/* --- Print styles --- */
@media print {
    header, footer, .faq-chevron, #mobile-menu-btn {
        display: none !important;
    }

    .faq-content {
        max-height: none !important;
        display: block !important;
    }

    section {
        break-inside: avoid;
    }
}