/* public/css/styles.css */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;600&display=swap');

:root {
    --color-primary-blue: #004080;
    --color-accent-gold: #D4AF37;
    --color-dark-grey: #595959;
}

body {
    font-family: 'Instrument Serif', serif;
    background-color: #f9fafb; /* bg-gray-50 */
    color: #374151; /* text-gray-700 */
}

/* Reusable Component Classes */
.text-primary-blue { color: var(--color-primary-blue); }
.bg-primary-blue { background-color: var(--color-primary-blue); }
.text-accent-gold { color: var(--color-accent-gold); }
.bg-accent-gold { background-color: var(--color-accent-gold); }
.text-dark-grey { color: var(--color-dark-grey); }

.hero-gradient {
    background: linear-gradient(135deg, var(--color-primary-blue) 0%, #003366 100%);
}

.pastor-gradient {
    background: linear-gradient(135deg, var(--color-accent-gold) 0%, #B8941F 100%);
}

.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* Custom Prose styling for readability */
.prose {
    font-family: 'Inter', sans-serif;
    color: #4b5563; /* text-gray-600 */
}
.prose p {
    margin-bottom: 1rem;
    line-height: 1.75;
}
.prose ul {
    list-style-position: inside;
    list-style-type: disc;
    margin-bottom: 1.5rem;
}
.prose ul li {
    margin-bottom: 0.5rem;
}
.prose a {
    color: var(--color-primary-blue);
    text-decoration: underline;
}
.prose a:hover {
    color: var(--color-accent-gold);
}
.prose strong {
    font-weight: 600;
    color: #1f2937;
}

/* New Header/Nav Styles */
.header-nav {
    display: none; /* Hidden on mobile by default */
}
@media (min-width: 768px) { /* md breakpoint */
    .header-nav {
        display: flex;
        justify-content: center;
        gap: 2rem; /* space-x-8 */
    }
}

.header-nav a {
    color: #d1d5db; /* text-gray-300 */
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.header-nav a:hover {
    color: white;
    border-color: var(--color-accent-gold);
}

.header-nav a.active {
    color: white;
    font-weight: 700;
    border-color: var(--color-accent-gold);
}