/*
 * Prayer Times page (templates/page-prayer-times.html, setup/content/prayer-times.php). Redesign POC (soft
 * editorial): a "Chicago prayer times" opening on paper with the note on the 12° Fajr standard, then the
 * monthly table. The table is the Sacred Roots Site plugin's block (blocks/prayer-times/style.css); this file
 * restyles it for this page only: the month and its arrows in a column on the left (desktop), hairline rows,
 * Inter labels, Cormorant numerals, today in a soft crimson tint. The column headings still stick to the top
 * of the window, and the date column stays pinned when the table scrolls sideways on phones.
 */

/* Sections sit flush against each other. */
.wp-block-post-content.sr-pt-sections > * + * {
	margin-block-start: 0;
}

.sr-pt-head__note a {
	color: var(--wp--preset--color--accent-1);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	white-space: nowrap;
}

.sr-pt-head__note a:hover,
.sr-pt-head__note a:focus-visible {
	text-decoration: none;
}

/* ---------- Table section ---------- */
.sr-pt-table {
	position: relative;
	margin: 0;
	padding: 4.5vw var(--sr-gutter) 8vw;
}

/* Hairline between the opening and the table, inside the gutters. */
.sr-pt-table::before {
	content: "";
	position: absolute;
	top: 0;
	right: var(--sr-gutter);
	left: var(--sr-gutter);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 14%, transparent);
}

.sr-pt-table .sr-pt-month {
	--sr-pt-bg: var(--wp--preset--color--paper);
	--sr-pt-accent: var(--wp--preset--color--accent-1);
	--sr-pt-ink: var(--wp--preset--color--ink);
	--sr-pt-hair: color-mix(in srgb, var(--wp--preset--color--ink) 13%, var(--wp--preset--color--paper));
	/* Rows are see-through (the paper's grain shows); only cells that sit over others are solid. */
	--sr-pt-today: color-mix(in srgb, var(--wp--preset--color--accent-1) 9%, transparent);
	--sr-pt-hover: color-mix(in srgb, var(--wp--preset--color--ink) 4%, transparent);
	--sr-pt-solid: var(--wp--preset--color--paper) var(--sr-grain);
	--sr-gap: 1.6vw;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: auto 1fr;
	column-gap: var(--sr-gap);
	max-width: none;
	margin: 0;
	background: none;
	color: var(--sr-pt-ink);
	font-family: var(--wp--preset--font-family--label);
	font-size: 1rem;
	line-height: 1.4;
}

/* Month and arrows: a column on the left that follows the reader down the table. */
.sr-pt-table .sr-pt-month__nav {
	grid-area: 1 / 1 / 3 / 4;
	position: sticky;
	top: 2rem;
	align-self: start;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 1.6rem 0.8rem;
	padding: 0;
	background: none;
}

.sr-pt-table .sr-pt-month__label {
	order: -1;
	flex: 1 0 100%;
	min-width: 0;
	color: var(--sr-pt-ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.4rem, 3.6vw, 3.6rem);
	font-weight: 300;
	letter-spacing: 0;
	line-height: 0.95;
	text-align: left;
	text-transform: uppercase;
}

.sr-pt-table .sr-pt-month__arrow {
	width: 44px;
	height: 44px;
	border-color: color-mix(in srgb, var(--wp--preset--color--ink) 35%, transparent);
	color: var(--sr-pt-ink);
	font-family: var(--wp--preset--font-family--label);
	font-size: 15px;
	font-weight: 300;
}

.sr-pt-table .sr-pt-month__arrow:hover,
.sr-pt-table .sr-pt-month__arrow:focus-visible {
	border-color: var(--sr-pt-accent);
	background: var(--sr-pt-accent);
	color: var(--wp--preset--color--base);
}

.sr-pt-table .sr-pt-month__head,
.sr-pt-table .sr-pt-month__scroll {
	grid-column: 4 / 13;
}

.sr-pt-table .sr-pt-month__head {
	grid-row: 1;
}

.sr-pt-table .sr-pt-month__scroll {
	grid-row: 2;
}

/* The table fills its column; on narrow screens it keeps a readable width and scrolls sideways. */
.sr-pt-table .sr-pt-month table {
	width: 100%;
	min-width: 660px;
	font-size: 1rem;
}

.sr-pt-table .sr-pt-month__col-date {
	width: 17%;
}

.sr-pt-table .sr-pt-month__col-time {
	width: auto;
}

/* Column headings: small spaced Inter capitals over an ink hairline. */
.sr-pt-table .sr-pt-month__head th {
	padding: 14px 8px 12px;
	border-bottom: 1px solid var(--sr-pt-ink);
	background: var(--sr-pt-solid);
	color: var(--sr-pt-ink);
	font-family: var(--wp--preset--font-family--label);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
}

