/*
 * Freeslot Calendar — public styles.
 * All classes prefixed `.ic-` and scoped under `.ic-calendar` to avoid
 * collisions with the active theme.
 */

.ic-calendar {
	--ic-brand-ink: #0E1B2C;
	--ic-brand-accent: #E87722;
	--ic-brand-accent-soft: #FCEEDD;

	--ic-bg: #F6F4EE;
	--ic-surface: #FFFFFF;
	--ic-surface-2: #FBFAF6;
	--ic-surface-3: #F1EFE8;

	--ic-text: #0F172A;
	--ic-text-2: #475569;
	--ic-text-3: #94A3B8;

	--ic-border: #E5E1D6;
	--ic-border-2: #EFEDE4;

	--ic-free-bg: #E8F5EE;
	--ic-free-border: #BFE2CD;
	--ic-free-text: #166534;
	--ic-free-dot: #16A34A;

	--ic-partial-bg: #FDF1DC;
	--ic-partial-border: #F5D9A6;
	--ic-partial-text: #854D0E;
	--ic-partial-dot: #EA8B16;

	--ic-full-bg: #FCE7E7;
	--ic-full-border: #F2BFBF;
	--ic-full-text: #991B1B;
	--ic-full-dot: #DC2626;

	--ic-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
	--ic-shadow-md: 0 4px 16px -4px rgba(15, 23, 42, 0.08), 0 2px 6px -2px rgba(15, 23, 42, 0.04);

	--ic-r-sm: 8px;
	--ic-r-md: 12px;
	--ic-r-lg: 16px;
	--ic-r-xl: 20px;

	box-sizing: border-box;
	font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--ic-text);
	line-height: 1.5;
	display: block;
	max-width: 100%;
}
.ic-calendar *,
.ic-calendar *::before,
.ic-calendar *::after { box-sizing: border-box; }

/* ============================================ Header */
.ic-calendar .ic-cal-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}
.ic-calendar .ic-cal-title {
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	font-weight: 600;
	font-size: clamp(28px, 4vw, 36px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--ic-brand-ink);
	margin: 0 0 6px;
}
.ic-calendar .ic-cal-subtitle {
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	margin: 0;
	color: var(--ic-text-2);
	font-size: 14.5px;
}

/* ============================================ Month nav */
.ic-calendar .ic-month-nav {
	display: flex;
	align-items: center;
	gap: 0; /* spacing comes from .ic-month-label padding only — keeps arrows symmetric */
	background: transparent;
	padding: 6px;
	border-radius: 999px;
	border: 1px solid var(--ic-border);
}
.ic-calendar .ic-nav-btn {
	width: 38px;
	height: 49px;
	border-radius: 50%;
	border: none;
	background: transparent;
	cursor: pointer;
	display: grid;
	place-items: center;
	color: var(--ic-text-2);
	transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
	font: inherit;
}
.ic-calendar .ic-nav-btn:hover {
	background: var(--ic-surface);
	color: var(--ic-text);
	box-shadow: var(--ic-shadow-sm);
}
.ic-calendar .ic-nav-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(14, 27, 44, 0.15);
}
.ic-calendar .ic-nav-btn[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}
.ic-calendar .ic-month-label {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-size: 18px;
	color: var(--ic-brand-ink);
	letter-spacing: -0.01em;
	padding: 0 6px; /* spacing from text to each arrow is just this value, both sides equal */
	min-width: 0;    /* hug content so the label box matches the actual text width */
	text-align: center;
	line-height: 1;  /* avoid baseline shift from font metrics adding optical asymmetry */
}

/* ============================================ Legend */
.ic-calendar .ic-legend {
	display: flex;
	gap: 22px;
	margin-bottom: 22px;
	flex-wrap: wrap;
}
.ic-calendar .ic-legend-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--ic-text-2);
}
.ic-calendar .ic-legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7);
}
.ic-calendar .ic-legend-dot.ic-is-free { background: var(--ic-free-dot); }
.ic-calendar .ic-legend-dot.ic-is-partial { background: var(--ic-partial-dot); }
.ic-calendar .ic-legend-dot.ic-is-full { background: var(--ic-full-dot); }

/* ============================================ Weekday headers */
.ic-calendar .ic-cal-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0;
	margin-bottom: 0;
	border-bottom: 1px solid var(--ic-border);
	background: var(--ic-surface-2);
}
.ic-calendar .ic-cal-weekdays > div {
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	color: var(--ic-text-3);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 10px 0;
}

/* ============================================ Day grid (v1.5 redesign)
   Cells are landscape-rectangular with white default backgrounds and a subtle
   border. Status colors live in the dot + text; the background only gets a
   faint tint on partial / full days. */
