/* ═══════════════════════════════════════════════════════════════════
   Site footer
   ═══════════════════════════════════════════════════════════════════
   One footer, on every page, built from tokens.

   What this replaces was three different footers. The home page carried
   four columns headed "Experience Hubionis", "Tours" and "Contact us"
   whose links were identical copies of each other — Homepage, Flights,
   "Work with us", "Cart" — two of them href="#", and one of them naming
   a shopping cart the site has never had. The legal pages carried a
   separate centred Polish footer linking to cookies.html, which does not
   exist. Every colour in both was written into a style attribute:
   #0a1929, #8892a6, #00d9ff, fill="white". None of it could be reached
   by a stylesheet, so neither theme could correct it and the footer
   stayed a dark strip under a light page.

   Every link here goes somewhere real. There are no social icons because
   there are no accounts to point them at; a dead icon is worse than an
   absent one.
   ═══════════════════════════════════════════════════════════════════ */

.site-footer {
    margin-top: 4rem;
    padding: 3rem 0 1.5rem;
    border-top: 1px solid var(--hub-hairline);
    background: var(--hub-elev);
    color: var(--hub-ink-muted);
}

.site-footer .container { max-width: 1400px; }

/* ── The columns ────────────────────────────────────────────────
   The brand takes the room it needs for a readable line; the link
   columns take what is left, evenly. */

.sf-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1.6fr) repeat(3, minmax(140px, 1fr));
    gap: 2.5rem;
    /* No bottom rule under this any more, so the grid carries the closing
       space itself rather than leaving the footer flush against its edge. */
    padding-bottom: 0.5rem;
}

.sf-brand { min-width: 0; }

.sf-logo {
    display: inline-flex;
    margin-bottom: 0.9rem;
}

/* No display here. theme.css hides one of the pair with .logo-on-light /
   .logo-on-dark at (0,1,0); "display: block" on .sf-logo img is (0,2,0)
   and wins, which showed BOTH logos in dark and made the footer 30px
   taller than in light. */
.sf-logo img {
    height: 30px;
    width: auto;
}

.sf-tagline {
    margin: 0 0 0.9rem;
    max-width: 40ch;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--hub-ink-muted);
    text-wrap: pretty;
}

.sf-contact {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.6;
}

/* A standalone link, not a word inside a sentence, so it carries the 24px
   target minimum rather than the inline-link exemption. */
.sf-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--hub-accent-strong);
    text-decoration: none;
    font-weight: 600;
}

.sf-contact a:hover { text-decoration: underline; }

/* ── Link columns ───────────────────────────────────────────────── */

.sf-col { min-width: 0; }

.sf-heading {
    margin: 0 0 0.85rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--hub-ink);
}

.sf-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* The old footer's links were 17px tall, under the 24px minimum. Padding
   inside the row gives the target its height without spreading the list. */
.sf-col a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.15rem 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--hub-ink-muted);
    text-decoration: none;
    transition: color var(--hub-transition);
}

.sf-col a:hover { color: var(--hub-accent-strong); }

.sf-col a:focus-visible {
    outline: 2px solid rgb(var(--hub-accent-rgb) / 0.5);
    outline-offset: 3px;
    border-radius: 4px;
}

/* The bottom rule carried the company name, address and registration
   numbers. Those still stand on the Terms and Privacy pages, which the
   Legal column links to, so the identification remains reachable — it is
   just no longer repeated under every page. */

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .sf-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem 1.5rem;
    }
    .sf-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .site-footer { margin-top: 3rem; padding: 2.25rem 0 1.25rem; }
    .sf-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.75rem 1.25rem;
    }
}

/* A finger needs 44px; the visual rhythm of the list does not change. */
@media (hover: none) and (pointer: coarse) {
    .sf-col a,
    .sf-contact a { min-height: 44px; }
    .sf-col ul { gap: 0; }
}

/* The mobile tab bar sits over the bottom of the page. */
@media (max-width: 768px) {
    .site-footer { padding-bottom: calc(1.25rem + 64px); }
}

/* ── Language toggle ────────────────────────────────────────────
   Sits beside the theme toggle and is built the same way: a pill in
   the nav that says what pressing it gives you, not what you are on. */

.nav-lang-item { display: flex; align-items: center; }

.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 36px;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--hub-hairline);
    border-radius: 999px;
    background: transparent;
    color: var(--hub-ink-muted);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: border-color var(--hub-transition), color var(--hub-transition);
}

.lang-toggle:hover {
    border-color: rgb(var(--hub-accent-rgb) / 0.5);
    color: var(--hub-ink);
}

.lang-toggle:focus-visible {
    outline: 2px solid rgb(var(--hub-accent-rgb) / 0.5);
    outline-offset: 2px;
}

.lang-icon { width: 15px; height: 15px; flex: none; }

@media (hover: none) and (pointer: coarse) {
    .lang-toggle { min-height: 44px; }
}