/* ==========================================================================
 * Performance: Replace `transition: all` with specific properties
 * --------------------------------------------------------------------------
 * Compiled from: src/scss/theme/performance/_transitions.scss
 * Theme breakpoint lg: 1080px
 *
 * Lighthouse flags "avoid non-composited animations" because `transition: all`
 * tells the browser to watch every CSS property, preventing GPU compositing.
 * These overrides target every selector in the child + parent theme that uses
 * `transition: all`, replacing it with only the properties that actually
 * change on hover/focus/state-change.
 * ========================================================================== */

/* ---- PARENT THEME OVERRIDES ---- */

/* Waypoint / delayed-class entry animations (transform + opacity only) */
@media (min-width: 1080px) {
  body.theme-loaded [data-delayed-class] {
    transition: transform 500ms, opacity 500ms;
  }
}

/* Site header (background + padding shift on scroll) */
.site-header {
  transition: background-color 300ms, padding-top 300ms, padding-bottom 300ms;
}

/* Header branding logo (height change on scroll) */
.site-header .branding .logo img {
  transition: height 300ms;
}

/* Primary menu link underline (width + opacity) */
.site-header .primary-menu .nav-link::after {
  transition: width 250ms ease-in-out, opacity 200ms;
}

/* Loop post thumbnail (transform on hover) */
.loop-post .post-thumbnail img {
  transition: transform 400ms;
}

/* SVG icon path fills (fill on hover) */
.loop-tag svg path,
.location-loop svg path {
  transition: fill 400ms;
}

/* Styled cards image (transform on hover) */
.styled-card .card-image img {
  transition: transform 400ms;
}

/* Social network icons (color + background on hover) */
.social-networks a {
  transition: color 100ms ease-in-out, background-color 100ms ease-in-out;
}

/* Side navigation slide-in (transform) */
.side-navigation {
  transition: transform 250ms cubic-bezier(0.52, 0.16, 0.24, 1);
}

/* Mobile navigation slide-in (transform) */
.mobile-navigation {
  transition: transform 250ms cubic-bezier(0.52, 0.16, 0.24, 1);
}

/* Notification bar (max-height + opacity) */
.notification-bar {
  transition: max-height 300ms, opacity 300ms;
}


/* ---- CHILD THEME OVERRIDES ---- */

/* Tag cards (border-color + box-shadow on hover) */
.study-tag-loop .study-tag-loop-item {
  transition: border-color 300ms, box-shadow 300ms;
}

/* Location cards (background-color on hover/focus) */
.location-loop .location-loop-item {
  transition: background-color 300ms;
}

.location-loop .location-loop-item .site {
  transition: color 400ms, background-color 400ms;
}

/* Study cards in all-studies block (background on hover) */
.block-all-studies .study {
  transition: background-color 300ms;
}

/* Site items (border-color on hover) */
.study-site-lookup .site {
  transition: border-color 300ms;
}

/* Team member images (transform on hover) */
.block-team .team-member .member-image img {
  transition: transform 400ms;
}

/* Location selector animated items (opacity only) */
.block-location-selector .animated .box,
.block-location-selector .animated .bg-image {
  transition: opacity 500ms;
}

/* Homepage hero title scale animation (transform + opacity) */
.block-homepage-hero .title .alt-style {
  transition: transform 400ms ease-in-out;
}

.block-homepage-hero .content-col > * {
  transition: transform 500ms, opacity 500ms;
}

/* Buttons pseudo-element (opacity + transform) */
.btn-dark::after,
.btn-outline-dark::after {
  transition: opacity 300ms, transform 300ms;
}