/* ROI page override: bring the compiled Vite/Tailwind/shadcn bundle in line
   with longrun.agency's brand. Loaded AFTER both the Vite-emitted CSS AND
   brand main.min.css so these rules win cascade. Scoped to /roi/ via <link>
   placement in roi/index.html.

   Goal: match the "feel" of the rest of the site without touching the
   React app's content or logic. Concretely: use Aeonik instead of system
   fonts, smooth scroll on anchor jumps, and a couple of small typographic
   refinements that come for free with Aeonik. */

/* Restore browser-default 16px root font-size on the ROI page. Brand
   main.min.css sets `html { font-size: clamp(1px, 14px, 1000vw / 1600) }`
   which shrinks below 14px on viewports wider than ~1600px. Tailwind's
   utilities (max-w-7xl = 80rem, spacing scale, type scale) all use rem,
   so the brand fluid font-size squishes the calculator's max-w-7xl
   container from 1280px to ~960px on a 1920px monitor. Forcing 16px here
   restores Tailwind's expected sizing for the calculator inside #root. */
html {
    font-size: 16px !important;
}

/* Brand font, same files the main site loads. Absolute paths so the
   declaration works from any page depth. */
@font-face {
    font-family: "Aeonik";
    src: url("/fonts/Aeonik-Regular.woff2") format("woff2"),
         url("/fonts/Aeonik-Regular.woff") format("woff"),
         url("/fonts/Aeonik-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Force Aeonik on every element. The compiled Tailwind preflight sets
   `font-family: ui-sans-serif, system-ui, sans-serif, ...` on `body` plus
   utility classes like `font-sans` on individual nodes, so we !important
   to defeat both. Keep the system stack as fallback while the woff2 loads. */
html,
body,
#root,
#root * {
    font-family: "Aeonik",
                 ui-sans-serif, system-ui, sans-serif,
                 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
                 "Noto Color Emoji" !important;
}

/* Code blocks and `<pre>` should keep monospace if the React app uses any. */
#root code,
#root pre,
#root kbd,
#root samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                 "Liberation Mono", "Courier New", monospace !important;
}

/* Smooth scroll on anchor links (poor-man's Lenis). The main site uses
   Lenis via the bundled GSAP setup; we can't load that here without the
   React source, but native smooth-scroll covers in-page jumps. */
html {
    scroll-behavior: smooth;
}

/* Aeonik renders best with these typographic hints (same as main site). */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}