/*
 * 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;
}

.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;
    }
}