/**
 * Fixtures — front-end styles.
 *
 * Portable by design. The block inherits the host theme's font and text colour
 * and themes from two brand tokens:
 *   --fixturely-primary  (titles, scores, calendar selection, nav buttons, team names)
 *   --fixturely-accent   (HOME/AWAY + STATUS labels, result words, cancelled badge)
 * Both default to the inherited text colour (so the block blends into any site)
 * and can be set per-site from the admin colour scheme (emitted inline on the
 * container). Borders and soft fills are derived from --fixturely-primary via color-mix.
 */

.fixturely {
	/* Brand colours — set inline from the admin colour scheme when configured;
	 * otherwise they inherit the host theme via currentColor. */
	--fixturely-primary: currentColor;
	--fixturely-accent: currentColor;

	/* Derived roles. Borders/lines and soft fills come from the primary colour. */
	--fixturely-line: color-mix(in srgb, var(--fixturely-primary) 10%, transparent);
	--fixturely-soft: color-mix(in srgb, var(--fixturely-primary) 5%, transparent);
	--fixturely-radius: 8px;
	--fixturely-gap: 1em;

	color: inherit;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
}

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

/*
 * Theme isolation for interactive controls.
 *
 * WordPress themes commonly target bare button/input selectors and may add
 * padding, gradients, shadows, minimum heights or text transforms. Fixturely
 * deliberately retains the site typography, but owns the complete box model
 * and appearance of its front-end controls.
 */
.fixturely button,
.fixturely input,
.fixturely select,
.fixturely textarea {
	font: inherit;
}

.fixturely button.fixturely__weeknav-range,
.fixturely button.fixturely__cal-nav,
.fixturely button.fixturely__cal-day {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	min-width: 0;
	min-height: 0;
	max-width: none;
	background-image: none;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
}

.fixturely a.fixturely__weeknav-btn,
.fixturely a.fixturely__weeknav-today {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	background-image: none;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
}

.fixturely button:focus-visible,
.fixturely a:focus-visible,
.fixturely summary:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--fixturely-primary) 35%, transparent);
	outline-offset: 2px;
}

.fixturely--empty {
	padding: var(--fixturely-gap);
	border: 1px solid var(--fixturely-line);
	border-radius: var(--fixturely-radius);
	opacity: 0.75;
}

/* ============================================================
 * WEEK NAVIGATION
 * ============================================================ */

.fixturely__weeknav {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.6em;
	margin-bottom: calc(var(--fixturely-gap) * 1.25);
	flex-wrap: wrap;
	position: relative;
}

.fixturely button.fixturely__weeknav-range {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 11em;
	height: auto;
	padding: 0.55em 1em;
	border: 1px solid var(--fixturely-line);
	border-radius: var(--fixturely-radius);
	background-color: transparent;
	color: var(--fixturely-primary);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.fixturely__weeknav-controls {
	display: flex;
	align-items: center;
	gap: 0.4em;
}

.fixturely a.fixturely__weeknav-btn,
.fixturely a.fixturely__weeknav-today {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4em;
	height: 2.4em;
	padding: 0 0.8em;
	border: 1px solid var(--fixturely-line);
	border-radius: var(--fixturely-radius);
	background-color: transparent;
	background-image: none;
	color: var(--fixturely-primary);
	text-decoration: none;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

/* One consistent interaction for every top-nav button: a soft fill, primary
 * border kept, and explicitly no shadow (some themes add one to buttons). */
.fixturely button.fixturely__weeknav-range,
.fixturely a.fixturely__weeknav-btn,
.fixturely a.fixturely__weeknav-today {
    box-shadow: none;
    transition: background-color 0.15s ease;

}

.fixturely button.fixturely__weeknav-range:hover,
.fixturely button.fixturely__weeknav-range[aria-expanded="true"],
.fixturely a.fixturely__weeknav-btn:hover,
.fixturely a.fixturely__weeknav-today:hover {
	background: transparent;
	box-shadow: none;
    border-color: var(--fixturely-primary); 
    color: var(--fixturely-primary);
}

/* Calendar popup */
.fixturely__calendar {
	position: absolute;
	top: calc(100% + 0.4em);
	left: 0;
	z-index: 30;
	max-width: calc(100vw - 1.5rem);
	min-width: 388px;
	font-size: 0.95rem;
	padding: 0.85rem;
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--fixturely-line);
	border-radius: var(--fixturely-radius);
	box-shadow: none;
}

.fixturely__calendar[hidden] {
	display: none;
}

.fixturely__cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.6em;
}

.fixturely__cal-title {
	font-weight: 800;
}

