/**
 * Mindjuice Event Calendar
 *
 * The "Redesign Calendar Application" Figma frame: an open, rule-based grid with
 * no cell boxes. Node 13:453 puts the month wordmark, the view switch and the
 * course filter on one sticky band - hence .mjec__bar.
 *
 * Colours come from the Elementor global kit with literal fallbacks. Everything
 * is scoped to .mjec - no resets, no !important. See "CSS conventions" in
 * DOCUMENTATION.md.
 */

.mjec {
	--mjec-text:      var(--e-global-color-text, #414042);
	--mjec-brown:     var(--e-global-color-6444cda, #B5875A);
	--mjec-white:     var(--e-global-color-5e2333d, #FFFFFF);

	/* Rules, day numbers and body copy are all the same ink in the design;
	   only the month wordmark goes to full black. */
	--mjec-line:      var(--mjec-text);
	--mjec-muted:     #777375;
	--mjec-faint:     #9B9695;

	/* Two greys the frame states directly rather than deriving: the filter's
	   eyebrow label (13:470) and the dropdown's hairline (13:472). */
	--mjec-label:     #686466;
	--mjec-line-soft: #C9C3BD;

	/* Warm field behind today. Not a tint of the brown - the design picks a
	   slightly desaturated warm grey, so it is stated literally. */
	--mjec-today-bg:  #F1EDE7;

	/* Column gutter. Today's field bleeds either side, the way the design pads
	   that cell out past its column - 10px in the list view, and the frame's
	   11.2px once the calendar grid takes over (see the calendar block). */
	--mjec-gutter:    clamp(10px, 2.3vw, 32px);
	--mjec-bleed:     10px;
	--mjec-cell-head: 16px;
	--mjec-cell-foot: 24px;

	/* Breathing room below every cell, outside the design's 24px foot. Today's
	   field stops at the foot, so the gap stays clear. */
	--mjec-row-gap:   16px;

	/* Shared by the numeral and by the row-height floor below. The design sets
	   42.4px against its 1380px grid, so it scales with the viewport that
	   produces that width. */
	--mjec-day-size:  clamp(26px, 2.95vw, 42.4px);

	/* A three-line chip at the design's metrics: 2 borders + 19.84 padding +
	   16.25 + 2.56 + 15.53 + 2.56 + 15.53. */
	--mjec-chip-h:    74.3px;

	/* Measured height of the theme's fixed header, cleared by the sticky bar.
	   The theme swaps to a taller desktop header above 1024px; both land on
	   64px today but stay separate since nothing ties them together. Override
	   on .mjec if either header changes. */
	--mjec-sticky-top:      64px;
	--mjec-sticky-top-wide: 64px;
	--mjec-sticky-offset:   var(--mjec-sticky-top);

	/* Measured height of the sticky bar - 14px + the 60px wordmark row (the
	   295px filter beside it is 71px) + 18px. Only read by the <noscript>
	   heading offset, so an approximation is fine. */
	--mjec-bar-h:     104px;

	--mjec-ctl-gap:   17.2px;
	--mjec-hairline:  rgba(201, 195, 189, .1);

	font-family: inherit;
	color: var(--mjec-text);
	background: none;
}

.mjec *,
.mjec *::before,
.mjec *::after {
	box-sizing: border-box;
}

/* Above 1024px the theme swaps to its taller desktop header (see the
   --mjec-sticky-top-wide comment above) - one override feeds every sticky
   offset in this file. */
@media (min-width: 1025px) {
	.mjec {
		--mjec-sticky-offset: var(--mjec-sticky-top-wide);
	}
}

/* ------------------------------------------------------------------ lede */

.mjec .mjec__lede {
	margin: 0 0 clamp(24px, 3vw, 40px);
	max-width: 46ch;
	color: var(--mjec-muted);
	font-size: 16px;
	line-height: 1.5;
}

/* ------------------------------------------------------------ header bar */

/* The bar is the first child rather than a sibling column, so it sticks for the
   whole height of this container and one band serves every month. */
.mjec .mjec__months {
	position: relative;
	min-width: 0;
}

.mjec .mjec__bar {
	position: sticky;
	top: var(--mjec-sticky-offset);
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px 40px;
	margin-bottom: clamp(20px, 3vw, 32px);
	/* Today's field bleeds --mjec-bleed past its column on both sides, so a bar
	   that stopped at the measure let the tint show either side of it while
	   scrolling. The bar is pulled out by the same bleed and pads it back, so
	   the band covers what passes under it and the content stays put. */
	margin-left: calc(-1 * var(--mjec-bleed));
	margin-right: calc(-1 * var(--mjec-bleed));
	padding: 14px var(--mjec-bleed) 18px;
	background: var(--mjec-white);
	/* Twice --mjec-hairline's alpha - the shared hairline is too faint here. */
	border-bottom: 1px solid rgba(201, 195, 189, .2);
}

/* Wordmark left, controls right, inside the frame's own measure - the switch
   sits 429px in (node 13:458), a fixed distance from the left edge rather than
   chasing the width of the month name. */
.mjec .mjec__bar-main {
	flex: 0 1 484px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mjec-ctl-gap);
	min-height: 60px;
	max-width: 100%;
}

.mjec .mjec__label {
	margin: 0;
	color: #000;
	font-weight: 700;
	font-size: clamp(28px, 2.8vw, 48px);
	line-height: 1;
	text-transform: capitalize;
}

.mjec .mjec__tools {
	display: flex;
	align-items: center;
	gap: var(--mjec-ctl-gap);
}

/* ------------------------------------------------------- list/calendar switch */

.mjec .mjec__views {
	display: flex;
	align-items: center;
	gap: var(--mjec-ctl-gap);
}

/*
 * The frame draws the unselected glyph as black at 20% and the selected one
 * solid, so the buttons only carry a colour - no chrome, no active fill.
 */
.mjec .mjec__view {
	appearance: none;
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: rgba(0, 0, 0, .2);
	transition: color .15s ease;
}

.mjec .mjec__view[aria-pressed="true"] {
	color: #000;
	cursor: default;
}

.mjec .mjec__view:hover:not([aria-pressed="true"]) {
	color: var(--mjec-brown);
}

/* 16px and 21px glyphs are well under a touch target, so each button grows an
   invisible one the flex gap does not have to pay for. */
.mjec .mjec__view::after {
	content: "";
	position: absolute;
	inset: -12px;
}

.mjec .mjec__view-icon {
	display: block;
}

.mjec .mjec__view:focus-visible {
	outline: none;
}

.mjec .mjec__view:focus-visible::after {
	outline: 2px solid var(--mjec-brown);
	outline-offset: -6px;
}

/* --------------------------------------------------------------- filter */

.mjec .mjec__filter {
	flex: 0 0 295px;
	width: 295px;
	max-width: 100%;
	margin: 0;
}

.mjec .mjec__filter-label {
	display: block;
	margin-bottom: 8px;
	color: var(--mjec-label);
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	text-transform: uppercase;
	letter-spacing: .12em;
}

.mjec .mjec__select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 46.8px;
	margin: 0;
	padding: 0 46px 0 15.5px;
	font: inherit;
	font-size: 14.4px;
	line-height: 1.33;
	letter-spacing: .1em;
	color: var(--mjec-text);
	background-color: var(--mjec-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='9' viewBox='0 0 15 9'%3E%3Cpath d='M1 1l6.5 6.5L14 1' fill='none' stroke='%23414042' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 19.5px center;
	border: 1px solid var(--mjec-line-soft);
	border-radius: 4px;
	cursor: pointer;
}

.mjec .mjec__select:focus-visible {
	outline: 2px solid var(--mjec-brown);
	outline-offset: 1px;
}

/* Only meaningful without JavaScript - mjec.js filters on `change`, and the
   <noscript> block in calendar.php puts the button back. */
.mjec .mjec__filter-go {
	appearance: none;
	display: none;
	font: inherit;
	font-size: 14px;
	margin-top: 8px;
	padding: .5em 1.2em;
	cursor: pointer;
	color: var(--mjec-white);
	background: var(--mjec-brown);
	border: 1px solid var(--mjec-brown);
	border-radius: 4px;
}

/* -------------------------------------------------------- month headings */

/*
 * The bar carries the current month's name, so each month's own heading is in
 * the document for structure only - it keeps the h3 outline intact for screen
 * readers and gives mjec.js the label text to lift. <noscript> in calendar.php
 * restores it as the visible, sticky label, which is why the look of it stays
 * here rather than moving into that block.
 */
.mjec .mjec__heading {
	z-index: 2;
	top: var(--mjec-sticky-offset);
	background: var(--mjec-white);
	color: #000;
	font-weight: 700;
	font-size: clamp(24px, 2.6vw, 36px);
	text-transform: capitalize;
	line-height: 1.18;
	border-bottom: 1px solid var(--mjec-hairline);
}

.mjec .mjec__month > .mjec__heading {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* --------------------------------------------------------- month divider
 *
 * The "month divider" node - an eyebrow naming the month, at the same metrics
 * as the filter's label (12/700/.12em/#686466), which is the one other place
 * the frame uses this size. The list view is the base: label only, with the
 * next day row's own 2px rule doing the separating. The calendar view adds the
 * brown rule the frame draws above the weekday header.
 */

.mjec .mjec__divider {
	margin: 0 0 4px;
	padding: 16px 0 0;
}

.mjec .mjec__divider-label {
	display: block;
	color: var(--mjec-label);
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	text-transform: uppercase;
	letter-spacing: .12em;
}

/*
 * A month the filter empties collapses out of the list, and the divider must
 * go with it - both because a label with nothing under it reads as a bug, and
 * because currentMonth() in mjec.js names the first month "still standing".
 * Leave the divider behind and every emptied month stands 36px tall and can be
 * named. The calendar view still draws its grid, so it undoes this below.
 */
.mjec .mjec__month:not(:has(td.mjec__cell.has-events:not(.is-empty-filtered))) .mjec__divider {
	display: none;
}

/* ------------------------------------------------------ grid: list view
 *
 * The list is the *base* layout, not a mobile override - a media query cannot
 * share a rule set with a class selector, so the calendar grid is the thing
 * wrapped in a query instead. See "List and calendar views" in DOCUMENTATION.md.
 */

.mjec .mjec__grid {
	display: block;
	width: auto;
	margin: 0;
	background: none;
	border-collapse: collapse;
	table-layout: fixed;
}

.mjec .mjec__grid tbody,
.mjec .mjec__grid tr {
	display: block;
	width: auto;
}

.mjec .mjec__grid thead {
	display: none;
}

.mjec .mjec__grid th,
.mjec .mjec__grid td {
	border: 0;
	background: none;
	text-align: left;
	vertical-align: top;
}

/* Both pseudo-elements below are absolutely positioned, so every cell has to
   be their containing block - a day that is today but carries no events would
   otherwise hang its tint off .mjec__months and paint over the whole month. */
.mjec .mjec__cell,
.mjec .mjec__cell--outside {
	position: relative;
}

/*
 * `td.mjec__cell` rather than `.mjec__cell` on purpose - the reflow rule below
 * uses an element selector, so the hiding rule has to match its specificity or
 * `display: grid` wins and every empty day shows.
 */
.mjec .mjec__grid td.mjec__cell,
.mjec .mjec__grid td.mjec__cell--outside {
	display: none;
}

.mjec .mjec__grid td.mjec__cell.has-events {
	display: grid;
	grid-template-columns: 3.2em 1fr;
	gap: 0 16px;
	align-items: start;
	width: auto;
	height: auto;
	padding: 0 0 18px;
	margin-bottom: 18px;
}

.mjec .mjec__grid td.mjec__cell.has-events.is-empty-filtered {
	display: none;
}

/* The frame draws no desktop list view, and a chip stretched across 1000px of
   page is unreadable - so above the mobile width the event column keeps a
   measure and the day numerals stay in their own column. */
@media (min-width: 701px) {
	.mjec .mjec__grid td.mjec__cell.has-events {
		grid-template-columns: 3.2em minmax(0, 640px);
	}
}

/* The opening rule. A block child rather than border-top, so it respects the
   cell's right padding and stops cleanly at the gutter. */
.mjec .mjec__cell::before,
.mjec .mjec__cell--outside::before {
	content: "";
	position: relative;
	z-index: 1;
	display: block;
	border-top: 2px solid var(--mjec-line);
}

.mjec .mjec__cell.has-events::before {
	grid-column: 1 / -1;
	margin-bottom: 16px;
}

/*
 * Today's rule takes the accent, and is pulled out to the same width as the
 * field beneath it - otherwise the rule stops short of the tint on both sides.
 */
.mjec .mjec__cell.is-today::before {
	border-top-color: var(--mjec-brown);
	margin-left: calc(-1 * var(--mjec-bleed));
	margin-right: calc(-1 * var(--mjec-bleed));
}

.mjec .mjec__day {
	position: relative;
	z-index: 1;
	display: block;
	margin-top: 0;
	color: var(--mjec-text);
	font-size: 30px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.06em;
	font-variant-numeric: tabular-nums;
}

.mjec .mjec__cell.is-today .mjec__day {
	color: var(--mjec-brown);
}

/* Warm field behind today. No gutter padding in the list view, so the field is
   symmetrical - and the rule above it follows from the shared --mjec-bleed. */
.mjec .mjec__cell.is-today::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: 0;
	bottom: 0;
	left: calc(-1 * var(--mjec-bleed));
	right: calc(-1 * var(--mjec-bleed));
	background: var(--mjec-today-bg);
}

.mjec .mjec__cell.is-past .mjec__day,
.mjec .mjec__cell.is-past .mjec__chips {
	opacity: .45;
}

/* ---------------------------------------------------- grid: calendar view
 *
 * Only above 700px, and only while the visitor has not switched to the list.
 * Every declaration here undoes one from the list block above; the extra
 * `:not()` keeps each pair at the specificity it needs.
 */

@media (min-width: 701px) {
	.mjec:not(.mjec--list) {
		--mjec-bleed: min(11.2px, calc(var(--mjec-gutter) / 3));
	}

	.mjec:not(.mjec--list) .mjec__grid {
		display: table;
		width: 100%;
	}

	/* The frame runs the rule the full width of the grid and sets the weekday
	   header 20px below it. */
	.mjec:not(.mjec--list) .mjec__divider {
		margin-bottom: 20px;
		padding-bottom: 8px;
		border-bottom: 2px solid var(--mjec-brown);
	}

	/* An emptied month keeps its grid here, so it keeps its divider too. */
	.mjec:not(.mjec--list) .mjec__month:not(:has(td.mjec__cell.has-events:not(.is-empty-filtered))) .mjec__divider {
		display: block;
	}

	.mjec:not(.mjec--list) .mjec__grid tbody {
		display: table-row-group;
		width: auto;
	}

	.mjec:not(.mjec--list) .mjec__grid tr {
		display: table-row;
		width: auto;
	}

	.mjec:not(.mjec--list) .mjec__grid thead {
		display: table-header-group;
	}

	/*
	 * There are no cell boxes in this design. The gutter is right padding on
	 * every cell but the last, and each cell opens with its own rule - so the
	 * rule stops at the gutter instead of running through it.
	 */
	.mjec:not(.mjec--list) .mjec__grid th,
	.mjec:not(.mjec--list) .mjec__grid td {
		padding: 0 var(--mjec-gutter) 0 0;
	}

	.mjec:not(.mjec--list) .mjec__grid thead th {
		color: var(--mjec-text);
		font-weight: 500;
		font-size: 12px;
		line-height: 1.3;
		text-transform: uppercase;
		letter-spacing: .09em;
		padding-bottom: 18px;
	}

	/* The current day's column is called out, matching its highlighted cell. */
	.mjec:not(.mjec--list) .mjec__grid thead th.is-today-col {
		color: var(--mjec-brown);
	}

	/*
	 * `height` is a floor on a table cell, and the floor is a day carrying one
	 * chip - so a week where nothing happens is exactly as tall as a week where
	 * something does, and the grid never jogs from month to month.
	 */
	.mjec:not(.mjec--list) .mjec__grid td.mjec__cell,
	.mjec:not(.mjec--list) .mjec__grid td.mjec__cell--outside,
	.mjec:not(.mjec--list) .mjec__grid td.mjec__cell.has-events,
	.mjec:not(.mjec--list) .mjec__grid td.mjec__cell.has-events.is-empty-filtered {
		display: table-cell;
		width: auto;
		height: calc(
			2px + var(--mjec-cell-head) + var(--mjec-day-size) + 20px
			+ var(--mjec-chip-h) + var(--mjec-cell-foot) + var(--mjec-row-gap)
		);
		padding: 0 var(--mjec-gutter) calc(var(--mjec-cell-foot) + var(--mjec-row-gap)) 0;
		margin-bottom: 0;
	}

	.mjec:not(.mjec--list) .mjec__grid th:last-child,
	.mjec:not(.mjec--list) .mjec__grid td:last-child,
	.mjec:not(.mjec--list) .mjec__grid td.mjec__cell.has-events:last-child {
		padding-right: 0;
	}

	.mjec:not(.mjec--list) .mjec__cell.has-events::before {
		margin-bottom: 0;
	}

	.mjec:not(.mjec--list) .mjec__day {
		margin-top: var(--mjec-cell-head);
		font-size: var(--mjec-day-size);
	}

	.mjec:not(.mjec--list) .mjec__chips {
		margin-top: 20px;
	}

	/* Today's field bleeds slightly past its column, and stops at the foot so
	   the row gap below it stays clear. */
	.mjec:not(.mjec--list) .mjec__cell.is-today::after {
		bottom: var(--mjec-row-gap);
		left: calc(-1 * var(--mjec-bleed));
		right: calc(var(--mjec-gutter) - var(--mjec-bleed));
	}

	.mjec:not(.mjec--list) .mjec__grid td:last-child.is-today::after {
		right: calc(-1 * var(--mjec-bleed));
	}
}

/* Between 700 and 1100 the calendar grid is still on but has to give up some
   of the design's air. */
@media (min-width: 701px) and (max-width: 1100px) {
	.mjec:not(.mjec--list) {
		--mjec-cell-head: 12px;
		--mjec-cell-foot: 16px;
	}

	.mjec:not(.mjec--list) .mjec__grid td.mjec__cell,
	.mjec:not(.mjec--list) .mjec__grid td.mjec__cell--outside,
	.mjec:not(.mjec--list) .mjec__grid td.mjec__cell.has-events,
	.mjec:not(.mjec--list) .mjec__grid td.mjec__cell.has-events.is-empty-filtered {
		height: 72px;
	}

	.mjec:not(.mjec--list) .mjec__chips {
		margin-top: 14px;
	}
}

/* ---------------------------------------------------------------- chips */

.mjec .mjec__chips {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 0;
}

/*
 * Chips are static and clipped by their cell. A multi-day module renders as
 * one chip per day; nothing is ever allowed to visually span two cells.
 */
.mjec .mjec__chip {
	position: static;
	display: flex;
	flex-direction: column;
	gap: 2.56px;
	overflow: hidden;
	text-decoration: none;
	color: var(--mjec-text);
	background: var(--mjec-white);
	border: 1px solid var(--mjec-brown);
	border-left-width: 3px;
	border-radius: 0;
	padding: 9.92px 10.4px;
	box-shadow: 0 1px 0 rgba(65, 64, 66, .03);
	transition: background-color .15s ease;
}

.mjec a.mjec__chip:hover,
.mjec a.mjec__chip:focus-visible {
	background: color-mix(in srgb, var(--mjec-brown) 10%, var(--mjec-white));
}

.mjec .mjec__chip-name {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mjec-text);
}

.mjec .mjec__chip-time {
	display: block;
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--mjec-muted);
	font-variant-numeric: tabular-nums;
}

