/**
 * ThemeFour Shamsi — [shamsi_wall_calendar] widget.
 *
 * A wall-calendar sheet: a deep header carrying the month name and year with
 * the navigation controls, a week-day strip, then a grid of square tiles where
 * each tile shows the Jalali day large and the Gregorian day small. Today is
 * ringed and pulsed; Fridays and declared holidays are marked.
 *
 * Colors arrive as inline CSS variables from the shortcode and default to the
 * brand palette. Logical properties throughout, container queries for the
 * responsive steps, and every animation removed under prefers-reduced-motion.
 */

.tfw-cal {
	--tfw-accent: #0e9c9c;
	/* Derived rather than fixed, so changing accent="" alone still produces a
	   coherent header gradient. The @supports block below covers engines
	   without color-mix(). */
	--tfw-accent-deep: color-mix(in srgb, var(--tfw-accent) 42%, #062826);
	--tfw-gold: #e8a93d;
	--tfw-holiday: #c0392b;
	--tfw-radius: 22px;
	--tfw-paper: #ffffff;
	--tfw-tile: #f7f4ec;
	--tfw-ink: #2a2018;
	--tfw-muted: #7c8a92;
	--tfw-line: #ece5d8;

	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 720px;
	margin-inline: auto;
	font-family: inherit;
	line-height: 1.5;
	color: var(--tfw-ink);
	direction: rtl;

	/* The sheet has to fit the column it is placed in — a narrow sidebar on a
	   wide screen is the case a viewport media query gets wrong. */
	container-type: inline-size;
	container-name: tfw;
}

.tfw-cal *,
.tfw-cal *::before,
.tfw-cal *::after {
	box-sizing: border-box;
}

.tfw-card {
	overflow: hidden;
	border-radius: var(--tfw-radius);
	border: 1px solid var(--tfw-line);
	background: linear-gradient(180deg, var(--tfw-paper) 0%, #fffdf9 100%);
	box-shadow:
		0 1px 2px rgba(7, 64, 63, 0.05),
		0 26px 55px -28px rgba(7, 64, 63, 0.35);
}

/* ---------- Header ---------- */
.tfw-head {
	position: relative;
	overflow: hidden;
	padding: 26px 24px 22px;
	background:
		radial-gradient(ellipse at 28% -25%, rgba(255, 255, 255, 0.16), transparent 60%),
		linear-gradient(120deg, var(--tfw-accent-deep) 0%, var(--tfw-accent) 120%);
	color: #fff;
	text-align: center;
}

/* Girih-inspired dot lattice. Purely decorative, so it is a background layer
   rather than markup and stays out of the accessibility tree entirely. */
.tfw-cal[data-pattern="1"] .tfw-head::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.28;
	mix-blend-mode: overlay;
	background-image: radial-gradient(circle, color-mix(in srgb, var(--tfw-gold) 70%, transparent) 1.5px, transparent 1.6px);
	background-size: 22px 22px;
}

.tfw-head-row {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.tfw-title {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-inline-size: 0;
}

.tfw-month {
	font-size: 1.9em;
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.15;
}

.tfw-year {
	font-size: 0.82em;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: color-mix(in srgb, var(--tfw-gold) 65%, #ffffff);
	font-variant-numeric: tabular-nums;
}

.tfw-nav {
	flex: none;
	inline-size: 42px;
	block-size: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.34);
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.tfw-nav svg {
	inline-size: 20px;
	block-size: 20px;
}

.tfw-nav:hover,
.tfw-nav:focus-visible {
	background: var(--tfw-gold);
	border-color: transparent;
	color: var(--tfw-accent-deep);
	transform: scale(1.06);
}

/* Without navigation there is nothing to balance the layout, so the title
   centres itself instead of sitting off to one side. */
.tfw-cal:not(.tfw-has-nav) .tfw-head-row {
	justify-content: center;
}

.tfw-todayrow {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	margin-block-start: 16px;
}

.tfw-today-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--tfw-gold) 55%, transparent);
	background: rgba(255, 255, 255, 0.12);
	color: color-mix(in srgb, var(--tfw-gold) 60%, #ffffff);
	font-family: inherit;
	font-size: 0.82em;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.tfw-today-btn svg {
	inline-size: 15px;
	block-size: 15px;
}

.tfw-today-btn:hover,
.tfw-today-btn:focus-visible {
	background: var(--tfw-gold);
	color: var(--tfw-accent-deep);
}

/* ---------- Week-day strip ---------- */
.tfw-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8px;
	padding: 18px 18px 0;
}

.tfw-wd {
	text-align: center;
	font-size: 0.8em;
	font-weight: 700;
	color: var(--tfw-muted);
	padding-block-end: 8px;
}

.tfw-wd-holiday {
	color: var(--tfw-holiday);
}

/* ---------- Day grid ---------- */
.tfw-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8px;
	padding: 4px 18px 24px;
}

.tfw-cell {
	position: relative;
	aspect-ratio: 1 / 0.92;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
}

.tfw-empty {
	background: transparent;
}

