/*!*********************************************************
*   Stylesheet for DonarMuseum.nl  -  © 2009-2025 Ugoku    *
*                                                          *
* You are allowed to use this file as basis for your own   *
* style, as long as you mention it was based on this file. *
*                                                          *
***********************************************************/
:root {
    --color-bg-wrapper: #eee;
    --color-bg-main: #fff;
    --color-main: hsl(223, 82%, 40%); /* hsl(114, 49%, 35%); */
    --color-coach: hsl(183, 88%, 40%);
    --color-contrast: hsl(223, 82%, 40%); /* hsl(350, 87%, 38%); */
    --color-figcaption: hsla(223, 82%, 40%, 75%);
    --color-main-lighter: hsl(223, 82%, 50%);
    --color-main-darker: hsl(223, 82%, 20%);
    --color-contrast-darker: hsl(223, 82%, 30%);
    --color-text: #000;
    --color-zebra-even: #ddd;
    --color-zebra-odd: #eee;
    --color-zebra-hover: #ccc;
    --text-size-player-photo: 0.75em;
}


/* BASIC ELEMENTS */
* {
    box-sizing: border-box;
}
html, body {
    height: 100svh;
    margin: 0;
    min-height: 100%;
    padding: 0;
}

html {
    background-color: var(--color-bg-wrapper);
    color: var(--color-text);
    font: 1em/1.5 Roboto, sans-serif;
    min-height: 100svh;
    overflow-y: scroll;
    position: relative;
}
body.menuVisible {
    overflow: hidden;
}

ol, ul {
    line-height: 125%;
    list-style: square inside;
    padding-left: 1em;
}
img {
    max-width: 100%;
    height: auto;
}
svg {
    fill: var(--color-text);
}

main, footer {
    background: var(--color-bg-main);
}
body {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 960px;
    position: relative;
    width: 100%;
}

header {
    align-items: center;
    background: var(--color-bg-wrapper);
    display: flex;
    font-weight: bold;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1;
}
#wordmark {
    font-size: 2em;
    line-height: 4rem; /* Align with menu */
    margin-left: 1rem; /* Align with menu */
}

@media (min-width: 1000px) {
    #wordmark {
        margin-left: 0;
    }
    #nav > li:last-child a {
        padding-right: 0;
    }
}
#logo {
    display: block;
    margin: 0 auto;
}

main {
    flex-grow: 1;
    padding: 1em;
}
.fullwidth {
    margin: -1em;
}
.intro {
    background: #000 url('/images/bg-home.jpg') no-repeat center;
    background-size: cover;
    padding: 2em 0;
}
.intro :is(h1, h2) {
    color: var(--color-bg-wrapper);
    text-align: center;
}
.intro h2 {
    font-weight: normal;
}

footer {
    border-top: 1px solid #AAA;
    color: #888;
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
    height: 4em;
    line-height: 2em;
    padding: 1em 2em;
}
footer a {
    color: #444;
    font-weight: normal;
}

@media screen and (max-width: 1024px) {
    footer {
        height: 4em;
        line-height: 1.5em;
    }
}
@media screen and (max-width: 540px) {
    footer {
        flex-direction: column;
        height: 6em;
        text-align: center;
    }
    footer .social {
        justify-content: center;
        margin-top: 1em;
    }
    footer .social > * {
        margin: 0 0.5em;
    }
}
@media screen and (max-width: 420px) {
    footer {
        height: 7em;
    }
    footer span {
        display: block;
    }
}

.copyright {
    flex-basis: calc(100% - 8rem);
    font-size: 0.75em;
}
@media screen and (min-width: 421px) {
    .copyright span + span {
        border-left: 1px solid currentColor;
        margin-left: 1em;
        padding-left: 1em;
    }
}

.homepageMatches {
    display: flex;
    gap: 0 1em;
    justify-content: space-between;
}
.homepageMatches > * {
    flex: 0 0 100%;
}
.homepageMatches ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 959px) {
    .homepageMatches {
        flex-direction: column;
    }
}
@media screen and (min-width: 960px) {
    .homepageMatches > * {
        flex: 0 0 50%;
    }
}

.social {
    display: flex;
    gap: 1em;
    justify-content: space-between;
}
.social .icon {
    height: 2em;
    width: 2em;
}

a:hover svg {
    fill: var(--color-main);
    transition: fill 0.15s linear;
}


