/* --- Base Footer Styling (Full Width) --- */
.new-site-footer {
    width: 100%;
    /* Pure black background */
    background-color: #000;
    color: #f5f5f5; /* Off-white text */
    padding: 20px 0 10px 0;
    font-family: Arial, sans-serif;
    line-height: 1.5;
}

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

/* --- Typography and Links --- */
.new-site-footer h4 {
    color: #f5f5f5;
    font-size: 1.1em;
    margin-bottom: 15px;
    font-weight: 600;
}

.new-site-footer a {
    color: #bbbbbb; 
    text-decoration: none;
    font-size: 0.9em;
    transition: color 0.2s;
}

.new-site-footer a:hover {
    color: #007bff; /* Accent blue hover color */
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- Dividers --- */
.footer-divider {
    border: none;
    height: 1px;
    background: #333333; 
    margin: 20px 0;
}

/* ============================================== */
/* 1. TOP BAR: Exact Image Replication */
/* ============================================== */
.footer-top-bar {
    display: flex;
    /* Spread the three major blocks (Social, Button, Newsletter) */
    justify-content: space-between;
    /* Align all top h4 titles and main containers to the top edge */
    align-items: flex-start; 
    flex-wrap: wrap;
    padding-bottom: 20px; /* Increased bottom padding for spacing */
}

/* 1a. Social Icons (Far Left) */
.footer-social-section h4 {
    margin-bottom: 10px; /* Slightly more space below "Follow Us" title */
}
.footer-social-section ul {
    display: flex;
    gap: 10px;
}
.footer-social-section i {
    font-size: 1.5em;
    color: #000000; /* Icons are black */
    background-color: #f5f5f5; /* Background is white/light */
    padding: 5px;
    border-radius: 4px; /* Square icons with slight border-radius */
}
/* Revert link color for social icon hover */
.footer-social-section a:hover i {
    background-color: #007bff; /* Blue hover background */
    color: #f5f5f5; /* White icon on hover */
}

/* 1b. Community Button (Middle) */
.footer-community-btn {
    /* Ensures the button aligns horizontally with the Social and Newsletter containers */
    display: flex;
    flex-direction: column;
}
.footer-community-btn h4 {
    margin-bottom: 10px; /* Aligns title height with other sections */
}
.btn-join-community {
    background-color: #007bff; /* Blue fill color */
    border: none; /* No border needed as it's a solid block */
    color: #f5f5f5 !important;
    padding: 10px 20px; /* Larger padding for a substantial button */
    border-radius: 4px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 1em; /* Standard button text size */
    text-transform: uppercase;
}
.btn-join-community i {
    font-size: 1.1em;
    color: #f5f5f5 !important;
}
.btn-join-community:hover {
    background-color: #0056b3; 
}

/* 1c. Newsletter Form (Far Right) */
.footer-newsletter-signup {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Right-aligns the title (H4) and the form */
}
.footer-newsletter-signup h4 {
    margin-bottom: 10px; /* Aligns title height with other sections */
    font-weight: 600;
    font-size: 1.1em;
}

.newsletter-form {
    display: flex;
    background-color: #f5f5f5; /* White background for the input field */
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #f5f5f5; /* Light border */
}
.newsletter-form input {
    padding: 10px 15px;
    border: none;
    background: transparent;
    color: #333333; /* Dark text in the white field */
    outline: none;
    min-width: 250px; /* Adjusted width to match image */
    font-size: 0.95em;
    /* Placeholder style */
    ::placeholder {
        color: #888888;
    }
}
.newsletter-submit {
    background-color: #f5f5f5; /* White button background */
    border: none;
    color: #000000; /* Black icon color */
    padding: 0 15px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.2s;
}
.newsletter-submit:hover {
    background-color: #eeeeee;
}


/* ============================================== */
/* 2. MAIN LINK GRID STYLING */
/* ============================================== */
.footer-main-grid {
    display: grid;
    /* Use one full column for the long horizontal lists */
    grid-template-columns: 1fr; 
    gap: 20px; /* Reduced gap between sections */
}

.grid-col-full {
    grid-column: 1 / -1; 
}

/* Reduce top margin for link lists since the H4 is already spaced */
.footer-section ul {
    margin-top: -5px; 
}

/* --- 2a. Horizontal Link List (Company & Quick Links) --- */
.horizontal-link-list {
    display: flex;
    flex-wrap: wrap; 
    gap: 2px 0; /* Very tight vertical spacing */
    line-height: 1.2;
}

.horizontal-link-list li {
    display: inline-block; 
    padding-right: 12px;
}

/* Vertical pipe (|) separator */
.horizontal-link-list li::after {
    content: '|';
    color: #333333; 
    margin-left: 12px;
    font-size: 0.8em;
}

/* Remove separator from the last list item */
.horizontal-link-list li:last-child::after {
    content: none;
}
.horizontal-link-list a {
    color: #fff; /* Faded link color */
    font-size: 0.9em;
    white-space: nowrap;
}

/* --- 2b. Trending Links (Simple Horizontal Wrap) --- */
.trending-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 25px; /* Tighter vertical spacing */
}
.trending-list a {
    color: #fff;
    font-size: 0.9em;
}

/* ============================================== */
/* 3. LEGAL AREA */
/* ============================================== */
.footer-legal-area p {
    color: #aaaaaa; 
    font-size: 0.75em;
    margin-bottom: 10px;
}


/* ============================================== */
/* 4. BOTTOM BAR STYLING (Contact & DMCA) */
/* ============================================== */
.footer-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 10px;
    font-size: 0.8em;
    min-height: 50px; 
}

.footer-contact-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.footer-contact-links a {
    color: #007bff;
    margin-right: 15px;
    white-space: nowrap;
    font-size: 0.85em;
}
.copyright-year {
    color: #aaaaaa;
    margin-left: 15px;
    font-size: 0.85em;
}

.dmca-badge img {
    max-width: 110px;
    height: auto;
}


/* ============================================== */
/* RESPONSIVENESS (Media Queries) */
/* ============================================== */
/* Tablet */
@media (max-width: 992px) {
    /* Revert to 2-column grid for medium screens for Company/Quick Links */
    .company-links .horizontal-link-list, 
    .quick-links .horizontal-link-list {
        column-count: 2;
        /* Revert to stacking for better readability on tablets */
        display: block; 
    }
    .company-links li, .quick-links li {
        margin-bottom: 5px;
        display: list-item;
    }
    .company-links li::after, .quick-links li::after {
        content: none; /* Remove separators on smaller screens */
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Top bar stacks vertically and aligns left on mobile */
    .footer-top-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer-social-section, .footer-community-btn, .footer-newsletter-signup {
        width: 100%;
        margin-bottom: 15px;
    }
    .footer-community-btn h4, .footer-newsletter-signup h4 {
        align-self: flex-start;
    }
    .footer-newsletter-signup {
        align-items: flex-start; /* Title aligns left with form */
    }
    .newsletter-form {
        width: 100%;
    }
    .newsletter-form input {
        min-width: unset; 
        flex-grow: 1;
    }
    
    /* Ensure all link sections are standard stacked lists on mobile */
    .horizontal-link-list, .trending-list {
        display: block;
    }
    .horizontal-link-list li, .trending-list li {
        margin-bottom: 5px;
        padding-right: 0;
    }
    .horizontal-link-list li::after {
        content: none;
    }

    /* Bottom bar stacks vertically */
    .footer-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .copyright-year {
        margin-left: 0;
        margin-top: 10px;
    }
}