/**
 * Bread & Roses calendar styling, after the printed monthly poster.
 *
 * Two rules of thumb here:
 *
 * 1. Prefer overriding The Events Calendar's CSS custom properties over writing
 *    selectors. Colours in TEC v2 cascade through variables, so setting the
 *    variable is shorter and survives plugin updates.
 *
 * 2. Where a selector IS needed, note that TEC's desktop rules are written as
 *    `.tribe-common--breakpoint-medium.tribe-events .foo` — two classes on the
 *    root plus a descendant. A plain `.tribe-events .foo` is one class lighter
 *    and silently loses, which is why an earlier version of this file had no
 *    effect on the grid. The doubled `.tribe-events.tribe-events` prefix below
 *    matches their weight, and this sheet loads after theirs, so it wins.
 *
 * Palette: brown #3C342F, calendar yellow #FFD400, cream #FAF7F2, ink #1C1A18.
 */

.tribe-common,
.tribe-events,
#tribe-events-pg-template,
.tribe-events-widget {
	/* Accent: TEC ships a blue (#334aff). */
	--tec-color-accent-primary: #3c342f;
	--tec-color-accent-primary-hover: #3c342fcc;
	--tec-color-accent-primary-active: #3c342fe6;
	--tec-color-accent-primary-background: #3c342f12;
	--tec-color-accent-secondary: #6b5f55;
	--tec-color-accent-secondary-hover: #6b5f55cc;
	--tec-color-accent-secondary-active: #6b5f55e6;

	/* Day numerals. These inherit from --tec-color-text-primary by default,
	   which is why they came out dark once that was set to the body colour. */
	--tec-color-day-marker-month: #ffd400;
	--tec-color-day-marker-month-hover: #6b5f55;
	--tec-color-day-marker-month-active: #6b5f55;
	--tec-color-day-marker-current-month: #3c342f;   /* today */
	--tec-color-day-marker-current-month-hover: #1c1a18;
	--tec-color-day-marker-current-month-active: #1c1a18;
	--tec-color-day-marker-past-month: #f2e8c2;      /* days either side */
	--tec-color-day-marker-past-month-hover: #f2e8c2;

	/* Event blocks. */
	--tec-color-accent-primary-week-event: #ffd4002e;
	--tec-color-accent-primary-week-event-hover: #ffd40052;
	--tec-color-background-primary-multiday: #ffd40057;
	--tec-color-background-primary-multiday-hover: #ffd40080;

	/* Text and rules. */
	--tec-color-text-primary: #2e2a26;
	--tec-color-text-secondary: #6b5f55;
	--tec-color-text-event-title: #1c1a18;
	--tec-color-text-event-date: #6b5f55;
	--tec-color-link-primary: #3c342f;
	--tec-color-link-accent: #3c342f;
	--tec-color-link-accent-hover: #1c1a18;
	--tec-color-border-default: #e2dbd2;
	--tec-color-border-secondary: #efe9e1;
	--tec-color-background-secondary: #faf7f2;

	/* The events bar submit button and generic buttons run off their own
	   variables, not the accent ones. These were TEC's remaining blues. */
	--tec-color-background-events-bar-submit-button: #ffd400;
	--tec-color-background-events-bar-submit-button-hover: #3c342f;
	--tec-color-background-events-bar-submit-button-active: #3c342f;
	--tec-color-text-events-bar-submit-button: #2e2a26;
	--tec-color-text-events-bar-submit-button-hover: #faf7f2;
	--tec-color-text-events-bar-submit-button-active: #faf7f2;
	--tec-color-button-primary: #3c342f;
	--tec-color-button-primary-hover: #2e2a26;
	--tec-color-button-primary-active: #2e2a26;

	--tec-font-family-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--tec-font-family-base: var( --tec-font-family-sans-serif );
}

/* The search / view-switcher bar sits on cream. */
.tribe-events .tribe-events-header {
	background-color: #faf7f2;
	border: 1px solid #e2dbd2;
	border-radius: 6px;
	padding: 16px;
}

/* ==========================================================================
   Weekday header row: full day names, the wheat rule, and the standing
   opening times, as printed on the poster.
   ========================================================================== */

/* Short day names.
 *
 * TEC renders a single letter for sighted users ("M") and the full name in a
 * screen-reader-only span ("Monday"). Neither is the short form we want, but the
 * `<th>` already carries `abbr="Mon"`, so that attribute supplies it.
 *
 * The single letter is hidden and the screen-reader span left alone, so assistive
 * technology still announces the full "Monday" while sighted users see "Mon". */
