/* ================================================================
   components/info-tooltip.css
   The (i) info icon + dark-glass hover tooltip. Loaded GLOBALLY
   from base.html (every page gets it).

   Where it's used
   ───────────────
     • Detail pages: commodity stat-cards, table-column headers,
       the deforestation-icon hover ("There is deforestation
       risk…") on supplier tables + chart legends
       — see member_state_detail.html, commodity_detail.html
     • Country selector pages: the "Sort by" methodology note
       — see templates/components/country_sort_control.html
     • The --above modifier flips the popup above the trigger;
       used for icons on the last row of a table where a downward
       popup would get clipped.

   Why this lives here (not in page-detail-body.css)
   ─────────────────────────────────────────────────
   Same dark-glass chrome as .csv-info-text and .cc-trade-map__tooltip
   so every hover popup on the site reads as one family. Moved here
   verbatim when the selector pages started using it — a widget
   needed outside the detail-page family belongs in components/.

   Markup
   ──────
     <span class="info-container is-inline">
       <span class="info-icon" tabindex="0">i</span>
       <span class="info-tooltip">Explanation…</span>
     </span>

   The .info-icon's literal "i" text is visually hidden via
   font-size:0; the ⓘ glyph is drawn through ::before. The popup
   sits ABSOLUTELY below the icon (no JS portal), so if a usage
   gets clipped by an overflow:hidden ancestor we'd portal that
   one separately.
   ================================================================ */

.info-icon {
    /* Inline glyph, not a pill. Cursor:help mirrors .csv-info-tooltip. */
    display: inline;
    cursor: help;
    margin-left: 4px;
    font-style: normal;
    font-weight: bold;
    color: var(--ae-green);
    font-size: 0;                   /* hide the literal "i" text node */
    line-height: 1;
}

.info-icon::before {
    content: "\24D8";               /* ⓘ — same Unicode glyph .csv-info-tooltip uses */
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
}

.info-icon:hover {
    /* Same colour at rest and on hover — visual cue is the popup,
       not an icon state change. Mirrors .csv-info-tooltip. */
    color: var(--ae-green);
}

.info-container {
    position: relative;
    align-items: center;
    display: inline-flex;
    gap: 4px;
    width: 100%;
}

.info-container.is-inline {
    width: auto;
}

.info-tooltip {
    /* Dark-glass popup below the (i) icon.
       NOTE: no `white-space: pre-line` here. .info-tooltip content
       uses HTML markup (<br>) for line breaks, so source whitespace
       must collapse normally — otherwise the Jinja indentation
       between "% of total ..." and the MT/€ value renders as huge
       gaps. .csv-info-text keeps pre-line because its tooltip body
       has literal newlines (the CSV format example). */
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    background: rgba(20, 22, 30, 0.78);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    color: var(--white);
    padding: 12px 14px;
    border-radius: var(--radius-dropdown);
    font-size: var(--fs-xs);
    font-weight: normal;
    line-height: 1.4;
    width: 200px;
    max-width: 200px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    z-index: var(--z-tooltip);
}

.info-container:hover .info-tooltip,
.info-container:focus-within .info-tooltip {
    visibility: visible;
}

/* Position modifier — flip the tooltip ABOVE the trigger. Used where a
   downward popup would get clipped (e.g. icons on the last row of a
   table). Style is otherwise identical to .info-tooltip. */
.info-tooltip--above {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 6px;
}