/* ============================================================
   Arbevita site overrides — loaded after vendor CSS.
   Keep vendor files untouched; put our own rules here.
   ============================================================ */

/* style.css never loads the solid icon font, and its breadcrumb
   separator asks for a "FontAwesome" family that isn't defined, so
   Safari (iPad/iPhone) drew an empty box between Home and the page. */
@import url("../fonts/fontawesome6/css/solid.css");

/* The same undefined "FontAwesome" family is used for the mobile menu
   button and the .ul-style-2 checkmarks; Font Awesome's own v4 shim
   maps it onto the bundled webfonts. */
@import url("../fonts/fontawesome6/css/v4-font-face.css");

/* Respect the OS "reduce motion" setting.
   The vendor's .wow starts at visibility:hidden and relies on
   WOW.js to reveal it, so disabling the animation alone would
   leave content invisible — force it visible too. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .wow,
  .animated {
    animation: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Entrances (js/motion.js). Starting states only under html.av-motion,
   which the inline script in each page's <head> sets before the first
   paint for visitors without reduced motion, so without JavaScript every
   element is visible. .av-in marks an element whose entrance has started. */
html.av-motion :is([data-motion="lines"], [data-motion="quiet"], [data-motion="follow"]):not(.av-in),
html.av-motion [data-motion="steps"] > :not(.av-in) {
  opacity: 0;
}

/* Hover on a card that is itself a link: its icon or image grows a
   little. The separate scale property keeps this apart from the
   entrance, which animates transform. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  a[data-motion-hover] > :is(img, svg):first-child {
    transition: scale 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  }

  a[data-motion-hover]:hover > :is(img, svg):first-child {
    scale: 1.06;
  }
}

/* Page change: the page cross-fades into the next one and the header
   holds still (Chrome and Edge 126+, Safari 18.2+). Other browsers
   navigate normally. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  header {
    view-transition-name: av-header;
  }
}

.crumb li:after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}