/*
 * The Events Calendar, brought into the Rheinband palette.
 *
 * Loaded only on the plugin's own pages (inc/calendar.php decides which those
 * are), because none of these selectors exist anywhere else and the file would
 * otherwise be dead weight on every request.
 *
 * Two layers, deliberately:
 *
 *   1. The plugin's own custom properties. The Events Calendar draws its views
 *      through a set of --tec-* variables, so redefining them reaches parts of
 *      the calendar this file never names — including markup a future plugin
 *      version adds. That is the whole point of doing it this way.
 *   2. Plain selectors for the things that carry the design: type, links,
 *      buttons, the event rows. They repeat some of what layer 1 already does,
 *      on purpose — the variable names come from the plugin's v2 stylesheet and
 *      a renamed one would fail silently, whereas .tribe-common is the class
 *      every view has carried since v2 shipped.
 *
 * Colours come from tokens.css. The contrast ratios there are computed, so a
 * literal hex would quietly opt out of that guarantee.
 */

/* --- The page around the calendar -----------------------------------------
 * Divi renders these views through its blog layout, which means a sidebar —
 * and on a calendar there is nothing to put in it, so it arrives as an empty
 * fifth of the screen with the site name stranded in it. The calendar takes
 * the full width instead.
 *
 * The selectors are unqualified on purpose: this file is only enqueued on the
 * plugin's own pages (inc/calendar.php decides which), so #sidebar here can
 * only ever mean the sidebar of a calendar view. Qualifying it would mean
 * guessing at a body class, and the guess is what would break.
 */

#sidebar {
	display: none;
}

/*
 * The body classes have to be named. Divi sizes the content column through
 * .et_right_sidebar #left-area — one class more than a bare #left-area, so the
 * plain selector loses and the column keeps its 79 % while the sidebar beside
 * it is already hidden. Both sides are listed because the setting is per site
 * and either one can be active.
 */
.et_right_sidebar #left-area,
.et_left_sidebar #left-area,
#left-area {
	width: 100%;
	padding-right: 0;
	padding-left: 0;
}

/*
 * The hairline between content and sidebar. Divi draws it as a pseudo-element
 * on the container, so hiding the sidebar leaves the rule standing in the
 * middle of an otherwise empty page — which is exactly what it looked like.
 */
#main-content .container::before {
	display: none;
}

/*
 * Divi's blog container is 80% wide with its own maximum; the rest of the site
 * sits in --rq-container. Matching them keeps the calendar from being narrower
 * than the page that links to it.
 */
#main-content .container {
	width: min(90%, var(--rq-container));
	max-width: none;

	/* Divi pads this container for a page that starts with a title. The
	   calendar starts with its own toolbar, so the default leaves a hole
	   roughly the height of the header. */
	padding-top: var(--rq-space-l);
	padding-bottom: var(--rq-space-section);
}

/*
 * The gap above the toolbar was two paddings stacked. Divi's container is one;
 * the other is the plugin's own layout container, which pads generously for a
 * theme that brings none of its own. Together they came to roughly the height
 * of the header.
 */
.tribe-events-l-container {
	padding-top: var(--rq-space-s);
	padding-bottom: var(--rq-space-l);
}

.tribe-events-header,
.tribe-events-view,
.tribe-common .tribe-events-header {
	padding-top: 0;
	margin-top: 0;
}

/* --- The heading ----------------------------------------------------------
 * inc/calendar.php puts an eyebrow and an <h1> above the views, because the
 * plugin's own templates open straight into the toolbar and leave the page
 * without one.
 */

.rq-calendar-head {
	margin-bottom: var(--rq-space-m);
}

.rq-calendar-head h1 {
	margin: var(--rq-space-xs) 0 0;
}

/* --- Layer 1: the plugin's variables -------------------------------------- */

