/* ============================================================
   cases-skin.css — recolor the imported (old-palette) case pages
   to the redesign's single indigo accent + Geist typography.

   Loaded LAST (after /assets/main-*.css + /assets/cases-*.css) on
   the 32 case pages. The imported bundles are Tailwind v4: every
   color utility resolves a `--color-*` custom property
   (e.g. .text-cyan-400{color:var(--color-cyan-400)}, and the
   /opacity variants use color-mix(... var(--color-cyan-glow) ...)).
   So redefining those tokens here recolors ALL utilities at once —
   text-, bg-, border-, ring-, from-/via-/to-, and their /NN opacity
   variants — without enumerating individual classes.

   Literal hex/rgb colors inside each page's inline <style> blocks
   are handled separately (per-page hex replace). .heading-accent is
   defined with literal colors inside the shared bundle, so it is
   overridden explicitly below.

   Single accent only (indigo). Greens/cyans/purples/teals all map
   onto the same indigo ramp — no secondary accents (project rule).
   ============================================================ */

:root {
  /* indigo ramp anchored to the redesign palette:
     soft #8c98ff · accent #5b6cff · deep #2a3aff */

  /* cyan family */
  --color-cyan-100: #c7ccff;
  --color-cyan-200: #aab3ff;
  --color-cyan-300: #8c98ff;
  --color-cyan-400: #5b6cff;
  --color-cyan-500: #5b6cff;
  --color-cyan-600: #2a3aff;
  --color-cyan-700: #2a3aff;
  --color-cyan-glow: #5b6cff;

  /* purple family */
  --color-purple-100: #c7ccff;
  --color-purple-200: #aab3ff;
  --color-purple-300: #8c98ff;
  --color-purple-400: #8c98ff;
  --color-purple-500: #5b6cff;
  --color-purple-600: #2a3aff;
  --color-purple-700: #2a3aff;

  /* violet family */
  --color-violet-300: #8c98ff;
  --color-violet-400: #8c98ff;
  --color-violet-500: #5b6cff;
  --color-violet-600: #2a3aff;

  /* fuchsia (defensive) */
  --color-fuchsia-400: #8c98ff;
  --color-fuchsia-500: #5b6cff;

  /* teal family */
  --color-teal-300: #8c98ff;
  --color-teal-400: #5b6cff;
  --color-teal-500: #5b6cff;
  --color-teal-600: #2a3aff;

  /* green / emerald are deliberately NOT remapped: they're semantic "good / after /
     success" colors in the before/after comparisons (paired with the red "bad /
     before"). Keeping the conventional red↔green contrast is more important than
     the single-accent rule here. Decorative cyan/purple/teal/blue still → indigo. */

  /* blue / sky → indigo */
  --color-blue-400: #5b6cff;
  --color-blue-500: #5b6cff;
  --color-blue-600: #2a3aff;
  --color-sky-400: #5b6cff;
  --color-sky-500: #5b6cff;

  /* indigo family — align to the redesign hue (bundle's is ~hue 277) */
  --color-indigo-300: #8c98ff;
  --color-indigo-400: #8c98ff;
  --color-indigo-500: #5b6cff;
  --color-indigo-600: #2a3aff;
  --color-indigo-glow: #5b6cff;

  /* brand "primary" was a purple (#7a3be8) */
  --color-primary: #5b6cff;

  /* Geist everywhere (override Manrope tokens) */
  --font-display: "Geist", system-ui, sans-serif;
  --font-body: "Geist", system-ui, sans-serif;
  --font-sans: "Geist", system-ui, sans-serif;
}

/* Body: override the per-page inline <style> that hard-codes Manrope. Source
   order (this file loads after the inline style) + !important is enough here —
   the bundle's body font rule is not !important. */
body,
.font-display, .font-body {
  font-family: "Geist", system-ui, sans-serif !important;
}

/* Headings: the imported bundle forces "Playfair Display" on h1–h6 with an
   !important rule INSIDE @layer base. For !important declarations a LAYERED rule
   beats an unlayered one regardless of source order/specificity — so an
   unlayered override silently loses (that's why headings stayed on the old serif
   while the body switched). The fix is to live in the same layer: appended after
   the bundle, same specificity, later order → this wins. Geist 600 matches the
   redesign's heading weight (the bundle pinned headings to 400). */
