/*
 * Kam na koncert (spec §10).
 *
 * ROZHODNUTÍ: stylujeme značky The Events Calendar, NEPŘEPISUJEME jeho šablony.
 *
 * Proč: FlyMag přepisy taky nemá, takže kalendář se dnes aktualizuje spolu
 * s pluginem a nikdo nemusí hlídat rozdíly mezi verzemi. 3 635 událostí je
 * nejtěžší polovina obsahu tohohle webu a je to zároveň ten URL prostor, který
 * 13.-14. září položil server -- čím míň vlastního kódu v cestě, tím líp.
 *
 * Cena: nesedíme na návrhu pixel na pixel. Tribe má vlastní strukturu řádku
 * a některé odstupy vycházejí z jeho mřížky. Co drží přesně, je barevnost,
 * typografie, jantarová data a dotykové cíle.
 */

/* --------------------------------------------------- základ, tmavý režim */

/*
 * Celá paleta The Events Calendar, ne jen pár proměnných.
 *
 * První verze nastavovala osm --tec-* proměnných a zbytek řešila vlastními
 * selektory. Nefungovalo to: Tribe píše barvy jako
 *   .tribe-events .tribe-events-calendar-list__event-title { color: var(--tec-color-text-event-title-list) }
 * což je specificita (0,2,0), kdežto moje .tribe-events-calendar-list__event-title
 * byla (0,1,0). Vyhrával Tribe. Změřeno na /akce/: názvy akcí a časy měly
 * kontrast 1,1:1 -- tmavý text #141827 na tmavém pozadí, prakticky neviditelný.
 * 41 prvků, a žádná z dosavadních kontrol to nezachytila, protože se měřila
 * jen titulka.
 *
 * Proto se přenastavují proměnné, ne selektory. Proměnná je to, co Tribe sám
 * čte, takže to přežije i změnu jeho značky při aktualizaci pluginu. Selektorů
 * zůstalo jen pár níž, na věci, které proměnnou nemají.
 *
 * Modrá #334aff je Tribe výchozí akcent a spec §14.9 třetí barevnou rodinu
 * nepřipouští -- všude jde na červenou.
 */
/*
 * Rozsah selektoru: proměnné se musí nastavit i na :root.
 *
 * Detail akce (šablony v1) nemá nad sebou .tribe-common ani .tribe-events --
 * strom je section.tribe-events-pg-template > div.tribe-events-single. Barvy
 * si ale bere z týchž --tec-* proměnných, takže bez :root spadl na výchozí
 * světlé hodnoty pluginu. Změřeno na /akce/doctor-victor-praha/: nadpis akce
 * a celý popis měly 1,1:1.
 */
