/* ======================================== 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; } /* ======================================== PAGE ELEMENTS ======================================== */ /* Fix the text color of the blog tags */ .tag.text-label.text_primary-color { color: white !important; } .tag-heading.text_primary-color a { color: white !important; } /* --- Sidebar Search Autosuggest --- */ #search-results-container { display: none; position: absolute; top: calc(100% - 1px); left: 0; right: 0; background: #ffffff; border: 1px solid #e0e0e0; border-top: none; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); z-index: 100; max-height: 400px; overflow-y: auto; border-radius: 0 0 6px 6px; } .search-result-heading { font-size: 12px; font-weight: 600; text-transform: uppercase; color: #999; padding: 12px 15px 4px 15px; margin: 0; background: #f9f9f9; border-bottom: 1px solid #eee; border-top: 1px solid #eee; } .search-result-heading:first-child { border-top: none; } .search-result-item { display: block; padding: 10px 15px; font-size: 15px; color: #333; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid #f0f0f0; } .search-result-item:last-child { border-bottom: none; } .search-result-item.active, .search-result-item:hover { background: #ebebeb; color: var(--primary-color); /* Uses our primary color */ } .search-result-none { padding: 15px; color: #777; font-style: italic; } /* Override blog search button text white on hover */ .tf-btn.btn-bg-1 span:first-child { transition: color 0.3s ease; } .tf-btn.btn-bg-1:hover span:first-child { color: white !important; } /* --- Blog Post Breadcrumb Fix --- */ .blog-post .breadcrumb { display: flex; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; background-color: transparent; } .blog-post .breadcrumb li { display: flex; align-items: center; /* Vertically center items */ font-size: 15px; } /* Style for the links (Home, Blog) */ .blog-post .breadcrumb li a { color: #777; /* Lighter gray for non-active links */ text-decoration: none; transition: color 0.2s ease; } /* Hover effect for links */ .blog-post .breadcrumb li a:hover { color: #111; /* Make text dark on hover (like the active state) */ background-color: transparent; text-decoration: none; } /* Style for the active page (the current article) */ .blog-post .breadcrumb li.active { color: #111; /* Dark black for the active page */ font-weight: 500; /* Make it slightly bolder */ } /* Add the separator */ .blog-post .breadcrumb li + li::before { content: '>'; /* You can use '/' or '»' if you prefer */ margin: 0 10px; /* Space around the separator */ color: #aaa; /* Light gray for the separator */ } /* --- Blog Post In-Body Tag Fix --- */ /* This removes that solid blue background */ .blog-post .tag-share .tag-heading { background-color: transparent !important; border: none !important; padding: 0 !important; } /* This forces the tags to line up in a row */ .blog-post .tag-share .tags-list { display: flex; flex-wrap: wrap; gap: 8px; /* Adds nice spacing between tags */ } /* This styles the individual tags as blue pills */ .blog-post .tag-share .tags-item { display: inline-block; background-color: #007bff !important; /* Hardcoded blue */ border: none !important; color: #ffffff !important; /* White text */ border-radius: 4px; padding: 5px 12px; /* Adds some spacing inside the pill */ text-decoration: none; transition: background-color 0.2s ease; } /* This adds the black background on hover */ .blog-post .tag-share .tags-item:hover { background-color: #000000 !important; /* Black background */ color: #ffffff !important; /* White text */ } a.tf-btn.btn-bg-1:hover > span:not(.bg-effect) { color: #ffffff !important; }