/* **************************************************************
These styles are based on the W3C stylesheet at
https://www.w3.org/StyleSheets/TR/2016/base.css

Accordion styles derived from https://codepen.io/raubaca/pen/PZzpVe
SCSS processeed to pure CSS using https://www.cssportal.com/scss-to-css/

Only a subset are used.
***************************************************************** */

/** Table of Contents )(all widths) *********************************************************/

nav#toc h2 {
        font-size:1.5em;
        font-weight: normal;
}

.toc, .toc ol, .toc ul, .toc li {
        list-style: none; /* Numbers are part of the text content and so we suppress them being generated (again) by the browser */
        margin:  0;
        padding: 0;
        line-height: 1.1rem; /* consistent spacing */
}


.toc a {
        /* More spacing; use padding to make it part of the click target. */
        padding-top: 0.1rem;
        /* Larger, more consistently-sized click target */
        display: block;
        /* Reverse color scheme */
        color: black;
        border-color: #3980B5;
        text-decoration: none;
}
.toc a:visited {
        border-color: #054572;
}

.toc a[href]:focus, a[href]:hover {
        background: #f8f8f8;
        background: rgba(75%, 75%, 75%, .25);
        border-bottom: medium solid #EF6334;
        margin-bottom: -2px;
}

a[href]:active {
        color: #EF6334;
        border-color: #C00;
}


.toc a:not(:focus):not(:hover) {
        /* Allow colors to cascade through from link styling */
        border-bottom-color: transparent;
}


/* ToC not indented until third level, but font style & margins show hierarchy */
.toc > li             { font-weight: bold; line-height:1.2em  }
.toc > li li          { font-weight: normal; }
.toc > li li li       { font-size:   95%;    }
.toc > li li li li    { font-size:   90%;    }
.toc > li li li li li { font-size:   85%;    }

.toc > li             { margin: 1.5rem 0;    }
.toc > li li          { margin: 0.3rem 0;    }
.toc > li li li       { margin-left: 2rem;   }

/* Section numbers in a column of their own */
.toc .secno {
        float: left;
        width: 4rem;
        white-space: nowrap;
}
.toc > li li li li .secno {
        font-size: 85%;
}
.toc > li li li li li .secno {
        font-size: 100%;
}

:not(li) > .toc              { margin-left:  5rem; }
.toc .secno                  { margin-left: -5rem; }
.toc > li li li .secno       { margin-left: -7rem; }
.toc > li li li li .secno    { margin-left: -9rem; }
.toc > li li li li li .secno { margin-left: -11rem; }

.toc li {clear: both;}


/* Tighten up indentation in narrow ToCs */
@media (max-width: 30em) {
        :not(li) > .toc              { margin-left:  4rem; }
        .toc .secno                  { margin-left: -4rem; }
        .toc > li li li              { margin-left:  1rem; }
        .toc > li li li .secno       { margin-left: -5rem; }
        .toc > li li li li .secno    { margin-left: -6rem; }
        .toc > li li li li li .secno { margin-left: -7rem; }
}

/* Mobile - TOC is in collapsible accordion block */

body #toc {
	overflow:hidden;
	background-color: var(--gs1-color-ui-2);
}


input.accordionCheckbox {
	position: absolute;
        opacity: 0;
  	z-index: -1;
}

.tab-label {
	display: flex;
	justify-content: space-between;
	padding: .5em;
	cursor: pointer;
	background-color: var(--gs1-color-ui-2);
}

.tab-label:hover {
          background-color: var(--gs1-color-ui-2);
}

.tab-label::after {
        content: url("https://ref.gs1.org/logos/chevron.svg");
        width: 1em;
        height: 1em;
        text-align: center;
        transition: all 0.35s;
}

.tab-content {
        max-height: 0;
        padding: 0 1em 0 2em;
        transition: all 0.35s;
        overflow: inherit;
        background-color: var(--gs1-color-ui-2);
}


input.accordionCheckbox:checked + .tab-label::after {
        transform: rotate(180deg);
}

input.accordionCheckbox:checked ~ .tab-content {
        max-height: 100vh;
        padding: 1em;
        overflow-y: scroll
}





/* The following styles define the sidebar navigation on screens wide enough to show it.*/

@media screen and (min-width: 78em) {
/* first deal with the mobile-specific collapsible menu stuff we need to undo */

        body #toc {
	        overflow:visible;
	        background-color:  var(--gs1-color-ui-1);
        }
/*        nav#toc h2 {
                background-color: var(--gs1-color-ui-1);
        }
  */    
        .tab-label {
	        display: block;
        	justify-content: normal;
        	padding: 0;
        	font-weight: normal;
        	cursor: auto;
                background-color: var(--gs1-color-ui-1);
        }

        .tab-label::after {
              content: none;
        }
      
        .tab-content {
                max-height: auto;
                padding: 0;
                transition: none;
                overflow: visible;
        }

        input.accordionCheckbox:checked ~ .tab-content {
                max-height: auto;
                padding: 0;
        }
        
        input.accordionCheckbox ~ .tab-content {
                max-height: auto;
                padding: 0;
        }



        /* now set up the block which is fixed to the left hand side of the screen */
        body #toc {
                position: fixed;
                top: 0; bottom: 0;
                left: 0;
                width: 23.5em;
                overflow: auto;
                padding: 0 1em;
                padding-left: 42px;
                padding-left: calc(1em + 26px);
                background: inherit;
                z-index: 1;
                box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset
        }
        /* Having defined the width of the navigation bar in the previous section, we now move the body a little further than that to the right */
        body {padding-left: 24.5em; }

        body #toc h2 {
                margin-top: .8rem;
        }
}