/* Cedar Lake Core — Common Styles */

:root {
	--cl-primary:     #009AA6;
	--cl-secondary:   #EB7B28;
	--cl-text:        #000000;
	--cl-text-muted:  #666666;
	--cl-font-title:  'Alice', serif;
	--cl-font-body:   'Plus Jakarta Sans', sans-serif;
	--cl-radius:      8px;
	--cl-shadow:      0 2px 12px rgba(0, 0, 0, 0.08);
	--cl-transition:  0.2s ease;
}

/* Buttons */
.cl-btn-primary,
.cl-btn-secondary {
	display:        inline-block;
	padding:        10px 30px;
	border:         none;
	border-radius:  var(--cl-radius);
	font-family:    var(--cl-font-body);
	font-size:      0.9rem;
	font-weight:    600;
	cursor:         pointer;
	transition:     background var(--cl-transition), color var(--cl-transition), border-color var(--cl-transition);
	line-height:    1.4;
}

.cl-btn-primary {
	background: var(--cl-primary);
	color:      #fff;
}

.cl-btn-primary:hover {
	background: #007f89;
	color:      #fff;
}

.cl-btn-secondary {
	background:   transparent;
	color:        var(--cl-primary);
	border:       2px solid var(--cl-primary);
	padding:      8px 28px;
}

.cl-btn-secondary:hover {
	background: var(--cl-primary);
	color:      #fff;
}

