/* ==========================================================================
   SocialHub — Site footer

   Its own file because both shells wear it: the public site and the
   member panel. It used to live in sh-public.css, which the panel never
   loads — so a signed-in member had no footer at all, and any widget an
   admin placed in the Footer area was invisible to everyone but guests.

   Deliberately quiet. A social network's footer is a strip you scroll
   past, not a marketing sitemap: the navigation that matters is the
   sidebar and the tab bar. One wrapped line of small links, a copyright,
   and the language choice — nothing that asks to be read.
   ========================================================================== */

.sh-footer {
    margin-top: auto;
    padding: var(--sh-sp-6) 0;
    border-top: 1px solid var(--sh-border);
    background: var(--sh-surface);
    color: var(--sh-text-muted);
    font-size: var(--sh-fs-sm);
}

.sh-footer-inner {
    display: flex;
    flex-direction: column;
    gap: var(--sh-sp-4);
    max-width: var(--sh-shell-max);
    margin-inline: auto;
    padding-inline: var(--sh-gutter);
}

/* -- The link strip -------------------------------------------------------- */

/* One flat wrapped row. Column headings would make eight links look like
   a sitemap; this reads as the afterthought it is meant to be. */
.sh-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sh-sp-2) var(--sh-sp-4);
}

.sh-footer-links a {
    color: var(--sh-text-muted);
    font-size: var(--sh-fs-xs);
    line-height: 1.6;
}

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

/* -- Copyright, socials, language ------------------------------------------ */

.sh-footer-meta {
    display: flex;
    flex-direction: column;
    gap: var(--sh-sp-3);
}

.sh-footer-copy {
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--sh-sp-2);
    font-size: var(--sh-fs-xs);
    color: var(--sh-text-subtle);
}

/* The tagline sits on its own line here and takes no separator: a
   leading "·" at the start of a wrapped line reads as a bullet, not as
   punctuation. The dot is added back at 1024, where the two measure
   436px against a row that cannot be narrower than that. */

.sh-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sh-sp-2);
}

/* Brand marks keep their own colours — `<x-brand-icon>` carries real
   logos on SVG `fill`, which no theme may repaint. The tile is what
   adapts. */
.sh-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--sh-radius-sm);
    background: var(--sh-surface-sunken);
}

.sh-footer-social a:hover {
    background: var(--sh-surface-alt);
}

.sh-footer-social svg {
    width: 15px;
    height: 15px;
}

.sh-footer-address {
    margin: 0;
    font-style: normal;
    font-size: var(--sh-fs-xs);
    color: var(--sh-text-subtle);
}

/* -- Widgets placed in the footer ------------------------------------------ */

/* A widget here is a block on an ordinary surface now, not a card on a
   dark slab — so it mostly keeps its own styling and only loses the
   card chrome it would otherwise double up. */
.sh-footer .sh-widget {
    margin-bottom: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.sh-footer .sh-widget .sh-card-head {
    padding: 0;
    border-bottom: 0;
}

.sh-footer .sh-widget .sh-widget-body {
    padding: var(--sh-sp-2) 0 0;
}

/* Their own row. `.sh-footer-inner` is a *column* flex container, so a
   `flex-basis` set on the widgets themselves became a minimum **height**
   — each one grew to 220px tall with the space left empty. */
.sh-footer-widgets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sh-sp-4) var(--sh-sp-8);
}

/* No widgets placed, no gap above the links. */
.sh-footer-widgets:empty {
    display: none;
}

.sh-footer-widgets > .sh-widget {
    flex: 0 1 260px;
    min-width: 0;
}

/* ==========================================================================
   Language switcher
   Lives with the footer because that is the only place it appears.
   Consumes the flag and native name from Settings → Languages. Plain
   links, so it works with JavaScript off.
   ========================================================================== */

.sh-langpick {
    display: flex;
    flex-direction: column;
    gap: var(--sh-sp-2);
}

.sh-langpick-label {
    display: inline-flex;
    align-items: center;
    gap: var(--sh-sp-2);
    font-size: var(--sh-fs-2xs);
    font-weight: var(--sh-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sh-text-subtle);
}

/* An `<x-icon>` has no width of its own; without this the globe inflates
   to fill whatever column it lands in. */
.sh-langpick-label svg {
    width: 14px;
    height: 14px;
}

.sh-langpick-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sh-sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sh-langpick-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px var(--sh-sp-2);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-pill);
    font-size: var(--sh-fs-xs);
    color: var(--sh-text-muted);
    text-decoration: none;
}

.sh-langpick-item:hover {
    border-color: var(--sh-border-strong);
    color: var(--sh-text);
}

/* The one being read, marked for people who cannot see the contrast. */
.sh-langpick-item.is-active {
    border-color: var(--sh-primary-600);
    color: var(--sh-primary-600);
    font-weight: var(--sh-fw-semibold);
}

.sh-langpick-flag {
    font-size: var(--sh-fs-sm);
    line-height: 1;
}

/* ==========================================================================
   Wider screens
   ========================================================================== */

@media (min-width: 768px) {
    /* Copyright on the left, language on the right — one line instead of
       three stacked blocks. */
    .sh-footer-meta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--sh-sp-4);
    }

    .sh-langpick {
        flex-direction: row;
        align-items: center;
        gap: var(--sh-sp-3);
    }
}

@media (min-width: 1024px) {
    /* Copyright and tagline share a line from here up, so the separator
       is real punctuation between them rather than a stray mark at the
       head of a wrapped line. */
    .sh-footer-tagline::before {
        content: "·";
        margin-inline-end: var(--sh-sp-2);
    }
}

/* The member panel has a fixed tab bar across the bottom of a phone, so
   the footer has to end above it rather than underneath. */
.sh-app .sh-footer {
    padding-bottom: calc(var(--sh-tabbar-h) + var(--sh-sp-6));
}

@media (min-width: 768px) {
    .sh-app .sh-footer {
        padding-bottom: var(--sh-sp-6);
    }
}