/**
 * Site shell — the page-level surface the design assumes.
 *
 * Ported from src/index.css @layer base. The design's `body` rules can't come
 * from the demo bundle's stylesheet (that one is deliberately scoped to the
 * React mounts), so the site-wide dark canvas, the two font families and the
 * slim scrollbar live here and load on every page.
 */

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  background-color: #05050a;
  color: #9494a8;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow-x: hidden;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(79, 70, 229, 0.3);
  color: #ffffff;
}

/* High-end slim scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #05050a;
}
::-webkit-scrollbar-thumb {
  background: #181829;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #4f46e5;
}

/**
 * Twenty Twenty-Five constrains .wp-site-blocks and pads the content rail.
 * Ractro sections manage their own full-bleed width and inner max-width, so the
 * theme's rail has to get out of the way or every section is inset twice.
 */
.wp-site-blocks,
.is-layout-constrained > .alignfull {
  max-width: none;
  margin-block-start: 0;
}

body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: none;
}

.wp-site-blocks > * {
  margin-block-start: 0;
}

/* The theme paints its own background on the template wrapper. */
.wp-site-blocks,
.entry-content,
main {
  background-color: transparent;
}

/* Headings inherit the design's tight tracking rather than the theme's. */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
}

/* The overlay host sits above everything, including a sticky header. */
#ractro-overlay-host {
  position: relative;
  z-index: 9999;
}

/**
 * Ambient glow orbs.
 *
 * GlowOrbs is `absolute inset-0` and in the design its positioning context is
 * the wrapper around the WHOLE page, so orb 3 sits at 55% and orb 4 at 80% of
 * the full document. Reproducing that means making the Ractro content root the
 * positioning context and stretching the orb element over all of it — as a
 * plain static block it collapses to zero height and nothing shows.
 */
.ractro-builder-live-content {
  position: relative;
  overflow-x: clip;
}

.ractro-widget-sitegloworbs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Sections paint over the orbs exactly as they do in the design — the ones
   that want the glow simply have no background of their own. */
.ractro-builder-live-content > *:not(.ractro-widget-sitegloworbs) {
  position: relative;
  z-index: 1;
}

/* Ticker pills must not wrap mid-label as the track scrolls. */
.ractro-marquee-pill {
  white-space: nowrap;
}

/**
 * Hug-contents utility.
 *
 * Layout elements are `width: 100%` by default (.ractro-lay in
 * ractro-layout.css) and the Width control only offers %, px and vw — there is
 * no "auto" to pick in the panel. The design leans on shrink-to-fit rows
 * constantly (logo lockups, pills, badges, inline chips), so those elements
 * carry this class in their Advanced → CSS Classes field, where it stays
 * visible and removable.
 *
 * margin-inline is reset here too, and not for symmetry. `.ractro-lay` also
 * carries `margin-inline: auto`, there "to centre a boxed max-width — a
 * no-op at none/100%" (its own comment's words): a full-width block has no
 * leftover inline space for an auto margin to consume, so that rule is
 * silent everywhere it was written for. Hugging removes exactly the
 * precondition that silence depends on — inside a flex row this element
 * is now narrower than its container, auto margins on a flex ITEM soak up
 * free space by spec, and CSS auto-margin distribution beat `justify-content`
 * on the row. Measured on the final-CTA checklist: three items meant to sit
 * 24px apart, centred, instead sat ~89px of margin off each side of every
 * item — a "space-between" look from a `justify-content: center` rule that
 * was never wrong, fighting a rule that had simply never been tested hugged.
 */
.ractro-hug {
  width: auto !important;
  flex: 0 0 auto;
  margin-inline: 0 !important;
}

/**
 * Design classes used by Ractro-BUILT content (not just the React demos).
 *
 * These live here as well as in the demo bundle because the bundle only loads
 * on pages that place a demo widget, while a gradient headline or a ticker row
 * is something an author can drop on any page.
 */
.gradient-text-primary {
  background: linear-gradient(135deg, #ffffff 20%, #c7d2fe 60%, #818cf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-vibrant {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 45%, #06b6d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, #38bdf8 0%, #34d399 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-amber {
  background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes ractroMarqueeLeft {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

@keyframes ractroMarqueeRight {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

.animate-marquee-left,
.animate-marquee-right {
  display: flex;
  width: max-content;
}

.animate-marquee-left  { animation: ractroMarqueeLeft  35s linear infinite; }
.animate-marquee-right { animation: ractroMarqueeRight 35s linear infinite; }

.animate-marquee-left:hover,
.animate-marquee-right:hover {
  animation-play-state: paused;
}

/**
 * Editor-canvas parity for the utility classes.
 *
 * On the front end an element is ONE node: the author's CSS Classes and the
 * widget's own root class (`ractro-lay`, `ractro-heading-widget`, …) sit
 * together, so `.ractro-hug` beats `.ractro-lay { width:100% }` directly. The
 * canvas is TWO nodes — SortableBlock.jsx:471 puts the author's classes on a
 * React wrapper and :540 renders the widget root inside it, with `w-full` on it
 * — so the same class landed on the outer box while the inner one stayed full
 * width, and a hugged row that shrink-wrapped on the page filled its container
 * in the builder. Same story for the gradient headlines: the fill applied to a
 * wrapper that has no text of its own, leaving the heading inside it painted
 * transparent-on-nothing.
 *
 * Reaching the inner node as well fixes the canvas and is a no-op on the front
 * end, where these descendant selectors match the same shrink-wrapped children
 * a hug row wants anyway.
 */
.ractro-hug > .ractro-lay,
.ractro-hug > [class*="-widget"] {
  width: auto !important;
  flex: 0 0 auto;
}

.gradient-text-primary > [class*="-widget"] {
  background: linear-gradient(135deg, #ffffff 20%, #c7d2fe 60%, #818cf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-vibrant > [class*="-widget"] {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 45%, #06b6d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-secondary > [class*="-widget"] {
  background: linear-gradient(135deg, #38bdf8 0%, #34d399 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-amber > [class*="-widget"] {
  background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}