/* Global settings */
:root {
    --background-color: #FFF;
    --foreground-color: #000;
    --accent-color: rgba(204, 19, 19, 0.8);
    /* #cc1313;*/
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    line-height: 1.2;
}

body {
    font-family: 'Archivo', sans-serif;
    background-color: var(--background-color);
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
    color: var(--foreground-color);
}

li a:hover {
    border-bottom: 2px var(--accent-color) solid;
    font-weight: bold;
}

/* Header */
header {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    justify-items: center;
    margin: 1rem 0;
}

/* Deprecated for background SVG
header::after {
    content: '';
    position: absolute;
    height: 100px;
    bottom: -70px;
    right: 0;
    left: 0;
    background-color: var(--accent-color);
    transform: skewY(-45deg) translateY(-200px);
    width: 140%;
    z-index: -100;
    box-shadow: 5px 5px 15px var(--foreground-color);
}
*/

/* Sets up the red ribbon on the background */
body {
    background-origin: border-box;
    background-position: top right;
    background-clip: border-box;
    background-size: 100%;
    background-image: url('/images/background.svg');
    background-repeat: no-repeat;
}

/* Alternative background with a faded tileable labyrinth
body {
    background-image: url('/images/tileable_labyrinth_10p_opacity.jpg');
    background-repeat: repeat;
}
*/

/* Forces the bar up a bit more for Firefox, Chrome doesn't need it */
@-moz-document url-prefix() {
    header::after {
        transform: skewY(-45deg) translateY(-400px);
    }
}

header div.title {
    display: flex;
    flex-direction: column;
    align-items: center;
}

header div.title h2 {
    text-align: center;
}

header img {
    width: 15rem;
    transition-duration: 0.5s;
}

header img:hover {
    box-shadow: 5px 5px 3px var(--accent-color);
    background-color: var(--accent-color);
}

header ul {
    display: flex;
}

header li {
    margin: 0 1rem;
}

/* Add a triple white shadow for text that will be over the red ribbon */
@media (max-width: 768px) {

    header div.title h2,
    div.title span,
    header li,
    .episode-list-title {
        text-shadow: 1px 1px 2px var(--background-color),
            1px 1px 2px var(--background-color),
            1px 1px 2px var(--background-color),
            -2px -1px 2px var(--background-color),
            -2px -1px 2px var(--background-color),
            -2px -1px 2px var(--background-color);
        margin-top: 0.5rem;
    }
}

/* Footer */
footer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    justify-items: center;
    margin: 1rem 0;
}

/* Tablets and under */
@media (max-width: 768px) {
    header {
        grid-template-columns: 1fr;
        grid-template-rows: 3fr;
    }

    header>*:first-child {
        grid-column: 1;
        grid-row: 2;
    }

    header div {
        margin: 0.5rem 0;
    }

    footer {
        grid-template-columns: 1fr;
    }

    /* Reverse the order of the cells */
    footer>*:first-child {
        grid-column: 1;
        grid-row: 2;
    }
}

/* Episodes main page */
.episode-item {
    margin: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: row;
    border: 2px var(--foreground-color) solid;
    box-shadow: 5px 5px 5px var(--foreground-color);
    background-color: var(--background-color);
    transition-duration: 0.5s;
}

.episode-item:hover {
    transition-duration: 0.5s;
    border: 2px var(--accent-color) solid;
    box-shadow: 5px 5px 5px var(--accent-color);
}

.episode-item a {
    align-self: center;
}

.episode-item img {
    width: 200px;
    transition-duration: 0.5s;
    filter: grayscale(1);
}

.episode-item:hover>a img {
    transition-duration: 0.5s;
    filter: grayscale(0);
}

.episode-content {
    padding: 0 1rem;
}

.episode-content>p,
div {
    margin: 0.5rem 0;
}

