:root{
--sec-main-color:#2d88dd;
--sec-event-color:#006341;
--sec-form-color:#2d88dd;
--sec-font:Arial, sans-serif;
}

/*
To change the colors:

--sec-main-color = Previous / Next buttons and weekday headers
--sec-event-color = Event buttons inside the calendar
--sec-form-color = Submit button on the Add Event form
*/

.sec-event-form{
max-width:1000px;
margin:30px auto;
display:flex;
flex-direction:column;
gap:20px;
}
.sec-event-form input,
.sec-event-form textarea{
padding:22px;
font-size:18px;
font-family:var(--sec-font);
border-radius:18px;
border:2px solid #d7d7d7;
background:#f2f2f2;
width:100%;
box-sizing:border-box;
}
.sec-event-form textarea{min-height:140px;}
.sec-event-form button{
background:var(--sec-form-color);
color:#fff;
border:none;
padding:22px;
border-radius:18px;
font-size:22px;
cursor:pointer;
}
.sec-success{
background:#e4f5e7;
padding:16px;
border-radius:12px;
margin-bottom:20px;
}

.sec-calendar-wrapper{
max-width:1200px;
margin:40px auto;
overflow:visible;
}
.sec-calendar-nav{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:24px;
}
.sec-calendar-nav h2{
margin:0;
font-size:34px;
font-weight:700;
color:#fff;
}
.sec-nav-btn{
background:var(--sec-main-color);
color:#fff;
text-decoration:none;
padding:14px 22px;
border-radius:12px;
font-weight:600;
}
.sec-calendar-grid{
display:grid;
grid-template-columns:repeat(7,1fr);
column-gap:14px;
row-gap:14px;
}
.sec-header{
margin-bottom:14px;
}
.sec-header div{
background:var(--sec-main-color);
color:#fff;
padding:18px 10px;
text-align:center;
border-radius:12px;
font-size:16px;
font-weight:700;
}
.sec-day{
background:#f3f3f3;
border-radius:14px;
min-height:140px;
padding:12px;
position:relative;
overflow:visible;
}
.sec-day.empty{background:transparent;}
.sec-date{
font-size:18px;
font-family:var(--sec-font);
font-weight:700;
color:#4b4b6b;
margin-bottom:8px;
}
.sec-event-hover{
position:relative;
margin-bottom:8px;
}
.sec-event-title{
background:var(--sec-event-color);
color:#fff;
padding:8px 10px;
border-radius:8px;
font-size:13px;
cursor:pointer;
}
.sec-event-popup{
display:none;
position:absolute;
left:0;
top:110%;
width:280px;
background:#fff;
border-radius:14px;
padding:16px;
box-shadow:0 12px 30px rgba(0,0,0,.2);
z-index:9999;
color:#333;
}
.sec-event-hover:hover .sec-event-popup{
display:block;
}
.sec-event-popup h4{
margin:0 0 10px;
}
.sec-event-popup p{
margin:0 0 10px;
font-size:14px;
line-height:1.4;
}
.sec-event-popup a{
color:#2d88dd;
text-decoration:none;
font-weight:700;
}

@media(max-width:768px){
.sec-calendar-nav{
flex-direction:column;
gap:15px;
}
.sec-calendar-grid{
grid-template-columns:1fr;
}
.sec-header{display:none;}
.sec-event-popup{
display:block;
position:relative;
width:100%;
top:10px;
}
}

.sec-calendar-wrapper, .sec-calendar-wrapper *,.sec-event-form,.sec-event-form *{font-family:var(--sec-font);}

/* Mobile responsive improvements */
@media (max-width: 768px) {

    .sec-calendar-header{
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .sec-calendar-header h2{
        font-size: 28px;
        margin: 10px 0;
    }

    .sec-prev-btn,
    .sec-next-btn{
        width: 100%;
        max-width: 220px;
        margin: 0 auto;
    }

    .sec-weekdays,
    .sec-calendar-grid{
        gap: 8px;
    }

    .sec-weekdays{
        display:none;
    }

    .sec-day{
        min-height: 90px;
        padding: 8px;
        border-radius: 12px;
    }

    .sec-day-number{
        font-size: 18px;
    }

    .sec-event-button{
        font-size: 12px;
        padding: 6px 8px;
        margin-top: 6px;
        line-height: 1.2;
    }

    .sec-event-popup{
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        width: 92vw;
        max-width: 320px;
    }

    .sec-event-form input,
    .sec-event-form textarea,
    .sec-event-form button{
        width: 100%;
        font-size: 16px;
    }

    .sec-event-form{
        padding: 16px;
    }
}

@media (max-width: 520px) {

    .sec-weekdays{
        display: none;
    }

    .sec-calendar-grid{
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .sec-day{
        min-height: auto;
        display: block;
        padding: 14px;
    }

    .sec-day-number{
        display: inline-block;
        font-size: 18px;
        margin-bottom: 10px;
    }

    .sec-event-button{
        display: block;
        width: 100%;
        margin-top: 8px;
    }
}


/* Tablet layout */
@media (max-width: 900px) and (min-width: 521px){

    .sec-calendar-header{
        margin-bottom: 20px;
    }

    .sec-calendar-grid{
        display:grid;
        grid-template-columns: repeat(3, 1fr);
        gap:10px;
        margin-top:15px;
    }

    .sec-day{
        min-height:110px;
    }

    .sec-weekdays{
        display:none;
    }
}

/* Phone layout */
@media (max-width: 520px){

    .sec-calendar-header{
        gap:8px;
        margin-bottom:10px;
    }

    .sec-calendar-header h2{
        margin:4px 0;
        font-size:36px;
    }

    .sec-prev-btn,
    .sec-next-btn{
        margin:0 auto;
    }

    .sec-calendar-grid{
        display:grid;
        grid-template-columns: repeat(3, 1fr);
        gap:8px;
        margin-top:10px;
    }

    .sec-day{
        min-height:85px;
        padding:8px;
    }

    .sec-weekdays{
        display:none;
    }

    .sec-event-button{
        font-size:11px;
        padding:5px;
    }
}


/* Remove weekday row and tighten mobile spacing */
@media (max-width: 900px){

    .sec-weekdays{
        display:none !important;
        margin:0 !important;
        padding:0 !important;
        height:0 !important;
        overflow:hidden;
    }

    .sec-calendar-header{
        margin-bottom:6px !important;
    }

    .sec-calendar-grid{
        margin-top:0 !important;
    }

    .sec-prev-btn,
    .sec-next-btn{
        margin-bottom:4px !important;
    }
}


/* Force-hide weekday buttons on screens under 900px */
@media screen and (max-width: 900px) {
    .sec-weekdays,
    .sec-weekdays div,
    .sec-calendar-wrapper .sec-weekdays,
    .sec-calendar-wrapper .sec-weekdays div{
        display:none !important;
        visibility:hidden !important;
        opacity:0 !important;
        height:0 !important;
        min-height:0 !important;
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
        overflow:hidden !important;
    }

    .sec-calendar-grid{
        margin-top:0 !important;
    }
}


/* Completely hide weekday labels everywhere */
.sec-weekdays,
.sec-weekdays *,
.sec-calendar-wrapper .sec-weekdays,
.sec-calendar-wrapper .sec-weekdays *{
    display:none !important;
    visibility:hidden !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
}

/* Remove the empty gap left behind */
.sec-calendar-grid{
    margin-top:0 !important;
}