:root,
.tribe-common,
.tribe-events,
.tribe-events-pg-template,
.tribe-events-single {
	/* --- plochy --- */
	--tec-color-background: var(--rs-ground);
	--tec-color-background-events: transparent;
	--tec-color-background-events-bar: var(--rs-surface);
	--tec-color-background-secondary: var(--rs-surface);
	--tec-color-background-secondary-hover: var(--rs-surface-2);
	--tec-color-background-secondary-datepicker: var(--rs-surface);
	--tec-color-background-view-selector: var(--rs-surface);
	--tec-color-background-view-selector-tabs: var(--rs-surface);
	--tec-color-background-view-selector-list-item-hover: var(--rs-surface-2);
	--tec-color-background-subscribe-list-item-hover: var(--rs-surface-2);
	--tec-color-background-search-container: var(--rs-surface);
	--tec-color-background-tooltip: var(--rs-surface);
	--tec-color-background-transparent: rgba(13, 13, 15, 0.6);
	--tec-color-background-month-grid: transparent;

	/* --- text --- */
	--tec-color-text-primary: var(--rs-text);
	--tec-color-text-primary-light: var(--rs-muted);
	--tec-color-text-secondary: var(--rs-muted);
	--tec-color-text-disabled: var(--rs-muted);
	--tec-color-text-events-title: var(--rs-text);
	--tec-color-text-events-title-day: var(--rs-text);
	--tec-color-text-events-title-widget-list: var(--rs-text);
	--tec-color-text-events-title-latest-past: var(--rs-text);
	--tec-color-text-events-title-month-multiday: var(--rs-text);
	--tec-color-text-event-title: var(--rs-text);
	--tec-color-text-event-title-list: var(--rs-text);
	--tec-color-text-event-date: var(--rs-muted);
	--tec-color-text-secondary-event-date: var(--rs-muted);
	--tec-color-text-secondary-event-date-month: var(--rs-muted);
	--tec-color-text-secondary-event-date-month-mobile: var(--rs-muted);
	--tec-color-text-day-of-week-week: var(--rs-muted);
	--tec-color-text-day-of-week-month: var(--rs-muted);
	--tec-color-text-view-selector-list-item: var(--rs-text);
	--tec-color-text-view-selector-list-item-hover: var(--rs-text);
	--tec-color-text-events-bar-input: var(--rs-text);
	--tec-color-text-events-bar-input-placeholder: var(--rs-muted);
	--tec-color-text-events-bar-submit-button: #FFFFFF;
	--tec-color-text-events-bar-submit-button-hover: #FFFFFF;
	--tec-color-text-events-bar-submit-button-active: #FFFFFF;
	--tec-color-category-text: var(--rs-text);

	/* --- linky --- */
	--tec-color-link-primary: var(--rs-text);
	--tec-color-link-accent: var(--rs-red-light);
	--tec-color-link-accent-hover: var(--rs-red-light);

	/* --- ohraničení --- */
	--tec-color-border-default: var(--rs-line);
	--tec-color-border-secondary: var(--rs-line-soft);
	--tec-color-border-tertiary: var(--rs-line);
	--tec-color-border-hover: var(--rs-line);
	--tec-color-border-active: var(--rs-red);
	--tec-color-border-events-bar: var(--rs-line);
	--tec-color-border-secondary-month-grid: var(--rs-line-soft);
	--tec-color-border-active-month-grid-hover: var(--rs-red);

	/* --- akcenty: modrá pryč (§14.9) --- */
	--tec-color-accent-primary: var(--rs-red);
	--tec-color-accent-primary-hover: var(--rs-red-light);
	--tec-color-accent-primary-active: var(--rs-red-light);
	--tec-color-accent-primary-background: rgba(200, 16, 46, 0.12);
	--tec-color-accent-primary-background-datepicker: rgba(200, 16, 46, 0.12);
	--tec-color-accent-primary-week-event: rgba(200, 16, 46, 0.12);
	--tec-color-accent-primary-week-event-hover: rgba(200, 16, 46, 0.22);
	--tec-color-accent-primary-week-event-featured: rgba(200, 16, 46, 0.08);
	--tec-color-accent-primary-week-event-featured-hover: rgba(200, 16, 46, 0.18);
	--tec-color-accent-secondary: var(--rs-text);
	--tec-color-accent-secondary-hover: var(--rs-text);
	--tec-color-accent-secondary-active: var(--rs-text);
	--tec-color-accent-secondary-background: var(--rs-surface-2);
	--tec-color-background-primary-multiday: rgba(200, 16, 46, 0.30);
	--tec-color-background-primary-multiday-hover: rgba(200, 16, 46, 0.45);
	--tec-color-background-secondary-multiday: var(--rs-surface-2);
	--tec-color-background-secondary-multiday-hover: var(--rs-line);

	/* --- tlačítka --- */
	--tec-color-button-primary: var(--rs-red);
	--tec-color-button-primary-hover: var(--rs-red-light);
	--tec-color-button-primary-active: var(--rs-red-light);
	--tec-color-button-primary-background: rgba(200, 16, 46, 0.12);
	--tec-color-button-secondary: var(--rs-text);
	--tec-color-button-secondary-hover: var(--rs-text);
	--tec-color-button-secondary-active: var(--rs-text);
	--tec-color-button-secondary-background: var(--rs-surface-2);
	--tec-color-background-events-bar-submit-button: var(--rs-red);
	--tec-color-background-events-bar-submit-button-hover: var(--rs-red-light);
	--tec-color-background-events-bar-submit-button-active: var(--rs-red-light);

	/* --- ikony --- */
	--tec-color-icon-primary: var(--rs-muted);
	--tec-color-icon-primary-alt: var(--rs-muted);
	--tec-color-icon-secondary: var(--rs-muted);
	--tec-color-icon-active: var(--rs-text);
	--tec-color-icon-disabled: var(--rs-line);
	--tec-color-icon-focus: var(--rs-red-light);
	--tec-color-icon-events-bar: var(--rs-muted);
	--tec-color-icon-events-bar-active: var(--rs-text);
	--tec-color-icon-events-bar-hover: var(--rs-text);
	--tec-color-event-icon: var(--rs-muted);
	--tec-color-event-icon-hover: var(--rs-red-light);

	/* --- značky dnů v měsíčním pohledu --- */
	--tec-color-day-marker-month: var(--rs-text);
	--tec-color-day-marker-month-hover: var(--rs-text);
	--tec-color-day-marker-month-active: var(--rs-text);
	--tec-color-day-marker-current-month: var(--rs-red-light);
	--tec-color-day-marker-current-month-hover: var(--rs-red-light);
	--tec-color-day-marker-current-month-active: var(--rs-red-light);
	--tec-color-day-marker-past-month: var(--rs-muted);
	--tec-color-day-marker-past-month-hover: var(--rs-muted);
	--tec-color-day-marker-past-month-active: var(--rs-muted);

}