.mjec .mjec__chip-module {
	display: block;
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.35;
	font-style: italic;
	color: var(--mjec-faint);
}

.mjec .mjec__chip[hidden] {
	display: none;
}

@media (max-width: 1100px) {
	.mjec .mjec__chip {
		padding: 8px;
	}

	.mjec .mjec__chip-name {
		font-size: 12px;
	}

	.mjec .mjec__chip-time,
	.mjec .mjec__chip-module {
		font-size: 11px;
	}
}

.mjec.mjec--list .mjec__grid {
	max-width: 710px;
}

.mjec.mjec--list .mjec__chip-name {
	font-size: 18px;
	margin-bottom: .2em;
}

@media (max-width: 700px) {
	.mjec.mjec--list .mjec__chip-name {
		font-size: 16px;
	}
}

/* ------------------------------------------------------------ months list */

.mjec .mjec__month {
	display: block;
}

.mjec .mjec__month + .mjec__month {
	margin-top: clamp(32px, 5vw, 64px);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 700px) {
	/* Wordmark row + the filter wrapped under it, measured (see the token). */
	.mjec {
		--mjec-bar-h: 138px;
	}

	.mjec .mjec__lede {
		margin: 0 0 20px;
	}

	.mjec .mjec__bar {
		gap: 12px;
		padding: 12px 0 14px;
	}

	/* Nothing sits opposite the wordmark once the switch is gone, so the dot
	   follows it rather than being pushed to the far edge. */
	.mjec .mjec__bar-main {
		flex: 1 1 100%;
		justify-content: flex-start;
		min-height: 0;
	}

	/* The list is the only readable layout this narrow, so there is nothing to
	   switch to. */
	.mjec .mjec__views {
		display: none;
	}

	.mjec .mjec__filter {
		flex: 1 1 100%;
		width: 100%;
	}
}