.ic-calendar .ic-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0;
}
.ic-calendar .ic-day {
	all: unset;
	box-sizing: border-box;
	aspect-ratio: 1.4 / 1;
	border-radius: 0;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 4px;
	cursor: pointer;
	border: 0;
	border-right: 1px solid var(--ic-border);
	border-bottom: 1px solid var(--ic-border);
	background: var(--ic-surface);
	transition: background-color 0.18s ease, box-shadow 0.18s ease;
	font-family: inherit;
	color: inherit;
	text-align: left;
	position: relative;
}
/* Last cell in each row sheds its right border (the outer card supplies it). */
.ic-calendar .ic-cal-grid > .ic-day:nth-child(7n) {
	border-right: 0;
}
.ic-calendar .ic-day:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 3px rgba(14, 27, 44, 0.18);
}
.ic-calendar .ic-day:hover:not(.ic-is-empty):not(.ic-is-overflow) {
	background: var(--ic-surface-2);
}
.ic-calendar .ic-day.ic-is-empty {
	background: transparent;
	cursor: default;
	pointer-events: none;
	border-color: transparent;
	box-shadow: none;
}

.ic-calendar .ic-day-num {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-size: 30px;
	color: var(--ic-brand-ink);
	line-height: 1;
	letter-spacing: -0.02em;
}
.ic-calendar .ic-day-status {
	margin-top: auto;
	align-self: flex-start;
	max-width: 100%;
	font-size: 12px;
	font-weight: 500;
	color: var(--ic-text-3);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 9px 3px 8px;
	border-radius: 6px;
	background: var(--ic-surface-3);
	letter-spacing: 0.02em;
}
.ic-calendar .ic-day-status .ic-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ic-text-3);
	flex-shrink: 0;
}
.ic-calendar .ic-day-status-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ic-calendar .ic-day-slots-left {
	font-size: 11px;
	color: var(--ic-partial-text);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	letter-spacing: 0.02em;
	margin-top: 2px;
}

/* Status tints — far more subtle than v1.4's full-fill backgrounds. */
.ic-calendar .ic-day.ic-is-free { background: var(--ic-surface); border-color: var(--ic-border); }
.ic-calendar .ic-day.ic-is-free .ic-day-status { color: var(--ic-free-text); background: var(--ic-free-bg); }
.ic-calendar .ic-day.ic-is-free .ic-day-status .ic-dot { background: var(--ic-free-dot); }

.ic-calendar .ic-day.ic-is-partial { background: #FEFAF0; border-color: #F5DFA8; }
.ic-calendar .ic-day.ic-is-partial .ic-day-status { color: var(--ic-partial-text); background: var(--ic-partial-bg); }
.ic-calendar .ic-day.ic-is-partial .ic-day-status .ic-dot { background: var(--ic-partial-dot); }

.ic-calendar .ic-day.ic-is-full { background: #FDF1F1; border-color: #F3C7C7; }
.ic-calendar .ic-day.ic-is-full .ic-day-status { color: var(--ic-full-text); background: var(--ic-full-bg); }
.ic-calendar .ic-day.ic-is-full .ic-day-status .ic-dot { background: var(--ic-full-dot); }

/* Today: green inset ring + checkmark badge in top-right corner. Inset (not
   border-width) so the ring lives inside the cell — the outer card clips
   any external decoration. */
.ic-calendar .ic-day.ic-is-today {
	box-shadow: inset 0 0 0 2px var(--ic-free);
}

/* Selected (last-clicked) cell: same green hue but semi-transparent so it
   reads as "this is what I just opened" without competing with today.
   Listed AFTER the today rule so a cell that is both today AND selected
   shows the selected ring (later action wins). */
.ic-calendar .ic-day.ic-is-selected {
	box-shadow: inset 0 0 0 2px rgba(22, 163, 74, 0.45);
}
.ic-calendar .ic-day.ic-is-today::after {
	content: '';
	position: absolute;
	top: 10px;
	right: 10px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--ic-free);
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 6.5 5 9 10 3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 13px;
}

/* Prev/next-month overflow days: dimmed and non-interactive. */
.ic-calendar .ic-day.ic-is-overflow {
	background: var(--ic-surface-2);
	cursor: default;
	pointer-events: none;
	box-shadow: none;
}
.ic-calendar .ic-day.ic-is-overflow .ic-day-num {
	color: var(--ic-text-3);
	font-weight: 500;
	opacity: 0.55;
}

/* ============================================ Day detail panel */
.ic-calendar .ic-day-detail {
	margin-top: 28px;
	background: transparent;
	border: 1px solid var(--ic-border);
	border-radius: var(--ic-r-lg);
	padding: 24px;
}
.ic-calendar .ic-day-detail[hidden] { display: none; }
.ic-calendar .ic-day-detail-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}
.ic-calendar .ic-day-detail-title {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 28px;
	font-weight: 500;
	color: var(--ic-brand-ink);
	letter-spacing: -0.015em;
	line-height: 1.1;
	margin: 0;
}
.ic-calendar .ic-day-detail-close {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: transparent;
	cursor: pointer;
	color: var(--ic-text-3);
	display: grid;
	place-items: center;
	font: inherit;
}
.ic-calendar .ic-day-detail-close:hover {
	background: transparent;
	color: var(--ic-text);
}
.ic-calendar .ic-day-detail-body { display: flex; flex-direction: column; gap: 14px; }
.ic-calendar .ic-detail-meta {
	margin: 0;
	color: var(--ic-text-2);
	font-size: 14px;
}
.ic-calendar .ic-detail-meta strong {
	color: var(--ic-text);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-weight: 500;
}
.ic-calendar .ic-timeline {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 8px;
}
.ic-calendar .ic-slot {
	padding: 10px 12px;
	border-radius: var(--ic-r-sm);
	font-size: 13px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	border: 1px solid;
	text-align: center;
}
.ic-calendar .ic-slot.ic-is-free {
	background: var(--ic-free-bg);
	border-color: var(--ic-free-border);
	color: var(--ic-free-text);
}
.ic-calendar .ic-slot.ic-is-busy {
	background: var(--ic-full-bg);
	border-color: var(--ic-full-border);
	color: var(--ic-full-text);
	text-decoration: line-through;
	opacity: 0.85;
}