/* Plochu a základní barvu textu dostanou jen kontejnery kalendáře, ne :root. */
.tribe-common,
.tribe-events,
.tribe-events-pg-template,
.tribe-events-single {
	background: var(--rs-ground);
	color: var(--rs-text);
}

.tribe-common a,
.tribe-events a {
	color: inherit;
}

/* Odkaz uvnitř textu nikdy --rs-red: nemá 4,5:1 na tmavém (spec §2). */
.tribe-events .tribe-events-c-small-cta__link,
.tribe-common a.tribe-common-anchor-thin {
	color: var(--rs-red-light);
}

/*
 * Název akce je nadpis, ne odkaz v textu -- patří na --rs-text.
 *
 * Tribe ho vykresluje jako <a>, takže mu padala barva z
 * --tec-color-link-accent a celý seznam akcí byl růžový. Červená je na tomhle
 * webu akcent, ne barva titulků (§2); jantarová zůstává datům.
 */
/*
 * Selektor musí obsahovat i "a", jinak prohraje.
 *
 * Tribe má na odkazy .tribe-common a.tribe-common-anchor-thin, což je
 * specificita (0,2,1), a název akce tu třídu nese. Bez elementu vycházela
 * moje pravidla (0,2,0) a celý seznam akcí zůstal růžový.
 */
.tribe-events a.tribe-events-calendar-list__event-title-link,
.tribe-events a.tribe-events-calendar-day__event-title-link,
.tribe-events a.tribe-events-calendar-month__calendar-event-title-link,
.tribe-events a.tribe-events-widget-events-list__event-title-link,
.tribe-common a.tribe-events-calendar-list__event-title-link,
.tribe-common a.tribe-events-widget-events-list__event-title-link,
.tribe-events .tribe-events-single-event-title {
	color: var(--rs-text);
}

.tribe-events a.tribe-events-calendar-list__event-title-link:hover,
.tribe-events a.tribe-events-calendar-day__event-title-link:hover,
.tribe-common a.tribe-events-widget-events-list__event-title-link:hover {
	color: var(--rs-red-light);
}

/*
 * Odsazení shora. Tribe dává svému kontejneru padding-top 64 px, což pod
 * nadpisem "Kam na koncert" udělalo prázdný pruh přes třetinu první
 * obrazovky. Zbytek webu má mezi nadpisem sekce a obsahem jednotky pixelů.
 */
.rs-events .tribe-events-l-container {
	padding-top: 8px;
}

