/* BASE VARIABLES */
* {
    --blue-dark: #213558;
    --blue-med: #405780;    
    --blue-light: #859bc0;
    --blue-pale: #dbe3f1;
    --orange-dark: #6d280c;
    --orange-vivid: #dfa25d;
    --orange-pale: #ece1bb;

    --body-text: 'Merriweather Sans';
    --display-text: 'Dumont Sans';
}

/* LAYOUT & STRUCTURE */
html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

img {
    max-width: 100%;
}

main, section {
    padding: 1rem;
}

/* TYPE */
@font-face {
    font-family: 'Dumont Sans';
    src: url(../fonts/DumontSans.otf);
}
@font-face {
    font-family: 'Merriweather Sans';
    src: url(../fonts/MerriweatherSans-Light.ttf);
}
@font-face {
    font-family: 'Merriweather Sans';
    font-weight: bold;
    src: url(../fonts/MerriweatherSans-SemiBold.ttf);
}
@font-face {
    font-family: 'Merriweather Sans';
    font-style: italic;
    src: url(../fonts/MerriweatherSans-LightItalic.ttf);
}
@font-face {
    font-family: 'Merriweather Sans';
    font-weight: bold;
    font-style: italic;
    src: url(../fonts/MerriweatherSans-SemiBoldItalic.ttf);
}

h1, h2 {
    font-family: var(--display-text);
    letter-spacing: 0.15rem;
    text-align: center;
}
h3 {
    font-family: var(--body-text);
}
p, li {
    font-family: var(--body-text);
    text-align: justify;
}
.initial {
    font-weight: bold;
}
p.close {
    margin-top: -0.7rem;
}

/* HEADER STYLES */
header {
    background: var(--blue-dark);
    color: #fff;
}
header h1 {
    text-align: left;
    margin: 0;
    padding: 1rem;
}
header h2 {
    font-size: 0.8rem;
    font-family: var(--body-text);
    margin: -0.8rem 0;
    padding: 0 1rem 1.5rem;
    text-align: left;
    color: var(--orange-pale);
}
#header-name {
    display: grid;
    grid-template-areas:
        'h1 navtoggle'
        'h2 navtoggle'
    ;
}
#header-name > h1 { grid-area: h1; }
#header-name > h2 { grid-area: h2; }
#topnav-toggle {
    grid-area: navtoggle;
}
#topnav-toggle > img {
    width: 8vw;
    padding: 1.2rem;
}

/* NAV MENU STYLES */
nav > ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    list-style: none;
    padding: 0;
    font-family: 'Dress Code';
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.2rem;
}
nav li {
    padding: 0.5rem;
    text-align: center;
    background: var(--blue-med);
    margin: 0.25rem 0.5rem;
}
nav {
    background: var(--blue-dark);
    
}
nav a {
    text-decoration: none;
    color: var(--orange-vivid)
}
nav a:hover {
    color: #fff;
}
#topnav {
    display: none;
}
nav .active {
    background: var(--orange-vivid);
}
nav .active > a {
    color: var(--blue-dark)
}
nav .active > a:hover {
    color: var(--blue-dark);
}

/* MAIN CONTENT STYLES */
main h1 {
    color: var(--blue-med);
}
main h2 {
    color: var(--blue-med);
}
main a {
    color: var(--blue-dark);
    font-weight: bold;
    text-decoration-color: var(--orange-vivid);
    text-decoration-thickness: 2px;
}
.contact {
    text-align: center;
}
.category {
    font-weight: bold;
    color: var(--blue-med);
}
.category::after {
    content: " |";
    color: var(--blue-light);
}
.box {
    background: var(--blue-med);
    color: white;
    padding: 0.2rem 1rem;
    grid-area: box;
}
.center {
    text-align: center !important;
}
.sticky {
    position: sticky;
    top: 1rem;
}
.accentleft {
    border-left: 10px solid var(--orange-vivid)
}
.flexcolumn {
    display: flex;
    flex-direction: column;
}

.hidden {
    display: none;
}

hr {
    width: 60%;
    margin: 2rem auto 3rem;
    border: solid var(--orange-vivid) 1px;
}

/* PUBLICATIONS STYLES */

#pubs ul {
    padding: 0;
}
#pubs li {
    list-style: none;
    border-bottom: 1px solid var(--blue-light);
    margin-bottom: 2rem;
}

#pubs button, a.button {
    border: 2px solid var(--blue-pale);
    padding: 0.6rem;
    color: black;
    background: var(--blue-pale);
    font-family: var(--body-text);
    font-weight: bold;
    font-size: 0.8rem;
    text-transform: uppercase;
    margin: 0.2rem;
    text-decoration: none;
}
#pubs .tag-label:not(button) {
    border-radius: 1rem;
}

#pubs h3 span {
    padding: 0.6rem;
}

button.show-abstract {
    font-family: var(--body-text);
    color: black;
    background: var(--blue-light) !important;
    border: none !important;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    margin-bottom: 1rem !important;
}
.pub-abstract {
    background: var(--blue-pale);
    padding: 1rem;
    font-style: italic;
    display: none;
    margin-top: 0;
}

