/*
 * Site footer (Tts\Ui\Footer): shared by every page, like the navigation, and
 * loaded on every page for that reason. Its markup is its own (site-footer__*):
 * no Foundation grid and none of the legacy footer CSS reach it.
 *
 * The ground is the ink, with the brand lime along the bottom edge. On it the
 * text is two levels - white headings, the soft light neutral for everything
 * else - and links follow the on-dark rule in tokens.css rather than the
 * accent purple, which does not read on this surface.
 *
 *   below 640px  a layout of its own: logo beside the social icons, contact,
 *                the hours across the width (one line a day), the address
 *                beside the information links, then the trust rating and the
 *                payment and shipping marks as one strip under a rule
 *   from 640px   three columns - contact and trust; hours and how you pay;
 *                address, information and social
 *
 * The three column wrappers exist for the wide layout. On a phone they are
 * display: contents, so their blocks join one grid and can be placed freely;
 * they are plain divs, so nothing semantic is lost by dissolving them.
 */

.site-footer {
    border-block-end: 12px solid var(--shop-lime);
    background: var(--shop-surface-dark);
    color: var(--shop-on-dark-soft);
    font-family: var(--shop-font);
    font-size: var(--shop-text-control);
    line-height: var(--shop-leading-normal);
}

.site-footer__inner {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "logo    social"
        "contact contact"
        "hours   hours"
        "address info"
        "trust   trust"
        "marks   marks";
    gap: var(--shop-space-6) var(--shop-space-4);
    max-width: calc(var(--shop-container) + var(--shop-gutter) * 2);
    margin-inline: auto;
    padding: var(--shop-space-8) var(--shop-gutter);
}

.site-footer__col {
    display: contents;
}

.site-footer__block--logo { grid-area: logo; }
.site-footer__block--contact { grid-area: contact; }
.site-footer__block--trust { grid-area: trust; }
.site-footer__block--hours { grid-area: hours; }
.site-footer__block--marks { grid-area: marks; }
.site-footer__block--address { grid-area: address; }
.site-footer__block--info { grid-area: info; }
.site-footer__block--social { grid-area: social; }

/* Lists here are groupings, not bullets - and Foundation's list type
   (1rem / 1.6) and definition-list margins are not the footer's. */
.site-footer ul,
.site-footer dl {
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
    list-style: none;
}

.site-footer li,
.site-footer dt,
.site-footer dd {
    margin: 0;
}

/* Reset to the footer's own type: Foundation and combined.css style h2 and
   address for page content. */
.site-footer__heading {
    margin: 0 0 var(--shop-space-2);
    /* A long single word ("Adressinformationen") in a narrow phone column. */
    overflow-wrap: break-word;
    hyphens: auto;
    color: var(--shop-on-dark);
    font-family: var(--shop-font);
    font-size: var(--shop-text-base);
    font-weight: var(--shop-weight-semibold);
    line-height: var(--shop-leading-tight);
}

.site-footer__address {
    margin: 0;
    font-style: normal;
}

/* Links on dark ------------------------------------------------------------ */

/* A text link is underlined at rest - a thin line at half the text's
   strength, clear of the descenders - so it reads as a link beside the
   address and the hours, which are not. Hover brings text and line to white
   and thickens the line; keyboard focus adds the lime outline. The line is
   drawn from currentColor, so it follows each state without a colour of its
   own. Icon links (social) and the rating opt out below. */
.site-footer a {
    color: var(--shop-on-dark-soft);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: var(--shop-on-dark);
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
}

.site-footer a:focus {
    color: var(--shop-on-dark-soft);
}

.site-footer a:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--shop-on-dark-focus);
    outline-offset: 2px;
}

/* Brand and contact -------------------------------------------------------- */

.site-footer__block--logo {
    align-self: center;
}

.site-footer__logo {
    display: block;
    width: 100%;
    max-width: 180px;
    height: auto;
}

