/* Components of the rebuilt site. The old theme look comes from legacy.css (generated by the import). */

/* ---- header slider */
.hp-slider {
  position: relative;
  aspect-ratio: 1175 / 400;
  overflow: hidden;
  background: #000;
}
.hp-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s;
}
.hp-slide.is-active { opacity: 1; }
.hp-slider-prev,
.hp-slider-next {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  color: #333;
  font: 24px/32px sans-serif;
  cursor: pointer;
}
.hp-slider-prev { left: 10px; }
.hp-slider-next { right: 10px; }
.hp-slider-prev::before { content: '\2039'; }
.hp-slider-next::before { content: '\203A'; }
.hp-slider-dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.hp-slider-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.hp-slider-dots button.is-active { background: #fff; }

/* ---- modals (Play Now, Facebook login, messages) */
.hp-modal {
  position: fixed;
  max-width: calc(100vw - 20px);
  max-height: calc(100vh - 20px);
  padding: 0;
  border: 0;
  background: #fff;
  overflow: visible;
}
.hp-modal::backdrop { background: rgba(51, 51, 51, 0.8); }
.hp-modal-iframe iframe {
  display: block;
  max-width: 100%;
  border: 0;
}
.hp-modal-message { padding: 20px; min-width: min(400px, 90vw); }
.hp-modal-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #333;
  color: #fff;
  font: 20px/22px sans-serif;
  cursor: pointer;
}
[dir='rtl'] .hp-modal-close { right: auto; left: -14px; }
.hp-modal-message form { margin: 0; }

/* ---- lightbox */
.hp-lightbox { background: transparent; }
.hp-lightbox figure { margin: 0; text-align: center; }
.hp-lightbox img {
  display: block;
  max-width: calc(100vw - 100px);
  max-height: calc(100vh - 80px);
  cursor: pointer;
}
.hp-lightbox figcaption { color: #ccc; font-size: 12px; padding-top: 4px; }
.hp-lightbox-prev,
.hp-lightbox-next {
  position: fixed;
  top: 50%;
  margin-top: -30px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: #fff;
  font: 60px/60px sans-serif;
  cursor: pointer;
}
.hp-lightbox-prev { left: 0; }
.hp-lightbox-next { right: 0; }

/* ---- theme behaviour that used to be jQuery */
#menu-primary .search-form .label-search,
#menu-primary .search-form label { display: none; }
#menu-primary .search-form.is-open label { display: inline-block; }
@media (max-width: 799px) {
  #menu-primary .search-form label { display: inline-block; }
}

/* ---- Facebook page box */
.hp-facebook { border: 0; max-width: 100%; }