/*
 * The Outpouring Network - Optimized Stylesheet
 * Assumes Bootstrap 5 and Font Awesome are loaded separately.
 * Focuses on custom styles, overrides, and mobile-first principles.
 */

:root {
    /* --- Color Palette --- */
    /* Primary */
    --primary: #3b5998;       /* Primary blue */
    --primary-dark: #2a4272;  /* Darker blue */
    --primary-light: #8b9dc3; /* Lighter blue */

    /* Secondary */
    --secondary: #6c757d;     /* Gray */
    --secondary-light: #f8f9fa; /* Light gray */
    --secondary-dark: #343a40; /* Dark gray */

    /* Accent & Status */
    --accent: #deb887;        /* Burlywood (warm accent) */
    --success: #28a745;       /* Green */
    --warning: #ffc107;       /* Yellow */
    --danger: #dc3545;        /* Red */
    --info: #17a2b8;          /* Teal */

    /* Text */
    --text-dark: #212529;     /* Dark text (Matches Bootstrap's default) */
    --text-light: #f8f9fa;    /* Light text */
    --text-muted: #6c757d;    /* Muted text (Matches Bootstrap's default) */

    /* --- Layout & UI --- */
    /* Spacing */
    --spacing-xs: 0.25rem;    /* 4px */
    --spacing-sm: 0.5rem;     /* 8px */
    --spacing-md: 1rem;       /* 16px */
    --spacing-lg: 1.5rem;     /* 24px */
    --spacing-xl: 3rem;       /* 48px */

    /* Border Radius */
    --border-radius: 0.375rem; /* Bootstrap 5 default: 0.375rem. Adjusted slightly from original 0.25rem */
    --border-radius-lg: 0.5rem; /* Bootstrap 5 default: 0.5rem */

    /* Shadows (Consider using Bootstrap's shadow classes: .shadow-sm, .shadow, .shadow-lg) */
    /* You can keep these if you need custom shadow values different from Bootstrap */
    --shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);
    --shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175);

    /* --- Fonts --- */
    /* Define font families if different from Bootstrap's defaults or the Google Font import */
    --font-sans-serif: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Added Inter first */
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* --- General Styles & Overrides --- */
body {
    font-family: var(--font-sans-serif);
    line-height: 1.6;
    color: var(--text-dark);
    background-color: #f9f9f9; /* Slightly off-white background */
}

/* Override default link color and add transition */
a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out;
}

a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* --- Bootstrap Component Overrides (Examples) --- */

/* Ensure custom primary color is used for Bootstrap components */
/* Note: Bootstrap 5 uses CSS variables, so overriding --bs-primary might be another approach, */
/* but direct overrides like below are often clearer for specific components. */

/* Override .btn-primary background if needed (Bootstrap uses --bs-btn-bg) */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    /* Add other properties like color if Bootstrap defaults aren't sufficient */
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* Override .btn-outline-primary */
.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: white; /* Ensure text is readable on hover */
}

/* Override text and background utilities if needed (Bootstrap uses --bs-*) */
.text-primary {
    color: var(--primary) !important;
}

.bg-primary {
    background-color: var(--primary) !important;
}

/* Override form focus glow color */
.form-control:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 0.25rem rgba(59, 89, 152, 0.25); /* Use primary color */
}

/* Override card styles ONLY if Bootstrap defaults aren't enough */
.card {
    /* Keep custom transition if desired, Bootstrap cards don't have this hover effect by default */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* border: none; */ /* Bootstrap 5 cards have a subtle border by default, keep or override */
    /* border-radius: var(--border-radius); */ /* Bootstrap sets this */
    /* box-shadow: var(--shadow-sm); */ /* Use Bootstrap .shadow-sm class instead */
}

.card:hover {
    /* Keep custom hover effect */
    transform: translateY(-5px);
    box-shadow: var(--shadow); /* Use custom shadow variable or Bootstrap's .shadow class */
}

.card-title {
    /* Override card title color if needed */
    color: var(--primary);
    /* font-weight: 600; */ /* Bootstrap sets this */
}

/* --- Custom Components & Sections --- */

/* Header Styles */
/* Navbar styling is mostly handled by Bootstrap classes (navbar-dark, bg-primary) */
header .navbar {
    box-shadow: var(--shadow-sm); /* Add shadow to navbar */
}

header .navbar-brand {
    font-weight: 600;
    letter-spacing: 0.5px;
    display: flex; /* Align logo and text nicely */
    align-items: center;
}

header .navbar-brand img {
    margin-right: var(--spacing-sm); /* Space between logo and text */
    /* width/height set in HTML */
}

/* Picture Header Banner */
.picture-header {
    background-image: url('/assets/images/harvest-header.jpg'); /* Ensure image is optimized */
    background-size: cover;
    background-position: center;
    position: relative;
    min-height: 180px; /* Minimum height for very small screens */
    height: 22vh; /* Relative height */
    display: flex;
    align-items: center;
    color: white;
    text-align: center; /* Center content by default */
}

