/* Shared by every page on fc.ms-electronics.at. Colours mirror the Fency app's
   Material palette (androidApp/.../ui/theme/Color.kt). */

:root {
    --bg: #eef3eb;
    --surface: #f6fbf3;
    --on-surface: #181d18;
    --muted: #52605a;
    --primary: #316a42;
    --on-primary: #ffffff;
    --border: #d5e0d3;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #101510;
        --surface: #171d17;
        --on-surface: #dfe4dc;
        --muted: #a4b0a4;
        --primary: #98d4a4;
        --on-primary: #003919;
        --border: #2a322a;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--bg);
    color: var(--on-surface);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
}

main {
    width: 100%;
    max-width: 30rem;
    padding: 2.5rem 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    text-align: center;
}

/* The app icon, rounded the way a launcher shows it, so it is the same thing
   the visitor then looks for in the store. */
/* Small phones: at 320px the default padding leaves the text a column about
   200px wide. */
@media (max-width: 24rem) {
    body {
        padding: 1rem;
    }

    main {
        padding: 2rem 1.25rem;
    }
}

.mark {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.25rem;
    display: block;
    border-radius: 22%;
}

h1 {
    margin: 0 0 0.75rem;
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.nowrap {
    white-space: nowrap;
}

p {
    margin: 0 0 1rem;
    color: var(--muted);
}

p:last-of-type {
    margin-bottom: 1.75rem;
}

/* Store badges. The same pair appears on every page in every language. Keep
   them in sync. Both stores require their artwork unmodified, both badges at
   the same height, the App Store one first, and clear space of a quarter of
   the badge height around each: 0.75rem at 3rem. On a phone the pair does not
   fit side by side and wraps into two centred rows. */
.stores {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.stores a {
    display: block;
    border-radius: 0.5rem;
}

.stores a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.stores img {
    display: block;
    width: auto;
    height: 3rem;
}

footer {
    margin-top: 2rem;
    font-size: 0.8125rem;
    color: var(--muted);
}

footer a {
    color: inherit;
}