@font-face {
  font-family: 'Figtree';
  src: url('./fonts/Figtree-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 600;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}



/* The 16:9 canvas and scaling container */
.nooked-overlay-wrapper {
  position: relative !important;
  width: 100%;
  aspect-ratio: 16 / 9; 
  height: 100%;       /* keep the video canvas 16:9 */
  overflow: hidden;
  container-type: size;        /* enables cqi/cqb for descendants */

  /* scale unit: “1” equals 1% of container width, capped by height */
  /* convert height percent (cqb) to width-equivalent with 16/9 */
  --u: min(1cqi, calc((16 / 9) * 1cqb));
}

/* VIDEO LAYER */
.nooked-overlay-video-container {
  background: #000;
  position: absolute;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.nooked-overlay-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* OVERLAY LAYER */
.nooked-overlay {
  position: absolute !important;
  inset: 0;
  z-index: 9999;

  display: flex;
  font-family: 'Figtree';
  font-weight: 400;
  font-size: calc(16px * var(--u));   /* base text scales */
  overflow: hidden;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.nooked-overlay .nooked-overlay-nav {
  background: linear-gradient(90deg, rgba(48, 32, 8, 1) 0%, rgba(48, 32, 8, 0) 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(2 * var(--u));
  padding: calc(2 * var(--u)) 0 calc(2 * var(--u)) calc(2 * var(--u));
  transform-origin: top left;
  width: calc(24 * var(--u));
  opacity: 1;
  transition: opacity 600ms ease-out;
}

.nooked-overlay .nooked-overlay-nav.hidden {
  opacity: 0;
}

.nooked-overlay .nooked-overlay-btn.nooked-overlay-arrow {
  background-image: url("./assets/icons/chevron-left.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: calc(0.9 * var(--u)) calc(0.9 * var(--u));
  padding: calc(0.3 * var(--u));
  width: calc(1 * var(--u));
  height: calc(1 * var(--u));
  align-self: center;
}

.nooked-overlay-logo {
  background-image: url("./assets/symbol.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  width: calc(3.25 * var(--u));
  height: calc(3.25 * var(--u));
}

.nooked-overlay .nooked-overlay-nav-group {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: calc(0.75 * var(--u));
}

.nooked-overlay .nooked-overlay-nav-label {
  color: rgba(253, 250, 246, 0.6);
  text-transform: uppercase;
  font-size: calc(0.875 * var(--u));
  font-weight: 600;
  margin-bottom: calc(0.25 * var(--u));
  line-height: 150%;
}

.nooked-overlay .nooked-overlay-btn {
  border: 1px solid rgba(253, 250, 246, 0.15);
  background: rgba(86, 86, 86, 0.20);
  backdrop-filter: blur(10.5px);
  border-radius: calc(0.375 * var(--u));
  display: inline-flex;                 /* hug width */
  align-items: center;
  justify-content: center;
  font-family: 'Figtree';
  font-weight: 600;
  font-size: calc(1 * var(--u));
  color: #FDFAF6;
  /* cursor: pointer; */
  transition: background 100ms ease-in-out;
  align-self: flex-start;               /* prevent stretch */
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
}

/* .nooked-overlay .nooked-overlay-btn:hover {
  background: rgba(141, 141, 141, 0.3);
} */

.nooked-overlay nav .nooked-overlay-btn {
  padding: calc(0.75 * var(--u)) calc(1.25 * var(--u));
  border-radius: calc(80 * var(--u));
  font-size: calc(1 * var(--u));
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}

.nooked-overlay .nooked-overlay-btn.select {
  background-image: url("./assets/icons/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right calc(1 * var(--u)) center;
  background-size: calc(1.2 * var(--u)) calc(1.2 * var(--u));
  padding-right: calc(2.8 * var(--u));
}

.nooked-overlay .nooked-overlay-btn.active {
  background: #FDFAF6;
  color: #1F1302;
  border-color: transparent;
  cursor: default;
}


.nooked-overlay .nooked-overlay-toolbar {
  display: flex;
  gap: calc(0.5 * var(--u));
  flex-direction: row;
}

.nooked-overlay .nooked-overlay-toolbar .nooked-overlay-btn {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: calc(1.35 * var(--u)) calc(1.35 * var(--u));
  width: calc(2.5 * var(--u));
  height: calc(2.5 * var(--u));
  padding: calc(0.25 * var(--u));
  border-radius: calc(0.375 * var(--u));
}

.nooked-overlay .nooked-overlay-toolbar .info-toggle {
  background-image: url("./assets/icons/information-circle.svg");
}

.nooked-overlay .nooked-overlay-toolbar .nooked-overlay-audio-toggle {
  background-image: url("./assets/icons/audio-muted.svg");
}

.nooked-overlay .nooked-overlay-toolbar .nooked-overlay-audio-toggle.nooked-overlay-audio-on {
  background-image: url("./assets/icons/audio-on.svg");
}

.nooked-overlay .collapse-toggle {
  /* cursor: pointer; */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(1 * var(--u));
}



.nooked-overlay .nooked-overlay-toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: calc(0.5 * var(--u));
}

.nooked-overlay-toggle-switch-label {
  margin: 0;
  font-weight: inherit;
}

.nooked-overlay .toggle-switch-checkbox {
  width: calc(2 * var(--u));
  height: calc(1 * var(--u));
  background: rgba(137, 181, 138, 0.38);
  border-radius: calc(80 * var(--u));
  position: relative;
  cursor: pointer;
}

.toggle-switch-inner {
  width: calc(0.625 * var(--u));
  height: calc(0.625 * var(--u));
  background: #FDFAF6;
  border-radius: calc(80 * var(--u));
  position: absolute;
  top: calc(0.1875 * var(--u));
  right: calc(0.1875 * var(--u));
  transition: right 100ms ease-in-out;
}

.nooked-overlay .nooked-overlay-main-menu {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  align-items: flex-start;
  gap: calc(2 * var(--u));
}

.nooked-overlay .nooked-overlay-forecast {
  color: #FDFAF6;
  font-size: calc(1 * var(--u));
  display: inline-flex;
  align-items: center;
  gap: calc(0.75 * var(--u));
}

.nooked-overlay .icon-weather {
  background: url(./assets/icons/sun.svg) no-repeat center center / contain;
  width: calc(1.25 * var(--u));
  height: calc(1.25 * var(--u));
}



@media (max-width: 600px) {
  /* optional mobile tweaks if needed */
}