/*
 * WePlay Footer Styles
 * Uses foundation.css variables and patterns
 *
 * @package WePlay
 */

/* =============================================
   FOOTER BASE
   ============================================= */

.site-footer {
    background: var(--base);
    color: rgba(255, 255, 255, 0.7);
    padding-block: 0;
    padding-inline: 0;
}

/* =============================================
   1. FOOTER TOP
   ============================================= */

.site-footer__top {
    padding: 0;
    border-top: var(--border);
}

/* Main 2-column grid: left | right */
.site-footer__grid {
    display: grid;
    gap: var(--space-l);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .site-footer__grid {
        grid-template-columns: 50% 1fr;
    }
}

/* 1.1 Left column: Nav + Member */
.site-footer__left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media (min-width: 768px) {
    .site-footer__left {
        border-right: var(--border);
    }
}

/* Nav wrapper */
.site-footer__nav-wrap {
    display: flex;
    padding-block: var(--section-space-s);
    border-bottom: var(--border);
    flex: 1;
    padding-left: max(var(--gutter), calc((100vw - var(--content-width)) / 2));
    padding-right: var(--gutter);
    align-items: center;
}

/* Nav links */
.site-footer__nav {
    list-style: none;
    margin: 0;
    padding: 0;
    column-gap: var(--space-l);
    row-gap: var(--space-xs);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.site-footer__nav a {
    color: var(--text-light);
    text-decoration: none;
    font-size: var(--text-s);
    transition: color var(--transition);
    font-weight: 600;
}

.site-footer__nav a:hover {
    color: var(--primary);
}

/* Member */
.site-footer__member {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding-block: var(--section-space-s);
    flex: 1;
    padding-left: max(var(--gutter), calc((100vw - var(--content-width)) / 2));
    padding-right: var(--gutter);
}

.site-footer__member-logo {
    height: 40px;
    width: auto;
    flex-shrink: 0;
}

.site-footer__member-tagline {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.8);
    max-width: 24rem;
}

/* 1.2 Right area: 2 columns */
.site-footer__right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-l);
    padding-right: max(var(--gutter), calc((100vw - var(--content-width)) / 2));
}

@media (max-width: 767px) {
    .site-footer__grid {
        gap: 0;
    }

    .site-footer__right {
        grid-template-columns: 1fr;
        padding-inline: var(--gutter);
        border-top: var(--border);
    }
}

/* Column content blocks (stacked vertically) */
.site-footer__column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.site-footer__column-block {
    display: flex;
    padding-block: var(--section-space-s);
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
}

.site-footer__column-block--cta,
.site-footer__column-block--no-pb {
    padding-bottom: 0;
}

/* Footer outline button */
.site-footer .btn.btn--outline {
    color: var(--bg-light);
    border-color: var(--bg-light);
}

.site-footer .btn.btn--outline:hover {
    color: var(--base);
    background: var(--bg-light);
}

/* Column headings */
.site-footer__heading {
    font-size: var(--text-s);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--white, #ffffff);
    margin: 0 0 var(--space-s);
}

/* Locations list */
.site-footer__locations {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.8rem;
    font-size: var(--text-xs);
}

/* Contact links */
.site-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.site-footer__contact a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: var(--text-xs);
    transition: color var(--transition);
}

.site-footer__contact a:hover {
    color: var(--primary);
}

/* Newsletter label */
.site-footer__newsletter-label {
    font-size: var(--text-m);
    font-weight: 600;
    color: var(--white, #ffffff);
}

/* =============================================
   2. FOOTER MIDDLE (Logo)
   ============================================= */

.site-footer__middle {
    border-top: var(--border);
    padding: var(--space-l) 0;
    padding-inline: max(var(--gutter), calc((100vw - var(--content-width)) / 2));
}

.site-footer__middle-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-l);
}

.site-footer__logo img {
    display: block;
    height: 48px;
    width: auto;
    max-width: 100%;
}

.site-footer__partners {
    display: flex;
    align-items: center;
    gap: var(--space-m);
}

.site-footer__partner-logo {
    display: block;
    height: 78px;
    width: auto;
    object-fit: contain;
    opacity: 0.7;
    transition: opacity var(--transition);
}

.site-footer__partner-logo:hover {
    opacity: 1;
}

/* =============================================
   3. FOOTER BOTTOM
   ============================================= */

.site-footer__bottom {
    border-top: none;
    padding-top: 0;
    padding-bottom: var(--space-m);
}

.site-footer__bottom-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    align-items: center;
    text-align: center;
}

@media (min-width: 1180px) {
    .site-footer__bottom-inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.site-footer__copyright {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    white-space: normal;
}

/* Legal links */
.site-footer__legal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    justify-content: center;
}

.site-footer__legal a {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color var(--transition);
}

.site-footer__legal a:hover {
    color: var(--primary);
}

/* Social icons */
.site-footer__social {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.site-footer__social a {
    color: rgba(255, 255, 255, 0.4);
    transition: color var(--transition);
    display: inline-flex;
}

.site-footer__social a:hover {
    color: var(--primary);
}

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

@media (max-width: 1180px) {
    .site-footer__right {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .site-footer__column {
        padding-top: var(--space-l);
        gap: var(--space-m);
    }

    .site-footer__column:last-child {
        padding-bottom: var(--space-l);
    }

    .site-footer__column-block {
        padding-block: 0;
    }

    .site-footer__middle-inner {
        flex-direction: column;
        align-items: center;
        gap: var(--space-m);
    }

    .site-footer__logo {
        display: flex;
        justify-content: center;
    }

    .site-footer__partners {
        justify-content: center;
        flex-wrap: wrap;
    }

    .site-footer__member {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .site-footer__member {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }
}