/* Author: Christopher C. */

/* <| DOCUMENTS |>

 * UNIVERSAL_RULES
 * VIEWPORT_MOBILE
 *                / VM_HEADER
 *                / VM_NAV
 *                / VM_MAIN
 *                / VM_FOOTER
 *                / MISC_CLASSES
 * VIEWPORT_TABLET
 *                / VT_HEADER
 *                / VT_NAV
 *                / VT_MAIN
 *                / MISC_CLASSES
 * VIEWPORT_OTHER

*/


/* CSS reset, for best spacing consistency between browsers */
* {
    margin: 0;
    padding: 0;
    border: 0;
}


/* <| UNIVERSAL_RULES |> */

/* Centralized color pallette, for easy swapping of colors via CSS overwrites. */
:root {

    /* body */
    --container: hsl(232, 45%, 55%);
    --body: hsl(233, 35%, 20%);
    --text: #000;
    --alt_text: #fff;

    /* nav */
    --address_background: #111;
    --address_color: #fff;

    /* main content */
    --section_border: #808080;

    --active_link_text: hsl(217, 100%, 76%);
    --active_link_text_alt: hsl(217, 100%, 76%);
    --active_link_hover: hsl(281, 100%, 81%);
    --inactive_link_text: hsl(10, 63%, 64%);

    --table_hover: rgb(0, 0, 0, 0.5);
    --figure_background: rgb(0, 0, 0, 0.25);

    --tab_fill: hsl(273, 100%, 30%);
    --tab_border: rgb(0, 0, 0, 0.5);

        /* below values are HSL format */
    --ranking_0: 0, 0%;
    --ranking_open: 120, 100%;
    --ranking_1: 60, 100%;
    --ranking_2: 36, 100%;
    --ranking_3: 0, 100%;
    --ranking_4: 283, 100%;
    --ranking_5: 217, 77%;
    
    --opinion_p3: 281, 100%;
    --opinion_p2: 127, 100%;
    --opinion_p1: 205, 100%;
    --opinion_n0: 0, 0%;
    --opinion_n1: 50, 100%;
    --opinion_n2: 25, 100%;
    --opinion_n3: 0, 100%;
    
    --host_a: 0, 100%;
    --host_b: 217, 100%;
    --host_d: 120, 100%;
    --host_e: 283, 100%;
    --host_l: 0, 0%;
    --host_sp: 60, 100%;

    --session_dialogue_background: rgba(98, 0, 255, 0.25);
}

* {
    box-sizing: border-box;
    color: var(--text);
    scroll-behavior: smooth;
}

body {
    background-color: var(--body);
    font-family: 'Inconsolata', monospace;
    font-weight: 600;
}

img {
    max-width: 100%;
    display: block;
}

/* Content-containing portion of the page, appears when screen width gets too high */
#container {
    overflow: hidden;
    background-color: var(--container);
    padding-left: 1em;
    padding-right: 1em;
}


/* <| VIEWPORT_MOBILE |> */

/* Hide anything with the "tablet-desktop" class, to save space */
.tablet-desktop {
    display: none;
}


/* [VM_HEADER] */
header {
    text-align: center;
}

header img {
    margin: 1em auto;
    margin-bottom: 1em;
    height: 190px;
    align-items: center;
}

header h1 {
    font-size: 2em;
}

header h2 {
    font-size: 1.1em;
}

header p {
    margin: 0.5em 0 1em 0;
}

.address-bar {
    margin: 0.5em 0;
    overflow: auto;
    text-align: left;
    background-color: var(--address_background);
    color: var(--address_color);
    padding: 0.25em;
    padding-left: 0.5em;
    border-radius: 8px;
}

/* [VM_NAV] */
nav {
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
}

nav ul {
    list-style-type: none;
    text-align: center;
}

nav li {
    font-size: 1.5em;
    border-top: 4px solid var(--body);
}

nav li a:hover {
    background-color: var(--table_hover);
    color: var(--active_link_hover);
}

/*nav li:last-child {
    border-bottom: 3px solid var(--body);
}*/

nav li a {
    display: block;
    color: var(--text);
    font-weight: 600;
    padding: 0.5em 1em;
    text-decoration: none;
}


