/**
 * Style for the LACCEI Proceedings of 2022.
 * This desin uses a mobile first approach.
 *
 * Authors:
 * - Rodolfo Andrés Rivas Matta <rodolforivasmattta@gmail.com>
 * - Charles Bazile <charlouan@icoud.com>
 *
 * Table of Contents
 * 0. Global
 * 1. Mobile
 *   1.1. Heading
 *   1.2. Aside
 *     1.2.1. Board of Directors
 *   1.3. Main Content
 * 2. Table
 *   2.1. Heading
 *   2.2. Main Content
 * 3. Desktop
 *   3.1 Heading
 *   3.2. Main Content
**/

/** 0. Global **/
:root {
    --blue-text-headings: #006699;
    --dark-text-headings: #004466;
    --dark-bkg: #263238;
}

html, body {
    max-width: 100%;
    border: 0;
    margin: 0;
}

html {
    padding: 0;
    font-size: 16px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
    padding: 0 0 1em;
    margin: 0 auto;
}

body > * {
    padding: 0 1em;
}

body.meta-page {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

h1, h2, h3, h4 { color: var(--dark-text-headings); }

body.index-page h1 { font-weight: normal; }

body.meta-page h1 {
    color: black;
    text-align: center;
    font-size: 1.2em;
}

h2 { font-size: 1.3em; }

h4 {
    font-size: 1em;
    font-style: italic;
    margin-bottom: 0.5em;
}

body.homepage h2 {
    text-align: center;
}

body.meta-page a.paper-link {
    display: block;
    margin: 1em auto;
    background-color: var(--dark-bkg);
    padding: 0.5em;
    color: white;
    border-radius: 3px;
}

/** 1. Mobile **/
/** 1.1. Heading **/
.home-heading {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 1em;
}

img.laccei-logo {
    max-width: 100%;
    width: 180px;
}

.site-title {
    font-family: 'Times New Roman', Times, serif;
    font-weight: normal;
    color: var(--dark-text-headings);
}

header {
    padding: 0;
    margin-bottom: 1em;
    width: 100vw;
    background: #263238;
}

.header-back-link {
    display: inline-block;
    padding: 0.75em;
    margin: 0;
    background-color: #192124;
    color: white;
    border-right: 1px solid #192124;
}

.separated-heading {
    padding: 0 1em 0.5em;
    border-bottom: thin solid var(--dark-text-headings);
}

/** 1.2.1. Board of Directors **/
.board-of-directors .bod-member {
    font-size: 0.9em;
}

.board-of-directors .bod-member .position {
    color: var(--dark-text-headings);
    font-weight: bolder;
    font-style: italic;
    margin-bottom: 0.2em;
    font-size: 0.9em;
}

.board-of-directors .bod-member .name {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: bolder;
}

.board-of-directors .bod-member .institution {
    margin-top: 0em;
}

/** 1.3. Main Content **/
body.meta-page main {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
}

body.meta-page div.paper-info-item {
    margin: 1em auto;
    display: flex;
    flex-flow: column nowrap;
}

body.meta-page div.paper-info-item p.info-heading {
    font-weight: bold;
    color: var(--dark-text-headings);
    margin-bottom: 0;
}

body.meta-page div.paper-info-item p {
    text-align: center;
    margin: 0 auto;
}

section {
    clear: both;
}

.conference-titles {
    text-align: center;
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    margin: 0.5em auto;
    justify-content: center;
    box-sizing: border-box;
}

.conference-titles .c-title {
    font-size: 1.1em;
    font-weight: bolder;
    font-style: italic;
    color: var(--blue-text-headings);
    margin: 0 auto;
}

.conference-titles .c-subtitle {
    font-family: cursive;
    font-size: 1.05em;
    color: var(--blue-text-headings);
    margin: 0.5em auto 0;
}

.conference-titles p:last-child {
    font-weight: bolder;
}

section.awards, section.proceedings {
    margin: 3em auto;
}

section.awards {
    width: 480px;
    max-width: 100%;
}

section.awards img {
    float: left;
    max-width: 50%;
    width: 80px;
    margin: 0.2em 1em 0.2em 0;
}

section.awards p {
    font-style: italic;
    font-weight: bolder;
}

section.awards p span {
    color: var(--dark-text-headings)
}

section.proceedings {
    text-align: center;
}

section.proceedings p {
    font-size: 0.9em;
}

section.proceedings .links a {
    display: block;
    margin: 0.2em;
}

section.proceedings .member {
    margin: 1em auto;
}

section.proceedings .member .position {
    margin-bottom: 0;
    font-size: 0.8em;
    font-style: italic;
}

section.proceedings .member .name {
    margin-top: 0;
    font-size: 0.85em;
}

body > aside {
    display: none;
}

.list-of-reviewers p {
    display: block;
    margin: 0.4em 0;
}

.public-info, .proceedings-editors {
    text-align: center;
}

.proceedings-editors p {
    margin: 0.2em auto;
}

.conference-title {
    font-style: italic;
    margin-bottom: 0;
}

.legend {
    font-style: italic;
    margin: 0.5em 0;
}

.legend span {
    font-weight: bold;
}

div.index-box {
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottom: thin solid var(--dark-text-headings);
}

div.index-box a {
    display: inline-block;
    padding: 0.25em;
    margin: 0 0.25em;
}

li.list-separator {
    margin-top: 3em;
    font-weight: bold;
    list-style-type: disclosure-open;
}

li.list-separator:first-child { margin-top: 1em; }

.list-blocked-container {
    max-width: 100vw;
    overflow: hidden;
    box-sizing: border-box;
}

.paper-list-item {
    margin: 1em 0;
}

/** 2. Tablet **/
@media (min-width: 768px) {
    /** 2.1. Heading **/
    .home-heading { flex-flow: row nowrap; }

    .home-heading .laccei-logo { display: none; }

    /** 2.2. Main Content **/
    main aside { display: none; }

    body {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
    }

    body.index-page {
        flex-direction: column;
    }

    body > aside {
        display: block;
        position: relative;
        margin-right: 1em;
        margin-top: 1em;
    }

    body > aside .board-of-directors {
        position: sticky;
        top: 20px;
    }

    .list-of-reviewers {
        column-count: 2;
        column-gap: 1em;
    }

    body.meta-page div.short-info-items {
        display: flex;
    }
    
    body.meta-page div.short-info-items > div {
        flex: 33% 0 0;
    }
}

/** 3. Desktop **/
@media (min-width: 992px) {
    /** 3.2. Main Content **/
    .list-of-reviewers {
        column-count: 3;
    }
}