/* ==========================================================================
   SITE FOOTER  —  [sy_footer]
   Markup: inc/footer.php. Content: Customize > SY Sections > Footer.

   Two bands: a cream one with the logo, links, socials and copyright, and a
   solid contact strip beneath carrying the email and phone.
   ========================================================================== */

/*
 * Elementor's containers are boxed by default, which would leave the cream and
 * contact bands floating in the middle of the page. Breaking out to the full
 * viewport here means the footer looks right whatever the wrapper does, and
 * nobody has to hunt for a Content Width setting.
 */
.sy-footer {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    /*
     * Breathing room above the cream band.
     *
     * The footer is printed after the page closes, so it butts straight up
     * against whatever section ends the page — the client logo strip, in this
     * case, whose last row was touching the cream edge. The gap belongs here
     * rather than on that section, because every page ends differently and
     * only the footer is common to all of them.
     */
    margin-top: clamp(48px, 6vw, 96px);

    --sy-f-ink: #4a4438;
    --sy-f-link: #6b6456;
    --sy-f-cream: #f2efe9;
    --sy-f-bar: #6e6757;
    --sy-f-sans: 'Raleway', Helvetica, Arial, sans-serif;
}

/* --- Upper band ----------------------------------------------------------- */
.sy-footer-main {
    background: var(--sy-f-cream);
    padding: clamp(34px, 4vw, 52px) clamp(20px, 4vw, 64px);
}

/*
 * Logo, two link columns, socials, then the copyright pushed to the far right.
 * `auto` columns let each group take only what it needs; the 1fr on the
 * copyright absorbs everything left over, which is what right-aligns it without
 * a margin hack.
 */
.sy-footer-inner {
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto auto auto auto 1fr;
    align-items: start;
    gap: clamp(24px, 4vw, 76px);
}

.sy-footer-logo img {
    display: block;
    width: auto;
    height: clamp(44px, 4.4vw, 62px);
    object-fit: contain;
}

/* --- Link columns --------------------------------------------------------- */
.sy-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sy-footer-list li + li {
    margin-top: 10px;
}

.sy-footer-list a {
    font-family: var(--sy-f-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--sy-f-link);
    text-decoration: none;
    transition: color 0.35s ease;
}

.sy-footer-list a:hover,
.sy-footer-list a:focus-visible {
    color: var(--sy-f-ink);
}

/* --- Socials -------------------------------------------------------------- */
.sy-footer-social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 18px;
}

.sy-footer-social-link {
    display: block;
    color: var(--sy-f-link);
    transition: color 0.35s ease, transform 0.35s ease;
}

.sy-footer-social-link svg {
    display: block;
    width: 18px;
    height: 18px;
}

.sy-footer-social-link:hover,
.sy-footer-social-link:focus-visible {
    color: var(--sy-f-ink);
    transform: translateY(-2px);
}

/* --- Copyright ------------------------------------------------------------ */
.sy-footer-copy {
    margin: 0;
    justify-self: end;
    text-align: right;
    font-family: var(--sy-f-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--sy-f-link);
    line-height: 1.7;
}

/* --- Lower contact strip -------------------------------------------------- */
.sy-footer-bar {
    background: var(--sy-f-bar);
    padding: 14px clamp(20px, 4vw, 64px);
}

.sy-footer-bar-inner {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.sy-footer-bar-item {
    font-family: var(--sy-f-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.35s ease;
}

.sy-footer-bar-item:hover,
.sy-footer-bar-item:focus-visible {
    color: #ffffff;
    opacity: 0.75;
}

.sy-footer-bar-label {
    font-weight: 400;
}

/* --- Responsive ------------------------------------------------------------
   The five-column row has nowhere to go on a narrow screen, so it becomes a
   stack: logo, then the two link columns side by side, then socials, then the
   copyright. */
@media (max-width: 1100px) {
    .sy-footer-inner {
        grid-template-columns: auto auto 1fr;
        gap: clamp(22px, 3vw, 44px);
    }

    .sy-footer-social {
        grid-column: 1 / -1;
    }

    .sy-footer-copy {
        grid-column: 1 / -1;
        justify-self: start;
        text-align: left;
    }
}

@media (max-width: 700px) {
    .sy-footer {
        margin-top: 40px;
    }

    .sy-footer-main {
        padding: 40px 22px 34px;
    }

    .sy-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 26px;
    }

    .sy-footer-logo {
        grid-column: 1 / -1;
    }

    .sy-footer-logo img {
        height: 52px;
    }

    /* Stacked, the strip's two halves would sit on one cramped line. */
    .sy-footer-bar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .sy-footer-bar-item {
        font-size: 11px;
        letter-spacing: 0.4px;
    }
}

/*
 * Contain the 100vw bleed. On a page with a vertical scrollbar 100vw is wider
 * than the usable width, which would otherwise give the whole page a
 * horizontal scrollbar; `clip` contains it without creating a scroll container.
 */
.sy-site-footer,
#site-footer,
.site-footer {
    overflow-x: clip;
}