/* ==========================================================================
   HAUS OF LESS
   Footer
   Version: 4.1
   Last Updated: August 2026

   Premium editorial footer
   - Correct light footer logo for dark background
   ========================================================================== */


/* ==========================================================
   Footer
========================================================== */

.site-footer{

    position:relative;

    background:var(--color-charcoal-dark);

    color:rgba(255,255,255,.88);

    padding:7rem 0 2.5rem;

    border-top:1px solid rgba(255,255,255,.08);

    overflow:hidden;

}


/* ==========================================================
   Footer Layout
========================================================== */

.footer{

    position:relative;

    display:grid;

    grid-template-columns:2.5fr 1fr 1fr 1fr;

    gap:5rem;

    align-items:start;

    padding-bottom:4rem;

}


.footer::before{

    content:"";

    position:absolute;

    top:-2.5rem;

    left:0;

    width:90px;

    height:2px;

    background:rgba(176,138,78,.85);

}


/* ==========================================================
   Brand
========================================================== */

.footer__brand{

    max-width:430px;

}


.footer__logo{

    display:inline-flex;

    align-items:flex-start;

    text-decoration:none;

    margin-bottom:2rem;

}

.footer__logo .logo{

    display:block;

    width:195px;
    max-width:100%;
    height:auto;
    max-height:62px;
    object-fit:contain;

}


.footer__logo .logo-top{

    color:#ffffff;

}


.footer__logo .logo-bottom{

    color:rgba(255,255,255,.72);

}


.footer__description{

    margin:0;

    color:rgba(255,255,255,.72);

    font-size:1.05rem;

    line-height:1.95;

}


/* ==========================================================
   Titles
========================================================== */

.footer-title{

    margin:0 0 1.5rem;

    color:#ffffff;

    font-size:1.2rem;

    font-weight:600;

    letter-spacing:.03em;

}


/* ==========================================================
   Navigation
========================================================== */

.footer ul{

    margin:0;

    padding:0;

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:.85rem;

}


.footer a{

    display:inline-flex;

    align-items:center;

    color:rgba(255,255,255,.78);

    text-decoration:none;

    transition:

        color var(--transition),

        transform var(--transition),

        opacity var(--transition);

}


.footer a:hover{

    color:var(--color-brass);

    transform:translateX(4px);

}


.footer a:focus-visible{

    outline:2px solid var(--color-brass);

    outline-offset:5px;

}


/* ==========================================================
   Service Area
========================================================== */

.footer__service-area p{

    margin:0;

    color:rgba(255,255,255,.70);

    line-height:1.9;

}


/* ==========================================================
   Contact
========================================================== */

.footer__contact{

    display:flex;

    flex-direction:column;

    gap:1rem;

}


.footer__contact p{

    margin:0;

    color:rgba(255,255,255,.70);

    line-height:1.8;

}


/* ==========================================================
   Social
========================================================== */

.footer__social-links{

    display:flex;

    align-items:center;

    gap:1rem;

    margin-top:1.5rem;

}


.social-link{

    display:flex;

    align-items:center;

    justify-content:center;

    width:50px;

    height:50px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    transition:

        background-color var(--transition),

        transform var(--transition),

        box-shadow var(--transition);

}


.social-link:hover{

    background:var(--color-brass);

    transform:translateY(-4px);

    box-shadow:0 14px 30px rgba(0,0,0,.18);

}


.social-icon{

    width:18px;

    height:18px;

    display:block;

    filter:brightness(0) invert(1);

}

/* ==========================================================
   Bottom
========================================================== */

.footer__bottom{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:2rem;

    margin-top:3rem;

    padding-top:2.5rem;

    border-top:1px solid rgba(255,255,255,.10);

}


.footer__bottom p{

    margin:0;

    color:rgba(255,255,255,.55);

    font-size:.95rem;

    line-height:1.6;

}


.footer__bottom a{

    color:rgba(255,255,255,.70);

}


.footer__bottom a:hover{

    color:var(--color-brass);

}


/* ==========================================================
   Footer Utilities
========================================================== */

.footer__legal{

    display:flex;

    align-items:center;

    gap:1.5rem;

    flex-wrap:wrap;

}


.footer__legal a{

    font-size:.95rem;

}


/* ==========================================================
   Tablet
========================================================== */

@media (max-width:1100px){

    .footer{

        grid-template-columns:1.8fr 1fr 1fr;

        gap:4rem;

    }

}


@media (max-width:992px){

    .site-footer{

        padding:6rem 0 2.5rem;

    }

    .footer{

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

        gap:3.5rem;

    }

    .footer::before{

        width:70px;

    }

}


/* ==========================================================
   Mobile
========================================================== */

@media (max-width:768px){

    .site-footer{

        padding:5rem 0 2rem;

    }

    .footer{

        grid-template-columns:1fr;

        gap:3rem;

        text-align:center;

        padding-bottom:3rem;

    }

    .footer::before{

        left:50%;

        transform:translateX(-50%);

    }

    .footer__brand{

        max-width:100%;

    }

    .footer__description{

        margin-inline:auto;

    }

    .footer ul{

        align-items:center;

    }

    .footer__contact{

        align-items:center;

    }

    .footer__service-area{

        max-width:420px;

        margin-inline:auto;

    }

    .footer__social-links{

        justify-content:center;

    }

    .footer a:hover{

        transform:none;

    }

    .footer__bottom{

        flex-direction:column;

        justify-content:center;

        text-align:center;

        gap:1rem;

    }

    .footer__legal{

        justify-content:center;

    }

}


/* ==========================================================
   Small Mobile
========================================================== */

@media (max-width:480px){

    .site-footer{

        padding:4.5rem 0 2rem;

    }

    .footer{

        gap:2.5rem;

    }

    .footer-title{

        font-size:1.1rem;

    }

    .footer__description{

        font-size:1rem;

    }

    .social-link{

        width:46px;

        height:46px;

    }

}


/* ==========================================================
   Reduced Motion
========================================================== */

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

    .footer a,

    .social-link{

        transition:none;

    }

    .footer a:hover,

    .social-link:hover{

        transform:none;

    }

}

/* Legal links use the same brass interaction language as the rest of the site. */
.footer__legal a{
    transition:color var(--transition), border-color var(--transition);
}
.footer__legal a:hover{
    color:var(--color-brass);
}