/*
 * Divi Events Integration - visual theme
 *
 * Colors/fonts are the client's brand values. Layout cues (sharp corners,
 * shadow over border, generous whitespace, sentence-case buttons) are
 * matched to hellbay.co.uk itself, not the Tresco reference - Tresco was
 * only ever the functional/feel example, per the client.
 * Body/heading fonts assume "Johnston ITC Std Light" and "Baskerville
 * Regular" are already loaded site-wide by the theme; fallbacks kick in
 * if a page ever renders without them.
 */
:root {
	--dei-bg: #F7F4EC;
	--dei-card-bg: #ffffff;
	--dei-text: #47515B;
	--dei-text-muted: #6f7883;
	--dei-accent: #67A9C0;
	--dei-border: #e5e0d2;
	--dei-radius: 2px;
	--dei-shadow: 0 4px 18px rgba(71, 81, 91, 0.12);
	--dei-font-heading: "Baskerville Regular", Baskerville, Georgia, "Times New Roman", serif;
	--dei-font-body: "Johnston ITC Std Light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* The Events Calendar's own theming hooks, kept in sync with the above */
	--tec-color-accent-primary: var(--dei-accent);
	--tec-color-button-primary: var(--dei-accent);
}

.tribe-common,
.tribe-events-single {
	background: var(--dei-bg);
	color: var(--dei-text);
	font-family: var(--dei-font-body);
}

/* Explicit inline (side) padding so content never touches the screen
   edge - don't rely only on TEC's own gutter variable, which can end
   up at 0 on some breakpoints/templates. */
.tribe-common-l-container,
#tribe-events-content.tribe-events-single {
	padding-inline: 1.5em;
	box-sizing: border-box;
}

.tribe-events-header,
.tribe-events-calendar-month__header,
.tribe-events-single-event-title,
.tribe-events-schedule h2 {
	font-family: var(--dei-font-heading);
	color: var(--dei-text);
}

/* Month grid */
.tribe-events-calendar-month__day {
	background: var(--dei-card-bg);
	border-color: var(--dei-border);
}

/* Today's date - clear teal highlight instead of TEC's default gray */
.tribe-events-calendar-month__day--current {
	background: rgba(103, 169, 192, 0.08);
	box-shadow: inset 0 0 0 1px var(--dei-accent);
}

.tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum {
	background: var(--dei-accent);
	color: #ffffff;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.8em;
	height: 1.8em;
	font-weight: bold;
}

