/* ========================================
   JVS RESTAURANT WEBSITE
   Mobile First
======================================== */


/* ========================================
   VARIABLES
======================================== */

:root {
  --black: #050505;
  --dark: #101010;

  --gold: #f4c542;
  --gold-muted: #c9a331;

  --white: #ffffff;

  /* Keep navigation compact on phones */
  --nav-width: 70px;

  --logo-height: 65px;

  --footer-height: 42px;
}

/* ========================================
   RESET
======================================== */

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


html {
  scroll-behavior: smooth;
  background-color: var(--black);
}


body {

  width: 100%;

  min-height: 100%;

  background-color: var(--black);

  color: var(--white);

  font-family: "Montserrat", sans-serif;

  overflow-x: hidden;

}


/* Hide scrollbar while keeping scrolling */

body::-webkit-scrollbar {
  width: 0;
  height: 0;
}


/* ========================================
   LOGO
======================================== */

.brand {

  position: fixed;

  top: 0;
  left: 0;

  z-index: 100;

  width: var(--nav-width);

  height: var(--logo-height);

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: var(--black);

}


.brand__link {

  display: flex;

  width: 100%;
  height: 100%;

  align-items: center;

  justify-content: center;

}


.brand__logo {

  display: block;

  width: 52px;

  max-width: 72%;

  height: auto;

  object-fit: contain;

}


/* ========================================
   LEFT NAVIGATION
======================================== */

.side-nav {

  position: fixed;

  top: var(--logo-height);

  left: 0;

  bottom: var(--footer-height);

  z-index: 90;

  width: var(--nav-width);

  display: flex;

  flex-direction: column;

  align-items: stretch;

  justify-content: center;

  gap: 6px;

  padding: 12px 7px;

  background: linear-gradient(
    to right,
    rgba(5, 5, 5, 1) 0%,
    rgba(5, 5, 5, 0.96) 75%,
    rgba(5, 5, 5, 0.88) 100%
  );

}


.side-nav__link {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 48px;

  padding: 8px 3px;

  color: rgba(244, 197, 66, 0.58);

  text-decoration: none;

  text-align: center;

  text-transform: uppercase;

  font-size: 9px;

  font-weight: 600;

  letter-spacing: 0.08em;

  line-height: 1.25;

  transition:
    color 0.2s ease,
    transform 0.2s ease;

}


/* Gold indicator */

.side-nav__link::before {

  content: "";

  position: absolute;

  left: -7px;

  top: 50%;

  width: 3px;

  height: 60%;

  background-color: var(--gold);

  border-radius: 0 4px 4px 0;

  transform:
    translateY(-50%)
    scaleY(0);

  transition: transform 0.2s ease;

}


.side-nav__link:hover {

  color: var(--gold);

}


.side-nav__link.active {

  color: var(--gold);

}


.side-nav__link.active::before {

  transform:
    translateY(-50%)
    scaleY(1);

}


/* ========================================
   MAIN MENU VIEWER
======================================== */

.menu-viewer {

  width: 100%;

  background-color: var(--black);

}


/* ========================================
   MENU PANELS
======================================== */

/* ========================================
   MENU PANELS
   Designed for 1080 × 1920 menu artwork
======================================== */

.menu-panel {
  position: relative;

  width: 100%;
  height: 100svh;
  min-height: 100svh;

  background: #050505;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  padding-left: var(--nav-width);
  padding-bottom: var(--footer-height);
}


/* 1080 × 1920 MENU IMAGE */

.menu-panel__image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center;

  background: #050505;
}


/* ========================================
   FOOTER
======================================== */

.footer {

  position: fixed;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 110;

  height: var(--footer-height);

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  padding:

    6px
    10px
    calc(6px + env(safe-area-inset-bottom))
    calc(var(--nav-width) + 10px);

  color: var(--white);

  background-color: rgba(5, 5, 5, 0.96);

  border-top: 1px solid rgba(255,255,255,0.08);

  font-size: 9px;

  font-weight: 500;

  letter-spacing: 0.04em;

  text-align: center;

}


.footer__separator {

  color: var(--gold);

}


/* ========================================
   TABLET
======================================== */

@media (min-width: 600px) {

  :root {

    --nav-width: 110px;

    --logo-height: 86px;

    --footer-height: 50px;

  }


  .brand__logo {

    width: 72px;

  }


  .side-nav {

    padding-left: 10px;

    padding-right: 10px;

  }


  .side-nav__link {

    min-height: 54px;

    font-size: 11px;

  }


  .footer {

    font-size: 11px;

  }

}


/* ========================================
   DESKTOP
======================================== */

@media (min-width: 1024px) {

  :root {

    --nav-width: 150px;

    --logo-height: 100px;

    --footer-height: 52px;

  }


  .brand__logo {

    width: 90px;

  }


  .side-nav {

    gap: 12px;

    padding-left: 15px;

    padding-right: 15px;

  }


  .side-nav__link {

    min-height: 58px;

    font-size: 12px;

    letter-spacing: 0.14em;

  }


  .menu-panel__image {

    object-fit: contain;

  }


  .footer {

    justify-content: flex-start;

    font-size: 12px;

  }

}


/* ========================================
   SHORT MOBILE SCREENS
======================================== */

@media (max-height: 600px) {

  .side-nav {

    gap: 2px;

  }


  .side-nav__link {

    min-height: 38px;

    font-size: 8px;

  }

}


/* ========================================
   REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior: auto;

  }


  .side-nav__link {

    transition: none;

  }

}