/* ─────────────────────────────────────────
   PRIMA LIVING — Footer
   File:   ~/Files/templates/main/css/footer.css
   Design: Figma HMyU0lQofRMpFSUSwNAn0P  node 2436:1932
   ───────────────────────────────────────── */

/* ══════════════════════════════════════════
   FOOTER  (dark forest theme)
══════════════════════════════════════════ */
.footer {
    background: var(--forest, #092E1D);
    color: #FAFAFA;
    font-family: 'Nunito Sans', sans-serif;
    /* local palette */
    --pl-sage: #9EA274; /* section headings */
    --pl-divider: var(--pl-forest-green-text, #043A23);
    --pl-legal-sep: #C2CDC5;
}

/* ── Top content block ── */
.footer-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 40px 80px;
}

/* ── Row 1: logo + CTA ── */
.footer-row--top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.footer-logo-wrap {
    display: block;
    flex-shrink: 0;
    text-decoration: none;
}

.footer-logo-img {
    height: 80px;
    width: auto;
    display: block;
}

/* Text fallback (only shows if the logo image fails) */
.footer-logo-text {
    font-family: 'STIX Two Text', serif;
    font-size: 26px;
    font-weight: 600;
    color: #FAFAFA;
    line-height: 1.1;
}

/* ── CTA buttons ── */
.footer-cta {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

.footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    height: 48px;
    padding: 4px 40px;
    border-radius: 2px;
    border: 1px solid #FAFAFA;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.3px; /* 10% */
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, opacity 0.2s;
    font-family: inherit;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.footer-btn-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Ghost — transparent w/ light border */
.footer-btn--ghost {
    background: transparent;
    color: #FAFAFA;
}

    .footer-btn--ghost:hover {
        background: rgba(250, 250, 250, 0.1);
    }

/* Solid — white fill, dark text */
.footer-btn--solid {
    background: #FAFAFA;
    color: #141414;
}

    .footer-btn--solid:hover {
        opacity: 0.9;
    }

/* ── Divider ── */
.footer-divider {
    border: 0;
    border-top: 1px solid var(--pl-divider);
    margin: 0;
    width: 100%;
}

/* ══════════════════════════════════════════
   ROW 2 — about + columns
══════════════════════════════════════════ */
.footer-row--main {
    display: flex;
    gap: 0;
    align-items: flex-start;
}

/* Shared section heading (sage, uppercase) */
.footer-heading {
    font-size: 18px;
    font-weight: 600;
    color: var(--pl-sage);
    letter-spacing: 0.72px; /* 4% */
    line-height: 1.5;
    text-transform: uppercase;
}

/* ── WHO WE ARE block ── */
.footer-about {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-right: 80px;
}

.footer-about-text {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FAFAFA;
    max-width: 560px;
}

.footer-canada {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-canada-icon {
    width: 32px;
    height: auto;
    flex-shrink: 0;
    display: block;
}

.footer-canada span {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FAFAFA;
}

/* ── Link columns ── */
.footer-cols {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}

    .footer-links a {
        color: #FAFAFA;
        text-decoration: none;
        transition: color 0.15s;
    }

        .footer-links a:hover {
            color: var(--pl-sage);
            text-decoration: underline;
            text-decoration-color: var(--pl-sage);
        }

/* ── Social tiles (icon only) ── */
.footer-col--social .social-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.social-tile {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.2s;
}

    .social-tile:hover {
        background: rgba(250, 250, 250, 0.1);
    }

    .social-tile img {
        width: 21px;
        height: 21px;
        display: block;
        /* Force the monochrome icons to light on the dark bg.
           Remove this if you swap in already-light social SVGs. */
        filter: brightness(0) invert(1);
    }

/* ══════════════════════════════════════════
   BOTTOM BAR
══════════════════════════════════════════ */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 40px 80px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FAFAFA;
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

    .footer-legal a {
        color: #FAFAFA;
        text-decoration: none;
        transition: color 0.15s;
    }

        .footer-legal a:hover {
            color: var(--pl-sage);
            text-decoration: underline;
            text-decoration-color: var(--pl-sage);
        }

.footer-sep {
    width: 1px;
    height: 16px;
    background: var(--pl-legal-sep);
    flex-shrink: 0;
}


/* ══════════════════════════════════════════
   RESPONSIVE — TABLET (≤900px)
══════════════════════════════════════════ */
@media (max-width: 900px) {
    .footer-inner {
        padding: 40px;
        gap: 32px;
    }

    .footer-row--top {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .footer-row--main {
        flex-direction: column;
        gap: 32px;
    }

    .footer-about {
        padding-right: 0;
    }

    .footer-about-text {
        max-width: 100%;
    }

    .footer-cols {
        justify-content: flex-start;
        gap: 48px;
    }

    .footer-bottom {
        padding: 32px 40px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}


/* ══════════════════════════════════════════
   RESPONSIVE — MOBILE (≤540px)
══════════════════════════════════════════ */
@media (max-width: 540px) {
    .footer-inner {
        padding: 28px 20px;
        gap: 28px;
    }

    .footer-logo-img {
        height: 64px;
    }

    /* Full-width stacked buttons */
    .footer-cta {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .footer-btn {
        width: 100%;
        justify-content: center;
    }

    .footer-cols {
        flex-direction: column;
        gap: 28px;
    }

    .footer-bottom {
        padding: 24px 20px;
    }

    .footer-legal {
        gap: 12px;
    }
}
/* ══════════════════════════════════════════
   LARGE DESKTOP (≥1440px) — PROPORTIONAL SCALING
   Same mechanism as header-nav.css / home.css: under 1440 the
   footer uses its Figma 1440 values above; here --s runs
   1 → 1.3333 between 1440 and 1920 (then caps) and every fixed
   size is multiplied by it so the footer scales up to match
   the 1920 frame. Borders, radii and the 1px separator width
   stay fixed so they render crisp.
══════════════════════════════════════════ */
/*@media (min-width: 1440px) {

    :root {
        --s: clamp(1, calc(100vw / 1440px), 1.3333);
    }*/

    /* ── Top block ── */
    /*.footer-inner {
        gap: calc(40px * var(--s));
        padding: calc(40px * var(--s)) calc(80px * var(--s));
    }

    .footer-row--top {
        gap: calc(40px * var(--s));
    }

    .footer-logo-img {
        height: calc(80px * var(--s));
    }

    .footer-logo-text {
        font-size: calc(26px * var(--s));
    }*/

    /* ── CTA buttons ── */
    /*.footer-cta {
        gap: calc(16px * var(--s));
    }

    .footer-btn {
        gap: calc(20px * var(--s));
        height: calc(48px * var(--s));
        padding: calc(4px * var(--s)) calc(40px * var(--s));
        font-size: calc(13px * var(--s));
        letter-spacing: calc(1.3px * var(--s));
    }

    .footer-btn-icon {
        width: calc(24px * var(--s));
        height: calc(24px * var(--s));
    }*/

    /* ── Row 2: about + columns ── */
    /*.footer-heading {
        font-size: calc(18px * var(--s));
        letter-spacing: calc(0.72px * var(--s));
    }

    .footer-about {
        gap: calc(20px * var(--s));
        padding-right: calc(80px * var(--s));
    }

    .footer-about-text {
        font-size: calc(16px * var(--s));
        max-width: calc(560px * var(--s));
    }

    .footer-canada {
        gap: calc(16px * var(--s));
    }

    .footer-canada-icon {
        width: calc(32px * var(--s));
    }

    .footer-canada span {
        font-size: calc(16px * var(--s));
    }

    .footer-cols {
        gap: calc(40px * var(--s));
    }

    .footer-col {
        gap: calc(20px * var(--s));
    }

    .footer-links {
        gap: calc(8px * var(--s));
        font-size: calc(16px * var(--s));
    }*/

    /* ── Social tiles ── */
    /*.footer-col--social .social-links {
        gap: calc(4px * var(--s));
    }

    .social-tile {
        width: calc(48px * var(--s));
        height: calc(48px * var(--s));
    }

        .social-tile img {
            width: calc(21px * var(--s));
            height: calc(21px * var(--s));
        }*/

    /* ── Bottom bar ── */
    /*.footer-bottom {
        gap: calc(16px * var(--s));
        padding: calc(40px * var(--s)) calc(80px * var(--s));
        font-size: calc(16px * var(--s));
    }

    .footer-legal {
        gap: calc(16px * var(--s));
    }

    .footer-sep {
        height: calc(16px * var(--s));
    }
}*/