/* [VM_MAIN] */
main {
    font-size: 1em; /* Not necessary, but explicit definition is easier to understand */
    border-top: 1px solid var(--section_border);
    border-bottom: 1px solid var(--section_border);
}

main p, main h1, main h2, main h3, main h4 {
    margin: 1em 0;
}

main ul {
    margin: 0 0 0 1.2em;
}

table, th, td {
    table-layout: fixed;
    font-size: 0.9em;
    margin: 1em auto;
    border: 3px solid var(--body);
    border-collapse: collapse;
    width: auto;
    padding: 0.5em;
}

td {
    overflow: hidden;
}

td a {
    display: block;
    margin: -10em;
    padding: 10em;
}

.table_sessions {
    table-layout: fixed;
    word-wrap: break-word;
    width: 100%;
}

.table_sessions_host {
    min-width: 2.5em;
    width: 2.5em;
    max-width: 2.5em;
}

.table_sessions_title {
    min-width: 8em;
    width: 8em;
    max-width: 8em;
}

.table_sessions_arc td {
    background-color: var(--body);
    color: var(--alt_text);
}

.host_a {
    color: hsl(var(--host_a), 60%);
    background-color: hsl(var(--host_a), 17%);
}

.host_b {
    color: hsl(var(--host_b), 60%);
    background-color: hsl(var(--host_b), 17%);
}

.host_d {
    color: hsl(var(--host_d), 60%);
    background-color: hsl(var(--host_d), 17%);
}

.host_e {
    color: hsl(var(--host_e), 60%);
    background-color: hsl(var(--host_e), 17%);
}

.host_l {
    color: hsl(var(--host_l), 60%);
    background-color: hsl(var(--host_l), 17%);
}

.host_sp {
    color: hsl(var(--host_sp), 60%);
    background-color: hsl(var(--host_sp), 17%);
}

/* Links should always be in the first column */
table .active-link:hover {
    background-color: var(--table_hover);
}

section {
    border-top: 1px solid var(--section_border);
    padding: 1em 0;
}

section:first-child {
    border-top: none;
}

section:last-child {
    border-bottom: none;
}

figure {
    margin: 1em auto;
}

figure img {
    width: 95%;
    margin: 0 auto;
    padding: 0.5em;
    border: 4px solid var(--body);
    background: var(--figure_background);
}

.figure-small {
    max-width: 50%;
}

.figure-large {
    width: 95%;
}

.figure-full {
    width: 100%;
}

/* Tabs used for maps (and other image albums) get auto maximized. */
figure.tab-panel {
    width: 100%;
}

.figure-key {
    width: 8em;
}

.figure-circle {
    border-radius: 50%;
}

/* Galaxy Fold is too small for two columns; almost all phones easily support 2 otherwise. */
.grid-key {
    display: grid;
    grid-template-columns: auto;
}

figcaption {
    width: 95%;
    margin: 0 auto;
    padding: 0.25em 0;
    text-align: center;
    font-size: 1.25em;
    color: var(--alt_text);
    background: var(--body);
}

figcaption .active-link {
    color: var(--active_link_text_alt);
}

/* Tabs. */
.tab-list {
    /* Workaround to get rid of whitespace characters between <li> elements without removing the actual whitespace. */
    font-size: 0;
}
  
.tab-list li {
    font-size: 16px;
    display: inline-block;
    list-style-type: none;
    background-color: var(--tab_fill);
    border: 3px solid var(--tab_border);
    letter-spacing: 0.1em;
}

.tab-list li a {
    color: #fff;
    display: block;
    padding: 7px 10px 7px 10px;
    text-decoration: none; /* Removes link underlines. */
}

.tab-list li.tab-active a {
    background-color: hsl(273, 100%, 50%);
}

.tab-list li a:hover {
    background-color: hsl(273, 100%, 70%);
}

.tab-panel {
    display: none;
}

.tab-panel.tab-active {
    display: block;
}

/* Session stuff. */
.session_dialogue p {
    margin: 0.5em 0 0 0;
    padding: 6px;
    background-color: var(--session_dialogue_background);
    border-radius: 10px;
}

.session_dialogue figure {
    margin: 0 auto;
    border: none;
    background: none;
}

.session_dialogue figure img {
    width: 80px;
    padding: 4px;
    border: none;
    background: none;
}

.session_dialogue figcaption {
    width: auto;
    border-radius: 8px;
    font-size: 0.8em;
}