/* ============================================ Public event cards */
.ic-calendar .ic-public-event-list {
	display: grid;
	gap: 14px;
}
.ic-calendar .ic-public-event {
	background: var(--ic-surface);
	border: 1px solid var(--ic-border);
	border-top: 3px solid var(--ic-brand-accent);
	border-radius: var(--ic-r-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.ic-calendar .ic-public-event-media {
	width: 100%;
	height: 280px;
	overflow: hidden;
	background: var(--ic-surface-2);
}
.ic-calendar .ic-public-event-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
@media (max-width: 900px) {
	.ic-calendar .ic-public-event-media { height: 240px; }
}
@media (max-width: 600px) {
	.ic-calendar .ic-public-event-media { height: 200px; }
}
.ic-calendar .ic-public-event-body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ic-calendar .ic-public-event-header {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.ic-calendar .ic-event-category {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 999px;
	background: var(--ic-brand-accent);
	color: #fff;
	line-height: 1.4;
}
.ic-calendar .ic-public-event-time {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 12px;
	color: var(--ic-text-2);
}
.ic-calendar .ic-public-event-title {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ic-brand-ink);
	margin: 0;
}
.ic-calendar .ic-public-event-note {
	font-size: 14px;
	line-height: 1.55;
	color: var(--ic-text-2);
}
.ic-calendar .ic-public-event-note p { margin: 0 0 8px; }
.ic-calendar .ic-public-event-note p:last-child { margin-bottom: 0; }
.ic-calendar .ic-public-event-note a { color: var(--ic-brand-accent); }

@media (max-width: 480px) {
	.ic-calendar .ic-public-event-body { padding: 12px 14px 14px; }
	.ic-calendar .ic-public-event-title { font-size: 17px; }
	.ic-calendar .ic-public-event-note { font-size: 13px; }
	.ic-calendar .ic-public-event-media { height: 180px; }
}

.ic-calendar .ic-event-list-mini {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ic-calendar .ic-event-list-mini li {
	border: 1px solid var(--ic-border);
	border-left-width: 3px;
	border-radius: var(--ic-r-sm);
	background: var(--ic-surface);
	padding: 10px 14px;
}
.ic-calendar .ic-event-list-mini .ic-event-title {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 500;
	font-size: 15px;
	color: var(--ic-brand-ink);
	display: block;
	margin-bottom: 2px;
}
.ic-calendar .ic-event-list-mini .ic-event-time {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 12px;
	color: var(--ic-text-2);
}
.ic-calendar .ic-event-list-mini .ic-event-note {
	margin: 6px 0 0;
	color: var(--ic-text-2);
	font-size: 13px;
}

.ic-calendar .ic-detail-footer-note {
	padding: 12px 14px;
	background: var(--ic-surface);
	border: 1px dashed var(--ic-border);
	border-radius: var(--ic-r-sm);
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--ic-text-2);
}
.ic-calendar .ic-detail-footer-note a {
	color: var(--ic-brand-accent);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s;
}
.ic-calendar .ic-detail-footer-note a:hover { border-bottom-color: var(--ic-brand-accent); }

.ic-calendar .ic-noscript-note {
	margin-top: 16px;
	padding: 12px 16px;
	background: var(--ic-partial-bg);
	color: var(--ic-partial-text);
	border-radius: var(--ic-r-sm);
	font-size: 13px;
}

.ic-calendar.ic-is-loading {
	opacity: 0.6;
	pointer-events: none;
	transition: opacity 0.18s;
}

/* ============================================ Tablet breakpoint */
@media (max-width: 720px) {
	.ic-calendar .ic-day {
		padding: 8px;
		aspect-ratio: 1 / 1; /* roughly square at tablet width */
		gap: 2px;
	}
	.ic-calendar .ic-day-num { font-size: 20px; line-height: 1; }
	.ic-calendar .ic-day-status { font-size: 10px; gap: 4px; }
	.ic-calendar .ic-day-status .ic-dot { width: 6px; height: 6px; }
	.ic-calendar .ic-day-slots-left { font-size: 10px; }
	.ic-calendar .ic-day.ic-is-today::after { width: 18px; height: 18px; top: 6px; right: 6px; background-size: 11px 11px; }

	.ic-calendar .ic-cal-weekdays > div { font-size: 10px; padding: 6px 0; letter-spacing: 0.1em; }
	.ic-calendar .ic-cal-weekdays,
	.ic-calendar .ic-cal-grid { gap: 0; }

	.ic-calendar .ic-cal-header { gap: 14px; margin-bottom: 18px; }
	.ic-calendar .ic-month-label { font-size: 16px; min-width: 0; padding: 0 8px; }
	/* Stretch the nav pill to the full calendar width, pin Today to the right
	   with breathing room from the pill edge. !important because the base
	   .ic-nav-today rule (margin-left: 8px) lives later in the file. */
	.ic-calendar .ic-month-nav { width: 100%; }
	.ic-calendar .ic-nav-today { margin-left: auto !important; margin-right: 20px; }

	.ic-calendar .ic-legend { gap: 14px; margin-bottom: 16px; font-size: 12px; }

	.ic-calendar .ic-day-detail { padding: 18px; margin-top: 22px; }
	.ic-calendar .ic-day-detail-title { font-size: 22px; }

	.ic-calendar .ic-cta-bar { flex-direction: column; align-items: flex-start; gap: 16px; padding: 18px; }
	.ic-calendar .ic-cta-pitch,
	.ic-calendar .ic-cta-hours {
		flex: 0 0 auto;
		width: auto;
		align-self: flex-start;
		text-align: left;
	}
	.ic-calendar .ic-cta-btn { justify-content: flex-start; align-self: flex-start; }
}

/* ============================================ Phone breakpoint */
@media (max-width: 480px) {
	.ic-calendar .ic-day {
		padding: 6px 4px;
		aspect-ratio: 1 / 1;
		justify-content: flex-start;
	}
	.ic-calendar .ic-day-num { font-size: 15px; font-weight: 600; }
	.ic-calendar .ic-day.ic-is-today::after { width: 14px; height: 14px; top: 4px; right: 4px; background-size: 9px 9px; }

	/* Drop the status text label entirely — the cell's faint tint + dot is enough.
	   Show only the dot at the bottom, centered. */
	.ic-calendar .ic-day-status {
		font-size: 0;
		gap: 0;
		justify-content: center;
		margin-top: auto;
	}
	.ic-calendar .ic-day-status .ic-dot { width: 5px; height: 5px; }
	.ic-calendar .ic-day-slots-left { display: none; }

	.ic-calendar .ic-cal-weekdays,
	.ic-calendar .ic-cal-grid { gap: 0; }
	.ic-calendar .ic-cal-weekdays > div { font-size: 9px; letter-spacing: 0.05em; }

	.ic-calendar .ic-cal-header { gap: 10px; margin-bottom: 14px; }
	.ic-calendar .ic-cal-title { font-size: 22px; }
	.ic-calendar .ic-month-nav { padding: 4px; }
	.ic-calendar .ic-nav-btn { width: 50px; height: 42px; }
	.ic-calendar .ic-month-label { font-size: 14px; min-width: 0; padding: 0 6px; }

	.ic-calendar .ic-legend { gap: 12px; font-size: 11px; }
	.ic-calendar .ic-legend-dot { width: 8px; height: 8px; }

	.ic-calendar .ic-day-detail { padding: 14px; margin-top: 18px; }
	.ic-calendar .ic-day-detail-title { font-size: 18px; }
	.ic-calendar .ic-timeline { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; }
	.ic-calendar .ic-slot { padding: 8px 6px; font-size: 11.5px; }
}

/* ============================================ Dark theme override */
.ic-calendar.ic-theme-dark {
	--ic-bg: #0E1B2C;
	--ic-surface: #16263F;
	--ic-surface-2: #1B2D49;
	--ic-surface-3: #21354F;
	--ic-text: #F1EFE8;
	--ic-text-2: #B8C2D1;
	--ic-text-3: #6B7C95;
	--ic-border: #2A3F5C;
	--ic-border-2: #233851;
	color: var(--ic-text);
}
.ic-calendar.ic-theme-dark .ic-day-num,
.ic-calendar.ic-theme-dark .ic-cal-title,
.ic-calendar.ic-theme-dark .ic-day-detail-title,
.ic-calendar.ic-theme-dark .ic-month-label { color: var(--ic-text); }
@media (prefers-color-scheme: dark) {
	.ic-calendar.ic-theme-auto {
		--ic-bg: #0E1B2C;
		--ic-surface: #16263F;
		--ic-surface-2: #1B2D49;
		--ic-surface-3: #21354F;
		--ic-text: #F1EFE8;
		--ic-text-2: #B8C2D1;
		--ic-text-3: #6B7C95;
		--ic-border: #2A3F5C;
		--ic-border-2: #233851;
	}
	.ic-calendar.ic-theme-auto .ic-day-num,
	.ic-calendar.ic-theme-auto .ic-cal-title,
	.ic-calendar.ic-theme-auto .ic-day-detail-title,
	.ic-calendar.ic-theme-auto .ic-month-label { color: var(--ic-text); }
}

/* ============================================ Today button (month-nav) */
.ic-calendar .ic-nav-today {
	margin-left: 8px; /* breathing room so > arrow doesn't feel cramped next to Today pill */
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var(--ic-border);
	background: var(--ic-surface);
	color: var(--ic-text-2);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.ic-calendar .ic-nav-today:hover {
	background: var(--ic-brand-ink);
	border-color: var(--ic-brand-ink);
	color: #fff;
}
.ic-calendar .ic-nav-today:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(14, 27, 44, 0.18);
}

/* ============================================ Initial-render stagger fade-in */
.ic-calendar.ic-is-initial .ic-day {
	opacity: 0;
	animation: ic-stagger-in 0.42s ease forwards;
	animation-delay: calc(var(--ic-stagger-i, 0) * 14ms);
}
@keyframes ic-stagger-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ic-calendar.ic-is-initial .ic-day { opacity: 1; animation: none; }
}

/* ============================================ Cross-fade between AJAX-swapped months */
.ic-calendar .ic-cal-month,
.ic-calendar .ic-cal-month-list {
	transition: opacity 0.18s ease;
}
.ic-calendar .ic-cal-month {
	background: var(--ic-surface);
	border: 1px solid var(--ic-border);
	border-radius: var(--ic-r-lg);
	overflow: hidden;
	box-shadow: var(--ic-shadow-sm);
}
.ic-calendar.ic-is-fading-out .ic-cal-month,
.ic-calendar.ic-is-fading-out .ic-cal-month-list {
	opacity: 0;
}

/* ============================================ Skeleton loader */
.ic-calendar .ic-cal-skeleton {
	display: none;
	grid-template-columns: repeat(7, 1fr);
	gap: 10px;
	margin-bottom: 0;
}
.ic-calendar.ic-is-skeleton .ic-cal-skeleton { display: grid; }
.ic-calendar.ic-is-skeleton .ic-cal-month,
.ic-calendar.ic-is-skeleton .ic-cal-month-list { display: none; }

.ic-calendar .ic-skeleton-wd,
.ic-calendar .ic-skeleton-day {
	border-radius: var(--ic-r-md);
	background: linear-gradient(90deg,
		var(--ic-surface-2) 0%,
		var(--ic-surface-3) 50%,
		var(--ic-surface-2) 100%);
	background-size: 200% 100%;
	animation: ic-shimmer 1.4s linear infinite;
}
.ic-calendar .ic-skeleton-wd { height: 18px; border-radius: 4px; }
.ic-calendar .ic-skeleton-day { aspect-ratio: 1.05 / 1; }
@keyframes ic-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.ic-calendar .ic-skeleton-wd,
	.ic-calendar .ic-skeleton-day { animation: none; }
}