.stats {
    list-style-position: outside;
}
.stats li + li {
    margin-top: 0.5em;
}


/* NAVIGATION */
nav .icon {
    fill: currentColor;
    height: 0.75em;
    margin-left: 0.5em;
    transition: transform 0.2s linear;
    vertical-align: middle;
    width: 0.75em;
}
#nav, #nav ul { /* all lists */
    padding: 0;
    list-style: none;
    line-height: 1;
}
#nav {
    margin: 0;
}
#nav a {
    display: block;
}
#nav a:hover {
    text-decoration: none;
}

#nav li { /* all list items */
    transition: all 0.2s linear;
}
#nav li:hover {
    color: var(--color-main-darker);
}
#nav li:hover ul { /* lists nested under hovered list items */
    transform: scaleY(1);
}
#nav li:hover .icon {
    transform: rotate(180deg);
}

#nav li ul { /* second-level lists */
    text-align: left;
    z-index: 5;
}
#nav li ul li {
    display: block;
    line-height: 1.25;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}
#nav li ul li :hover {
    background-color: var(--color-main-lighter);
    color: var(--color-bg-wrapper);
}
#nav li ul li:last-child {
    border: none;
}
#nav > li a { /* first-level lists */
    padding: 1em;
}


.cta {
    background: var(--color-contrast);
    border: 8px solid var(--color-bg-wrapper);
    box-shadow: 0 0 0 8px var(--color-contrast);
    color: var(--color-bg-wrapper);
    display: block;
    font-size: 1.25em;
    line-height: 1.5;
    margin: 2em 8px;
    padding: 1em;
    text-align: center;
    text-transform: uppercase;
    transition: background 0.2s linear, box-shadow 0.2s linear;
}
.cta h2 {
    color: var(--color-bg-wrapper);
    margin: 0;
}

.cta:hover {
    background: var(--color-contrast-darker);
    box-shadow: 0 0 0 1em var(--color-contrast-darker);
    color: var(--color-bg-wrapper);
    text-decoration: none;
}
@media (max-width: 400px) {
    .cta {
        font-size: 1em;
    }
}

figure {
    margin: 0;
    padding: 0;
    position: relative;
}
figcaption {
    background: var(--color-figcaption);
    bottom: 0;
    color: #FFF;
    left: 0;
    min-height: 3em; /* Always have 2 rows * 1.5 line-height */
    padding: 0 0.5em;
    position: absolute;
    text-wrap: balance;
    width: 100%;
}
figcaption a {
    color: #FFF;
}


.programs, .papers, #bdaymatchlist {
    list-style-type: square;
}
.birthdays {
    display: flex;
    list-style: none;
    margin: 0;
    overflow-x: scroll;
    padding: 0;
    scroll-snap-type: x mandatory;
}
@media screen and (min-width: 72em) {
    .birthdays {
        justify-content: space-between;
        overflow-x: auto;
    }
}
.birthdays a {
    display: block;
    text-align: center;
}
.birthdays li {
    flex: 0 0 50%;
    padding: 0.25em;
    scroll-snap-align: start;
}
@media screen and (min-width: 32em) {
    .birthdays li {
        flex: 0 0 calc(100% / 3);
    }
}
@media screen and (min-width: 38em) {
    .birthdays li {
        flex: 0 0 25%;
    }
}
@media screen and (min-width: 48em) {
    .birthdays li {
        flex: 0 0 20%;
    }
}
@media screen and (min-width: 56em) {
    .birthdays li {
        flex: 0 0 calc(100% / 6);
    }
}

.birthdays img {
    aspect-ratio: 1 / 1;
    border: 4px solid var(--color-main);
    border-radius: 50%;
    display: block;
    margin: 0 auto 0.5em;
    object-fit: cover;
    object-position: top;
}

#letters {
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
    text-wrap: balance; /* This looks pretty good because we currently (2023) have 24 letters, which divides nicely into 2, 4, 6, 8, and 12 */
}
#letters a {
    background: var(--color-main);
    border-radius: 50%;
    color: var(--color-bg-main);
    display: block;
    line-height: 30px;
    width: 30px;
    transition: all 0.1s linear;
}
#letters a:hover {
    background: var(--color-main-darker);
    text-decoration: none;
}
#letters li {
    display: inline-block;
    margin: 0 0.25em 0.5em;
    text-align: center;
}

