/* ==========================================================================
   Glossary betűválasztó gombok (PTE)
   ========================================================================== */

:root {
  --glossary-blue: #96232f;          /* Hivatalos PTE kék */
  --glossary-blue-hover: #751822;    /* Sötétebb kék hoverre */
  --glossary-blue-active: #751822;   /* Aktív betű színe */
}

/* 1. Gombok tárolója: vízszintes flex sor, tördeléssel és kis térközzel */
.attachment-before .view-content {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 25px 0 !important;
  padding: 0 !important;
}

/* 2. Betű konténer span:
   - felülírjuk a Bootstrap `.row > * { width: 100% }` szabályát (ez okozta az egymás alá kerülést)
   - eltüntetjük a '|' jeleket és a '(12)' darabszámokat */
.attachment-before .views-summary {
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  border: none !important;
}

/* 3. Betűgombok kinézete (kék négyzet, fehér betű, lekerekített sarok) */
.attachment-before .views-summary a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  background-color: var(--glossary-blue, #003087) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  line-height: 1 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
  transition: background-color 0.15s ease, transform 0.1s ease !important;
}

/* 4. Hover és fókusz állapot */
.attachment-before .views-summary a:hover,
.attachment-before .views-summary a:focus {
  background-color: var(--glossary-blue-hover, #00205b) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}

/* 5. Aktív (kiválasztott) betű */
.attachment-before .views-summary a.is-active,
.attachment-before .views-summary a.active {
  background-color: var(--glossary-blue-active, #001845) !important;
}

/* 6. Kifejezések linkjei a listában (egyszerű, tiszta stílus) */
.view-glossary .views-field-title a {
  color: var(--glossary-blue, #003087) !important;
  text-decoration: none !important;
}

.view-glossary .views-field-title a:hover {
  text-decoration: underline !important;
}

/* 7. Reszponzív méretezés mobilra */
@media (max-width: 576px) {
  .attachment-before .view-content {
    gap: 4px !important;
    margin-bottom: 16px !important;
  }

  .attachment-before .views-summary a {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 13px !important;
  }
}