/* [VM_FOOTER] */
footer {
    padding: 1em;
}

footer p {
    font-size: 0.75em;
    text-align: center;
    color: var(--alt_text);
    padding: 0 1em;
}

footer p a {
    text-decoration: none;
}


/* [MISC_CLASSES] */

/* Text formatting */
.text-bold {
    font-weight: 800;
}

.text-normal {
    font-weight: 600;
}

.text-light {
    font-weight: 400;
}

.text-italic {
    font-style: italic;
}

.active-link {
    color: var(--active_link_text);
}

.active-link:hover {
    color: var(--active_link_hover);
}

.inactive-link {
    color: var(--inactive_link_text);
    text-decoration: underline;
}

/* Spacing & alignment */
.unspaced-top {
    margin-top: 0;
}

.unspaced-bottom {
    margin-bottom: 0;
}

.align-left {
    text-align: left;
}

.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}

.align-justify {
    text-align: justify;
}

/* Government rankings */
.ranking-0 {
    color: hsl(var(--ranking_0), 100%);
    padding: 0 3px;
    background-color: hsl(var(--ranking_0), 30%);
    border: hsl(var(--ranking_0), 10%) solid 1px;
}

.ranking-open {
    color: hsl(var(--ranking_open), 50%);
    padding: 0 3px;
    background-color: hsl(var(--ranking_open), 15%);
    border: hsl(var(--ranking_open), 10%) solid 1px;
}

.ranking-1 {
    color: hsl(var(--ranking_1), 50%);
    padding: 0 3px;
    background-color: hsl(var(--ranking_1), 15%);
    border: hsl(var(--ranking_1), 10%) solid 1px;
}

.ranking-2 {
    color: hsl(var(--ranking_2), 50%);
    padding: 0 3px;
    background-color: hsl(var(--ranking_2), 15%);
    border: hsl(var(--ranking_2), 10%) solid 1px;
}

.ranking-3 {
    color: hsl(var(--ranking_3), 50%);
    padding: 0 3px;
    background-color: hsl(var(--ranking_3), 15%);
    border: hsl(var(--ranking_3), 10%) solid 1px;
}

.ranking-4 {
    color: hsl(var(--ranking_4), 50%);
    padding: 0 3px;
    background-color: hsl(var(--ranking_4), 15%);
    border: hsl(var(--ranking_4), 10%) solid 1px;
}

.ranking-5 {
    color: hsl(var(--ranking_5), 60%);
    padding: 0 3px;
    background-color: hsl(var(--ranking_5), 17%);
    border: hsl(var(--ranking_5), 10%) solid 1px;
}

/* Override ranking classes border and padding for table stuff */
table .ranking-0, table .ranking-open, table .ranking-1, table .ranking-2, table .ranking-3, table .ranking-4, table .ranking-5 {
    border: 3px solid var(--body);
    padding: 0.5em;
}

/* News documents. */
#news {
    display: block;
    margin: 0 auto;
    padding: 1em 0;
    border-top: 1px solid var(--section_border);
}

#news section {
    width: 100%;
    margin: 0 0;
    padding: 1em;
    border-top: none;
    border-bottom: 1px solid var(--section_border);
}

/* Character/nation opinions */
.opinion {
    padding: 0.25em;
    width: 4.25em;
    border-radius: 25%;
    margin: 0 auto;
}

.pos3 {
    background-color: hsl(var(--opinion_p3), 25%);
    border: 4px solid hsl(var(--opinion_p3), 10%);
}

.pos2 {
    background-color: hsl(var(--opinion_p2), 25%);
    border: 4px solid hsl(var(--opinion_p2), 10%);
}

.pos1 {
    background-color: hsl(var(--opinion_p1), 25%);
    border: 4px solid hsl(var(--opinion_p1), 10%);
}

.neut {
    background-color: hsl(var(--opinion_n0), 25%);
    border: 4px solid hsl(var(--opinion_n0), 10%);
}

.neg1 {
    background-color: hsl(var(--opinion_n1), 25%);
    border: 4px solid hsl(var(--opinion_n1), 10%);
}

.neg2 {
    background-color: hsl(var(--opinion_n2), 25%);
    border: 4px solid hsl(var(--opinion_n2), 10%);
}

