/*
   The download site's whole stylesheet.

   This replaces Bootstrap, the glyphicon shim and the two hand-grown sheets that preceded it. The rules
   here are the only ones the site has, so anything unused is a mistake rather than a leftover: when a
   component stops using a class, the class goes with it.

   Everything is driven by the custom properties below. They are the colours the admin site builds its
   theme from (AdminSite/Theme/EivaTheme.cs), so the two sites stay recognisably one product.
*/

:root {
    /* Brand */
    --navy: #21294a;
    --navy-soft: #2c3559;
    --blue: #5990ce;
    --blue-strong: #3f74b0;
    --lime: #cadb2a;

    /* Ink and ground */
    --ink: #151a29;
    --muted: #5b6377;
    --line: #dfe3ed;
    --line-soft: #eceff5;
    --surface: #ffffff;
    --ground: #f4f6fa;

    /* Status */
    --warn-ink: #7a4f06;
    --warn-deep: #5c3b04;
    --warn-ground: #fdf6e6;
    --warn-line: #e8d29a;
    --good: #2f7d5a;

    /* Spacing, on a 4px step so vertical rhythm survives being edited by somebody in a hurry */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;

    --radius: 8px;
    --radius-lg: 14px;

    --shadow-sm: 0 1px 2px rgba(21, 26, 41, .06), 0 1px 3px rgba(21, 26, 41, .08);
    --shadow-md: 0 4px 12px rgba(21, 26, 41, .08);

    --font: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

    --measure: 68ch;
    --page: 1180px;
}

/* ---------- Reset ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

/* Column layout so the footer sits at the bottom of the window on a short page - the front page is
   one image tall, and the footer used to stop halfway up with grey below it. */
body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
}

h1, h2, h3, h4 {
    color: var(--navy);
    line-height: 1.25;
    margin: 0 0 var(--s-3);
    font-weight: 700;
}

h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); }
h3 { font-size: 1.125rem; }

p { margin: 0 0 var(--s-4); }

a {
    color: var(--blue-strong);
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:hover { color: var(--navy); }

/* One visible focus treatment everywhere. Half the site is reachable only by keyboard for some
   customers, and the old sheet spent a rule hiding the ring rather than styling it. */
:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
    border-radius: 3px;
}

/* The h1 is focused programmatically by <FocusOnNavigate> on every navigation, which is not a user
   action and should not be announced with a ring. */
h1:focus,
h1:focus-visible {
    outline: none;
}

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

.skip-link {
    position: absolute;
    left: var(--s-4);
    top: -4rem;
    z-index: 100;
    background: var(--navy);
    color: #fff;
    padding: var(--s-2) var(--s-4);
    border-radius: var(--radius);
    text-decoration: none;
    transition: top .15s ease;
}

.skip-link:focus {
    top: var(--s-4);
    color: #fff;
}

/* ---------- Shell ---------- */

.shell {
    width: min(100% - 2rem, var(--page));
    margin-inline: auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    min-height: 72px;
}

.site-header__logo {
    display: inline-flex;
    align-items: center;
}

.site-header__logo img {
    display: block;
    width: 152px;
    height: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: var(--s-1);
    flex-wrap: wrap;
}

/* Below this the three links and the logo fight over one row and the nav wraps into an awkward second
   line beside it. Stacking is tidier, and the negative margin pulls the first link's own padding back
   so its icon lines up with the left edge of the logo. */
@media (max-width: 620px) {
    .site-header__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s-2);
        padding-block: var(--s-3);
    }

    .site-nav {
        margin-left: calc(var(--s-3) * -1);
    }

    /* The header is a column here, so the search's 14rem flex-basis became its height, which left a tall
       empty box with the magnifier in the middle of it. Let it size to its input instead. */
    .site-header .search {
        flex: none;
        align-self: stretch;
        max-width: none;
        margin-left: 0;
    }
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--navy);
    text-decoration: none;
    font-weight: 600;
    font-size: .9375rem;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius);
}

.site-nav svg {
    flex: 0 0 auto;
    color: var(--muted);
}

