/**
 * Meyne Tooltips - Frontend Styles
 * Tooltip panels are rendered in <body> by JS (cloned from <template>).
 */

/* Inline wrapper so trigger doesn't break lines */
.meyne-tooltip {
    display: inline;
  }
  
  /* Trigger underline */
  .meyne-tooltip-trigger {
    border-bottom: 1px dotted currentColor;
    cursor: help;
    text-decoration: none;
  }
  
  /* Tooltip panel (mounted in <body>) */
  .meyne-tooltip-content {
    position: fixed;
    top: 0;
    left: 0;
  
    background: #fff;
    color: var(--global-palette3);
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid var(--global-palette1);
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
  
    min-width: 150px;
    max-width: 350px;
    width: max-content;
  
    z-index: 2147483647;
  
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  
    transition: opacity 0.18s ease, visibility 0.18s ease;
  }
  
  /* Visible state (JS toggles) */
  .meyne-tooltip-content.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
  /* Measuring state (prevents flash when calculating size/position) */
  .meyne-tooltip-content.is-measuring {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  
  /* Content styling */
  .meyne-tooltip-content .tooltip-word {
    display: block;
    font-weight: 700;
    margin: 0 0 8px;
  }
  
  .meyne-tooltip-content p {
    margin: 0 0 8px;
  }
  
  .meyne-tooltip-content p:last-child {
    margin-bottom: 0;
  }
  
  .meyne-tooltip-content ul,
  .meyne-tooltip-content ol {
    margin: 8px 0 0;
    padding-left: 18px;
  }
  
  .meyne-tooltip-content li {
    margin: 4px 0;
  }
  
  .meyne-tooltip-content .tooltip-images {
    display: block;
    margin-top: 10px;
  }
  
  .meyne-tooltip-content .tooltip-image-thumb img {
    border-radius: 12px;
    display: block;
  }
  
  .meyne-tooltip-content .meyne-tooltip-link {
    display: inline-block;
    margin-top: 10px;
    font-weight: 600;
  }
  
  /* Accessibility - Focus styles for keyboard navigation */
  .meyne-tooltip-trigger:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
  
  /* Responsive tweaks */
  @media (max-width: 768px) {
    .meyne-tooltip-content {
      max-width: 250px;
      font-size: 13px;
    }
  }
  
  /* Tooltip sections (v1.3.0) */
  .meyne-tooltip-sections {
      margin-top: 10px;
  }
  
  .meyne-tooltip-section + .meyne-tooltip-section {
      margin-top: 8px;
      padding-top: 8px;
  }
  
  .meyne-tooltip-section-title {
      font-weight: 700;
      text-transform: uppercase;
      font-family: var(--sans-serif);
  }
  
  .meyne-tooltip-section-body > :first-child {
      margin-top: 0;
  }
  
  .meyne-tooltip-section-body > :last-child {
      margin-bottom: 0;
  }
  
  .meyne-tooltip-content {
    position: fixed;
    z-index: 2147483647;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  
  .meyne-tooltip-content.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
  /* While measuring, keep it hidden but measurable */
  .meyne-tooltip-content.is-measuring {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .meyne-tooltip-content .gslide-image img {
    z-index: 2147483648 !important;
  }