/* ============================================================
   Site footer — ported from coplus-localhost/css/styles.css
   ============================================================ */

.site-footer {
    background: var(--gradient-navy);
    color: var(--text-inverse);
}

/* .footer__top / .footer__bottom own the side padding so .footer__bottom's
   border-top still spans the full viewport width. */
.footer__top {
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
}

/* ── Quicklink cards ──────────────────────────────────────── */
.footer__quicklinks {
    max-width: var(--site-max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 48px 0 24px;
}

.quicklink-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 12px 24px;
    transition: background var(--transition), transform var(--transition);
}
.quicklink-card:hover { background: rgba(0, 0, 0, 0.35); transform: translateY(-2px); }

.quicklink-card h3 {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.1;
    margin-bottom: 4px;
}
.quicklink-card p { font-size: 16px; line-height: 1.4; }

.quicklink-card__arrow {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: transform var(--transition);
}
.quicklink-card:hover .quicklink-card__arrow { transform: translate(2px, -2px); }

/* ── Main block ───────────────────────────────────────────── */
.footer__main {
    max-width: var(--site-max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.7fr 2fr;
    grid-template-rows: auto auto;
    column-gap: 40px;
    padding: 20px 0;
}

.footer__company {
    grid-column: 1;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 350px;
}
.footer__logo { height: 68px; width: auto; align-self: flex-start; }

.footer__address {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
}
.footer__address strong {
    display: block;
    font-size: 24px;
    line-height: 1.1;
    margin-bottom: 4px;
}

.footer__social { display: flex; align-items: center; gap: 14px; }
.footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    transition: opacity var(--transition);
}
.footer__social a:hover,
.footer__social a:focus-visible { opacity: 0.75; }
.footer__social svg { width: 26px; height: 26px; }

/* ── Link columns ─────────────────────────────────────────── */
.footer__links {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__col h4 {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.18px;
    margin-bottom: 4px;
}
.footer__col a {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.18px;
}
.footer__col a:hover,
.footer__col a:focus-visible { color: var(--tertiary); }

.footer__col--wide { grid-column: span 1; }
.footer__col-group { display: flex; gap: 24px; }
.footer__col-group > div { display: flex; flex-direction: column; gap: 12px; flex: 1; }

/* ── Legal ────────────────────────────────────────────────── */
.footer__legal {
    grid-column: 2;
    grid-row: 2;
    font-family: var(--font-info);
    font-size: 14px;
    color: var(--accent-inverse-dim);
    text-align: justify;
    margin-top: 24px;
    padding-bottom: 40px;
    max-width: 795px;
}

/* ── Bottom bar ───────────────────────────────────────────── */
.footer__bottom {
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
}
.footer__bottom-inner {
    max-width: var(--site-max-w);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 32px 0;
    flex-wrap: wrap;
}

.footer__powered {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 18px;
}
.footer__powered a {
    display: flex;
    align-items: center;
    transition: opacity var(--transition);
}
.footer__powered a:hover,
.footer__powered a:focus-visible { opacity: 0.75; }
.footer__powered img { height: 13px; width: auto; }

.footer__terms { display: flex; gap: 20px; }
.footer__terms a {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 18px;
}
.footer__terms a:hover,
.footer__terms a:focus-visible { color: var(--tertiary); }

.footer__copyright {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 18px;
    margin: 0;
}

/* ── Tablet ───────────────────────────────────────────────────
   Everything collapses to one column and centres — text, logos,
   social row, link columns and the bottom bar.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .footer__quicklinks { grid-template-columns: 1fr; padding: 32px 0 16px; }

    .footer__main {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        row-gap: 32px;
        text-align: center;
    }

    .footer__company {
        grid-column: 1;
        grid-row: auto;
        max-width: none;
        align-items: center;
    }
    /* Reorder to logo → address; socials are desktop-only */
    .footer__logo    { order: 1; align-self: center; }
    .footer__address { order: 2; }
    .footer__social  { display: none; }

    .footer__links { grid-column: 1; grid-row: auto; }
    .footer__col,
    .footer__col-group > div { align-items: center; }

    /* Only the middle column shows below desktop */
    .footer__links .footer__col:first-child,
    .footer__links .footer__col:last-child { display: none; }

    .footer__legal { display: none; }

    .footer__bottom-inner {
        justify-content: center;
        text-align: center;
    }
    .footer__powered,
    .footer__terms { justify-content: center; }
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 767px) {
    .footer__links { grid-template-columns: 1fr; gap: 28px; }
    .footer__col-group { flex-direction: column; gap: 12px; }

    .footer__bottom-inner {
        flex-direction: column-reverse;
        align-items: center;
        gap: 16px;
    }
    .footer__terms { flex-wrap: wrap; gap: 12px 20px; }
}