/* Footer: after the content on long pages, at the bottom of the screen on
   short ones (body is a flex column; the footer takes the spare space above
   it). Works with the sticky-top nav. 2026-10-20. */
body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

footer.footer {
    margin-top: auto;
}

.min-w-0 {
    min-width: 0;
}

.navbar-brand img {
    width: 28px;
    height: 28px;
}

footer.footer {
    font-size: 0.875rem;
}

footer.footer a {
    text-decoration: none;
}

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

/* Mask PIN digits without type=password (avoids password-manager save prompts). */
input.lastknow-pin {
    -webkit-text-security: disc;
    text-security: disc;
}

/* Dark mode only (2026-10-19): one standard rule per outline button style.
   Bootstrap's outline-secondary / -primary / -danger text is 2.8-3.4:1 on the
   dark body and navbar (WCAG AA wants 4.5:1). Hover/active keep Bootstrap's
   solid fills, which pass. Light mode is untouched. Solid buttons pass as-is. */
[data-bs-theme=dark] .btn-outline-secondary {
    --bs-btn-color: #fff;
}

[data-bs-theme=dark] .btn-outline-primary {
    --bs-btn-color: var(--bs-primary-text-emphasis);
    --bs-btn-border-color: var(--bs-primary-text-emphasis);
}

[data-bs-theme=dark] .btn-outline-danger {
    --bs-btn-color: var(--bs-danger-text-emphasis);
    --bs-btn-border-color: var(--bs-danger-text-emphasis);
}

[data-bs-theme=dark] .lk-free {
    color: var(--bs-success-text-emphasis) !important;
}

/* Continue with X: X's black-and-white style, same outline weight as the Google button. */
[data-bs-theme=dark] .btn-outline-secondary.lk-btn-x {
    --bs-btn-color: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #e7e9ea;
    --bs-btn-active-border-color: #e7e9ea;
}

/* Sticky top nav (2026-10-20): keep anchor targets (#emails etc.) clear of
   it, and let the opened phone menu scroll when it is taller than the screen. */
html {
    scroll-padding-top: 72px;
}

@media (max-width: 767.98px) {
    .navbar.sticky-top .navbar-collapse {
        max-height: calc(100vh - 64px);
        overflow-y: auto;
    }
}