/* ============================================ Empty-state banner */
.ic-calendar .ic-empty-banner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	margin-bottom: 18px;
	background: transparent;
	border: 1px solid var(--ic-border);
	border-radius: var(--ic-r-lg);
}
.ic-calendar .ic-empty-banner[hidden] { display: none; }
.ic-calendar .ic-empty-banner-icon {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	color: var(--ic-brand-ink);
}
.ic-calendar .ic-empty-banner-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ic-calendar .ic-empty-banner-text strong {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 500;
	font-size: 17px;
	color: var(--ic-brand-ink);
	letter-spacing: -0.01em;
}
.ic-calendar .ic-empty-banner-text span {
	font-size: 13px;
	color: var(--ic-text-2);
}

/* ============================================ List view (opt-in)
   `view="auto"` (default) = grid at every viewport. The grid's own mobile
   breakpoints (480px / 720px above) keep it readable and compact on phones.
   `view="list"` explicitly switches to the vertical event list. */
.ic-calendar .ic-cal-month-list { display: none; }
.ic-calendar.ic-view-list .ic-cal-month { display: none; }
.ic-calendar.ic-view-list .ic-cal-weekdays { display: none; }
.ic-calendar.ic-view-list .ic-cal-month-list { display: block; }

.ic-calendar .ic-cal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ic-calendar .ic-cal-list-item {
	border-radius: var(--ic-r-md);
	border: 1px solid transparent;
	overflow: hidden;
	background: var(--ic-surface-2);
}
.ic-calendar .ic-cal-list-item.ic-is-partial { background: var(--ic-partial-bg); border-color: var(--ic-partial-border); }
.ic-calendar .ic-cal-list-item.ic-is-full    { background: var(--ic-full-bg);    border-color: var(--ic-full-border); }
.ic-calendar .ic-cal-list-item.ic-is-today   { box-shadow: 0 0 0 2px var(--ic-brand-ink); }