/* Icon only, set between two vertical lines that run the full height of the header, as on eiva.com. */
.site-nav a.site-nav__account {
    align-self: stretch;
    margin-left: var(--s-3);
    padding: 0 var(--s-5);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    border-radius: 0;
}

.site-nav a:hover svg,
.site-nav a.is-current svg {
    color: var(--blue-strong);
}

.site-nav a:hover {
    background: var(--ground);
}

.site-nav a.is-current {
    box-shadow: inset 0 -3px 0 var(--lime);
    /* The rounded corners would clip the ends of the line into curves. */
    border-radius: 0;
}

/* The hero runs edge to edge, so the vertical rhythm belongs to the blocks inside main rather than
   to main itself. Growing pushes the footer down on a short page. */
main {
    display: block;
    flex: 1 0 auto;
}

.site-footer {
    margin-top: auto;
}

.page-body {
    padding-block: var(--s-6) var(--s-8);
}

/* ---------- Hero ---------- */

.hero {
    border-bottom: 1px solid var(--line);
    background: var(--ground);
}

.hero__inner {
    padding-block: var(--s-5) var(--s-6);
}

/* The banner. The picture is dark at the top, where the text sits. It is centred. The gradient underneath is
   only the fallback for a missing file. */
.hero__banner {
    padding: var(--s-8) var(--s-7) var(--s-6);
    color: #fff;
    background:
        url("../images/hero-banner.jpg") center center / cover no-repeat,
        linear-gradient(135deg, #00406e, #0a7a8c);
}

.hero__banner h1 {
    color: #fff;
}

.hero__lead {
    max-width: var(--measure);
    margin-bottom: var(--s-4);
    font-size: 1.0625rem;
    color: #fff;
}

.hero__contacts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-6);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1.375rem;
}

.hero__contacts li {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.hero__contacts svg {
    flex: none;
    color: var(--lime);
}

.hero__contacts a {
    color: #fff;
    text-decoration: none;
}

.hero__contacts a:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .hero__banner {
        padding: var(--s-6) var(--s-5);
    }

    .hero__contacts {
        font-size: 1.125rem;
    }
}

/* The licence activator is the one thing on the front page somebody might have come for without
   picking a product first, so it is an action rather than a sentence with a link buried in it. */
.hero__action {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
    margin: var(--s-4) 0;
    padding: var(--s-4) var(--s-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.hero__action .btn--primary,
.release__actions .btn--primary {
    background: var(--lime);
    color: var(--navy);
}

.hero__action .btn--primary:hover,
.release__actions .btn--primary:hover {
    background: #bccd1f;
    color: var(--navy);
}

.hero__action-text {
    flex: 1 1 16rem;
    min-width: 0;
}

.hero__action-title {
    display: block;
    font-weight: 700;
    color: var(--navy);
}

.hero__action-note {
    margin: 2px 0 0;
    font-size: .875rem;
    color: var(--muted);
}

.hero__links {
    max-width: var(--measure);
    margin: 0 0 var(--s-5);
    color: #fff;
}

.hero__links a {
    color: #fff;
    font-weight: 700;
}

.hero__links a:hover {
    color: var(--lime);
}

/* ---------- Two column layout ---------- */

.layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
    align-items: start;
}

@media (min-width: 900px) {
    .layout {
        grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
        gap: var(--s-7);
    }

    .product-nav {
        position: sticky;
        top: 96px;
    }
}

/* ---------- Product navigation ---------- */

.product-nav {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.product-nav__title {
    margin: 0;
    padding: var(--s-4) var(--s-4) var(--s-2);
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.group {
    border-top: 1px solid var(--line-soft);
}

.group:first-of-type {
    border-top: 0;
}

.group__heading {
    margin: 0;
    font-size: inherit;
}

.group__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    width: 100%;
    padding: var(--s-3) var(--s-4);
    background: none;
    border: 0;
    font: inherit;
    font-weight: 600;
    color: var(--navy);
    text-align: left;
    cursor: pointer;
}

.group__toggle:hover {
    background: var(--ground);
}

.group__chevron {
    flex: 0 0 auto;
    transition: transform .18s ease;
    color: var(--muted);
}

.group__toggle[aria-expanded="true"] .group__chevron {
    transform: rotate(180deg);
}

.group__items {
    list-style: none;
    margin: 0;
    padding: 0 var(--s-3) var(--s-3);
}

.group__items a {
    display: block;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius);
    color: var(--ink);
    text-decoration: none;
    font-size: .9375rem;
}

.group__items a:hover {
    background: var(--ground);
    color: var(--navy);
}

.group__items a.is-current {
    color: var(--navy);
    font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--lime);
    border-radius: 0;
}

