/* ========================================
   Annotation Styles
   ======================================== */

/* Base annotation */
.annot {
    position: absolute;
    cursor: pointer;
    transition: opacity 0.2s;
}

.annot:hover {
    opacity: 0.85;
}

/* Web links */
.annot-weblink {
    border-bottom: 2px solid rgba(0, 128, 255, 0.6);
    background: rgba(0, 128, 255, 0.05);
}

.annot-weblink:hover {
    background: rgba(0, 128, 255, 0.15);
}

/* Custom links (product SKUs) */
/* One universal customLink style for every edition: a filled accent badge
   with white text. The reader's JS (annotations.js) also sets these inline, but
   defining them here keeps the look consistent even before JS runs and avoids a
   red-border flash. No per-edition conditional styling. */
.annot-customlink {
    background: var(--color-accent, #c0392b);
    border: none;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: inherit;
    color: #ffffff;
    font-weight: 600;
    opacity: 1;
    overflow: hidden;
    /* Graceful fade-in on render (ties to page content appearing). Uses a
       short delay + ease so SKU badges don't pop in abruptly. `both` keeps the
       badge at opacity 0 until the animation starts so there is no flash. */
    animation: annotFadeIn 0.45s ease 0.12s both;
}

@keyframes annotFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Respect users who prefer reduced motion — no fade, just show. */
@media (prefers-reduced-motion: reduce) {
    .annot-customlink { animation: none; }
}

.annot-customlink:hover {
    opacity: 1;
}

/* Page links */
.annot-pagelink {
    background: rgba(100, 200, 255, 0.08);
    border-bottom: 2px solid rgba(100, 200, 255, 0.4);
    border-radius: 2px;
}

.annot-pagelink:hover {
    background: rgba(100, 200, 255, 0.2);
    border-bottom-color: rgba(100, 200, 255, 0.8);
}

/* Email links */
.annot-email {
    border-bottom: 1px dashed rgba(0, 128, 255, 0.5);
}

.annot-email:hover {
    background: rgba(0, 128, 255, 0.1);
}

/* QR-code links (``qrLink``) — a payload decoded from a code the publisher
   placed. The reader adds the accent border + the panel behaviour inline once
   the API says the payload is presentable; this base rule keeps a code's box
   visibly different from printed text even before JS runs. */
.annot-qrlink {
    border-radius: 4px;
    background: rgba(192, 57, 43, 0.08);
    box-shadow: inset 0 0 0 1px rgba(192, 57, 43, 0.45);
}

.annot-qrlink:hover {
    background: rgba(192, 57, 43, 0.16);
}

/* Video links — the reader adds this class when a panel row's payload is a
   YouTube/Vimeo video, so the box shows a play affordance instead of looking
   like a plain link. */
.annot-youtube {
    background: rgba(255, 0, 0, 0.1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.annot-youtube::after {
    content: '▶';
    font-size: 20px;
    color: rgba(255, 0, 0, 0.8);
}

.annot-youtube:hover {
    background: rgba(255, 0, 0, 0.2);
}

/* Phone links */
.annot-phone {
    border-bottom: 1px solid rgba(0, 200, 0, 0.5);
}

.annot-phone:hover {
    background: rgba(0, 200, 0, 0.1);
}