/* FORMS */
p, form {
    padding: 0.5em 0;
    margin: 0;
}
form {
    text-align: left;
}
input, textarea, button, select {
    border: 1px solid var(--color-main);
    padding: 2px;
    background-color: #FFF;
    color: #000;
    font: inherit;
}
@media (max-width: 800px) {
    input, textarea, button, select {
        margin-bottom: 0.5em;
        max-width: 100%;
    }
}
input:focus, textarea:focus {
    border: 1px solid var(--color-main);
}

.paperAuthor {
    color: #909090;
    font-size: 0.75em;
}

/* OTHER STUFF */
dd {
    margin-left: 1em;
}

a {
    color: var(--color-main);
    text-decoration: none;
    transition: color 0.2s linear;
}
a.coach {
    color: var(--color-coach);
}
a:hover {
    color : var(--color-main-darker);
    text-decoration: underline;
}

hr {
    color: #ccc;
    background-color: #ccc;
    height: 2px;
    display: block;
    border: 0;
    clear: both;
}

.teamphoto, .shirtphoto, .newspaper, .photo {
    display: block;
    margin: 10px auto;
}
.teamphoto {
    max-width: min(800px, 100%);
    height: auto;
}
.shirtphoto {
    max-width: 400px;
    max-height: 400px;
}
.newspaper {
    border: 1px solid var(--color-main);
}
.newspaper:hover {
    border: 1px solid var(--color-main-darker);
}

img.personphoto {
    margin: 0;
}

.playerGrid {
    display: grid;
    gap: 0 1em;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.playerPhoto figure {
    max-width: min(300px, 100%);
    text-align: center;
}
.playerPhoto figure:has(figcaption) {
    display: inline-grid;
    grid-template-rows: 1fr calc(3 * var(--text-size-player-photo));
}
.playerPhoto figcaption {
    font-size: var(--text-size-player-photo);
    padding: 0.5em;
}
@media (max-width: 600px) {
    .playerPhoto {
        grid-row: 1;
    }
}
@media (min-width: 601px) {
    .playerPhoto figure {
        float: right;
        text-align: right;
    }
}

#teamcopy {
    font-size: .75em;
    width: 800px;
    margin: 0 auto 10px;
    text-align: right;
    line-height: 100%;
}

/********************************************************/

h1, h2, h3 {
    color: var(--color-main);
    font-weight: bold;
    margin: 1em 0 0.25em;
    padding: 0;
    text-wrap: balance;
}
h1 {
    clear: both;
    text-align: center;
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
    text-align: center;
}
h2.letter {
    background: #FFF;
    border-radius: 50%;
    line-height: 30px;
    font-size: 1.25em;
    text-align: center;
    width: 30px;
}
h2.storyhead {
    background: var(--color-main);
    color: #FFF;
    margin: 0 auto;
    padding: 0 0.5em;
    width: 92%;
}

.matchhead, h2.inphoto, h2.photolist, h2.monthdivide {
    border-top: 1px solid var(--color-bg-wrapper);
    color: #000;
    margin: 0.5em auto;
    padding-top: 0.5em;
}
h2#navhead, h2.authorhead {
    background: #FFF;
    color: #000;
    margin: 1em auto 0.5em;
    text-align: center;
    font-size: 1.25em;
    height: 1.5em;
    clear: both;
}

a img {
    border: 0; /* TODO: check if this is still needed. Wasn't this an IE fix? */
}

.sponsorname {
    font-weight: bold;
}

table {
    border-collapse: collapse;
    margin: 1em auto;
}
tr {
    background: var(--color-zebra-odd);
}
tr:nth-child(even) {
    background: var(--color-zebra-even);
}
tr:hover {
    background-color: var(--color-zebra-hover);
}

td {
    padding: 0.25em 0.5em;
    transition: all 0.1s;
    text-align: left;
}
th {
    background-color: var(--color-main);
    color: #FFF;
    text-align: center;
    padding: 2px 5px;
}

table.playerlist, table.playerlist th, table.playerlist td {
    border: 1px solid #FFF;
    border-collapse: collapse;
    text-align: left;
}

td.nation {
    text-align: center;
}
.playerlist {
    column-count: 3;
}

#endpos {
    padding: 0;
    text-align: center;
    font-weight: bold;
}
.clothingSponsor {
    padding: 0;
    text-align: center;
}