.ic-calendar .ic-cal-list-row {
	all: unset;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
}
.ic-calendar .ic-cal-list-row:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--ic-brand-ink);
}
.ic-calendar .ic-cal-list-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	min-width: 44px;
}
.ic-calendar .ic-cal-list-day {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-size: 22px;
	line-height: 1;
	color: var(--ic-brand-ink);
}
.ic-calendar .ic-cal-list-weekday {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ic-text-3);
	margin-top: 4px;
}
.ic-calendar .ic-cal-list-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ic-calendar .ic-cal-list-status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
}
.ic-calendar .ic-cal-list-status .ic-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ic-text-3);
}
.ic-calendar .ic-is-partial .ic-cal-list-status { color: var(--ic-partial-text); }
.ic-calendar .ic-is-partial .ic-cal-list-status .ic-dot { background: var(--ic-partial-dot); }
.ic-calendar .ic-is-full .ic-cal-list-status { color: var(--ic-full-text); }
.ic-calendar .ic-is-full .ic-cal-list-status .ic-dot { background: var(--ic-full-dot); }
.ic-calendar .ic-cal-list-count {
	font-size: 11.5px;
	color: var(--ic-text-2);
}
.ic-calendar .ic-cal-list-chevron {
	flex-shrink: 0;
	color: var(--ic-text-3);
	display: grid;
	place-items: center;
}
.ic-calendar .ic-cal-list-empty {
	padding: 20px 16px;
	text-align: center;
	color: var(--ic-text-2);
	font-size: 13.5px;
	background: var(--ic-surface-2);
	border-radius: var(--ic-r-md);
	border: 1px dashed var(--ic-border);
}

