/**
 * Upcoming Events calendar — Schedule page only.
 *
 * Loaded by inc/settings-events.php (sjsa_events_enqueue_assets),
 * conditional on is_page_template('page-schedule.php'). Uses the
 * theme's existing design tokens (--navy/--maroon/--gold/etc., defined
 * in style.css's :root) rather than redefining them here.
 *
 * @package SJSA
 */

.events-calendar-wrap {
	/* Full width of the section's .container (was capped at 760px and
	   sitting narrow/centered on the page — see the "make the calendar
	   full width" request). */
	width: 100%;
	background: var(--white);
	border: 1px solid #eee;
	border-radius: 14px;
	padding: 32px 34px 36px;
	box-shadow: 0 14px 34px -24px rgba(0, 0, 0, .25);
}

.events-cal-legend {
	display: flex;
	gap: 22px;
	margin-bottom: 18px;
	font-size: .82rem;
	color: #556;
}

.events-cal-legend span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.events-cal-legend .dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	display: inline-block;
}

/* ===== Calendar item type colors =====
   One color per category, defined here ONCE and reused by the legend
   dot (.dot-{type}), the day-cell dot (.events-cal-dot-{type}), and the
   modal badge (.events-modal-item-{type}). The type keys and their
   human labels live in sjsa_event_types() in inc/settings-events.php —
   label there, color here, so neither is duplicated.

   Chosen to stay inside the SJSA palette where possible (navy, maroon,
   gold) and to stay distinguishable side by side for the three added
   categories that have no brand color of their own. */
:root {
	--cal-practice: #0e5073;  /* navy   — weekly training */
	--cal-game:     #aa1c28;  /* maroon — SJSA fixtures */
	--cal-sjsa:     #f6bb00;  /* gold   — club events */
	--cal-league:   #17786b;  /* teal   — outside league dates */
	--cal-trip:     #6b4c9a;  /* purple — field trips */
	--cal-other:    #5a6b78;  /* slate  — anything else */
	--cal-timeoff:  #0f0f0f;  /* ink    — coach unavailable */
}

.events-cal-legend .dot-practice,
.events-cal-dot-practice { background: var(--cal-practice); }
.events-cal-legend .dot-game,
.events-cal-dot-game { background: var(--cal-game); }
.events-cal-legend .dot-sjsa,
.events-cal-dot-sjsa { background: var(--cal-sjsa); }
.events-cal-legend .dot-league,
.events-cal-dot-league { background: var(--cal-league); }
.events-cal-legend .dot-trip,
.events-cal-dot-trip { background: var(--cal-trip); }
.events-cal-legend .dot-other,
.events-cal-dot-other { background: var(--cal-other); }
.events-cal-legend .dot-timeoff,
.events-cal-dot-timeoff { background: var(--cal-timeoff); }

.events-modal-item-practice .events-modal-item-badge { background: var(--cal-practice); }
.events-modal-item-game .events-modal-item-badge { background: var(--cal-game); }
.events-modal-item-sjsa .events-modal-item-badge { background: var(--cal-sjsa); color: var(--navy-darker); }
.events-modal-item-league .events-modal-item-badge { background: var(--cal-league); }
.events-modal-item-trip .events-modal-item-badge { background: var(--cal-trip); }
.events-modal-item-other .events-modal-item-badge { background: var(--cal-other); }
.events-modal-item-timeoff .events-modal-item-badge { background: var(--cal-timeoff); }

.events-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 22px;
}

.events-cal-head h3 {
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	letter-spacing: .5px;
	font-size: 1.3rem;
	color: var(--navy-darker);
	margin: 0;
}

/* The month arrows carried the class .events-cal-nav-btn but the only
   rule here targeted ".events-cal-nav button" — a wrapper that doesn't
   exist in the markup — so they rendered as bare unstyled ‹ › glyphs.
   Styled properly now, and the glyphs replaced with real SVG chevrons
   in page-schedule.php so they're crisp at any size. */
.events-cal-nav-btn {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--taupe);
	background: var(--white);
	color: var(--navy);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

.events-cal-nav-btn svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	display: block;
}

.events-cal-nav-btn:hover,
.events-cal-nav-btn:focus-visible {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--white);
	outline: none;
}

.events-cal-nav-btn:active {
	transform: scale(.94);
}

.events-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
}

.events-cal-dow {
	text-align: center;
	font-family: 'Anton', sans-serif;
	font-size: .68rem;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--maroon);
	padding-bottom: 8px;
}

.events-cal-day {
	/* Rectangular rows rather than 1:1 squares — at full container width
	   each column is easily 150-170px wide, which made square cells
	   look like oversized tiles instead of a calendar. */
	position: relative;
	min-height: 92px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 6px;
	padding: 10px 12px;
	border-radius: 10px;
	font-size: .9rem;
	color: var(--ink);
	background: var(--cream);
}

.events-cal-daynum {
	line-height: 1;
}

.events-cal-day.is-empty {
	background: transparent;
}

.events-cal-day.is-today .events-cal-daynum {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 5px;
	border-radius: 50%;
	background: var(--navy);
	color: var(--white);
	font-weight: 700;
}

.events-cal-day.has-item {
	cursor: pointer;
	background: var(--white);
	border: 1px solid #eadfda;
	font-weight: 600;
	color: var(--navy-darker);
}

