/* general */

html {scroll-behavior: smooth;}
.ninja {opacity: 0; transform: scale(0);}
.center {text-align: center;}
.indent {margin-left: 32px;}
.material-symbols-outlined {vertical-align: -5px;}
.mobileBreak {display: none;}
.warning.material-symbols-outlined {
    color: light-dark(var(--light-a), var(--dark-a));
}
.smaller {font-size: 80%;}
/* remove summary */
/* Standard method for modern browsers (Firefox, Chrome, Edge) */
summary {
  list-style: none;
  /* text-align: center; */
}
#catalogue summary {text-align: center;}
/* Legacy WebKit method for Safari and older iOS/Chrome browsers */
summary::-webkit-details-marker {
  display: none;
}
summary {
  display: block; /* Removes the marker entirely */
  cursor: pointer;
}
.expandListing {
    padding: 8px;
}
.contentToggle {
    border: 1px solid light-dark(var(--light-color), var(--dark-color));
    display: inline-block;
    cursor: pointer;
    border-radius: 8px;
    padding: 4px 8px;
    width: 200px;
    /* padding: 0; */
}
.contentToggle .material-symbols-outlined {
    vertical-align: -5px;
    transition: transform 0.2s;
}
.contentToggle:hover .material-symbols-outlined {
    color: light-dark(var(--light-a), var(--dark-a));
    transform: scale(1.4);
}
summary h2, summary h3, summary h4, .contentToggle {
    background: light-dark(var(--light-alt), var(--dark-alt));
    margin: 1px;
    transition: transform 0.1s, color 0.1s, border-color 0.1s;
}
summary h2:hover, summary h3:hover, summary h4:hover, .contentToggle:hover {
    background: light-dark(var(--light-bg), var(--dark-bg));
    border-width: 2px;
    margin: 0;
}
summary h2:active, summary h3:active, summary h4:active, .contentToggle:active {
    /* background: light-dark(var(--light-a), var(--dark-a)); */
    border-color: light-dark(var(--light-a), var(--dark-a));
    color: light-dark(var(--light-a), var(--dark-a));
    border-width: 2px;
    margin: 0;
    transform: scale(0.9);
}
summary h2, summary h3 {
    display: inline-block;
    border: 1px solid light-dark(var(--light-color), var(--dark-color));
    padding: 1px 24px 1px 16px;
    border-radius: 8px;
}
summary h4 {
    font-weight: normal;
    display: inline-block;
    border: 1px solid light-dark(var(--light-color), var(--dark-color));
    padding: 0px 8px 0px 4px;
    border-radius: 4px;
}
details summary h3::before, details summary h4::before {
    display: inline-block;
    font-family: 'Material Symbols Outlined';
    content: "expand_content";
    font-size: 140%;
    /* line-height: 100%; */
    vertical-align: -5px;
    transition: transform 0.2s;
}

details[open] summary h3::before, details[open] summary h4::before {
    content: "collapse_content";
}
summary h3:hover::before, summary h4:hover::before {
    color: light-dark(var(--light-a), var(--dark-a));
    transform: scale(1.5);
}

/* vue app container */

#app {
    position: absolute; top: 0; left: 0; right: 0;
    min-width: 360px;
}


/* top acknowledgments */

#nopes {
    position: fixed;
    z-index: 5;
    top: 0; left: 0; right: 0;
    /* position: absolute; */
    width: 100%;
    /* position: absolute;
    top: 0;
    left: 0; right: 0; */
    height: 68px;
    line-height: 32px;
    text-align: center;
    background: light-dark(var(--light-bg), var(--dark-bg));
    /* background: linear-gradient(light-dark(var(--light-bg), var(--dark-bg)), light-dark(var(--light-bg), var(--dark-bg)) 50%, light-dark(var(--light-trans), var(--dark-trans))); */

    /* background: light-dark(linear-gradient(var(--light-bg), var(--light-trans), linear-gradient(var(--dark-bg), var(--dark-trans)))); */
}

#nopes input {pointer-events: none;}

#nopes label {
    display: inline;
    margin-right: 12px;
    /* make this bigger on wider screens */
}

.noMinors .unselected {
    border-bottom: 4px solid transparent;
    animation: attention 2s ease-in infinite;
}

@keyframes attention {
  0% {border-color: transparent;}
  50% {border-color: light-dark(var(--light-a), var(--dark-a));}
  100% {border-color: transparent;}
}


/* top nav */