.episode-title {
    font-weight: 900;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.episode-title a {
    transition-duration: 0.5s;
}

.episode-title a:hover {
    text-shadow: var(--accent-color) 0px 0px 2px;
}

.episode-date,
.episode-tags {
    font-weight: 100;
}

.episode-tags {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 0;
    flex-wrap: wrap;
}

/* Tablets and under */
@media (max-width: 768px) {
    .episode-item {
        flex-direction: column;
    }

    .episode-item a {
        align-self: center;
    }

    .episode-item img {
        align-self: center;
        filter: grayscale(0);
    }
}

.episode-list {
    padding: 0 2rem;
}

.episode-list-title {
    text-align: center;
    font-size: 2rem;
}

/* Special case for teams page */
.team-list .episode-list-title {
    grid-column: 1 / span 2;
}

/* Remover o span quando ficar em coluna simples,
   caso contrário o design quebra */
@media (max-width: 768px) {
    .team-list .episode-list-title {
        grid-column: 1;
    }
}

/* História */
.text-area {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0 2rem;
}

.text-area div {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    width: 100%;
    padding: 2rem 0;
    border: 2px var(--foreground-color) solid;
    box-shadow: 5px 5px 5px;
    background-color: var(--background-color);
}

.text-area p {
    margin: 0 4rem;
    font-size: 1.5rem;
    width: 58rem;
    text-align: justify;
}

/* Tablets and under */
@media (max-width: 768px) {
    .text-area {
        padding: 1rem;
    }

    .text-area div {
        padding: 0.8rem;
    }

    .text-area p {
        width: 100%;
        /* Justificado em telas pequenas causa espaços
        em branco estranhos */
        text-align: left;
    }
}

/* Special case for phones */
@media (max-width: 380px) {
    .text-area p {
        text-align: left;
    }
}

.text-area h1 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.text-area h2 {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Team */
.team-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.team-item {
    margin: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: row;
    border: 2px var(--foreground-color) solid;
    transition-duration: 0.5s;
    box-shadow: 5px 5px 5px var(--foreground-color);
    background-color: var(--background-color);
}

.team-item img {
    width: 200px;
    align-self: center;
    transition-duration: 0.5s;
    filter: grayscale(1);
}

.team-item:hover {
    transition-duration: 0.5s;
    box-shadow: 5px 5px 5px var(--accent-color);
    border: 2px var(--accent-color) solid;
}

.team-item:hover>img {
    filter: grayscale(0);
}

.team-title {
    font-weight: 900;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.team-content {
    margin: 0;
    padding: 0 1rem;
}

.team-description {
    margin: 1rem 0;
    font-size: 1.5rem;
    text-align: justify;
}

.team-content table {
    margin: 1rem;
    border-collapse: collapse;
    width: 100%;
}

.team-content th,
td {
    border: 1px solid black;
    padding: 0.5rem;
}

.team-content td {
    width: 50%;
}

.team-content th {
    background-color: var(--foreground-color);
    color: var(--background-color);
}

/* Tablets and under */
@media (max-width: 768px) {
    .team-list {
        grid-template-columns: 1fr;
    }

    .team-content {
        grid-template-columns: 1fr;
    }

    .team-content table {
        margin: 0;
    }

    .team-item {
        flex-direction: column;
    }

    .team-item img {
        filter: grayscale(0);
        width: 100px;
    }
    .team-description {
        text-align: left;
    }
}

/* Landing page */
.landing {
    display: flex;
    flex-direction: column;
}

.landing_row {
    display: flex;
    flex-direction: row;
    gap: 3rem;
    align-self: center;
    border: 2px var(--foreground-color) solid;
    box-shadow: 5px 5px 5px var(--foreground-color);
    background-color: var(--background-color);
    transition-duration: 0.5s;
    padding: 1rem;
    max-width: 90%;
}

.landing_row:hover {
    transition-duration: 0.5s;
    border: 2px var(--accent-color) solid;
    box-shadow: 5px 5px 5px var(--accent-color);
}

.blurb h1 {
    transition-duration: 0.5s;
    padding-bottom: 1rem;
}

.blurb h1:hover {
    transition-duration: 0.5s;
    text-shadow: var(--accent-color) 0px 0px 2px;
}

.blurb {
    max-width: 400px;
}

.splash img {
    width: 400px;
}

@media (max-width: 768px) {
    .landing_row {
        flex-direction: column;
        gap: 0.5rem;
        min-width: 90%;
    }

    .landing>*:nth-child(2) {
        flex-direction: column-reverse;
    }

    .blurb {
        max-width: 100%;
    }

    .splash {
        align-self: center;
        max-width: 90%;
    }

    .splash img {
        width: 100%;
    }
}

/* Individual episodes */
.individual-episode {
    padding: 0 2rem;
}

.individual-episode .individual-episode-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    border: 2px var(--foreground-color) solid;
    box-shadow: 5px 5px 5px var(--foreground-color);
    background-color: var(--background-color);
    transition-duration: 0.5s;
}

.individual-episode>div>div {
    padding: 1rem;
}

.individual-episode-image {
    display: flex;
    flex-direction: column;
}

.individual-episode-image img {
    align-self: start;
    width: 100%;
}

.individual-episode-body {
    margin: 0;
    grid-column-start: 2;
    grid-column-end: 4;
}

.individual-episode-description p {
    margin-bottom: 1rem;
}

.individual-episode-description p a {
    text-decoration: underline;
    font-weight: bold;
}

.individual-episode-description ul {
    list-style: disc;
    margin: 0.5rem 0;
}

.individual-episode-description li {
    margin-left: 1rem;
}

.individual-episode-description h3 {
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .individual-episode {
        padding: 0.5rem;
    }

    .individual-episode>div>div {
        padding: 0.5rem;
    }

    .individual-episode>div {
        grid-template-columns: 1fr;
    }

    .individual-episode .individual-episode-grid {
        grid-template-columns: 1fr;
    }
    #link-to-zoom {
        display: none;
    }

    .individual-episode-body {
        grid-column: auto;
    }

    /* Disable the click events for this specific link type for mobile */
    .individual-episode-image a {
        pointer-events: none;
    }
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.pagination a:hover {
    border-bottom: 2px var(--accent-color) solid;
    font-weight: bold;
}

.tag h1 {
    text-align: center;
}

.individual-episode-description ul.individual-episode-tags {
    list-style: none;
    display: flex;
    gap: 1rem;
    padding: 0.5rem 0;
}

.individual-episode-description ul.individual-episode-tags li {
    margin: 0;
}

div.social_links {
    display: flex;
    gap: 2rem;
}

blockquote {
    background: #f9f9f9;
    border-left: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: 0.5em 10px;
    quotes: "\201C""\201D""\2018""\2019";
}

blockquote p:last-child {
    font-style: italic;
}

/* Pop up full sized image
   https://codepen.io/imprakash/pen/GgNMXO */
.overlay {
    position: fixed;
    margin: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
}

.overlay:target {
    visibility: visible;
    opacity: 1;
    z-index: 100;
}

.popup {
    position: relative;
    transition: all 1s ease-in-out;
    width: 100%;
}

.popup img {
    width: 100%;
}

/* Styles for the popup close that work on bright and dark images */
.popup .close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    transition: all 200ms;

    background-color: var(--background-color);
    font-family: monospace;
    font-size: 1rem;
    text-align: center;
    font-weight: bold;
    color: var(--foreground-color);
    text-decoration: none;

    width: 1.3rem;
    border-style: solid;
    border-width: 1px;
    border-color: var(--foreground-color);
    border-radius: 10%;
}

.popup .close:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

/* SVG icons used across the site 
   https://css-tricks.com/change-color-of-svg-on-hover/
*/

.icon-feed {
    /* mask: url("/images/rss-fill.svg"); */
    background-image: url("/images/rss-fill.svg");
}

.icon-facebook {
    background-image: url("/images/facebook-circle-fill.svg");
}

.icon {
    display: inline-block;
    width: 35px;
    height: 35px;
    background-size: cover;
}

/* There's a filter calculator linked on the original post 
   https://codepen.io/sosuke/pen/Pjoqqp */
.icon:hover, .icon:focus {
    filter: invert(12%) sepia(86%) saturate(4522%) hue-rotate(356deg) brightness(103%) contrast(93%);
}

img.classificacao_indicativa {
    width: 35px;
    height: 35px;
}