.events-cal-day.has-item:hover,
.events-cal-day.has-item:focus-visible {
	background: var(--navy);
	color: var(--white);
	outline: none;
}

.events-cal-day.has-item:hover .events-cal-daynum,
.events-cal-day.has-item:focus-visible .events-cal-daynum {
	color: var(--white);
}

.events-cal-dots {
	display: flex;
	gap: 5px;
	margin-top: auto;
}

.events-cal-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
}

/* Dot colors are declared once in the type-color block near the top of
   this file. On hover the whole cell goes navy, so the two darkest dots
   (practice navy, time-off ink) would vanish into it — lighten just
   those two rather than washing out the colors that still read fine. */
.events-cal-day.has-item:hover .events-cal-dot-practice,
.events-cal-day.has-item:focus-visible .events-cal-dot-practice,
.events-cal-day.has-item:hover .events-cal-dot-timeoff,
.events-cal-day.has-item:focus-visible .events-cal-dot-timeoff {
	background: #cfe3ee;
}

/* ===== Subscribe row ===== */
.events-subscribe {
	margin-top: 30px;
	padding-top: 26px;
	border-top: 1px solid #eee;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.events-subscribe p {
	flex: 1 1 100%;
	font-size: .85rem;
	color: #556;
	margin: 0 0 4px;
}

.events-subscribe-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.events-subscribe-url {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 260px;
}

.events-subscribe-url input {
	flex: 1;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 10px 12px;
	font-family: 'Poppins', sans-serif;
	font-size: .8rem;
	color: #556;
	background: var(--cream);
}

.events-subscribe-url button {
	white-space: nowrap;
}

/* ===== Modal ===== */
.events-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(8, 44, 64, .72);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	z-index: 1000;
}

.events-modal-overlay[hidden] {
	display: none;
}

.events-modal {
	background: var(--white);
	border-radius: 16px;
	max-width: 460px;
	width: 100%;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	padding: 34px 30px 30px;
	position: relative;
	box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .5);
}

.events-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: var(--cream);
	color: var(--navy-darker);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.events-modal-close:hover {
	background: var(--navy);
	color: var(--white);
}

.events-modal .eyebrow {
	margin-bottom: 6px;
}

.events-modal h3 {
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	font-size: 1.4rem;
	color: var(--navy-darker);
	margin: 0 0 14px;
}

/* ===== Modal item list — one entry per practice/event on the clicked
   day (a day can have both a recurring practice and a one-off event). */
.events-modal-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.events-modal-item {
	padding-top: 20px;
	border-top: 1px solid #eee;
}

.events-modal-item:first-child {
	padding-top: 0;
	border-top: none;
}

.events-modal-item-badge {
	display: inline-block;
	font-family: 'Anton', sans-serif;
	font-size: .68rem;
	letter-spacing: .5px;
	padding: 5px 11px;
	border-radius: 6px;
	margin-bottom: 8px;
	color: var(--white);
	background: var(--maroon);
}

/* Per-type badge colors are declared once in the type-color block near
   the top of this file — the .events-modal-item-badge rule above is
   just the shared shape plus a fallback fill. */

.events-modal-item h4 {
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	font-size: 1.15rem;
	color: var(--navy-darker);
	margin: 0 0 6px;
}

.events-modal-item-meta {
	font-size: .85rem;
	color: #777;
	margin-bottom: 8px;
}

.events-modal-item-desc {
	font-size: .92rem;
	color: #556;
	line-height: 1.6;
	margin-bottom: 10px;
}

.events-modal-item .btn {
	width: 100%;
	text-align: center;
}

@media (max-width: 600px) {
	.events-calendar-wrap {
		padding: 20px 12px 24px;
		border-radius: 10px;
	}
	.events-cal-grid {
		gap: 4px;
	}
	.events-cal-day {
		min-height: 48px;
		padding: 5px 4px;
		font-size: .78rem;
	}
	.events-cal-daynum {
		font-size: .78rem;
	}
	.events-cal-dow {
		font-size: .58rem;
	}
	/* Up to seven categories now — they have to wrap, and at two per
	   row rather than one so the legend doesn't become a tall column
	   above the calendar itself. */
	.events-cal-legend {
		flex-wrap: wrap;
		gap: 8px 16px;
		font-size: .74rem;
		margin-bottom: 14px;
	}
	.events-cal-legend span {
		flex: 0 1 auto;
	}
	.events-cal-head h3 {
		font-size: 1.05rem;
	}
	.events-cal-nav-btn {
		width: 36px;
		height: 36px;
		flex-basis: 36px;
	}
	/* Several dots on one narrow cell would otherwise push the cell
	   wider than its grid column and break the month grid alignment. */
	.events-cal-dots {
		flex-wrap: wrap;
		gap: 3px;
	}
	.events-cal-dot {
		width: 6px;
		height: 6px;
	}
	.events-modal {
		padding: 26px 20px 24px;
		max-height: 88vh;
		overflow-y: auto;
	}
	.events-subscribe-url {
		flex-direction: column;
		align-items: stretch;
	}
	.events-subscribe-url input,
	.events-subscribe-actions .btn {
		width: 100%;
	}
}