/*
 * Kreactiva-specific overrides on top of the real Crafto IT Business CSS
 * stack (vendors.min.css, icon.min.css, style.css, responsive.css,
 * it-business.css). Loaded last, so it wins the cascade without needing
 * `!important` or renamed selectors — per the visual-parity rules, Crafto's
 * own classes/tokens are not renamed or purged.
 *
 * Several of these are known fixes for this exact skin, already found and
 * fixed once on productauditors.com (same Crafto IT Business demo) — see its
 * VISUAL_PARITY_REPORT.md and src/styles/product-auditors.scss. Applied here
 * preventively instead of rediscovering them.
 *
 * Keep this file small: anything that can be expressed by simply reusing
 * Crafto's existing classes/variables in markup belongs there, not here.
 */

/* Astro's dev toolbar and any framework-injected elements should never
   inherit any page-content-only styling. */
astro-dev-toolbar {
  cursor: auto;
}

/* it-business.css's real --medium-gray (#7d8087) gives only 3.95:1 contrast
   on white (fails WCAG AA 4.5:1) and is used across most of the theme's body
   text. Darkened here without touching the original Crafto file. */
:root {
  --medium-gray: #5b606b;
}

/* --extra-medium-gray (style.css, shared across every Crafto demo — not
   redefined by it-business.css) is #e4e4e4, meant for borders
   (.border-color-extra-medium-gray), not text. Kreactiva's own
   conocenos.astro (marquee of ghost/foreground words) uses the paired
   .text-extra-medium-gray utility for real, meaningful words (not purely
   decorative repeats), which axe-core flags well below the WCAG AA 3:1
   large-text minimum on white. Darkened to a standard accessible neutral
   gray (4.5:1+ on white) — found via the axe-core scan this re-skin added
   (tests/accessibility/pages.spec.ts), not something this specific skin
   introduced (this token/class pairing predates the IT Business port). */
.text-extra-medium-gray {
  color: #767676;
}

/* Safety net: Crafto animates [data-anime] blocks from opacity:0 to 1 via a
   scroll IntersectionObserver in main.js. If that observer doesn't fire
   against real content in time (seen previously on productauditors.com,
   same skin), the section stays permanently invisible. Forcing the final
   state makes the entrance animation a progressive enhancement, never a
   requirement to see the content. */
[data-anime] {
  opacity: 1 !important;
  transform: none !important;
}

/* Underline links inside real editorial prose (WCAG 1.4.1 / axe
   link-in-text-block) — but scoped to prose content only. A global `li a` or
   `a` selector would also underline the main nav, mega-dropdown, footer
   columns and card links, none of which are running text (this exact bug —
   "underlined links in the menu" — was already found and fixed once on
   productauditors.com for this same skin). */
.blog-post-content a,
.kreactiva-prose a {
  text-decoration: underline;
}

.blog-post-content li a,
.kreactiva-prose li a {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}