/**
 * The Events Calendar, dressed in the theme.
 *
 * This file is the plugin's own door: it looks for `tribe-events/tribe-events.css`
 * in the theme and loads it after its own stylesheets, on its own pages only.
 * That is what lets the rules below win on their own weight, without pinning
 * anything to the exact shape of a stylesheet we do not own. One button at the
 * end resisted even that, and says so where it is written.
 *
 * Two levers, in this order:
 *
 *   1. Its custom properties. The plugin declares some two hundred of them and
 *      reads its whole appearance from them, so pointing the twenty that carry
 *      a colour at the theme's palette re-dresses everything at once — and the
 *      dark screen follows on its own, since the palette itself flips.
 *
 *   2. The handful of boxes it paints outside that system. Each is written
 *      with the plugin's own selector shape, so ours weighs the same and wins
 *      by coming later.
 *
 * @package cab-miniworld
 * @since   1.34.0
 */

:root {
	/* What it calls its accent is our brand blue. */
	--tec-color-accent-primary: var(--wp--preset--color--brand-blue);
	--tec-color-accent-primary-hover: var(--wp--preset--color--brand-blue);
	--tec-color-accent-primary-active: var(--wp--preset--color--brand-blue);
	--tec-color-accent-primary-background: color-mix(in srgb, var(--wp--preset--color--brand-blue) 8%, transparent);
	--tec-color-button-primary: var(--wp--preset--color--brand-blue);
	--tec-color-button-primary-hover: var(--wp--preset--color--brand-blue);
	--tec-color-button-primary-active: var(--wp--preset--color--brand-blue);
	--tec-color-button-primary-background: color-mix(in srgb, var(--wp--preset--color--brand-blue) 8%, transparent);
	--tec-color-link-accent: var(--wp--preset--color--brand-blue);
	--tec-color-link-accent-hover: var(--wp--preset--color--brand-blue);

	/* Its near-black is our ink, which follows the light and the dark. */
	--tec-color-accent-secondary: var(--cab-encre);
	--tec-color-button-secondary: var(--cab-encre);
	--tec-color-link-primary: var(--cab-encre);
	--tec-color-text-primary: var(--cab-encre);
	--tec-color-text-event-title: var(--cab-encre);
	--tec-color-text-events-title: var(--cab-encre);
	--tec-color-text-event-date: var(--cab-encre);
	--tec-color-text-secondary: var(--wp--preset--color--gray);
	--tec-color-text-secondary-event-date: var(--wp--preset--color--gray);
	--tec-color-border-active: var(--cab-encre);

	/* And its surfaces are ours, so a dark screen carries it too. */
	--tec-color-background: var(--wp--preset--color--white);
	--tec-color-background-secondary: var(--wp--preset--color--pale-blue);
	--tec-color-background-secondary-hover: var(--wp--preset--color--pale-blue);
	--tec-color-border-default: color-mix(in srgb, var(--cab-encre) 22%, transparent);
	--tec-color-border-secondary: color-mix(in srgb, var(--cab-encre) 14%, transparent);

	/* Its buttons ask for a font of their own; the site has one already. */
	--tec-font-family-sans-serif: var(--wp--preset--font-family--body);
	--tec-font-family-base: var(--wp--preset--font-family--body);
}

/*
 * What the variables do not reach.
 *
 * The search button, the bar around it, the view menu and the loading veil are
 * painted in the letter rather than through a property. Same selector shape as
 * the plugin's, so the weight matches and the later file decides.
 */
.tribe-common .tribe-events-c-search__button,
.tribe-events .tribe-events-c-search__button {
	background-color: var(--wp--preset--color--brand-blue);
	/* The theme's surface: white on a light screen, dark on a dark one — the
	   brand blue lightens in the dark, and the text has to darken with it. */
	color: var(--wp--preset--color--white);
	transition: filter 0.2s ease;
}

.tribe-common .tribe-events-c-search__button:hover,
.tribe-common .tribe-events-c-search__button:focus-visible {
	background-color: var(--wp--preset--color--brand-blue);
	filter: brightness(1.15);
}

.tribe-events .tribe-events-c-events-bar,
.tribe-events .tribe-events-c-events-bar__search-container,
.tribe-events .tribe-events-c-view-selector__content,
.tribe-events .tribe-events-c-top-bar__datepicker-input,
.tribe-common .tribe-common-c-btn-border-small,
.tribe-common .tribe-events-c-search__input {
	background-color: var(--wp--preset--color--white);
	color: var(--cab-encre);
}

/*
 * The subscribe button, left as the plugin paints it — and the note is here so
 * nobody spends the afternoon I spent on it.
 *
 * On a dark screen it stays white. What was established by measurement: the
 * property it should read holds the dark surface; no stylesheet in the plugin
 * paints it white in the letter; removing any one of its three classes makes it
 * correct, so the winning rule needs all three at once; our rule matches the
 * element, carries the same shape, loads last, and even forcing it changes
 * nothing. Five attempts, each tying this file tighter to the shape of a
 * stylesheet we do not own.
 *
 * One white button on a dark page is a smaller cost than a rule that breaks at
 * the plugin's next release. To be looked at again when the calendar is next
 * updated.
 */

.tribe-events .tribe-events-view-loader {
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 70%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.tribe-common .tribe-events-c-search__button {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   The page of a single event

   The theme's banner carries the title, the dates, the hall and the region, so
   the plugin's own heading right underneath says everything a second time. It
   goes — and with it the level-one heading a page must have only once.
   -------------------------------------------------------------------------- */

.cab-evenement .tribe-events-single-event-title {
	display: none;
}

/* The banner shows the poster already, and shows it whole. */
.cab-evenement .tribe-events-event-image {
	display: none;
}

/* Nothing of the plugin's reaches past the measure the page is read in. */
.cab-evenement img,
.cab-evenement iframe,
.cab-evenement table {
	max-width: 100%;
}

.cab-evenement table {
	display: block;
	overflow-x: auto;
}