/* Custodes Events — calendar views.
 * Warm-dark + Custodian gold, matching the theme's game-schedule aesthetic.
 * Chip / legend colours come from inline game colours; everything else is themed
 * here and reuses the theme's font tokens where present. */
.cev-wrap {
	--cev-gold: #b8912e;
	--cev-gold-lo: rgba( 184, 145, 46, 0.22 );
	--cev-surface: #141416;
	--cev-surface-2: #1b1b1f;
	--cev-ink: #f4dc92;
	background: linear-gradient( 180deg, #16161a 0%, #101012 100% );
	color: #fff;
	padding: clamp( 14px, 2.5vw, 22px );
	border: 1px solid var( --cev-gold-lo );
	border-radius: 10px;
	box-shadow: 0 24px 60px rgba( 0, 0, 0, 0.45 );
}
/* the wrapper itself, not only its children — otherwise its padding and border
   are ADDED to any max-width, so it never matches the site container. */
.cev-wrap, .cev-wrap * { box-sizing: border-box; }
.cev { color: #fff; }
.cev * { box-sizing: border-box; }

/* View switcher */
.cev-switch { display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; }
.cev-switch-btn {
	/* min-height 44px: the switcher is the calendar's primary control on a phone
	   and was 38px tall, under the touch-target minimum. */
	min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
	padding: 8px 20px; background: rgba( 255, 255, 255, 0.04 ); color: rgba( 255, 255, 255, 0.75 );
	text-decoration: none; border: 1px solid var( --cev-gold-lo ); border-radius: 5px;
	font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
	transition: color .2s, background .2s, border-color .2s, transform .2s;
}
.cev-switch-btn:hover { background: rgba( 184, 145, 46, 0.12 ); color: #fff; border-color: rgba( 184, 145, 46, 0.55 ); transform: translateY( -2px ); }
.cev-switch-btn.is-active {
	background: linear-gradient( 180deg, #d9b24e 0%, #b8912e 100% ); color: #14100a;
	border-color: rgba( 255, 255, 255, 0.2 );
}
.cev-empty { padding: 28px; text-align: center; color: rgba( 255, 255, 255, 0.55 ); font-weight: 700; }

.cev-head { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 6px 0 16px; }
.cev-title {
	margin: 0; font-family: var( --wp--preset--font-family--display, Georgia, serif );
	font-size: clamp( 20px, 3vw, 28px ); font-weight: 400; letter-spacing: 0.06em;
	text-transform: uppercase; text-align: center; color: #fff;
}
.cev-nav {
	/* flex-shrink:0 — the prev/next arrows sit in a flex row beside the month title.
	   On a 360px phone the day view's title ("Utorak, 28.7.2026.") squeezed them from
	   40px to 30.5px wide, rendering visible ovals below the 44px tap target. */
	flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
	background: rgba( 255, 255, 255, 0.04 ); color: var( --cev-gold ); text-decoration: none;
	border: 1px solid var( --cev-gold-lo ); border-radius: 50%; font-size: 18px;
	transition: background .2s, color .2s, border-color .2s, transform .2s;
}
/* Hover must NOT look like the active tab: `.cev-switch-btn.is-active` is a solid
   gold fill, so a solid gold arrow-hover made "selected" and "hovered" identical.
   Hover is now a gold-tinted outline — clearly interactive, clearly not selected. */
.cev-nav:hover, .cev-nav:focus-visible {
	background: rgba( 184, 145, 46, 0.16 );
	color: #f4dc92;
	border-color: var( --cev-gold );
	transform: translateY( -2px );
}

/* Month grid */
.cev-cal { border-collapse: separate; border-spacing: 3px; width: 100%; table-layout: fixed; }
.cev-cal th {
	background: transparent; color: var( --cev-gold ); font-size: 12px; font-weight: 700;
	letter-spacing: 0.14em; padding: 6px 4px 10px; text-align: center; width: 14.2857%; text-transform: uppercase;
}
.cev-dates td {
	background: transparent; color: rgba( 255, 255, 255, 0.85 ); font-family: var( --wp--preset--font-family--display, Georgia, serif );
	font-weight: 400; text-align: center; font-size: 15px; padding: 4px 6px 2px; height: 20px;
}
.cev-dates td.cev-other { color: rgba( 255, 255, 255, 0.3 ); }
.cev-content td.cev-day {
	background: var( --cev-surface ); vertical-align: top; border: 1px solid rgba( 255, 255, 255, 0.05 );
	border-radius: 6px; padding: 4px; height: 116px;
}
.cev-day-other { background: rgba( 255, 255, 255, 0.02 ) !important; }
.cev-closed { text-align: center; vertical-align: middle !important; background: rgba( 255, 255, 255, 0.015 ) !important; }
.cev-closed-label {
	display: inline-block; font-weight: 700; font-size: 11px; letter-spacing: 0.12em;
	text-transform: uppercase; color: rgba( 255, 255, 255, 0.35 );
}
/* Non-working day with a reason (e.g. a convention) — an informative box. */
.cev-closed-reason {
	display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
	padding: 6px 8px; border-radius: 6px; text-transform: none; letter-spacing: 0;
	border: 1px solid rgba( 184, 145, 46, 0.45 ); background: rgba( 184, 145, 46, 0.1 );
}
.cev-closed-reason .cev-closed-word {
	font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
	color: var( --cev-gold );
}
.cev-closed-reason .cev-closed-why {
	font-size: 11px; font-weight: 800; line-height: 1.15; text-align: center; color: #f4dc92;
}
.cev-agenda-events .cev-closed-reason { align-self: flex-start; }

.cev-chip {
	position: relative; display: block; font-size: 11px; font-weight: 700; line-height: 1.15; text-align: center;
	padding: 5px 3px; margin: 3px 1px; text-transform: uppercase; text-decoration: none; border-radius: 3px;
	box-shadow: 0 1px 0 rgba( 0, 0, 0, 0.25 );
}
a.cev-chip { transition: filter .15s, transform .15s; }
a.cev-chip:hover { filter: brightness( 1.14 ); transform: translateY( -1px ); }
.cev-chip:hover, .cev-chip:focus, .cev-chip:focus-visible { z-index: 30; }

/* Rich hover/focus tooltip for the dense month grid: category logo + full title + game · time. */
.cev-tip {
	position: absolute; left: 50%; bottom: calc( 100% + 9px ); transform: translate( -50%, 6px );
	width: max-content; min-width: 150px; max-width: 240px; display: flex; align-items: center; gap: 10px;
	padding: 11px 13px; border-radius: 10px; background: #1b1b1f; color: #fff;
	border: 1px solid rgba( 184, 145, 46, 0.5 ); box-shadow: 0 18px 44px rgba( 0, 0, 0, 0.6 );
	text-transform: none; letter-spacing: 0; text-align: left; line-height: 1.3;
	opacity: 0; visibility: hidden; pointer-events: none; z-index: 5;
	transition: opacity .16s ease, transform .16s ease;
}
.cev-chip:hover .cev-tip, .cev-chip:focus .cev-tip, .cev-chip:focus-visible .cev-tip {
	opacity: 1; visibility: visible; transform: translate( -50%, 0 );
}
.cev-tip::after {
	content: ''; position: absolute; top: 100%; left: 50%; transform: translateX( -50% );
	border: 7px solid transparent; border-top-color: #1b1b1f;
}
/*
 * Edge columns: anchor the tooltip to the chip's right edge instead of centring it.
 *
 * A centred tooltip extends ~120px past the chip on each side. On the Sunday column
 * that pushes past the viewport — and because the hidden state is `visibility:hidden`
 * (which still contributes to scrollable overflow, unlike `display:none`), the whole
 * page gained a horizontal scrollbar even when no tooltip was showing. Measured on the
 * homepage: 768px viewport -> scrollWidth 782 (+14px), worst at ~721px (+20px).
 * The grid is a <table>, so the edge columns are addressable directly.
 */
.cev-cal td:last-child .cev-tip,
.cev-cal td:nth-last-child( 2 ) .cev-tip {
	left: auto;
	right: 0;
	transform: translate( 0, 6px );
}
.cev-chip:hover .cev-cal td:last-child .cev-tip,
.cev-cal td:last-child .cev-chip:hover .cev-tip,
.cev-cal td:last-child .cev-chip:focus .cev-tip,
.cev-cal td:last-child .cev-chip:focus-visible .cev-tip,
.cev-cal td:nth-last-child( 2 ) .cev-chip:hover .cev-tip,
.cev-cal td:nth-last-child( 2 ) .cev-chip:focus .cev-tip,
.cev-cal td:nth-last-child( 2 ) .cev-chip:focus-visible .cev-tip {
	transform: translate( 0, 0 );
}
/* Keep the arrow over the chip, not the tooltip's centre, once it is right-anchored. */
.cev-cal td:last-child .cev-tip::after,
.cev-cal td:nth-last-child( 2 ) .cev-tip::after {
	left: auto;
	right: 18px;
	transform: none;
}
.cev-tip-logo { flex: 0 0 auto; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 7px; padding: 4px; }
.cev-tip-logo img { max-width: 100%; max-height: 34px; width: auto; height: auto; object-fit: contain; }
.cev-tip-body { display: flex; flex-direction: column; min-width: 0; }
.cev-tip-title { font-size: 12.5px; font-weight: 700; color: #fff; }
.cev-tip-sub { font-size: 11px; font-weight: 600; color: var( --cev-gold ); margin-top: 3px; }

.cev-legend { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 18px 0 4px; }
.cev-legend-item { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; padding: 7px 13px; border-radius: 3px; }

/* Agenda (mobile month + day/week lists) */
.cev-agenda { display: flex; flex-direction: column; gap: 6px; }
.cev-agenda-day {
	display: flex; gap: 12px; padding: 10px 12px; background: var( --cev-surface );
	border: 1px solid rgba( 255, 255, 255, 0.05 ); border-left: 3px solid var( --cev-gold ); border-radius: 6px;
}
.cev-agenda-date { flex: 0 0 88px; text-align: right; padding-right: 10px; border-right: 1px solid rgba( 184, 145, 46, 0.25 ); }
.cev-agenda-dow { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var( --cev-gold ); }
.cev-agenda-num { display: block; font-family: var( --wp--preset--font-family--display, Georgia, serif ); font-size: 20px; color: #fff; }
.cev-agenda-events { flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; }
.cev-agenda-events .cev-chip { text-align: left; padding: 8px 11px; }
/* Day/week/mobile agenda: category logo on a light plate beside each event. */
.cev-agenda-event { display: flex; align-items: center; gap: 10px; }
.cev-agenda-event .cev-chip { flex: 1 1 auto; margin: 0; }
.cev-agenda-logo {
	flex: 0 0 auto; width: 48px; height: 38px; padding: 5px; background: #fff; border-radius: 6px;
	display: flex; align-items: center; justify-content: center;
}
.cev-agenda-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }

/* Single event details block */
.cev-single {
	display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 18px 22px;
	margin: 0 0 24px; background: var( --cev-surface ); border: 1px solid rgba( 184, 145, 46, 0.25 ); border-radius: 10px;
}
.cev-single-logowrap .cev-single-logo { display: block; max-width: 64px; height: auto; }
.cev-single-meta { list-style: none; margin: 0; padding: 0; flex: 1 1 260px; }
.cev-single-meta li { margin: 2px 0; font-size: 15px; }
.cev-single-game {
	display: inline-block; padding: 2px 10px; border-radius: 3px; font-weight: 700;
	font-size: 12px; text-transform: uppercase; letter-spacing: .3px;
}
.cev-single-back { display: inline-block; font-weight: 700; text-decoration: none; }

/* Responsive: swap the 7-column grid for the agenda list.
 *
 * Raised from 720px to 900px. Seven columns of event chips need roughly 128px
 * each to hold "MTG FFA COMMANDER PARTY 17:30" without shredding it; below ~900
 * the chips were wrapping to four and five lines and bursting out of their day
 * cells. The agenda list carries the same information legibly at any width, and
 * the month/week/day switcher stays available so the other views are still
 * reachable on a phone. */
.cev-view-agenda { display: none; }
@media ( max-width: 900px ) {
	.cev-view-grid { display: none; }
	.cev-view-agenda { display: block; }
}
/* Brief dimming while an in-place view swap is in flight (calendar-nav.js). */
.cev-wrap.is-loading { opacity: 0.6; transition: opacity .12s ease; }