/**
 * ThemeFour Shamsi — the Bahesab calendar panel.
 *
 * A card showing one day in three calendars at once, Jalali, Gregorian and
 * Hijri, with the day's name in each, plus a live clock on the site's timezone.
 *
 * Everything that could plausibly be themed is a custom property, set once on
 * the root by the shortcode, so a site can restyle the panel from the shortcode
 * attributes alone without a line of CSS.
 */

.tfb-panel {
	--tfb-accent: #0e9c9c;
	--tfb-ink: #1f2a30;
	--tfb-muted: #7b8b93;
	--tfb-surface: #fff;
	--tfb-chip: #f2f7f7;
	--tfb-line: #e6eeee;
	--tfb-radius: 18px;

	box-sizing: border-box;
	max-inline-size: 640px;
	margin-inline: auto;
	padding: 22px clamp(14px, 4vw, 30px) 18px;
	border-radius: var(--tfb-radius);
	background: var(--tfb-surface);
	border: 1px solid var(--tfb-line);
	box-shadow: 0 18px 40px -30px rgba(16, 42, 48, 0.55);
	color: var(--tfb-ink);
	direction: rtl;
	font-size: 15px;
	line-height: 1.8;
}

.tfb-panel * {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- header */

.tfb-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block-end: 18px;
}

.tfb-title {
	flex: 0 0 auto;
	margin: 0;
	font-size: 1.05em;
	font-weight: 700;
	color: var(--tfb-accent);
	white-space: nowrap;
}

/* The two rules either side of the title. They are decoration, so they take
   the leftover space rather than a fixed width, and collapse to nothing on a
   narrow screen instead of forcing the title to wrap. */
.tfb-rule {
	flex: 1 1 auto;
	min-inline-size: 0;
	block-size: 1px;
	background: var(--tfb-line);
}

.tfb-nav {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--tfb-accent);
	-webkit-text-fill-color: var(--tfb-accent);
	font: inherit;
	font-size: 0.86em;
	cursor: pointer;
	white-space: nowrap;
}

.tfb-nav:hover,
.tfb-nav:focus,
.tfb-nav:active {
	background: var(--tfb-chip);
	color: var(--tfb-accent);
	-webkit-text-fill-color: var(--tfb-accent);
}

.tfb-nav svg {
	inline-size: 14px;
	block-size: 14px;
	stroke: currentColor;
	fill: none;
}

/* ----------------------------------------------------------------- rows */

/* Anything this widget hides has to be hidden by a rule of our own.
 *
 * The panel's own builder hides a row by setting the `hidden` attribute, and
 * `hidden` works through `[hidden] { display: none }` in the browser's default
 * stylesheet. A declaration written by the page always beats the browser's
 * default, whatever its specificity, so `.tfb-row { display: flex }` below was
 * quietly winning and the Gregorian row, the Hijri row and the day navigation
 * stayed on screen no matter how the switches were set. The clock was the one
 * control that appeared to work, only because its block never declared a
 * display of its own.
 *
 * Two class-level selectors put this above every rule in this file, so it
 * holds wherever it sits in the cascade. */
.tfb-panel [hidden] {
	display: none;
}

.tfb-rows {
	display: grid;
	gap: 12px;
}

.tfb-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.tfb-row-text {
	flex: 1 1 auto;
	min-inline-size: 0;
	text-align: center;
	font-size: 1.18em;
	font-weight: 700;
	color: var(--tfb-accent);
}

/* The month's other name, Asad beside Mordad, Julai beside July. Secondary
   information, so it is smaller and quieter but on the same line, which is how
   the two names read as one label rather than as two facts. */
.tfb-alt {
	margin-inline-start: 6px;
	font-size: 0.72em;
	font-weight: 500;
	color: var(--tfb-muted);
	-webkit-text-fill-color: var(--tfb-muted);
}

.tfb-chip {
	flex: 0 0 auto;
	min-inline-size: 128px;
	padding: 6px 12px;
	border-radius: 10px;
	background: var(--tfb-chip);
	color: var(--tfb-ink);
	-webkit-text-fill-color: var(--tfb-ink);
	text-align: center;
	font-size: 0.95em;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	/*
	 * Every chip reads left to right, year then month then day.
	 *
	 * Without this the Jalali and Hijri chips came out reversed while the
	 * Gregorian one did not, which looked like a translation bug but was the
	 * bidirectional algorithm doing its job. The spaces around the slashes break
	 * "1405 / 5 / 8" into three separate number runs, and separate runs inside a
	 * right-to-left box are laid out right to left, so the year landed on the
	 * right and a reader scanning from the left saw the day first. The Gregorian
	 * chip escaped only because it already carried an explicit direction.
	 *
	 * `isolate` matters as much as `direction`: it stops the chip's own numbers
	 * from being reordered by the Persian text sitting beside them in the row.
	 */
	direction: ltr;
	unicode-bidi: isolate;
}

/* The Gregorian sentence, not its chip, still needs its own direction. */
.tfb-row-gregorian .tfb-row-text {
	direction: ltr;
}

/* ----------------------------------------------------------------- clock */

.tfb-clock {
	margin-block-start: 20px;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--tfb-line);
	text-align: center;
}

.tfb-clock-label {
	margin: 0 0 6px;
	font-size: 0.92em;
	color: var(--tfb-accent);
	-webkit-text-fill-color: var(--tfb-accent);
}

.tfb-clock-time {
	font-size: 2em;
	font-weight: 700;
	color: var(--tfb-accent);
	-webkit-text-fill-color: var(--tfb-accent);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	direction: ltr;
	unicode-bidi: isolate;
}

.tfb-clock-suffix {
	margin-inline-start: 6px;
	font-size: 0.44em;
	font-weight: 500;
	color: var(--tfb-muted);
	-webkit-text-fill-color: var(--tfb-muted);
}

/* ------------------------------------------------------------ variations */

.tfb-panel.is-flat {
	box-shadow: none;
}

.tfb-panel.is-bare {
	border: 0;
	box-shadow: none;
	background: transparent;
	padding-inline: 0;
}

@media (max-width: 460px) {
	.tfb-row {
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px;
	}

	.tfb-row-text {
		flex-basis: 100%;
	}

	.tfb-rule {
		display: none;
	}
}