/* static/css/custom-layout.css */

/* Footer Styles */
.dh5-footer {
    /* background-color: #f8f8f8; Removed white background */
    padding: 20px 0;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center items horizontally */
}

.dh5-footer .author-bio,
.dh5-footer .social-media-icons {
    width: 100%; /* Take full width */
    max-width: 1200px; /* Match footer-container max-width */
    margin-bottom: 20px; /* Space below them */
    padding: 0 20px; /* Match footer-container padding */
    box-sizing: border-box; /* Include padding in width */
}

.dh5-footer .author-bio {
    text-align: center; /* Center content within author-bio */
}

.dh5-footer .social-media-icons {
    text-align: center; /* Center content within social-media-icons */
}

.dh5-footer .footer-container {
    width: 100%; /* Take full width of the footer */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.dh5-footer .footer-main-content {
    display: flex;
    flex-direction: column; /* Default to column for smaller screens */
    width: 100%;
    gap: 20px;
    align-items: center; /* Center items in column layout */
}

@media (min-width: 768px) {
    .dh5-footer .author-bio,
    .dh5-footer .social-media-icons {
        text-align: left; /* Align left on larger screens */
    }

    .dh5-footer .footer-main-content {
        flex-direction: row; /* Row for larger screens */
        justify-content: space-between;
        align-items: flex-start; /* Align items to the top of the row */
    }

    .dh5-footer .footer-logo {
        flex: 1; /* Takes up 1/3 of space */
        text-align: left;
    }

    .dh5-footer .footer-nav {
        flex: 1; /* Takes up 1/3 of space */
        text-align: center;
    }

    .dh5-footer .footer-copyright {
        flex: 1; /* Takes up 1/3 of space */
        text-align: right;
    }
}

.dh5-footer .footer-logo img {
    max-width: 240px; /* Increased size by 20% */
    height: auto;
}

.dh5-footer .footer-nav a {
    display: block; /* Make links stack vertically */
    margin-bottom: 5px;
    color: #555; /* Example link color */
    text-decoration: none;
    font-size: 1.2em; /* Consistent font size */
    line-height: 1.2; /* Adjusted line height */
}

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

.dh5-footer .footer-copyright p {
    font-size: 1.2em; /* Consistent font size */
    color: #777;
}

/* Styling for social media icons */
.dh5-footer .social-media-icons a {
    font-size: 1.2em; /* Consistent font size */
    line-height: 1.2; /* Adjusted line height */
    margin: 0 5px; /* Add some spacing between icons */
    color: #555; /* Example link color */
    text-decoration: none;
}

.dh5-footer .social-media-icons a:hover {
    color: #007bff; /* Example hover color */
}

/* Header Styles */
.header {
    background-color: transparent; /* Ensure no white background */
}

.header .nav {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Distribute items with space between */
    padding: 10px 20px; /* Add some padding */
}

.header .nav .logo-container img {
    height: 80px; /* 2x original height */
    width: 80px;  /* 2x original width */
    object-fit: contain; /* Ensure image fits within bounds */
}

.header .nav .title-container {
    flex-grow: 1; /* Allow title to take up available space */
    text-align: center; /* Center the title text */
}

.header .nav .menu-container {
    /* Ensure menu doesn't push title off-center */
    /* If menu items are dynamic, might need more complex flex adjustments */
}