/* ============================================ CTA bar (footer) */
.ic-calendar .ic-cta-bar {
	margin-top: 28px;
	padding: 18px 22px;
	background: var(--ic-surface);
	border: 1px solid var(--ic-border);
	border-radius: var(--ic-r-lg);
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
	box-shadow: var(--ic-shadow-sm);
}
.ic-calendar .ic-cta-pitch,
.ic-calendar .ic-cta-hours {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	flex: 1;
}
.ic-calendar .ic-cta-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: var(--ic-r-sm);
	background: #E8F5EE;
	color: var(--ic-free);
	display: grid;
	place-items: center;
}
.ic-calendar .ic-cta-icon-soft {
	background: #ECEDF6;
	color: #6B5BD3;
}
.ic-calendar .ic-cta-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.ic-calendar .ic-cta-text strong {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--ic-brand-ink);
	letter-spacing: -0.005em;
}
.ic-calendar .ic-cta-text span {
	font-size: 13px;
	color: var(--ic-text-2);
}
.ic-calendar .ic-cta-hours-range {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 13px;
	color: var(--ic-text-2);
}

/* Button selectors include the element (a / button) to bump specificity past
   common theme overrides, plus !important on the paint properties because
   themes very frequently force background/color on <a> links and we need to
   guarantee the CTA stays visible. */
.ic-calendar a.ic-cta-btn,
.ic-calendar button.ic-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	border: 1px solid transparent;
	text-decoration: none !important;
	cursor: pointer;
	flex-shrink: 0;
	transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ic-calendar a.ic-cta-btn:focus-visible,
