/* Events CSS */

body ul.ncs-events-list,
body ul.ncs-month-events {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

body ul.ncs-events-list {
    padding: var( --global-xs-spacing ) 0;
}

div.ncs-events {
    margin: var( --global-lg-spacing ) 0;

    & h2 {
        margin: 0.5rem 0;
    }

    & .ncs-events-header {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-block: var( --global-xs-spacing );
        row-gap: 10px;

        & .ncs-event-filter {
            display: grid;
            gap: 5px;
        }
    }
}

.ncs-month-block {
    border-top: solid 1px var( --global-palette7 );

    &:last-of-type {
        border-bottom: solid 1px var( --global-palette7 );
    }
}

.ncs-month-block details summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.6rem;
    font-weight: bold;
    padding: var( --global-xs-spacing );
}

.ncs-month-block details summary::-webkit-details-marker {
	display: none;
}

.ncs-month-block details summary::after {
    content: '';
	display: inline-block;
	width: 2em;
	height: 2em;
	margin-left: 0.5em;
	background-image: url( 'data:image/svg+xml;utf8,<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5H7z"/></svg>' );
	background-size: contain;
	background-repeat: no-repeat;
	transition: transform 0.2s;
}

.ncs-month-block details[open] summary::after {
	transform: rotate(180deg);
}