/* ---------------------------------------- widget kalendáře na titulce §7.5 */

/*
 * Widget "Nadcházející akce" na titulce. Tribe mu nedává žádné odsazení, takže
 * nadpis i odkaz "Zobrazit kalendář" seděly nalepené na levém okraji displeje,
 * zatímco řádky akcí měly odsazení z vlastní mřížky. Vypadalo to jako chyba
 * sazby, protože to chyba sazby byla.
 *
 * Widget je na titulce jediný blok, který nevykresluje šablona, takže se mu
 * odsazení a typografie nadpisu musí dodat zvenčí.
 */
.rs-page .tribe-events-widget-events-list__header,
.rs-page .tribe-events-widget-events-list__view-more {
	padding-left: var(--rs-gutter);
	padding-right: var(--rs-gutter);
}

.rs-page .tribe-events-widget-events-list__header {
	padding-top: 4px;
	padding-bottom: 10px;
}

/*
 * Tři třídy schválně: Tribe má na nadpis .tribe-common .tribe-common-h6,
 * což je (0,2,0) -- stejně jako dvoutřídní selektor, a jeho stylopis se
 * načítá později, takže vyhrával on. Prosadila se jen mezera mezi písmeny,
 * kterou Tribe nenastavuje, a nadpis zůstal v Helvetice bez verzálek.
 */
.rs-page .tribe-common .tribe-events-widget-events-list__header-title {
	font-family: var(--rs-font-display);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--rs-text);
}

.rs-page .tribe-events-widget-events-list__event-row {
	padding: 0 var(--rs-gutter);
}

/* Řádky akcí mají vlastní mřížku, datum už odsazení nepotřebuje. */
.rs-page .tribe-events-widget-events-list__event-date-tag {
	padding-left: 0;
}

/*
 * Widget si pod odkazem nechával přes 200 px prázdna. Je to poslední blok
 * titulky a hned pod ním začíná partnerský pás -- ta mezera nedělala nic
 * než že nutila rolovat.
 */
.rs-page .tribe-events-widget-events-list {
	padding-bottom: 0;
}

.rs-page .tribe-events-view,
.rs-page .tribe-events-view .tribe-common-l-container {
	padding-top: 0;
	padding-bottom: 0;
	min-height: 0;
}

/* ------------------------------------------------------ nadpisy a data §10 */

.tribe-events-calendar-list__month-separator-text,
.tribe-events-calendar-day__type-separator-text {
	font-family: var(--rs-font-display);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	/* Data akcí jsou jantarová, ne červená -- odlišují se tím od reklamy. */
	color: var(--rs-amber);
}

.tribe-events-calendar-list__event-date-tag-daynum,
.tribe-events-calendar-day__event-date-tag-daynum {
	font-family: var(--rs-font-display);
	font-weight: 700;
	font-size: 25px;
	line-height: 1;
	color: var(--rs-text);
	font-variant-numeric: tabular-nums;
}

.tribe-events-calendar-list__event-date-tag-weekday,
.tribe-events-calendar-day__event-date-tag-weekday {
	font-family: var(--rs-font-display);
	font-size: 10px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--rs-muted);
}

.tribe-events-calendar-list__event-title,
.tribe-events-calendar-day__event-title {
	font-family: var(--rs-font-display);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.25;
	color: var(--rs-text);
}

.tribe-events-calendar-list__event-datetime,
.tribe-events-calendar-day__event-datetime,
.tribe-events-calendar-list__event-venue {
	font-family: var(--rs-font-display);
	font-size: 12px;
	letter-spacing: 0.6px;
	color: var(--rs-muted);
}

.tribe-events-calendar-list__event-description p {
	font-family: var(--rs-font-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--rs-text-body);
}

/* ------------------------------------------------------------ řádek akce */

.tribe-events-calendar-list__event-row {
	border-top: 1px solid var(--rs-line-soft);
	padding: 13px var(--rs-gutter);
	margin: 0;
}

.tribe-events-calendar-list__event-wrapper {
	background: transparent;
}

