/* Joke Tooltip Styles */
.joke-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  margin-top: 0;
  z-index: 10000;
  width: 350px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: auto;
  border: 1px dashed #131313;
}

/* Position tooltip relative to joke-trigger */
.joke-trigger + .joke-tooltip,
.standalone-joke-trigger + .joke-tooltip {
  position: absolute;
  top: calc(1.5em + 8px); /* Position below the text */
  left: -35%;
}

/* Specific positioning for Styled Text, Animated, and Original header variants */
body.header-styled .joke-trigger + .joke-tooltip,
body.header-animated .joke-trigger + .joke-tooltip,
body:not(.header-modern):not(.header-modern-clean) .joke-trigger + .joke-tooltip {
  left: 65%; /* Move 50% to the right for these variants */
}

/* Specific positioning for Modern and Modern Clean variants */
body.header-modern .standalone-joke-trigger + .joke-tooltip,
body.header-modern-clean .standalone-joke-trigger + .joke-tooltip {
  left: 40%; /* Move 30% to the right for modern variants */
}

.joke-tooltip-content {
  background: #ffffff;
  border: 1px dashed #ddd;
  border-radius: 0;
  overflow: hidden;
}

.joke-tooltip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 400px;
  overflow-y: auto;
}

.joke-tooltip-item {
  padding: 6px 12px;
  border-bottom: 1px dashed #555555;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.joke-tooltip-item:last-child {
  border-bottom: none;
}

.joke-tooltip-item:hover {
  background: #454444;
  color: white;
  font-weight: 700;
}

.joke-text {
  display: block;
}

/* Scrollbar styling - hidden */
.joke-tooltip-list::-webkit-scrollbar {
  width: 0;
  display: none;
}

.joke-tooltip-list {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* Update choose joke text hover state */
.choose-joke-text {
  transition: opacity 0.2s ease;
}

.choose-joke-text:hover {
  opacity: 0.9;
}

/* Style the joke text element - simple hover trigger */
.joke-trigger,
.standalone-joke-trigger {
  cursor: pointer !important;
  position: relative !important;
  display: inline-block !important;
  width: fit-content;
}

/* Hide standalone-joke-trigger by default */
.standalone-joke-trigger {
  display: none !important;
}

/* Only show standalone-joke-trigger for modern and modern-clean variants */
body.header-modern .standalone-joke-trigger,
body.header-modern-clean .standalone-joke-trigger {
  display: inline-block !important;
}

/* Allow overflow:hidden for underline animations while tooltip is sibling */
.joke-trigger.with-underline-animation,
.standalone-joke-trigger.with-underline-animation {
  overflow: hidden;
}

/* Ensure both triggers inherit underline animations */
.joke-trigger,
.standalone-joke-trigger {
  display: inline-block;
  position: relative;
}

/* Ensure parent has proper positioning for absolute tooltip */
.heading__meta,
.heading.first {
  position: relative;
}

/* Remove any dropdown arrow if present */
.joke-trigger .dropdown-arrow {
  display: none !important;
}

/* Success checkmark animation */
.choose-joke-text .plus-sign {
  transition: all 0.3s ease;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .joke-tooltip {
    left: 20px;
    right: 20px;
    min-width: auto;
    max-width: none;
    width: auto;
  }

  .joke-tooltip-item {
    font-size: 12px;
    padding: 10px 15px;
  }
}