/*
 * Prayer timetable.
 *
 * Six twelve-page PDFs — three zones, two years — every one embedded as an open
 * flipbook. On a phone that came to 41,420 pixels, because each book falls to
 * its simple view and stacks twelve full-width scans. Five of the six are now
 * behind a disclosure.
 *
 * Every custom property carries a fallback. The plugin owns this markup
 * (ADR-001) and has to keep looking like itself under a theme that has never
 * heard of these tokens.
 */

.jmns-takwim__viewer {
	margin-block: var(--wp--preset--spacing--30, 1rem) var(--wp--preset--spacing--50, 2rem);
	border: 1px solid var(--wp--preset--color--border, #DCE4DF);
	border-radius: var(--r-card, 16px);
	background-color: var(--wp--preset--color--surface, #fff);
}

/*
 * The disclosure is the control, so it carries a control's target: 44px of
 * height, and the whole row is clickable rather than the words alone.
 */
.jmns-takwim__summary {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 0.5rem);
	min-block-size: 44px;
	padding: var(--wp--preset--spacing--20, 0.75rem) var(--wp--preset--spacing--30, 1rem);
	border-radius: var(--r-card, 16px);
	color: var(--wp--preset--color--interactive, #245746);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

/* Safari draws its own triangle through `::-webkit-details-marker`. */
.jmns-takwim__summary::-webkit-details-marker {
	display: none;
}

/*
 * The chevron is the only thing that says open or shut, so it is drawn rather
 * than left to the default marker — and it turns rather than swaps, which is
 * one element instead of two states to keep in step.
 */
.jmns-takwim__summary::before {
	content: "";
	flex: none;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform var(--t-fast, 150ms) var(--ease, ease);
}

.jmns-takwim__viewer[open] > .jmns-takwim__summary::before {
	transform: rotate(45deg);
}

.jmns-takwim__summary:hover {
	color: var(--wp--preset--color--interactive-hover, #173D32);
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
}

.jmns-takwim__summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--interactive, #245746);
	outline-offset: 2px;
}

/* The book sits inside the card, so it does not need the border it draws for
   itself when it stands alone in an article. */
.jmns-takwim__viewer > .jmns-flipbook {
	margin-block: 0;
	padding: var(--wp--preset--spacing--30, 1rem);
	padding-block-start: 0;
}

@media (prefers-reduced-motion: reduce) {
	.jmns-takwim__summary::before {
		transition: none;
	}
}

/* ===================================================== this month, as text == */

/*
 * The month the visitor is actually in, above the year's scans.
 *
 * This page is the most visited on the portal and carried no prayer times at
 * all — every figure lived inside a scanned PDF, unselectable and invisible to
 * a screen reader, opening on January. The scans stay, because a stamped
 * printable year is what a masjid noticeboard needs; they are just no longer
 * the only way to learn when Asar is.
 */

.jmns-takwim-now {
	margin-block-end: var(--wp--preset--spacing--60, 3rem);
}

.jmns-takwim-now__title {
	margin-block: 0 0.25rem;
}

.jmns-takwim-now__zone {
	margin-block: 0 var(--wp--preset--spacing--30, 1rem);
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
}

.jmns-takwim-now__districts::before {
	content: " — ";
}

/*
 * The table scrolls rather than the page. Nine columns will not fit a phone at
 * a legible size, and shrinking the type to make them fit is how a timetable
 * stops being usable by the people most likely to need it.
 *
 * `tabindex="0"` in the markup is deliberate: a scrollable region has to be
 * reachable by keyboard, or the columns past the fold are unreachable without
 * a pointer.
 */
.jmns-takwim-now__scroll {
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--border, #DCE4DF);
	border-radius: var(--r-card, 16px);
	background-color: var(--wp--preset--color--surface, #fff);
}

.jmns-takwim-now__scroll:focus-visible {
	outline: var(--jmns-focus-width, 3px) solid var(--wp--preset--color--interactive, #245746);
	outline-offset: 2px;
}

.jmns-takwim-now__table {
	inline-size: 100%;
	/*
	 * `separate`, because the date column and the header row are both sticky
	 * and collapsed borders have no box of their own to stick to — Chrome
	 * leaves the edges behind when the cells move. Row edges are therefore
	 * drawn per cell further down.
	 */
	border-collapse: separate;
	border-spacing: 0;
	/* Times only line up column to column when the digits are the same width. */
	font-variant-numeric: tabular-nums;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
}

/*
 * Ink, stated rather than inherited, and stated loudly enough to win.
 *
 * `Content\Render` wraps every table in the body in `.jmns-table`, and the
 * theme styles `.jmns-table th` as a filled dark header with near-white text —
 * correct for its own tables, fatal here, where the header is a pale tint and
 * the row headers sit on white. Every Gregorian date rendered white on white.
 * The Hijri line looked fine only because that span sets its own colour.
 *
 * Both selectors were `(0,2,1)` and the theme loads second, so specificity had
 * to go up rather than the value simply being restated. The section class does
 * that honestly, without `!important`.
 */
.jmns-takwim-now .jmns-takwim-now__table th,
.jmns-takwim-now .jmns-takwim-now__table td {
	padding: 0.55rem 0.75rem;
	color: var(--wp--preset--color--text-primary, #1F2925);
	text-align: end;
	white-space: nowrap;
}

.jmns-takwim-now .jmns-takwim-now__table thead th {
	position: sticky;
	inset-block-start: 0;
	z-index: 1;
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
	color: var(--wp--preset--color--text-primary, #1F2925);
	font-size: var(--wp--preset--font-size--caption, 0.8125rem);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/*
 * The date column stays put while the times scroll past it. A time with no
 * date attached is not a fact, and on a phone the date is the first thing to
 * leave the viewport.
 */
.jmns-takwim-now .jmns-takwim-now__table tbody th,
.jmns-takwim-now .jmns-takwim-now__table thead th:first-child {
	position: sticky;
	inset-inline-start: 0;
	/* Times read as a column of figures and align to the end; the date is a
	   label and aligns to the start. Both need the section class, or the
	   end-alignment above out-specifies them. */
	text-align: start;
}

.jmns-takwim-now .jmns-takwim-now__table tbody th {
	background-color: var(--wp--preset--color--surface, #fff);
	font-weight: 600;
}

.jmns-takwim-now__table thead th:first-child {
	z-index: 2;
}

.jmns-takwim-now__table tbody tr + tr th,
.jmns-takwim-now__table tbody tr + tr td {
	border-block-start: 1px solid var(--wp--preset--color--divider, #E4EAE6);
}

/* The header's own edge, which `collapse` used to supply. */
.jmns-takwim-now__table thead th {
	border-block-end: 1px solid var(--wp--preset--color--border, #DCE4DF);
}

/*
 * The sticky date column needs an opaque background of its own — times scroll
 * underneath it, and `inherit` resolves to transparent on a cell.
 */
.jmns-takwim-now__table tbody th {
	box-shadow: 1px 0 0 0 var(--wp--preset--color--divider, #E4EAE6);
}

.jmns-takwim-now__day {
	display: block;
}

.jmns-takwim-now__hijri {
	display: block;
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: var(--wp--preset--font-size--caption, 0.8125rem);
	font-weight: 400;
}

/*
 * Today, by tint and a rule rather than a fill.
 *
 * The prayer bar learned this the hard way: a solid dark block is the loudest
 * thing on a page and wins attention it has not earned. Thirty-one rows need
 * one to be findable at a glance, not to shout — so a wash of the brand tint,
 * and a bar down the leading edge to survive being scrolled to.
 */
.jmns-takwim-now__table tbody tr.is-today th,
.jmns-takwim-now__table tbody tr.is-today td {
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
	font-weight: 600;
}

.jmns-takwim-now__table tbody tr.is-today th {
	box-shadow:
		inset 3px 0 0 0 var(--wp--preset--color--interactive, #245746),
		1px 0 0 0 var(--wp--preset--color--divider, #E4EAE6);
}

.jmns-takwim-now__note {
	margin-block-start: var(--wp--preset--spacing--30, 1rem);
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
}

/* Print wants the month, not the scroll box or the pointer to the PDFs. */
@media print {
	.jmns-takwim-now__scroll {
		overflow: visible;
		border: 0;
	}

	.jmns-takwim-now__note {
		display: none;
	}

	.jmns-takwim-now__table thead th {
		position: static;
	}
}