/* ---------------------------------------------------- theme neutralisers
 *
 * Hello Elementor + the Elementor kit style bare <a>, <button> and <select>
 * elements (link underlines, button fills, an 18px font-size on links). These
 * win over single-class rules, so the calendar restates what it needs at .mjec
 * specificity rather than reaching for !important.
 */

.mjec a.mjec__chip,
.mjec a.mjec__chip:hover,
.mjec a.mjec__chip:focus,
.mjec a.mjec__chip:visited {
	text-decoration: none;
	/* Restated rather than `none`: the theme's link shadow has to go, but the
	   chip's own hairline is part of the design. */
	box-shadow: 0 1px 0 rgba(65, 64, 66, .03);
	color: var(--mjec-text);
}

.mjec .mjec__chip span {
	text-decoration: none;
}

.mjec button.mjec__view,
.mjec button.mjec__view:hover,
.mjec button.mjec__view:focus {
	background: none;
	box-shadow: none;
	min-height: 0;
}

.mjec select.mjec__select,
.mjec select.mjec__select:focus {
	text-transform: none;
	box-shadow: none;
	font-weight: 400;
	min-height: 0;
}

/* Long product names: break at word boundaries, hyphenate only as a last
 * resort. Chip text is narrower locally than on production, where Geogrotesque
 * loads; mid-word breaks look like a bug rather than a wrap. */
.mjec .mjec__chip-name,
.mjec .mjec__chip-module {
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
}