/* ══════════════════════════════════════════════════════════
   Torus Navigation Component — PNG Background Approach
   ══════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ────────────────────────────── */
:root {
  --torus-size: 220px;
  --torus-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Layout ───────────────────────────────────────────── */
.torus-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.torus-svg {
  width: var(--torus-size);
  height: var(--torus-size);
  overflow: visible;
}

/* ── Transparent arc hit areas ────────────────────────── */
.torus-segment-path {
  fill: transparent;
  stroke: none;
  cursor: pointer;
  transition: fill var(--torus-transition);
  transform-origin: 150px 150px;
  pointer-events: all;
}

.torus-segment-path:hover,
.torus-segment-path:focus-visible {
  fill: transparent;
}

.torus-segment-path:focus-visible {
  outline: 2px solid var(--torus-icon-glow);
  outline-offset: 2px;
}

.torus-segment-path.active {
  fill: transparent;
}

/* ── Icons: theme-adaptive default, glow on hover/active ── */
.torus-segment-icon {
  fill: var(--torus-icon-fill);
  pointer-events: none;
  transition: fill var(--torus-transition), filter var(--torus-transition);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.torus-segment-group:hover .torus-segment-icon {
  fill: var(--torus-icon-active);
  filter: url(#glyph-glow-bright);
}

.torus-segment-group[data-active="true"] .torus-segment-icon {
  fill: var(--torus-icon-active);
  filter: url(#glyph-glow-bright);
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 200, 'opsz' 24;
}

/* ── Center label ──────────────────────────────────────── */
.torus-center-label {
  fill: var(--torus-center-label);
}

/* ── Theme-switchable ring image ──────────────────────── */
[data-theme="default"] .torus-ring-dark,
[data-theme="cartographer"] .torus-ring-light {
  display: none;
}
[data-theme="default"] .torus-ring-light,
[data-theme="cartographer"] .torus-ring-dark {
  display: block;
}


/* ══════════════════════════════════════════════════════════
   Sidebar variant
   ══════════════════════════════════════════════════════════ */
.torus-sidebar-size {
  --torus-size: 210px;
}


/* ══════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --torus-size: 0px;
  }
  .torus-wrap {
    display: none;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --torus-size: 180px;
  }
}

@media (min-width: 1025px) {
  :root {
    --torus-size: 220px;
  }
}


/* ══════════════════════════════════════════════════════════
   Reduced Motion
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .torus-segment-path {
    transition: none;
  }
}