:root {
    --basiskleur: #219c87;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
}
h1 {
    text-align: center;
}
.container-keuze-locatie {
    max-width: 840px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6,1fr);
    grid-gap: 0 5px;
}
.keuze-locatie {
    display: none;
    margin-left: 2em;
    cursor: pointer;
}
.voluit {
    display: none;
}
.keuze-locatie + label {
    display: block;
    text-align: center;
    cursor: pointer;
    color: #ffffff;
    background-color: var(--basiskleur);
    border-radius: 9px 9px 0 0;
    border: 2px solid var(--basiskleur);
    border-bottom: 0;
    transition: color .8s linear, background-color .8s linear;
    padding: .5em .2em 0;
}
.keuze-locatie:hover + label {
    color: var(--basiskleur);
    background-color: #ffffff;
}
.keuze-locatie:checked + label {
    color: var(--basiskleur);
    background-color: #ffffff;
    z-index: 3;
    transform: translateY(2px);
}
.container-parochieagenda {
    max-width: 840px;
    margin: 0 auto;
    border: 2px solid var(--basiskleur);
}

.container-parochieagenda h2 {
    text-align: center;
    color: var(--basiskleur);
    margin: 0;
    padding: .9em;
}
.agenda-item {
    display: grid;
    grid-template-columns: 4em  1fr;
    grid-template-areas: 
    "dag dag"
    "datum  datum"
    "tijd locatie"
    "tijd voorganger"
    "tijd info";
}
.agenda-dag   { grid-area: dag;
}
.agenda-datum { grid-area: datum;
}
.agenda-tijd  { grid-area: tijd;
}
.agenda-loc   { grid-area: locatie;
}
.agenda-vrg   { grid-area: voorganger;
}
.agenda-info {  grid-area: info;
}
.agenda-dag {
    text-align: center;
    font-weight: 900;
    color: var(--basiskleur);
    padding-top: .5em;
    border-top: 2px solid var(--basiskleur);
}
.agenda-datum {
    text-align: center;
    font-weight: 900;
    color: var(--basiskleur);
    padding-bottom: .5em;
}
.agenda-tijd {
    text-align: right;
    padding-right: 1em;
}
.geef-uur-weer {
    display: none;
}
.agenda-loc {
    font-weight: 700;
    color: var(--basiskleur);
}


/* een andere layout bij de locaties  */


.container-parochieagenda.locatie .agenda-item {
    grid-template-columns: 4em  1fr;
    grid-template-areas: 
    "dag dag"
    "datum  datum"
    "tijd voorganger"
    "tijd info";
}
/* bij H.Geest-Urbanus wel de locatie weergeven  */
.container-parochieagenda.locatie.hgu .agenda-item {
    grid-template-columns: 4em  1fr;
    grid-template-areas: 
    "dag dag"
    "datum  datum"
    "tijd locatie"
    "tijd voorganger"
    "tijd info";
}

.locatie .agenda-loc {
    display: none;
}
/* maar bij de H.Geest-Urbanus juist weer wel  */
.locatie.hgu .agenda-loc {
    display: block;
    color: var(--basiskleur);
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: -.5em;
}
/* 
Breakpoints parochieagenda

de eigen applicatie:
titels bij 700px
kolommen bij 560px

Deze moeten dan in het thema van de parochie:
aside komt bij 910 pixels

dus kolommen bij 560px
titels bij 700px


als aside bij 910 px komt is de entry-content 552px
de kolommen moeten dan weer weg en titels versmalt

de kolommen komen dan opnieuw bij een viewport van 923px
en de titels bij een viewport van 1142px 
*/

/* 
BREAKPOINTS
560 - 910: van 2 koloms naar 3 koloms
818 - 910: titels volledig
923      : 3 koloms
1142     : titels volledig
 */

