/* =========================================================
   LYMESEARCH — SHARED ARTICLE COMPONENTS
   CLEAN MEDICAL REFERENCES DESIGN

   Applies to WordPress articles using:
   - .ls-pillar
   - .lyme-pillar

   Supports:
   - Existing Medical References sections
   - Older numbered reference lists
   - Newer Evidence & Sources layouts
   - Existing medical disclaimers

   Does not change:
   - Article content
   - Table of contents
   - Images
   - Header or navigation
   - Topic hub layouts
========================================================= */


/* =========================================================
   1. MEDICAL DISCLAIMER
========================================================= */

body.single-post :is(.ls-pillar, .lyme-pillar)
:is(
    .ls-medical-disclaimer,
    .lyme-article-disclaimer,
    .medical-disclaimer
) {
    box-sizing: border-box;

    display: block;
    visibility: visible;

    width: 100%;
    max-width: 760px;

    margin: 24px 0 28px !important;
    padding: 16px 20px !important;

    background: #f9fafb !important;

    border: 1px solid #e5e7eb !important;
    border-left: 3px solid #0f766e !important;
    border-radius: 8px;

    color: #6b7280;

    font-family: "Inter", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.65;
}


/* Disclaimer headings */

body.single-post :is(.ls-pillar, .lyme-pillar)
:is(
    .ls-medical-disclaimer,
    .lyme-article-disclaimer,
    .medical-disclaimer
)
:is(h2, h3) {
    display: inline;

    margin: 0;
    padding: 0;

    color: #374151;

    font-size: 13px;
    font-weight: 700;
    line-height: inherit;
}


/* Heading separator */

body.single-post :is(.ls-pillar, .lyme-pillar)
:is(
    .ls-medical-disclaimer,
    .lyme-article-disclaimer,
    .medical-disclaimer
)
:is(h2, h3)::after {
    content: ": ";
}


/* Disclaimer paragraphs */

body.single-post :is(.ls-pillar, .lyme-pillar)
:is(
    .ls-medical-disclaimer,
    .lyme-article-disclaimer,
    .medical-disclaimer
) p {
    margin: 0 !important;
    padding: 0 !important;

    color: #6b7280;

    font-size: 13px;
    line-height: 1.65;
}


/* Disclaimer labels */

body.single-post :is(.ls-pillar, .lyme-pillar)
:is(
    .ls-medical-disclaimer,
    .lyme-article-disclaimer,
    .medical-disclaimer
) strong {
    color: #374151;
    font-weight: 700;
}


/* =========================================================
   2. SHARED REFERENCES SECTION
========================================================= */

body.single-post :is(.ls-pillar, .lyme-pillar)
:is(
    .ls-medical-references,
    .lyme-references,
    .lyme-basics-references,
    .ls-evidence-v2,
    section#references,
    section[aria-labelledby="references"]
) {
    box-sizing: border-box;

    display: block;

    width: 100%;
    max-width: 760px;

    padding: 0 !important;

    background: transparent !important;

    border: none !important;

    font-family: "Inter", Arial, sans-serif;

    scroll-margin-top: 110px;
}


/* =========================================================
   3. REFERENCES HEADER
========================================================= */

body.single-post :is(.ls-pillar, .lyme-pillar)
:is(
    .ls-medical-references-header,
    .lyme-basics-references-header
) {
    margin: 0 0 24px !important;
    padding: 0 !important;

    background: transparent;
    border: none;
}


/* Evidence & Sources label */

