/*
 * Site-wide UX polish.
 * Loaded after each page's inline <style> so these rules win on overlap.
 * Keep this file additive — never override page-specific layout.
 */

/* ──────────────────────────────────────────────────────────────────
   0. KILL HORIZONTAL OVERFLOW SITEWIDE
   Belt-and-suspenders: nothing should ever push the page wider than the
   viewport. Prevents the iOS rubber-band bounce when something leaks
   (orbs, marquees, off-screen animations, you name it).
─────────────────────────────────────────────────────────────────── */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* ──────────────────────────────────────────────────────────────────
   1. SKIP TO CONTENT
   Bulletproof visually-hidden pattern so it never affects layout.
   First focusable element on every page. WCAG 2.1 AA requirement.
─────────────────────────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    left: 0; top: 0;
    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;
    background: #1abde1;
    color: #000;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.02em;
}
.skip-link:focus,
.skip-link:focus-visible {
    left: 12px;
    top: 12px;
    width: auto;
    height: auto;
    padding: 10px 16px;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    border-radius: 8px;
    outline: 2px solid #fff;
    outline-offset: 2px;
    z-index: 9999;
}

/* ──────────────────────────────────────────────────────────────────
   2. KEYBOARD FOCUS RING
   Visible cyan ring only when navigating by keyboard (not mouse).
   :focus-visible respects the user's intent.
─────────────────────────────────────────────────────────────────── */
*:focus-visible {
    outline: 2px solid #1abde1;
    outline-offset: 3px;
    border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #1abde1;
    outline-offset: 3px;
}
/* Hide default UA outline on click — only show on keyboard nav */
*:focus:not(:focus-visible) {
    outline: none;
}

/* ──────────────────────────────────────────────────────────────────
   3. BRAND-COLORED TEXT SELECTION
─────────────────────────────────────────────────────────────────── */
::selection {
    background: rgba(26, 189, 225, 0.32);
    color: #ffffff;
}
::-moz-selection {
    background: rgba(26, 189, 225, 0.32);
    color: #ffffff;
}

/* ──────────────────────────────────────────────────────────────────
   4. CUSTOM SCROLLBAR (Webkit + Firefox)
   Subtle, theme-aware, doesn't fight the dark UI.
─────────────────────────────────────────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(26,189,225,0.35) rgba(255,255,255,0.04);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
::-webkit-scrollbar-thumb {
    background: rgba(26,189,225,0.25);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(26,189,225,0.55); background-clip: padding-box; }

/* ──────────────────────────────────────────────────────────────────
   5. IMAGE QUALITY + LAYOUT
   Prevent layout shift and ensure crisp rendering.
─────────────────────────────────────────────────────────────────── */
img {
    image-rendering: -webkit-optimize-contrast;
    max-width: 100%;
    height: auto;
}
img[loading="lazy"] {
    content-visibility: auto;
}

/* ──────────────────────────────────────────────────────────────────
   6. INTERACTIVE TOUCH TARGETS
   Make every clickable element at least 44px tall on touch devices.
─────────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
    a, button, [role="button"], input[type="submit"], input[type="button"] {
        min-height: 44px;
    }
}

/* ──────────────────────────────────────────────────────────────────
   7. SMOOTH SECTION SCROLLING
   Account for the 56px sticky nav when anchor-linking.
─────────────────────────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 72px;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ──────────────────────────────────────────────────────────────────
   8. LINK / BUTTON CURSORS + TAP HIGHLIGHT
   Belt-and-suspenders to ensure pointer cursor on all clickable.
   Custom tap-highlight uses brand cyan instead of default gray flash.
─────────────────────────────────────────────────────────────────── */
a[href], button:not([disabled]), [role="button"], [onclick] {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(26, 189, 225, 0.18);
}
button[disabled] {
    cursor: not-allowed;
}

/* ──────────────────────────────────────────────────────────────────
   9. PRINT FALLBACK
   Strip dark-mode chrome when someone prints a case study or blog post.
─────────────────────────────────────────────────────────────────── */
@media print {
    body { background: #fff !important; color: #000 !important; }
    nav, footer, .sticky-cta, .trust-strip, .hub-cta-card,
    .blog-cta-strip, .cs-cta, .closer-section, .cta-section,
    .final-cta, #navMobileMenu, #navHamburger { display: none !important; }
    a { color: #0066cc !important; text-decoration: underline !important; }
    .post-card, .cs-card { page-break-inside: avoid; }
}

/* ──────────────────────────────────────────────────────────────────
   10. RESPECT REDUCED MOTION
   Disable bouncy animations for users who request it.
─────────────────────────────────────────────────────────────────── */
@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;
    }
}

/* ──────────────────────────────────────────────────────────────────
   11. ACTIVE NAV INDICATOR
   Adds a subtle cyan dot under the current page's nav link.
   Works on top of existing `.nav-links a.active` color treatment.
─────────────────────────────────────────────────────────────────── */
.nav-links a.active {
    position: relative;
    color: #ffffff !important;
}
.nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #1abde1;
    box-shadow: 0 0 8px rgba(26,189,225,0.6);
}

/* ──────────────────────────────────────────────────────────────────
   12. CALENDLY BUTTON LOADING STATE
   Tiny visual feedback when a user clicks a Calendly link before the
   popup widget script finishes loading.
─────────────────────────────────────────────────────────────────── */
[data-loading="true"] {
    pointer-events: none;
    opacity: 0.78;
    cursor: progress;
}

/* ──────────────────────────────────────────────────────────────────
   13. SOFT-YES FORM SUBMIT STATE
   Submit buttons get a subtle dim while in-flight.
─────────────────────────────────────────────────────────────────── */
button[disabled],
input[type=submit][disabled] {
    opacity: 0.55;
    cursor: wait;
}