/*
 * Platform Footer
 *
 * Styles for <platform-footer />. Structure and behaviour are shared; colour is the
 * product's. A product sets the --platform-footer-* tokens below in its own stylesheet,
 * after this one (on :root or on .platform-footer). The defaults are neutral and each
 * text colour meets WCAG 2.2 AA contrast (4.5:1) against the default background; a
 * product that overrides them owns that check for its own values.
 *
 * Reading order is DOM order: nothing here reorders content, so focus order follows
 * the visual order at every width.
 */

:root {
    --platform-footer-bg: #1f2933;
    --platform-footer-text: #d9dee4;
    --platform-footer-heading: #ffffff;
    --platform-footer-link: #ffffff;
    --platform-footer-link-hover: #d9dee4;
    --platform-footer-muted: #b8c0ca;
    --platform-footer-focus: #ffffff;
    --platform-footer-border: rgba(255, 255, 255, 0.08);
    --platform-footer-max-width: 1180px;
    --platform-footer-columns: repeat(auto-fit, minmax(12rem, 1fr));
    --platform-footer-gap: 3.5rem;
    /* A link inside a sentence is underlined by default, so it is not told apart by
       colour alone (WCAG 2.2 SC 1.4.1). A product that sets "none" owns that check. */
    --platform-footer-inline-link-decoration: underline;
}

/* On a page shorter than the window the footer meets the window's bottom edge; on a longer page it
   follows the content. The body is a column at least one window tall and its main takes the space
   left over. Normal flow only: nothing here positions the footer, so it never covers the page.
   It applies where main is a child of body, as a layout renders it; a shell with no footer (an
   error page) that loads this stylesheet gets the same column. The :where() keeps each selector's
   weight that of a bare html, body or main, so a product's own rule for those elements still wins
   as it did when HumanCapital held this rule in its own stylesheet. */
html:where(:has(> body > main)) {
    min-height: 100%;
}

body:where(:has(> main)) {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main:where(body > *) {
    flex: 1;
}

.platform-footer {
    background: var(--platform-footer-bg);
    color: var(--platform-footer-text);
    margin-top: 1rem;
    border-top: 1px solid var(--platform-footer-border);
    flex-shrink: 0;
}

.platform-footer__inner {
    width: min(100% - 2rem, var(--platform-footer-max-width));
    margin-inline: auto;
    padding: 0.85rem 0;
}

.platform-footer__rail {
    display: grid;
    grid-template-columns: var(--platform-footer-columns);
    gap: var(--platform-footer-gap);
    align-items: start;
}

.platform-footer__group {
    min-width: 0;
}

/* Two classes, so product-wide heading rules do not restyle the footer's headings. */
.platform-footer .platform-footer__heading {
    margin: 0 0 0.55rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--platform-footer-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.2;
}

.platform-footer .platform-footer__list,
.platform-footer .platform-footer__address {
    margin: 0;
    padding: 0;
    list-style: none;
    font-style: normal;
}

.platform-footer__text {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--platform-footer-text);
}

.platform-footer__text a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--platform-footer-link);
    text-decoration: none;
    transition: color 0.18s ease;
}

.platform-footer__text a.platform-footer__inline-link {
    text-decoration: var(--platform-footer-inline-link-decoration);
}

.platform-footer__text a:hover {
    color: var(--platform-footer-link-hover);
    text-decoration: underline;
}

/* A contact with a label ("Technical support", "Privacy"): the label, the icon and the
   link text are centred on one line, so the label's text and the link's text share a
   baseline. The link keeps its own icon-and-text alignment; it drops to the next line
   when the two do not fit. */
.platform-footer .platform-footer__text.platform-footer__labelled {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.45rem;
}

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

/* Inline SVG by default, or a product-supplied icon element (an icon font's <i>). */
.platform-footer__icon {
    width: 1rem;
    flex-shrink: 0;
    text-align: center;
}

svg.platform-footer__icon {
    height: 1rem;
}

.platform-footer .platform-footer__entity,
.platform-footer .platform-footer__copyright {
    margin: 0.65rem 0 0;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--platform-footer-muted);
}

/* With PlatformFooter:EntityPlacement "OfficeColumn" the entity name and registration
   number lead the Office group above the address, as ordinary lines of that group rather
   than as the muted trailer they are in the Legal group. */
.platform-footer .platform-footer__text.platform-footer__entity {
    margin: 0 0 0.35rem;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--platform-footer-text);
}

.platform-footer__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 768px) {
    .platform-footer__inner {
        padding: 1rem 0;
    }

    .platform-footer__rail {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .platform-footer .platform-footer__entity,
    .platform-footer .platform-footer__copyright {
        margin-top: 0.45rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .platform-footer__text a {
        transition: none;
    }
}