/*
Theme Name: Alix
Author: Compagnon Agency
Author URI: https://www.compagnon.agency
Description: Custom Wordpress theme for Alix. This theme is property of Compagnon Agency (https://www.compagnon.agency) and can not be used or copied for any purpose what so ever.
Version: 1.0
*/

/* Notification banner */
.notificationBanner { background-color: #d0794f; color: inherit; width: 100%; display: block; }
.notificationBanner .container { padding-top: 8px; padding-bottom: 8px; min-height: 44px; }
.notificationBanner .bannerInner { display: flex; align-items: center; justify-content: center; gap: 20px; }
.notificationBanner .bannerText { color: inherit; }
.notificationBanner .bannerText strong, .notificationBanner .bannerText b { font-weight: 700; }
.notificationBanner .bannerCta { color: inherit; text-decoration: underline; white-space: nowrap; }
.notificationBanner .remText { margin: 0; }
.notificationBanner .underlineButton { color: inherit; text-decoration: underline; }
.notificationBanner .underlineButton:hover { opacity: .85; }

/* Logo Cycle */
.logo-wall {
  display: flex;
  justify-content: center;
  width: 100%;
}

.logo-wall__collection {
  width: 100%;
}

.logo-wall__list {
  display: flex;
  flex-flow: wrap;
}

.logo-wall__item {
  width: 25%;
  position: relative;
}

/* Hide extra logos - only show first 4, others will cycle in */
[data-logo-wall-list] [data-logo-wall-item]:nth-child(n+5) {
  display: none;
}

.logo-wall__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.logo-wall__logo-before {
  padding-top: 66.66%;
}

.logo-wall__logo-target {
  justify-content: center;
  align-items: center;
  width: 66.66%;
  height: 40%;
  display: flex;
  position: absolute;
}

.logo-wall__logo-img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media screen and (max-width: 991px) {
  .logo-wall__item {
    width: 50%;
  }
  
  /* Mobile: Show first 4 (2 rows of 2), others will cycle in */
  [data-logo-wall-list] [data-logo-wall-item]:nth-child(n+5) {
    display: none;
  }
}