/*
Created September 1, 2026
Contact NYCPS External Communications for questions regarding the code in this file.

For use when footnotes are present in content.
Example:
  Reference*
  [content between the asterisk and the footnote]
  *Footnote

1. Recommend swapping to numbers from symbols.
2. Use 'notes-section' class on container that has footnotes.
3. For Reference, use
    Reference <a aria-describedby="notes-title" href="#footnote-id-1" id="reference-id-1">&nbsp;</a>
4. For Footnote, use
    <p class="visibly-hidden" id="notes-title">Topic</p>
    <ol class="notes-ctr">
        <li id="footnote-id-1">
            Footnote content
            <a href="#reference-id-1" aria-label="Back to content">&nwarhk;</a>
        </li>
    </ol>
*/

/* Notes per container. */
.notes-section {counter-reset:enotes;}
/* Inline link to notes style
- links look like regular text
*/
/*.notes-section a[aria-describedby^="notes-"]:first-of-type {counter-reset:enotes;}*/
.notes-section a[aria-describedby^="notes-"] {
    counter-increment:enotes;
    text-decoration:none;
    color:inherit;
    cursor:default;
    line-height:1em;
}
/* Note references style
*/
.notes-section a[aria-describedby^="notes-"]::after {
    content:'[' counter(enotes) ']';
    display:inline-block;
    vertical-align:super;
    font-size:0.8em;
    margin-left:2px;
    color:var(--pws-link-color);
    text-decoration:underline;
    cursor:pointer;
    border-left:none;
}
/* Notes style =============================== */
.notes-section ol.notes-ctr:first-of-type {counter-reset:count-notes;}
.notes-section ol.notes-ctr {
    list-style:none;
    font-size:1rem;
}
.notes-section ol.notes-ctr li {
    margin-bottom:0.6rem;
}
.notes-section ol.notes-ctr li:before {
    counter-increment:count-notes;
    content:counter(count-notes) '. ';
    position:absolute;
    margin-left:-1rem;
}
.notes-section ol.notes-ctr :target {background-color:var(--pws-highlight-bg);}
.notes-section [aria-label="Back to content"] {font-size:0.7em;} /* Link back to reference */