/* =========================================================
   RWS Training Year View
   Edit the variables below to re-tune the look quickly.
   ========================================================= */
.rws-ty {
	--rws-font:       inherit;          /* inherits the theme font */
	--rws-text:       #222222;
	--rws-muted:      #6b7280;
	--rws-link:       #333333;          /* "Back to 2026" link */
	--rws-link-hover: #000000;
	--rws-border:     #e5e7eb;
	--rws-month-bg:   #ffffff;
	--rws-today-bg:   #e6b800;
	--rws-today-text: #222222;
	--rws-btn-bg:     #f3f4f6;
	--rws-btn-text:   #222222;
	--rws-gap:        20px;             /* space between month boxes */
	--rws-radius:     6px;
	--rws-event-size: 11px;             /* event title font size */
	--rws-bar-height: 18px;             /* height of one event bar */

	font-family: var(--rws-font);
	color: var(--rws-text);
	max-width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
}
.rws-ty *, .rws-ty *::before, .rws-ty *::after { box-sizing: inherit; }

/* ---- Year navigation ---- */
.rws-ty__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}
.rws-ty__title {
	margin: 0;
	font-size: 1.75rem;
	line-height: 1.2;
}
.rws-ty__btn {
	display: inline-block;
	padding: 8px 14px;
	border-radius: var(--rws-radius);
	background: var(--rws-btn-bg);
	color: var(--rws-btn-text);
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
}
.rws-ty__btn:hover,
.rws-ty__btn:focus-visible {
	filter: brightness(0.94);
	color: var(--rws-btn-text);
	text-decoration: none;
}

/* ---- Anything between the year and the calendar ---- */
.rws-ty__meta { text-align: center; }
.rws-ty__meta:not(:empty) { margin-bottom: var(--rws-gap); }
.rws-ty__back,
.rws-ty__empty { margin: 0 0 6px; }
.rws-ty__empty { color: var(--rws-muted); }
.rws-ty__back a {
	color: var(--rws-link);
	font-size: 0.9rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.rws-ty__back a:hover,
.rws-ty__back a:focus-visible { color: var(--rws-link-hover); }

/* ---- 3 x 4 grid of months ---- */
.rws-ty__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--rws-gap);
}
.rws-ty__month {
	background: var(--rws-month-bg);
	border: 1px solid var(--rws-border);
	border-radius: var(--rws-radius);
	padding: 12px;
	min-width: 0;
}
.rws-ty__month-name {
	margin: 0 0 8px;
	font-size: 1.05rem;
	line-height: 1.2;
}

/* ---- Weekday header row ---- */
.rws-ty__weekdays {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	font-size: 0.7rem;
	color: var(--rws-muted);
	text-align: center;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--rws-border);
}

/* ---- One week = a row of dates with event bars underneath ---- */
.rws-ty__week { padding: 3px 0; }
.rws-ty__week + .rws-ty__week { border-top: 1px solid var(--rws-border); }

.rws-ty__dates {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	text-align: center;
}
.rws-ty__num {
	font-size: 0.72rem;
	line-height: 18px;
	color: var(--rws-muted);
}
.rws-ty__num--today {
	display: inline-block;
	min-width: 18px;
	border-radius: 50%;
	background: var(--rws-today-bg);
	color: var(--rws-today-text);
	font-weight: 700;
}

.rws-ty__bars {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	grid-auto-rows: var(--rws-bar-height);
	gap: 2px;
	min-height: 4px;
}

/* ---- Event bars (colour comes from --rws-c / --rws-bg set per event) ---- */
.rws-ty__event {
	border-left: 3px solid var(--rws-c, #6b7280);
	background: var(--rws-bg, rgba(107,114,128,0.14));
	border-radius: 2px;
	padding: 0 4px;
	font-size: var(--rws-event-size);
	line-height: var(--rws-bar-height);
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.rws-ty__event a,
.rws-ty__event span {
	display: block;
	color: var(--rws-text);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rws-ty__event a:hover,
.rws-ty__event a:focus-visible {
	color: var(--rws-text);
	text-decoration: underline;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.rws-ty__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.rws-ty__grid { grid-template-columns: 1fr; }
	.rws-ty__title { font-size: 1.4rem; }
	.rws-ty__btn { padding: 6px 10px; font-size: 0.9rem; }
	.rws-ty { --rws-bar-height: 20px; --rws-event-size: 12px; }
}