/**
 * ChaCha Home
 * Global Footer v1.0 — FINAL CLEAN
 *
 * Responsive Strategy
 * Desktop : 1200px+      → 4 columns
 * Tablet  : 767–1199px   → 2 x 2
 * Mobile  : 0–766px      → 1 column
 */


/* ==========================================================
   01. FOOTER FOUNDATION
   ========================================================== */

#colophon.site-footer {
    background:
        var(--chacha-espresso, #201A17);

    color:
        rgba(255, 253, 252, 0.68);

    border-top:
        1px solid
        rgba(255, 255, 255, 0.08);
}


#colophon
.site-middle-footer-wrap {
    background:
        var(--chacha-espresso, #201A17);
}


#colophon
.site-footer-row-container-inner {
    background:
        transparent;
}


/* ==========================================================
   02. FOOTER BRAND
   ========================================================== */

#colophon
.chacha-footer-brand-title {
    margin:
        0 0 18px !important;

    padding:
        0 !important;

    font-family:
        var(
            --chacha-font-heading,
            "Cormorant Garamond",
            Georgia,
            serif
        );

    font-size:
        28px;

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        0.04em;

    color:
        #FFFDFC;
}


#colophon
.chacha-footer-brand-copy {
    max-width:
        290px;

    margin:
        0 !important;

    padding:
        0 !important;

    font-family:
        var(
            --chacha-font-body,
            "Inter",
            sans-serif
        );

    font-size:
        13px;

    font-weight:
        400;

    line-height:
        1.75;

    color:
        rgba(255, 253, 252, 0.62);
}


/* ==========================================================
   03. WIDGET TITLES
   ========================================================== */

#colophon
.widget-title,
#colophon
.footer-widget-area h2,
#colophon
.footer-widget-area h3 {
    margin:
        0 0 22px !important;

    padding:
        0 !important;

    font-family:
        var(
            --chacha-font-body,
            "Inter",
            sans-serif
        ) !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

    color:
        #FFFDFC !important;
}


/* Small champagne-brass title accent */

#colophon
.widget-title::after {
    content:
        "";

    display:
        block;

    width:
        26px;

    height:
        1px;

    margin-top:
        12px;

    background:
        var(--chacha-brass, #B08D57);
}


/* ==========================================================
   04. NAVIGATION LISTS
   ========================================================== */

#colophon
.widget_nav_menu ul,
#colophon
.footer-navigation ul {
    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


#colophon
.widget_nav_menu li {
    margin:
        0;

    padding:
        0;
}


#colophon
.widget_nav_menu li + li {
    margin-top:
        8px;
}


/* ==========================================================
   05. LINKS
   ========================================================== */

#colophon a {
    color:
        rgba(255, 253, 252, 0.72);

    text-decoration:
        none;

    transition:
        color 180ms ease,
        transform 180ms ease;
}


#colophon
.widget_nav_menu a {
    display:
        inline-block;

    font-family:
        var(
            --chacha-font-body,
            "Inter",
            sans-serif
        );

    font-size:
        12px;

    font-weight:
        400;

    line-height:
        1.55;
}


#colophon a:hover {
    color:
        var(--chacha-brass, #B08D57);
}


/* ==========================================================
   06. SOCIAL
   ========================================================== */

#colophon
.social-button {
    color:
        rgba(255, 253, 252, 0.76);
}


#colophon
.social-button:hover {
    color:
        var(--chacha-brass, #B08D57);
}


/* ==========================================================
   07. MAIN FOOTER — DESKTOP
   1200px+
   ========================================================== */

#colophon
.site-middle-footer-inner-wrap.site-footer-row.site-footer-row-columns-4 {
    display:
        grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    column-gap:
        32px !important;

    row-gap:
        0 !important;

    align-items:
        start !important;
}


/*
 * Kadence actual middle-footer sections:
 * site-footer-middle-section-1
 * site-footer-middle-section-2
 * site-footer-middle-section-3
 * site-footer-middle-section-4
 */

#colophon
.site-middle-footer-inner-wrap
> [class*="site-footer-middle-section-"] {
    min-width:
        0 !important;

    align-self:
        start !important;
}


/* ==========================================================
   08. MAIN FOOTER — TABLET
   767px – 1199px
   ========================================================== */

@media screen and (min-width: 767px) and (max-width: 1199px) {

    #colophon
    .site-middle-footer-inner-wrap.site-footer-row.site-footer-row-columns-4 {
        display:
            grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        column-gap:
            40px !important;

        row-gap:
            48px !important;

        align-items:
            start !important;
    }


    #colophon
    .site-middle-footer-inner-wrap
    > [class*="site-footer-middle-section-"] {
        display:
            block !important;

        width:
            auto !important;

        max-width:
            none !important;

        min-width:
            0 !important;

        margin:
            0 !important;

        grid-column:
            auto !important;

        grid-row:
            auto !important;

        flex:
            none !important;

        visibility:
            visible !important;

        opacity:
            1 !important;
    }


    #colophon
    .widget-title {
        margin-bottom:
            18px !important;
    }


    #colophon
    .chacha-footer-brand-copy {
        max-width:
            360px;
    }

}


/* ==========================================================
   09. MAIN FOOTER — MOBILE
   766px and below
   ========================================================== */

@media screen and (max-width: 766px) {

    #colophon
    .site-middle-footer-inner-wrap.site-footer-row.site-footer-row-columns-4 {
        display:
            block !important;

        width:
            100% !important;

        grid-template-columns:
            none !important;

        grid-template-rows:
            none !important;
    }


    #colophon
    .site-middle-footer-inner-wrap
    > [class*="site-footer-middle-section-"] {
        display:
            block !important;

        position:
            static !important;

        float:
            none !important;

        clear:
            both !important;

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        margin:
            0 0 34px !important;

        padding-left:
            0 !important;

        padding-right:
            0 !important;

        grid-column:
            auto !important;

        grid-row:
            auto !important;

        flex:
            none !important;

        visibility:
            visible !important;

        opacity:
            1 !important;
    }


    #colophon
    .site-middle-footer-inner-wrap
    > [class*="site-footer-middle-section-"]:last-child {
        margin-bottom:
            0 !important;
    }


    #colophon
    .chacha-footer-brand-title {
        font-size:
            26px;
    }


    #colophon
    .chacha-footer-brand-copy {
        max-width:
            100%;
    }


    #colophon
    .widget-title {
        margin-top:
            0 !important;

        margin-bottom:
            18px !important;
    }


    #colophon
    .widget_nav_menu li + li {
        margin-top:
            7px;
    }

}


/* ==========================================================
   10. BOTTOM FOOTER
   ========================================================== */

#colophon
.site-bottom-footer-wrap {
    background:
        #181411;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.10);
}


#colophon
.site-bottom-footer-wrap,
#colophon
.site-bottom-footer-wrap p,
#colophon
.site-bottom-footer-wrap a {
    font-family:
        var(
            --chacha-font-body,
            "Inter",
            sans-serif
        );

    font-size:
        11px;

    font-weight:
        400;

    line-height:
        1.6;

    color:
        rgba(255, 253, 252, 0.56);
}


#colophon
.site-bottom-footer-wrap a:hover {
    color:
        var(--chacha-brass, #B08D57);
}


/* ==========================================================
   11. BOTTOM FOOTER — TABLET
   767px – 1199px
   ========================================================== */

@media screen and (min-width: 767px) and (max-width: 1199px) {

    #colophon
    .site-bottom-footer-inner-wrap {
        align-items:
            center !important;
    }

}


/* ==========================================================
   12. BOTTOM FOOTER — MOBILE
   766px and below
   ========================================================== */

@media screen and (max-width: 766px) {

    #colophon
    .site-bottom-footer-inner-wrap.site-footer-row {
        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        gap:
            10px !important;

        text-align:
            center !important;
    }


    #colophon
    .site-bottom-footer-inner-wrap
    > .site-footer-section {
        width:
            100% !important;

        max-width:
            100% !important;

        text-align:
            center !important;
    }


    #colophon
    .site-bottom-footer-wrap {
        text-align:
            center;
    }

}


/* ==========================================================
   13. FOCUS / ACCESSIBILITY
   ========================================================== */

#colophon a:focus-visible {
    outline:
        2px solid
        var(--chacha-brass, #B08D57);

    outline-offset:
        4px;
}


/* ==========================================================
   14. REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    #colophon a {
        transition:
            none !important;
    }

}