/* ======================================== HEADER & FOOTER OVERRIDES ======================================== */ /* 1. Ensure html and body take up full height */ html, body { height: 100%; margin: 0; padding: 0; width: 100%; } /* 2. Make the main flex container */ body { display: flex; flex-direction: column; } /* * 3. Make #wrapper (from header/footer) the item that grows * to fill the body. * It must *also* be a flex container * for its own children (header, .page-layout, footer). */ #wrapper { display: flex; flex-direction: column; flex-grow: 1; min-height: 100%; /* Or min-height: 100vh; if 100% fails, but 100% is usually better here */ } /* * 4. Make the .page-layout (main content) the item * that grows *inside* #wrapper, pushing the footer down. */ .page-layout.no-sidebar { flex-grow: 1; /* OVERRIDE the original problematic styles */ display: block; min-height: auto; /* END OVERRIDE */ width: 100%; max-width: 100%; margin: 0; padding: 0; } /* 5. These rules are fine */ .page-layout.no-sidebar .main-content { width: 100%; max-width: 100%; margin: 0; padding: 0; } .page-layout.no-sidebar .main-content-inner { width: 100%; max-width: 100%; padding: 0; margin: 0; } /* 6. Original override - keep this */ footer.footer-main .footer-links li a { font-size: 1.5rem; } /* ======================================== FINAL LAYOUT OVERLAP & SIDEBAR FIX ======================================== */ /* * This uses a HIGHLY specific selector to find the problem * element (#wrapper .page-layout) and force it back into * the normal page flow. */ #wrapper .page-layout { position: static !important; margin-bottom: 0 !important; z-index: auto !important; } /* * This is our original sidebar fix, also made more * specific to ensure it works. */ #wrapper .page-layout.no-sidebar .main-content { padding-left: 0; } /* Ensure the map container has a defined height */ #map { height: 450px; width: 100%; } /* Override button hover text color to white */ .form-contact .tf-btn.btn-bg-1:hover span { color: #ffffff !important; }