.tribe-events-calendar-month__calendar-event-tooltip,
.tribe-events-calendar-month__calendar-event {
	background: var(--dei-card-bg);
	border-radius: var(--dei-radius);
	border: none;
	box-shadow: var(--dei-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tribe-events-calendar-month__calendar-event:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(71, 81, 91, 0.18);
}

.tribe-events-calendar-month__day {
	transition: background-color 0.2s ease;
}

.tribe-events-calendar-month__calendar-event-title-link,
.tribe-events-calendar-list__event-title-link {
	color: var(--dei-text);
	font-family: var(--dei-font-heading);
	transition: color 0.2s ease;
}

.tribe-events-calendar-month__calendar-event-title-link:hover,
.tribe-events-calendar-list__event-title-link:hover {
	color: var(--dei-accent);
}

/* List view cards */
.tribe-events-calendar-list__event-row {
	background: var(--dei-card-bg);
	border-radius: var(--dei-radius);
	border: none;
	border-left: 3px solid transparent;
	box-shadow: var(--dei-shadow);
	padding: 1.75em;
	margin-bottom: 1.5em;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	overflow: hidden;
}

.tribe-events-calendar-list__event-row:hover {
	border-left-color: var(--dei-accent);
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(71, 81, 91, 0.16);
}

/* Featured image - subtle zoom on hover, a common polished touch for
   card-based layouts. Best-guess class name - if it doesn't visually
   apply, send an Inspect on one of the list-view photos and I'll fix it. */
.tribe-events-calendar-list__event-featured-image-link {
	display: block;
	overflow: hidden;
	border-radius: var(--dei-radius);
}

.tribe-events-calendar-list__event-featured-image-link img {
	transition: transform 0.4s ease;
}

.tribe-events-calendar-list__event-featured-image-link:hover img {
	transform: scale(1.05);
}

/* Search bar + view switcher - generic selectors, safe regardless of
   TEC's internal class names, so these always apply. */
.tribe-common input[type="text"],
.tribe-common input[type="search"] {
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.tribe-common input[type="text"]:focus,
.tribe-common input[type="search"]:focus {
	border-color: var(--dei-accent);
	box-shadow: 0 0 0 3px rgba(103, 169, 192, 0.2);
	outline: none;
}

.tribe-common a {
	transition: color 0.2s ease;
}

.tribe-events-calendar-list__event-datetime,
.tribe-events-schedule__date {
	color: var(--dei-text-muted);
}

/* Single event page - generous whitespace to match the rest of hellbay.co.uk */
.tribe-events-single-event-title {
	font-size: 2.25em;
	margin-bottom: 0.6em;
}

.tribe-events-schedule {
	border-bottom: 1px solid var(--dei-border);
	padding-bottom: 1.5em;
	margin-bottom: 2em;
}

/* No max-width here. An earlier version capped this at 46em for line
   length, but the featured image above it runs the full width of the
   box, so the copy looked like it stopped two thirds of the way across.
   The client asked for it to fill the space. */
.tribe-events-single .tribe-events-single-event-description {
	line-height: 1.7;
}

.tribe-events-single .dei-repeats-note {
	display: inline-block;
	margin: 0.5em 0 1.5em;
	padding: 0.35em 0.9em;
	font-size: 0.85em;
	color: var(--dei-accent);
	background: rgba(47, 111, 106, 0.08);
	border-radius: 999px;
}

.tribe-events-single .dei-other-dates {
	margin: 0 0 2em;
	max-width: 46em;
}

.tribe-events-single .dei-other-dates__heading {
	font-family: var(--dei-font-heading);
	font-weight: bold;
	margin-bottom: 0.5em;
}

.tribe-events-single .dei-other-dates ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
}

.tribe-events-single .dei-other-dates li {
	display: inline-block;
	padding: 0.4em 0.9em;
	border: 1px solid var(--dei-border);
	border-radius: var(--dei-radius);
	color: var(--dei-text);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.tribe-events-single .dei-other-dates li:hover {
	border-color: var(--dei-accent);
	color: var(--dei-accent);
}

.tribe-events-single .dei-other-dates li.dei-date-past {
	color: var(--dei-text-muted);
	border-color: var(--dei-border);
	text-decoration: line-through;
	opacity: 0.6;
}

/* An ongoing series shouldn't show TEC's "this event has passed" notice
   just because its first/original date is behind us. */
.dei-is-series .tribe-events-notices {
	display: none;
}

/* Same reasoning for TEC's schedule line: on a series it prints only the
   parent event's own date, which is the first (usually past) one, and that
   contradicts the list of dates shown above it. Hidden here as well as in
   dei-frontend.js so it never flashes up before the script runs. The
   Date/Time rows in the details box are handled by the script, since dt/dd
   pairs can't be targeted by their label in CSS. */
.dei-is-series .tribe-events-schedule {
	display: none;
}

/* The details box is the other place that date turns up, as "Date:" and
   "Time:" rows. On this site the box holds nothing else, so the whole
   group goes. dei-frontend.js then drops the section wrapper around it,
   which would otherwise leave its divider floating on its own. */
.dei-is-series .tribe-events-meta-group-details {
	display: none;
}

/* "Add to Calendar" removed at the client's request (2026-08-13). On a
   repeating event it only ever exported the first date in the series, so
   it gave people an incomplete diary entry. This hides it on the single
   event page only - the calendar view's own subscribe link still works
   and exports everything. */
.tribe-events-single .tribe-events-c-subscribe-dropdown__container,
.tribe-events-single .tribe-events-c-subscribe-dropdown,
.tribe-events-single .tribe-events-cal-links {
	display: none;
}

/* Buttons / links TEC renders (find out more, view venue, etc) -
   solid fill, sentence case, minimal radius, matching hellbay.co.uk's
   "Book Now" style rather than TEC's default uppercase pill buttons. */
.tribe-common .tribe-common-c-btn,
.tribe-events-single a.tribe-events-gcal,
.tribe-events-single a.tribe-events-ical {
	background: var(--dei-accent);
	border-color: var(--dei-accent);
	border-radius: var(--dei-radius);
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.tribe-common .tribe-common-c-btn:hover,
.tribe-events-single a.tribe-events-gcal:hover,
.tribe-events-single a.tribe-events-ical:hover {
	background: #57919f;
	transform: translateY(-1px);
}

/* Gentle entrance animation - fades content up into place, respects
   users who've asked their OS/browser to reduce motion */
@media (prefers-reduced-motion: no-preference) {
	@keyframes dei-fade-up {
		from {
			opacity: 0;
			transform: translateY(10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.tribe-events-calendar-list__event-row,
	.tribe-events-single-event-title,
	.tribe-events-single .dei-repeats-note,
	.tribe-events-single .dei-other-dates {
		animation: dei-fade-up 0.5s ease both;
	}

	.tribe-events-calendar-list__event-row:nth-child(2) { animation-delay: 0.06s; }
	.tribe-events-calendar-list__event-row:nth-child(3) { animation-delay: 0.12s; }
	.tribe-events-calendar-list__event-row:nth-child(4) { animation-delay: 0.18s; }
	.tribe-events-calendar-list__event-row:nth-child(5) { animation-delay: 0.24s; }
	.tribe-events-calendar-list__event-row:nth-child(n+6) { animation-delay: 0.3s; }
}

/* Divi Code-module wrapper for the [divi_events_calendar] shortcode */
.dei-events-wrap {
	background: var(--dei-bg);
	padding: 1em 0;
}

/* Days that belong to the previous or next month still sit in the grid.
   Mute them so the month you're actually looking at reads as the focus.
   TEC already tags them, so this needs no markup changes. */
.tribe-events-calendar-month__day.dei-outside-month {
	background-color: rgba(71, 81, 91, 0.04);
}

.tribe-events-calendar-month__day.dei-outside-month .tribe-events-calendar-month__day-date,
.tribe-events-calendar-month__day.dei-outside-month .tribe-events-calendar-month__day-date-daynum,
.tribe-events-calendar-month__day.dei-outside-month .tribe-events-calendar-month__day-date-link {
	color: var(--dei-text-muted);
	opacity: 0.55;
}

.tribe-events-calendar-month__day.dei-outside-month .tribe-events-calendar-month__calendar-event {
	opacity: 0.5;
}

/* The event introduction (stored as the excerpt) sits above the body copy
   and reads as a standfirst. The same field feeds the teaser inside the
   calendar tooltip. The client asked for it to stand out a little more,
   hence the weight as well as the size. */
.tribe-events-single .dei-event-intro {
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1.55;
	color: var(--dei-text);
	margin: 0 0 1.5em;
}

.tribe-events-calendar-month__calendar-event-tooltip-description {
	color: var(--dei-text);
	line-height: 1.5;
}

/* Location, organisers, website and cost are not used on this site and
   have been taken out of the editor. These only ever render when the
   fields hold something, but hide them so an old event that still has a
   value can't reintroduce them. */
.tribe-events-single .tribe-events-meta-group-venue,
.tribe-events-single .tribe-events-meta-group-organizer,
.tribe-events-single .tribe-events-meta-group-other {
	display: none;
}

/* The greying above was set at 4% opacity, which was invisible in
   practice - the client reported the feature as missing. These rules
   replace it with a tint that actually reads against the white cells.
   Kept in the brand's warm grey rather than a neutral one so it sits
   with the cream page background. */
.tribe-events-calendar-month__day.dei-outside-month {
	background-color: #ebe7dc;
}

.tribe-events-calendar-month__day.dei-outside-month .tribe-events-calendar-month__day-date,
.tribe-events-calendar-month__day.dei-outside-month .tribe-events-calendar-month__day-date-daynum,
.tribe-events-calendar-month__day.dei-outside-month .tribe-events-calendar-month__day-date-link {
	color: var(--dei-text-muted);
	opacity: 0.75;
}

.tribe-events-calendar-month__day.dei-outside-month .tribe-events-calendar-month__calendar-event {
	opacity: 0.55;
}

/* Every day in the month being viewed stays white, including ones that
   have already passed, which TEC otherwise dims. The client asked for
   the current month to read as a single block of white. Today keeps its
   own highlight, hence the second exclusion. */
.tribe-events-calendar-month__day:not(.dei-outside-month):not(.tribe-events-calendar-month__day--current) {
	background-color: var(--dei-card-bg);
}

/* The previous/next links at the foot of a single event step through
   unrelated events in date order, so they read as navigation between
   things that have nothing to do with each other. Removed at the
   client's request. */
.tribe-events-single #tribe-events-footer,
.single-tribe_events #tribe-events-footer {
	display: none;
}

/* Only ever seen by a logged-in editor, when the shortcode cannot render
   the calendar. Deliberately plain and obvious rather than styled to
   blend in. */
.dei-events-notice {
	padding: 1em 1.25em;
	border: 1px solid var(--dei-border);
	border-left: 3px solid var(--dei-accent);
	background: var(--dei-card-bg);
	color: var(--dei-text);
}

.dei-events-notice p {
	margin: 0 0 0.5em;
}

.dei-events-notice p:last-child {
	margin-bottom: 0;
	font-size: 0.9em;
	color: var(--dei-text-muted);
}