/*
Document Name: CSS for Articles
Change log:
21-01-26: TOC height and width changed
08-10-25: a.link update
03-10-25: Add Banner styles
*/

/* Article Styles */
.article a.link { border-bottom: 1px dotted #0d6efd; }
.article a.link:hover { border-bottom: none; }
.progress { transition: 0.4s; }
#progressBar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: .3rem;
    border-radius: 0;
    z-index: 1;
}
.toc-btn { position: fixed; top: .5rem; left: .5rem; z-index: 1; padding-right: 30px; }
.toc-btn::after {
    font-family: "bootstrap-icons";
    content: "\f286"; /* Adjust this based on the actual icon code you need */
    position: absolute;
    right: 10px;
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust vertical centering */
    transition: transform 0.3s ease; }

.toc-btn.collapsed::after { transform: translateY(-50%) rotate(180deg);  }

.collapse-container { position: fixed; top: 2.4rem; left: .5rem; z-index: 9998;}
#tableOfContents { overflow-y: auto; overflow-x: hidden; max-height: calc(80vh); }
.collapse-container { max-width: 100%; }
#tableOfContents::-webkit-scrollbar { width: 6px; }
#tableOfContents::-webkit-scrollbar-track { background: #f1f1f1; }
#tableOfContents::-webkit-scrollbar-thumb { background: #aaa; border-radius: 4px; }
#tableOfContents::-webkit-scrollbar-thumb:hover { background: #888; }
#tableOfContents .list-group-item { padding-top:2px; padding-bottom:2px; cursor: pointer; }
#tableOfContents .list-group-item:hover { background-color: #eee; }

.article h2 { padding-top:2.5rem; text-align:left; }
.article h3 { padding-top:1.5rem; font-size: calc(1.2rem + .6vw); font-family: var(--font-secondary); color: var(--bs-gray-600); }

#footer_include .card-header {
    font-family: var(--font-secondary);
    font-size: 1.4rem;
    color: #000;
    text-align: center;
    padding: .5rem;
    border-bottom: 0;}

sup { color: var(--bs-gray-500);}
.references { font-size: 12px; }
.references a { color: var(--bs-gray-600); }
.references a:hover { color: #0d6efd; }

/* Testimonial banner */
.testi { color: var(--bs-black); }
.testi h2 { font-weight: bold; text-align: left; font-size: 16px;}
.testi p {font-style: italic; text-align: left; font-size: 16px;}
.testi img { max-width: 86px; display: block; margin: 0 auto; }
.testi .testi-btn { background-color: #fff; }
.testi .testi-btn:hover { background-color: var(--bs-btn-hover-bg); }

/* Media Query */
@media all and (min-width: 576px) { /* For Smaller Device sm */
    .collapse-container { max-width: 400px; }
    #tableOfContents { overflow-y: auto; overflow-x: hidden; max-height: calc(90vh); }
}
@media all and (min-width: 768px) {
    #progressBar { height: .5rem; }
    .toc-btn { top: 1.5rem; left: 1rem; }
    .collapse-container { top: 3.5rem; left: 1rem; }
    .article h2 { padding-top:2.8rem; }
    .article h3 { font-size: 1.4rem; padding-top:1.8rem; }
}
@media all and (min-width: 992px) {
    .article h2 { padding-top:3rem; }
    .article h3 { font-size: 1.5rem; padding-top:2rem; }
}