/**
 * Footer Styles
 * 
 * Two-column layout with nested grid structure
 * Left: Logo/Social/Contact | Right: (Quick Links/Resources/Newsletter) + Map below
 * 
 * @package WEEU830
 * @version 1.3.0
 */

/* ==========================================================================
   FOOTER MAIN SECTION
   ========================================================================== */

.site-footer {
    background-color: var(--color-dark-surface);
    color: var(--color-text-on-dark);
    padding: 60px 0 0;
    margin-top: 60px;
    font-family: var(--font-primary, 'Lexend', sans-serif);
    font-size: var(--font-size-base, 16px);
    line-height: var(--line-height-base, 1.6);
}

.site-footer * {
    font-family: inherit;
}

/* Font Awesome Icons - Override font inheritance */
.site-footer i,
.site-footer .fa,
.site-footer .fab,
.site-footer .fas,
.site-footer .far,
.site-footer .fal {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
    font-style: normal;
}

.footer-container {
    max-width: var(--container-width, 1400px);
    margin: 0 auto;
    padding: 0 var(--container-padding, 20px);
}

/* ==========================================================================
   MAIN FOOTER GRID - 2 COLUMNS
   ========================================================================== */

/* Flat ordered grid: the four columns render in the order set on
   Footer Settings → Layout (drag to rearrange). */
.footer-main {
    display: grid;
    /* Sized so the five columns — logo, address, phone/email, quick links,
       resources — sit on one row at desktop widths. At a 230px minimum only
       four fitted and the fifth wrapped, which made the footer taller rather
       than shorter. auto-fit still drops to fewer columns as the viewport
       narrows. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

/* ==========================================================================
   LEFT COLUMN - Logo, Social & Contact Info
   ========================================================================== */

.footer-left-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Children size to their content rather than stretching to the column,
       which is what let the social row run wider than the logo. */
    align-items: flex-start;
}

/* One width shared by the logo and the social row beneath it, so the two
   sit on the same centre axis instead of the icons drifting right. */
.footer-left-column {
    /* Capped at the column's own width so a narrower grid track shrinks the
       logo and the icon row together rather than letting them overflow. */
    --footer-brand-width: min(220px, 100%);
}

.footer-logo {
    max-width: var(--footer-brand-width);
}

.footer-logo img {
    width: 100%;
    height: auto;
    display: block;
}

.footer-site-title {
    margin: 0;
    font-family: var(--font-heading, 'Lexend', sans-serif);
    font-size: var(--font-size-h3, 28px);
    font-weight: var(--font-weight-heading, 700);
    line-height: var(--line-height-heading, 1.3);
}