/* FILTER STYLES */
#pubs li[data-tags="Peer Reviewed Article"] .tag-label, #pubs button[data-tags="Peer Reviewed Article"]{
    background: var(--blue-light);
    border: 2px solid var(--blue-light);
}
#pubs li[data-tags="White Paper"] .tag-label, #pubs button[data-tags="White Paper"] {
    background: var(--orange-vivid);
    border: 2px solid var(--orange-vivid)
}
#pubs li[data-tags="Dissertation"] .tag-label, #pubs button[data-tags="Dissertation"] {
    background: var(--orange-pale);
    border: 2px solid var(--orange-pale);
}
#pubs li[data-tags="Book Review"] .tag-label, #pubs button[data-tags="Book Review"] {
    background: var(--blue-dark);
    border: 2px solid var(--blue-dark);
    color: white;
}

/* FILTER BUTTON ACTIVE STYLES */
#pubs button[data-tags="Paper"].active {
    border: 2px solid var(--orange-dark);
}
#pubs button[data-tags="Dissertation"].active {
    border: 2px solid var(--orange-vivid);
}
#pubs button[data-tags="Peer Reviewed Article"].active {
    border: 2px solid var(--blue-dark);
}
#pubs button[data-tags="Book Review"].active {
    border: 2px solid var(--blue-light);
}

/* SHARED STYLES */

#pubs h2, #teaching h2 {
    text-align: left;
    font-family: var(--body-text);
    letter-spacing: normal;
}
#pubs h3 {
    font-size: 0.8rem;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
}

/* TEACHING STYLES */
#teaching {
    padding: 1rem;
}

#teaching > p {
    text-align: center;
}
.course {
    background: var(--orange-pale);
    padding: 0.2rem 1rem 0.5rem;
    margin-bottom: 1rem;
}
.course h2 {
    font-size: 1.2rem;
    color: var(--orange-dark);
    padding-bottom: 0.4rem;
    margin-bottom: 0;
    border-bottom: 2px solid var(--orange-vivid)
}

div.course-subtitle {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 0.4rem;
}
div.course-subtitle p {
    font-weight: bold;
    font-size: 0.9rem;
    margin: 0;
}

/* FOOTER STYLES */
footer {
    background: var(--orange-vivid);
    color: var(--orange-dark);
    font-size: 0.8rem;
    padding: 0 0.5rem;
}
footer > p {
    text-align: right;
}

/* DESKTOP STYLES */
@media (min-width: 768px) {
    
    /* DESKTOP LAYOUT & STRUCTURE */
    main.profile {
        width: 80%;
        margin: 5% auto 0;
    }    
    main, section {
        padding: 0;
    }
    section.profile {
        display: grid;
        grid-template-areas:
        'img content'
        ;
    }
    
    h1 { grid-area: h1; }
    img { grid-area: img; }
    .section-text { grid-area: content; }
    
    .section-text {
        padding: 0 1rem;
    }
    
    /* DESKTOP HEADER STYLES */
    header {
        padding: 0 10%;
        display: grid;
        grid-template-columns: 1fr 2fr;
    }
    #header-name {
        display: inline;
    }

    /* DESKTOP NAV MENU STYLES */

    nav > ul {
        flex-direction: row;
        justify-content: end;
        padding-right: 1rem;
    }
    nav li {
        background: var(--blue-dark);
        margin: 0 1rem;
    }
    #topnav-toggle {
        display: none;
    }
    #topnav {
        display: flex;
    }
    nav .active {
        background: var(--blue-dark);
        text-decoration: underline;
        text-decoration-color: var(--orange-pale);
        text-decoration-thickness: 3px;
    }
    nav .active > a {
        color: var(--orange-vivid);
    }
    nav .active > a:hover {
        color: var(--orange-vivid);
    }

    /* DESKTOP MAIN CONTENT STYLES */
    main h1 {
        text-align: right;
        margin-right: 1rem;
    }

    /* DESKTOP LAYOUT FOR SIDEBAR PAGES */
    #pubs {
        display: grid;
        grid-template-columns: 0.5fr auto;
        grid-template-rows: 10vh auto;
        max-height: 100%;
    }

    #pubs h1 {
        text-align: center;
        grid-area: 1 / 2 / 3 / 3;
    }
    #pubs-list {
        grid-area: 2 / 2 / 3 / 3 ;
        width: 100%;
        margin: 0;
    }
    #pubs-list li {
        padding: 1rem;
    }
    #pubs p.flexcolumn button {
        margin-top: 1rem;
    }
    button.show-abstract {
        display: none;
    }
    .pub-abstract {
        display: block;
    }
    .pub-abstract::before {
        content: "Abstract";
        display: block;
        font-weight: bold;
        color: var(--blue-dark);
        padding: 0 0 0.6rem 0;
        text-transform: uppercase;
        font-style: normal;
        font-size: 0.8rem;
    }

    .box.tall {
        min-width: 18rem;
        width: 15vw;
        grid-area: 1 / 1 / 4 / 2;
    }

    /* DESKTOP TEACHINGS TYLES */
    #teaching {
        width: 60%;
        margin: auto;
    }
    #teaching > p {
        text-align: left;
        margin-left: 3rem;
    }

}