/* ---------- Releases ---------- */

.section + .section {
    margin-top: var(--s-7);
}

.section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
    flex-wrap: wrap;
}

.section__head h2 {
    margin: 0;
}

.section__count {
    color: var(--muted);
    font-size: .875rem;
}

.release-list {
    display: grid;
    gap: var(--s-4);
}

.release {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--s-5);
}

/* Grid rather than a wrapping flex row. With flex, the actions dropped to a second line as soon as the
   title stopped fitting, so two cards side by side laid out differently purely because one release had a
   longer name. Here the title column absorbs the difference by wrapping inside itself and the buttons
   stay put, so every card in a list reads the same. */
.release__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--s-4);
}

@media (max-width: 640px) {
    .release__head {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Stacked, the actions sit on their own row and Download would start wherever the info icon and the
       notes link happened to leave it - a different place on every card. Pushing it to the right edge
       gives it one position again. */
    .release__actions {
        width: 100%;
    }

    .release__actions .btn--primary {
        margin-left: auto;
    }
}

.release__title {
    min-width: 0;
}

.release__name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--navy);
}

.release__version {
    color: var(--muted);
    font-weight: 600;
}

/* The heading doubles as the disclosure control for the checksum. The download button stays outside it:
   hiding the thing people came for behind a toggle would be a poor trade for a tidier card. */
.release__toggle {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.release__toggle:hover {
    color: var(--blue-strong);
}

.release__disclose {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    flex: 0 0 auto;
    padding: 2px var(--s-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--ground);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--muted);
    white-space: nowrap;
}

.release__toggle:hover .release__disclose {
    border-color: var(--blue);
    color: var(--blue-strong);
}

.release__chevron {
    flex: 0 0 auto;
    transition: transform .18s ease;
}

.release__toggle[aria-expanded="true"] .release__chevron {
    transform: rotate(180deg);
}

.release__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-4);
    margin: var(--s-2) 0 0;
    color: var(--muted);
    font-size: .875rem;
}

.release__meta div {
    display: flex;
    gap: var(--s-1);
}

.release__meta dt {
    font-weight: 600;
}

.release__meta dd {
    margin: 0;
}

.release__actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex-wrap: wrap;
}

.release__footer {
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line-soft);
}

.empty {
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius-lg);
    padding: var(--s-6);
    text-align: center;
    color: var(--muted);
}

.empty p:last-child {
    margin-bottom: 0;
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.btn--primary {
    background: var(--navy);
    color: #fff;
}

.btn--primary:hover {
    background: var(--navy-soft);
    color: #fff;
}

.btn--quiet {
    background: transparent;
    border-color: var(--line);
    color: var(--navy);
}

.btn--quiet:hover {
    background: var(--ground);
    color: var(--navy);
}

.btn--icon {
    padding: var(--s-2);
    background: transparent;
    border-color: transparent;
    color: var(--muted);
    border-radius: 50%;
    line-height: 0;
}

.btn--icon:hover {
    background: var(--ground);
    color: var(--navy);
}

.link-plain {
    color: var(--blue-strong);
    font-weight: 600;
    text-decoration: none;
}

.link-plain:hover {
    text-decoration: underline;
}

/* ---------- Checksum ---------- */

.checksum {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    flex-wrap: wrap;
    min-width: 0;
    font-size: .8125rem;
    color: var(--muted);
}

.checksum__label {
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--navy);
}

.checksum__value {
    font-family: var(--mono);
    font-size: .8125rem;
    color: var(--ink);
    background: var(--ground);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2px var(--s-2);
    /* A 64 character hash has to wrap rather than push the card sideways on a phone. */
    overflow-wrap: anywhere;
    word-break: break-all;
    min-width: 0;
}

