/* ===================== */
/* ===== Utilities ===== */
/* ===================== */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
caption,
figcaption,
p {
  text-wrap: pretty;
}

.brxe-button {
  cursor: pointer;
}

::-moz-selection {
  /* Code for Firefox */
  color: #fff;
  background: var(--primary);
}

::selection {
  color: #fff;
  background: var(--primary);
}

/* html {
    scroll-behavior: smooth;
    scroll-padding-top: 20px;
  } */

/* ============================================================================= */
/* ============================= Header =================================== */
/* ============================================================================= */

@keyframes slidein-sticky-header {
  from {
    top: -100px;
  }
  to {
    top: 0;
  }
}

/* Remove comment  below for transparent header */

body:not(.transparent-header) #brx-header #master-header .brxe-toggle {
  color: var(--primary-d-6);
}

.transparent-header #brx-header {
  position: absolute;
  z-index: 9999;
}

body:not(.transparent-header) #brx-header #master-header {
  background-color: var(--light);
  /* border-bottom: 1px solid var(--border-primary); */
}

body:not(.transparent-header) #brx-header ul > li > a:not(.brxe-button) {
  color: var(--primary-d-6);
}

#brx-header ul > li > a.brxe-button {
  border: none !important;
}

/*
body:not(.transparent-header) #brx-content {
	margin-top: var(--header-height);
}
*/

#brx-header {
  height: var(--header-height);
}

.stuck {
  position: fixed;
  top: 0;
  left: 0;
  height: calc(var(--header-height) - (var(--header-height) * 0.15)) !important;
  animation-name: slidein-sticky-header;
  animation-duration: 1s;
  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.9) !important;
  z-index: 9999;
}

#brx-header
  #master-header.stuck
  .brxe-nav-nested
  .brx-nav-nested-items
  > li
  > a,
#brx-header #master-header.stuck .brxe-nav-nested .brxe-toggle {
  color: var(--text-body);
}

#brx-header
  #master-header.stuck
  .brxe-nav-nested
  .brx-nav-nested-items
  .brxe-button {
  color: var(--light);
}

/* ======================== */
/* ==== CookieYes ========= */
/* ======================== */

.cky-notice-btn-wrapper button.cky-btn-accept,
.cky-prefrence-btn-wrapper button.cky-btn-accept {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--light) !important;
  font-weight: 600 !important;
}
.cky-notice-btn-wrapper button.cky-btn-customize,
.cky-prefrence-btn-wrapper button.cky-btn-preferences,
.cky-notice-btn-wrapper button.cky-btn-reject,
.cky-prefrence-btn-wrapper button.cky-btn-reject {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
}

.cky-btn-revisit-wrapper {
  background-color: var(--primary) !important;
}

/* ========================== */
/* ====== Hero Slider ======= */
/* ========================== */

@keyframes ja-zoom-in {
  0% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.ja-hero .splide__slide img {
  transform: scale(1.05);
  /* transition: transform 14s; */
}

.ja-hero .splide__slide.is-active img {
  animation-name: ja-zoom-in;
  animation-delay: 0.3s;
  animation-duration: 12s;
  animation-fill-mode: both;
}

.ja-zoom-in {
  animation-name: ja-zoom-in;
  animation-duration: 12s;
  animation-fill-mode: both;
}

/* ================================================== */
/* ============ Map Scroll Container ================ */
/* ================================================== */

.scroll-container {
  overflow-x: auto;
  white-space: nowrap;
  cursor: grab;
  user-select: none;
  touch-action: none;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge legacy */
}

.scroll-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge (Chromium) */
}

.scroll-container.dragging {
  cursor: grabbing;
}
.scroll-container img {
  -webkit-user-drag: none; /* Safari/Chrome: stops native image drag */
  user-select: none;
  pointer-events: none; /* let pointer events pass through to the container, not get stuck on the img */
}

/* ================================================== */
/* =================== Popup ======================== */
/* ================================================== */
.brx-popup-content {
	position: relative;
}