@charset "UTF-8";
/* CSS Document */
/*

<!-- Basic dotted underline version -->
<a href="https://ai.nejm.org" class="elink" data-url="ai.nejm.org">NEJM AI Journal</a>

<!-- Background highlight version -->
<a href="https://scholar.google.com" class="elink-highlight" data-url="scholar.google.com">Google Scholar</a>

<!-- In regular text -->
<p>
    Our research has been featured in 
    <a href="https://www.nejm.org" class="elink" data-url="nejm.org">leading medical journals</a> 
    and conferences worldwide.
</p>

*/
/* Subtle hyperlink styling - add to your <style> section */
.elink {
    color: #2563eb; /* medical-blue */
    text-decoration: none;
    border-bottom: 1px dotted rgba(37, 99, 235, 0.4); /* subtle dotted underline */
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.elink:hover {
    color: #1d4ed8; /* darker blue on hover */
    border-bottom: 1px solid #2563eb; /* solid underline on hover */
}

/* Tooltip to show URL on hover */
.elink:hover::after {
    content: attr(data-url);
    position: absolute;
    bottom: -30px;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 100;
    opacity: 0;
    animation: fadeInTooltip 0.3s ease forwards;
}

@keyframes fadeInTooltip {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alternative version with background highlight instead of underline */
.elink-highlight {
    color: #2563eb;
    text-decoration: none;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(37, 99, 235, 0.05));
    padding: 1px 3px;
    border-radius: 3px;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.elink-highlight:hover {
    color: #1d4ed8;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(37, 99, 235, 0.1));
}

.elink-highlight:hover::after {
    content: attr(data-url);
    position: absolute;
    bottom: -30px;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 100;
    opacity: 0;
    animation: fadeInTooltip 0.3s ease forwards;
}