/* Footer Variables */
:root {
    --footer-bg: #251342;
    --footer-text: #FFFFFF;
    --footer-btn: #3AAFA9;
    --footer-btn-text: #FFFFFF;
    --input-bg: #FFFFFF;
    --input-text: #333333;
}

footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    padding: 80px 0 40px;
    width: 100%;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
    margin-bottom: 80px;
}

/* Newsletter embed should align flush-left under its heading */
.footer-col.newsletter .ml-embedded {
    margin: 0;
    padding: 0;
}

/* Columns */
.footer-col.newsletter {
    width: 35%;
}

.footer-col.connect {
    width: 25%;
}

.footer-col.explore {
    width: 25%;
}

/* Newsletter column: always left-align heading + embedded form */
.footer-col.newsletter {
    text-align: left;
}

.footer-col.newsletter h2.footer-heading {
    text-align: left;
}

.footer-col.newsletter .ml-embedded {
    text-align: left;
}

/* If MailerLite centers its embed container/iframe, force flush-left */
.footer-col.newsletter .ml-embedded>* {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.footer-col.newsletter .ml-embedded iframe {
    display: block;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* If the embed still appears visually centered, nudge the entire block left on desktop/tablet */
@media (min-width: 600px) {
    .footer-col.newsletter .ml-embedded {
        margin-left: -20px;
        width: calc(100% + 20px);
    }
}

/* Right margin breathing room simulated by flex spacing or explicit margin */
/* The spec says "Right margin: 15% breathing room" for the layout. 
   Since we have 35 + 25 + 25 = 85%, there is 15% left. 
   If we use flex: space-between, it distributes automatically. 
   Or we can use explicit widths and a spacer/margin.
*/

.footer-col h2.footer-heading {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 24px;
    font-weight: 600;
}

/* Newsletter Form */
.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.newsletter-form input {
    background: var(--input-bg);
    color: var(--input-text);
    border: none;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 16px;
    width: 100%;
    font-family: inherit;
}

.newsletter-form button {
    background: var(--footer-btn);
    color: var(--footer-btn-text);
    border: none;
    border-radius: 8px;
    /* Rounded per spec, but nav button was pill. "rounded" usually means small radius or pill. Assuming 8px or pill. Spec says "rounded". Let's go with 8px to match inputs, or pill? Nav button is pill. Let's use 8px for form consistency. */
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s ease;
    align-self: flex-start;
}

.newsletter-form button:hover {
    filter: brightness(0.9);
}

.footer-col.newsletter .newsletter {
    /* Match other footer columns: rely on the shared h2 margin-bottom for spacing */
    margin: 0;
}

/* Links */
.connect-links,
.explore-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.connect-links a,
.explore-links a {
    color: var(--footer-text);
    text-decoration: none;
    font-size: 16px;
    transition: opacity 0.2s ease;
}

.connect-links a:hover,
.explore-links a:hover {
    opacity: 0.8;
}

/* Footer Bottom */
.footer-bottom {
    border-top: none;
    padding-top: 40px;
    text-align: center;
}

.copyright {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin: 0;
}

/* Mobile Responsive (Tablet & Mobile) */
@media (max-width: 768px) {
    footer {
        padding: 60px 0 40px;
    }

    .footer-content {
        padding: 0 20px;
    }

    /* Two-column layout: Newsletter on top, Connect/Explore side-by-side */
    .footer-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        align-items: start;
        justify-items: start;
        margin-bottom: 48px;
    }

    /* Newsletter spans full width above the two columns */
    .footer-col.newsletter {
        grid-column: 1 / -1;
        width: 100%;
        text-align: left;
    }

    .footer-col.connect,
    .footer-col.explore {
        width: 100%;
        text-align: left;
    }

    /* Ensure headings are left-aligned */
    .footer-col.newsletter h2.footer-heading,
    .footer-col.connect h2.footer-heading,
    .footer-col.explore h2.footer-heading {
        text-align: left;
    }
    
    .footer-col h2.footer-heading {
        text-align: left;
    }

    /* Newsletter: keep everything left-aligned (heading + embedded form) */
    .footer-col.newsletter .ml-embedded {
        margin-left: -20px;
        /* Use 100% to avoid overflow issues, relying on the negative margin to pull left */
        width: 100%; 
    }

    .newsletter-form button {
        align-self: flex-start;
        width: auto;
    }
    
    .connect-links,
    .explore-links {
        align-items: flex-start;
    }
}

/* Small Mobile: adjust sizing */
@media (max-width: 599px) {
    .footer-col h2.footer-heading {
        font-size: 16px;
        margin-bottom: 16px;
    }

    .connect-links a,
    .explore-links a {
        font-size: 15px;
    }
}