/**
 * TransferJet — footer.
 *
 * S = SpeedTheme web/css/source/_am-jet-extend.less ("Footer")
 * J = JetTheme .../components/_footer-links.less and module/_variables.less
 *
 * Laid out with grid rather than S's column-count, which predates it. One
 * behaviour is deliberately preserved: column-count fills down-then-across, so
 * at xl the original reads Angrefrist / Levering / Betaling in the first column
 * and Salgsbetingelser / Retur in the second. A default grid would fill
 * across-then-down and reorder them, so those lists use grid-auto-flow: column
 * with a fixed row count.
 *
 * Breakpoints: three equal columns from md, with the links and contact lists
 * each a single column until xl, where they split in two.
 */

.footer-columns {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}

/* Band colours, moved off the wrapper template so both greys live with the rest
   of the footer's styling. */
.footer-bands {
    background: var(--color-bg-alt);
}

.footer-copyright-bar {
    background: #ebeae9;
}

.footer-promotion__list,
.footer-contact__list {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
    list-style: none none;
    margin: 0;
    padding: 0;
}

.footer-promotion__list-item-container,
.footer-contact__list-item-container {
    display: flex;
}

.footer-promotion__vector,
.footer-contact__vector {
    min-width: 40px;
}

/* The title/subtitle pairs are split by <br>, so the global 1.25 stacks them
   too tightly. Local leading just for these blocks. */
.footer-promotion__text,
.footer-contact__text {
    line-height: 1.4;
    margin-left: 1rem;
}

.footer-promotion__text .footer-promotion__title,
.footer-contact__text .footer-contact__title,
.footer-contact__text .footer-contact__title a {
    color: var(--color-primary);
    font-weight: 700;
}

.footer-contact__text .footer-contact__title a {
    transition: color var(--transition-base);
}

.footer-contact__text .footer-contact__title a:hover,
.footer-contact__text .footer-contact__title a:active {
    color: var(--color-secondary);
}

.footer-promotion__text .footer-promotion__subtitle,
.footer-contact__text .footer-contact__subtitle {
    color: var(--color-fg-secondary);
}

/* J: muted colour, hover to secondary. */
.footer.links {
    display: grid;
    gap: 15px 50px;
    grid-template-columns: 1fr;
    justify-items: start;
    list-style: none none;
    margin: 0;
    padding-left: 0;
}

.footer.links .item {
    margin: 0;
}

.footer.links .item a {
    color: var(--color-fg-secondary);
    font-weight: 700;
    transition: color var(--transition-base);
}

.footer.links .item a:hover {
    color: var(--color-secondary);
}

/* S: below @screen__m the icon groups centre as blocks. The links become a
   centred, width-constrained divided list: each link is centred, the whole list
   is capped to a readable width, and the hairline under each link spans that
   capped width (not the full column, not just the text). */
@media (max-width: 767px) {
    .footer-promotion__container,
    .footer-contact__container {
        display: grid;
        justify-content: center;
    }

    .footer-contact__container {
        padding-bottom: 10px;
        padding-top: 10px;
    }

    .footer.links {
        gap: 0;
        /* centre the list and cap its width so the dividers read as a tidy
           stack rather than running the full screen width */
        justify-items: stretch;
        margin-left: auto;
        margin-right: auto;
        max-width: 20rem;
        width: 100%;
    }

    .footer.links .item {
        border-bottom: 1px solid var(--color-border);
        padding: 15px 0;
        /* full width of the capped list, so the underline spans it */
        width: 100%;
    }

    .footer.links .item a {
        display: block;
        text-align: center;
    }

    .footer.links .item:last-child {
        border-bottom: 0;
    }
}

/* Three equal columns from @screen__m. Each inner list stays single-column
   here — this is the "straightened" arrangement the original settles into at
   medium widths. */
@media (min-width: 768px) {
    .footer-columns {
        gap: 2.5rem;
        grid-template-columns: repeat(3, 1fr);
    }
}

/* S: @screen__xl — the links and contact lists split in two, filling
   down-then-across to match column-count's order. */
@media (min-width: 1440px) {
    /* Two rows, not three. The list was five entries when this was ported and
       3+2 balanced; with Betaling gone it is four, and three rows would give
       3+1. Two rows give 2+2, and also match the contact list beside it. */
    .footer.links {
        column-gap: 90px;
        grid-auto-flow: column;
        grid-template-columns: repeat(2, max-content);
        grid-template-rows: repeat(2, auto);
        padding-left: 40px;
    }

    .footer-contact__list {
        column-gap: 40px;
        grid-auto-flow: column;
        grid-template-columns: repeat(2, max-content);
        grid-template-rows: repeat(2, auto);
    }

    /* The address is three lines where mail and phone are two, and in a
       down-then-across grid it lands in row 1 of the second column — where its
       height sets the row, and pushes phone down in the first column. That is
       the gap: not the rows stretching, but one item deciding for the others.

       Spanning it across both rows takes it out of that calculation. The rows
       are then sized by mail and phone, which match each other and match the
       promotions block on the far side of the footer, and the address simply
       runs past them if it is taller. */
    .footer-contact__list-item:last-child {
        grid-row: 1 / span 2;
    }
}
/* --- "Til toppen" back-to-top bar ------------------------------------------ *
 * Faithful port of JetTheme's "Snarvei til toppen" bar: a full-width grey band
 * above the footer that scrolls to the top on click. Mobile only — hidden from
 * @screen__m up (the original scopes it to small screens, where the scroll back
 * to the finder is long enough to be worth a shortcut). The scroll itself is the
 * Alpine footerToTop component in html/footer/scroll-to-top.phtml.
 */
.footer-to-top {
    /* the darker footer grey, matching .footer-copyright-bar, so the bar and the
       copyright band bracket the footer in the same tone */
    background: #ebeae9;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    /* the "very slight shadow" — a soft drop under the band */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

@media (min-width: 768px) {
    .footer-to-top {
        display: none;
    }
}

.footer-to-top__button {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--color-fg-secondary);
    cursor: pointer;
    display: flex;
    font-weight: 700;
    gap: 0.375rem;
    justify-content: center;
    letter-spacing: var(--tracking-base);
    padding: 1rem;
    text-transform: uppercase;
    transition: color var(--transition-base);
    width: 100%;
}

.footer-to-top__button:hover {
    color: var(--color-secondary);
}

.footer-to-top__icon {
    height: 1.25rem;
    width: 1.25rem;
}