/*
  Shared tokens for every code component.

  A site-level CSS *class* never reaches inside a shadow root, but a site-level
  *variable* does (CLAUDE.md section 2) - so this file is where the components
  meet the site's own design system. Each --na-* name below resolves to the real
  Webflow variable first and to the value from the Figma file only as a fallback,
  which means retuning a colour in the Designer moves every block with it, while
  the components still render correctly in the local gallery, in Figma-faithful
  isolation, and on any site that does not define these.

  The Webflow names are the ones the Designer emits for the "Semantic Colors"
  and "Base" collections of the Nebius Academy site; every fallback here was
  checked against the live value and matches it.
*/
/* Both selectors on purpose: the CLI rewrites `:root` to `:host` when it builds
   the shadow-DOM stylesheet (section 2), but the local gallery inlines this file
   as-is, where `:root` matches nothing and every token would silently fall back.
   Naming `:host` as well makes the gallery behave like the real thing. */
:host,
:host {
  --container-max-width: 1280px;

  /* Type. Webflow holds no font-family variables - the faces are set in the
     site's typography settings - so these are ours, with the project's own
     "Inter 28" first and metric-compatible Arial behind it. */
  --na-font-sans: "Inter 28", Arial, sans-serif;
  --na-font-display: "Inter Tight", "Inter 28", Arial, sans-serif;
  --na-font-serif: "Tiempos Text", Georgia, "Times New Roman", serif;

  /* Text */
  --na-content-primary-bold: var(--_semantic-colors---content--primary-bold, #14070f);
  --na-content-primary: var(--_semantic-colors---content--primary, rgba(20, 7, 15, 0.9));
  --na-content-secondary: var(--_semantic-colors---content--secondary, rgba(20, 7, 15, 0.7));
  --na-content-tertiary: var(--_semantic-colors---content--tertiary, rgba(20, 7, 15, 0.5));
  --na-content-inverse-primary-bold: var(--_semantic-colors---content--inverse-primary-bold, #f9f8f6);
  --na-content-inverse-primary: var(--_semantic-colors---content--inverse-primary, rgba(249, 248, 246, 0.9));
  --na-content-inverse-secondary: var(--_semantic-colors---content--inverse-secondary, rgba(249, 248, 246, 0.7));
  --na-content-inverse-tertiary: var(--_semantic-colors---content--inverse-tertiary, rgba(249, 248, 246, 0.5));

  /* Surfaces */
  --na-background-primary: var(--_semantic-colors---background--primary, #f3efe8);
  --na-background-secondary: var(--_semantic-colors---background--secondary, #f9f8f6);
  --na-background-inverse: var(--_semantic-colors---background--inverse, rgba(20, 7, 15, 0.95));
  --na-background-primary-hover-subtle: var(--_semantic-colors---background--primary-hover-subtle, #eae6dc);

  /* Borders */
  --na-border-primary: var(--_semantic-colors---border-stroke--black--primary, rgba(20, 7, 15, 0.2));
  --na-border-secondary: var(--_semantic-colors---border-stroke--black--secondary, rgba(20, 7, 15, 0.1));
  --na-border-inverse-primary: var(--_semantic-colors---border-stroke--white--primary, rgba(249, 248, 246, 0.7));
  --na-color-black-alpha-20-a: var(--black--alpha--20-a, rgba(20, 7, 15, 0.2));

  /* No counterpart in the site's collections, so these stay ours - but they are
     still variables, so a page can retune them.

     Two of them deliberately do NOT use the similarly named Webflow token:
     Background/primary-hover is #ab9c8f there, and primary-hover-subtle is the
     opaque #eae6dc. Both are meant for beige cards. Over the header's glass bar
     a hover has to be a transparent wash or it reads as a solid chip, which is
     what the two "ghost" names below are for. */
  --na-background-primary-subtle: #f3efe8;
  --na-background-white: #fff;
  --na-background-glass: rgba(255, 255, 255, 0.5);
  --na-background-primary-hover: rgba(20, 7, 15, 0.06);
  --na-background-ghost-hover: rgba(20, 7, 15, 0.06);
  --na-background-ghost-hover-subtle: rgba(20, 7, 15, 0.04);
  --na-color-white-alpha-70-a: rgba(255, 255, 255, 0.7);
  --na-color-white-alpha-50-a: rgba(255, 255, 255, 0.5);
  --na-color-white-alpha-40-a: rgba(255, 255, 255, 0.4);

  /* The Problem section's "Tint" stat card (Figma node 21245-5945): a solid
     lavender card with a black-fading-to-lavender figure. No counterpart in
     the site's collections, so this stays ours the way the block above does. */
  --na-background-tint-purple: #d3d3fa;
  --na-gradient-stat-fade: linear-gradient(90deg, rgba(20, 7, 15, 0.95) 0%, rgba(20, 7, 15, 0.95) 35%, rgba(211, 211, 250, 0.9) 100%);

  /* The gradient every *emphasis* italic run in a heading is clipped to
     (Figma node 21045-20, the Hero heading). Webflow has no gradient
     variables to bridge to (same reasoning as the fonts above), so this one
     is ours outright - defined once here and referenced by every section's
     .emphasis rule instead of repeating the five stops seven times. */
  --na-gradient-emphasis: linear-gradient(213deg, #b5a9ea 18%, #8873de 54%, #2e2e7d 75%, #43425b 95%);
}

/* One FAQ row. Figma draws the collapsed and expanded states as two separate
   cards (nodes 21297:160140;327:3566 and ;327:3571) with identical chrome —
   same fill, radius and padding — so this is one card whose answer collapses,
   not two layouts. */
.Agp7fctct0vAALtYLPAk {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: var(--na-color-white-alpha-40-a, rgba(255, 255, 255, 0.4));
}

/* A real <button>, so the row is keyboard-operable and announces its state.
   Everything below the first four declarations is undoing the UA button
   styling — a button does not inherit the page's font by itself. */
.caHamN_ugPs1FFJbP46z {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--na-spacing-12, 12px);
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: var(--na-spacing-20, 20px);
  border: 0;
  background: none;
  color: var(--na-content-primary-bold, #14070f);
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.MWX7jKHWNPVyx0uFHB16 {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--na-font-sans, "Inter 28", Arial, sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.2px;
  overflow-wrap: break-word;
}

/* Figma's 48x48 button box around a 24px icon — it is the hit target, and it
   is also what sets the collapsed card's height (20 + 48 + 20 = 88px). */
.T2XCXU8GF6BzeZJHe7Mw {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
}

/* One chevron for both states: collapsed is Figma's chevron-right, which is
   the same glyph a quarter turn back. Rotating rather than swapping icons is
   what lets the arrow travel with the panel instead of popping. */
.T4WHCO1he1Q69H_biW2I {
  width: 24px;
  height: 24px;
  transform: rotate(-90deg);
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

.q0AsGMKya7ThdMxcmubn {
  transform: rotate(0deg);
}

/* The animated box. Its height is written inline from the measured body
   (FaqItem.tsx); `visibility` is delayed by exactly the duration so the panel
   is still paintable while it closes but drops out of the tab order once shut
   — the same two-property shape as the header's menu layer (CLAUDE.md
   section 11). */
.WYPwFKRr8fgvNg4d1Q0f {
  overflow: hidden;
  visibility: hidden;
  transition:
    height 320ms cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0s linear 320ms;
}

.aP8CAkMapwf4O87UecYI {
  visibility: visible;
  transition:
    height 320ms cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0s linear 0s;
}

/* The gap between question and answer lives inside the collapsing box, or a
   shut card would keep paying for it. Figma's gap is 32px measured from the
   48px header row, and the trigger already spends 20px of that on its own
   bottom padding (which a collapsed card still needs), so what is left here is
   the difference - written as the subtraction rather than as a literal 12px so
   it keeps tracking whichever of the two tokens moves. */
.kIm7VlrJZNzgHVZ7z1hp {
  padding: calc(var(--na-spacing-32, 32px) - var(--na-spacing-20, 20px)) var(--na-spacing-20, 20px)
    var(--na-spacing-20, 20px);
  font-family: var(--na-font-sans, "Inter 28", Arial, sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: var(--na-content-tertiary, rgba(20, 7, 15, 0.5));
}

/* The answer is a props.RichText field, so the designer can put anything in
   it. These keep the usual blocks on the section's rhythm instead of the UA's. */
.kIm7VlrJZNzgHVZ7z1hp > :first-child {
  margin-top: 0;
}

.kIm7VlrJZNzgHVZ7z1hp > :last-child {
  margin-bottom: 0;
}

.kIm7VlrJZNzgHVZ7z1hp p,
.kIm7VlrJZNzgHVZ7z1hp ul,
.kIm7VlrJZNzgHVZ7z1hp ol {
  margin: 0;
}

.kIm7VlrJZNzgHVZ7z1hp p + p,
.kIm7VlrJZNzgHVZ7z1hp p + ul,
.kIm7VlrJZNzgHVZ7z1hp p + ol,
.kIm7VlrJZNzgHVZ7z1hp ul + p,
.kIm7VlrJZNzgHVZ7z1hp ol + p {
  margin-top: 0.75em;
}

.kIm7VlrJZNzgHVZ7z1hp ul,
.kIm7VlrJZNzgHVZ7z1hp ol {
  padding-left: 1.25em;
}

.kIm7VlrJZNzgHVZ7z1hp li + li {
  margin-top: 0.25em;
}

.kIm7VlrJZNzgHVZ7z1hp a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kIm7VlrJZNzgHVZ7z1hp strong,
.kIm7VlrJZNzgHVZ7z1hp b {
  font-weight: 500;
  color: var(--na-content-secondary, rgba(20, 7, 15, 0.7));
}

@media (prefers-reduced-motion: reduce) {
  .WYPwFKRr8fgvNg4d1Q0f,
  .aP8CAkMapwf4O87UecYI,
  .T4WHCO1he1Q69H_biW2I {
    transition: none;
  }
}

/* Tablet up: Figma switches the question to the display face at H5 and widens
   the card's side padding; the answer steps up to body-16. */
@media (min-width: 768px) {
  .caHamN_ugPs1FFJbP46z {
    padding: var(--na-spacing-20, 20px) var(--na-spacing-24, 24px);
  }

  .MWX7jKHWNPVyx0uFHB16 {
    font-family: var(--na-font-display, "Inter Tight", "Inter 28", Arial, sans-serif);
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
  }

  .kIm7VlrJZNzgHVZ7z1hp {
    padding: calc(var(--na-spacing-32, 32px) - var(--na-spacing-20, 20px)) var(--na-spacing-24, 24px)
      var(--na-spacing-20, 20px);
    font-size: 16px;
    line-height: 24px;
  }
}