/*
 * PureCSS.com
 * https://purecss.com/examples/css-calendar/
 * A monthly calendar built with CSS Grid — 7 columns, hover states, and today highlighted.
 */

.demo-css-calendar {
	display: flex;
	justify-content: center;
}

.demo-css-calendar .cal-wrap {
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		overflow: hidden;
		width: 100%;
		max-width: 380px;
	}

.demo-css-calendar .cal-header {
		padding: 1rem 1.25rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid var(--border);
	}

.demo-css-calendar .cal-month-label {
		font-weight: 700;
		font-size: .95rem;
		color: var(--text);
	}

.demo-css-calendar .cal-nav {
		display: flex;
		gap: .4rem;
	}

.demo-css-calendar .cal-nav-btn {
		background: none;
		border: 1px solid var(--border);
		color: var(--text-muted);
		width: 28px;
		height: 28px;
		border-radius: var(--radius);
		cursor: pointer;
		font-size: .8rem;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: border-color .15s, color .15s;
	}

:is(.demo-css-calendar .cal-nav-btn):hover {
			border-color: var(--accent);
			color: var(--accent);
		}

.demo-css-calendar .cal-grid {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		padding: .25rem .5rem .75rem;
	}

.demo-css-calendar .cal-day-name {
		font-family: var(--font-mono);
		font-size: .58rem;
		text-transform: uppercase;
		letter-spacing: .07em;
		color: var(--text-muted);
		text-align: center;
		padding: .6rem .25rem .4rem;
	}

.demo-css-calendar .cal-day {
		aspect-ratio: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: .8rem;
		color: var(--text);
		cursor: pointer;
		border-radius: 50%;
		transition: background .15s, color .15s;
		margin: .1rem;
		position: relative;
	}

:is(.demo-css-calendar .cal-day):hover {
			background: var(--surface-2);
		}

.cal-today:is(.demo-css-calendar .cal-day) {
			background: var(--accent);
			color: #0c0c0d;
			font-weight: 700;
		}

.cal-today:is(.demo-css-calendar .cal-day):hover {
				background: var(--accent);
			}

.cal-muted:is(.demo-css-calendar .cal-day) {
			color: var(--text-muted);
			opacity: .35;
		}

.cal-has-event:is(.demo-css-calendar .cal-day)::after {
				content: "";
				position: absolute;
				bottom: 3px;
				left: 50%;
				transform: translateX(-50%);
				width: 3px;
				height: 3px;
				border-radius: 50%;
				background: var(--accent);
			}

.cal-has-event.cal-today:is(.demo-css-calendar .cal-day)::after {
				background: #0c0c0d;
			}

.demo-css-calendar .cal-footer {
		border-top: 1px solid var(--border);
		padding: .6rem 1rem;
		display: flex;
		gap: 1.25rem;
	}

.demo-css-calendar .cal-legend {
		display: flex;
		align-items: center;
		gap: .4rem;
		font-family: var(--font-mono);
		font-size: .62rem;
		color: var(--text-muted);
		letter-spacing: .04em;
	}

:is(.demo-css-calendar .cal-legend)::before {
			content: "";
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: var(--accent);
		}

.cal-legend-today:is(.demo-css-calendar .cal-legend)::before {
			border-radius: 50%;
		}