/* [claude:sonnet-4-6][client:2.1.195][hurc:v0.12.664]
 *
 * PURPOSE:
 *   Reusable tooltip primitive for the neural-llm.com marketing site.
 *   Used to explain tech jargon and show derivations behind product claims.
 *   Works on hover (desktop), focus (keyboard), and tap (mobile — toggled by
 *   tooltip.js which adds/removes .nllm-tooltip--open on touchend).
 *
 * ARCHITECTURE:
 *   BEM block: .nllm-tooltip
 *   Depends on: media/com_neurallicense/brand/tokens.css and the
 *               structural z-index tokens (--nllm-z-tooltip: 700) from
 *               media/com_neurallicense/css/vendor/hurc/css-tokens/nllm-tokens.css
 *
 * ACCESSIBILITY:
 *   The trigger element MUST carry:
 *     - tabindex="0"
 *     - role="button" (or be a <button> element)
 *     - aria-describedby="<tooltip-id>"
 *   The tooltip content element MUST carry:
 *     - id="<tooltip-id>"
 *     - role="tooltip"
 *   See tooltip.php partial for the canonical markup shape.
 *
 * COMPONENTS:
 *   .nllm-tooltip              — inline wrapper (position: relative anchor)
 *   .nllm-tooltip__trigger     — the underline-dotted trigger span/button
 *   .nllm-tooltip__bubble      — the floating tooltip box
 *   .nllm-tooltip__bubble-arrow — decorative upward arrow pseudo-element
 *   .nllm-tooltip--open        — class toggled by tooltip.js for mobile tap
 *
 * POSITIONING:
 *   Mobile-first: bubble left-anchored on very narrow viewports (< 401px).
 *   At min-width: 401px the bubble centres over the trigger via
 *   transform: translateX(-50%) from left: 50%.
 *   Max-width of 280px keeps it readable on narrow mobile screens.
 *
 * NO LAYOUT BREAKAGE:
 *   The wrapper uses display:inline (not inline-block) so it flows naturally
 *   within prose, pricing bullets, table cells, and feature lists without
 *   introducing any width or block-formatting change to the parent.
 *
 * @copyright  (C) 2026 Neural LLM. All rights reserved.
 * @license    GNU General Public License version 2 or later; see LICENSE.txt
 */

/* ─────────────────────────────────────────────────────────────────────────────
   WRAPPER — inline anchor for the absolute-positioned bubble
   ───────────────────────────────────────────────────────────────────────────── */

.nllm-tooltip {
    display: inline;
    position: relative;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TRIGGER — visible underline-dotted word(s) the visitor can hover/focus/tap
   ───────────────────────────────────────────────────────────────────────────── */

.nllm-tooltip__trigger {
    /* Dotted underline signals "there is more info here". */
    border-bottom: 1px dotted var(--nllm-violet-soft, #a855f7);
    cursor: help;

    /* Reset inherited button styles when a <button> is used as trigger. */
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    appearance: none;
    -webkit-appearance: none;

    /* Inline so it doesn't disturb surrounding text flow. */
    display: inline;
    white-space: normal;
}

.nllm-tooltip__trigger:focus-visible {
    /* Keyboard focus ring — matches site's violet brand colour. */
    outline: 2px solid var(--nllm-violet-soft, #a855f7);
    outline-offset: 2px;
    border-radius: var(--nllm-radius-sm);
}

/* ─────────────────────────────────────────────────────────────────────────────
   BUBBLE — the tooltip box itself. Hidden by default; shown on hover/focus/tap.
   Mobile-first base: left-anchored for very narrow viewports (< 401px).
   ───────────────────────────────────────────────────────────────────────────── */

.nllm-tooltip__bubble {
    /* Position above trigger. Mobile base: left-anchored. */
    position: absolute;
    bottom: calc(100% + 8px);   /* 8px gap between trigger and bubble. */
    left: 0;
    transform: translateX(0) translateY(4px);

    /* Dimensions */
    max-width: min(260px, 90vw);
    width: max-content;

    /* Appearance — dark surface matching the site's dark theme. */
    background-color: var(--nllm-surface, #1e293b);
    border: 1px solid var(--nllm-surface-edge, #475569);
    border-radius: var(--nllm-radius-md, 12px);
    padding: var(--nllm-space-sm, 0.5rem) var(--nllm-space-md, 1rem);
    box-shadow: var(--nllm-shadow-md, 0 6px 20px rgba(124, 58, 237, 0.2));

    /* Typography */
    font-size: var(--nllm-text-sm, 14px);
    line-height: var(--nllm-leading-relaxed, 1.7);
    color: var(--nllm-text, #f8fafc);
    text-align: left;
    white-space: normal;

    /* Stack above everything else on the page. */
    z-index: var(--nllm-z-tooltip, 700);

    /* Hidden by default via opacity + pointer-events so keyboard tab still reaches
       the trigger but the bubble does not intercept clicks when invisible. */
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--nllm-transition-fast, 120ms ease-out),
                transform var(--nllm-transition-fast, 120ms ease-out);
}

/* Downward-pointing arrow pseudo-element. Mobile base: aligned to left edge. */
.nllm-tooltip__bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 20px;
    transform: translateX(0);
    border: 6px solid transparent;
    border-top-color: var(--nllm-surface, #1e293b);
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   VISIBLE STATES — hover, focus-within (keyboard), and .nllm-tooltip--open (mobile tap)
   Mobile base: visible with left-anchored transform.
   ───────────────────────────────────────────────────────────────────────────── */

.nllm-tooltip:hover        .nllm-tooltip__bubble,
.nllm-tooltip:focus-within .nllm-tooltip__bubble,
.nllm-tooltip--open        .nllm-tooltip__bubble {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0) translateY(0);
}

/* ─────────────────────────────────────────────────────────────────────────────
   WIDER VIEWPORTS — centre the bubble over the trigger (min-width: 401px)
   ───────────────────────────────────────────────────────────────────────────── */

@media (min-width: 401px) {
    .nllm-tooltip__bubble {
        left: 50%;
        transform: translateX(-50%) translateY(4px);
        max-width: 280px;
    }

    .nllm-tooltip:hover        .nllm-tooltip__bubble,
    .nllm-tooltip:focus-within .nllm-tooltip__bubble,
    .nllm-tooltip--open        .nllm-tooltip__bubble {
        transform: translateX(-50%) translateY(0);
    }

    /* Arrow centred over trigger on wider screens. */
    .nllm-tooltip__bubble::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   MATH / DERIVATION BLOCK — optional preformatted cost-breakdown inside bubble
   Used for the savings figure tooltip to show the full calculation.
   ───────────────────────────────────────────────────────────────────────────── */

.nllm-tooltip__math {
    display: block;
    margin-top: var(--nllm-space-xs, 0.25rem);
    padding: var(--nllm-space-xs, 0.25rem) var(--nllm-space-sm, 0.5rem);
    background-color: var(--nllm-surface-deep, #0f172a);
    border-radius: var(--nllm-radius-sm, 6px);
    font-family: var(--nllm-font-mono, 'JetBrains Mono', monospace);
    font-size: var(--nllm-font-size-sm);
    line-height: var(--nllm-leading-relaxed);
    color: var(--nllm-cyan-pale, #a5f3fc);
    white-space: pre;
}