.neg3 {
    background-color: hsl(var(--opinion_n3), 25%);
    border: 4px solid hsl(var(--opinion_n3), 10%);
}

/* Add a column when screen size is large enough. */
@media screen and (min-width: 310px), print {
    .grid-key {
        grid-template-columns: auto auto;
    }
}

/* Add another column when screen size is large enough. */
@media screen and (min-width: 450px), print {
    .grid-key {
        grid-template-columns: auto auto auto;
    }
}

/* Add another column when screen size is large enough. */
@media screen and (min-width: 590px), print {
    .grid-key {
        grid-template-columns: auto auto auto auto;
    }
}

/* Add another column when screen size is large enough. */
@media screen and (min-width: 730px), print {
    .grid-key {
        grid-template-columns: auto auto auto auto auto;
    }
}

/* Incease table size and key image size when screen is large enough */
@media screen and (min-width: 640px) {
    table, th, td {
        font-size: 1em;
    }
}

/* Limit width of non-news content section */
@media screen and (min-width: 743px) { /* +33px more than <section> width */
    section {
        width: 710px;
        margin: 0 auto;
    }
}


/* <| VIEWPORT_TABLET |> */
@media screen and (min-width: 750px), print {
    
    /* Now that there is more screen-space, show tablet/desktop stuff and hide mobile-only. */
    .tablet-desktop { 
        display: block;
    }

    .mobile {
        display: none;
    }

    /* [VT_HEADER] */
    header img {
        height: 225px;
    }

    header h1 {
        font-size: 3em;
    }

    header h2 {
        font-size: 1.65em;
    }

    header p {
        font-size: 1.25em;
    }

    /* [VT_NAV] */
    nav {
        padding-top: 0;
    }

    nav ul {
        padding: 0;
        list-style: none;
    }

    nav li {
        display: inline-block;
        margin-left: -9px;
        border-top: none;
        border-right: 4px solid var(--body);
    }

    nav li:first-child {
        border-left: 4px solid var(--body);
    }

    nav li:last-child {
        border-bottom: none;
    }

    nav li a {
        padding: 0.1em 0.75em;
    }

    /* [VT_MAIN] */
    figure {
        width: 70%;
        max-height: 15%;
    }

    .table_sessions_host {
        min-width: 3.5em;
        width: 3.5em;
        max-width: 3.5em;
    }
    
    .table_sessions_title {
        min-width: 10em;
        width: 10em;
        max-width: 10em;
    }

    .session_dialogue {
        display: grid;
        grid-template-columns: 10em auto;
    }

    .session_dialogue p {
        margin: 0;
    }
    
    .session_dialogue figure img {
        width: 128px;
    }
}


/* <| VIEWPORT_OTHER |> */

/* This used to convert the news section into two columns, but it's disabled for now due to being a headache. This would force me to generate news <section> tags in groups of 6, instead of the nicer-looking 3 (when I can't make more than 3 stories
@media screen and (min-width: 850px) {
    #news {
        display: grid;
        grid-template-columns: 50% 50%;
        margin: 0 auto;
        padding: 1em 0;
    }

    #news section {
        border-left: 1px solid var(--section_border);
    }

    #news section:nth-child(2n) {
        border-right: 1px solid var(--section_border);
    }

    #news section:nth-last-child(-n+2) {
        border-bottom: none;
    }
}*/

/* Once the screen gets big enough, make news section into three columns */
@media screen and (min-width: 1199px) {
    #news {
        display: grid;
        grid-template-columns: 33% 34% 33%;
        margin: 0 auto;
        padding: 1em 0;
    }

    #news section {
        border-left: 1px solid var(--section_border);
    }

    #news section:nth-child(3n) {
        border-right: 1px solid var(--section_border);
    }

    #news section:nth-last-child(-n+3) {
        border-bottom: none;
    }
}

/* Limit width of news content section */
@media screen and (min-width: 1351px) {
    #news {
        width: 1315px;
        margin: 0 auto;
    }

    /*#container {
        width: 1920px;
        margin: 0 auto;
    }*/
}

/* Media query for ultrawide desktop viewports */
@media screen and (min-width: 1921px) {
    #container {
        width: 1920px;
        margin: 0 auto;
    }
}

/* Media query for print (disabled for now)
@media print {
    
    body {
        background-color: #fff;
        color: #000;
    }
}*/