/*
  Styles for the entry action icons (share, download).
*/

.entry-actions {
    display: flex;
    gap: 1rem; /* Creates space between the icons */
    font-size: 1.2rem; /* Makes the icons slightly larger and easier to click */
}

.entry-actions a {
    color: #939090;; /* Default icon color */
    text-decoration: none;
    transition: color 0.2s; /* Smooth color change on hover */
}

.entry-actions a:hover {
    color: #000; /* Darker icon color on hover */
}

/*
  How to cite: a third action beside share and download. The neighbours are Font
  Awesome glyphs sized by the row's font-size, so the SVG is sized in em to match
  them; 1.15em because the quote art is short and wide and reads a shade smaller
  than a glyph at the same box size.
*/
.entry-actions a.tooltip-container {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    line-height: 1;
}

/* The site's own icons (inline SVG, drawn for LAD or Simple Icons), which replaced Font
   Awesome on 2026-10-06. Sized like the glyphs they replace: a 1em box sitting where an
   icon-font glyph sat, so text beside it stays on its line. */
.lad-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    overflow: visible;
}

.entry-actions .lad-icon {
    display: block;
}

.entry-actions .cite-icon {
    width: 1.15em;
    height: 1.15em;
    display: block;
}

/* Share and download carry a short label, so their tooltip hugs its text instead of
   taking the 200px minimum components/tooltips.css sets for tooltips carrying prose.
   :not(.entry-cite) keeps the citation out of it - it must wrap, and nowrap here would
   otherwise reach it too, this selector matching that anchor just as well. */
.entry-actions a.tooltip-hover:not(.entry-cite) .tooltip-text {
    min-width: 0;
    white-space: nowrap;
    font-size: 0.78rem;
}

/* The tooltip IS the citation, so it needs room to print the persistent URL whole -
   at 340px it wrapped inside the number ("...LAD000 / 059"). The extra class beats
   .tooltip-container.tooltip-hover .tooltip-text in components/tooltips.css, which is
   equally specific and would otherwise win on load order. The hint line under it
   carries the affordance and, briefly, the outcome of the copy (citation.js). */
.entry-actions .entry-cite.tooltip-hover .tooltip-text {
    min-width: 260px;
    max-width: 420px;
    font-size: 0.8rem;
}

/* The citation block's own typography. Keyed on the block, not on either trigger:
   the header icon's tooltip is the one the server renders, and citation.js clones
   that node into the panel icon's tooltip, so both must be styled by these rules
   (scoping them to .entry-cite left the clone's lemma upright). */
.citation-text {
    display: block;
}

.citation-text .citation-lemma {
    font-style: var(--akkadian-font-style);
}

/* break-word, not break-all: the URL wraps only if it genuinely cannot fit, so it
   stays in one piece at the tooltip widths set here and in components/navigation.css,
   and a very long lemma still cannot widen the tooltip past its max. */
.citation-text .citation-url {
    overflow-wrap: break-word;
}

/* The affordance under the citation, and - briefly, after a click - the outcome
   of the copy (citation.js swaps the text, these classes colour it). */
.cite-hint {
    display: block;
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 0.72rem;
    opacity: 0.75;
}

.is-copied .cite-hint { color: #9ae6a0; opacity: 1; }
.is-failed .cite-hint { color: #ffb3ab; opacity: 1; }

/*
  Styles for the "Link copied to clipboard!" feedback message.
*/
#clipboard-feedback {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none; /* Prevents the element from capturing mouse clicks */
}

#clipboard-feedback.show {
    opacity: 1; /* Makes the feedback message visible */
}

/*
  The share menu: what the share icon opens where the browser has no share sheet of
  its own (Firefox on the desktop, Chrome on Linux) - built and placed by shareEntry()
  in resources/scripts/entry/actions.js. Fixed against the viewport like the tooltips,
  so nothing in the entry header can clip it, and above both the sticky site header
  (z 1000, core/layout.css) and the tooltips (9999, components/tooltips.css), whose
  "Share this entry" bubble would otherwise sit on top of it.
*/
.share-menu {
    position: fixed;
    z-index: 10000;
    min-width: 200px;
    max-width: calc(100vw - 32px);
    padding: 6px;
    background: #fff;
    border: 1px solid var(--citation-border-color, #dee2e6);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(44, 62, 80, 0.18);
    font-family: var(--base-font-family);
    font-size: 0.9rem;
    font-style: normal;
    font-weight: normal;
    line-height: 1.2;
}

/* One row each; the first is a <button> (copy), the rest <a>. The class beats
   Bootstrap's element rules for both (a's underline and link colour, button's
   square corners), so they read alike. */
.share-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--charcoal, #2c3e50);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.share-menu-item:hover,
.share-menu-item:focus-visible {
    background: var(--antiflash-white, #ecf0f1);
    color: var(--charcoal, #2c3e50);
    outline: none;
}

/* Icon column: one em box so the Font Awesome glyphs and the inline SVGs (Bluesky, X)
   line up; grey at rest, the row's own colour on hover, like the icons in the row. */
.share-menu-icon {
    flex: 0 0 1.25em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    color: #939090;
}

.share-menu-item:hover .share-menu-icon,
.share-menu-item:focus-visible .share-menu-icon {
    color: inherit;
}

.share-menu-icon svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* A line icon (the link): the rule above fills every mark, which would fill its strokes. */
.share-menu-icon svg.is-line {
    fill: none;
    stroke: currentColor;
}

/* While the menu is open its icon keeps the hover tooltip down: the bubble would
   land on the menu. Three classes plus :hover beats the two-class :hover rule in
   components/tooltips.css - the same trick as the citation rule above. */
.entry-actions a.tooltip-hover.is-share-open .tooltip-text,
.entry-actions a.tooltip-hover.is-share-open:hover .tooltip-text {
    visibility: hidden;
    opacity: 0;
}