/* =============================================================================
   App store badges — rendered by templates/marketing/includes/_app_store_badges.html
   Loaded by base.html (app shell), marketing_base.html, and auth_base.html
   so badges look identical on every surface (landing, auth, help, etc.).
============================================================================= */
.app-badges-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.app-badges-heading {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-mid);
    margin: 0 0 14px;
    font-family: var(--font-body);
}

.app-badge {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border-radius: 8px;
    transition: transform var(--transition-base), opacity var(--transition-base);
    line-height: 0;
}

.app-badge:hover {
    transform: translateY(-1px);
    opacity: 0.9;
}

.app-badge img {
    display: block;
    height: 40px;
    width: auto;
}

/* "Coming soon" placeholder for the Android badge until PLAY_STORE_URL ships. */
.app-badge--coming-soon {
    position: relative;
    cursor: not-allowed;
    opacity: 0.55;
    filter: grayscale(1);
}

.app-badge--coming-soon:hover {
    transform: none;
    opacity: 0.55;
}

.app-badge-soon {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--accent-text, #2f3a2c);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 999px;
    line-height: 1.2;
}

/* Variant: hero — paired with the primary above-the-fold CTA. */
.app-badges--hero {
    margin-top: 18px;
    margin-bottom: 22px;
}

.app-badges--hero .app-badges-row {
    justify-content: center;
}

.app-badges--hero .app-badge img {
    height: 48px;
}

/* Variant: cta — beneath the "Start Free" button on banners. */
.app-badges--cta {
    margin-top: 18px;
    justify-content: center;
}

.app-badges--cta .app-badges-row {
    justify-content: center;
}

/* Variant: footer — sits inside the brand column above social links. */
.app-badges--footer {
    margin-bottom: 24px;
}

/* Mobile menu placement — badges sit at the very bottom under auth buttons. */
.mobile-menu .app-badges {
    margin-top: 16px;
    justify-content: center;
}

.mobile-menu .app-badges-row {
    justify-content: center;
}

@media (max-width: 640px) {
    .app-badge img {
        height: 36px;
    }

    .app-badges--hero .app-badge img {
        height: 42px;
    }
}

/* "Take Pensio with you" card on the in-app help page — one item, so it is a
   card, and the template composes `.card-surface` for the box (Design 2.0
   grammar, 2026-09-05). It sits in the same `.card-stack` as the PWA install
   card, so the two read as siblings because they ARE the same surface, not
   because a tint and a left accent were copied between two sheets. The bare
   `.native-app-card` class went with its rule — a hook no stylesheet declares
   is not a hook. Only the inside of the card is this component's own.

   ⚠️ **THIS SHEET IS LINKED BY BOTH SHELLS**, and `marketing-theme.css`
   declares no `--space-*` and no `--text-*` size token, so every one of them
   carries the app's light value as a fallback or the declaration is silently
   dropped on 37 pages. `--font-heading`, `--text-color` and `--text-secondary`
   are aliased by both themes and need none.
   📐 tests/core/test_css_extraction.py::test_every_template_resolves_every_token_it_references */
.native-app-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 0.5rem);
    margin-bottom: var(--space-2xs, 0.25rem);
    font-family: var(--font-heading);
    font-size: var(--text-base, 1rem);
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-color);
}

.native-app-card-header svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.native-app-card-body {
    font-size: var(--text-base-sm, 0.9375rem);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-md, 0.75rem);
}