/**
 * ThemeFour Shamsi — [shamsi_desk_calendar] widget.
 *
 * A "roomiizi" (desk) style month calendar: week-days run down the right-hand
 * side as rows and the weeks of the month become columns, mirroring a printed
 * Iranian desk calendar. Each cell shows the Jalali day (large) with the
 * Gregorian day (small); the header shows the Jalali month/year plus the
 * Gregorian and Hijri month ranges the month spans.
 *
 * Self-contained. Colors come from inline CSS variables set by the shortcode
 * and default to the brand palette: Persian turquoise #0e9c9c for the header
 * and "today", a saffron gradient for the weekday pills and a muted red for
 * Fridays. Uses logical properties throughout so it stays correct in RTL.
 */

.tfd-cal {
	--tfd-accent: #0e9c9c;
	--tfd-accent-2: #12b7b0;
	--tfd-holiday: #c0392b;
	--tfd-saffron: #e8a93d;
	--tfd-radius: 18px;
	--tfd-gap: 6px;
	--tfd-cell-min: 46px;
	--tfd-cell-block: 46px;
	--tfd-wd-min: 64px;
	--tfd-pad: 20px 18px 18px;
	--tfd-ink: #1f2a30;
	--tfd-muted: #7c8a92;
	--tfd-line: #e7eeee;
	--tfd-soft: #f5f9f9;
	--tfd-paper: #ffffff;

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

	/* Size container: the layout must react to the space the calendar is
	   actually given (narrow sidebar, Elementor column, phone), not to the
	   viewport. The @media block below is the fallback for browsers without
	   container queries. */
	container-type: inline-size;
	container-name: tfd;
}

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

/* ---------- Paper + spiral binding ---------- */
.tfd-paper {
	position: relative;
	margin-block-start: 14px;
	padding: var(--tfd-pad);
	border: 1px solid var(--tfd-line);
	border-radius: var(--tfd-radius);
	background:
		linear-gradient(180deg, #fff 0%, #fbfdfd 100%);
	box-shadow:
		0 1px 2px rgba(7, 64, 63, 0.05),
		0 18px 40px -18px rgba(7, 64, 63, 0.18);
}

/* Spiral binding rings across the top edge. */
.tfd-spiral {
	position: absolute;
	inset-block-start: -14px;
	inset-inline: 22px;
	block-size: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	pointer-events: none;
}

.tfd-spiral span {
	position: relative;
	inline-size: 12px;
	block-size: 20px;
	border-radius: 6px;
	background: linear-gradient(180deg, #cdd8d8 0%, #9fb0b0 55%, #7d9090 100%);
	box-shadow:
		inset 0 -2px 2px rgba(0, 0, 0, 0.18),
		0 1px 1px rgba(0, 0, 0, 0.12);
}

.tfd-spiral span::after {
	content: "";
	position: absolute;
	inset-block-start: 8px;
	inline-size: 12px;
	block-size: 5px;
	border-radius: 3px;
	background: rgba(7, 64, 63, 0.16);
}

/* ---------- Header ---------- */
.tfd-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-block-end: 16px;
}

.tfd-head-main {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
}

/* "Today" bar. A full-width row of its own at every size, so the header reads
   the same on desktop and on a phone. When month navigation is on it is a real
   button that jumps the calendar back to the current month. Its date is
   re-rendered client-side from the visitor's clock, so it stays true on
   full-page-cached pages. */
.tfd-todayrow {
	display: flex;
	justify-content: center;
}

.tfd-today-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	inline-size: 100%;
	margin: 0;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--tfd-accent) 22%, var(--tfd-line));
	background: color-mix(in srgb, var(--tfd-accent) 7%, #fff);
	color: inherit;
	font-family: inherit;
	font-size: 0.86em;
	line-height: 1.2;
	text-align: center;
}

/* Interactive variant: the shortcut back to today. */
button.tfd-today-label {
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

button.tfd-today-label:hover {
	background: color-mix(in srgb, var(--tfd-accent) 14%, #fff);
	border-color: color-mix(in srgb, var(--tfd-accent) 40%, var(--tfd-line));
	transform: translateY(-1px);
}

button.tfd-today-label:active {
	transform: translateY(0);
}

button.tfd-today-label:focus-visible {
	outline: 2px solid var(--tfd-accent);
	outline-offset: 2px;
}

/* Already showing the current month: nothing to jump back to, so the return
   affordance is hidden and the hover lift is dropped. */
.tfd-today-current .tfd-today-go {
	display: none;
}

button.tfd-today-current:hover {
	transform: none;
}

.tfd-today-go {
	display: inline-flex;
	margin-inline-start: 2px;
	color: var(--tfd-accent);
}

.tfd-today-go svg {
	inline-size: 14px;
	block-size: 14px;
	display: block;
}

.tfd-today-dot {
	flex: 0 0 auto;
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background: var(--tfd-accent);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--tfd-accent) 55%, transparent);
	animation: tfd-pulse 2.4s ease-out infinite;
}

