/* Shared accessibility styles for dgrlabs.co.
   Every page loads this after its own <style> block, so it must look right
   on the home page, the product pages, and the Overflight subsite alike.
   Conventions used across the site:
     - <a class="skip-link" href="#main"> is the first element in <body>,
       and the page's <main> carries id="main" tabindex="-1".
     - Repeated link text ("Learn more", "Download on the App Store") gets
       the app name in a .visually-hidden span or an aria-label.
     - Purely decorative icons and glyphs carry aria-hidden="true".
     - <button data-copy="..."> and autoplaying <video> elements are wired
       up by /assets/a11y.js. */

/* Screen-reader-only text: visually hidden, still read by assistive tech. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* "Skip to main content": off-screen until it receives keyboard focus. */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 1000;
    padding: 0.75rem 1.1rem;
    background: #ffffff;
    color: #0b0d1a;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.skip-link:focus {
    top: 1rem;
    outline: 3px solid #0b0d1a;
    outline-offset: 2px;
}

/* A focus ring that is visible on every background the site uses. Only
   keyboard focus triggers :focus-visible, so mouse users never see it. */
:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

/* The skip link lands focus here; no ring is needed on the landmark itself. */
#main:focus {
    outline: none;
}

/* Play/pause control that a11y.js places after every autoplaying video. */
.video-toggle {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.45rem 1rem;
    font: inherit;
    font-size: 0.8rem;
    line-height: 1.2;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 999px;
    cursor: pointer;
    opacity: 0.85;
}

.video-toggle:hover,
.video-toggle:focus-visible {
    opacity: 1;
}

/* Honor the OS "reduce motion" setting site-wide: stop the looping
   background animations, make transitions instant, and never leave
   content hidden behind a scroll-triggered reveal. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .fade-in {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Windows High Contrast (forced-colors) strips backgrounds, which would
   leave the gradient-filled wordmark and the 404 code invisible. */
@media (forced-colors: active) {
    .logo,
    .logo a,
    .code {
        background: none;
        -webkit-text-fill-color: currentColor;
    }
}