body {
    background-color: #F9F7F2;
    color: #4A4A4A;
}

.chart-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    height: 350px;
    max-height: 400px;
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Custom scrollbar for clean look */
::-webkit-scrollbar {
    width: 8px;
}

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

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

/* Animation utilities - Now instant display */
.fade-enter {
    opacity: 1;
    transform: translateY(0);
}

.fade-enter-active {
    opacity: 1;
    transform: translateY(0);
}

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
}

/* Offset for sticky navbar when scrolling to anchors */
:target {
    scroll-margin-top: 100px;
}

/* Accordion transition */
.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
}

.accordion-content.open {
    grid-template-rows: 1fr;
}

.accordion-inner {
    overflow: hidden;
}

/* ========== ACADEMIC TYPOGRAPHY SYSTEM ========== */

/* Main Content Area - Academic Reading Optimization */
main {
    font-size: 1.125rem;
    /* 18px for comfortable long-form reading */
    line-height: 1.8;
    /* Generous line spacing */
    color: #2d2d2d;
    /* Deep neutral for strong contrast */
}

/* Paragraph formatting for academic style */
main p,
.prose p {
    margin-bottom: 1.5em;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

/* Preserve center/left/right alignment where explicitly set */
.text-center,
.text-center p {
    text-align: center !important;
}

.text-left,
.text-left p {
    text-align: left !important;
}

.text-right,
.text-right p {
    text-align: right !important;
}

/* Headings - Academic Hierarchy */
main h2 {
    font-size: 1.875rem;
    font-weight: 700;
    color: #8B2635;
    /* faith-primary */
    margin-top: 2.5em;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid #E8E4D9;
}

main h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #4A4A4A;
    margin-top: 2em;
    margin-bottom: 0.75em;
}

main h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

/* Lists - Proper academic spacing */
main ul,
main ol {
    margin-bottom: 1.5em;
    padding-left: 1.75em;
}

main li {
    margin-bottom: 0.5em;
    line-height: 1.7;
}

/* Academic Blockquotes */
main blockquote {
    font-family: 'Merriweather', serif;
    font-style: italic;
    background-color: #fafaf8;
    border-left: 4px solid #D4AF37;
    /* faith-secondary */
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
    border-radius: 0 4px 4px 0;
    color: #5a5a5a;
    font-size: 1.05rem;
}

/* APA Reference Formatting - Hanging Indent */
.apa-reference,
.apa-entry {
    padding-left: 2.5em;
    text-indent: -2.5em;
    margin-bottom: 1em;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #3a3a3a;
}

.apa-reference em,
.apa-reference i,
.apa-entry em,
.apa-entry i {
    font-style: italic;
}

/* References Section */
#section-references,
.references-section {
    border-top: 2px solid #E8E4D9;
    padding-top: 2rem;
    margin-top: 3rem;
}

/* Tables - Academic styling */
main table {
    font-size: 0.95rem;
    line-height: 1.6;
}

main table caption {
    font-style: italic;
    color: #666;
    margin-bottom: 0.75em;
    text-align: left;
}

/* Clean up excessive visual noise in cards */
main .bg-gradient-to-br {
    background-image: none !important;
    background-color: #fafaf8;
}

/* Ensure proper text color in nested elements */
main .text-gray-600 {
    color: #4a4a4a !important;
}

main .text-gray-700 {
    color: #3a3a3a !important;
}

/* Statistical callout boxes */
.stat-box {
    background: #fff;
    border-left: 4px solid #D4AF37;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #8B2635;
    line-height: 1;
    font-family: 'Inter', sans-serif;
}

.stat-label {
    font-size: 0.875rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.5rem;
}