/*
 * r4it-circle-menu Grav Plugin
 * (c) 2024 Your Company or Name
 *
 * This plugin is provided "as is" without warranty of any kind, either expressed or implied.
 * Use at your own risk. The author is not responsible for any damage or data loss.
 * You may modify and use this code under the terms of the MIT License.
 */

/* CSS styles */

.menu-wrapper.expanded {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 2rem;
  z-index: 5; /* lowered so logo can sit above reliably */
  position: relative;
}

.menu-svg {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 opacity: 0;
 transition: opacity 0.4s ease;
 pointer-events: auto;
 z-index: 6; /* below labels, well below logo */
}

.menu-wrapper.expanded .menu-svg {
 opacity: 1 !important;
 pointer-events: auto !important;
}

.menu-segment { pointer-events: auto !important; cursor: pointer !important; transition: filter 0.25s ease, transform 0.2s ease; }
.menu-segment:hover { filter: brightness(1.1) drop-shadow(0 0 4px rgb(255 255 255 / 25%)); }
.menu-segment:focus-visible { outline: 2px solid #fc0; outline-offset: 3px; filter: brightness(1.15) drop-shadow(0 0 6px rgb(255 255 255 / 35%)); }
.menu-segment.kbd-focus { filter: brightness(1.15); outline: 2px solid #fc0; outline-offset: 3px; }

.menu-group {
  pointer-events: auto !important;
}

#labels-container {
  pointer-events: none !important;
  position: relative;
  z-index: 7; /* above segments, below logo */
}

/* Decorative rim around the circle (accessibility-safe) */
.menu-rim {
  stroke: var(--menu-rim-color, rgb(255 255 255 / 55%));
  stroke-width: var(--menu-rim-width, 2.5px);
  filter: drop-shadow(0 0 6px rgb(255 255 255 / 25%));
  vector-effect: non-scaling-stroke; /* keep width when scaled */
}

/* Animated colored separators between segments */
.menu-segment {
  stroke-linecap: butt;
  stroke-linejoin: miter;
  mix-blend-mode: screen;
}

/* default invisible dash; JS will set --dashlen per-path */
.menu-segment.sep-animated {
  stroke-dasharray: var(--dashlen, 1); /* filled in by JS */
  stroke-dashoffset: var(--dashlen, 1);
  animation: r4cm-sep-move 2.6s linear infinite;
}

@keyframes r4cm-sep-move {
  0% { stroke-dashoffset: var(--dashlen, 1); }
  100% { stroke-dashoffset: calc(-1 * var(--dashlen, 1)); }
}

circle {
  pointer-events: none !important;
}

@media (width >= 501px) {
  .responsive-list {
    display: none !important;
  }
}

.tooltip {
  position: absolute;
  padding: 6px 10px;
  background: rgb(0 0 0 / 85%);
  color: white;
  font-size: 0.85rem;
  border-radius: 4px;
  opacity: 50;
  transition: opacity 0.2s ease;
  z-index: 100;
  /* Positioning now driven by CSS variables set from JS */
  left: var(--cm-tooltip-left, 50%);
  top: var(--cm-tooltip-top, 50%);
  transform: var(--cm-tooltip-transform, translate(-50%, -50%));
  pointer-events: none;
}

.tooltip.show {
  opacity: 1;
}

/* CircleMenu tooltip positioning logic */
.tooltip.cm-active[data-side="left"],
.tooltip.cm-active[data-side="right"] {
  /* Base geometry vars provided via inline style: --cm-center-x, --cm-center-y, --cm-radius */
  /* Fallbacks for safety */
  --cm-center-x: var(--cm-center-x, 0);
  --cm-center-y: var(--cm-center-y, 0);
  --cm-radius: var(--cm-radius, 200);
  --cm-tooltippy-gap: 28px; /* horizontal distance from circle edge */
  --cm-tooltippy-relY: var(--cm-tooltippy-relY, 0); /* -1 .. 1 */
  /* Map relY (-1..1) to circle coordinate: centerY + relY * radius */
  --cm-anchor-y: calc(var(--cm-center-y) + var(--cm-tooltippy-relY) * var(--cm-radius));
  /* Convert svg space (viewBox) to actual screen via translate from 50% center; we approximate by using the existing centered layout.
     JS sets absolute left/top via variables; here we only decide horizontal side. */
}

.tooltip.cm-active[data-side="left"] {
  --cm-tooltip-left: calc(50% - var(--cm-radius) - var(--cm-tooltippy-gap));
  --cm-tooltip-top: 50%; /* We'll shift via translateY using relY proportion */
  --cm-tooltip-transform: translate(-100%, calc(var(--cm-tooltippy-relY) * var(--cm-radius) - 50%));
}

.tooltip.cm-active[data-side="right"] {
  --cm-tooltip-left: calc(50% + var(--cm-radius) + var(--cm-tooltippy-gap));
  --cm-tooltip-top: 50%;
  --cm-tooltip-transform: translate(0, calc(var(--cm-tooltippy-relY) * var(--cm-radius) - 50%));
}

@media (width <= 500px) {
 /* Re-enable circle visuals on very small screens */
 .menu-svg,
 .menu-segment,
 .segment-label { display: block !important; }
 /* Keep SVG centered */
 .menu-svg { opacity:1 !important; }
 /* Allow responsive list also if desired; comment out next line to hide list */
 .responsive-list { display:none !important; }
}

.menu-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.menu-segment {
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

.menu-segment:focus,
.menu-segment:hover {
  outline: none;
  filter: brightness(1.2);
}

.segment-label {
  color: #fff;
  font-size: 1rem;
  text-align: center;
  pointer-events: none;
}

/* SVG text labels rendered by JS */
svg .segment-text {
  dominant-baseline: middle;
  text-anchor: middle;
  letter-spacing: 0.2px;
}

/* Styles for the logo container to position it, size it, make it round with a glow, and add background */
div#menu > div.logo-static {
  position: absolute;
  width: 200px; /* Adjust size as needed */
  height: 200px; /* Adjust size as needed */
  top: 50%; /* Center vertically within parent #menu */
  left: 50%; /* Center horizontally within parent #menu */
  transform: translate(-50%, -50%); /* Adjust position to truly center */
  border-radius: 50%; /* Make the container round */
  box-shadow: 0 0 30px 10px rgb(12 7 162 / 30%); /* Add the glowing box-shadow */
  display: flex; /* Use flexbox to center the image inside */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  z-index: 15; /* Ensure it stacks above the menu (menu z-index was 5) */
  background-color: #003; /* Dark blue background color */
}

/* Styles for the image inside the logo container to ensure it fits */
div#menu > div.logo-static > img {
  max-width: 100%; /* Ensure image doesn't overflow the container */
  max-height: 100%; /* Ensure image doesn't overflow the container */
  object-fit: contain; /* Scale the image nicely within the container */
}

/* Optional: If the #menu parent's z-index or position changes, you might need to adjust the logo's z-index accordingly. */

/* Ensure div#menu has position: relative or absolute for absolute positioning of the logo-static child to work correctly relative to it. */

/* related resource: circle-menu.css:141:1 */
div#menu > div.logo-static { /* the element was .logo-static */
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: rgb(0 191 255 / 70%) 0 0 30px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 15;
  background-color: rgb(0 0 51);
}

/* related resource: circle-menu.css:158:1 */
div#menu > div.logo-static > img { /* the element was img */
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}