/* General Body and Font Styles */
body {
    font-family: 'Inter', sans-serif;
    color: #1a2b5b; /* primary-dark-blue */
    background-color: #f8f8f8; /* off-white */
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cinzel', serif;
}

/* Custom Color Palette (as defined in Tailwind config in index.html) */
/*
    'primary-dark-blue': '#1a2b5b',
    'accent-gold': '#d4af37',
    'light-grey': '#e0e0e0',
    'off-white': '#f8f8f8',
    'secondary-terracotta': '#a34a2a',
    'secondary-olive': '#6b8e23',
*/

/* Reusable Button Styles */
.btn-gold {
    background-color: #d4af37; /* accent-gold */
    color: #1a2b5b; /* primary-dark-blue */
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    text-decoration: none; /* Ensure links styled as buttons don't have underlines */
    display: inline-block; /* Allows padding and width to be applied */
    text-align: center;
    border: none; /* Remove default button border */
    cursor: pointer;
}

.btn-gold:hover {
    background-color: #1a2b5b; /* primary-dark-blue */
    color: #d4af37; /* accent-gold */
}

/* Mobile Menu Specific Styles */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out; /* Smooth transition for expansion/collapse */
}

#mobile-menu.active { /* Corrected: Changed from .is-open to .active */
    max-height: 300px; /* A value large enough to show all menu items. Adjust if needed. */
}

/* FAQ Accordion Styles */
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem; /* px-5 py-4 */
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0; /* light-grey */
    user-select: none; /* Prevent text selection on click */
    background-color: #f8f8f8; /* off-white */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    transition: box-shadow 0.3s ease-in-out;
    margin-bottom: 0.5rem; /* Add some space between headers */
}

.accordion-header:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* hover:shadow-md */
}

.accordion-header h3 {
    margin: 0; /* Remove default margin from h3 */
    color: #1a2b5b; /* primary-dark-blue */
}

.accordion-icon {
    transition: transform 0.3s ease-in-out;
}

/* No CSS rule for icon rotation here, as it's now handled by JavaScript directly */

.accordion-content {
    max-height: 0; /* Initially hidden */
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    padding: 0 1.5rem; /* Horizontal padding, vertical padding will be 0 when collapsed */
    background-color: #f0f0f0; /* A slightly darker grey for content background */
    border-bottom-left-radius: 0.5rem; /* rounded-b-lg */
    border-bottom-right-radius: 0.5rem; /* rounded-b-lg */
}

.accordion-content.active { /* Using 'active' class for consistency with JS */
    max-height: 500px; /* A large enough value to show all content. Adjust if your answers are very long. */
    padding-top: 1rem;
    padding-bottom: 1.25rem;
}

/* Ensure the last FAQ item's content has bottom padding */
.accordion-item:last-child .accordion-content.active {
    padding-bottom: 1.25rem;
}

/* Specific adjustments for the questionnaire page to ensure consistent styling */
#goddess-questionnaire-content .btn-gold,
#goddess-results-content .btn-gold {
    border-radius: 0.5rem; /* Ensure consistent button styling */
    padding: 0.75rem 1.5rem;
}

/* General Link Styling (if not covered by Tailwind or specific classes) */
a {
    color: inherit; /* Inherit color by default */
    text-decoration: none; /* Remove underlines by default */
}

a:hover {
    text-decoration: underline; /* Add underline on hover for standard links */
}

/* Specific link styling within the program section */
.program-description-link {
    color: #d4af37; /* accent-gold */
    text-decoration: underline;
}

.program-description-link:hover {
    color: #f8f8f8; /* off-white */
}