/* css/style.css */

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:wght@400;600&display=swap');

/* --- Base Body & Text Styles (Dark Mode) --- */
body {
    background-color: #000; /* Pure Black background */
    color: #fff; /* White text color for general content */
    font-family: 'Open Sans', sans-serif; /* Body text */
    line-height: 1.6; /* Improves readability */
    padding-top: 56px; /* Space for fixed navbar (adjust if navbar height changes) */
}

h1, h2, h3, h4, h5, h6, .display-4 {
    font-family: 'Montserrat', sans-serif; /* Headings */
    font-weight: 700; /* Bold for headings */
}

/* --- Navbar & Footer Styles (Dark Background Consistency) --- */
.navbar.bg-dark,
footer.bg-dark {
    background-color: #1a1a1a !important; /* Slightly off-black for subtle contrast */
    color: #fff; /* Ensure text within is white */
}

.navbar-nav .nav-link,
footer a.text-white {
    color: #fff !important; /* White links */
    transition: color 0.3s ease; /* Smooth hover effect */
}

.navbar-nav .nav-link:hover,
footer a.text-white:hover {
    color: #007bff !important; /* Blue on hover for links */
}

.navbar-nav .nav-link.active {
    color: #007bff !important; /* A contrasting color for the active link */
    font-weight: bold;
    border-bottom: 2px solid #007bff; /* Underline effect for active link */
    padding-bottom: 3px; /* Adjust padding for underline */
}

/* Adjust the donate button in navbar to be more subtle */
.navbar-nav .nav-link.btn.btn-success {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #fff !important;
    padding: .375rem .75rem; /* Bootstrap default button padding */
    font-size: .875rem; /* Smaller font for navbar button */
    line-height: 1.5;
    border-radius: .25rem;
}

.navbar-nav .nav-link.btn.btn-success:hover {
    background-color: #1e7e34 !important;
    border-color: #1e7e34 !important;
}

/* --- Navbar Brand Alignment Fix --- */
.navbar-brand {
    white-space: normal; /* Allow the text to wrap to the next line */
    line-height: 1.2; /* Adjust line height for wrapped text */
}

@media (max-width: 767.98px) { /* Styles for screens smaller than Bootstrap's 'md' breakpoint (typical mobile) */
    .navbar-brand {
        font-size: 1.05rem; /* Slightly reduce font size on small screens */
        max-width: calc(100% - 60px); /* Leave room for the toggler button */
        margin-right: 0.5rem; /* Add a little space between brand and toggler */
    }
}


/* --- Button Styles --- */
.btn-primary {
    background-color: #007bff; /* Standard Bootstrap blue */
    border-color: #007bff;
    color: #fff;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease-in-out;
    border-radius: .3rem; /* Soften edges */
}

.btn-primary:hover {
    background-color: #0056b3; /* Darker blue on hover */
    border-color: #0056b3;
    transform: translateY(-2px); /* Subtle lift on hover */
}

.btn-success {
    background-color: #28a745; /* Standard Bootstrap green */
    border-color: #28a745;
    color: #fff;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease-in-out;
    border-radius: .3rem; /* Soften edges */
}

.btn-success:hover {
    background-color: #1e7e34; /* Darker green on hover */
    border-color: #1e7e34;
    transform: translateY(-2px); /* Subtle lift on hover */
}

.btn-outline-secondary {
    color: #bbb; /* Lighter gray for outline */
    border-color: #bbb;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease-in-out;
    border-radius: .3rem; /* Soften edges */
}

.btn-outline-secondary:hover {
    background-color: #bbb;
    color: #000; /* Dark text on hover */
    transform: translateY(-2px); /* Subtle lift on hover */
}

.btn-outline-light {
    color: #f8f9fa; /* White text */
    border-color: #f8f9fa; /* White border */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease-in-out;
    border-radius: .3rem; /* Soften edges */
}

.btn-outline-light:hover {
    background-color: #f8f9fa;
    color: #000; /* Black text on hover */
    transform: translateY(-2px); /* Subtle lift on hover */
}