.footer-site-title a {
    color: var(--color-text-on-dark);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer-site-title a:hover {
    opacity: 0.8;
}

/* Social Icons */
.footer-social {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* In the brand column the icons are centred on the logo's width, so the two
   share a centre axis instead of the row trailing off to the right.
   Six icons at the default 40px need 290px against a 220px logo, which
   forced an uneven 4+2 wrap — sized to 30px with a 7px gap they come to
   215px and sit on one row inside the logo's width. The bottom-bar
   position keeps the larger icons and is unaffected. */
.footer-left-column .footer-social {
    width: var(--footer-brand-width);
    justify-content: center;
    gap: 7px;
}

.footer-left-column .footer-social a {
    width: 30px;
    height: 30px;
}

.footer-left-column .footer-social i {
    font-size: var(--font-size-sm, 14px);
}

.footer-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--color-text-on-dark);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-social a:hover {
    background: var(--color-primary, #F80000);
    color: var(--color-on-primary);
    transform: translateY(-3px);
}

.footer-social i {
    font-size: var(--font-size-lg);
}

/* Contact Info */
.footer-contact-info {
    margin-top: 10px;
    font-size: calc(var(--font-size-base, 16px) * 0.875);
    line-height: var(--line-height-base, 1.6);
    color: rgba(255, 255, 255, 0.9);
}

.footer-contact-info p {
    margin: 10px 0;
}

.footer-contact-info strong {
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.7);
    font-size: calc(var(--font-size-base, 16px) * 0.75);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* The address is what people scan the footer for, so it is set larger than the
   rest of the contact detail. Scoped to its own column, so the phone and email
   beside it keep the compact size.

   The column cannot grow from this: every grid track is minmax(180px, 1fr), so
   the tracks stay equal to each other whatever the content. The clamp only
   guards the text itself against overflowing the narrowest 180px track. The
   ADDRESS label is left alone — it has its own font-size and shares a line
   height with PHONE, so the two columns' labels stay level. */
.footer-column-address .footer-contact-info {
    font-size: clamp(15px, calc(var(--font-size-base, 16px) * 1.125), 18px);
}

.footer-column-address .footer-contact-info p {
    overflow-wrap: break-word;
}

.footer-contact-info a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact-info a:hover {
    color: var(--color-primary, #F80000);
}

/* ==========================================================================
   FOOTER COLUMNS
   ========================================================================== */

.footer-column h3 {
    font-family: var(--font-heading, 'Lexend', sans-serif);
    font-size: calc(var(--font-size-base, 16px) * 1.125);
    font-weight: var(--font-weight-heading, 700);
    line-height: var(--line-height-heading, 1.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 15px 0;
    color: var(--color-text-on-dark);
}

/* Stands in for the Address heading when contact labels are switched off, so
   the address still sits level with the phone details beside it. One empty
   line box at the exact metrics of .footer-column h3. */
.footer-heading-spacer {
    /* An explicit line box rather than a generated non-breaking space:
       the escape form is easy to corrupt and renders as stray text if
       it is. Height matches one line of .footer-column h3. */
    height: calc(var(--font-size-base, 16px) * 1.125 * var(--line-height-heading, 1.3));
    margin: 0 0 15px 0;
}

/* Once the columns stack there is nothing to line up with, and the blank line
   would just read as a gap. */
@media (max-width: 767px) {
    .footer-heading-spacer {
        display: none;
    }
}

/* Menu Lists */
.footer-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu-list li {
    margin: 0 0 8px 0;
    padding: 0;
}

.footer-menu-list a {
    display: inline-block;
    font-size: calc(var(--font-size-base, 16px) * 0.875);
    font-weight: var(--font-weight-body, 400);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: all 0.3s ease;
    line-height: 1.6;
}

.footer-menu-list a:hover {
    color: var(--color-primary, #F80000);
    padding-left: 4px;
}

/* Menu headings in the footer lists: a small caps label over its group. */
.footer-menu-list .menu-item-heading {
    margin-top: 14px;
}

.footer-menu-list .menu-item-heading:first-child {
    margin-top: 0;
}

.footer-menu-list .menu-heading-label {
    display: inline-block;
    font-size: calc(var(--font-size-base, 16px) * 0.75);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
}

/* ==========================================================================
   NEWSLETTER - Compact Version
   ========================================================================== */

.newsletter-description {
    font-size: calc(var(--font-size-base, 16px) * 0.8125);
    margin: 0 0 12px 0;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}

.newsletter-form {
    margin-bottom: 0;
}

.newsletter-form-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.newsletter-form input[type="email"] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-on-dark);
    border-radius: 4px;
    font-family: var(--font-primary, 'Lexend', sans-serif);
    font-size: calc(var(--font-size-base, 16px) * 0.875);
    transition: all 0.3s ease;
}

.newsletter-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--color-primary, #F80000);
    background: rgba(255, 255, 255, 0.12);
}

.newsletter-form button {
    width: 100%;
    padding: 10px 20px;
    background: var(--color-primary, #F80000);
    color: var(--color-on-primary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-primary, 'Lexend', sans-serif);
    font-size: calc(var(--font-size-base, 16px) * 0.875);
    font-weight: 600;
    transition: all 0.3s ease;
}

.newsletter-form button:hover {
    background: var(--color-primary-hover, #dc0000);
    transform: translateY(-2px);
}

.newsletter-form button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Newsletter Terms */
.newsletter-terms {
    font-size: calc(var(--font-size-base, 16px) * 0.6875);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
    margin-top: 10px;
}

.newsletter-terms label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}

.newsletter-terms input[type="checkbox"] {
    margin-top: 2px;
    cursor: pointer;
    flex-shrink: 0;
}

.newsletter-terms span {
    flex: 1;
}

/* Newsletter Messages */
#newsletter-message {
    margin-top: 10px;
    padding: 10px;
    border-radius: 4px;
    font-size: calc(var(--font-size-base, 16px) * 0.8125);
    display: none;
}

#newsletter-message.success {
    background: rgba(39, 174, 96, 0.2);
    border: 1px solid rgba(39, 174, 96, 0.4);
    color: #2ecc71;
}

#newsletter-message.error {
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid rgba(220, 53, 69, 0.4);
    color: #ff6b6b;
}

/* ==========================================================================
   MAP - Full Width Under Content Grid
   ========================================================================== */

.footer-map {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-map-row {
    margin-bottom: 40px;
}

/* Social icons centered above the bottom bar (Layout tab: 'bottom') */
.footer-social-bottom-wrap {
    display: flex;
    justify-content: center;
    padding: 4px 0 24px;
}

.footer-social.footer-social-bottom {
    justify-content: center;
}

.footer-map iframe {
    width: 100%;
    height: 300px;
    border: none;
    display: block;
}

/* ==========================================================================
   FOOTER BOTTOM
   ========================================================================== */

.footer-bottom {
    padding: 25px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-copyright {
    font-size: calc(var(--font-size-base, 16px) * 0.875);
    color: rgba(255, 255, 255, 0.7);
}

.footer-legal-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-legal-links a {
    font-size: calc(var(--font-size-base, 16px) * 0.875);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-legal-links a:hover {
    color: var(--color-text-on-dark);
}

/* ==========================================================================
   RESPONSIVE STYLES
   ========================================================================== */

/* Large Tablet */
@media (max-width: 1024px) {
    .footer-main {
        gap: 30px;
    }
}

/* Tablet */
@media (max-width: 768px) {
    .site-footer {
        padding: 40px 0 0;
        margin-top: 40px;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .footer-map iframe {
        height: 280px;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        padding: 20px 0;
    }
    
    .footer-legal-links {
        justify-content: center;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .footer-social a {
        width: 36px;
        height: 36px;
    }
    
    .footer-social i {
        font-size: var(--font-size-base);
    }
    
    .footer-map iframe {
        height: 250px;
    }
    
    .footer-legal-links {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
}