/**
 * Performance CSS: font-display, CLS reserves, composited motion, image hints.
 */

/* Font Awesome: override Joomla's font-display:block (~1.5s PSI saving) */
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../../../media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2") format("woff2");
}
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../../../media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2") format("woff2");
}
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../../media/vendor/fontawesome-free/webfonts/fa-regular-400.woff2") format("woff2");
}

/* Prefer composited properties only (avoid box-shadow / top / left animation) */
.jd-discover-card,
.jd-love-card,
.jd-blog-card,
.jd-intro-btn,
.jd-header-search button,
.jd-category-btn,
.jd-loc-btn {
  transition: transform 0.18s ease, opacity 0.18s ease !important;
}
.jd-discover-card:hover,
.jd-discover-card:focus,
.jd-love-card:hover,
.jd-blog-card:hover {
  transform: translate3d(0, -3px, 0) !important;
  box-shadow: none !important;
}

/* CLS: reserve media boxes before images paint */
.jd-logo img {
  width: auto;
  height: 48px;
  aspect-ratio: 2.2 / 1;
  content-visibility: auto;
}
@media (min-width: 992px) {
  .jd-logo img {
    height: 80px;
  }
}
.jd-intro-collage img,
.jd-discover-media img,
.jd-love-img img,
.jd-blog-featured-media img,
.jd-blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  content-visibility: auto;
  contain-intrinsic-size: 400px 300px;
}
.jd-discover-media,
.jd-love-img,
.jd-blog-featured-media,
.jd-blog-card-media {
  background: #e8eee9;
}

/* Hide Helix offcanvas chrome when JD header owns navigation (less work + no FA need) */
body:has(.jd-site-header) #offcanvas-toggler,
body:has(.jd-site-header) .offcanvas-toggler-right,
body:has(.jd-site-header) .sp-megamenu-wrapper {
  display: none !important;
}