/*
 * Course Status Widget - front-end styles
 *
 * This plugin never shipped its own stylesheet before v1.2.0, which is why
 * no theme CSS was ever going to make it look right: there was nothing for
 * a theme to style beyond a generic "widget-text" wrapper around plain text
 * separated by <br/> tags. This file styles the structured markup the
 * widget now outputs (see Course_Status::widget() in includes/widget.php).
 *
 * Everything here is scoped under .course-status-widget so it cannot leak
 * into the rest of the theme. Colors are set as CSS custom properties on
 * the wrapper so a theme (or a child theme's own stylesheet, loaded after
 * this one) can override them per-site without touching this file, e.g.:
 *
 *   .course-status-widget { --csw-open-color: #0a7d32; }
 */

.course-status-widget {
	--csw-text-color: inherit;
	--csw-note-color: #5f6368;
	--csw-border-color: rgba(0, 0, 0, 0.08);
	--csw-open-color: #1a7f37;
	--csw-open-bg: rgba(26, 127, 55, 0.12);
	--csw-closed-color: #b42318;
	--csw-closed-bg: rgba(180, 35, 24, 0.12);

	color: var(--csw-text-color);
	font-size: 0.95em;
	line-height: 1.5;
}

.course-status-widget__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.course-status-widget__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35em 0.5em;
	padding: 0.4em 0;
	border-bottom: 1px solid var(--csw-border-color);
}

.course-status-widget__row:last-child {
	border-bottom: none;
}

.course-status-widget__row--general {
	flex-direction: column;
	align-items: flex-start;
}

.course-status-widget__label {
	font-weight: 600;
}

.course-status-widget__value {
	display: inline-block;
	padding: 0.1em 0.6em;
	border-radius: 999px;
	font-weight: 600;
	line-height: 1.4;
}

.course-status-widget__note {
	display: block;
	flex-basis: 100%;
	color: var(--csw-note-color);
	font-size: 0.9em;
	font-style: italic;
}

/* Color-code the two built-in English and Dutch option sets out of the
   box. Any other language's option text simply falls back to the plain,
   uncolored pill above - override with your own .course-status-widget__
   value--<slug> rule (the slug is generated with sanitize_title(), so it
   matches whatever text the widget's dropdowns are actually showing). */
.course-status-widget__value--open,
.course-status-widget__value--allowed,
.course-status-widget__value--toegestaan {
	color: var(--csw-open-color);
	background: var(--csw-open-bg);
}

.course-status-widget__value--closed,
.course-status-widget__value--gesloten,
.course-status-widget__value--not-allowed,
.course-status-widget__value--niet-toegestaan {
	color: var(--csw-closed-color);
	background: var(--csw-closed-bg);
}