/**
 * Footer (GP "Footer" element) and the socket row below it.
 *
 * Expected structure:
 *   .site-footer .footer-container  > .color-section …
 *   .socket-wrapper > .socket-inner-container > .gb-grid-column (copyright, links, .back-link)
 *   .social-icons                   social icons block (css/blocks/social-icons.css)
 */

.site-footer.grid-container {
    max-width: 100%;
}

/* Mobile: tighter top padding; the element sets no-padding-bottom itself. */
.gb-container.site-footer.color-section {
    padding-top: 50px;
}

.site-footer h3 {
    margin-bottom: 5px;
}

.site-footer nav {
    margin-bottom: 0;
    align-items: flex-start;
}

/* Mobile 2x2 grid: logo + contact on the first row, the two link lists on
   the second. Order is reset from 768px up where all four sit in one row. */
.site-footer .footer-links {
    order: 1;
}

/* Link lists: vertical, left aligned, compact rows */
.site-footer .wp-block-navigation__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.site-footer .wp-block-navigation-item__content {
    padding: 2px 0;
}

.site-footer .site-logo img,
.site-footer .gb-image img {
    max-height: 60px;
    width: auto;
}

.site-footer .hr-wrapper.alignfull.hr-wrapper--bold {
    padding-top: 0;
}

/* Socket: centered, stacked small print on mobile; one row from tablet up
   with the copyright on the left and the privacy link on the right. */
.socket-wrapper {
    padding: 20px 0;
    align-items: center;
    text-align: center;
}

.socket-wrapper > .gb-container {
    text-align: center;
}

.socket-wrapper a {
    padding: 0;
    font-size: 0.8rem;
    text-decoration: none;
}

.socket-wrapper p,
.socket-block p,
.socket-block a {
    margin: 0;
    font-size: 0.8rem;
}

.socket-wrapper .socket-inner-container .gb-grid-column {
    width: auto;
}

.socket-wrapper .back-link {
    font-size: 10px;
    padding: 0;
}

.socket-wrapper .back-link-container a:hover {
    color: var(--link-hover-clr);
}

/* Social icons: inverted section colors so they stand out on a dark footer */
.site-footer .social-icons {
    --social-icons-bg: var(--font-clr);
    --social-icons-clr: var(--bg-clr);
    --social-icons-hover-bg: var(--link-clr);
    --social-icons-hover-clr: var(--bg-clr);
}

@media only screen and (min-width: 768px) {
    .gb-container.site-footer.color-section {
        padding-top: var(--section-padding-y);
    }

    .site-footer .footer-links {
        order: 0;
    }

    .site-footer h3 {
        margin-bottom: 10px;
    }

    .socket-wrapper a {
        padding: 10px;
    }

    .site-footer nav {
        align-items: flex-start;
    }

    .site-footer .wp-block-navigation__container {
        align-items: flex-start;
    }

    .socket-inner-container > .socket-copyright-wrapper {
        justify-content: flex-start;
    }

    .socket-wrapper .socket-inner-container {
        justify-content: space-between;
    }

    .socket-wrapper {
        text-align: left;
    }

    .socket-wrapper > .gb-container:first-child {
        text-align: left;
    }

    .socket-wrapper > .gb-container:last-child {
        text-align: right;
    }
}