/* Shared navigation styles - used across all pages */

/* CSS variables for nav sizing - can be overridden per-page */
:root {
  --nav-width: 18vw;
  --nav-visible: 3.3vw;
  --nav-padding-v: 2.5vw;
  --nav-padding-h: 1.9vw;
  --nav-font-size: 1.75vw;
  --nav-font-size-heading: 2.55vw;
  --nav-font-size-sub: 1.55vw;
  --nav-gap: 1.25vw;
}

/* Side nav container - fixed positioning */
.side-nav {
  position: relative;
  width: var(--nav-width);
  padding: var(--nav-padding-v) var(--nav-padding-h);
  display: flex;
  align-items: flex-start;
  background: #f8f8f8;
  transition: transform 260ms ease, width 260ms ease;
  transform: translateX(0);
  overflow: visible;
  z-index: 2200;
}

.side-nav nav {
  display: flex;
  flex-direction: column;
  gap: var(--nav-gap);
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.side-nav nav > a.side-link,
.side-nav .nav-group,
.side-nav .nav-preview {
  transition: opacity 220ms ease;
  opacity: 1;
  transform: none;
  transition-delay: 0ms;
}

/* Jiggle animation for nav links */
@keyframes nav-jiggle {
  0% { transform: translateX(0) rotate(0deg); }
  30% { transform: translateX(0.04vw) rotate(0.15deg); }
  60% { transform: translateX(-0.02vw) rotate(-0.08deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

/* Nav links styling */
.side-link {
  text-decoration: none;
  color: #111;
  font-family: 'LunchType Light', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  font-size: var(--nav-font-size);
  font-weight: 300;
  transition: color 160ms ease, font-family 160ms ease, transform 160ms ease;
  display: inline-block;
}

.side-link:hover,
.side-link:focus {
  color: #000;
  font-family: 'LunchType Regular', 'LunchType Light', system-ui;
  animation: nav-jiggle 900ms ease-out;
}

.headingtitle {
  text-decoration: none;
  color: #111;
  font-family: 'LunchType Regular', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  font-size: var(--nav-font-size-heading);
  font-weight: 300;
  transition: color 160ms ease, font-family 160ms ease;
}

/* Nav header layout */
.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8vw;
  position: relative;
}

/* Collapse button - spans full height of nav on right edge */
.collapse-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4.2vw;
  transition: all 200ms ease;
  z-index: 10;
  box-shadow: inset -4.2vw 0 2vw -2vw rgba(180, 0, 0, 0);
}

.collapse-toggle:hover:not(:disabled) {
  box-shadow: inset -4.2vw 0 2vw -2vw rgba(180, 0, 0, 0.15);
}

.collapse-toggle:active:not(:disabled) {
  box-shadow: inset -4.2vw 0 2vw -2vw rgba(180, 0, 0, 0.25);
}

/* Permanent glass effect gradients on right edge */
.side-nav::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 5vw;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);
  pointer-events: none;
  z-index: 1;
}

.side-nav::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 0.15vw;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.903), rgba(0,0, 0, 0.05));
  pointer-events: none;
  z-index: 2;
}

/* Submenu (drawer) styles */
.side-toggle {
  cursor: pointer;
}

.submenu {
  overflow: hidden;
  max-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55vw;
  transition: max-height 280ms cubic-bezier(.2, .9, .2, 1);
}

.submenu.open {
  max-height: 16vh;
  margin-top: 0.55vw;
}

.side-sub-link {
  padding-left: 1.4vw;
  font-size: var(--nav-font-size-sub);
  color: #222;
  font-family: 'LunchType Light', system-ui;
}

.side-sub-link:hover,
.side-sub-link:focus {
  font-family: 'LunchType Regular', 'LunchType Light', system-ui;
}

/* Nav preview area at bottom of side-nav */
.nav-preview {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4vh;
  pointer-events: none;
  display: flex;
  justify-content: center;
  padding-left: 1vw;
  padding-right: 1vw;
}

.nav-preview-inner {
  width: 17vw;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.nav-preview img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.2vw;
  opacity: 0;
  transition: opacity 180ms ease;
}

.nav-preview.visible img {
  opacity: 1;
}

/* Vertical collapsed label */
.collapsed-label {
  display: block;
  position: fixed;
  top: 7vw;
  left: calc(var(--nav-visible) / 2 + 1.9vw);
  transform-origin: center;
  transform: translateX(-50%) rotate(90deg);
  white-space: nowrap;
  pointer-events: none;
  font-family: 'LunchType Light', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  font-size: 1.4vw;
  color: #111;
  opacity: 0;
  visibility: hidden;
  z-index: 2250;
  transition: opacity 140ms ease 0s, transform 260ms ease 0s, visibility 0s linear 0s;
}

.site-wrap.collapsed .collapsed-label {
  opacity: 1;
  visibility: visible;
  transition-delay: 300ms;
}

/* Darken on hover when collapsed - using box-shadow instead of ::after */
.side-nav.collapsed {
  box-shadow: inset 0 0 0 100vw rgba(0, 0, 0, 0);
  transition: transform 260ms ease, width 260ms ease, box-shadow 220ms ease;
}

.side-nav.collapsed:hover {
  box-shadow: inset 0 0 0 100vw rgba(0, 0, 0, 0.12);
}

/* Adjust glass effect for collapsed nav */
.side-nav.collapsed::before {
  width: 2vw;
}

.side-nav.collapsed::after {
  width: 0.15vw;
}

/* Keep the title on a single line */
.headingtitle {
  white-space: nowrap;
}

/* Collapsed state: shrink nav to only show the visible strip */
.side-nav.collapsed {
  width: calc(var(--nav-visible) * 2);
  transform: none;
  padding: var(--nav-padding-v) 0;
}

/* Hide all nav content when collapsed */
.side-nav.collapsed nav > a.side-link,
.side-nav.collapsed .nav-group,
.side-nav.collapsed .nav-preview {
  opacity: 0;
  transform: none;
  pointer-events: none;
  transition-delay: 0ms;
}

.side-nav.collapsed .nav-header {
  opacity: 0;
  pointer-events: none;
}

/* Delay transitions when nav opens */
.side-nav:not(.collapsed) nav > a.side-link,
.side-nav:not(.collapsed) .nav-group,
.side-nav:not(.collapsed) .nav-preview {
  transition-delay: 120ms;
}

/* Hide collapse button when collapsed */
.side-nav.collapsed .collapse-toggle {
  display: none;
}

/* Ensure header stays visible */
.side-nav .nav-header {
  z-index: 2;
}