/* =====================================================
   GLOBAL RESET & LAYOUT
   ===================================================== */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body.public-layout {
    display: flex;
    flex-direction: column;
    font-family: "Segoe UI", Arial, sans-serif;
    background-color: #f5f5f5;
}



/* =====================================================
   HEADER / NAVBAR
   ===================================================== */
.navbar {
    min-height: 70px;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e5e5;
}

.navbar h2 {
    color: #4CAF50;
    font-weight: 600;
}

/* =====================================================
   MAIN CONTENT AREA
   ===================================================== */
main {
    flex-grow: 1; /* THIS is what fixes the layout */
    display: flex;
    flex-direction: column;
}

/* =====================================================
   HERO SECTION (KEY FIX)
   ===================================================== */
.hero-section {
    flex: 1; /* take remaining space between header & footer */
    min-height: calc(100vh - 120px); /* header + footer */
    background-image: url('../images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Optional soft overlay (matches target look) */
.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        rgba(255,255,255,0.05),
        rgba(0,0,0,0.35)
    );
}

/* =====================================================
   FOOTER
   ===================================================== */
.footer {
    background-color: #5a5a5a;
    color: #ffffff;
    padding: 8px 0;
    font-size: 13px;
    text-align: center;
}

/* =====================================================
   BUTTONS
   ===================================================== */
.btn-success {
    background-color: #4CAF50;
    border-color: #4CAF50;
}

.btn-success:hover {
    background-color: #43a047;
    border-color: #43a047;
}

/* =====================================================
   RESPONSIVE TWEAKS
   ===================================================== */
@media (max-width: 768px) {
    .navbar h2 {
        font-size: 18px;
    }

    .hero-section {
        min-height: calc(100vh - 100px);
    }
}