#mainNav {
    width: 100%;
    position: relative;
    z-index: 6;
    /* position:absolute;
    top: 228px;
    left: 0; right: 0; */
    text-align: center;
}

#mainNav nav {
    width: 100%;
    margin-top: 60px;
    height: 52px;
    line-height: 48px;
    background: light-dark(var(--light-bg), var(--dark-bg));
}

#mainNav ul {
    list-style-type: none;
    padding-inline-start: 0;   
}
  
#mainNav li {
    display: inline-block;
    margin: 0 8px;
    /* make this bigger on wider screens */
}


/* css for sticking acknowledgments and nav at top of page */

.stuck-top div, .stuck-top nav {
    border-bottom: 1px solid transparent;
    /* box-shadow: 0 0 10px light-dark(transparent, transparent); */
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}

.stuck-top {
    background-color: transparent;
    container-type: scroll-state;
    position: sticky !important;
    top: 0px;

    > div, nav {
        transition: box-shadow .3s ease, background-color .2s;

        @container scroll-state(stuck: top) {
            /* color: red; */
            background-color: light-dark(var(--light-alt), var(--dark-alt)) !important;
            border-color: light-dark(var(--light-color), var(--dark-color));
            /* box-shadow: 0px 2px 4px light-dark(var(--light-color), var(--dark-color)); */
        }
    }
}

#catalogue, #authors, #about, #contact {
    scroll-margin-top: 130px;
}


/* top logo & title */

#top {
    padding-top: 16px;
    margin-bottom: -60px;
    text-wrap: none;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

#title span {
    position: relative;
    pointer-events: none;
    cursor: pointer;
}

#title span::after {
    position: absolute;
    top: 100%;
    right: 8px;
    content: "beta";
    display: block;

    color: red;
    height: 24px; 
    line-height: 24px;
    font-size: 18px;   
    color: light-dark(var(--light-a), var(--dark-a));
    pointer-events: all;

}
#title span:hover::after {
    /* text-decoration: underline; */
    color: light-dark(var(--light-ah), var(--dark-ah));
    border-bottom: 2px solid light-dark(var(--light-ah), var(--dark-ah));
}
#title span:active::after {
    /* text-decoration: underline; */
    color: light-dark(var(--light-aa), var(--dark-aa));
    border-bottom: 2px solid light-dark(var(--light-aa), var(--dark-aa));
}


#title {
    width: 100%;
    /* position: absolute;
    top: 32px;
    left: 0; right: 0; */
    height: 196px;
    line-height: 196px;
    text-align: center;
    background-image: url('images/nwls-icons.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#title span {
    width: 100%; font-size: 28px;
    text-shadow: 0px 0 10px light-dark(var(--light-bg), var(--dark-bg));
    -webkit-text-stroke: 4px light-dark(var(--light-bg), var(--dark-bg)); 
    paint-order: stroke fill;
    /* box-shadow: 0 0 4px light-dark(var(--light-bg), var(--dark-bg)); */
}

#title span {
    background: linear-gradient(light-dark(rgba(255,255,255,0), rgba(47,61,61,0)), light-dark(rgba(255,255,255,.9), rgba(47,61,61,.9)) 33%, light-dark(rgba(255,255,255,.9), rgba(47,61,61,.9)) 66%, light-dark(rgba(255,255,255,0), rgba(47,61,61,0)));
}


/* main site area */

main {
    /* padding-top: 128px; */
    /* display: flex; */
    width: 800px;
    max-width: 100%;
    min-width: 410px;
    margin: 128px auto 32px;
    padding: 0 16px;
    /* background: pink; */
    /* margin-top: 60px; */

}

main hr {margin: 32px auto;}
main h2 {text-align: center; margin-bottom: 16px;}

/* main div {height: 100vh;} */

/* #news {text-align: center;} */
#newsLinks a {display: inline-block; margin: 0 8px; font-size: 90%;}

#featured {text-align: center;}

.featuredWork {
    display: inline-block;
    width: 50%;
    min-width: 360px;
    text-align: center;
    margin-bottom: 16px;
}

.featuredWork h3 {
    margin-bottom: 8px;
}

.featuredWork img {
    width: 240px;
    height: 360px;
    margin: 0 auto;
    border-radius: 4px;
    box-shadow: 0 0 6px 0px light-dark(var(--light-color), var(--dark-color));
}


.featuredWork h3, .featuredWork img {display: inline-block;}

