/*
==================================================
TTV De Kruiskamp '81
Homepage
==================================================
*/

:root{

    --primary:#1F2F73;
    --primary-hover:#303792;

    --text:#1F2937;
    --muted:#64748B;

    --border:#E6EBF4;

    --background:#F8FAFC;

    --white:#FFFFFF;

    --radius:16px;

    --shadow:0 10px 30px rgba(31,47,115,.08);

    --transition:.25s ease;

}

/* ======================================
   ICS Agenda Homepage
====================================== */

.ics-calendar{

    font-family:'Montserrat',sans-serif;

}

/* Verberg maandkoppen */

.ics-calendar-label{

    display:none !important;

}

/* Eventkaart */

.ics-calendar-date-wrapper{

    display:flex;

    gap:24px;

    align-items:center;

    background:#FFFFFF;

    padding:24px;

    margin-bottom:20px;

    border-radius:18px;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.ics-calendar-date-wrapper:hover{

    transform:translateY(-3px);

}

/* Datumblok */

.ics-calendar-date{

    width:82px;

    min-width:82px;

    height:82px;

    margin:0 !important;

    display:flex !important;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    background:var(--primary);

    border-radius:14px;

}

/* Dagnaam weg */

.ics-calendar-date span[data-date-format="l"]{

    display:none !important;

}

/* Dagnummer */

.ics-calendar-date span[data-date-format="j"]{

    color:#FFFFFF;

    font-size:36px;

    font-weight:700;

    line-height:1;

}

/* Maand */

.ics-calendar-date span[data-date-format="F"]{

    color:#DCE4FF;

    font-size:10px;

    text-transform:uppercase;

    letter-spacing:.5px;

    margin-top:6px;

    font-weight:600;

}

/* Tijd */

.events dt{

    color:#64748B;

    font-size:14px;

    font-weight:600;

    margin-bottom:4px;

}

/* Titel */

.events .title{

    display:block;

    color:var(--text);

    font-size:20px;

    font-weight:700;

    line-height:1.3;

}

/* Omschrijving VERBERGEN */

.descloc{

    display:none !important;

}

/* Event */

.events dd{

    margin:0;

}

/* Links */

.ics-calendar a{

    color:var(--primary);

    text-decoration:none;

}

.ics-calendar a:hover{

    color:var(--primary-hover);

}

/* Mobiel */

@media(max-width:768px){

    .ics-calendar-date-wrapper{

        gap:18px;

        padding:20px;

    }

    .ics-calendar-date{

        width:72px;

        min-width:72px;

        height:72px;

    }

    .events .title{

        font-size:18px;

    }

}