.picture-header-overlay {
    position: absolute;
    inset: 0; /* Replaces top, left, right, bottom: 0 */
    background: linear-gradient(rgba(59, 89, 152, 0.4), rgba(59, 89, 152, 0.7)); /* Adjusted opacity slightly */
    z-index: 1;
}

.picture-header-content {
    position: relative;
    z-index: 2;
    width: 100%; /* Ensure it takes full width within container */
    padding: var(--spacing-md) 0; /* Add some vertical padding */
}

.picture-header-content h1 {
    font-size: 2rem; /* Base size for mobile */
    font-weight: 700;
    margin: 0 0 var(--spacing-sm) 0; /* Adjusted margin */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Slightly softer shadow */
}

.header-tagline {
    font-size: 1rem; /* Base size for mobile */
    margin-bottom: 0;
    opacity: 0.9;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

/* Footer Styles */
footer {
    /* margin-top: 2rem; */ /* Spacing handled by <main class="py-4"> and footer class="py-4" */
    /* background/text color set via Bootstrap classes (bg-dark, text-light) */
}

footer h5 {
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--text-light); /* Ensure heading color contrasts with dark bg */
}

footer .social-links a {
    display: inline-flex; /* Use flex for centering */
    justify-content: center;
    align-items: center;
    width: 36px; /* Slightly larger touch target */
    height: 36px;
    color: var(--text-light); /* Ensure icon color is set */
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: background-color 0.3s ease;
    text-decoration: none; /* Remove underline from icons */
}

footer .social-links a:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--text-light); /* Keep color on hover */
}

/* Footer quick links */
footer ul.list-unstyled a {
    color: var(--text-light);
    opacity: 0.8;
    transition: opacity 0.2s ease-in-out;
}
footer ul.list-unstyled a:hover {
    opacity: 1;
    text-decoration: none; /* Keep no underline */
    color: white;
}

/* Footer copyright/links */
footer hr {
    border-top-color: rgba(255, 255, 255, 0.15); /* Lighter hr */
}

footer .text-md-end a {
     color: var(--text-light);
     opacity: 0.8;
     transition: opacity 0.2s ease-in-out;
}
footer .text-md-end a:hover {
    opacity: 1;
    text-decoration: none;
}

/* Callout/Feature Box */
.feature-box {
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    background-color: white;
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-lg);
    border-left: 5px solid var(--primary); /* Slightly thicker border */
}

.feature-box-secondary { border-left-color: var(--secondary); }
.feature-box-accent { border-left-color: var(--accent); }
.feature-box-success { border-left-color: var(--success); }
.feature-box-warning { border-left-color: var(--warning); }
.feature-box-danger { border-left-color: var(--danger); }
.feature-box-info { border-left-color: var(--info); }

/* Hero Section (If distinct from Picture Header) */
/* Assuming .hero uses Bootstrap bg-primary, text-white, py-5 etc. */
.hero h1 {
    font-weight: 700;
    font-size: 2rem; /* Mobile base */
}

.hero p {
    font-size: 1.1rem; /* Mobile base */
    opacity: 0.9;
}

/* Bible Verse Callout */
.bible-verse {
    font-style: italic;
    padding: var(--spacing-lg);
    background-color: rgba(222, 184, 135, 0.1); /* Accent color with alpha */
    border-left: 4px solid var(--accent);
    margin: var(--spacing-lg) 0;
    border-radius: var(--border-radius);
}

.bible-verse-reference {
    font-weight: 600;
    font-style: normal; /* Reference shouldn't be italic */
    display: block;
    margin-top: var(--spacing-sm);
    text-align: right;
    color: var(--text-muted); /* Muted color for reference */
}

/* Forum: Topic/Post Styles */
.topic-list .topic-item {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    background-color: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    transition: background-color 0.3s ease;
    border: 1px solid #eee; /* Subtle border */
}

.topic-list .topic-item:hover {
    background-color: var(--secondary-light);
}

.topic-list .topic-item .title {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: var(--spacing-xs);
}

.topic-list .topic-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Forum Post Detail */
.post {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    background-color: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid #eee;
}

.post-header {
    border-bottom: 1px solid #eee;
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.post-user {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-sm); /* Add space below user info */
}

.post-user img {
    width: 40px; /* Slightly smaller avatar */
    height: 40px;
    border-radius: 50%;
    margin-right: var(--spacing-md);
    object-fit: cover; /* Ensure image covers space */
}

.post-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.post-content {
    line-height: 1.7;
}

/* Church Directory Styles */
.church-item {
    margin-bottom: var(--spacing-xl); /* More space between church items */
}

.church-item .card-img-top {
    height: auto; /* Let image determine height */
    aspect-ratio: 16 / 9; /* Maintain aspect ratio */
    object-fit: cover;
    width: 100%; /* Ensure image spans card width */
}

/* Use text-primary, text-success etc. Bootstrap classes for icons */
.church-details i {
    margin-right: var(--spacing-sm);
    width: 1em; /* Ensure icons take up consistent space */
    text-align: center;
}

