/* The stores' own badges, self-hosted in /assets/badges/ because the site
   makes no third-party requests (privacy.html says so). Apple's and Google's
   artwork is black and reads on both themes; Microsoft's comes in two
   colourways and the page shows the one that matches the theme.

   Heights are matched by eye across the three. Google's PNG carries its own
   clear space inside the file (the badge is 67% of the image's height, with
   a 6% margin each side), so it is drawn taller and its margin tucked, which
   is the kit's own advice for lining it up with other badges.

   Never restyle, recolour, crop or add to a badge: each kit forbids it, and
   the trademark line in the footer is what each kit asks for in return. */

.store-badges {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    vertical-align: middle;
}

.store-badges.justify-content-center {
    display: flex;
}

.store-badges a {
    display: inline-block;
    line-height: 0;
    border-radius: 7px;
    text-decoration: none;
}

.store-badges a:focus-visible {
    outline: 2px solid var(--accent, #4a90d9);
    outline-offset: 3px;
}

.store-badges img {
    display: block;
    height: 44px;
    width: auto;
}

.store-badges .badge-google img {
    height: 65px;
    margin: -11px;
}

.store-badges--large img {
    height: 56px;
}

.store-badges--large .badge-google img {
    height: 83px;
    margin: -14px;
}

[data-bs-theme="dark"] .badge-microsoft-light,
[data-bs-theme="light"] .badge-microsoft-dark {
    display: none;
}