Template:Menu/styles.css

/* Tabs container */
.gw-tabs { margin: 1rem 0; }

/* Hide radio inputs, style labels as tabs */
.gw-tab-input { position: absolute; left: -9999px; }
.gw-tab {
  display: inline-block;
  padding: .5rem .9rem;
  margin: 0 .25rem -.05rem 0;
  border: 1px solid #bfa3b1;
  border-bottom: 0;
  border-top-left-radius: .6rem;
  border-top-right-radius: .6rem;
  background: #eee8f2;
  color: #3d3340;
  cursor: pointer;
  font-weight: 600;
}
.gw-tab:hover { background: #e6ddee; }

/* Panels: default hidden; show when corresponding input is checked */
.gw-panel {
  display: none;
  border: 1px solid #bfa3b1;
  border-radius: 0 .75rem .75rem .75rem;
  padding: 1rem;
  background: #fff5fa;
}
.gw-tab-input:checked + .gw-tab + .gw-panel { display: block; }

/* Grid of pink cards */
.gw-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem;
}

.gw-item {
  position: relative;
  padding: .85rem 1rem;
  background: #fff5fa;
  border: 1px solid #bfa3b1;
  border-left: 8px solid #b0005a;
  border-radius: .75rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  font-size: 1rem;
  line-height: 1.35;
}
.gw-item a { color: #3d3340; text-decoration: none; font-weight: 600; }
.gw-item:hover { border-color: #b0005a; }

/* Tooltip (sanitizer-safe): text from data-desc; no transforms/transitions */
.gw-item::after {
  content: attr(data-desc);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  margin-bottom: 6px;
  background: #3d3340;
  color: #fff;
  border-radius: .5rem;
  padding: .5rem .6rem;
  font-size: .9rem;
  line-height: 1.3;
  opacity: 0;
  /* no pointer-events, no transform/transition/z-index */
  white-space: normal;
}
.gw-item:hover::after { opacity: 1; }

/* Mobile: stack columns */
@media (max-width: 800px) {
  .gw-menu-grid { grid-template-columns: 1fr; }
}