.tribe-common,
.tribe-events,
.tribe-events-widget {
	--tec-font-family-sans-serif: var(--rq-font-body);
	--tec-font-family-base: var(--rq-font-body);

	--tec-color-background: var(--rq-surface);
	--tec-color-text-primary: var(--rq-text);
	--tec-color-text-primary-light: var(--rq-text-muted);
	--tec-color-text-secondary: var(--rq-text-muted);
	--tec-color-text-event-title: var(--rq-ink);
	--tec-color-text-event-date: var(--rq-text-muted);

	/* Terracotta as type is always the -strong variant: --rq-accent reaches
	   only 3.88:1 on cream and is a fill, never a letter. */
	--tec-color-link-primary: var(--rq-text);
	--tec-color-link-accent: var(--rq-accent-strong);
	--tec-color-link-accent-hover: var(--rq-ink);

	/* Buttons and the active view are surfaces, so the fill variant belongs
	   here — and the ink on it is white, 4.33:1 the other way round. */
	--tec-color-accent-primary: var(--rq-accent-strong);
	--tec-color-accent-primary-hover: var(--rq-accent-deep);
	--tec-color-accent-primary-active: var(--rq-accent-deep);
	--tec-color-button-primary: var(--rq-accent-strong);
	--tec-color-button-primary-hover: var(--rq-accent-deep);
	--tec-color-button-primary-active: var(--rq-accent-deep);

	/* --rq-border is decorative at 1.30:1; anything that has to be seen as a
	   boundary uses --rq-line, which clears 3:1 on every ground here. */
	--tec-color-border-default: var(--rq-border);
	--tec-color-border-secondary: var(--rq-border);
	--tec-color-border-active: var(--rq-line);

	--tec-border-radius-default: var(--rq-radius);
}

/* --- Layer 2: type -------------------------------------------------------- */

.tribe-common {
	font-family: var(--rq-font-body);
	color: var(--rq-text);
}

/*
 * The plugin sets its headings in its own sans stack at its own weights. They
 * are headings on this site like any other, so they take the display face —
 * font-optical-sizing included, which is the reason that face was chosen.
 */
.tribe-common h1,
.tribe-common h2,
.tribe-common h3,
.tribe-common h4,
.tribe-events h1,
.tribe-events h2,
.tribe-events h3 {
	font-family: var(--rq-font-display);
	font-optical-sizing: auto;
	color: var(--rq-ink);
	letter-spacing: -0.01em;
}

/* Dates line up in a column only with tabular figures — Figtree's default
   figures are proportional. Same rule as base.css, restated because the
   plugin sets font-variant-numeric of its own on these elements. */
.tribe-events time,
.tribe-common time,
.tribe-events-calendar-month__day-date {
	font-variant-numeric: tabular-nums;
}

/* --- Layer 2: links ------------------------------------------------------- */

/*
 * :visited is named everywhere alongside the base state. The plugin styles its
 * links per state, and a rule that only answers the unvisited one leaves the
 * visited link at whatever the plugin or the browser last said — which is how
 * a page ends up with two different link colours depending on where the reader
 * has already been. Nothing on this site distinguishes visited links by
 * colour, so both states get the same one.
 */
.tribe-common a:not(.tribe-common-c-btn):not([class*='button']),
.tribe-common a:not(.tribe-common-c-btn):not([class*='button']):visited {
	color: var(--rq-accent-strong);
}

.tribe-common a:not(.tribe-common-c-btn):not([class*='button']):hover {
	color: var(--rq-ink);
}

/*
 * The event title is the link that carries the row, so it stays in the heading
 * colour and only moves to terracotta on hover — the same way a card title
 * behaves everywhere else on the site.
 *
 * Prefixed with .tribe-common because the plugin's own rule for these links is
 * two classes deep; the bare selector loses to it and the title stays the
 * accent colour it inherits from --tec-color-link-accent.
 */
.tribe-events .tribe-events-calendar-list__event-title-link,
.tribe-events .tribe-events-calendar-list__event-title-link:visited,
.tribe-events .tribe-events-calendar-day__event-title-link,
.tribe-events .tribe-events-calendar-day__event-title-link:visited,
.tribe-events .tribe-events-calendar-month__calendar-event-title-link,
.tribe-events .tribe-events-calendar-month__calendar-event-title-link:visited,
.tribe-events .tribe-events-calendar-latest-past__event-title-link,
.tribe-events .tribe-events-calendar-latest-past__event-title-link:visited {
	color: var(--rq-ink);
}

.tribe-events .tribe-events-calendar-list__event-title-link:hover,
.tribe-events .tribe-events-calendar-day__event-title-link:hover,
.tribe-events .tribe-events-calendar-month__calendar-event-title-link:hover,
.tribe-events .tribe-events-calendar-latest-past__event-title-link:hover {
	color: var(--rq-accent-strong);
}

/* --- Layer 2: buttons ----------------------------------------------------- */

/*
 * The pill shape is what makes a button read as one across this site; the
 * plugin's own radius is nearly square. Colour comes from the variables above,
 * so only shape and weight are set here.
 */
.tribe-common .tribe-common-c-btn,
.tribe-common a.tribe-common-c-btn {
	border-radius: var(--rq-radius-pill);
	font-weight: 600;
}

/* --- Layer 2: the event rows ---------------------------------------------- */

/*
 * List and day view put each event in a row separated by a hairline. The rows
 * become the same cards the rest of the site uses — white on cream, soft
 * corners, and a shadow that lifts on hover.
 */