.checksum__copied {
    color: var(--good);
    font-weight: 600;
}

.checksum__manual {
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Notice ---------- */

.notice {
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
    background: var(--warn-ground);
    border: 1px solid var(--warn-line);
    border-radius: var(--radius-lg);
    padding: var(--s-4) var(--s-5);
    margin-bottom: var(--s-5);
    color: var(--warn-ink);
}

.notice__body {
    flex: 1 1 auto;
    min-width: 0;
}

.notice__body p {
    margin: 0;
}

.notice__body p + p {
    margin-top: var(--s-2);
}

.notice strong {
    color: var(--warn-deep);
}

.notice a {
    color: var(--warn-deep);
    font-weight: 700;
}

.notice__icon {
    flex: 0 0 auto;
    margin-top: 3px;
}

.notice__dismiss {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: var(--s-1);
    margin: -2px -4px 0 0;
    color: inherit;
    cursor: pointer;
    border-radius: var(--radius);
    line-height: 0;
}

.notice__dismiss:hover {
    background: rgba(122, 79, 6, .12);
}

/* ---------- Prose, for the verification page ---------- */

.prose {
    max-width: var(--measure);
}

.prose h2 {
    margin-top: var(--s-6);
}

.prose h3 {
    margin-top: var(--s-5);
}

.prose ol,
.prose ul {
    padding-left: 1.25rem;
    margin: 0 0 var(--s-4);
}

.prose li + li {
    margin-top: var(--s-2);
}

.prose code {
    font-family: var(--mono);
    font-size: .875em;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1px 5px;
}

.prose pre {
    background: var(--navy);
    color: #eef1f8;
    padding: var(--s-4);
    border-radius: var(--radius);
    overflow-x: auto;
    font-size: .875rem;
}

.prose pre code {
    background: none;
    border: 0;
    color: inherit;
    padding: 0;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--s-5);
    margin-bottom: var(--s-5);
}

.card > :last-child {
    margin-bottom: 0;
}

.steps {
    counter-reset: step;
    list-style: none;
    padding-left: 0;
}

.steps li {
    position: relative;
    padding-left: 2.25rem;
    margin-bottom: var(--s-3);
}

.steps li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.625rem;
    height: 1.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy);
    color: #fff;
    border-radius: 50%;
    font-size: .8125rem;
    font-weight: 700;
}

/* ---------- Modal ---------- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-4);
    background: rgba(21, 26, 41, .55);
}

.modal__box {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px rgba(21, 26, 41, .25);
    width: min(100%, 560px);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: var(--s-5);
}

.modal__head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
}

.modal__head h2 {
    margin: 0;
    font-size: 1.125rem;
}

.modal__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--s-5);
}

/* ---------- Footer ---------- */

.site-footer {
    position: relative;
    border-top: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    font-size: .875rem;
}

.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-4);
    flex-wrap: wrap;
    padding-block: var(--s-5);
}

.site-footer p {
    margin: 0;
}

.site-footer button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--blue-strong);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.site-footer button:hover {
    color: var(--navy);
}

/* The small "Cookies?" tab the consent banner used to leave at the bottom left. It is fixed to the bottom
   left of the window, a little in from the edge and with square corners, as on eiva.com. */
.site-footer .site-footer__cookies {
    position: fixed;
    left: var(--s-4);
    bottom: 0;
    z-index: 10;
    padding: 3px var(--s-2);
    border-radius: 0;
    background: #7a7f94;
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
}

.site-footer .site-footer__cookies:hover {
    background: var(--navy);
    color: #fff;
}

/* The full footer, after eiva.com: dark, with the Aarhus harbour fading in along the bottom. The picture is a
   background rather than an <img>, as there, so the text stays real text on top of it. */