.site-footer__contact {
    display: grid;
    gap: var(--shop-space-2);
}

.site-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: var(--shop-space-3);
}

.site-footer__icon {
    display: flex;
    flex: none;
    margin-block-start: 2px;
    color: var(--shop-on-dark);
}

.site-footer__icon svg {
    width: var(--shop-icon-sm);
    height: var(--shop-icon-sm);
}

/* The two numbers side by side where they fit, one under the other where
   they do not; never broken inside a number. */
.site-footer__phones {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--shop-space-4);
}

.site-footer__contact a {
    white-space: nowrap;
}

/* The contact details are what a visitor comes to the footer for, so they
   read at full white; they are still links, and still underline. */
.site-footer__contact a,
.site-footer__contact a:focus {
    color: var(--shop-on-dark);
}

/* Hours -------------------------------------------------------------------- */

.site-footer__hours {
    display: grid;
    gap: var(--shop-space-1);
}

/* Day and hours on one line, the hours wrapping under the day where the
   column is too narrow for both (from 640px). */
.site-footer__hours div {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--shop-space-3);
}

.site-footer__hours dt {
    flex: 1 1 auto;
    font-weight: normal;
}

.site-footer__hours dd {
    color: var(--shop-on-dark);
    font-variant-numeric: tabular-nums;
}

/* On a phone the hours span the footer, one line a day (a row per weekday
   is the client's, Decision 17), and every hours value starts in one column
   just after the longest day, so the eye runs down a timetable rather than
   across the width. Without subgrid each row keeps its own two columns. No
   nowrap: at 320px and 200% text the hours must still be able to wrap. */
@media (max-width: 639.98px) {
    .site-footer__hours {
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: var(--shop-space-4);
    }

    .site-footer__hours div {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-columns: subgrid;
        /* For the fallback; a subgrid takes the dl's gap. */
        column-gap: var(--shop-space-4);
        align-items: baseline;
    }
}

/* Information links -------------------------------------------------------- */

/* A little taller than the text, so the rows are comfortable targets. */
.site-footer__links a {
    display: inline-block;
    padding-block: 2px;
}

/* On a phone the address and the links share a row, half the width each:
   a long label ("Allgemeine Geschäftsbedingungen") wraps, so the links are
   spaced to keep a wrapped one from reading as two, and a single long word
   breaks rather than overflows. */
@media (max-width: 639.98px) {
    /* minmax(0, ...): an auto track would grow to the longest word and
       carry it past the column, whatever the overflow-wrap below says. */
    .site-footer__links {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--shop-space-2);
    }

    .site-footer__links a {
        text-wrap: pretty;
    }

    /* A compound too long for the column ("Datenschutzerklärung" at 320px)
       hyphenates, as the headings do; anywhere, not break-word, because the
       links are inline-block and only anywhere stops a long word from
       setting their width. */
    .site-footer__address,
    .site-footer__links a {
        overflow-wrap: anywhere;
        hyphens: auto;
    }
}

/* Social ------------------------------------------------------------------- */

.site-footer__social {
    /* The target around each icon; the icon itself is --shop-icon. */
    --site-footer-social: 36px;
    display: flex;
    justify-content: flex-end;
    gap: var(--shop-space-1);
}

.site-footer__social a {
    display: flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    width: var(--site-footer-social);
    height: var(--site-footer-social);
    border-radius: var(--shop-radius-sm);
}

.site-footer__social a:hover {
    background: var(--shop-on-dark-rule);
}

.site-footer__social svg {
    width: var(--shop-icon);
    height: var(--shop-icon);
}

/* Trust and marks ---------------------------------------------------------
   The strip that closes the phone layout: the rating, then the marks, under
   one rule. */

.site-footer__block--trust {
    padding-block-start: var(--shop-space-6);
    border-block-start: 1px solid var(--shop-on-dark-rule);
}

.site-footer__trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--shop-space-2) var(--shop-space-3);
}