.fixturely button.fixturely__cal-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	padding: 0;
	border: 1px solid var(--fixturely-line);
	border-radius: calc(var(--fixturely-radius) * 0.7);
	background-color: transparent;
	color: inherit;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	cursor: pointer;
}

.fixturely button.fixturely__cal-nav:hover {
	border-color: currentColor;
}

.fixturely__cal-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fixturely__cal-dow-row,
.fixturely__cal-week {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	column-gap: 0;
}

.fixturely__cal-dow {
	text-align: center;
	font-size: 0.72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	opacity: 0.55;
	padding-bottom: 0.3em;
}

.fixturely button.fixturely__cal-day {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	background-image: none;
	color: inherit;
	font-family: inherit;
	font-size: 0.92em;
	white-space: nowrap;
	word-break: normal;
	overflow-wrap: normal;
	cursor: pointer;
	box-shadow: none;
}

.fixturely button.fixturely__cal-day.is-outside {
	opacity: 0.35;
}


/* The active week (and any week being hovered) reads as one contiguous bar in
 * the primary colour: no gaps between days, rounded only at the Monday/Sunday. */
.fixturely button.fixturely__cal-day.is-inweek,
.fixturely__cal-week:hover button.fixturely__cal-day {
	background: var(--fixturely-line);
	color: var(--fixturely-primary);
	opacity: 1;
	border-radius: 0;
	box-shadow: none;
}

.fixturely__cal-week:hover button.fixturely__cal-day:first-child,
.fixturely button.fixturely__cal-day.is-inweek-start {
	border-top-left-radius: calc(var(--fixturely-radius) * 0.7);
	border-bottom-left-radius: calc(var(--fixturely-radius) * 0.7);
}

.fixturely__cal-week:hover button.fixturely__cal-day:last-child,
.fixturely button.fixturely__cal-day.is-inweek-end {
	border-top-right-radius: calc(var(--fixturely-radius) * 0.7);
	border-bottom-right-radius: calc(var(--fixturely-radius) * 0.7);
}

/* ============================================================
 * SPORT ACCORDION
 * ============================================================ */

.fixturely__accordion {
	margin-bottom: calc(var(--fixturely-gap) * 0.9);
	border: 1px solid var(--fixturely-line);
	border-radius: var(--fixturely-radius);
	overflow: hidden;
}

.fixturely summary.fixturely__accordion-summary {
	-webkit-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: calc(var(--fixturely-gap) * 1.1) calc(var(--fixturely-gap) * 1.25);
	cursor: pointer;
	list-style: none;
	font-weight: 800;
	color: var(--fixturely-primary);
	background: var(--fixturely-soft);
}

/* Divider + breathing room between the header and the cards when expanded. */
.fixturely__accordion[open] summary.fixturely__accordion-summary {
	border-bottom: 1px solid var(--fixturely-line);
}

.fixturely summary.fixturely__accordion-summary::-webkit-details-marker {
	display: none;
}

.fixturely__accordion-icon {
	width: 1.4em;
	height: 1.4em;
	object-fit: contain;
	flex: 0 0 auto;
}

.fixturely__accordion-title {
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.fixturely__accordion-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.7em;
	height: 1.7em;
	padding: 0 0.5em;
	border-radius: 1em;
	background: color-mix(in srgb, var(--fixturely-primary) 14%, transparent);
	color: var(--fixturely-primary);
	font-size: 0.78em;
	font-weight: 700;
	white-space: nowrap;
}

.fixturely__accordion-chevron {
	margin-left: auto;
	width: 0.6em;
	height: 0.6em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.18s ease;
	opacity: 0.6;
}

.fixturely__accordion[open] .fixturely__accordion-chevron {
	transform: rotate(-135deg);
}

.fixturely__accordion .fixturely__list {
	padding: calc(var(--fixturely-gap) * 1.1) calc(var(--fixturely-gap) * 1.25) calc(var(--fixturely-gap) * 1.25);
}

/* ============================================================
 * CARD LAYOUT (modular: teams + status on top, divider, then date + venue)
 * ============================================================ */

.fixturely__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: calc(var(--fixturely-gap) * 0.85);
}

.fixturely__item {
	border: 1px solid var(--fixturely-line);
	border-radius: var(--fixturely-radius);
	padding: calc(var(--fixturely-gap) * 1.15) calc(var(--fixturely-gap) * 1.35);
	transition: background-color 0.15s ease;
}

.fixturely__item:hover {
	background: var(--fixturely-soft);
}

.fixturely__item--cancelled {
	opacity: 0.85;
}

/* Brief dimming while an AJAX week swap is in flight. */
.fixturely--loading .fixturely__body {
	opacity: 0.5;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

/* Top row: home | vs | away | result. The result column is FIXED so every
 * status box is the same width (it grows in height only). */
.fixturely__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 9.5em;
	align-items: center;
	gap: calc(var(--fixturely-gap) * 1.2);
}