body.single-post :is(.ls-pillar, .lyme-pillar)
:is(
    .ls-medical-references-label,
    .lyme-basics-references-label
) {
    display: block !important;

    margin: 0 0 8px !important;
    padding: 0;

    color: #0f766e;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}


/* References heading */

body.single-post :is(.ls-pillar, .lyme-pillar)
:is(
    .ls-medical-references,
    .lyme-references,
    .lyme-basics-references,
    .ls-evidence-v2,
    section#references,
    section[aria-labelledby="references"]
) h2 {
    margin: 0 0 10px !important;
    padding: 0 !important;

    color: #134e4a !important;

    font-family: "Sora", "Inter", Arial, sans-serif;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.35;

    letter-spacing: -0.015em;

    border: none !important;
}


/* References description */

body.single-post :is(.ls-pillar, .lyme-pillar)
:is(
    .ls-medical-references-header,
    .lyme-basics-references-header
) p {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #6b7280;

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   4. SHARED NUMBERED REFERENCES
========================================================= */

body.single-post :is(.ls-pillar, .lyme-pillar)
:is(
    .ls-medical-references,
    .lyme-references,
    .lyme-basics-references,
    .ls-evidence-v2,
    section#references,
    section[aria-labelledby="references"]
) ol {
    display: block;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;

    counter-reset: ls-medical-ref;

    font-family: "Inter", Arial, sans-serif;
}


/* =========================================================
   5. INDIVIDUAL REFERENCE ROWS
========================================================= */

body.single-post :is(.ls-pillar, .lyme-pillar)
:is(
    .ls-medical-references,
    .lyme-references,
    .lyme-basics-references,
    .ls-evidence-v2,
    section#references,
    section[aria-labelledby="references"]
) ol > li {
    box-sizing: border-box !important;

    position: relative !important;
    display: block !important;

    margin: 0 !important;
    padding: 14px 0 14px 40px !important;

    min-height: 0 !important;
    height: auto !important;

    list-style: none !important;

    border-top: 1px solid #e5e7eb !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;

    background: transparent !important;

    color: #374151;

    font-size: 15px;
    line-height: 1.65;

    counter-increment: ls-medical-ref;

    overflow-wrap: anywhere;
}


/* Final divider */

body.single-post :is(.ls-pillar, .lyme-pillar)
:is(
    .ls-medical-references,
    .lyme-references,
    .lyme-basics-references,
    .ls-evidence-v2,
    section#references,
    section[aria-labelledby="references"]
) ol > li:last-child {
    border-bottom: 1px solid #e5e7eb !important;
}


/* =========================================================
   6. TEAL REFERENCE NUMBERS
========================================================= */

body.single-post :is(.ls-pillar, .lyme-pillar)
:is(
    .ls-medical-references,
    .lyme-references,
    .lyme-basics-references,
    section#references,
    section[aria-labelledby="references"]
) ol > li::before {
    content: counter(ls-medical-ref) "." !important;

    display: block !important;

    position: absolute !important;

    top: 14px;
    left: 0;

    color: #0f766e;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.65;
}


/* Remove native list markers */

body.single-post :is(.ls-pillar, .lyme-pillar)
:is(
    .ls-medical-references,
    .lyme-references,
    .lyme-basics-references,
    .ls-evidence-v2,
    section#references,
    section[aria-labelledby="references"]
) ol > li::marker {
    content: "" !important;
}


/* =========================================================
   7. SOURCE ORGANIZATIONS
========================================================= */

body.single-post :is(.ls-pillar, .lyme-pillar)
:is(
    .ls-medical-references,
    .lyme-references,
    .lyme-basics-references,
    .ls-evidence-v2,
    section#references,
    section[aria-labelledby="references"]
)
:is(.lyme-reference-source, strong) {
    display: block !important;

    margin: 0 0 5px !important;
    padding: 0 !important;

    color: #374151;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
}


/* Remove old source/link separators */

body.single-post :is(.ls-pillar, .lyme-pillar)
.lyme-reference-source + a::before {
    content: none !important;
}


/* =========================================================
   8. REFERENCE LINKS
========================================================= */

body.single-post :is(.ls-pillar, .lyme-pillar)
:is(
    .ls-medical-references,
    .lyme-references,
    .lyme-basics-references,
    .ls-evidence-v2,
    section#references,
    section[aria-labelledby="references"]
) ol a {
    color: #0f766e !important;

    font-family: "Inter", Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.65;

    text-decoration: none !important;

    border: none !important;
    box-shadow: none !important;

    overflow-wrap: anywhere;
}


/* Hover */

body.single-post :is(.ls-pillar, .lyme-pillar)
:is(
    .ls-medical-references,
    .lyme-references,
    .lyme-basics-references,
    .ls-evidence-v2,
    section#references,
    section[aria-labelledby="references"]
) ol a:hover {
    color: #115e59 !important;
    text-decoration: none !important;
}


/* Keyboard accessibility */

body.single-post :is(.ls-pillar, .lyme-pillar)
:is(
    .ls-medical-references,
    .lyme-references,
    .lyme-basics-references,
    .ls-evidence-v2,
    section#references,
    section[aria-labelledby="references"]
) ol a:focus-visible {
    outline: 2px solid #0f766e;
    outline-offset: 3px;

    text-decoration: none !important;
}


/* =========================================================
   9. NEWER EVIDENCE V2 HTML

   Supports the current What Is Lyme Disease?
   article, which has explicit number spans.
========================================================= */

body.single-post :is(.ls-pillar, .lyme-pillar)
.ls-evidence-v2 ol.ls-evidence-list-v2 > li {
    display: flex !important;
    align-items: flex-start !important;

    gap: 20px !important;

    padding: 14px 0 !important;

    border-top: 1px solid #e5e7eb !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;

    counter-increment: none !important;
}


/* No duplicate generated numbers */

body.single-post :is(.ls-pillar, .lyme-pillar)
.ls-evidence-v2 ol.ls-evidence-list-v2 > li::before {
    content: none !important;
    display: none !important;
}


/* Explicit teal number */

body.single-post :is(.ls-pillar, .lyme-pillar)
.ls-evidence-v2 ol.ls-evidence-list-v2 > li > span {
    flex: 0 0 19px;

    color: #0f766e !important;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.65;
}


/* Source/link content */

body.single-post :is(.ls-pillar, .lyme-pillar)
.ls-evidence-v2 ol.ls-evidence-list-v2 > li > div {
    flex: 1;
    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;
}


/* Final divider for newer markup */

body.single-post :is(.ls-pillar, .lyme-pillar)
.ls-evidence-v2 ol.ls-evidence-list-v2 > li:last-child {
    border-bottom: 1px solid #e5e7eb !important;
}


/* =========================================================
   10. REFERENCE DATES AND NOTES
========================================================= */

body.single-post :is(.ls-pillar, .lyme-pillar)
.lyme-reference-date {
    display: block;

    margin: 4px 0 0;

    color: #6b7280;

    font-size: 13px;
    line-height: 1.6;
}


body.single-post :is(.ls-pillar, .lyme-pillar)
:is(
    .ls-medical-references-note,
    .lyme-basics-references-note
) {
    margin: 16px 0 0;

    color: #6b7280;

    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   11. DISCLAIMER INSIDE REFERENCES

   Styles only. Does not move the disclaimer.
========================================================= */

body.single-post :is(.ls-pillar, .lyme-pillar)
:is(
    .ls-evidence-v2,
    .ls-medical-references,
    section[aria-labelledby="references"]
)
:is(
    footer.ls-evidence-disclaimer-v2,
    footer.ls-simple-reference-disclaimer
) {
    box-sizing: border-box;

    display: block;

    width: 100%;
    max-width: 760px;

    margin: 24px 0 0 !important;
    padding: 16px 20px !important;

    background: #f9fafb !important;

    border: 1px solid #e5e7eb !important;
    border-left: 3px solid #0f766e !important;
    border-radius: 8px !important;

    color: #6b7280;

    font-family: "Inter", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.65;
}


body.single-post :is(.ls-pillar, .lyme-pillar)
:is(
    footer.ls-evidence-disclaimer-v2,
    footer.ls-simple-reference-disclaimer
) p {
    margin: 0 !important;
    padding: 0 !important;

    color: #6b7280;

    font-size: 13px;
    line-height: 1.65;
}


body.single-post :is(.ls-pillar, .lyme-pillar)
:is(
    footer.ls-evidence-disclaimer-v2,
    footer.ls-simple-reference-disclaimer
) strong {
    color: #374151;
    font-weight: 700;
}


/* =========================================================
   12. MOBILE
========================================================= */

@media (max-width: 767px) {

    body.single-post :is(.ls-pillar, .lyme-pillar)
    :is(
        .ls-medical-references,
        .lyme-references,
        .lyme-basics-references,
        .ls-evidence-v2,
        section#references,
        section[aria-labelledby="references"]
    ) h2 {
        font-size: 23px !important;
    }


    body.single-post :is(.ls-pillar, .lyme-pillar)
    :is(
        .ls-medical-references,
        .lyme-references,
        .lyme-basics-references,
        section#references,
        section[aria-labelledby="references"]
    ) ol > li {
        padding: 14px 0 14px 32px !important;
    }


    body.single-post :is(.ls-pillar, .lyme-pillar)
    .ls-evidence-v2 ol.ls-evidence-list-v2 > li {
        gap: 14px !important;
        padding: 14px 0 !important;
    }


    body.single-post :is(.ls-pillar, .lyme-pillar)
    :is(
        .ls-medical-disclaimer,
        .lyme-article-disclaimer,
        .medical-disclaimer,
        footer.ls-evidence-disclaimer-v2,
        footer.ls-simple-reference-disclaimer
    ) {
        padding: 14px 16px !important;
    }

}

/* Match the embedded references heading to site typography */
body.single-post article #ls-standard-references h2#references {
    font-family: "Sora", "Inter", Arial, sans-serif !important;
}


/* =========================================================
   END — LYMESEARCH SHARED ARTICLE COMPONENTS
========================================================= */