/* ============================================
   Lightli.uk — Home Footer Styles
   ============================================ */

/* --- Contact / Footer ----------------------------------- */

/*
   Responsive policy: real footer
   - Desktop and larger landscape layouts use this footer.
   - Carousel shell layouts hide it and use .mobile-contact in home-carousel.css.
*/

#contact {
    /* Footer frame */
    --footer-scroll-margin-top: 1px;
    --footer-height: calc(100vh - var(--footer-scroll-margin-top));
    --footer-wrapper-height: var(--site-nav-height);

    /* Footer content */
    --footer-gap: 20px;
    --footer-padding-inline-end: clamp(24px, 5vw, 80px);
    --footer-text-size: clamp(12px, 0.85vw, 24px);
    --footer-mobile-text-size: clamp(11px, 3vw, 14px);

    scroll-margin-top: var(--footer-scroll-margin-top);
    display: flex;
    align-items: flex-end;
    height: var(--footer-height);
    width: 100%;

    @media (max-width: 1050px) and (orientation: portrait), (max-width: 960px) and (max-height: 500px) and (orientation: landscape), (min-width: 961px) and (max-width: 1366px) and (min-height: 600px) and (orientation: landscape) {
        display: none;
    }
}

.footer-wrapper {
    z-index: 6;
    height: var(--footer-wrapper-height);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--footer-gap);
    padding-right: var(--footer-padding-inline-end);
    box-sizing: border-box;
    background: transparent;
    transition: all 0.8s ease-in;
    border-bottom: 1px solid transparent;

    & p {
        margin: 0;
        font-size: var(--footer-text-size);
        font-weight: 400;
        font-family: "montserrat", sans-serif;
        text-decoration: none;
        color: #3a3a3a;

        @media (max-width: 1050px) and (orientation: portrait), (max-width: 960px) and (max-height: 500px) and (orientation: landscape), (min-width: 961px) and (max-width: 1366px) and (min-height: 600px) and (orientation: landscape) {
            font-size: var(--footer-mobile-text-size);
        }
    }

    & a {
        font-size: var(--footer-text-size);
        font-weight: 400;
        font-family: "montserrat", sans-serif;
        text-decoration: none;
        color: #3a3a3a;
        transition: all 0.2s ease;

        &::before {
            display: block;
            font-weight: 900;
            content: attr(data-text);
            overflow: hidden;
            visibility: hidden;
            height: 0;
        }

        &:hover {
            font-weight: 600;
        }

        &:active {
            font-weight: 900;
        }
    }

    @media (max-width: 1050px) and (orientation: portrait), (max-width: 960px) and (max-height: 500px) and (orientation: landscape), (min-width: 961px) and (max-width: 1366px) and (min-height: 600px) and (orientation: landscape) {
        justify-content: center;
        padding-right: 0;
    }
}