/*
 *  FILE: footer-style.css
 *  DESCRIPTION:
 *  - Styles the footer section, including links, forms, and branding.
 *  - Uses a mobile-first approach.
 */

/* =================================================================
   MOBILE FOOTER (Default)
   ================================================================= */

/* --- Layout --- */
footer,
.footer-content,
.footer-item,
.footer-fine-print,
.footer-fine-print-links {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

footer {
    padding: 2.6rem;
}

footer a,
footer h1,
footer h4,
footer p {
    color: black;
}

.footer-item {
    gap: 0.2rem;
}

.footer-fine-print-links {
    gap: 0.7rem;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
}

/* --- Forms --- */

/* Newsletter Sign-up Form */
.newsletter-form {
    display: flex;
    margin-top: 0.5rem;
}

.newsletter-form input[type="email"] {
    flex: 1; /* Allows input to grow and fill space */
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    font-size: 1em;
    background-color: #eee;
    border: none;
}

.newsletter-form button {
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: white;
    background-color: #0000ff;
    border: none;
    cursor: pointer;
}

.newsletter-form button:hover {
    background-color: #0056b3; /* A simple hover state */
}

/* Language/Location Selectors */
.language-location-selectors {
    display: flex;
    gap: 4px;
    margin-top: 0.5rem;
}

.custom-select {
    position: relative; /* Needed for positioning the arrow */
}

.custom-select select {
    width: 100%;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    font-size: 1em;
    font-weight: 500;
    background-color: #eee;
    border: none;
    cursor: pointer;
    appearance: none; /* Removes default browser arrow */
}

/* Custom dropdown arrow */
.custom-select::after {
    content: "▼";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 0.5rem;
    color: #000;
    pointer-events: none; /* Allows clicks to pass through to the select */
}

/* Widths for the two selectors */
.custom-select.short {
    flex: 0 0 110px;
}

.custom-select.long {
    flex: 0 0 160px;
}

/* --- Misc --- */

/* Arrow after footer links */
.footer-link::after {
    content: " ›";
    color: inherit;
}

/* Footer logo size */
.footer-logo {
    width: 30px;
}

/* =================================================================
   DESKTOP FOOTER (Large Screens)
   ================================================================= */
@media screen and (min-width: 1000px) {
    footer {
        padding: 6rem 11%;
    }

    footer > h1 {
        font-size: 4rem;
    }

    .footer-content {
        display: grid;
        grid-template-columns: 11rem 15rem auto;
        gap: 10%;
        padding-bottom: 1rem;
    }

    /* Reordering footer items for the desktop grid layout */
    .footer-item:nth-child(1) { order: 3; } /* Newsletter */
    .footer-item:nth-child(2) { order: 1; } /* Register Links */
    .footer-item:nth-child(3) { order: 2; } /* Education */
    .footer-item:nth-child(4) { order: 4; } /* Community */
    .footer-item:nth-child(5) { order: 5; } /* Language */

    .footer-fine-print {
        flex-direction: row;
        justify-content: space-between;
    }

    .footer-fine-print-links {
        flex-direction: row;
        align-items: center;
    }
}