/* Right Ahead Labs — site styles.
 *
 * Derived from the <helmet> blocks in design/*.dc.html, which now build on the Minimal
 * design system. Loaded AFTER assets/ds.css so these rules win over the design system's
 * own base.css (which would otherwise paint links blue).
 *
 * All page layout stays in inline style attributes exactly as authored in the canvas.
 */

body, button, input, select, textarea { font-family: var(--font-sans); }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* Default link treatment — Support, Privacy, Terms. */
a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); }
a:hover { color: var(--text-primary); text-decoration-color: var(--text-primary); }
a:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; border-radius: 4px; }

/* The home page inverts it: links are bare, and underline only on hover.
 * Scoped to <html class="page-home"> rather than <body> because scroll-behavior only
 * takes effect on the document scrolling element. */
html.page-home { scroll-behavior: smooth; }
html.page-home a { color: var(--text-primary); text-decoration: none; }
html.page-home a:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Replaces the runtime-only style-hover="" attribute from the .dc.html sources.
 * !important is required: these elements carry their base background in an inline
 * style attribute, which would otherwise beat any selector-based hover rule. */
.btn-solid:hover { background: #333333 !important; }
.btn-outline:hover { background: var(--bg-subtle) !important; }

@media (max-width: 700px) {
  [data-nav] { padding-left: 16px !important; padding-right: 16px !important; height: 54px !important; gap: 12px !important; }
  [data-nav-links] { gap: 16px !important; font-size: 13px !important; }
  [data-nav-links] a[href="#contact"] { height: 32px !important; padding: 0 14px !important; }
  [data-nav-logo] { font-size: 14px !important; gap: 8px !important; }
  [data-nav-hide-sm] { display: none !important; }
}