/*
 Theme Name: Hestia Child
 Theme URI: https://greengatesoft.com/
 Description: A custom child theme for Hestia.
 Author: Chidi Emeribe
 Author URI: https://greengatesoft.com
 Template: hestia
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Tags: blog, one-column, custom-colors, custom-header, custom-menu, e-commerce, featured-image-header, featured-images, flexible-header, full-width-template, left-sidebar, news, photography, portfolio, right-sidebar, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
 Text Domain: hestia-child
*/

@media screen and (min-width: 48em) {
    .colors-dark .site-footer,
    .colors-dark .site-footer a {
        color: #999;
    }
}

/* Footer Styles */
.site-footer {
    background-color: #111;       /* Dark background */
    color: #ddd;                  /* Light text */
    text-align: center;           /* Center text */
    padding: 20px 10px;
    font-size: 14px;
    margin-top: 40px;
}

.site-footer p {
    margin: 0;
    color: #aaa;
}

.site-footer p a {
    color: #27ae60;               /* Accent color (green, matches your brand) */
    text-decoration: none;
}

.site-footer p a:hover {
    color: #2ecc71;               /* Slightly brighter green on hover */
}

/* Footer */
.site-footer {
    background-color: #111;
    color: #ddd;
    padding: 40px 20px 20px;
    margin-top: 40px;
    font-size: 14px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Widget area */
.footer-widgets {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 20px;
}

.footer-widget {
    flex: 1 1 250px; /* Responsive columns */
    min-width: 200px;
}

.footer-widget-title {
    font-size: 16px;
    color: #fff;
    margin-bottom: 10px;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
}

/* Bottom copyright */
.footer-bottom {
    text-align: center;
    border-top: 1px solid #222;
    padding-top: 15px;
    color: #aaa;
}

.footer-bottom a {
    color: #27ae60;
    text-decoration: none;
}

.footer-bottom a:hover {
    color: #2ecc71;
}
/*
 * 1. Base Container Styling
 * Ensures the menu is centered or takes up space properly.
 */
.footer-menu-area {
    padding: 15px 0; /* Add vertical spacing */
    text-align: center; /* Center the menu items (useful for mobile/block layouts) */
    border-top: 1px solid #333333; /* A subtle separator line above the menu */
    margin-bottom: 10px; /* Space above the copyright bar */
}

/*
 * 2. List (Menu) Styling
 * Removes default list styles (bullets, padding) and sets display for horizontal layout.
 */
.footer-links {
    list-style: none; /* Remove bullet points */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    display: flex; /* Use Flexbox for powerful horizontal alignment */
    justify-content: center; /* Center the entire menu horizontally */
    gap: 20px; /* Modern way to add spacing between items (better than margin-right) */
}

/*
 * 3. Individual Item (li) Styling
 * Ensures list items are displayed in a line.
 */
.footer-links li {
    display: inline-block; /* Essential for older browsers or simple alignment */
    /* If you rely only on `gap` in .footer-links, you might not need `margin` here. */
}

/*
 * 4. Link (a) Styling
 * The core styling for the text links themselves.
 */
.footer-links a {
    text-decoration: none; /* Remove default underline */
    color: #cccccc; /* Light gray color for better contrast against a dark footer */
    font-size: 14px; /* Slightly smaller font size for footer text */
    font-weight: 500; /* Medium weight for readability */
    padding: 5px 0; /* Vertical padding if you need larger click area */
    transition: color 0.3s ease; /* Smooth transition for hover effect */
}

/*
 * 5. Hover and Focus Effects
 * Provides visual feedback when the user interacts with a link.
 */
.footer-links a:hover,
.footer-links a:focus {
    color: #ffffff; /* Change color to white on hover/focus */
}

/*
 * Optional: Style for current menu item
 */
.footer-links .current-menu-item a {
    color: #ffffff;
    border-bottom: 2px solid #ffffff; /* Highlight the active page */
    padding-bottom: 3px;
}

/*
 * Optional: Responsive Adjustments for Mobile
 * On small screens, stack the menu items vertically for better touch targets.
 */
@media (max-width: 600px) {
    .footer-links {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center the stacked items */
        gap: 10px; /* Reduce vertical gap */
    }
}