/* Glossary Section Styles */
.section-glossary {
  margin-block: 2.5rem;
  padding-block: 2.5rem;

  & .glossary-letter-toc {
    margin-bottom: 3rem;
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 8px;

    & ul {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      list-style: none;
      margin: 0;
      padding: 0;
      justify-content: center;

      & li {
        margin: 0;

        & a {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 2.5rem;
          height: 2.5rem;
          color: var(--pl-blue, #052e44);
          text-decoration: none;
          font-weight: 600;
          border-radius: 4px;
          transition: all 0.3s ease;
          background-color: #fff;
          border: 1px solid #e5e7eb;

          &:hover {
            background-color: var(--pl-blue, #052e44);
            color: #fff;
            transform: translateY(-2px);
          }
        }

        & .disabled {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 2.5rem;
          height: 2.5rem;
          color: #9ca3af;
          background-color: #f3f4f6;
          border: 1px solid #e5e7eb;
          border-radius: 4px;
          cursor: not-allowed;
          opacity: 0.5;
        }
      }
    }
  }

  & .glossary-letter-section {
    margin-bottom: 6rem;
    position: relative;
    & .glossary-letter-section-anchor {
      position: absolute;
      top: -8rem;
      visibility: hidden;
      opacity: 0;
    }

    & .glossary-letter-section-header {
      --letter-size: 6rem;
      margin-bottom: 2rem;
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      & .glossary-letter-heading {
        font-size: 3rem;
        font-weight: 700;
        color: #fff;
        border-radius: 1rem;
        width: var(--letter-size);
        height: var(--letter-size);
        background: linear-gradient(180deg, #052e44 0%, #020027 100%);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
      }
      &::after {
        content: '';
        background: linear-gradient(180deg, #364153 0%, rgba(0, 0, 0, 0) 100%);
        position: absolute;
        left: auto;
        right: 0;
        width: calc(100% - var(--letter-size) - 1rem);
        height: 4px;
      }
    }

    & .glossary-item {
      background-color: #fff;
      border-radius: 1rem;
      margin-bottom: 2rem;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

      & .glossary-item__header {
        background: linear-gradient(180deg, #052e44 0%, #020027 100%);
        padding: 1.5rem 2rem;

        & .glossary-item__title {
          color: #fff;
          font-size: 1.875rem;
          font-weight: 600;
          margin: 0;
        }
      }

      & .glossary-item__section {
        display: flex;
        gap: 1.5rem;
        padding: 2rem;

        & .glossary-item__section-icon {
          flex-shrink: 0;
          width: 48px;
          height: 48px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 8px;
          background-color: #e0f2fe;
          color: #0284c7;
        }

        & .glossary-item__section-content {
          flex: 1;

          & .glossary-item__section-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--pl-blue, #052e44);
            margin-bottom: 1rem;
            margin-top: 0;
          }

          & .glossary-item__section-text {
            color: #4b5563;
            font-size: 1rem;
            line-height: 1.6;

            & p:not(:last-child) {
              margin-bottom: 1rem;
            }
          }
        }

        &.glossary-item__example {
          background-color: #fefce8;
          border-left: 4px solid #dc2626;
          margin: 0 2rem 2rem;
          border-radius: 1rem;
        }

        &.glossary-item__related {
          & .glossary-item__section-icon--related {
            background-color: #f3f4f6;
            color: #4b5563;
          }

          & .glossary-item__related-practices {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-top: 1rem;

            & .glossary-item__practice-tag {
              display: inline-flex;
              align-items: center;
              gap: 0.5rem;
              padding: 0.5rem 1rem;
              background-color: #e0f2fe;
              color: var(--pl-blue, #052e44);
              text-decoration: none;
              border-radius: 0.5rem;
              font-size: 0.875rem;
              font-weight: 500;
              transition: all 0.3s ease;
              border: 1px solid transparent;

              &:hover {
                background-color: var(--pl-blue, #052e44);
                color: #fff;
                transform: translateY(-2px);
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
              }

              & .glossary-item__practice-tag-text {
                line-height: 1;
              }

              & .glossary-item__practice-tag-icon {
                width: 16px;
                height: 16px;
                flex-shrink: 0;
              }
            }
          }
        }
      }
    }
  }
}

.glossary-item__section-icon--example {
  background-color: #fef2f2;
  color: #dc2626;
}

.glossary-item__section-icon svg {
  width: 24px;
  height: 24px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .glossary-item__header {
    padding: 1rem 1.5rem;
  }

  .glossary-item__title {
    font-size: 1.5rem;
  }

  .glossary-item__section {
    flex-direction: column;
    padding: 1.5rem;
    gap: 1rem;
  }

  .glossary-item__example {
    margin: 0 1.5rem 1.5rem;
  }

  .glossary-letter-heading {
    font-size: 1.75rem;
  }

  .glossary-letter-toc ul {
    gap: 0.5rem;
  }

  .glossary-letter-toc a,
  .glossary-letter-toc .disabled {
    width: 2rem;
    height: 2rem;
    font-size: 0.875rem;
  }
}