/**
 * Annual Events tab.
 *
 * The injected list item reuses The Events Calendar's own view-selector
 * classes, so it inherits the existing typography, spacing and active state
 * with no overrides. Only two things need adding: a wider tab (the label is
 * longer than "List"/"Month"/"Day") and the recurrence label on list rows.
 */

/* The selector is a flex row that assumes short labels. Stop the longer one
   from being squeezed onto two lines at mid widths. */
.tribe-events-c-view-selector__list-item--annual {
	white-space: nowrap;
}

/* Plain-language recurrence, printed under the date on list rows. */
.da-annual-when {
	margin: 0.15rem 0 0;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--da-annual-accent, #8a5a2b);
}

@media (max-width: 767px) {
	/* TEC collapses the selector into a dropdown below this width, where the
	   nowrap above is unnecessary and can cause overflow. */
	.tribe-events-c-view-selector__list-item--annual {
		white-space: normal;
	}
}