/* ── samostan/event-calendar ─────────────────────────────────────────────
 * Month grid in the samostan skin: cream card, serif month label, gold
 * event markers, navy tooltip. Runtime: assets/js/calendar.js */

.sfcal {
	background: var(--sf-color-cream, #f6f5f2);
	border-radius: 30px;
	padding: 40px 32px 32px;
}
@media (min-width: 1024px) {
	.sfcal { padding: 56px 64px 48px; }
}

/* ── Month navigation ── */
.sfcal__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	margin-bottom: 32px;
}
.sfcal__month {
	min-width: 220px;
	text-align: center;
	font-size: 28px;
	line-height: 1.3;
	color: var(--sf-color-ink, #27282c);
}
.sfcal__btn {
	width: 44px;
	height: 44px;
	border: 1px solid var(--sf-color-sand, #c1a78c);
	border-radius: 50%;
	background: none;
	font-size: 18px;
	line-height: 1;
	color: var(--sf-color-ink, #27282c);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.sfcal__btn:hover {
	background: var(--sf-color-pine, #1a283a);
	color: #fff;
}

/* ── Day headers ── */
.sfcal__days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	margin-bottom: 10px;
}
.sfcal__dayhdr {
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sf-color-body, #494949);
}

/* ── Date grid ── */
.sfcal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
}
.sfcal__cell {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 0.72;
	border-radius: 12px;
	background: #fff;
	color: var(--sf-color-ink, #27282c);
	text-decoration: none;
}
.sfcal__cell--empty { background: none; }
.sfcal__num { font-size: 15px; line-height: 1; }

/* today: gold outline */
.sfcal__cell--today { box-shadow: inset 0 0 0 2px var(--sf-color-gold, #a89b6f); }

/* standard feast (katolički kalendar): white tile, gold dot */
.sfcal__cell--feast::after {
	content: "";
	position: absolute;
	bottom: 7px;
	left: 50%;
	transform: translateX(-50%);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sf-color-gold, #a89b6f);
}
/* event day: gold fill + dot */
.sfcal__cell--event {
	background: var(--sf-color-gold, #a89b6f);
	color: #fff;
	cursor: default;
}
a.sfcal__cell--event { cursor: pointer; }
.sfcal__cell--event .sfcal__num { font-weight: 700; }
.sfcal__cell--event::after {
	content: "";
	position: absolute;
	bottom: 7px;
	left: 50%;
	transform: translateX(-50%);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
}

/* ── Tooltip ── */
.sfcal__tip {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	z-index: 30;
	min-width: 210px;
	max-width: 280px;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--sf-color-navy, #2b3542);
	color: #fff;
	font-size: 14px;
	line-height: 1.45;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.sfcal__tip strong { display: block; margin-bottom: 2px; }
.sfcal__tip span { display: block; color: rgba(255, 255, 255, 0.85); }
.sfcal__tip hr { margin: 10px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.sfcal__tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--sf-color-navy, #2b3542);
}
.sfcal__cell--event:hover .sfcal__tip,
.sfcal__cell--feast:hover .sfcal__tip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
/* first-row tooltips would clip above the card — flip them below the cell */
.sfcal__cell:nth-child(-n+7) .sfcal__tip {
	bottom: auto;
	top: calc(100% + 10px);
	transform: translateX(-50%) translateY(-4px);
}
.sfcal__cell:nth-child(-n+7) .sfcal__tip::after {
	top: auto;
	bottom: 100%;
	border-top-color: transparent;
	border-bottom-color: var(--sf-color-navy, #2b3542);
}
.sfcal__cell:nth-child(-n+7):hover .sfcal__tip { transform: translateX(-50%) translateY(0); }

/* ── Legend ── */
.sfcal__legend {
	margin-top: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13px;
	color: var(--sf-color-body, #494949);
}
.sfcal__legend-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--sf-color-gold, #a89b6f);
}
.sfcal__legend-feast {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--sf-color-gold, #a89b6f);
	position: relative;
}
.sfcal__legend-feast::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--sf-color-gold, #a89b6f);
}