/* --------------------------------------------------------------------------
   Footer. `.footer` is overridden by 61 and 72, `.footerLogo` by 65 and rewritten
   by js/Cust/71/71.js, and `--footer-height` is tuned by 65.
   -------------------------------------------------------------------------- */
.inn-shell .footer {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--k-gap);
    min-height: var(--footer-height);
    padding: 10px var(--k-pad-side);
    border-top: var(--k-footer-border);
    background: var(--k-footer-bg);
    color: var(--k-footer-fg);
}

/* Min side 2026 puts the focus ring on the footer's own text colour, because the footer stands on the
   brand rather than on `--c-bg`, and the page-wide ring (which is `--c-fg`) can disappear against it.
   Same reasoning applies here the moment a tenant paints the footer, so the same rule is adopted —
   `shell.css:304`. */
.inn-shell .footer :focus-visible {
    outline-color: var(--k-footer-fg);
}

.inn-shell .footer .footer-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-gap);
    width: 100%;
    max-width: none;
    padding: 0;
}

/* One wrapping inline row — organisation name, address, e-mail, phone, privacy link — per the
   prototype (Innmelding.dc.html:1051). It replaced a <ul>, so there is no list-style to reset any
   more; the gap is what separates the items visually, and they stay separate elements so a screen
   reader still gets boundaries between them. */
.inn-shell .footer .inn-footer-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    font-size: 1rem;
}

.inn-shell .footer .inn-footer-org {
    font-weight: 700;
}

/* The prototype gives both footer links a 40 px minimum height. That is a touch-target size, not
   spacing: a mailto and a privacy link on a phone are the two things most likely to be mis-tapped. */
.inn-shell .footer .inn-footer-meta a,
.inn-shell .footer .inn-footer-consio {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* inline-flex collapses the whitespace around the image that an inline <a> would otherwise
   render, so the link box is the logo and nothing more. */
.inn-shell .footer .inn-footer-consio {
    text-decoration: none;
}

/* `:not(.btn)` is here only to match the specificity of the generic link rule above
   (`.inn-body a:not(.btn):not(.inn-skip)`, which is 0-3-1). Without it this rule is 0-2-1, loses,
   and `--k-footer-lenke` silently stops working — the two tokens resolve to the same colour today,
   so nothing would look wrong until a tenant overrode the footer link colour and was ignored.
   Equal specificity plus a later position in this file makes the footer token win. */
.inn-shell .footer a:not(.btn) {
    color: var(--k-footer-lenke);
}

/* The Consio mark is swapped by the tenant's own sheet, not from here, and NOT through a custom
   property — see the note in `Cust/72/72.css`. A relative `url()` inside a custom property is resolved
   against the DOCUMENT, not against the stylesheet that declared it, so `--k-footer-logo: url("../../…")`
   broke as soon as the app was served from a virtual directory. The `src` the component writes is never
   rewritten either way, so `Cust/71/71.js` keeps finding the literal `PoweredByConsio.png` it matches on. */
.inn-shell .footerLogo {
    max-height: 28px;
    width: auto;
}