.ncs-month-block details summary {
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.ncs-month-block details:not( [open] ) summary:hover {
    background: var( --global-palette7 );
}

body ul.ncs-month-events {
    display: flex;
    flex-wrap: wrap;
    gap: var( --global-md-spacing );
    padding: 0 0 var( --global-md-spacing ) 0;
}

body ul.ncs-month-events:has( .no-events ) {
    padding: 0 var( --global-xs-spacing ) var( --global-md-spacing ) var( --global-xs-spacing );
}

/* All single event CSS */
.ncs-events .ncs-single-event {
	display: grid;
	grid-template-columns: 1fr minmax( auto, 75px );
    grid-template-rows: auto auto auto;
    gap: 10px;
	padding: 0 var( --global-xs-spacing ) var( --global-xs-spacing );
	background: var( --global-palette8 );
	border: 1px solid var( --global-palette6 );
	border-radius: 10px;
    max-width: 385px;
    width: 100%;

    & h3.ncs-single-event-name {
        grid-area: 1 / 1 / 2 / 2;
        font-size: 1.2rem;
        color: var( --global-palette1 );
        margin: 1rem 0;
        cursor: pointer;
    }

    & .ncs-event-date-short {
        grid-area: 1 / 2 / 2 / 3;
        display: grid;
        place-items: center;
        border-style: solid;
        border-color: var( --global-palette5 );
        border-width: 0 1px 1px 1px;
        border-radius: 0 0 10px 10px;
        background: var( --global-palette5 );
        text-align: center;
        text-transform: uppercase;
        max-height: 60px;

        & .month,
        & .day {
            display: flex;
            padding-block: 0.1rem;
            width: 100%;
            height: 100%;
            align-items: center;
            justify-content: center;
        }

        & .month {
            font-size: 0.9rem;
            letter-spacing: 1px;
            background: var( --global-palette9 );
        }

        & .day {
            font-size: 0.85rem;
            color: var( --global-palette9 );
        }
    }

    & .ncs-event-details {
        grid-area: 2 / 1 / 3 / 2;
        margin: 0;
        padding: 0;
    }
}

.ncs-events .ncs-single-event-location,
.ncs-events .ncs-single-event-date,
.ncs-modal-event-location,
.ncs-modal-date p,
.ncs-modal-category,
.ncs-single-event-category {
    opacity: 0.85;
	margin: 0;
    font-size: 0.9rem;
    display: flex;
    gap: 0.25rem; /* Add spacing between the icon and the text */
}

.ncs-single-event-categories {
    grid-area: 2 / 2 / 4 / 3;
    display: grid;
    align-items: end;
    gap: 5px;

    p.ncs-single-event-category {
        text-align: center;
        color: var( --global-palette9 );
        border-radius: 5px;
        padding: 5px;
        text-transform: uppercase;
        font-size: 0.85rem;
        margin: 0;
    }
}

.ncs-events .ncs-single-event .ncs-single-event-category.adult-carers {
    background: var( --global-palette11 ); /* Green */
}
.ncs-events .ncs-single-event .ncs-single-event-category.young-carers {
    background: var( --global-palette12 ); /* Blue */
}

.ncs-modal-event-location,
.ncs-modal-date p {
    flex-wrap: wrap;
}

.ncs-events .ncs-single-event-location,
.ncs-events .ncs-single-event-date {
    color: var( --global-palette6 );
    margin: 5px 0;
}

.ncs-events .ncs-single-event-location::before,
.ncs-events .ncs-single-event-date::before,
.ncs-modal-event-location::before,
.ncs-modal-date p::before,
.ncs-modal-category::before {
    content: '';
    display: inline-block; /* Ensure the icon aligns properly */
    width: 1rem; /* Adjust the width of the icon */
    height: 1rem; /* Adjust the height of the icon */
    background-size: contain; /* Ensure the SVG scales properly */
    background-repeat: no-repeat; /* Prevent repeating the SVG */
    background-position: center; /* Center the SVG */
    min-width: 1rem;
    align-self: start;
}

.ncs-events .ncs-single-event-location::before,
.ncs-modal-event-location::before {
    background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666666"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"/></svg>' );
}

.ncs-events .ncs-single-event-date::before,
.ncs-modal-date p::before {
    background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666666"><path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2zM7 12h5v5H7z"/></svg>' );
}

.ncs-modal-category::before {
    background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666666"><path d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8 c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>' );
}

.ncs-event-link {
    grid-area: 3 / 1 / 4 / 2;
	display: inline-flex;
    align-items: center;
	gap: var( --global-sm-spacing );
	color: var( --global-palette4 );
    border-bottom: solid 1px var( --global-palette4 );
    width: fit-content;
    padding: 0.5rem 0;
    background: none;
    border-radius: 0;
    letter-spacing: 0;
    cursor: pointer;
    align-self: flex-end;

    &:hover,
    &:focus {
        border-bottom: solid 1px var( --global-palette-highlight );
        background: initial;
        color: var( --global-palette-highlight );
    }

    & span {
        pointer-events: none; /* Fixes issue when clicking more details button */
    }
}

.ncs-event-image {
    grid-area: 3 / 2 / 4 / 3;
    display: grid;
    align-items: center;
    justify-items: center;
    
    img {
        width: 1.5rem;
    }
}

.ncs-event-modal {
	position: fixed;
	top: 0; left: 0;
	width: 100vw;
    height: 100vh;
	background: rgba( 0, 0, 0, 0.6 );
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;

    & h2 {
        margin: 0 0 0.5rem 0;
    }

    &[hidden] {
        display: none;
    }
}

.ncs-event-modal-content {
	background: var( --global-palette9 );
	padding: var( --global-md-spacing );
	max-width: 750px;
	width: 90%;
	border-radius: 10px;
	position: relative;

    & .ncs-event-modal-inner-content {
        max-width: 90%;
        display: grid;
        gap: 0.5rem;

        & .ncs-modal-event-location,
        & .ncs-modal-date,
        & .ncs-modal-category {
            margin-bottom: var( --global-md-spacing );
        }

        & .ncs-modal-close {
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            background: var( --global-palette4 );
            border: none;
            width: 2rem;
            height: 2rem;
            align-items: center;
            justify-content: center;
            transition: background 0.3s ease;

            &:hover {
                background: var( --global-palette2 );
            }
        }

        & .ncs-modal-description p {
            margin-top: 0;
        }
    }
}