@layer base {
  h1, h2, h3, h4, h5, h6 {
    font-family: "Geist", system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-style: normal !important;
  }
}

/* heading-accent gradient lives in the shared bundle with literal cyan→
   indigo→purple colors. Remap to a clean indigo gradient; drop the italic
   so it matches the redesign's upright accent. */
.heading-accent {
  font-style: normal !important;
  background-image: linear-gradient(135deg, #8c98ff, #5b6cff, #2a3aff) !important;
  text-shadow: 0 0 30px rgba(91, 108, 255, 0.30), 0 0 60px rgba(91, 108, 255, 0.15) !important;
}

/* Restore the nav mega-menu's frosted blur on scrolled case pages.
   The bundle's scroll-reveal settles to `.reveal-active{transform:translateY(0)}`
   — a non-none identity transform that the wrapping .container keeps forever,
   compositing the whole page body onto its own GPU layer. Chromium cannot blur a
   transform-composited backdrop, so the fixed nav's mega-menu backdrop-filter
   shows nothing (content bleeds through sharp) the moment you scroll off the top.
   Settling to `transform: none` drops that layer; the entrance still animates
   because translateY(20px) -> none interpolates as 20px -> 0. */
.reveal-active {
  transform: none !important;
}

/* ============================================================
   Touch devices — no hover/press micro-interactions on the imported
   case UI. Mirrors the main site, where hover effects are gated to
   (hover: hover) and (pointer: fine); the imported Tailwind bundle is
   not gated, so on phones a tap leaves a stuck :hover state and the
   perpetual animations cost frames. Here we neutralise that under
   (hover: none): no lift/glow/scale on tap, no shimmer, no perpetual
   animated border. Functional taps (links, accordions, before/after
   sliders, the ROI button) are untouched.
   ============================================================ */
@media (hover: none) {
  /* Touch devices: hover REACTIONS are neutralised at the source — every :hover
     rule in the imported bundle, the per-case inline <style> and roi.css is now
     wrapped in @media (hover:hover), so on a phone a tap cannot trigger any of
     them (no lift / glow / tint / scale). Here we only switch off the ambient,
     always-running animations for battery/perf (they are not tap reactions). */
  .shimmer { animation: none !important; }
  .glass-button::before, .glass-button::after { animation: none !important; }
}

/* ============================================================
   "Услуги" mega-menu: render EXACTLY like the main site.
   The imported Tailwind bundle puts its nav font override in @layer base
   (nav a, nav span:not(.material-icons)...{font-family:Montserrat,Manrope
   !important}). For !important, a LAYERED rule beats an UNLAYERED one no
   matter the specificity, so an unlayered override loses. We therefore add
   OURS to @layer base too (cases-skin.css loads after the bundle -> later in
   the same layer + higher specificity -> wins), restoring the chrome.css
   values (Geist Mono numerals, real weights) for the dropdown cards only.
   Cases-only file -> the main pages are untouched.
   ============================================================ */
@layer base {
  .site-header .nav-mega .nav-mega__num {
    font-family: "Geist Mono", ui-monospace, monospace !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
  }
  .site-header .nav-mega .nav-mega__title {
    font-family: "Montserrat", system-ui, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
  }
  .site-header .nav-mega .nav-mega__desc {
    font-family: "Montserrat", system-ui, sans-serif !important;
    font-weight: 300 !important;
    letter-spacing: -0.01em !important;
  }
}

@layer base {
  /* Case-page hero italic gradient title (e.g. OTRS): italic glyphs overhang the
     inline box, so background-clip:text leaves the last glyph of each wrapped line
     unpainted (looks clipped). inline-block makes the gradient box one rectangle
     covering all lines; the padding extends it past the italic overhang/descender.
     Targets the hero combo only (kpi numbers are .bg-clip-text but NOT .italic). */
  h1 .bg-clip-text.italic {
    display: inline-block;
    padding-right: 0.14em !important;
    padding-bottom: 0.06em !important;
  }
}