/* Badges */
.cl-badge {
	display:        inline-block;
	padding:        4px 10px;
	border-radius:  4px;
	font-family:    var(--cl-font-body);
	font-size:      0.72rem;
	font-weight:    600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cl-badge-expired {
	background: var(--cl-secondary);
	color:      #fff;
}

.cl-badge-repetitive {
	background: var(--cl-primary);
	color:      #fff;
}

/* Loading Spinner */
.cl-events-loading {
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         60px 20px;
	width:           100%;
}

.cl-events-loading::after {
	content:       '';
	display:       block;
	width:         36px;
	height:        36px;
	border:        3px solid rgba(0, 154, 166, 0.2);
	border-top:    3px solid var(--cl-primary);
	border-radius: 50%;
	animation:     cl-spin 0.7s linear infinite;
}

@keyframes cl-spin {
	to { transform: rotate(360deg); }
}

/* Pagination */
.cl-pagination {
	display:         flex;
	flex-wrap:       wrap;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	margin-top:      40px;
}

.cl-page-btn {
	display:        inline-flex;
	align-items:    center;
	justify-content: center;
	min-width:      40px;
	height:         40px;
	padding:        0 12px;
	border:         2px solid #e0e0e0;
	border-radius:  var(--cl-radius);
	background:     #fff;
	color:          var(--cl-text-muted);
	font-family:    var(--cl-font-body);
	font-size:      0.875rem;
	font-weight:    500;
	cursor:         pointer;
	transition:     all var(--cl-transition);
}

.cl-page-btn:hover {
	border-color: var(--cl-primary);
	color:        var(--cl-primary);
}

.cl-page-btn.cl-page-active {
	background:   var(--cl-primary);
	border-color: var(--cl-primary);
	color:        #fff;
}

.cl-page-prev,
.cl-page-next {
	font-size: 0.8rem;
	padding:   0 16px;
}

.cl-page-ellipsis {
	display:     inline-flex;
	align-items: center;
	height:      40px;
	padding:     0 4px;
	color:       var(--cl-text-muted);
	font-family: var(--cl-font-body);
	font-size:   0.9rem;
	user-select: none;
}

/* No results */
.cl-no-events {
	text-align:  center;
	padding:     60px 20px;
	width:       100%;
	color:       var(--cl-text-muted);
	font-family: var(--cl-font-body);
}

/* ── Category item — shared by archive + section sidebar ── */

.cl-cat-item {
	cursor:     pointer;
	transition: background var(--cl-transition);
}

.cl-cat-item.hidden {
	display: none;
}

.cl-cat-item__inner {
	position: relative;
	padding:  9px 16px 9px 42px;
}

/* Fake checkbox — empty box */
.cl-cat-item__inner::before {
	content:       '';
	position:      absolute;
	left:          16px;
	top:           50%;
	transform:     translateY(-50%);
	width:         16px;
	height:        16px;
	border:        2px solid #ccc;
	border-radius: 3px;
	background:    #fff;
	transition:    border-color var(--cl-transition), background var(--cl-transition);
}

/* Fake checkbox — tick */
.cl-cat-item__inner::after {
	content:     '';
	position:    absolute;
	left:        22px;
	top:         50%;
	transform:   translateY(-65%) rotate(45deg);
	width:       4px;
	height:      8px;
	border:      2px solid #fff;
	border-top:  none;
	border-left: none;
	opacity:     0;
	transition:  opacity var(--cl-transition);
}

.cl-cat-item__txt {
	font-family: var(--cl-font-body);
	font-size:   0.9rem;
	color:       var(--cl-text);
	line-height: 1.3;
	transition:  color var(--cl-transition);
}

.cl-cat-item:hover .cl-cat-item__inner::before {
	border-color: var(--cl-primary);
}

.cl-cat-item:hover .cl-cat-item__txt {
	color: var(--cl-primary);
}

/* Active — filled box + visible tick */
.cl-cat-item.active .cl-cat-item__inner::before {
	background:   var(--cl-primary);
	border-color: var(--cl-primary);
}

.cl-cat-item.active .cl-cat-item__inner::after {
	opacity: 1;
}

.cl-cat-item.active .cl-cat-item__txt {
	color:       var(--cl-primary);
	font-weight: 600;
}

/* ── Flatpickr event dot (shared) ───────────────────── */
.flatpickr-day {
	position: relative;
}

.cl-fp-dot {
	position:       absolute;
	bottom:         3px;
	left:           50%;
	transform:      translateX(-50%);
	width:          5px;
	height:         5px;
	border-radius:  50%;
	background:     var(--cl-secondary);
	pointer-events: none;
	display:        block;
}

.flatpickr-day.selected    .cl-fp-dot,
.flatpickr-day.startRange  .cl-fp-dot,
.flatpickr-day.endRange    .cl-fp-dot {
	background: rgba(255, 255, 255, 0.85);
}

.flatpickr-day.inRange .cl-fp-dot {
	background: var(--cl-secondary);
	opacity:    0.6;
}

/* ── Event Card (shared by all event shortcodes) ────── */

.cl-event-card {
	background:     #fff;
	border-radius:  var(--cl-radius);
	box-shadow:     var(--cl-shadow);
	overflow:       hidden;
	display:        flex;
	flex-direction: column;
	transition:     box-shadow var(--cl-transition), transform var(--cl-transition);
}

.cl-event-card--expired {
	opacity: 0.82;
}

/* Image wrap */
.cl-event-card__img-wrap {
	position:        relative;
	display:         block;
	overflow:        hidden;
	flex-shrink:     0;
	aspect-ratio:    16 / 10;
	text-decoration: none;
}

.cl-event-card__img-wrap img.cl-event-img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

/* Fallback image */
.cl-event-img-fallback {
	width:           100%;
	height:          100%;
	background:      var(--cl-primary);
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         20px;
}

.cl-event-img-fallback span {
	font-family: var(--cl-font-title);
	font-size:   1.15rem;
	color:       #fff;
	text-align:  center;
	line-height: 1.4;
}

/* Expired badge */
.cl-event-card__img-wrap .cl-badge {
	position: absolute;
	top:      12px;
	right:    12px;
}

/* Body */
.cl-event-card__body {
	padding:        44px 22px 24px;
	display:        flex;
	flex-direction: column;
	gap:            6px;
	flex:           1;
}

.cl-event-card__category {
	font-size:      0.75rem;
	font-weight:    600;
	color:          var(--cl-primary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin:         0;
}

.cl-event-card__title {
	font-family: var(--cl-font-title);
	font-size:   1.15rem;
	line-height: 1.4;
	margin:      4px 0 0;
	color:       var(--cl-text);
}

.cl-event-card__title a {
	color:           inherit;
	text-decoration: none;
	transition:      color var(--cl-transition);
}

.cl-event-card__title a:hover {
	color: var(--cl-primary);
}

.cl-event-card__date,
.cl-event-card__venue {
	display:     flex;
	align-items: center;
	gap:         6px;
	font-size:   0.82rem;
	color:       var(--cl-text-muted);
	margin:      0;
}

.cl-event-card__date svg,
.cl-event-card__venue svg {
	flex-shrink: 0;
	color:       var(--cl-primary);
}
.cl-event-card__body{
  position: relative;
  overflow: visible;
}
.cl-badge-date{
  position: absolute;
  display: flex;
  flex-direction: column;
  padding: 12px 24px;
  text-align: center;
  background-color: #121212;
  z-index: 999;
  color: #ffffff;
  border-radius: 4px;
  top: -35px;
  line-height: 1.6em;
}
.cl-badge-date span strong{
  font-size: 21px;
}
.cl-badge-date span {
  font-size: 16px;
}
.cl-event-card__category{
  padding-left: 80px;
  text-align: right;
  position: absolute;
  top: 10px;
  right: 20px;
  padding: 0;
}
.cl-event-card__date{
  padding: 0;
}