/* CCSPP Events Calendar
   Styling leans on UIkit / YOOtheme component classes (uk-card, uk-label,
   uk-button, uk-text-muted) so colors follow the active theme style.
   Only the date chip and calendar grid need custom rules. */

.ccspp-events { --ccspp-accent: currentColor; }

.ccspp-events-title { margin-bottom: 1rem; }

/* ---------- List view ---------- */
.ccspp-event { transition: box-shadow .15s ease; }
.ccspp-event:hover { box-shadow: 0 5px 15px rgba(0,0,0,.08); }

.ccspp-event-name { line-height: 1.25; }

.ccspp-event-when [uk-icon],
.ccspp-event-meta [uk-icon] { opacity: .6; margin-right: 2px; }

.ccspp-event-when .ccspp-sep { margin: 0 .35em; opacity: .5; }

.ccspp-event-meta { font-size: .95em; }
.ccspp-event-meta > li { margin-top: .35em; }
.ccspp-event-meta > li:first-child { margin-top: .5em; }

.ccspp-venue { font-weight: 600; }
.ccspp-address { margin-left: .35em; }

.ccspp-orgs { display: inline-flex; flex-wrap: wrap; gap: .3em; vertical-align: top; }
.ccspp-org { white-space: normal; }

/* Date chip: bordered so it adopts the theme text color */
.ccspp-datechip {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 66px;
	padding: .4em 0 .5em;
	border: 1px solid currentColor;
	border-radius: 6px;
	line-height: 1;
	text-align: center;
}
.ccspp-datechip-month {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .75;
}
.ccspp-datechip-day {
	font-size: 1.7rem;
	font-weight: 700;
	margin: .05em 0;
}
.ccspp-datechip-dow {
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	opacity: .6;
}

/* ---------- View toggle ----------
   The active button gets UIkit's .uk-button-primary class via JS, so it picks
   up the theme's primary color automatically — no custom color rules needed. */

/* ---------- Calendar view ---------- */
.ccspp-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .75rem;
	gap: .5rem;
}
.ccspp-cal-title { font-weight: 700; font-size: 1.15rem; margin: 0; }

.ccspp-cal-scroll { overflow-x: auto; }

.ccspp-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(90px, 1fr));
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 6px;
	overflow: hidden;
	min-width: 640px;
}
.ccspp-cal-dow {
	padding: .5em .4em;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-align: center;
	opacity: .7;
	border-bottom: 1px solid rgba(0,0,0,.12);
	background: rgba(0,0,0,.03);
}
.ccspp-cal-cell {
	min-height: 96px;
	padding: .35em;
	border-right: 1px solid rgba(0,0,0,.08);
	border-bottom: 1px solid rgba(0,0,0,.08);
	font-size: .8rem;
}
.ccspp-cal-cell:nth-child(7n) { border-right: 0; }
.ccspp-cal-cell.is-empty { background: rgba(0,0,0,.02); }
.ccspp-cal-cell.is-today .ccspp-cal-num {
	border: 2px solid currentColor;
	border-radius: 50%;
}
.ccspp-cal-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6em;
	height: 1.6em;
	font-weight: 600;
	margin-bottom: .25em;
}
.ccspp-cal-event {
	display: block;
	padding: .2em .4em;
	margin-bottom: .25em;
	border-radius: 4px;
	background: rgba(0,0,0,.06);
	line-height: 1.2;
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ccspp-cal-event:hover { background: rgba(0,0,0,.12); }

/* Popover-style detail under the calendar */
.ccspp-cal-detail {
	margin-top: 1rem;
}
.ccspp-cal-detail:empty { display: none; }

@media (max-width: 640px) {
	.ccspp-datechip { width: 56px; }
	.ccspp-datechip-day { font-size: 1.4rem; }
}