/*CSS to support collapsible ToC*/
#toc details, #toc summary {
    margin-bottom: 0;
}
.toc-link-leaf {
    display: list-item;
    margin: 10px 10px 10px 20px;
}

/*Reduce margin above first H1 to reduce gap between logo and article title*/
#header>h1:first-child{
	margin-top: 15px;
}

/* Increase padding at top of body so all content visible beneath top banner, i.e. not under banner at load*/
body{
	padding-top:45px;
}

/*Used to format the ToC entry for the current page*/
.toccurrent{
 color: black;
 font-weight: bold;
}

/* Styles for banner classes at top of screen to advertise the app. Some a copy of footer style.*/
.banner{
	position: fixed;
	top: 0px;
	width: 100%; /* Makes it span the full width of the page */
	max-width:none;
	z-index: 1000; /* Ensures it stays above other elements */
	background-color:lightgrey;
	padding:10px 5px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.bannerdiv{
	display: flex;
	flex-direction: row;
}
.bannericon{
	cursor: pointer;
	padding:0px 10px;
	font-size: 24px;
}
.banner-text{
	font-family: "Open Sans","DejaVu Sans",sans-serif;
	color:black;
	line-height:1;
	margin: 0px;
	font-size: 20px;
}

/* Styles for Prev / Next navigation at bottom of each page
Based on Antora's standard styles for prev/next*/

nav.pagination {
    border-top: 1px solid #e1e1e1;
    line-height: 1;
    margin: 2rem -1rem -1rem;
    padding: 1rem 1rem 40px; /*Top, right/left, bottom*/
}

nav.pagination,nav.pagination span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

nav.pagination span {
    -webkit-box-flex: 50%;
    -ms-flex: 50%;
    flex: 50%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

nav.pagination .prev {
    padding-right: .5rem
}

nav.pagination .next {
    margin-left: auto;
    padding-left: .5rem;
    text-align: right
}

nav.pagination span::before {
    color: #8e8e8e;
    font-size: .75em;
    padding-bottom: .1em
}

nav.pagination .prev::before {
    content: "Prev"
}

nav.pagination .next::before {
    content: "Next"
}

nav.pagination a {
    font-weight: 600;
    line-height: 1.3;
    position: relative
}

nav.pagination a::after,nav.pagination a::before {
    color: #8e8e8e;
    font-weight: 400;
    font-size: 1.5em;
    line-height: .75;
    position: absolute;
    top: 0;
    width: 1rem
}

nav.pagination .prev a::before {
    content: "\2039";
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
}

nav.pagination .next a::after {
    content: "\203a"
}

/* CSS for ToC expand/collapse button*/
#tocBTN{
	float: right;		/*Display on right side of ToC*/
	position: sticky;	/*Acts like FIXED when ToC scrolling but moves up/down & off screen with ToC. Means button always visible next to ToC even if long ToC expanded*/
	top: 0px;			/*Set in Javascript to position button at top of ToC*/
	padding-right: 0px;	/*Place it as far right as possible*/
	z-index: 500;		/*Important - set to keep button above ToC (so button clicks go to button, not Toc) but under top banner (can't be seen when under banner)*/
	border: none;
	background-color: transparent;
}

/*If ToC (id=toc) doesn't have a title (id=toctitle), give toc top margin otherwise it's too close to content above - toctitle normally applies the top margin.
Only applied where toc displayed inline (width < 768) because - 
margin-top: 0 !important; in asciidoctor.css means this isn't applied when ToC on left, where we don't want this margin.*/
#toc:not(:has(#toctitle)){
    margin-top: 1em;
 }

#toc{
	scroll-margin-top: 60px; /*When we scrollIntoView() ToC, this margin is applied so ToC remains below top banner*/
}

/*https://docs.asciidoctor.org/asciidoc/latest/blocks/preamble-and-lead/
When using the default Asciidoctor stylesheet, if the first paragraph does not have an explicit role, and the article contains sub-section headings,
it is styled as if it has the lead role. That means larger font, etc. We don't want that. Lead role can be turned off in the article source,
but to avoid needing to do that we re-define the CSS for first paras back to normal settings. We don't redefine .lead's CSS (part of same definition in
asciidoctor.css - all on line 194) because that's only used if specifically specified in an Asciidoc document.
Ideally would reference the normal CSS /reset the CSS rather than hardcode but couldn't find a way to do that.*/
#preamble>.sectionbody>[class=paragraph]:first-of-type p{font-size:1.0625rem;line-height:1.6;color:rgba(0,0,0,.8)}

/*Search bar not shown until requested by user*/
#search{
    display: none;
}

/*Formatting of logo at top of article*/
#logo{
	width:500px;
	padding-top:15px;
}