/*
 * This file is based on the calendity template.
 * Copyright 2022-2023 Lucas Hinderberger
 * SPDX-License-Identifier: Apache-2.0
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

 /* === Top-Level Layout === */

html, body {
    height: 100%;
    padding: 0;
}

body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

main, footer {
    width: 100%;
    max-width: 1250px;
    margin: auto;
    padding: 0 20px;
    box-sizing: border-box;
}

main {
    flex: 1;
    margin-bottom: 45px;
}

footer {
    font-size: 10pt;
    text-align: center;
}

footer, footer a, footer a:visited {
    color: #333;
}

footer .fine-print {
    font-size: 8pt;
}

footer nav {
    margin-bottom: 25px;
}

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

footer nav li {
    display: inline-block;
    margin: 0 10px;
    padding: 0;
}


/* === Text === */

h2 {
    margin-top: 50px;
}

.original-timezone-hint {
    font-size: 9pt;
    display: none; /* the hint is automatically activated by JavaScript when localizing time values */
}


/* === Cards === */

.event-card, .year-selector li {
    border: 1px solid #aaa;
    border-radius: 20px;
    flex-wrap: wrap;
}

.card-body {
    padding: 20px;
}

.event-card {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
}

.event-card .card-thumbnail {
    height: 200px;
    border-radius: 15px 0 0 15px;
}

.event-card .card-body {
    flex: 1;
    font-size: 11pt;
}

.event-card .card-body .dates {
    font-size: 9pt;
}

.event-card .card-body > h3 {
    font-size: 14pt;
    margin-top: 0;
    margin-bottom: 0;
}

.featured-events-container .event-card {
    display: block;
    max-width: 400px;
}

.featured-events-container .event-card .card-thumbnail {
    width: 100%;
    height: auto;
    border-radius: 15px 15px 0 0;
}

.featured-events-container .event-card .card-body {
    font-size: 12pt;
}

.featured-events-container .event-card .card-body > h3 {
    font-size: 16pt;
}


/* === Featured Events === */

.featured-events-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}

.upcoming-events-container {
    margin-bottom: 50px;
}


/* === Upcoming Events === */

.upcoming-last-modified {
    font-size: 10pt;
    margin-bottom: 20px;
}


/* === Event Details === */

.event-details-container {
    display: flex;
    flex-direction: row-reverse;
    gap: 20px;
    margin: 50px 0;
}

.event-details-container aside {
    max-width: 350px;
}

.event-details-container .thumbnail {
    max-width: 100%;
    margin-bottom: 50px;
}

.event-details-container article {
    flex: 1;
}

.event-details-container article h2 {
    margin-top: 0;
    margin-bottom: 0;
}

.event-details-container article .last-modified {
    font-size: 8pt;
    margin-bottom: 40px;
}


/* === Year Selection === */

.year-selector {
    list-style-type: none;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
}

.year-selector li {
    margin: 0;
    padding: 0;

    display: flex;
    width: 200px;
    height: 200px;
    text-align: center;
    align-items:center;
    justify-content:center;
}

.year-selector a {
    color: #333;
    text-decoration: none;
    font-size: 50pt;
    font-weight: bold;
}

.year-selector a:hover li {
    background: #d3f1ff;
}


/* === Event Index === */

.event-index-table-wrapper {
    overflow-x: auto;
}

.event-index-table {
    width: 100%;
    border: 1px solid #aaa;
    border-collapse: collapse;
}

.event-index-table td, .event-index-table th {
    padding: 15px;
    border: 1px solid #aaa;
}

.event-index-table th {
    background: #eee;
    color: #000;
}


/* === Table modifiers === */

.col-expand {
    width: 100%;
}

.col-nowrap {
    white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
    body {
        background: #111;
        color: #fff;
    }

    body a {
        color: lightblue;
    }

    body a:visited {
        color: lightpink;
    }

    footer, footer a, footer a:visited {
        color: #ddd;
    }

    header a {
        color: #fff !important;
    }

    .icon {
        filter: invert()
    }
}

@media (max-width: 1000px) {
    .event-details-container {
        flex-direction: column;
        align-items: center;
    }
}