.tribe-events.tribe-events .tribe-events-calendar-month__header-column-title span[aria-hidden="true"] {
	display: none;
}

.tribe-events.tribe-events .tribe-events-calendar-month__header-column::before {
	content: attr( abbr );
	display: block;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.2;
	color: #1c1a18;
}

.tribe-events.tribe-events .tribe-events-calendar-month__header-column {
	border: 0;
	padding: 0 12px 0 0;
	text-align: left;
	vertical-align: top;
}

.tribe-events.tribe-events .tribe-events-calendar-month__header-column-title {
	text-align: left;
	margin: 0;
}

/* The short wheat-and-rose rule beneath each day name.
 *
 * Explicit width and background-size, because the `<th>`'s content box measures
 * only ~40px here: an `auto` background width was being clipped to a sliver, and
 * that same squeeze is why the opening times below need `white-space: pre`. */
.tribe-events.tribe-events .tribe-events-calendar-month__header-column-title::after {
	content: "";
	display: block;
	width: 96px;
	max-width: none;
	height: 13px;
	margin: 5px 0 5px;
	background-image: url( 'img/divider-short-black.png' );
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 96px 13px;
}

/* Standing weekly information, taken from the printed calendar. This is a
   convenience duplicate: the authoritative opening hours are real text in the
   footer of every page and on the Home and Contact pages. */
.tribe-events.tribe-events .tribe-events-calendar-month__header-column::after {
	display: block;
	/* `pre` not `pre-line`: the cell's content box is far narrower than the visible
	   column, so normal wrapping broke this onto one word per line. `pre` honours
	   only the explicit line break in the content string. */
	white-space: pre;
	width: max-content;
	max-width: none;
	font-family: "Inter", sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	/* TEC's b3 utility class uppercases and bolds this row; the poster does not. */
	text-transform: none;
	letter-spacing: 0;
	color: #1c1a18;
	padding-bottom: 8px;
}

/* Monday to Thursday: open 4pm, with student deals. */
.tribe-events.tribe-events .tribe-events-calendar-month__header-column:nth-child(1)::after,
.tribe-events.tribe-events .tribe-events-calendar-month__header-column:nth-child(2)::after,
.tribe-events.tribe-events .tribe-events-calendar-month__header-column:nth-child(3)::after,
.tribe-events.tribe-events .tribe-events-calendar-month__header-column:nth-child(4)::after {
	content: "Open 4pm\A Student deals";
}

/* Friday: open 4pm. */
.tribe-events.tribe-events .tribe-events-calendar-month__header-column:nth-child(5)::after {
	content: "Open 4pm";
}

/* Weekend: open midday. */
.tribe-events.tribe-events .tribe-events-calendar-month__header-column:nth-child(6)::after,
.tribe-events.tribe-events .tribe-events-calendar-month__header-column:nth-child(7)::after {
	content: "Open 12pm";
}

/* ==========================================================================
   The month grid.
   ========================================================================== */

/* No cell borders; the poster has none. The numeral sits below the listings,
   which is why the cell is reversed — TEC renders the date first. */
.tribe-events.tribe-events .tribe-events-calendar-month__day {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	min-height: 150px;
	padding: 8px 12px 4px;
	border: 0;
	background-color: transparent;
}

/* TEC's own cell separators. */
.tribe-events.tribe-events .tribe-events-calendar-month__day::after,
.tribe-events.tribe-events .tribe-events-calendar-month__day::before {
	display: none;
}

.tribe-events.tribe-events .tribe-events-calendar-month__day-cell {
	padding: 0;
	background-color: transparent;
	border: 0;
}

/* The wheat-and-rose rule across the top of each week. */
.tribe-events.tribe-events .tribe-events-calendar-month__week {
	border: 0;
	background-image: url( 'img/divider-long-black.png' );
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	/* Clears the artwork's natural height (2189x41, so ~20px at grid width)
	   before the numerals begin. */
	padding-top: 26px;
}

/* Day numerals: the poster's defining feature. Colour comes from the
   day-marker variables above. */
.tribe-events.tribe-events .tribe-events-calendar-month__day-date,
.tribe-events.tribe-events .tribe-events-calendar-month__day-date-link {
	display: block;
	padding: 0;
	margin: 0;
	background: none;
	border-radius: 0;
	text-align: left;
	line-height: 1;
}

