/**
 * Calendar grid corrections.
 *
 * The site's Customizer CSS (Appearance > Customise > Additional CSS) lays the
 * calendar body rows out as a 7-column grid, which is the right idea, but then
 * hides the leading blank cells:
 *
 *     #calendar_tbody tr      { display: grid; grid-template-columns: repeat(7, 1fr); }
 *     #calendar_tbody td.empty { display: none; }
 *
 * Hiding the blanks removes the offset that puts the 1st of the month under the
 * correct weekday, so every month whose 1st is not a Sunday rendered shifted
 * left, and the body columns no longer lined up with the Sun-Sat header, which
 * is still a real table row.
 *
 * Two fixes: keep the blanks in the grid but invisible, and give the header row
 * the same 7-column grid so both halves measure identically.
 *
 * @package Eurotrader_Market_Holidays
 */

.calendar-container table {
	display: block;
	width: 100%;
}

.calendar-container thead,
.calendar-container tbody {
	display: block;
	width: 100%;
}

.calendar-container thead tr {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0;
}

.calendar-container th {
	display: block;
}

/* Blank leading and trailing cells hold their column instead of collapsing. */
.calendar-container #calendar_tbody td.empty {
	display: block !important;
	visibility: hidden;
	cursor: default;
}

/* -------------------------------------------------------------------------
 * Day states.
 *
 * The theme painted "today" and "selected" identically (both solid #10182A),
 * and a day that was both today and a holiday rendered white text on a pale
 * grey fill. Each state now owns different properties, so they combine:
 * holiday sets the fill, today sets the ring, selected overrides both.
 * ---------------------------------------------------------------------- */

.calendar-container #calendar_tbody td:not(.empty) span {
	transition: border-color .12s ease, background-color .12s ease;
}

.calendar-container #calendar_tbody td:not(.empty):hover span {
	border-color: #d8d8d8;
}

/* Market holiday — brand tint, never mistaken for a selection. */
.calendar-container #calendar_tbody td.holiday span {
	background-color: #ebe3fd;
	border-color: #d3c2fb;
	color: #4a18b0;
	font-weight: 600;
}

/* Today — ring only, so it never competes with the selected day. */
.calendar-container #calendar_tbody td.today span {
	background-color: transparent;
	border-color: #10182a;
	color: #10182a;
	font-weight: 700;
}

/* Today that is also a holiday keeps the tint and gains the ring. */
.calendar-container #calendar_tbody td.today.holiday span {
	background-color: #ebe3fd;
	color: #4a18b0;
}

/* Selected — strongest state, always wins. */
.calendar-container #calendar_tbody td.active span,
.calendar-container #calendar_tbody td.active.today span,
.calendar-container #calendar_tbody td.active.holiday span {
	background-color: #10182a;
	border-color: #10182a;
	color: #ffffff;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Legend
 * ---------------------------------------------------------------------- */

.etmh-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	align-items: center;
	justify-content: center;
	margin: 18px auto 0;
	padding: 14px 8px 0;
	max-width: 400px;
	border-top: 1px solid #e4e4e4;
	list-style: none;
	font-family: "Gilroy", sans-serif;
	font-size: 13px;
	line-height: 1.4;
	color: #5a6472;
}

.etmh-legend li {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
}

.etmh-key {
	width: 14px;
	height: 14px;
	border-radius: 4px;
	border: 1px solid transparent;
	flex: 0 0 auto;
}

.etmh-key-holiday { background-color: #ebe3fd; border-color: #d3c2fb; }
.etmh-key-today   { background-color: transparent; border-color: #10182a; }
.etmh-key-active  { background-color: #10182a; border-color: #10182a; }

@media (max-width: 767px) {
	.etmh-legend { max-width: 100%; }
}