#yearlinks {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}
#yearlinks a {
    color: #909090;
    transition: color 0.1s linear;
}
#yearlinks li {
    display: inline;
    margin: 0.5em 0.75em;
    vertical-align: middle;
}
#yearlinks li.active {
    color: var(--color-main);
    font-weight: bold;
}
#yearlinks li.prevnext {
    font-weight: bold;
    font-size: 2em;
    margin: 0;
    padding: 0 0.75em;
    white-space: nowrap;
}
#yearlinks a:hover, #yearlinks li.prevnext a:hover {
    color: #000;
    text-decoration: none;
}

.wongame {
    color: #009000;
}
.lostgame {
    color: #c00000;
}
td.gamescore {
    text-align: center;
}


#plist {
    margin: 0 auto;
    position: relative;
}
#photowrap {
    background-position: center top;
    background-repeat: no-repeat;
    margin: 0 auto;
    max-width: 800px;
    position: relative;
}
.ptag, .ptag2 {
    position: absolute !important;
    background: rgba(255,255,255, 0.5);
    color: #000;
    border: 2px solid var(--color-main);
    font-weight: bold;
    font-size: 0.75em;
}
.ptag {
    visibility: hidden;
    z-index: 2;
    line-height: 110%;
}
.ptag :hover {
    visibility: visible;
}

#arrowprev, #arrownext {
    font-size: 2.5em;
    position: absolute;
    top: 50%;
}
:is(#arrowprev, #arrownext) svg {
    fill: var(--color-main);
    fill-opacity: 0.5;
    transition: fill-opacity 0.1s linear;
}
:is(#arrowprev, #arrownext):hover svg {
    fill-opacity: 1;
}
#arrowprev {
    left: -1.5em;
}
#arrownext {
    right: -1.5em;
}

div.blank {
    width: 1em;
    display: inline-block;
}

::-moz-selection {
    background: var(--color-main);
    color: #FFF;
}
::selection {
    background: var(--color-main);
    color: #FFF;
}

.badtext {
    color: #F00;
    font-weight: bold;
}
.goodtext {
    color: #009000;
    font-weight: bold;
}

.stathead {
    font-weight: bold;
    text-decoration: underline;
}

hr.hradmin {
    background-color: var(--color-main);
    border: 0;
    clear: both;
    color: var(--color-main);
    display: block;
    height: 2px;
}

span.clubname {
    font-weight: bold;
}
div#seasonnav {
    text-align: center;
}

span.tooltip {
    border-bottom: 1px dotted white;
}

input[type=submit], button {
    border-radius: 2px;
    padding: 2px 8px;
}

#history_en {
    background: url('/images/flags/gb.svg') no-repeat left center;
    background-size: 1.5em 1em;
    padding-left: 2em;
}
#history_nl {
    background: url('/images/flags/nl.svg') no-repeat left center;
    background-size: 1.5em 1em;
    padding-left: 2em;
}

img.nationality {
    height: 0.75em;
    min-width: 1em; /* Fixes layout on mobile */
    width: auto;
}

#contactform :is(input[type=text], input[type=email], textarea) {
    max-width: min(40em, 100%);
}

.icon {
    height: 1em;
    vertical-align: text-bottom;
    width: 1em;
}
.icon-180 {
    transform: rotate(180deg);
}
.icon-large {
    height: 2em;
    width: 2em;
}
.icon-cake {
    fill: var(--color-main);
}
.birthdays .icon-cake {
    fill: var(--color-contrast);
}

.playerlist .icon {
    float: right;
    margin-top: 0.25em;
}
.nr1 {
    fill: #e6bb00;
}
.nr2 {
    fill: #aaa;
}


.error {
    color: red;
    font-weight: bold;
}
.message {
    color: darkgreen;
    font-weight: bold;
}

/* GALLERIES */
.gallery {
    display: grid;
    font-size: 0.75em;
    gap: 1em;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    grid-template-rows: repeat(auto-fill, 175px);
    line-height: 1.5;
}
.gallery, .gallery li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.gallery a {
    display: block;
}
.gallery a:hover {
    text-decoration: none;
}

.gallery figure {
    height: 175px;
}