.ic-calendar button.ic-cta-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.3);
}
.ic-calendar a.ic-cta-btn-primary,
.ic-calendar button.ic-cta-btn-primary {
	background: var(--ic-free) !important;
	background-color: var(--ic-free) !important;
	color: #fff !important;
	border-color: var(--ic-free) !important;
}
.ic-calendar a.ic-cta-btn-primary:hover,
.ic-calendar button.ic-cta-btn-primary:hover {
	background: #15803d !important;
	background-color: #15803d !important;
	color: #fff !important;
	border-color: #15803d !important;
	transform: translateY(-1px);
}
.ic-calendar a.ic-cta-btn-ghost,
.ic-calendar button.ic-cta-btn-ghost {
	background: var(--ic-surface) !important;
	background-color: var(--ic-surface) !important;
	color: var(--ic-text) !important;
	border-color: var(--ic-border) !important;
}
.ic-calendar a.ic-cta-btn-ghost:hover,
.ic-calendar button.ic-cta-btn-ghost:hover {
	background: var(--ic-surface-2) !important;
	background-color: var(--ic-surface-2) !important;
	color: var(--ic-text) !important;
	border-color: var(--ic-text-3) !important;
	transform: translateY(-1px);
}
/* SVG icons inside CTA buttons inherit the (possibly customized) text color. */
.ic-calendar a.ic-cta-btn-primary svg,
.ic-calendar button.ic-cta-btn-primary svg { color: var(--ic-cta-text, #fff) !important; }

/* ============================================================================
   Defensive overrides — protect interactive elements from aggressive themes.
   Themes (Elementor's reset.css, Astra, GeneratePress block defaults, etc.)
   commonly inject `button:hover { background-color: #c36; color: #fff }` rules
   that repaint EVERY button on the page. These overrides anchor our colors.
   We use literal hex values (not var()) for the CTA so even a broken CSS
   variable scope can't make the buttons disappear.
   ============================================================================ */

/* ---- CTA buttons (Contact Me / Learn More) ---- */
.ic-calendar .ic-cta-bar a.ic-cta-btn-primary,
.ic-calendar .ic-cta-bar button.ic-cta-btn-primary {
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	background: var(--ic-cta-bg, #16A34A) !important;
	background-color: var(--ic-cta-bg, #16A34A) !important;
	background-image: none !important;
	color: var(--ic-cta-text, #ffffff) !important;
	border: 1px solid var(--ic-cta-bg, #16A34A) !important;
	border-color: var(--ic-cta-bg, #16A34A) !important;
	text-decoration: none !important;
	transition: filter 0.15s ease, transform 0.15s ease !important;
}
.ic-calendar .ic-cta-bar a.ic-cta-btn-primary:hover,
.ic-calendar .ic-cta-bar a.ic-cta-btn-primary:focus,
.ic-calendar .ic-cta-bar button.ic-cta-btn-primary:hover,
.ic-calendar .ic-cta-bar button.ic-cta-btn-primary:focus {
	background: var(--ic-cta-bg, #16A34A) !important;
	background-color: var(--ic-cta-bg, #16A34A) !important;
	background-image: none !important;
	border-color: var(--ic-cta-bg, #16A34A) !important;
	color: var(--ic-cta-text, #ffffff) !important;
	filter: brightness(0.9);
	transform: translateY(-1px);
}

/* Size modifiers for the CTA primary button. */
.ic-calendar .ic-cta-bar a.ic-cta-btn-size-small,
.ic-calendar .ic-cta-bar button.ic-cta-btn-size-small {
	padding: 7px 16px !important;
	font-size: 12.5px !important;
}
.ic-calendar .ic-cta-bar a.ic-cta-btn-size-medium,
.ic-calendar .ic-cta-bar button.ic-cta-btn-size-medium {
	padding: 11px 22px !important;
	font-size: 14px !important;
}
.ic-calendar .ic-cta-bar a.ic-cta-btn-size-large,
.ic-calendar .ic-cta-bar button.ic-cta-btn-size-large {
	padding: 14px 28px !important;
	font-size: 16px !important;
}
.ic-calendar .ic-cta-bar a.ic-cta-btn-size-small svg,
.ic-calendar .ic-cta-bar button.ic-cta-btn-size-small svg { width: 12px; height: 12px; }
.ic-calendar .ic-cta-bar a.ic-cta-btn-size-large svg,
.ic-calendar .ic-cta-bar button.ic-cta-btn-size-large svg { width: 16px; height: 16px; }
.ic-calendar .ic-cta-bar a.ic-cta-btn-ghost,
.ic-calendar .ic-cta-bar button.ic-cta-btn-ghost {
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	background: #ffffff !important;
	background-color: #ffffff !important;
	background-image: none !important;
	color: #0F172A !important;
	border: 1px solid #E5E1D6 !important;
	text-decoration: none !important;
}
.ic-calendar .ic-cta-bar a.ic-cta-btn-ghost:hover,
.ic-calendar .ic-cta-bar a.ic-cta-btn-ghost:focus,
.ic-calendar .ic-cta-bar button.ic-cta-btn-ghost:hover,
.ic-calendar .ic-cta-bar button.ic-cta-btn-ghost:focus {
	background: #FBFAF6 !important;
	background-color: #FBFAF6 !important;
	background-image: none !important;
	border-color: #94A3B8 !important;
	color: #0F172A !important;
}

/* ---- Month nav arrows (prev/next) ---- */
.ic-calendar .ic-month-nav .ic-nav-btn {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: var(--ic-text-2) !important;
	border: none !important;
	box-shadow: none !important;
}
.ic-calendar .ic-month-nav .ic-nav-btn:hover,
.ic-calendar .ic-month-nav .ic-nav-btn:focus {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: var(--ic-text) !important;
	box-shadow: none !important;
}

/* ---- Today nav button ---- */
.ic-calendar .ic-month-nav .ic-nav-today {
	background: var(--ic-surface) !important;
	background-color: var(--ic-surface) !important;
	background-image: none !important;
	color: var(--ic-text-2) !important;
	border: 1px solid var(--ic-border) !important;
	text-decoration: none !important;
}
.ic-calendar .ic-month-nav .ic-nav-today:hover,
.ic-calendar .ic-month-nav .ic-nav-today:focus {
	background: var(--ic-brand-ink) !important;
	background-color: var(--ic-brand-ink) !important;
	background-image: none !important;
	border-color: var(--ic-brand-ink) !important;
	color: #ffffff !important;
}

/* ---- Day cells — defend per-status backgrounds against theme button:hover ---- */
.ic-calendar .ic-cal-grid button.ic-day {
	color: inherit !important;
	background-image: none !important;
	text-decoration: none !important;
}
.ic-calendar .ic-cal-grid button.ic-day.ic-is-free,
.ic-calendar .ic-cal-grid button.ic-day.ic-is-free:hover,
.ic-calendar .ic-cal-grid button.ic-day.ic-is-free:focus {
	background: #FFFFFF !important;
	background-color: #FFFFFF !important;
}
.ic-calendar .ic-cal-grid button.ic-day.ic-is-partial,
.ic-calendar .ic-cal-grid button.ic-day.ic-is-partial:hover,
.ic-calendar .ic-cal-grid button.ic-day.ic-is-partial:focus {
	background: #FEFAF0 !important;
	background-color: #FEFAF0 !important;
}
.ic-calendar .ic-cal-grid button.ic-day.ic-is-full,
.ic-calendar .ic-cal-grid button.ic-day.ic-is-full:hover,
.ic-calendar .ic-cal-grid button.ic-day.ic-is-full:focus {
	background: #FDF1F1 !important;
	background-color: #FDF1F1 !important;
}
.ic-calendar .ic-cal-grid .ic-day.ic-is-overflow,
.ic-calendar .ic-cal-grid .ic-day.ic-is-overflow:hover {
	background: #FFFFFF !important;
	background-color: #FFFFFF !important;
}

/* ---- Day cells: no corner radius now that they share edges inside the
   outer card. Skeleton cells match. Defends against themes that try to
   round buttons globally. ---- */
.ic-calendar .ic-day { border-radius: 0 !important; }
.ic-calendar .ic-cal-skeleton .ic-skeleton-day { border-radius: 0 !important; }

/* ---- Today cell: green ring via INSET box-shadow (not border) so it sits
   inside the cell without disturbing the shared grid borders. Hardcoded
   green + !important so neither theme button styles nor status-tint
   defenses below can override it. ---- */
.ic-calendar .ic-cal-grid .ic-day.ic-is-today,
.ic-calendar .ic-cal-grid button.ic-day.ic-is-today,
.ic-calendar .ic-cal-grid button.ic-day.ic-is-today:hover,
.ic-calendar .ic-cal-grid button.ic-day.ic-is-today:focus {
	box-shadow: inset 0 0 0 2px #16A34A !important;
}

/* ---- Selected (last-clicked) cell: same green hue at ~45% opacity, listed
   AFTER today so when both classes apply, the selected ring wins. ---- */
.ic-calendar .ic-cal-grid .ic-day.ic-is-selected,
.ic-calendar .ic-cal-grid button.ic-day.ic-is-selected,
.ic-calendar .ic-cal-grid button.ic-day.ic-is-selected:hover,
.ic-calendar .ic-cal-grid button.ic-day.ic-is-selected:focus {
	box-shadow: inset 0 0 0 2px rgba(22, 163, 74, 0.45) !important;
}

/* ---- Status pill (tinted background + colored text, lives on the parent
   .ic-day-status — see lines ~224 for the main rule). Re-asserted here
   with !important so theme typography resets can't strip the pill background. ---- */
.ic-calendar .ic-day .ic-day-status {
	background-color: var(--ic-surface-3) !important;
}
.ic-calendar .ic-day.ic-is-free .ic-day-status {
	background-color: var(--ic-free-bg) !important;
	color: var(--ic-free-text) !important;
}
.ic-calendar .ic-day.ic-is-partial .ic-day-status {
	background-color: var(--ic-partial-bg) !important;
	color: var(--ic-partial-text) !important;
}
.ic-calendar .ic-day.ic-is-full .ic-day-status {
	background-color: var(--ic-full-bg) !important;
	color: var(--ic-full-text) !important;
}
.ic-calendar .ic-day .ic-day-status .ic-day-status-label {
	color: inherit !important;
	background: transparent !important;
}

/* On phones the label text is hidden (font-size: 0 from the existing mobile rule),
   so suppress the pill background too — otherwise we'd render a tiny empty bar. */
@media (max-width: 480px) {
	.ic-calendar .ic-day .ic-day-status {
		background-color: transparent !important;
		padding: 0 !important;
	}
}