.tribe-events-calendar-list__event-row,
.tribe-events-calendar-day__event-row,
.tribe-events-calendar-latest-past__event-row {
	margin-block-end: var(--rq-space-s);
	padding: var(--rq-space-s);
	border-radius: var(--rq-radius-m);
	background: var(--rq-surface-card);
	box-shadow: var(--rq-shadow-1);
	transition: box-shadow var(--rq-ease), transform var(--rq-ease);
}

.tribe-events-calendar-list__event-row:hover,
.tribe-events-calendar-day__event-row:hover,
.tribe-events-calendar-latest-past__event-row:hover {
	box-shadow: var(--rq-shadow-2);
	transform: translateY(-2px);
}

/*
 * The notice that appears when a view is empty — "no upcoming events". The
 * plugin ships it as a grey slab, the one surface on the page that comes from
 * neither palette. Sand is the site's own quiet ground.
 */
.tribe-events-c-messages__message,
.tribe-events-header__messages,
.tribe-events-c-messages__message--notice {
	border-radius: var(--rq-radius-m);
	background-color: var(--rq-surface-2);
	color: var(--rq-text);
}

/* The heading over the past-events block, a sibling of the month separator. */
.tribe-events-calendar-latest-past__heading {
	font-family: var(--rq-font-display);
	font-optical-sizing: auto;
	color: var(--rq-ink);
	letter-spacing: -0.015em;
}

/* Same date block as the upcoming rows; the past view spells its classes out
   separately, so the rules above do not reach it. */
.tribe-events-calendar-latest-past__event-date-tag-weekday {
	display: block;
	color: var(--rq-text-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1.2;
	text-transform: uppercase;
}

.tribe-events-calendar-latest-past__event-date-tag-daynum {
	display: block;
	font-family: var(--rq-font-display);
	font-optical-sizing: auto;
	font-size: var(--rq-step-2);
	font-weight: 800;
	line-height: 1.1;
	color: var(--rq-ink);
}

.tribe-events-calendar-latest-past__event-date-tag-year {
	display: block;
	color: var(--rq-text-muted);
	font-size: 0.8125rem;
	line-height: 1.2;
}

/* The separator the rows used to need — now the gap between cards does that
   work, and the line would cut across them. */
.tribe-events-calendar-list__event-row::after,
.tribe-events-calendar-list__event-row::before {
	content: none;
}

/*
 * The date marker on the left of a list row. It is built the same way as the
 * block [rq_next_event] puts on the homepage — small uppercase weekday over a
 * large day number — so a visitor arriving from there recognises it.
 */
.tribe-events-calendar-list__event-date-tag-datetime,
.tribe-events-calendar-day__event-date-tag-datetime {
	color: var(--rq-ink);
	text-align: center;
}

.tribe-events-calendar-list__event-date-tag-weekday {
	display: block;
	color: var(--rq-text-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1.2;
	text-transform: uppercase;
}

.tribe-events-calendar-list__event-date-tag-daynum {
	display: block;
	font-family: var(--rq-font-display);
	font-optical-sizing: auto;
	font-size: var(--rq-step-2);
	font-weight: 800;
	line-height: 1.1;
	color: var(--rq-ink);
}

/*
 * The month heading between groups of rows. The plugin sets it in its body
 * face at body size; here it is a heading like any other, and the hairline
 * beside it comes from --tec-color-border-default above.
 */
.tribe-events-calendar-list__month-separator-text {
	font-family: var(--rq-font-display);
	font-optical-sizing: auto;
	font-size: var(--rq-step-1);
	font-weight: 700;
	color: var(--rq-ink);
	letter-spacing: -0.01em;
}

/* --- Layer 2: month grid -------------------------------------------------- */

.tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date {
	color: var(--rq-accent-strong);
	font-weight: 700;
}

/*
 * The month cell's own separators. --rq-border is the decorative weight and
 * right for a grid this dense; a stronger line would turn the month into a
 * table of boxes.
 */
.tribe-events-calendar-month__day {
	border-color: var(--rq-border);
}

/* --- Focus ---------------------------------------------------------------- */

/*
 * The plugin ships outline: none on several of its controls, so the ring has
 * to be restated here — same ring as base.css, and !important for the same
 * documented reason.
 */
.tribe-common a:focus-visible,
.tribe-common button:focus-visible,
.tribe-common input:focus-visible,
.tribe-common select:focus-visible,
.tribe-events a:focus-visible,
.tribe-events button:focus-visible {
	outline: 2px solid var(--rq-accent) !important;
	outline-offset: 2px !important;
}