/* Event Styles */
.event-item {
    margin-bottom: var(--spacing-lg);
    background-color: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden; /* Ensure content stays within rounded corners */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack date/details vertically on mobile */
    border: 1px solid #eee;
}

.event-date {
    background-color: var(--primary);
    color: white;
    text-align: center;
    padding: var(--spacing-md);
    /* border-radius: var(--border-radius); */ /* Remove radius here if part of flex item */
}

.event-date .day {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    display: block; /* Ensure it takes full width */
}

.event-date .month {
    font-size: 0.9rem;
    text-transform: uppercase;
    display: block; /* Ensure it takes full width */
    opacity: 0.8;
}

.event-details {
    padding: var(--spacing-md);
    flex-grow: 1; /* Allow details to take remaining space */
}
.event-details h5 { /* Event Title */
    margin-top: 0;
    color: var(--primary-dark);
}

/* Training Module Styles */
.training-course {
    margin-bottom: var(--spacing-xl);
}

.training-course .card-img-top {
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
}

.module-list {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0; /* Remove default ul margin */
}

.module-list li {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
}

.module-list li:last-child {
    border-bottom: none;
}

.module-list li i {
    margin-right: var(--spacing-sm);
    color: var(--primary);
    width: 1.2em; /* Consistent icon spacing */
    text-align: center;
}

/* Form Styles */
.required-field::after {
    content: "*";
    color: var(--danger);
    margin-left: 4px;
}

/* Profile Page Styles */
.profile-header {
    background-color: var(--secondary-light);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    border-radius: var(--border-radius);
    display: flex; /* Use flex for layout */
    flex-direction: column; /* Stack elements vertically on mobile */
    align-items: center; /* Center items */
    text-align: center;
}

.profile-picture {
    width: 120px; /* Base size */
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid white;
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-md); /* Space below picture */
}

.upload-zone {
    border: 2px dashed #dee2e6;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.upload-zone.drag-over {
    border-color: #0d6efd;
    background-color: #f8f9fa;
}

.upload-progress {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.75rem;
    background-color: #f8f9fa;
}

.upload-message {
    color: #6c757d;
}

.upload-message i {
    color: #0d6efd;
}

/* Admin Panel Styles */
.admin-sidebar {
    background-color: var(--secondary-dark);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-lg); /* Add space below on mobile */
}

.admin-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.8); /* Slightly less bright */
    padding: 0.6rem 1rem; /* Adjust padding */
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-xs);
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex; /* Align icon and text */
    align-items: center;
}

.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
    background-color: rgba(255, 255, 255, 0.1);
    color: white; /* Make active/hover text white */
}

.admin-sidebar .nav-link i {
    margin-right: var(--spacing-sm);
    width: 1.2em; /* Consistent icon width */
    text-align: center;
}


/* --- Responsive Styles (Mobile-First Approach) --- */

/* Base styles (mobile) are defined above */

/* Small devices (tablets, 576px and up) */
@media (min-width: 576px) {
    .picture-header-content h1 {
        font-size: 2.25rem;
    }
    .header-tagline {
        font-size: 1.1rem;
    }
    .profile-header {
        flex-direction: row; /* Side-by-side layout */
        text-align: left; /* Align text left */
        align-items: center;
    }
    .profile-picture {
        margin-right: var(--spacing-lg); /* Space between picture and text */
        margin-bottom: 0; /* Remove bottom margin */
        width: 130px;
        height: 130px;
    }
}

/* Medium devices (tablets, landscape phones, 768px and up) */
@media (min-width: 768px) {
    .picture-header-content h1 {
        font-size: 2.5rem; /* Original size */
    }
    .header-tagline {
        font-size: 1.2rem; /* Original size */
    }
    .hero h1 {
        font-size: 2.5rem;
    }
    .hero p {
        font-size: 1.25rem;
    }
    .profile-picture {
        width: 150px; /* Original size */
        height: 150px;
    }
    .event-item {
        flex-direction: row; /* Side-by-side layout for date and details */
    }
    .event-date {
        flex: 0 0 100px; /* Fixed width for date block */
        border-radius: var(--border-radius) 0 0 var(--border-radius); /* Round left corners */
        display: flex;
        flex-direction: column;
        justify-content: center; /* Center date text vertically */
    }
    .event-details {
         border-radius: 0 var(--border-radius) var(--border-radius) 0; /* Round right corners */
    }
    .admin-sidebar {
        margin-bottom: 0; /* Remove bottom margin when in sidebar layout */
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    /* Add styles specific to large screens if needed */
    .picture-header {
        min-height: 200px; /* Ensure minimum height on larger screens */
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    /* Add styles specific to extra-large screens if needed */
}

/* --- Utility Classes (Keep only if NOT provided by Bootstrap or needed for specific overrides) --- */
/* Example: If you need a custom border color utility */
/* .border-primary { border-color: var(--primary) !important; } */
/* Most utilities like .rounded-circle, .shadow-*, .text-truncate are in Bootstrap */

