@font-face {
  font-family: "Franklin";
  src: url("./webfonts/franklin-bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Franklin";
  src: url("./webfonts/franklin-regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Sentinel"; /* Changed font-family to 'Sentinel' */
  src: url("./webfonts/SentinelSSm-Black-Pro_Web.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Sentinel"; /* Changed font-family to 'Sentinel' */
  src: url("./webfonts/SentinelSSm-Bold-Pro_Web.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Sentinel"; /* Changed font-family to 'Sentinel' */
  src: url("./webfonts/SentinelSSm-Book-Pro_Web.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Sentinel"; /* Changed font-family to 'Sentinel' */
  src: url("./webfonts/SentinelSSm-Medium-Pro_Web.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Sentinel"; /* Changed font-family to 'Sentinel' */
  src: url("./webfonts/SentinelSSm-Semibold-Pro_Web.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}

.font-sentinel {
  font-family: "Sentinel", serif;
}

body {
  font-family: "Arial", sans-serif !important;
}

h1,
h2 {
  font-family: "Sentinel", serif;
  font-weight: 500 !important;
}

.font-sentinel {
  font-family: "Sentinel", serif;
}

.video-js .vjs-control-bar {
  display: none !important;
  background-color: rgba(15, 23, 42, 0.7);
}

.video-js .vjs-big-play-button {
  /* display:none !important; */
  top: unset;
  left: unset;
  right: 8px;
  bottom: 8px;
  background-color: transparent;
}

/* Custom Timeline Styles */

.custom-timeline:before {
}

.custom-timeline:after {
}

.custom-timeline-marker:hover::after {
  /* content: attr(data-label);
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap; */
}

.custom-timeline-marker.deactivated {
  pointer-events: none !important;
}

/* Fix modal scrolling on iOS */
.hotspotModal {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Ensure modal content can scroll on mobile */
@media (max-width: 1023px) {
  .hotspotModal {
    overflow-y: scroll !important;
  }
}

button > div:nth-child(2) {
  /* background-color: #ffffff;
    border: 1px solid #F3F4F6; */
}

button.active > div:nth-child(2) {
  /* background-color: #F3F4F6;
    border: 1px solid #F3F4F6; */
}

button:hover > div:nth-child(2) {
  /* background-color: #F3F4F6; */
}
button.has-been-played {
}
button.not-been-played {
}
.bg-gray-900\/50 {
  display: none !important;
}

.button-text.button-timestamp-past,
.button-text.button-timestamp-past + .button-text {
  background-color: #aabcc9 !important;
}

.button-text.button-timestamp-playing-now,
.button-text.button-timestamp-playing-now + .button-text,
.button-text.button-timestamp:hover,
.button-text.button-timestamp:focus-visible,
.button-text.buttonHotspots:hover,
.button-text.buttonHotspots:focus-visible,
.button-hover {
  background-color: #00385f !important;
  color: #fff !important;
}

.button-text.button-timestamp-playing-now + .button-text,
.button-text.button-timestamp:hover + .button-text,
.button-text.button-timestamp:focus-visible + .button-text,
.button-text.buttonHotspots:hover + .button-text,
.button-text.buttonHotspots:focus-visible + .button-text {
  fill: #fff !important;
}

.button-text.button-timestamp-playing-now + .button-text div path {
  fill: #fff !important;
}

.button-text.button-timestamp-playing-now div svg path,
.button-text.button-timestamp:hover div svg path,
.button-text.button-timestamp:focus-visible div svg path,
.button-text.buttonHotspots:hover div svg path,
.button-text.buttonHotspots:focus-visible div svg path {
  fill: #fff !important;
}

.wrapper-for-timeline-buttons:has(.button-timestamp-playing-now) {
  /* background-color: #0082ca !important; */
  /* -webkit-box-shadow: 0px 0px 0px 4px #0082ca; */
  /* -moz-box-shadow: 0px 0px 0px 4px #0082ca; */
  /* box-shadow: 0px 0px 0px 4px #0082ca; */
}

.button-dot.button-timestamp-past,
.button-dot.button-timestamp-playing-now,
.button-dot.button-timestamp:hover,
.button-dot.button-timestamp:focus-visible {
  background-color: #00385f !important;
  /* border-color: #0082ca !important; */
}

.button-timestamp-mobile.button-timestamp-playing-now {
  background-color: #00385f !important;
  color: white;
}

.chapterCurrent {
  background-color: #fff !important;
  border-color: #f3f4f6 !important;
}

.hotspotsContainer {
  display: none;
}

.hotspotsContainer.active {
  display: flex;
}

.flickity-viewport {
  width: 100% !important;
}

.playbutton .playState {
  display: none;
}
.playbutton.play .playState {
  display: flex;
}

.playbutton.play .pauseState {
  display: none;
}
.playbutton .pauseState {
  display: flex;
}

/* flickity classes*/

.flickity-viewport {
}
.flickity-slider {
}

.flickity-button.flickity-prev-next-button {
  top: unset;
  bottom: 0;
  transform: unset;
  background: rgba(255, 255, 255, 0.5);
  border-radius: unset;
}

.flickity-button.flickity-prev-next-button svg path {
  fill: #00385f;
}

.flickity-button.flickity-prev-next-button:disabled {
}

.flickity-button.flickity-prev-next-button.previous {
  left: 0;
}

.flickity-button.flickity-prev-next-button.next {
  right: 0;
}

.hotspotButton {
  transform: translate(-38%, -90%);
}

:focus-visible {
  outline: 4px solid #0082ca !important;
  outline-offset: -4px;
}

.hotspotButton:focus-visible {
  outline: 4px solid #ffffff !important;
  outline-offset: 8px;
}

.slide {
  pointer-events: none;
  width: 100%;
}

.slide img {
  pointer-events: auto;
}

.custom-timeline:focus-visible {
  outline: none !important;
}

/* Contain behavior for video wrapper - scales to fit without cropping */
@media (min-width: 768px) {
  .video-contain {
    width: auto;
    height: auto;
    max-width: min(100%, calc((100dvh - 12rem) * 16 / 9));
    max-height: calc(100dvh - 12rem);
    aspect-ratio: 16 / 9;
  }
}

/* Ultra-wide screens - remove vertical padding around video */
@media (min-width: 1950px) {
  .video-section-ultrawide {
    flex-grow: 0 !important;
    align-items: flex-start !important;
  }
}
