/*
 * Custom styled tooltips for <abbr> elements.
 *
 * The companion tooltips.js moves title → data-title on page load to
 * suppress native browser tooltips.  CSS selectors target both attributes
 * so the tooltip works even before JS runs.
 */

/* Base: dotted underline + help cursor */
abbr[title],
abbr[data-title] {
  text-decoration: underline dotted;
  text-decoration-color: var(--md-accent-fg-color, #ffa726);
  text-underline-offset: 0.15em;
  cursor: help;
  position: relative;
}

/* Tooltip box — targets both pre-JS (title) and post-JS (data-title) */
abbr[data-title]::after {
  content: attr(data-title);
}
abbr[title]::after {
  content: attr(title);
}
abbr[title]::after,
abbr[data-title]::after {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  background: var(--md-default-fg-color, #333);
  color: var(--md-default-bg-color, #fff);
  font-size: 0.82rem;
  line-height: 1.45;
  padding: 0.55rem 0.75rem;
  border-radius: 0.3rem;
  white-space: normal;
  width: max-content;
  max-width: 22rem;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Show on hover */
abbr[title]:hover::after,
abbr[data-title]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Arrow */
abbr[title]::before,
abbr[data-title]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 0.15rem);
  left: 50%;
  transform: translateX(-50%);
  border: 0.35rem solid transparent;
  border-top-color: var(--md-default-fg-color, #333);
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

abbr[title]:hover::before,
abbr[data-title]:hover::before {
  opacity: 1;
  visibility: visible;
}

/* RTL: keep tooltip text LTR for English definitions */
[dir="rtl"] abbr[title]::after,
[dir="rtl"] abbr[data-title]::after {
  direction: ltr;
  text-align: left;
}