/* Minimal menu dropdown styles */
:root { 
  --nav-h: 72px;
  --palette-w: 520px;
  --palette-h: 360px;
}

/* Toggle button sizing and alignment */
.jr-nav .menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0 8px 0 0;
  flex-shrink: 0;
}
.jr-nav .menu-toggle .menu-icon {
  width: 72px;
  height: 72px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Desktop hover wiggle only */
@media (hover: hover) {
  .jr-nav .menu-toggle:hover .menu-icon { animation: icon-wiggle 0.8s ease-in-out; }
}
@keyframes icon-wiggle {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(6deg); }
  40% { transform: rotate(-6deg); }
  60% { transform: rotate(4deg); }
  80% { transform: rotate(-4deg); }
  100% { transform: rotate(0deg); }
}

/* Overlay - hidden by default */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  z-index: 2000;
}

/* Panel - hidden by default */
.menu-panel {
  position: fixed;
  top: calc(var(--nav-h, 72px) + 8px);
  right: 10px;
  width: min(90vw, 560px);
  height: min(70vh, 420px);
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  transform-origin: top right;
  transform: scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: transform 180ms ease, opacity 180ms ease;
  z-index: 2100; /* above overlay */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Close button */
.menu-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 2200; /* above panel content */
}

/* Both the square PNG canvas and links use the same fitted square.
   Container units follow the modal's actual width/height, including short previews. */
#menuPanel { container-type: size; align-items: center; justify-content: center; }

/* Palette stage - the container for splotches and background */
#menuPanel #paletteStage {
  position: relative;
  flex: none;
  width: min(100cqw, 100cqh);
  height: min(100cqw, 100cqh);
  aspect-ratio: 1;
  background-image: url('../images/public_navigation/Pallet_Image_yqnwek.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
  overflow: visible;
}

/* Splotches - clickable anchors */
#menuPanel #paletteStage > .splotch {
  position: absolute;
  width: 34.047619%; /* 143 / 420: original reference artwork size */
  height: 34.047619%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  transition: transform 140ms ease;
  z-index: 10;
}

.splotch.is-dragging {
  transition: none;
}

@media (hover: hover) {
  .splotch:hover {
    transform: scale(1.03);
  }
}

/* Original 560x420 desktop reference: contain renders a 420x420 PNG at x=70.
   Subtract that letterbox offset, then normalize to the shared square canvas.
   Transparent graphic margins are retained, including HOME's -2px canvas offset. */
#menuPanel #paletteStage > .splotch-home {
  left: -0.476190%; top: 34.047619%;
  background-image: url('../images/public_navigation/Home_Splotch_uqwed8.png');
}
#menuPanel #paletteStage > .splotch-about {
  left: 19.285714%; top: 13.571429%;
  background-image: url('../images/public_navigation/About_Splotch_co1fil.png');
}
#menuPanel #paletteStage > .splotch-features {
  left: 48.571429%; top: 12.380952%;
  background-image: url('../images/public_navigation/Feature_Splotch_q0zpsh.png');
}
#menuPanel #paletteStage > .splotch-gallery {
  left: 24.285714%; top: 49.761905%;
  background-image: url('../images/public_navigation/Gallery_Splotch_dlbfdw.png');
}
#menuPanel #paletteStage > .splotch-contact {
  left: 51.666667%; top: 49.047619%;
  background-image: url('../images/public_navigation/Contact_Splotch_jmz8wt.png');
}

/* Debug grid overlay */
.palette-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,255,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,255,0.1) 1px, transparent 1px),
    linear-gradient(rgba(255,0,0,0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,0,0,0.2) 1px, transparent 1px);
  background-size:
    10px 10px,
    10px 10px,
    50px 50px,
    50px 50px;
  background-position: 0 0;
  pointer-events: none;
  z-index: 50;
}

/* Debug HUD */
.palette-hud {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,0.7);
  color: #0f0;
  font-family: monospace;
  font-size: 11px;
  padding: 6px 8px;
  border-radius: 4px;
  z-index: 60;
  pointer-events: none;
  white-space: nowrap;
}

.hud-content::after {
  content: '';
  display: inline-block;
  margin-left: 6px;
  font-weight: bold;
}

.hud-content[data-save-status='success']::after {
  content: '✓ Saved';
  color: #0f0;
  animation: fade-out 2s ease forwards;
}

.hud-content[data-save-status='failed']::after {
  content: '✗ Failed';
  color: #f00;
  animation: fade-out 3s ease forwards;
}

@keyframes fade-out {
  0% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* Debug controls */
.debug-controls {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 2150;
  display: none;
  gap: 6px;
}

body.menu-open .debug-controls {
  display: flex;
}

.debug-btn {
  padding: 6px 10px;
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: background 140ms ease;
}

.debug-btn:hover {
  background: rgba(255,255,255,0.3);
}

/* Open state driven by body class */
body.menu-open .menu-overlay {
  display: block;
}

body.menu-open .menu-panel {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}