.gallery li {
    background: var(--color-bg-gallery, #fff);
    overflow: hidden;
    text-align: center;
    transition: background 0.15s linear;
}
.gallery li:hover {
    --color-bg-gallery: #ccc;
}
.champion {
    --color-bg-gallery: #ffd959;
}
.champion:hover {
    --color-bg-gallery: #ccad47;
}
.cupwin, .supercupwin {
    --color-bg-gallery: #ccc;
}
.cupwin:hover, .supercupwin:hover {
    --color-bg-gallery: #a3a3a3;
}


.seasons {
    display: flex;
    justify-content: space-between;
    padding: 1em 0;
}
.seasons div {
    flex: 1 1 calc(100% - 150px);
}
.seasons h2 {
    font-size: 1.25em;
    padding: 0;
    text-transform: none;
}
.seasons p {
    margin: 0;
    padding: 0.5em 0;
}
.seasons img {
    flex: 1 1 150px;
    height: 150px;
    width: 150px;
}

@media screen and (max-width: 480px) {
    .seasons {
        flex-direction: column;
    }
    .seasons div {
        flex: 1 0 100%;
        order: 1;
    }
    .seasons img {
        flex: 1 0 100%;
    }
}
.seasons ol {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.seasons li {
    flex: 0 1 33%; /* Don't grow to 50% if the last row has 2 items */
    line-height: 1.6;
}
@media screen and (max-width: 640px) {
    .seasons li {
        flex: 0 1 50%;
    }
}

.seasons + .seasons {
    border-top: 2px solid #ccc;
}
.noResults {
    color: #aaa;
}

#hoverTitleText {
    background: var(--color-bg-wrapper);
    border: 1px solid var(--color-main);
    border-radius: 0.75em;
    color: var(--color-main);
    font-size: 0.75em;
    padding: 0.25em 1em;
    position: absolute;
}


/*** MEDIA QUERIES ***/

@media screen and (max-width: 960px) {
    h1, h2 {
        width: 100%;
    }
    #yearlinks {
        width: 100%;
    }
/*	#yearlinks li {
        display: block;
        padding: 10px;
    }*/
    #yearlinks li.prevnext {
        margin: 0.5rem;
    }
    #arrowprev {
        left: 0.5em;
    }
    #arrownext {
        right: 0.5em;
    }
    #arrowprev, #arrownext {
        fill: #FFF;
        fill-opacity: 1;
    }
    :is(#arrowprev, #arrownext):hover svg {
        fill: var(--color-main);
    }
}

#navToggle {
    display: none;
}
@media screen and (min-width: 801px) {
    label[for="navToggle"] {
        display: none;
    }

    #nav li {
        display: inline-block;
    }
    #nav li ul {
        background-color: var(--color-bg-wrapper);
        position: absolute;
        transform: scaleY(0);
        transform-origin: 0 0;
        transition: transform 0.15s linear;
        min-width: 200px;
    }
    #nav li ul a {
        color: var(--color-main);
    }
    #nav li ul li {
        border-bottom: 1px solid var(--color-main);
        min-width: 200px;
    }
    #nav li:hover ul {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }
}
@media screen and (max-width: 840px) {
    #plist {
        display: none;
    }
}
@media screen and (max-width: 800px) {
    label[for="navToggle"] {
        font-size: 2em;
        margin-right: 1rem;
        z-index: 2;
    }
    nav {
        display: none;
    }
    #navToggle:checked + nav {
        background: rgba(255, 255, 255, 0.95);
        display: block;
        height: calc(100dvh - 4em);
        left: 0;
        overflow-y: scroll;
        position: absolute;
        top: 4em;
        width: 100%;
        z-index: 1;
    }
    #nav {
        display: flex;
        flex-direction: column;
        font-size: 1.75em;
    }
    #nav > li a {
        padding: 0.5em;
    }
    #nav li ul li {
        padding-left: 2em;
    }
    #nav .icon {
        display: none;
    }

    .playerlist {
        column-count: 2;
    }
    .matchhead {
        padding: 0;
        width: 90%;
    }
    table.playerlist {
        width: 90%;
    }
    #teamcopy {
        width: 100%;
    }
    #photowrap {
        background-size: contain;
        max-width: 100%;
        max-height: 600px;
    }
}

@media screen and (max-width: 640px) {
    #nav {
        font-size: 1.5em;
        padding: 0.5em;
    }
    .hideSmall {
        display: none;
    }
    #photowrap {
        max-height: 400px;
    }
}

@media screen and (max-width: 480px) {
    .playerlist {
        column-count: 1;
    }
    #photowrap {
        max-height: 300px;
    }
}