.tfw-day {
	background: var(--tfw-tile);
	border: 1px solid rgba(43, 32, 24, 0.05);
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* :not(.tfw-today) is load-bearing, not decoration. `.tfw-day:hover` scores
   two classes and `.tfw-today` scores one, so without the exclusion the hover
   background wins over today's gradient — and since today's numerals are white,
   the cell went blank white under the pointer. */
.tfw-day:not(.tfw-today):hover {
	background: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -12px rgba(7, 64, 63, 0.4);
}

/* Today keeps its gradient and only lifts, so the hover affordance survives. */
.tfw-today:hover {
	transform: translateY(-2px);
}

.tfw-j {
	font-size: 1.05em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.tfw-g {
	margin-block-start: 2px;
	font-size: 0.68em;
	color: var(--tfw-muted);
	font-variant-numeric: tabular-nums;
}

.tfw-holiday .tfw-j {
	color: var(--tfw-holiday);
}

.tfw-holiday .tfw-g {
	color: color-mix(in srgb, var(--tfw-holiday) 65%, transparent);
}

/* A dot rather than a second colour, so a holiday that also falls on a Friday
   is still distinguishable from an ordinary Friday. */
.tfw-event::before {
	content: "";
	position: absolute;
	inset-block-end: 7px;
	inline-size: 5px;
	block-size: 5px;
	border-radius: 50%;
	background: var(--tfw-gold);
}

.tfw-today {
	background: linear-gradient(160deg,
		var(--tfw-accent-deep) 0%,
		var(--tfw-accent) 100%);
	box-shadow:
		0 0 0 3px var(--tfw-paper),
		0 0 0 5px var(--tfw-gold),
		0 14px 26px -12px color-mix(in srgb, var(--tfw-accent) 55%, transparent);
}

.tfw-today .tfw-j,
.tfw-today .tfw-g {
	color: #fff;
}

.tfw-today.tfw-event::before {
	background: #fff;
}

.tfw-today::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 18px;
	border: 1px solid var(--tfw-gold);
	animation: tfw-ring 2.4s ease-in-out infinite;
}

@keyframes tfw-ring {
	0%, 100% { opacity: 0.55; transform: scale(1); }
	50% { opacity: 0; transform: scale(1.08); }
}

/* ---------- Footer ---------- */
.tfw-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 14px 24px 20px;
	border-block-start: 1px dashed var(--tfw-line);
	font-size: 0.82em;
	color: var(--tfw-muted);
}

.tfw-clock {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--tfw-ink);
}

.tfw-dot {
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background: var(--tfw-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--tfw-accent) 25%, transparent);
	animation: tfw-blink 1.6s ease-in-out infinite;
}

@keyframes tfw-blink {
	50% { opacity: 0.35; }
}

.tfw-time {
	font-weight: 700;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
	direction: ltr;
}

/* ---------- Fallback for engines without color-mix() ---------- */
@supports not (background: color-mix(in srgb, red 10%, white)) {
	.tfw-cal { --tfw-accent-deep: #07403f; }
	.tfw-year { color: var(--tfw-gold); }
	.tfw-today-btn { color: var(--tfw-gold); }
	.tfw-dot { box-shadow: 0 0 0 4px rgba(14, 156, 156, 0.25); }
	.tfw-cal[data-pattern="1"] .tfw-head::after {
		background-image: radial-gradient(circle, rgba(232, 169, 61, 0.7) 1.5px, transparent 1.6px);
	}
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.tfw-today::after,
	.tfw-dot {
		animation: none;
	}

	.tfw-day,
	.tfw-nav,
	.tfw-today-btn {
		transition: none;
	}
}

/* ---------- Narrow containers ---------- */
@container tfw (max-width: 520px) {
	.tfw-head { padding: 20px 16px 18px; }
	.tfw-month { font-size: 1.5em; }
	.tfw-nav { inline-size: 36px; block-size: 36px; }
	.tfw-weekdays { padding: 14px 10px 0; gap: 5px; }
	.tfw-grid { padding: 4px 10px 18px; gap: 5px; }
	.tfw-cell { border-radius: 11px; }
	.tfw-j { font-size: 0.92em; }
	.tfw-g { font-size: 0.6em; }
	.tfw-foot { padding: 12px 16px 16px; }
}

@container tfw (max-width: 360px) {
	.tfw-month { font-size: 1.25em; }
	.tfw-weekdays { gap: 3px; }
	.tfw-grid { gap: 3px; }
	.tfw-cell { border-radius: 9px; }
	.tfw-g { display: none; }
	.tfw-foot { justify-content: center; }
}

/* Fallback for browsers without container queries. */
@supports not (container-type: inline-size) {
	@media (max-width: 520px) {
		.tfw-head { padding: 20px 16px 18px; }
		.tfw-month { font-size: 1.5em; }
		.tfw-nav { inline-size: 36px; block-size: 36px; }
		.tfw-weekdays { padding: 14px 10px 0; gap: 5px; }
		.tfw-grid { padding: 4px 10px 18px; gap: 5px; }
		.tfw-cell { border-radius: 11px; }
		.tfw-j { font-size: 0.92em; }
		.tfw-g { font-size: 0.6em; }
		.tfw-foot { padding: 12px 16px 16px; }
	}

	@media (max-width: 360px) {
		.tfw-month { font-size: 1.25em; }
		.tfw-g { display: none; }
	}
}