/* ============================================================================
 * corxor-premium-polish.css
 * ----------------------------------------------------------------------------
 * Subtle, site-wide polish that elevates the feel from "clean enterprise"
 * to "premium enterprise". Every rule is intentionally minimal — the goal
 * is to nudge perception, not redesign anything.
 *
 * Loaded LAST (after corxor-clean.css and corxor-qs-light-fix.css) so it
 * has the final word on cosmetic details without overriding structure.
 *
 * Scope: cosmetic only.
 *   • No layout changes
 *   • No color palette changes (uses existing --cx-* tokens)
 *   • No JavaScript behavior changes
 *   • Dark-mode safe — every rule that touches color uses tokens or
 *     covers both themes explicitly
 *
 * The eight golden touches:
 *   1. Better typography rendering (kerning, ligatures, optical sizing)
 *   2. Branded text-selection color
 *   3. Premium focus ring (visible + accessible + brand-coherent)
 *   4. Slim branded scrollbar (Mac + Windows)
 *   5. Sticky-header-aware in-page-anchor scroll padding
 *   6. Subtle button press feedback (translate-y + active state)
 *   7. Animated link underline for prose links (offset + thickness)
 *   8. Smooth image loading (no jarring layout shift)
 * ========================================================================= */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. TYPOGRAPHY — finer rendering
   The body already has -webkit-font-smoothing: antialiased. Add the
   Apple-style optical text rendering hints plus opentype features so
   the Inter and Rajdhani families look the same on the web as they
   do in design tools (kerning + standard ligatures + small numerals
   in headings). Has no effect on browsers that don't support the
   property — perfectly progressive enhancement.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html {
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* Headings — slightly tighter tracking + lining numerals so prices,
   stats, version numbers ("v1.0.910", "12ms", "95 endpoints") line up
   visually instead of varying width. */
h1, h2, h3, h4, h5, h6,
.cx-h1, .cx-h2, .cx-h3,
.qs-h1, .qs-section-title, .qs-subhead {
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "tnum" 1, "lnum" 1;
    letter-spacing: -0.011em;
}

/* Lining figures on prose tabular surfaces (cards with numbers) */
.qs-price-amount, .cx-cust-stat-num, [class*="-stat-num"], time, .small {
    font-variant-numeric: tabular-nums lining-nums;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. BRANDED SELECTION COLOR
   Default browser selection is a generic blue. A brand-tinted selection
   color is one of the small details Stripe, Linear, Vercel etc. all
   use — invisible until you go to copy text, then it whispers "premium".
   Light mode: cyan tint (matches --cx-accent #0891b2)
   Dark mode:  brighter cyan (#22d3ee) for contrast on dark bg
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

::selection {
    background: rgba(8, 145, 178, 0.22);
    color: inherit;
    text-shadow: none;
}
html[data-cx-theme="dark"] ::selection {
    background: rgba(34, 211, 238, 0.30);
    color: inherit;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. PREMIUM FOCUS RING
   Browser default focus rings look like Windows 95 — but removing them
   breaks accessibility (WCAG 2.4.7). The premium answer: a custom ring
   that's:
     • only visible for keyboard navigation (:focus-visible, not :focus)
     • brand-coherent (cyan)
     • offset from the element so it doesn't crowd the design
     • generous in radius
   Mouse clicks no longer paint the ring — they did historically and
   that was the legitimate reason designers nuked outlines entirely.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:focus-visible {
    outline: 2px solid #06b6d4;
    outline-offset: 3px;
    border-radius: 4px;
}
button:focus-visible,
.btn:focus-visible,
.cx-btn-primary:focus-visible,
.qs-btn:focus-visible,
.auth-btn:focus-visible {
    outline-offset: 4px;
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.18);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    border-color: #06b6d4;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
}
/* Remove rings from mouse interaction without breaking keyboard a11y */
:focus:not(:focus-visible) { outline: none; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. SLIM BRANDED SCROLLBAR
   Hides the chunky default scrollbar without compromising scrollability.
   Firefox: scrollbar-width: thin
   WebKit/Blink: ::-webkit-scrollbar 8px with cool gray thumb that
   brightens on hover. Macs hide their scrollbars by default so this
   only really shows on Windows + Linux + overlay-disabled browsers —
   which is exactly where the default looks worst.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

* { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.35) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.30);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: rgba(8, 145, 178, 0.55); }
html[data-cx-theme="dark"] * { scrollbar-color: rgba(148, 163, 184, 0.25) transparent; }
html[data-cx-theme="dark"] *::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.20);
}
html[data-cx-theme="dark"] *::-webkit-scrollbar-thumb:hover {
    background-color: rgba(34, 211, 238, 0.45);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. STICKY-HEADER-AWARE SCROLL PADDING
   In-page anchors (#overview, #pricing, etc.) currently land with the
   target heading hidden behind the sticky header. Adding scroll-padding-top
   to the root element offsets every #anchor jump by the header height,
   so the heading lands at a comfortable distance below it. This is the
   single CSS line that GitHub, MDN, Stripe Docs etc. all use.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html {
    scroll-padding-top: calc(var(--cx-header-h, 64px) + 12px);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. BUTTON PRESS FEEDBACK
   Mouse-down on a button feels static today. A 1-frame translate-y
   while the click is held gives the tactile "I pressed it" feedback
   that premium apps (Linear, Notion, Stripe) all use. Doesn't override
   custom button transforms; just adds the active-state nudge if no
   transform is already declared.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.btn:active:not(:disabled),
.cx-btn-primary:active:not(:disabled),
.cx-btn:active:not(:disabled),
.qs-btn:active:not(:disabled),
.auth-btn:active:not(:disabled),
button[type="submit"]:active:not(:disabled) {
    transform: translateY(1px) scale(0.995);
    transition: transform 0.05s ease-out;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. ANIMATED PROSE LINK UNDERLINE
   Nav + CTA links stay underline-free as designed. Inline prose links
   (inside paragraphs, leads, callouts, footers) get a thin animated
   underline with a generous offset — feels like a magazine, not a
   1990s web page, and signals "this is a link" without the harsh
   default-blue treatment.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

p a:not(.btn):not(.cx-btn):not(.qs-btn):not(.cx-nav-link),
.lead a:not(.btn):not(.cx-btn):not(.qs-btn),
.qs-prose a:not(.btn):not(.qs-btn),
.qs-prose-lead a:not(.btn):not(.qs-btn),
.qs-callout a,
li > a:not(.btn):not(.cx-btn):not(.qs-btn):not(.cx-nav-link):not(.cx-dropdown-item):not(.cx-footer-link),
.cx-footer-link {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(8, 145, 178, 0.25);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s, text-underline-offset 0.2s;
}
p a:not(.btn):not(.cx-btn):not(.qs-btn):not(.cx-nav-link):hover,
.lead a:not(.btn):not(.cx-btn):not(.qs-btn):hover,
.qs-prose a:not(.btn):not(.qs-btn):hover,
.qs-prose-lead a:not(.btn):not(.qs-btn):hover,
.qs-callout a:hover {
    text-decoration-color: currentColor;
    text-underline-offset: 4px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. SMOOTH IMAGE LOADING
   Most images on the site lack width/height, so the page jumps as they
   load. Set a default placeholder background and a tiny fade-in so
   intermediate-loaded images are pleasant rather than disruptive.
   Logo + customer images may want to opt out — they declare their own
   placeholder via the `cx-logo` and `cx-cust-logo` classes already.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

img {
    image-rendering: auto;
}
img:not([src=""]):not([loading="eager"]):not(.cx-logo-img):not(.cx-cust-logo-img) {
    animation: cxImageFadeIn 0.35s ease-out;
}
@keyframes cxImageFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BONUS — Premium feature flags

   These don't fit in the eight numbered touches but are equally subtle.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Tap highlight (mobile) — the iOS gray flash on every tap is ugly.
   Premium apps suppress it and add their own feedback via :active. */
* { -webkit-tap-highlight-color: transparent; }

/* Smooth hover transitions for ALL anchors that don't already have one.
   The existing a { transition: color 0.15s } only covers color — but
   sites often add box-shadow / background on hover of cards-wrapping-
   anchors. Catch those too without overriding explicit transitions. */
a:where(:not(.cx-nav-link):not(.cx-dropdown-trigger):not([class*="btn"])) {
    transition: color 0.15s ease, opacity 0.15s ease;
}

/* Respect user's reduced-motion preference. Anyone with motion
   sensitivity set system-wide gets instant transitions instead of
   our animated reveals + scroll behaviors. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Premium print stylesheet — paying customers print pricing pages, terms
   of service, customer agreements. Default print looks awful: dark
   backgrounds get printed as gray blobs, navigation pollutes the
   page, links lose their context.

   This rule sheet flips the site to a clean print mode without
   touching the screen experience. */
@media print {
    html, body {
        background: #ffffff !important;
        color: #000000 !important;
    }
    .cx-header,
    .cx-footer,
    .cx-mobile-nav,
    .cx-theme-toggle,
    [class*="auth-btn"],
    nav,
    button {
        display: none !important;
    }
    a {
        color: #000 !important;
        text-decoration: underline !important;
    }
    /* Show link URL after each external link so the printed page is
       still useful when separated from the screen */
    a[href^="http"]:not([href*="corxor.com"])::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #444;
    }
    img { max-width: 100% !important; page-break-inside: avoid; }
    .qs-fcard, .qs-mode-card, .qs-price-card, .cx-cust-card,
    [class*="card"] { page-break-inside: avoid; }
    h1, h2, h3 { page-break-after: avoid; }
}