/* The Events Calendar on a dark site.
 *
 * The Gigs page is the theme's own gigs block; TEC's /events/ views and the
 * single-event page are what a search result or a calendar link lands on.
 * TEC's own CSS does the layout (it exposes custom properties for colour, so
 * most of this is setting those), and this file repaints it to match.
 */

:root {
	--tec-color-background: var(--tw-black);
	--tec-color-background-events: transparent;
	--tec-color-background-secondary: var(--tw-coal);
	--tec-color-background-events-bar: var(--tw-coal);
	--tec-color-text-primary: var(--tw-ink);
	--tec-color-text-secondary: var(--tw-ink-soft);
	--tec-color-text-events-title: var(--tw-ink);
	--tec-color-text-event-title: var(--tw-ink);
	--tec-color-text-event-date: var(--tw-ink-soft);
	--tec-color-text-day-of-week-month: var(--tw-ink-soft);
	--tec-color-link-primary: var(--tw-red);
	--tec-color-link-accent: var(--tw-red);
	--tec-color-link-accent-hover: var(--tw-red-hi);
	--tec-color-accent-primary: var(--tw-red);
	--tec-color-accent-primary-hover: var(--tw-red-hi);
	--tec-color-button-primary: var(--tw-red);
	--tec-color-border-default: var(--tw-hairline);
	--tec-color-border-secondary: var(--tw-border-ui);
	--tec-color-icon-primary: var(--tw-red);
	/* The search, view-switch and arrow icons default to a mid grey that is
	   about 1.6:1 on black: next to invisible. Soft ink is 7.9:1. */
	--tec-color-icon-secondary: var(--tw-ink-soft);
	--tec-color-icon-active: var(--tw-red);
	--tec-color-icon-focus: var(--tw-red);
	--tec-color-icon-disabled: #5c5850;
	--tec-font-family-sans-serif: var(--tw-font-body);
}

.tribe-events,
.tribe-events-single,
#tribe-events-pg-template { color: var(--tw-ink); padding-block: clamp(2.5rem, 5vw, 4rem); }
#tribe-events-pg-template { max-width: var(--tw-measure); margin-inline: auto; padding-inline: var(--tw-gutter); }

.tribe-events-single-event-title,
.tribe-events .tribe-events-calendar-list__event-title,
.tribe-events-c-top-bar__datepicker-button {
	font-family: var(--tw-font-head) !important;
	font-weight: 400 !important;
	text-transform: uppercase;
	color: var(--tw-ink) !important;
}
.tribe-events-single-event-title { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: .95; }
.tribe-events-schedule h2,
.tribe-events-schedule .tribe-events-cost { color: var(--tw-ink-soft); font-family: var(--tw-font-body); text-transform: none; }
/* TEC prints the price straight after the time ("11:00pm£9"). */
.tribe-events-schedule .tribe-events-cost { margin-left: .6rem; padding-left: .6rem; border-left: 1px solid var(--tw-border-ui); }
.tribe-events-event-meta,
.tribe-events-meta-group { color: var(--tw-ink); }
.tribe-events-event-meta { background: var(--tw-coal); border-color: var(--tw-hairline) !important; }
.tribe-events-meta-group .tribe-events-single-section-title { font-family: var(--tw-font-head); font-weight: 400; text-transform: uppercase; color: var(--tw-red); }
.tribe-events-back a,
.tribe-events-nav-pagination a { color: var(--tw-red); }
.tribe-events-c-subscribe-dropdown__button { color: var(--tw-ink) !important; border-color: var(--tw-border-ui) !important; }
.tribe-events .tribe-events-c-search__button,
.tribe-events button.tribe-events-c-search__button { background: var(--tw-red); color: var(--tw-black); }

/* TEC's list rows pull out with negative gutter margins sized for its own
   page padding; inside our narrower phone gutter that is 2px of sideways
   scroll at 320px (1.4.10). The rows sit flush with the wrapper instead. */
.tribe-events .tribe-common-g-row--gutters { margin-left: 0; margin-right: 0; }

/* Phones. TEC's list and nav type is set at 11-12px with 22px-tall controls;
   bring the small print up to 14px and give every control a real tap target. */
.tribe-events .tribe-common-b3,
.tribe-events .tribe-common-b2,
.tribe-events .tribe-events-calendar-list__event-date-tag-weekday { font-size: .875rem; }
.tribe-events .tribe-events-c-nav__prev,
.tribe-events .tribe-events-c-nav__next,
.tribe-events .tribe-events-c-nav__today { min-height: 44px; display: inline-flex; align-items: center; font-size: 1rem; }
.tribe-events .tribe-events-c-subscribe-dropdown__button,
.tribe-events-c-subscribe-dropdown__button,
.tribe-events-c-subscribe-dropdown__button-text { min-height: 44px; }
.tribe-events-sub-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem !important; }
.tribe-events-single .tribe-events-event-meta a { overflow-wrap: anywhere; }

/* Gig photos in the list are mostly portrait; uncropped, one fills a phone screen. */
.tribe-events .tribe-events-calendar-list__event-featured-image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }