/* wwwroot/css/site.css */

.banner {
    /*background-image: url('/images/banner.jpg');*/
    background-size: cover;
    background-position: center;
    background-color: lightskyblue;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    flex-direction: column; /* Stack vertically */
    gap: 0.5rem; /* Space between h1 and p */
    text-align: center;
}

.top-nav {
    background-color: #E9C46A;
    color: #2A9D8F;
}

.nav-link:hover {
    color: #FF6B35 !important;
}

/* Main Nav Text Color */
.top-nav .navbar-brand,
.top-nav .nav-link {
    color: #2A9D8F !important; /* Teal to match sidebars */
}

.postFeaturedImage {
    max-width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
}

/* Layout */
.container {
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

.container.mt-0 {
    flex: 1;
}

.row {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    min-height: 60vh;
}

/* Sidebars */
.left-sidebar, .right-sidebar {
    background-color: #2A9D8F;
    color: #E0E0E0;
}

.left-sidebar {
    padding-left: 0 !important;
    padding-right: 3rem !important;
}

.right-sidebar {
    padding-left: 3rem !important;
    padding-right: 0 !important;
}

/* Main */
.col-md-6 {
    background-color: #F4F1E9;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    flex: 1;
}

.col-md-3, .col-md-6 {
    display: flex;
    flex-direction: column;
}

/* Footer */
footer {
    background-color: #2A9D8F !important;
    color: #E0E0E0 !important;
    text-align: center;
    padding: 2rem 0;
}

/* Sidebar links to match nav */
.left-sidebar a,
.right-sidebar a {
    color: #E8B923;
}

    .left-sidebar a:hover,
    .right-sidebar a:hover {
        color: #FF6B35;
    }

/* Links in main content area */
.col-md-6 a {
    color: #4A9C7E; /* Matches the dark sidebar color */
    text-decoration: none;
}

    .col-md-6 a:hover {
        color: #E8B923; /* Orange accent that matches your nav hover */
        text-decoration: underline;
    }

/* Post titles specifically */
.card-title a {
    font-weight: 600;
    color: #4A9C7E;
}

    .card-title a:hover {
        color: #E8B923;
    }

img {
    loading: lazy;
}

.col-md-6 img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}