:root, :host {
    --fa-style-family-classic: 'Font Awesome 6 Free';
    --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free';
}

html, body {
    overflow-x: hidden;
}

body {
    background-color: var(--page-bg-color);
    color: var(--page-fg-color);
    /*noinspection CssNoGenericFontName*/
    font-family: var(--font-family-sans);
    font-size: 100%;
    max-width: 860px;
    padding: 0 5px;
    margin: auto;
}

h1 { font-size: 1.6rem; margin: 1.6rem 0; }
h2 { font-size: 1.4rem; margin-top: 2rem; }
h3 { font-size: 1.15rem; }

a { color: var(--a-fg-color); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }

/* A visual clue for clicky 'a' and non-clicky 'span'. */
[data-place]::before {
    content: "🏓";
    font-size: 0.9em;
    margin-right: 0.25em;
    font-family: system-ui, -apple-system, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI", Roboto, "Noto Color Emoji", sans-serif;
}

a[href^="https://www.google.com/maps/dir/"]::before {
    content: "\f3c5";
    font: var(--fa-font-solid);
    -webkit-font-smoothing: antialiased;

    font-size: 0.7em;
    opacity: 0.8;
    margin-right: 0.2em;
    vertical-align: middle;
}

ul#toc, ul#toc ul { list-style-type: none; }
ul#toc { padding: 0; }
ul#toc ul { padding-inline-start: 2ch; }

div#newsContainer {
    max-height: 300px;
    overflow-y: auto;
    padding: 6px;
    border-radius: 0.5rem;
    border: 1px solid var(--table-border-color);
}

div#newsContainer > div {
    font-size: 0.8rem;
    font-style: italic;
    color: #888888;
    margin-top: 20px;
    margin-bottom: 0.3rem;
}
div#newsContainer div:nth-child(1) {
    margin-top: 0;
}

div#moreNews {
    font-size: 0.8rem;
    font-style: italic;
    color: #888888;
    margin-top: 20px;
    line-height: 1.5;
}

div.maps div { display: inline-block; vertical-align: top }
div.maps div:nth-child(1) { margin-right: 50px }
div.maps img { margin-top: 10px; border-radius: 0.5rem; }

table {
    background-color: var(--table-bg-color);
    border-collapse: collapse;
    word-break: break-word;
    border: 1px solid var(--table-border-color);
}

tr {
    border-bottom: 1px solid var(--table-border-color);
}

th {
    background-color: var(--th-bg-color);
}

th, td {
    padding: 10px;
    border-width: 0;
}

/* START rounding borders of tables 'Clubs' and 'Courts'. */
table#t_clubs { border-collapse: separate; border-spacing: 0; border-radius: 0.5rem; }
table#t_clubs th:first-of-type { border-top-left-radius: 0.5rem; }
table#t_clubs th:last-of-type { border-top-right-radius: 0.5rem; }
table#t_clubs th, td { border-bottom: 1px solid var(--table-border-color); }
table#t_clubs tr:last-of-type td { border-bottom: 0; }

table#t_courts { border-collapse: separate; border-spacing: 0; border-radius: 0.5rem; }
table#t_courts th:first-of-type { border-top-left-radius: 0.5rem; }
table#t_courts th:last-of-type { border-top-right-radius: 0.5rem; }
table#t_courts th, td { border-bottom: 1px solid var(--table-border-color); }
table#t_courts tr:last-of-type td { border-bottom: 0; }
/* END rounding borders of tables 'Clubs' and 'Courts'. */

table#t_courts td:last-of-type { text-align:center; }

.warn {
    font-size: small;
    color: red;
}

#schedule {
    margin-block-end: 0.3rem
}

#scheduleContainer > ul > li {
    padding-bottom: 0.2em;
}

#scheduleContainer > ul {
    padding-left: 1em;
}

i.tournament.ranking {
    font-size: 0.85em;
    vertical-align: middle;
    color: var(--ranking-tournament-color);
}

i.tournament.non-ranking {
    font-size: 0.85em;
    vertical-align: middle;
    opacity: var( --non-ranking-tournament-opacity);
}

i.fa-cart-shopping {
    font-size: 0.85em;
    vertical-align: middle;
}

#lang-switcher {
    float: right;
    padding-right: 10px;
}

div#copyright {
    margin: 2.25rem 0 1.25rem 0;
}

#backToTop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: calc(50% - 430px);
    z-index: 99;
    font-size: 20px;
    border: none;
    border-radius: 50%;
    outline: none;
    background-color: #aaa;
    color: #111;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

#backToTop:hover {
    background-color: #888;
}

@media (max-width: 900px) { /* Fallback for narrow screens */
    #backToTop {
        right: 20px;
    }
}

div#placeInfoOverlay {
    display:none;
    position:absolute;
    z-index:10000;
    border: 1px solid var(--table-border-color);
    box-shadow:0 4px 12px var(--box-shadow-color);
}

#placeInfoOverlay table,
#placeInfoOverlay td,
#placeInfoOverlay th {
    background-color: var(--table-bg-color);
    opacity: 1;
}

#placeInfoOverlay tr:nth-child(1) td { font-weight: bold; }