/**
 * Drilo Glossary Tooltip Styles
 *
 * Provides visual styling for glossary terms with:
 * - Dotted underline to indicate clickable/hoverable terms
 * - Color coding by priority (essential = primary, default = secondary)
 * - Safety-critical terms in danger color
 * - Print-friendly fallbacks
 */

/* Base glossary term styling */
.glossary-term {
    text-decoration: underline dotted;
    text-decoration-color: var(--color-text-secondary);
    text-underline-offset: 2px;
    cursor: help;
    transition: text-decoration-color 0.2s ease;
}

/* Hover state - slightly darker underline */
.glossary-term:hover {
    text-decoration-color: var(--color-text);
}

/* Essential terms - primary underline */
.glossary-term.essential {
    text-decoration-color: var(--color-primary);
}

.glossary-term.essential:hover {
    text-decoration-color: var(--color-primary-hover);
}

/* Safety-critical terms - danger underline */
.glossary-term.safety-critical {
    text-decoration-color: var(--color-danger);
    font-weight: 500; /* Slightly bolder for emphasis */
}

.glossary-term.safety-critical:hover {
    text-decoration-color: var(--color-danger);
}

/* Link mode styling (for /glossary page links) */
.glossary-link {
    color: inherit;
    text-decoration: underline dotted;
    text-decoration-color: var(--color-text-secondary);
    text-underline-offset: 2px;
}

.glossary-link:hover {
    text-decoration: underline solid;
    text-decoration-color: var(--color-primary);
}

.glossary-link.safety-critical {
    text-decoration-color: var(--color-danger);
}

/* Print styles - convert tooltips to footnote indicators */
@media print {
    .glossary-term {
        text-decoration: none;
        border-bottom: 1px dotted #666;
    }

    /* Add footnote marker after term */
    .glossary-term::after {
        content: " (see glossary)";
        font-size: 0.75em;
        color: #666;
        font-style: italic;
    }

    /* Safety terms get asterisk marker */
    .glossary-term.safety-critical::after {
        content: " *";
        color: #000;
        font-weight: bold;
    }
}

/* Accessibility: Focus state for keyboard navigation */
.glossary-term:focus,
.glossary-link:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Mobile: Increase tap target size */
@media (max-width: 768px) {
    .glossary-term {
        padding: 2px 0;
    }
}