/* The visible number is this inner span, and TEC sizes it directly. Styling only
   the parent left days without events small and dark, because those render as a
   plain span rather than a link, so the size and colour must be set here. */
.tribe-events.tribe-events .tribe-events-calendar-month__day-date-daynum {
	display: inline-block;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: clamp( 26px, 3.4vw, 54px );
	line-height: 1;
	letter-spacing: -0.03em;
	color: #ffd400;
}

/* Days either side of the month recede. */
.tribe-events.tribe-events .tribe-events-calendar-month__day--other-month .tribe-events-calendar-month__day-date-daynum,
.tribe-events.tribe-events .tribe-events-calendar-month__day--past-month .tribe-events-calendar-month__day-date-daynum,
.tribe-events.tribe-events .tribe-events-calendar-month__day--next-month .tribe-events-calendar-month__day-date-daynum {
	color: #f2e8c2;
}

/* Event text: black and tight, above the numeral. */
.tribe-events.tribe-events .tribe-events-calendar-month__calendar-event {
	margin: 0 0 9px;
	padding: 0;
	border: 0;
	background: none;
}

.tribe-events.tribe-events .tribe-events-calendar-month__calendar-event-title {
	margin: 0;
}

.tribe-events.tribe-events .tribe-events-calendar-month__calendar-event-title-link {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.25;
	color: #1c1a18;
	text-decoration: none;
}

.tribe-events.tribe-events .tribe-events-calendar-month__calendar-event-title-link:hover,
.tribe-events.tribe-events .tribe-events-calendar-month__calendar-event-title-link:focus-visible {
	color: #6b5f55;
	text-decoration: underline;
}

.tribe-events.tribe-events .tribe-events-calendar-month__calendar-event-datetime {
	font-family: "Inter", sans-serif;
	font-size: 12px;
	line-height: 1.35;
	color: #1c1a18;
}

.tribe-events .tribe-events-calendar-month__calendar-event-datetime-separator {
	display: none;
}

/* ==========================================================================
   Narrow screens: TEC switches to its own stacked list, so the poster
   treatment is dropped rather than squeezed.
   ========================================================================== */

@media ( max-width: 767px ) {
	.tribe-events.tribe-events .tribe-events-calendar-month__day {
		min-height: 0;
		padding: 6px;
		flex-direction: column;
	}

	.tribe-events.tribe-events .tribe-events-calendar-month__day-date,
	.tribe-events.tribe-events .tribe-events-calendar-month__day-date-link {
		font-size: 18px;
		text-align: center;
	}

	.tribe-events.tribe-events .tribe-events-calendar-month__week {
		background-image: none;
		padding-top: 0;
		border-top: 1px solid #e2dbd2;
	}

	/* Opening times and the wheat rule are decoration at this size. */
	.tribe-events.tribe-events .tribe-events-calendar-month__header-column::after,
	.tribe-events.tribe-events .tribe-events-calendar-month__header-column-title::after {
		display: none;
	}

	.tribe-events.tribe-events .tribe-events-calendar-month__header-column-title .screen-reader-text {
		font-size: 12px;
	}
}

/* --------------------------------------------------------------------------
   Today: a yellow block with a dark numeral. Now that every numeral is yellow,
   inverting today this way marks it far more clearly than a colour change
   would. inline-block so the block hugs the number instead of filling the cell.
   -------------------------------------------------------------------------- */

/* The block goes on the number's own span, not its parent. On the parent it
   stretched the full column width; on the span it hugs the digits. */
.tribe-events.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum {
	background-color: #ffd400;
	color: #1c1a18;
	padding: 0 12px 6px;
	border-radius: 3px;
}

.tribe-events.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date,
.tribe-events.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-link {
	background: none;
	padding: 0;
	width: auto;
}

@media ( max-width: 767px ) {
	.tribe-events.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum {
		padding: 0 6px 2px;
	}
}

/* --------------------------------------------------------------------------
   Tighten the space TEC leaves around its own views.
   -------------------------------------------------------------------------- */

.tribe-events .tribe-events-header {
	margin-bottom: 8px;
}

.tribe-events.tribe-events .tribe-events-calendar-month {
	margin-top: 0;
}

#tribe-events-pg-template,
.tribe-events-view,
.tribe-events .tribe-events-l-container {
	padding-top: 0;
	padding-bottom: 0;
}