/* andere layout voor bredere vensters */
@media screen and (min-width: 560px) and (max-width: 910px) {
    .agenda-item {
        grid-template-columns: 8em 6em 1fr 2.5fr;
        grid-template-areas: 
        "dag dag dag dag"
        "datum tijd locatie voorganger"
        "datum tijd locatie info"
    }
    
    .agenda-dag {
        font-weight: 700;
        padding-bottom: .2em;
    }
    .agenda-dag.nwe-week {
        color: #ffffff;
        background-color: var(--basiskleur);
    }
    .agenda-datum .dag-van-de-week {
        display: block;
    }
    .agenda-tijd {
        border-bottom: 1px solid var(--basiskleur);
        padding: .5em 1em .5em 0;
    }
    .agenda-datum{
        text-align: right;
        padding: .5em 1em .5em 0;
    }
    .geef-uur-weer {
        display: inline;
    }
    .agenda-loc {
        font-weight: normal;
        color: inherit;
        border-bottom: 1px solid var(--basiskleur);
        padding: .5em ;
    }
    .agenda-vrg {    
        padding: .5em 2em 0 .5em ;
    }
    .agenda-info {
        padding: 0 2em .5em .5em;
        border-bottom: 1px solid var(--basiskleur);
    }

    /* een andere layout bij de locaties  */
    .container-parochieagenda.locatie .agenda-dag {
        color: var(--basiskleur);
        background-color: white;
        border-top: 2px solid var(--basiskleur);
    }
    .container-parochieagenda.locatie .agenda-item {
        grid-template-columns: 8em 6em 1fr;
        grid-template-areas: 
        "dag dag  dag"
        "datum tijd  voorganger"
        "datum tijd  info"
    }
    .container-parochieagenda.locatie.hgu .agenda-item {
        grid-template-columns: 8em 6em 1fr;
        grid-template-areas: 
        "dag dag  dag"
        "datum tijd  locatie"
        "datum tijd  voorganger"
        "datum tijd  info"
    }
    .container-parochieagenda.locatie .agenda-loc {
        display: none;
    }
    /* maar bij de H.Geest-Urbanus juist weer wel  */
    .locatie.hgu .agenda-loc {
        display: block;
        color: var(--basiskleur);
        border-bottom: 0;
        padding-bottom: 0;
        margin-bottom: -.5em;
    }
}

/* de tabladen kunnen nu voluit  */
@media screen and (min-width: 818px) and (max-width: 910px) {
    .voluit {
        display: inline;
    }
}

/* bredere layout voor bredere vensters binnen thema  */
@media screen and (min-width: 923px) {
    .agenda-item {
        grid-template-columns: 8em 6em 1fr 2.5fr;
        grid-template-areas: 
        "dag dag dag dag"
        "datum tijd locatie voorganger"
        "datum tijd locatie info"
    }
    
    .agenda-dag {
        font-weight: 700;
        padding-bottom: .2em;
    }
    .agenda-dag.agenda-dag.nwe-week {
        color: #ffffff;
        background-color: var(--basiskleur);
    }
    .agenda-datum .dag-van-de-week {
        display: block;
    }
    .agenda-tijd {
        border-bottom: 1px solid var(--basiskleur);
        padding: .5em 1em .5em 0;
    }
    .agenda-datum{
        text-align: right;
        padding: .5em 1em .5em 0;
    }
    .geef-uur-weer {
        display: inline;
    }
    .agenda-loc {
        font-weight: normal;
        color: inherit;
        border-bottom: 1px solid var(--basiskleur);
        padding: .5em ;
    }
    .agenda-vrg {    
        padding: .5em 2em 0 .5em ;
    }
    .agenda-info {
        padding: 0 2em .5em .5em;
        border-bottom: 1px solid var(--basiskleur);
    }

    /* een andere layout bij de locaties  */
    .container-parochieagenda.locatie .agenda-dag {
        color: var(--basiskleur);
        background-color: white;
        border-top: 2px solid var(--basiskleur);
    }
    .container-parochieagenda.locatie .agenda-item {
        grid-template-columns: 8em 6em 1fr;
        grid-template-areas: 
        "dag dag  dag"
        "datum tijd  voorganger"
        "datum tijd  info"
    }
    .container-parochieagenda.locatie.hgu .agenda-item {
        grid-template-columns: 8em 6em 1fr;
        grid-template-areas: 
        "dag dag  dag"
        "datum tijd  locatie"
        "datum tijd  voorganger"
        "datum tijd  info"
    }
    .container-parochieagenda.locatie .agenda-loc {
        display: none;
    }
    /* maar bij de H.Geest-Urbanus juist weer wel  */
    .locatie.hgu .agenda-loc {
        display: block;
        color: var(--basiskleur);
        border-bottom: 0;
        padding-bottom: 0;
        margin-bottom: -.5em;
    }
}

/* de tabladen kunnen nu voluit  binnen het thema */
@media screen and (min-width: 1142px) {
    .voluit {
        display: inline;
    }
}