/*
 * ============================================================
 *  Hilton College Virtual Tour — KolorMenu CSS Overrides
 * ============================================================
 */

@font-face {
  font-family: "GesturaHeadline";
  src: url("GesturaHeadline-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

/* ══════════════════════════════════════════════════════════
   CONTAINER
══════════════════════════════════════════════════════════ */

div.kolorMenuContainer {
  width      : 200px !important;
  max-width  : 200px !important;
  /* Use fixed positioning with top/bottom instead of 100vh
     to avoid iOS Safari viewport height bug               */
  position   : fixed !important;
  top        : 0 !important;
  bottom     : 0 !important;
  left       : 0 !important;
  height     : auto !important;
  overflow-y : auto !important;
  overflow-x : hidden !important;
  background : rgba(10, 16, 12, 0.58) !important;
  /* Prevent iOS momentum scroll bounce showing bg         */
  -webkit-overflow-scrolling: touch !important;
}

div.kolorMenuMain {
  width      : 200px !important;
  min-height : 100% !important;
  background : transparent !important;
  overflow   : visible !important;
}

ul.kolorMenu {
  width      : 200px !important;
  min-height : 100% !important;
  background : transparent !important;
  overflow   : visible !important;
}

/* ══════════════════════════════════════════════════════════
   TOP-LEVEL ITEMS
   Gold border flush to left edge (border-left on the li,
   not the p), text starts at 8px from edge.
══════════════════════════════════════════════════════════ */

ul.kolorMenu > li {
  width      : 200px !important;
  max-width  : 200px !important;
  white-space: normal !important;
  display    : block !important;
  position   : relative !important;
  float      : none !important;
}

ul.kolorMenu > li > p,
ul.kolorMenu > li > p[style] {
  font-family   : "GesturaHeadline", Georgia, serif !important;
  font-size     : 13px !important;
  font-weight   : normal !important;
  font-style    : normal !important;
  text-transform: none !important;
  text-align    : left !important;
  letter-spacing: 0.05em !important;
  line-height   : 1 !important;
  color         : rgba(235, 231, 223, 0.85) !important;
  height        : 48px !important;
  padding       : 0 14px 0 11px !important;
  display       : flex !important;
  align-items   : center !important;
  border-left   : none !important;
  border-top    : 0.5px solid rgba(255,255,255,0.07) !important;
  border-right  : none !important;
  border-bottom : none !important;
  border-left   : 3px solid transparent !important;
  background    : transparent !important;
  width         : 200px !important;
  box-sizing    : border-box !important;
  cursor        : pointer !important;
  transition    : color 0.18s, background 0.18s, border-color 0.18s;
  white-space   : nowrap !important;
  overflow      : hidden !important;
  text-overflow : ellipsis !important;
}

ul.kolorMenu > li:first-child > p,
ul.kolorMenu > li:first-child > p[style] {
  border-top: none !important;
}

ul.kolorMenu > li > p span,
ul.kolorMenu > li > p[style] span {
  font-family   : "GesturaHeadline", Georgia, serif !important;
  font-size     : 13px !important;
  font-weight   : normal !important;
  text-transform: none !important;
  letter-spacing: 0.05em !important;
  color         : inherit !important;
  white-space   : normal !important;
}

/* ── Hover ── */
ul.kolorMenu > li:hover > p,
ul.kolorMenu > li:hover > p[style] {
  color        : #ffffff !important;
  background   : rgba(196, 160, 90, 0.10) !important;
  border-left  : 3px solid rgba(196, 160, 90, 0.6) !important;
}

/* ── Selected ── */
ul.kolorMenu > li.menuSelected > p,
ul.kolorMenu > li.menuSelected > p[style],
ul.kolorMenu > li.kolorMenuSelected > p,
ul.kolorMenu > li.pressed > p {
  color        : #ffffff !important;
  background   : rgba(196, 160, 90, 0.13) !important;
  border-left  : 3px solid #C4A05A !important;
}

/* ══════════════════════════════════════════════════════════
   SUB-MENU
══════════════════════════════════════════════════════════ */

ul.kolorMenu li ul,
ul.kolorMenu li ul.kolorMenuGroup,
div.kolorMenuContainer ul.kolorMenu ul,
div.kolorMenuContainer ul.kolorMenu ul.kolorMenuGroup {
  position   : relative !important;
  left       : 0 !important;
  top        : 0 !important;
  right      : auto !important;
  bottom     : auto !important;
  width      : 200px !important;
  max-width  : 200px !important;
  background : transparent !important;
  overflow   : hidden !important;
  display    : none;
}

/* Show sub on click or selected */
ul.kolorMenu li.menuSelected > ul,
ul.kolorMenu li.menuSelected > ul.kolorMenuGroup,
ul.kolorMenu ul.kolorMenuGroup.forceDisplayBlock {
  display : block !important;
}

ul.kolorMenu ul.kolorMenuGroup.forceDisplayNone {
  display : none !important;
}

/* Sub-menu list items */
ul.kolorMenu li ul > li,
ul.kolorMenu li ul.kolorMenuGroup > li {
  width      : 200px !important;
  max-width  : 200px !important;
  white-space: normal !important;
  display    : block !important;
  float      : none !important;
  border-left: none !important;
}

ul.kolorMenu li ul > li > p,
ul.kolorMenu li ul > li > p[style],
ul.kolorMenu li ul.kolorMenuGroup > li > p,
ul.kolorMenu li ul.kolorMenuGroup > li > p[style] {
  font-family   : "GesturaHeadline", Georgia, serif !important;
  font-size     : 12px !important;
  font-weight   : normal !important;
  font-style    : normal !important;
  text-transform: none !important;
  text-align    : left !important;
  letter-spacing: 0.04em !important;
  line-height   : 1.4 !important;
  color         : rgba(210, 206, 198, 0.78) !important;
  padding       : 9px 14px 9px 11px !important;
  border-left   : none !important;
  border-top    : 0.5px solid rgba(255,255,255,0.05) !important;
  border-right  : none !important;
  border-bottom : none !important;
  border-left   : 2px solid transparent !important;
  background    : transparent !important;
  width         : 200px !important;
  box-sizing    : border-box !important;
  white-space   : normal !important;
  transition    : color 0.18s, background 0.18s, border-color 0.18s;
}

ul.kolorMenu li ul > li > p span,
ul.kolorMenu li ul.kolorMenuGroup > li > p span {
  font-family   : "GesturaHeadline", Georgia, serif !important;
  font-size     : 12px !important;
  font-weight   : normal !important;
  text-transform: none !important;
  color         : inherit !important;
  white-space   : normal !important;
}

/* Sub hover */
ul.kolorMenu li ul > li:hover > p,
ul.kolorMenu li ul > li:hover > p[style],
ul.kolorMenu li ul.kolorMenuGroup > li:hover > p {
  color        : #ffffff !important;
  background   : rgba(196, 160, 90, 0.08) !important;
  border-left  : 2px solid rgba(196, 160, 90, 0.55) !important;
}

/* Sub selected — on li or directly on p */
ul.kolorMenu li ul > li.menuSelected > p,
ul.kolorMenu li ul > li.pressed > p,
ul.kolorMenu li ul > li > p.menuSelected,
ul.kolorMenu li ul.kolorMenuGroup > li > p.menuSelected {
  color        : #ffffff !important;
  background   : rgba(196, 160, 90, 0.13) !important;
  border-left  : 2px solid #C4A05A !important;
}

/* ══════════════════════════════════════════════════════════
   FADE-IN ANIMATION
══════════════════════════════════════════════════════════ */

@keyframes hcFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

ul.kolorMenu li > ul > li,
ul.kolorMenu li > ul.kolorMenuGroup > li {
  animation: hcFadeIn 0.4s ease both;
}

ul.kolorMenu li > ul > li:nth-child(1)  { animation-delay: 0.03s; }
ul.kolorMenu li > ul > li:nth-child(2)  { animation-delay: 0.08s; }
ul.kolorMenu li > ul > li:nth-child(3)  { animation-delay: 0.13s; }
ul.kolorMenu li > ul > li:nth-child(4)  { animation-delay: 0.18s; }
ul.kolorMenu li > ul > li:nth-child(5)  { animation-delay: 0.23s; }
ul.kolorMenu li > ul > li:nth-child(6)  { animation-delay: 0.28s; }
ul.kolorMenu li > ul > li:nth-child(7)  { animation-delay: 0.33s; }
ul.kolorMenu li > ul > li:nth-child(8)  { animation-delay: 0.38s; }
ul.kolorMenu li > ul > li:nth-child(9)  { animation-delay: 0.43s; }
ul.kolorMenu li > ul > li:nth-child(10) { animation-delay: 0.48s; }
ul.kolorMenu li > ul > li:nth-child(11) { animation-delay: 0.53s; }
ul.kolorMenu li > ul > li:nth-child(12) { animation-delay: 0.58s; }
ul.kolorMenu li > ul > li:nth-child(13) { animation-delay: 0.63s; }
ul.kolorMenu li > ul > li:nth-child(14) { animation-delay: 0.68s; }
ul.kolorMenu li > ul > li:nth-child(15) { animation-delay: 0.73s; }

/* ══════════════════════════════════════════════════════════
   SCROLLBAR — hidden
══════════════════════════════════════════════════════════ */

div.kolorMenuContainer::-webkit-scrollbar,
div.kolorMenuContainer *::-webkit-scrollbar {
  width: 0px !important;
  background: transparent !important;
}
div.kolorMenuContainer {
  scrollbar-width    : none !important;
  -ms-overflow-style : none !important;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE
   Narrower sidebar, slightly smaller text, adjusted label
══════════════════════════════════════════════════════════ */

@media only screen and (max-width: 768px) and (orientation: portrait) {

  div.kolorMenuContainer,
  div.kolorMenuMain,
  ul.kolorMenu,
  ul.kolorMenu > li,
  ul.kolorMenu li ul,
  ul.kolorMenu li ul.kolorMenuGroup,
  div.kolorMenuContainer ul.kolorMenu ul,
  div.kolorMenuContainer ul.kolorMenu ul.kolorMenuGroup,
  ul.kolorMenu li ul > li,
  ul.kolorMenu li ul.kolorMenuGroup > li {
    width     : 160px !important;
    max-width : 160px !important;
    min-width : 0 !important;
  }

  div.kolorMenuContainer {
    background: rgba(10, 16, 12, 0.58) !important;
    overflow-x: hidden !important;
  }

  /* Portrait — allow wrapping, auto height */
  ul.kolorMenu > li > p,
  ul.kolorMenu > li > p[style] {
    font-size     : 11px !important;
    height        : auto !important;
    min-height    : 42px !important;
    padding       : 12px 8px 12px 8px !important;
    width         : 160px !important;
    max-width     : 160px !important;
    white-space   : normal !important;
    overflow      : visible !important;
    text-overflow : clip !important;
    display       : flex !important;
    align-items   : center !important;
    box-sizing    : border-box !important;
  }

  ul.kolorMenu > li > p span,
  ul.kolorMenu > li > p[style] span {
    white-space   : normal !important;
    overflow      : visible !important;
    max-width     : 144px !important;
    display       : inline !important;
  }

  ul.kolorMenu li ul > li > p,
  ul.kolorMenu li ul > li > p[style],
  ul.kolorMenu li ul.kolorMenuGroup > li > p,
  ul.kolorMenu li ul.kolorMenuGroup > li > p[style] {
    font-size     : 10px !important;
    padding       : 8px 8px 8px 8px !important;
    width         : 160px !important;
    max-width     : 160px !important;
    white-space   : normal !important;
    overflow      : visible !important;
    text-overflow : clip !important;
    box-sizing    : border-box !important;
  }

  ul.kolorMenu li ul > li > p span,
  ul.kolorMenu li ul.kolorMenuGroup > li > p span {
    white-space   : normal !important;
    overflow      : visible !important;
    max-width     : 144px !important;
    display       : inline !important;
  }

  #hc-pano-label { bottom: 55px !important; }
  #hc-pano-label .hc-label-name { font-size: 13px !important; }
}

@media only screen and (max-width: 430px) and (orientation: portrait) {

  div.kolorMenuContainer,
  div.kolorMenuMain,
  ul.kolorMenu,
  ul.kolorMenu > li,
  ul.kolorMenu li ul,
  ul.kolorMenu li ul.kolorMenuGroup,
  div.kolorMenuContainer ul.kolorMenu ul,
  ul.kolorMenu li ul > li,
  ul.kolorMenu li ul.kolorMenuGroup > li {
    width     : 140px !important;
    max-width : 140px !important;
    min-width : 0 !important;
  }

  div.kolorMenuContainer {
    overflow-x: hidden !important;
  }

  /* Portrait small — allow wrapping, auto height */
  ul.kolorMenu > li > p,
  ul.kolorMenu > li > p[style] {
    font-size     : 10px !important;
    height        : auto !important;
    min-height    : 38px !important;
    padding       : 10px 6px 10px 6px !important;
    width         : 140px !important;
    max-width     : 140px !important;
    white-space   : normal !important;
    overflow      : visible !important;
    text-overflow : clip !important;
    display       : flex !important;
    align-items   : center !important;
    letter-spacing: 0.03em !important;
    box-sizing    : border-box !important;
  }

  ul.kolorMenu > li > p span,
  ul.kolorMenu > li > p[style] span {
    white-space   : normal !important;
    overflow      : visible !important;
    max-width     : 126px !important;
    display       : inline !important;
  }

  ul.kolorMenu li ul > li > p,
  ul.kolorMenu li ul > li > p[style],
  ul.kolorMenu li ul.kolorMenuGroup > li > p,
  ul.kolorMenu li ul.kolorMenuGroup > li > p[style] {
    font-size     : 10px !important;
    padding       : 7px 6px 7px 6px !important;
    width         : 140px !important;
    max-width     : 140px !important;
    white-space   : normal !important;
    overflow      : visible !important;
    text-overflow : clip !important;
    box-sizing    : border-box !important;
  }

  ul.kolorMenu li ul > li > p span,
  ul.kolorMenu li ul.kolorMenuGroup > li > p span {
    white-space   : normal !important;
    overflow      : visible !important;
    max-width     : 126px !important;
    display       : inline !important;
  }

  #hc-pano-label { bottom: 55px !important; }
  #hc-pano-label .hc-label-name { font-size: 12px !important; }
}

/* ══════════════════════════════════════════════════════════
   iOS / TOUCH FIXES
══════════════════════════════════════════════════════════ */

/* Faster tap response — removes 300ms iOS delay */
div.kolorMenuContainer,
ul.kolorMenu li > p {
  touch-action  : manipulation !important;
  cursor        : pointer !important;
}

/* Landscape on mobile — reduce item height, smaller font */
@media only screen and (max-height: 500px) and (orientation: landscape) {

  div.kolorMenuContainer {
    width  : 160px !important;
  }

  div.kolorMenuMain,
  ul.kolorMenu,
  ul.kolorMenu > li {
    width     : 160px !important;
    max-width : 160px !important;
  }

  ul.kolorMenu li ul,
  ul.kolorMenu li ul.kolorMenuGroup,
  ul.kolorMenu li ul > li,
  ul.kolorMenu li ul.kolorMenuGroup > li {
    width     : 160px !important;
    max-width : 160px !important;
  }

  ul.kolorMenu > li > p,
  ul.kolorMenu > li > p[style] {
    font-size  : 10px !important;
    height     : 36px !important;
    padding    : 0 8px 0 8px !important;
    width      : 160px !important;
    letter-spacing: 0.03em !important;
  }

  ul.kolorMenu li ul > li > p,
  ul.kolorMenu li ul > li > p[style],
  ul.kolorMenu li ul.kolorMenuGroup > li > p,
  ul.kolorMenu li ul.kolorMenuGroup > li > p[style] {
    font-size  : 10px !important;
    padding    : 6px 8px 6px 8px !important;
    width      : 160px !important;
  }

  #hc-pano-label {
    bottom    : 75px !important;
  }

  #hc-pano-label .hc-label-name {
    font-size : 11px !important;
  }
}