/* The link is the whole rating, but only its text underlines and brightens -
   an underline under the wordmark and the stars would be noise. Qualified
   with a. to outrank the general link states above. */
.site-footer a.site-footer__trust,
.site-footer a.site-footer__trust:hover,
.site-footer a.site-footer__trust:focus,
.site-footer a.site-footer__trust:focus-visible {
    color: var(--shop-on-dark-soft);
    text-decoration: none;
}

.site-footer__trust:hover .site-footer__trust-score,
.site-footer__trust:focus-visible .site-footer__trust-score {
    color: var(--shop-on-dark);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.22em;
}

.site-footer__trust-logo {
    display: block;
    width: auto;
    height: 26px;
}

.site-footer__trust-rating {
    display: grid;
    gap: 2px;
}

.site-footer__stars {
    display: flex;
    gap: 2px;
}

/* Gold for the filled part, a dim tint for the rest; a partial star is one
   gradient split at its own fill. */
.site-footer__star {
    width: 16px;
    height: 16px;
    background: linear-gradient(90deg, #ffc400 var(--fill), var(--shop-on-dark-rule) var(--fill));
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.site-footer__trust-score {
    font-size: var(--shop-text-md);
    line-height: var(--shop-leading-snug);
}

.site-footer__trust-score strong {
    color: var(--shop-on-dark);
}

/* A market without Trusted Shops has no rating: the strip is the marks alone,
   so the rule moves to them and the empty row leaves the template, or its two
   gaps would stack. :where() keeps it at the base rule's weight, so the wide
   layouts below override it without repeating it. */
.site-footer__inner:where(:not(:has(.site-footer__trust))) {
    grid-template-areas:
        "logo    social"
        "contact contact"
        "hours   hours"
        "address info"
        "marks   marks";
}

.site-footer__inner:where(:not(:has(.site-footer__trust))) .site-footer__block--marks {
    padding-block-start: var(--shop-space-6);
    border-block-start: 1px solid var(--shop-on-dark-rule);
}

/* Heights rather than widths, so marks of different proportions share one
   line of type; DHL is a filled block, so a notch smaller to weigh the same. */
.site-footer__marks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--shop-space-3);
}

.site-footer__marks img {
    display: block;
    width: auto;
    height: 18px;
}

.site-footer__mark--shipping img {
    height: 22px;
    border-radius: 2px;
}

/* From 640px: three columns ------------------------------------------------ */

@media (min-width: 640px) {
    .site-footer__inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas: none;
        gap: var(--shop-space-8);
        padding-block: var(--shop-space-10);
    }

    .site-footer__col {
        display: flex;
        flex-direction: column;
        gap: var(--shop-space-6);
    }

    .site-footer__block--logo {
        align-self: auto;
    }

    /* In a column the rating is as wide as its content, so its focus box and
       click area are too. (On a phone it spans the row, which carries the
       strip's rule.) */
    .site-footer__trust {
        align-self: flex-start;
    }

    /* The rule belonged to the phone's closing strip. */
    .site-footer__block--trust,
    .site-footer__inner:where(:not(:has(.site-footer__trust))) .site-footer__block--marks {
        padding-block-start: 0;
        border-block-start: 0;
    }

    /* Starts at the column's edge by its icon, not by its target. */
    .site-footer__social {
        justify-content: flex-start;
        margin-inline-start: calc((var(--shop-icon) - var(--site-footer-social)) / 2);
    }
}

/* From 1024px the third column is wide enough to set address and
   information side by side, with social under the address - which brings it
   to the height of the other two instead of twice it, and so the whole footer
   down. It takes a little more of the width for that. */
@media (min-width: 1024px) {
    .site-footer__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
        column-gap: var(--shop-space-12);
    }

    .site-footer__col--about {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "address info"
            "social  info";
        align-content: start;
        gap: var(--shop-space-6) var(--shop-space-8);
    }
}