.site-footer--rich {
    --footer-image: url("../images/Footer-small-Aarhus-harbour-with-fading_w479_crop_q70.jpg");
    /* A panel exactly as wide as the page content above it (the hero and the product list), with the
       page showing either side of it, as on eiva.com. */
    width: min(100% - 2rem, var(--page));
    margin-inline: auto;
    border-top: 0;
    background:
        linear-gradient(to bottom, #262626 0%, rgba(38, 38, 38, 0) 55%),
        var(--footer-image) center bottom / cover no-repeat,
        #262626;
    color: #fff;
    font-size: .8125rem;
}

/* The same three sizes and breakpoints as eiva.com. */
@media (min-width: 480px) {
    .site-footer--rich {
        --footer-image: url("../images/Footer-medium-Aarhus-harbour-with-fading_w767_crop_q70.jpg");
    }
}

@media (min-width: 768px) {
    .site-footer--rich {
        --footer-image: url("../images/Large-Aarhus-harbour-with-fading_w2000_crop_q70.jpg");
    }
}

/* Inside the panel the text is inset from its edges rather than lined up with them. */
.site-footer--rich .site-footer__content {
    width: auto;
    margin-inline: 0;
    padding-inline: clamp(var(--s-4), 5vw, var(--s-7));
}

.site-footer__content {
    display: flex;
    flex-direction: column;
    gap: var(--s-8);
    min-height: 36rem;
    padding-top: 7rem;
    padding-bottom: var(--s-6);
}

.site-footer__cols {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-6) var(--s-8);
}

.site-footer__col--wide {
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
}

.site-footer--rich h2 {
    margin: 0 0 var(--s-4);
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
}

.site-footer--rich address {
    font-style: normal;
}

.site-footer--rich p {
    margin: 0;
}

.site-footer__vat {
    margin-top: var(--s-5) !important;
}

.site-footer--rich a {
    color: #fff;
    text-decoration: none;
}

.site-footer--rich a:hover {
    text-decoration: underline;
}

.site-footer__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-top: auto;
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-5);
}

.site-footer__social {
    display: flex;
    gap: var(--s-3);
}

.site-footer__logo img {
    display: block;
    filter: brightness(0) invert(1);
}

/* ---------- Blazor's own error strip ---------- */

#blazor-error-ui {
    background: #ffeb3b;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}

/* ---------- Product search ---------- */

.search {
    position: relative;
    flex: 1 1 14rem;
    max-width: 22rem;
    margin-left: auto;
}

.search__icon {
    position: absolute;
    left: var(--s-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.search__input {
    width: 100%;
    padding: var(--s-2) var(--s-3) var(--s-2) 2.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--ground);
    font: inherit;
    font-size: .9375rem;
    color: var(--ink);
}

.search__input:focus {
    background: var(--surface);
}

.search__results {
    position: absolute;
    top: calc(100% + var(--s-1));
    left: 0;
    right: 0;
    z-index: 40;
    margin: 0;
    padding: var(--s-1);
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.search__results li {
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius);
    cursor: pointer;
}

.search__results li.is-active,
.search__results li:hover {
    background: var(--ground);
}

.search__name {
    font-weight: 600;
    color: var(--navy);
}

.search__group,
.search__empty {
    font-size: .875rem;
    color: var(--muted);
}

.search__empty {
    padding: var(--s-2) var(--s-3);
    cursor: default;
}

@media (max-width: 620px) {
    .search {
        max-width: none;
        width: 100%;
        margin-left: 0;
    }
}

/* Focus moved here by the search box; the ring would only be noise around a whole list. */
.releases:focus {
    outline: none;
}

/* A search result scrolls to a release; the sticky header would otherwise sit on top of it. */
.releases,
.release {
    scroll-margin-top: 6rem;
}

.release:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--lime), var(--shadow-sm);
}

.search__version {
    margin-left: var(--s-1);
    font-weight: 400;
    color: var(--muted);
}

.search__where {
    text-align: right;
}

/* The sentence that introduces the e-mail address and phone number sits right on top of them. */
.hero__links--ask {
    margin-bottom: var(--s-3);
}

/* The front page icon sits centred in the column beside the product list. */
.front-icon {
    display: flex;
    justify-content: center;
    padding-block: var(--s-6);
    color: var(--line);
}

@media (min-width: 900px) {
    /* Spans both columns of the layout, so it sits in the middle of the page body; the product list is on
       top of its empty left side. */
    .front-icon {
        grid-column: 1 / -1;
        grid-row: 1;
        pointer-events: none;
    }

    .product-nav {
        grid-column: 1;
        grid-row: 1;
        z-index: 1;
    }
}