/* Team sides */
.fixturely__side {
	display: flex;
	align-items: center;
	gap: 0.75em;
	min-width: 0;
}

.fixturely__logo {
	width: 2.8em;
	height: 2.8em;
	object-fit: contain;
	flex: 0 0 auto;
}

.fixturely__side-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.fixturely__side-label {
	font-size: 0.68em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fixturely-accent);
	opacity: 0.8;
}

/* Empty eyebrow keeps the same height so team names align across cards. */
.fixturely__side-label--empty {
	visibility: hidden;
}

.fixturely__team-name {
	font-weight: 700;
	color: var(--fixturely-primary);
	overflow: hidden;
	text-overflow: ellipsis;
}

.fixturely__team-school {
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	opacity: 0.6;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Reserve the school line's height even when an opponent has no school. */
.fixturely__team-school--empty {
	visibility: hidden;
}

.fixturely__vs {
	font-size: 0.8em;
	font-weight: 700;
	opacity: 0.45;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0 0.5em;
	border-left: 1px solid var(--fixturely-line);
	border-right: 1px solid var(--fixturely-line);
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Result / status column */
.fixturely__result {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3em;
	text-align: center;
	width: 100%;
}

.fixturely__result-word,
.fixturely__status-label {
	font-size: 0.7em;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fixturely-accent);
	opacity: 0.85;
}

/* Score box (only when scored) */
.fixturely__scorebox {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.4em 0.6em;
	width: 100%;
	border: 1px solid var(--fixturely-line);
	border-radius: calc(var(--fixturely-radius) * 0.7);
	background: var(--fixturely-soft);
}

.fixturely__scorecell {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	flex: 1 1 0;
}

.fixturely__scorecell-label {
	font-size: 0.62em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.55;
}

.fixturely__scorecell-value {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--fixturely-primary);
}

.fixturely__scoredash {
	opacity: 0.4;
	font-weight: 700;
}

/* Status badges (non-scored states) */
.fixturely__badge {
	display: block;
	width: 100%;
	text-align: center;
	padding: 0.55em 0.7em;
	border-radius: calc(var(--fixturely-radius) * 0.7);
	border: 1px solid var(--fixturely-line);
	background: var(--fixturely-soft);
	font-size: 0.82em;
	font-weight: 700;
}

.fixturely__badge--cancelled {
	color: var(--fixturely-accent);
	border-color: color-mix(in srgb, var(--fixturely-accent) 40%, transparent);
}

.fixturely__badge--notscored {
	opacity: 0.7;
}

.fixturely__badge--bye {
	opacity: 0.8;
}

/* ----- Footer row: date/time | venue, divided from the teams ----- */
.fixturely__footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: calc(var(--fixturely-gap) * 1.1);
	margin-top: var(--fixturely-gap);
	padding-top: var(--fixturely-gap);
	border-top: 1px solid var(--fixturely-line);
}

.fixturely__when {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	padding-right: calc(var(--fixturely-gap) * 1.1);
	border-right: 1px solid var(--fixturely-line);
}

.fixturely__time {
	font-weight: 700;
	white-space: nowrap;
}

.fixturely__date {
	font-size: 0.85em;
	opacity: 0.65;
	white-space: nowrap;
}

.fixturely__venue {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}

.fixturely__venue-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.fixturely__venue-name {
	font-weight: 700;
}

.fixturely__venue-address {
	font-size: 0.85em;
	opacity: 0.6;
}

/* ============================================================
 * RESPONSIVE
 * ============================================================ */

@media (max-width: 640px) {
	.fixturely__main {
		grid-template-columns: 1fr;
		grid-template-areas:
			"home"
			"vs"
			"away"
			"result";
		gap: calc(var(--fixturely-gap) * 0.5);
		align-items: stretch;
		text-align: left;
	}

	.fixturely__side--home { grid-area: home; }
	.fixturely__side--away { grid-area: away; }

	.fixturely__vs {
		grid-area: vs;
		justify-self: stretch;
		border: 0;
		border-top: 1px solid var(--fixturely-line);
		border-bottom: 1px solid var(--fixturely-line);
		padding: 0.35em 0;
	}

	.fixturely__result {
		grid-area: result;
		max-width: 16em;
		margin: calc(var(--fixturely-gap) * 0.4) auto 0;
	}

	.fixturely__footer {
		gap: calc(var(--fixturely-gap) * 0.5) calc(var(--fixturely-gap) * 0.9);
	}

	/* When the venue wraps below the time, drop the vertical divider. */
	.fixturely__when {
		border-right: 0;
		padding-right: 0;
	}
}