/* --- Card Styles --- */
.card {
    background-color: #2c2c2c; /* Darker gray for card backgrounds */
    color: #fff; /* White text for card content */
    border-color: #444; /* Subtle border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Add hover effects */
    border-radius: .5rem; /* Soften edges more for cards */
}

.card:hover {
    transform: translateY(-5px); /* Lift card on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* More pronounced shadow on hover */
}

.blockquote-footer {
    color: #bbb; /* Slightly lighter gray for footer text within cards */
}

/* --- Image Styles --- */
img {
    filter: brightness(0.9); /* Slightly dim images on dark background for better contrast */
    transition: filter 0.3s ease; /* Smooth transition on hover */
    border-radius: .5rem; /* Soften edges for images */
}

img.rounded-circle { /* Keep circles round */
    border-radius: 50% !important;
}

img:hover {
    filter: brightness(1); /* Restore brightness on hover */
}

/* --- Form Styles (for contact page and modal) --- */
.form-control {
    background-color: #2c2c2c !important; /* Dark background for form inputs */
    color: #fff !important; /* White text in inputs */
    border-color: #444 !important; /* Darker border for inputs */
    border-radius: .3rem; /* Soften edges */
}

.form-control::placeholder { /* Style for placeholder text */
    color: #bbb !important;
}

.form-label {
    color: #fff; /* Ensure labels are white */
}

/* --- Floating Action Button (FAB) Positioning and Styling --- */
.fixed-bottom {
    z-index: 1030; /* Ensure FAB is above other content, lower than modals */
}

.fixed-bottom .btn.rounded-circle {
    width: 60px; /* Standard size for FAB */
    height: 60px; /* Standard size for FAB */
    display: flex; /* Use flexbox to center icon */
    justify-content: center;
    align-items: center;
    line-height: 1; /* Adjust line height for icon centering */
    border-radius: 50% !important; /* Ensure perfect circle */
}

.fixed-bottom .btn.rounded-circle i {
    font-size: 1.8rem; /* Icon size */
}

/* --- List Group Item Styles (My Plan page) --- */
.list-group-item {
    background-color: transparent !important; /* Make list items transparent to show body background */
    color: #fff !important; /* White text for list items */
    border-color: rgba(255, 255, 255, 0.3) !important; /* Subtle white border */
    margin-bottom: 15px; /* Add some space between items */
    border-radius: .5rem; /* Soften edges more for list items */
    padding: 20px; /* More padding for readability */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.05) !important; /* Slight highlight on hover */
    border-color: #007bff !important; /* Blue border on hover */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.list-group-item .fw-bold {
    color: #007bff; /* Highlight the main plan points with blue */
    margin-bottom: 10px;
}

.list-group-item ul {
    margin-top: 10px;
    margin-bottom: 0;
    padding-left: 20px;
}

.list-group-item ul li {
    color: #ccc; /* Slightly lighter text for sub-points */
}

/* --- Alert Styles (Donate Coming Soon) --- */
.alert-info {
    background-color: #212529 !important; /* Darker background for alert */
    color: #d1ecf1 !important; /* Light blue text for contrast */
    border-color: #0c5460 !important; /* Darker blue border */
    border-radius: .5rem; /* Soften edges */
}

.alert-info .alert-heading {
    color: #88ddff !important; /* Even lighter blue for heading */
}

/* --- Modal Styles --- */
.modal-content {
    border-radius: .5rem; /* Soften modal edges */
    border: 1px solid #444; /* Subtle border */
}

.modal-header {
    border-bottom: 1px solid #444; /* Soften header border */
}

.modal-footer {
    border-top: 1px solid #444; /* Soften footer border */
}

/* --- Content Section Toggling Styles --- */
.content-section {
    min-height: calc(100vh - 56px - 100px); /* Adjust height for content, considering navbar and footer */
    padding-top: 80px; /* Add padding for fixed header */
}

/* Ensure the home section fills the viewport height by default */
#home-section {
    min-height: 100vh; /* Make home section full viewport height */
    padding-top: 0; /* No extra padding for home as it's centered vertically */
}