/* =========================================
   NAVIGATION — GuideGuru (ICON NAV)
   ========================================= */

/* Icon-only nav bar */
.gg-nav-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 5px 5px 5px;
  background: var(--card, #121212);
  border-bottom: 1px solid var(--line, #1f1f1f);
  overflow-x: auto;
  scrollbar-width: none;           /* Firefox */
}
.gg-nav-icons::-webkit-scrollbar { /* Chrome/Safari */
  display: none;
}

/* Base icon button — dark box */
.gg-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  background: var(--card, #121212);
  border: 1px solid var(--line, #1f1f1f);

  cursor: pointer;
  transition:
    background   0.18s ease,
    border-color 0.18s ease,
    transform    0.12s ease;
}

/* Icon glyphs — clean white by default */
.gg-icon img {
  width: 38px;
  height: 38px;
  opacity: 0.60; /* reduced from 0.9 to soften by ~20% */
  filter: brightness(0.75) invert(1); /* light grey instead of full white */
  transition:
    filter   0.18s ease,
    opacity  0.18s ease,
    transform 0.12s ease;
}

/* No funky hover transforms (mobile-first) */
.gg-icon:hover,
.gg-icon:focus,
.gg-icon:focus-visible {
  transform: none;
  background: var(--card, #121212);
  border-color: var(--line, #1f1f1f);
}

@media (hover: hover) {
  .gg-icon:hover img {
    opacity: 1;
  }
}

/* ACTIVE — green background (uses --brand so seasons can recolour) */
.gg-nav-icons .gg-icon.is-active {
  background: var(--brand, #2cd38d) !important;
  border-color: var(--brand, #2cd38d) !important;
}

/* Active icon glyph — soft dark, not pure black */
.gg-nav-icons .gg-icon.is-active img {
  filter: brightness(0.05);  /* deep charcoal */
  opacity: 1 !important;
}

/* Category header text under icons */
.gg-cat-header {
  width: 100%;
  text-align: center;
  color: var(--ink, #ffffff);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 4px 0 10px;
  opacity: 0.9;
}

/* Hide legacy tab bar */
.gg-nav {
  display: none !important;
}
.gg-nav .gg-tab {
  display: none !important;
}
/* =========================================
   MOBILE CARD WIDTH FIX — STOP OVERFLOW
   ========================================= */
@media (max-width: 768px) {
  /* The list container */
  .gg-results {
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    max-width: 100%;
  }

  /* Every card inside results */
  .gg-results .gg-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* Safety: nothing inside a card can push it wider */
  .gg-results .gg-card * {
    max-width: 100%;
    box-sizing: border-box;
  }
}