/* ------------------------------------------------- tlačítka a dotykové cíle */

/*
 * Tribe rozdává odkazům a tlačítkům vlastní rozměry, které jsou pod 44 px.
 * Spec §14.7 nepřipouští výjimku, takže je tady dorovnáváme plošně.
 */
.tribe-events .tribe-common-c-btn,
.tribe-events .tribe-common-c-btn-border,
.tribe-events button.tribe-events-c-top-bar__datepicker-button,
.tribe-events .tribe-events-c-nav__prev,
.tribe-events .tribe-events-c-nav__next,
.tribe-events .tribe-events-c-view-selector__button {
	min-height: var(--rs-tap);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	border-radius: var(--rs-radius);
	font-family: var(--rs-font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

.tribe-events .tribe-common-c-btn {
	background: var(--rs-red);
	color: #FFFFFF;
	border: 0;
}

.tribe-events .tribe-common-c-btn-border {
	background: none;
	border: 1px solid var(--rs-red);
	color: var(--rs-red-light);
}

/* Lišta nad kalendářem je box, ne plovoucí pruh -- nic lepivého (spec §14.1). */
.tribe-events-c-events-bar,
.tribe-events-header {
	position: static !important;
	background: var(--rs-surface);
	border: 1px solid var(--rs-line);
	border-radius: var(--rs-radius);
}

.tribe-events-c-search__input,
.tribe-common .tribe-common-form-control-text__input {
	background: var(--rs-ground);
	border: 1px solid var(--rs-line);
	border-radius: var(--rs-radius);
	color: var(--rs-text);
	min-height: var(--rs-tap);
	font-family: var(--rs-font-body);
	font-size: 16px;  /* pod 16 px iOS při fokusu zoomuje */
}

/* Obrázky v kalendáři ať nepřetečou (spec §14.2). */
.tribe-events img {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------- podtitulek stránky */

.rs-events__intro {
	padding: 4px var(--rs-gutter) 14px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--rs-muted);
}


/*
 * Odkazy na akce v seznamu i ve widgetu na titulce.
 *
 * Tribe jim dává výšku textu, tedy 18 px. Spec §14.7 nepřipouští dotykový cíl
 * pod 44 a §15 to kontroluje -- změřeno na titulce, kde těchhle odkazů bylo
 * šest. Padding místo pevné výšky, aby se víceřádkový název nezalomil do boxu.
 */
.tribe-events-calendar-list__event-title-link,
.tribe-events-calendar-day__event-title-link,
.tribe-events-widget-events-list__event-title-link,
.tribe-events-widget-events-list__view-more-link,
.tribe-common a.tribe-events-calendar-list__event-title-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--rs-tap);
	padding: 4px 0;
}

/* Odkaz "Zobrazit kalendář" a spol. nesmí zůstat v Tribe modré. */
.tribe-events-widget-events-list__view-more-link,
.tribe-common .tribe-common-anchor-thin-alt {
	color: var(--rs-red-light);
}

/*
 * Ovládání kalendáře. Změřeno na /akce/: lupa 29 × 44, přepínač pohledu
 * 32 × 44, "Dnes" 28 × 44, "Odebírat kalendář" 93 × 20. Spec §14.7 nepřipouští
 * pod 44 v žádném rozměru, takže se dorovnává i šířka, ne jen výška.
 */
.tribe-events .tribe-events-c-events-bar__search-button,
.tribe-events .tribe-events-c-view-selector__button,
.tribe-events .tribe-events-c-nav__today,
.tribe-events .tribe-events-c-nav__prev,
.tribe-events .tribe-events-c-nav__next,
.tribe-events .tribe-events-c-subscribe-dropdown__button-text,
.tribe-events .tribe-events-c-subscribe-dropdown__button,
.tribe-events .tribe-events-c-view-selector__list-item-link,
.tribe-events .tribe-events-c-top-bar__today-button,
.tribe-common a.tribe-common-c-btn-icon,
.tribe-common .tribe-common-c-btn-border-small {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--rs-tap);
	min-height: var(--rs-tap);
}