/* PCG Tooltip Styles - WCAG 2.1 Compliant */

/* Glossary term link styling */
.glossary-term {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: #6b7280;
  text-underline-offset: 2px;
  cursor: help;
  transition: text-decoration-color 0.2s ease;
}

.glossary-term:hover,
.glossary-term:focus {
  text-decoration-style: solid;
  text-decoration-color: #1d4ed8;
}

.glossary-term.frequently-used {
  font-weight: 500;
}

/* Tippy.js theme customization */
.tippy-box[data-theme~='pcg'] {
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
              0 2px 4px -1px rgba(0, 0, 0, 0.06);
  color: #1f2937;
  font-size: 14px;
  line-height: 1.5;
  max-width: 350px;
}

.tippy-box[data-theme~='pcg'] > .tippy-content {
  padding: 12px 16px;
}

.tippy-box[data-theme~='pcg'] > .tippy-arrow::before {
  border-top-color: #ffffff;
}

.tippy-box[data-theme~='pcg'][data-placement^='bottom'] > .tippy-arrow::before {
  border-bottom-color: #ffffff;
}

/* Tooltip content structure */
.pcg-tooltip-term {
  font-weight: 600;
  color: #1e3a5f;
  margin-bottom: 4px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.pcg-tooltip-definition {
  color: #374151;
}

.pcg-tooltip-link {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
  font-size: 12px;
  color: #2563eb;
  text-decoration: none;
}

.pcg-tooltip-link:hover {
  text-decoration: underline;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .glossary-term {
    transition: none;
  }

  .tippy-box {
    transition-duration: 0ms !important;
  }
}