/* ===========================
   CompPlan2045 – Site Styles
   Based on the original IIS CSS (cleaned & deduped)
   =========================== */

/* Base layout heights */
html, body, header, .view {
    height: 100%;
}

html {
    scroll-behavior: smooth;
}

/* Offset fixed-top navbar so content isn't hidden under it */
body {
    padding-top: 72px;
    font-family: 'Roboto', Arial, sans-serif;
    line-height: 1.5;
}

@media (min-width: 992px) {
    body {
        padding-top: 80px;
    }
}

/* Section titles */
.section-title {
    text-transform: uppercase;
    text-align: center;
    font-weight: 500;
    padding-bottom: .25em;
    padding-top: .25em;
}

/* Element cards */
.element-title {
    color: #fff;
    text-transform: uppercase;
}

.element-text {
    color: rgba(255, 255, 255, 0.75) !important;
}

.element-icon {
    height: 7.5rem;
    margin-bottom: .25rem;
}

/* Landing page logo */
.logo-main {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 55vh;
    max-width: 100%;
}

/* Navbar */
.navbar {
    background-color: rgba(0, 0, 0, 0.3);
}

.top-nav-collapse {
    background-color: #1c2a48;
}

.dropdown-item:hover {
    background-color: #1c2a48 !important;
}

/* Navbar color on mobile */
@media (max-width: 768px) {
    .navbar {
        background-color: #1c2a48;
    }
}

/* Carousel full-height backgrounds */
.carousel,
.carousel-item,
.carousel-item.active {
    height: 100%;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.carousel-inner {
    height: 100vh;
}

/* Slide background images (ensure these exist under /wwwroot/img) */
.carousel-item:nth-child(1) {
    background: url("/img/landing-sav-min.jpg") no-repeat center center fixed;
}

.carousel-item:nth-child(2) {
    background: url("/img/PortWentworth-min.jpg") no-repeat center center fixed;
}

.carousel-item:nth-child(3) {
    background: url("/img/Thunderbolt-min.jpg") no-repeat center center fixed;
}

.carousel-item:nth-child(4) {
    background: url("/img/Bloomingdale-min.jpg") no-repeat center center fixed;
}

.carousel-item:nth-child(5) {
    background: url("/img/Tybee-min.jpg") no-repeat center center fixed;
}

.carousel-item:nth-child(6) {
    background: url("/img/Pooler-min.jpg") no-repeat center center fixed;
}

.carousel-item:nth-child(7) {
    background: url("/img/Vernonburg-min.jpg") no-repeat center center fixed;
}

.carousel-item:nth-child(8) {
    background: url("/img/Wormsloe-min.jpg") no-repeat center center fixed;
}

.carousel-item:nth-child(9) {
    background: url("/img/GardenCity-min.jpg") no-repeat center center fixed;
}

/* Logos and images */
.muni-logo {
    height: 5em;
}

.circle {
    object-fit: cover;
    border-radius: 50%;
    width: 350px;
    height: 350px;
}

.muni-circle {
    object-fit: cover;
    border-radius: 50%;
    width: 190px;
    height: 190px;
}

/* Contact page hero */
#contact-bg {
    background: url("/img/landing-sav-min.jpg") no-repeat center center fixed; /* swap if you have a dedicated contact image */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 800px; /* was a hard height; use min-height so it can grow with content */
}

/* Utility */
.main {
    padding-top: 3em !important;
}

/* Leaflet map (only applies if you add a map) */
#map {
    width: 100%;
    height: 600px;
    margin-top: 120px;
}

#mapDirections {
    margin-top: 120px;
}

#form {
    width: 300px;
}

/* Footer tweaks */
.page-footer {
    color: #fff;
}

    .page-footer a {
        color: #fff;
        text-decoration: none;
    }

        .page-footer a:hover {
            text-decoration: underline;
        }

/* Make those big decorative rules a touch less loud */
hr.my-5 {
    opacity: .9;
}