/* ============================================
   Global responsive / mobile refinements
   ============================================ */

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* FocusOnNavigate programmatically focuses the page <h1> on navigation.
   Suppress the default focus ring so headings don't get a stray border on load. */
h1:focus,
h1:focus-visible {
    outline: none;
}

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

/* Decorative blur orbs and absolutely-positioned accents should never
   create a horizontal scrollbar on small screens. */
* {
    -webkit-tap-highlight-color: transparent;
}

/* ---------- Tablet and below ---------- */
@media (max-width: 960px) {
    /* Tighten the very large desktop section paddings */
    section {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }
}

/* ---------- Phones ---------- */
@media (max-width: 600px) {
    section {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    /* Logo showcase on the home hero */
    .logo-card {
        padding: 32px !important;
    }

    .logo-card img {
        max-width: 200px !important;
    }

    /* Floating stat card on the home hero would overflow off-screen */
    .hero-stats-card {
        position: static !important;
        margin: 20px auto 0 !important;
        display: inline-flex !important;
    }

    /* Floating "opgericht" card on the About page */
    .about-floating-card {
        position: static !important;
        margin: 16px auto 0 !important;
        display: inline-block !important;
    }

    /* Keep sticky sidebars from covering content on small screens */
    .mud-paper[style*="sticky"] {
        position: static !important;
    }
}