@keyframes tfd-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tfd-accent) 50%, transparent); }
	70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--tfd-accent) 0%, transparent); }
	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tfd-accent) 0%, transparent); }
}

.tfd-today-cap {
	font-weight: 600;
	color: var(--tfd-muted);
}

.tfd-today-date {
	font-weight: 800;
	color: color-mix(in srgb, var(--tfd-accent) 78%, #000);
}

.tfd-month {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 18px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--tfd-accent) 0%, var(--tfd-accent-2) 100%);
	color: #fff;
	box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--tfd-accent) 60%, transparent);
	white-space: nowrap;
}

.tfd-month-name {
	font-size: 1.5em;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.tfd-month-year {
	font-size: 0.95em;
	font-weight: 700;
	opacity: 0.92;
}

.tfd-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 34px;
	block-size: 34px;
	padding: 0;
	border: 1px solid var(--tfd-line);
	border-radius: 10px;
	background: var(--tfd-paper);
	color: var(--tfd-accent);
	line-height: 0;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

.tfd-nav svg {
	inline-size: 17px;
	block-size: 17px;
	display: block;
}

.tfd-nav:hover {
	background: color-mix(in srgb, var(--tfd-accent) 10%, #fff);
	border-color: color-mix(in srgb, var(--tfd-accent) 35%, var(--tfd-line));
}

.tfd-nav:active {
	transform: translateY(1px);
}

.tfd-nav:focus-visible {
	outline: 2px solid var(--tfd-accent);
	outline-offset: 1px;
}

.tfd-cal:not(.tfd-has-nav) .tfd-nav {
	display: none;
}

/* Secondary calendars (Gregorian + Hijri) sit on one row, below the month:
   Hijri on the right (RTL start), Gregorian on the left, like a printed sheet. */
.tfd-subdates {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 8px 12px;
	border-radius: 10px;
	background: var(--tfd-soft);
	font-size: 0.86em;
	font-weight: 600;
	color: var(--tfd-muted);
}

.tfd-sub-hijri {
	color: color-mix(in srgb, var(--tfd-accent) 72%, #000);
}

.tfd-sub-greg {
	/* Isolated, but not forced to LTR: WordPress localizes the Gregorian month
	   names, so on a Persian site this run is right-to-left. Isolation alone
	   keeps a Latin run ("June, July 2020") rendering correctly too. */
	unicode-bidi: isolate;
}

/* ---------- Body grid ---------- */
.tfd-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	margin-inline: -2px;
	padding-inline: 2px;
}

.tfd-body {
	display: grid;
	grid-template-columns: minmax(var(--tfd-wd-min), auto) repeat(var(--tfd-weeks, 6), minmax(var(--tfd-cell-min), 1fr));
	gap: var(--tfd-gap);
	min-inline-size: max-content;
}

/* Weekday label pills (right-hand column). */
.tfd-wd {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
	border-radius: 9px;
	font-size: 0.9em;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
	text-shadow: 0 1px 1px rgba(90, 50, 0, 0.28);
	background: linear-gradient(90deg, color-mix(in srgb, var(--tfd-saffron) 88%, #b5771c) 0%, var(--tfd-saffron) 55%, color-mix(in srgb, var(--tfd-saffron) 55%, #ffe08a) 100%);
	box-shadow: 0 3px 8px -4px color-mix(in srgb, var(--tfd-saffron) 65%, transparent);
}

.tfd-wd-holiday {
	background: linear-gradient(90deg, var(--tfd-holiday) 0%, color-mix(in srgb, var(--tfd-holiday) 55%, #ff8a7a) 100%);
	box-shadow: 0 3px 8px -4px color-mix(in srgb, var(--tfd-holiday) 60%, transparent);
}

/* Day cells. */
.tfd-cell {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--tfd-cell-block);
	border: 1px solid var(--tfd-line);
	border-radius: 10px;
	background: var(--tfd-paper);
	font-variant-numeric: tabular-nums;
	transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.tfd-cell.tfd-empty {
	border-style: dashed;
	border-color: color-mix(in srgb, var(--tfd-line) 70%, #fff);
	background: transparent;
	box-shadow: none;
}

.tfd-day .tfd-jd {
	font-size: 1.28em;
	font-weight: 800;
	line-height: 1;
	color: var(--tfd-ink);
}

/* Small Gregorian day number, tucked in the top-left corner of the cell. */
.tfd-day .tfd-greg {
	position: absolute;
	inset-block-start: 3px;
	inset-inline-end: 5px;
	font-size: 0.62em;
	font-weight: 700;
	color: var(--tfd-muted);
	line-height: 1;
}

.tfd-day:hover {
	border-color: color-mix(in srgb, var(--tfd-accent) 35%, var(--tfd-line));
	box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--tfd-accent) 55%, transparent);
	transform: translateY(-1px);
}

/* Friday cells (holiday tint). */
.tfd-day.tfd-holiday {
	background: color-mix(in srgb, var(--tfd-holiday) 7%, #fff);
	border-color: color-mix(in srgb, var(--tfd-holiday) 22%, var(--tfd-line));
}

.tfd-day.tfd-holiday .tfd-jd {
	color: var(--tfd-holiday);
}

/* Today. */
.tfd-day.tfd-today {
	background: linear-gradient(135deg, var(--tfd-accent) 0%, var(--tfd-accent-2) 100%);
	border-color: transparent;
	box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--tfd-accent) 65%, transparent);
}

.tfd-day.tfd-today .tfd-jd {
	color: #fff;
}

.tfd-day.tfd-today .tfd-greg {
	color: rgba(255, 255, 255, 0.85);
}

/* Today wins over the Friday tint when they coincide. */
.tfd-day.tfd-today.tfd-holiday .tfd-jd {
	color: #fff;
}

/* ---------- Fallbacks / a11y ---------- */
@supports not (background: color-mix(in srgb, red 10%, white)) {
	.tfd-day.tfd-holiday {
		background: #fdf2f1;
	}
	.tfd-wd {
		background: var(--tfd-saffron);
	}
	.tfd-wd-holiday {
		background: var(--tfd-holiday);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tfd-cell,
	.tfd-nav,
	button.tfd-today-label {
		transition: none;
	}
	.tfd-today-dot {
		animation: none;
	}
}

/* ---------- Responsive ----------
   A six-week desk sheet is intrinsically wide. Rather than forcing a
   horizontal scroll on phones, the cell/label minimums shrink in two steps and
   the max-content floor is lifted, so the grid genuinely fits a 360px screen.
   .tfd-scroll stays as a safety net for extreme cases (very long weekday
   translations, huge base font). */
@container tfd (max-width: 600px) {
	.tfd-cal {
		--tfd-gap: 5px;
		--tfd-cell-min: 40px;
		--tfd-cell-block: 42px;
		--tfd-wd-min: 54px;
		--tfd-pad: 16px 12px 14px;
	}
	.tfd-body {
		min-inline-size: 0;
	}
	.tfd-month-name {
		font-size: 1.3em;
	}
	.tfd-subdates {
		font-size: 0.78em;
		padding: 7px 10px;
	}
	.tfd-wd {
		font-size: 0.78em;
		padding: 6px 6px;
	}
	.tfd-day .tfd-jd {
		font-size: 1.1em;
	}
	.tfd-day .tfd-greg {
		font-size: 0.58em;
	}
	.tfd-spiral {
		inset-inline: 16px;
	}
}

@container tfd (max-width: 400px) {
	.tfd-cal {
		--tfd-gap: 4px;
		--tfd-cell-min: 33px;
		--tfd-cell-block: 38px;
		--tfd-wd-min: 46px;
		--tfd-pad: 14px 10px 12px;
	}
	.tfd-wd {
		font-size: 0.7em;
		padding: 5px 4px;
	}
	.tfd-day .tfd-jd {
		font-size: 1em;
	}
	.tfd-day .tfd-greg {
		font-size: 0.54em;
		inset-block-start: 2px;
		inset-inline-end: 3px;
	}
	.tfd-cell {
		border-radius: 8px;
	}
	.tfd-today-label {
		font-size: 0.8em;
		padding: 6px 12px;
	}
}

/* Fallback for browsers without container queries. */
@supports not (container-type: inline-size) {
	@media (max-width: 600px) {
		.tfd-cal {
			--tfd-gap: 5px;
			--tfd-cell-min: 40px;
			--tfd-cell-block: 42px;
			--tfd-wd-min: 54px;
			--tfd-pad: 16px 12px 14px;
		}
		.tfd-body {
			min-inline-size: 0;
		}
		.tfd-month-name {
			font-size: 1.3em;
		}
		.tfd-subdates {
			font-size: 0.78em;
			padding: 7px 10px;
		}
		.tfd-wd {
			font-size: 0.78em;
			padding: 6px 6px;
		}
		.tfd-day .tfd-jd {
			font-size: 1.1em;
		}
		.tfd-day .tfd-greg {
			font-size: 0.58em;
		}
		.tfd-spiral {
			inset-inline: 16px;
		}
	}

	@media (max-width: 400px) {
		.tfd-cal {
			--tfd-gap: 4px;
			--tfd-cell-min: 33px;
			--tfd-cell-block: 38px;
			--tfd-wd-min: 46px;
			--tfd-pad: 14px 10px 12px;
		}
		.tfd-wd {
			font-size: 0.7em;
			padding: 5px 4px;
		}
		.tfd-day .tfd-jd {
			font-size: 1em;
		}
		.tfd-day .tfd-greg {
			font-size: 0.54em;
			inset-block-start: 2px;
			inset-inline-end: 3px;
		}
		.tfd-cell {
			border-radius: 8px;
		}
		.tfd-today-label {
			font-size: 0.8em;
			padding: 6px 12px;
		}
	}
}