/* ==========================================================================
   The Events Calendar, restyled to the HAPI tokens.
   TEC's own stylesheet reads these custom properties; the rest are small
   overrides. Wrapper markup: tribe/events/v2/default-template.php.
   TEC declares its defaults on its own containers, so set ours there too.
   ========================================================================== */

:root,
.tribe-common,
.tribe-events,
.tribe-events-pg-template {
	--tec-font-family-sans-serif: var(--hapi-font-body);
	--tec-font-family-base: var(--hapi-font-body);
	--tec-color-text-primary: var(--hapi-text);
	--tec-color-text-secondary: var(--hapi-muted);
	--tec-color-text-event-date: var(--hapi-muted);
	--tec-color-text-event-title: var(--hapi-text);
	--tec-color-link-primary: var(--hapi-text);
	--tec-color-link-accent: var(--hapi-link-hover);
	--tec-color-link-accent-hover: #6e4a12;
	--tec-color-accent-primary: var(--hapi-amber);
	--tec-color-accent-primary-hover: var(--hapi-gold);
	--tec-color-accent-primary-active: var(--hapi-gold);
	--tec-color-accent-primary-background: rgba(255, 197, 80, 0.15);
	--tec-color-accent-primary-multiday: rgba(255, 197, 80, 0.4);
	--tec-color-accent-primary-multiday-hover: rgba(255, 197, 80, 0.6);
	--tec-color-button-primary: var(--hapi-amber);
	--tec-color-button-primary-hover: var(--hapi-gold);
	--tec-color-button-primary-active: var(--hapi-gold);
	--tec-color-button-primary-background: rgba(255, 197, 80, 0.15);
	--tec-color-day-marker-month: var(--hapi-link-hover);
	--tec-color-day-marker-past-month: var(--hapi-muted);
	--tec-color-background-events-bar-submit-button: var(--hapi-amber);
	--tec-color-background-events-bar-submit-button-hover: var(--hapi-gold);
	--tec-color-background-events-bar-submit-button-active: var(--hapi-gold);
	--tec-color-text-events-bar-submit-button: #222222;
	--tec-color-text-events-bar-submit-button-active: #222222;
	--tec-color-text-events-bar-submit-button-hover: #222222;
	--tec-color-accent-secondary: #333333;
	--tec-color-accent-secondary-hover: #1d1d1d;
	--tec-color-accent-secondary-active: #1d1d1d;
	--tec-color-accent-secondary-background: rgba(51, 51, 51, 0.08);
	--tec-border-radius-default: 0;
}

.hapi-events {
	/* TEC layout variables: our wrapper provides the gutters and width. */
	--tec-grid-gutter-page: 0px;
	--tec-grid-gutter-page-small: 0px;
	--tec-grid-width: 100%;
	max-width: calc(1184px + 2 * var(--hapi-gutter));
	margin: 0 auto;
	padding: 24px var(--hapi-gutter) 72px;
}

/* TEC adds generous top/bottom padding; the header band already spaces this. */
.hapi-events .tribe-events.tribe-events-view .tribe-events-l-container {
	padding-top: 16px;
	padding-bottom: 0;
}

/* Buttons and the search bar submit as HAPI pills */
.hapi-events .tribe-common-c-btn,
.hapi-events .tribe-events-c-search__button,
.hapi-events a.tribe-common-c-btn {
	border-radius: var(--hapi-pill);
	color: #222222;
	font-weight: 700;
}

.hapi-events .tribe-events-c-search__button:hover,
.hapi-events .tribe-common-c-btn:hover {
	color: #222222;
}

/* Headings in the event list use the heading font */
.hapi-events .tribe-events-calendar-list__month-separator-text,
.hapi-events .tribe-events-calendar-list__event-title,
.hapi-events .tribe-events-c-top-bar__datepicker-desktop,
.hapi-events .tribe-events-c-top-bar__datepicker-mobile {
	font-family: var(--hapi-font-body);
}

.hapi-events .tribe-events-calendar-list__month-separator-text {
	font-family: var(--hapi-font-heading);
	font-weight: 400;
	letter-spacing: 0.02em;
}

.hapi-events .tribe-events-calendar-list__event-title-link {
	border-bottom: 0;
	font-weight: 600;
}

.hapi-events .tribe-events-calendar-list__event-title-link:hover {
	color: var(--hapi-link-hover);
	text-decoration: underline;
}

/* List view date tag as the amber badge from the homepage */
.hapi-events .tribe-events-calendar-list__event-date-tag-datetime {
	padding: 8px 0;
	background: var(--hapi-amber);
	color: #222222;
}

.hapi-events .tribe-events-calendar-list__event-date-tag-weekday {
	color: #222222;
	font-size: 11px;
	font-weight: 700;
}

.hapi-events .tribe-events-calendar-list__event-date-tag-daynum {
	color: #222222;
	font-family: var(--hapi-font-heading);
}

/* Month view: today and selected day */
.hapi-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date {
	color: var(--hapi-link-hover);
}

/* Single event: our wrapper sets the width; TEC's own page container doesn't. */
.hapi-events #tribe-events-pg-template {
	max-width: none;
	margin: 0;
	padding: 24px 0 0;
}

.hapi-events .tribe-events-single > * {
	max-width: 740px;
}

/* Single event: title and date are shown in the HAPI header band */
.hapi-events .tribe-events-single-event-title,
.hapi-events .tribe-events-schedule,
.hapi-events .tribe-events-single .tribe-events-back {
	display: none;
}

.hapi-events .tribe-events-single {
	font-size: 18px;
	line-height: 1.7;
}

.hapi-events .tribe-events-event-meta {
	border: 0;
	background: var(--hapi-cream);
	font-size: 15px;
}

.hapi-events .tribe-events-meta-group .tribe-events-single-section-title {
	font-family: var(--hapi-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hapi-muted);
}

.hapi-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button {
	border: 2px solid #333333;
	border-radius: var(--hapi-pill);
	background: transparent;
	color: #333333;
}

.hapi-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:hover,
.hapi-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:focus-within {
	background: #333333;
	color: #ffffff;
}

.hapi-events .tribe-events-c-subscribe-dropdown__button button,
.hapi-events .tribe-events-c-subscribe-dropdown__button .tribe-common-c-btn-border__text {
	color: inherit;
}

.hapi-events .tribe-events-c-subscribe-dropdown__button svg path,
.hapi-events .tribe-events-c-subscribe-dropdown__button svg {
	fill: currentColor;
	stroke: currentColor;
}

/* Month view: day numbers that link to events need more than colour to stand out. */
.hapi-events .tribe-events-calendar-month__day-date-link {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}