.featuredWork span {font-size: 14px;}


#catalogueTable {
    margin-top: 8px;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    /* margin-left: -50vw; */
    /* position: absolute; */
    /* width: 200%;
    margin-left: -50%;
    margin-right: -50%;
    max-width: 100vw; */
    /* max-width: 94vw; */
    /* margin: 8px -500px 0 -500px; */
}

#catalogue th, #catalogue th a, #catalogue th .sortIcon {
    vertical-align: middle;
    line-height: 24px;
    white-space: nowrap;
}

#catalogue th a {
    padding-right: 24px;
}

#catalogue .workYear {
    text-align: center;
}

#catalogue .workLength {
    text-align: right;
}

#catalogue tbody tr:nth-child(odd) {
    background: light-dark(var(--light-alt), var(--dark-alt));
}

#catalogue tbody td {padding: 1px 6px;}


#authors {text-align: center;}

.author {
    display: inline-block;
    width: 25%;
    margin-bottom: 16px;
    vertical-align: top;
}

.author .avatar {
    max-width: 90%;
    height: auto;
    border-radius: 8px;
    margin: 0 auto;
    box-shadow: 0 0 2px 0px light-dark(var(--light-color), var(--dark-color)); 
    background: url('images/authors/missingNo.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    aspect-ratio: 1;
    font-size: 0;
}

.author a {
    text-decoration: none;
}


.authorLink, .homeLink {
    display: inline;
    line-height: 32px;
    vertical-align: middle;
    margin: 0 2px;
}
.authorLink {
    height: 32px; 
    width: 32px;
}
.homeLink {
    font-size: 36px;
}


.authorLinks a {
    display: inline-block;
    transition: transform 0.2s;
    transform: scale(1);
    /* filter: drop-shadow(0 0 2px light-dark(var(--light-a), var(--dark-a))); */
}
.authorLinks a:hover {
    transform: scale(1.1);
    /* filter: drop-shadow(0 0 2px light-dark(var(--light-ah), var(--dark-ah))); */
    /* box-shadow: 0 0 4px light-dark(var(--light-ah), var(--dark-ah)); */
}
.authorLinks a:active {
    transform: scale(0.95);
    /* filter: drop-shadow(0 0 2px light-dark(var(--light-aa), var(--dark-aa))); */
    /* box-shadow: 0 0 4px light-dark(var(--light-aa), var(--dark-aa)); */
}

#about p, #contact p {margin: 16px 0;}
#about .pizza {text-align: center; display: block; margin: 20px 0;}
p.center {text-align: center; display: block;}

/* bottom footer */


#bottom {
    text-align: center;
    margin-top: 32px;
    margin-bottom: 32px;
}

#bottom.extraFooterPadding {
    margin-top: 128px;
}

hr {
    border-top: 1px solid light-dark(var(--light-color), var(--dark-color));
    border-bottom: 1px solid light-dark(var(--dark-color), var(--light-color));
    width: 80%;
    margin: 0 auto;
}

#aftermatter {
    padding-top: 32px;
}

#insignia {
    height: 32px; width: 32px;
    margin: 16px auto;
}

/* insignia coloration for different color schemes */

@media (prefers-color-scheme: light) {
    #insignia {
        background-image: url("images/rc-64-light.png");
        background-size: 100%;
        background-repeat: none;
        background-position: center;
    }
}
@media (prefers-color-scheme: dark) {
    #insignia {
        background-image: url("images/rc-64-dark.png");
        background-size: 100%;
        background-repeat: none;
        background-position: center;
    }
}

/* special calls for small screens */

@media only screen and (max-width: 450px) {
    .hideOnMobile {display: none;}
    main {
        width: 412px;
        max-width: 100%;
        min-width: auto;
    }
    #nopes {
        font-size: 12px;
    }
    #title span {
        font-size: 18px;
    }
    #mainNav {
        font-size: 14px;
    }
    .featuredWork {
        width: calc(100% - 32px); 
        max-width: 418px;
        min-width: auto;
    }
    h2 {
        font-size: 16px;
    }
    #catalogue p, #authors p, #about p, #contact p {
        font-size: 14px;
        line-height: 18px;
        margin: 12px 0;
    }
    #catalogueTable {
        width: 98vw;
        font-size: 12px;
    }
    .mobileBreak {
        display: block;
    }
    .authorLink {height: 22px; width: 22px;}
    .homeLink {
        font-size: 24px;
    }
}