.sr-pt-table .sr-pt-month__head th:first-child {
	padding-left: 0;
	box-shadow: none;
	color: var(--sr-pt-accent);
}

/* Rows: hairlines, no stripes. Times in Cormorant with lining, even-width figures. */
.sr-pt-table .sr-pt-month__table td {
	padding: 11px 8px;
	border-bottom: 1px solid var(--sr-pt-hair);
	background: none;
	color: var(--sr-pt-ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 500;
	font-variant-numeric: lining-nums tabular-nums;
	line-height: 1.2;
}

.sr-pt-table .sr-pt-month__table tr:last-child td {
	border-bottom: 1px solid var(--sr-pt-hair);
}

/* Date column: day in Inter, the Hijri date under it in crimson italic. Pinned on phones. */
.sr-pt-table .sr-pt-month__table td:first-child,
.sr-pt-table .sr-pt-month__table tr:nth-child(even) td:first-child {
	padding-left: 0;
	background: none;
	box-shadow: none;
	color: var(--sr-pt-ink);
	font-family: var(--wp--preset--font-family--label);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.35;
}

.sr-pt-table .sr-pt-month__hijri {
	margin-top: 2px;
	color: var(--sr-pt-accent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 15px;
	font-style: italic;
	font-weight: 500;
	letter-spacing: 0;
}

.sr-pt-table .sr-pt-month__table tr:nth-child(even) td {
	background: none;
}

.sr-pt-table .sr-pt-month__table tr:hover td,
.sr-pt-table .sr-pt-month__table tr:hover td:first-child {
	background-color: var(--sr-pt-hover);
}

/* Today: a soft crimson tint, crimson figures and a thin crimson rule on the left. */
.sr-pt-table .sr-pt-month__table tr.is-today td,
.sr-pt-table .sr-pt-month__table tr.is-today td:first-child,
.sr-pt-table .sr-pt-month__table tr.is-today:hover td {
	background-color: var(--sr-pt-today);
	color: var(--sr-pt-accent);
	font-weight: 600;
}

.sr-pt-table .sr-pt-month__table tr.is-today td:first-child {
	padding-left: 12px;
	box-shadow: inset 2px 0 0 var(--sr-pt-accent);
}

.sr-pt-table .sr-pt-month__scroll:focus-visible {
	outline: 2px solid var(--sr-pt-accent);
	outline-offset: 4px;
}

.sr-pt-table .sr-pt-month__loading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.2rem;
	color: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
}

@media (max-width: 781px) {
	.sr-pt-table {
		padding: 32px var(--sr-gutter) 64px;
	}

	.sr-pt-table .sr-pt-month {
		display: block;
	}

	.sr-pt-table .sr-pt-month__nav {
		position: static;
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 12px;
		padding: 0 0 24px;
	}

	.sr-pt-table .sr-pt-month__label {
		order: 0;
		flex: 1 1 auto;
		font-size: 2.2rem;
		text-align: center;
	}

	/* Fixed column widths: the date column stays pinned and the times scroll sideways under it. */
	.sr-pt-table .sr-pt-month table {
		width: 754px;
		min-width: 0;
	}

	.sr-pt-table .sr-pt-month__col-date {
		width: 146px;
	}

	.sr-pt-table .sr-pt-month__col-time {
		width: 76px;
	}

	.sr-pt-table .sr-pt-month__hijri {
		font-size: 14px;
	}

	.sr-pt-table .sr-pt-month__table td {
		padding: 10px 6px;
		font-size: 1.2rem;
	}

	.sr-pt-table .sr-pt-month__table td:first-child,
	.sr-pt-table .sr-pt-month__table tr:nth-child(even) td:first-child {
		font-size: 12.5px;
	}

	/* The pinned date column is solid, with a hairline, while the times slide under it. */
	.sr-pt-table .sr-pt-month__table td:first-child,
	.sr-pt-table .sr-pt-month__table tr:nth-child(even) td:first-child,
	.sr-pt-table .sr-pt-month__head th:first-child {
		background: var(--sr-pt-solid);
		box-shadow: 1px 0 0 var(--sr-pt-hair);
	}

	.sr-pt-table .sr-pt-month__table tr:hover td:first-child {
		background: linear-gradient(var(--sr-pt-hover), var(--sr-pt-hover)), var(--sr-pt-solid);
	}

	.sr-pt-table .sr-pt-month__table tr.is-today td:first-child {
		background: linear-gradient(var(--sr-pt-today), var(--sr-pt-today)), var(--sr-pt-solid);
		box-shadow: inset 2px 0 0 var(--sr-pt-accent), 1px 0 0 var(--sr-pt-hair);
	}
}