/*
 * Events Calendar Styles — EM 7.2.x
 *
 * Targets the actual HTML EM 7 outputs:
 *   .em.em-view-container          outer wrapper (calendar + list)
 *   .em.em-calendar                calendar grid
 *   .em.em-list.em-events-list     list wrapper
 *   .em-event.em-item              list row
 *   .em-item-title a               event title link
 *   .em-item-read-more.button      "More Info" CTA
 *
 * Uses CSS variables from styles.css :root
 */

/* ============================================================
   1. VIEW TOGGLE BAR
   ============================================================ */

.rvwt-cal-toggle {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 28px;
	background: #fff;
	border: 1px solid var(--color-tan);
	border-radius: 8px;
	padding: 4px;
	width: fit-content;
}

.rvwt-cal-toggle__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 22px;
	border-radius: 6px;
	font-family: var(--font-heading);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-text);
	transition: background 0.18s, color 0.18s;
}

.rvwt-cal-toggle__btn:hover {
	background: var(--color-bg);
	color: var(--color-accent);
	text-decoration: none;
}

.rvwt-cal-toggle__btn.is-active {
	background: var(--color-accent);
	color: #fff;
}

.rvwt-cal-toggle__btn.is-active:hover {
	background: var(--color-deep-green);
	color: #fff;
}

/* ============================================================
   2. EM VIEW CONTAINER — force full width for both views
   ============================================================ */

#rvwt-view-calendar .em.em-view-container,
#rvwt-view-list .em.em-view-container {
	width: 100% !important;
	max-width: 100% !important;
}

#rvwt-view-calendar .em.em-view-container > div,
#rvwt-view-list .em.em-view-container > div {
	width: 100% !important;
	max-width: 100% !important;
}

/* ============================================================
   3. EVENTS MANAGER 7.x — CALENDAR GRID (.em.em-calendar)
   EM 7+ uses a div/CSS-grid calendar. Outer has .em + .em-calendar.
   ============================================================ */

.em.em-calendar {
	width: 100% !important;
	font-family: var(--font-body);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 16px rgba(4, 58, 33, 0.09);
}

/* ---- Navigation bar ---- */
.em.em-calendar .em-cal-nav {
	background: var(--color-deep-green);
	padding: 10px 20px;
}

.em.em-calendar .em-cal-nav .month {
	color: #fff;
	font-family: var(--font-heading);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.em.em-calendar .em-cal-nav .month input,
.em.em-calendar .em-cal-nav .month input:hover,
.em.em-calendar .em-cal-nav .month input:focus {
	color: #fff;
	border-bottom-color: var(--color-accent-soft);
}

/* Prev / Next arrows */
.em.em-calendar .em-cal-nav .month-nav .em-calnav svg path {
	stroke: var(--color-accent-soft);
	transition: stroke 0.15s;
}
.em.em-calendar .em-cal-nav .month-nav .em-calnav:hover svg path {
	stroke: #fff;
}

/* Today button — use !important to beat plugin's button-secondary + opacity:0.3 on .is-today */
.em.em-calendar .em-cal-nav .em-calnav-today,
.em.em-calendar .em-cal-nav .month-nav .em-calnav-today {
	background: transparent !important;
	border: 1px solid rgba(255,255,255,0.6) !important;
	color: #fff !important;
	font-family: var(--font-heading);
	font-size: 12px;
	letter-spacing: 0.06em;
	opacity: 1 !important;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.em.em-calendar .em-cal-nav .em-calnav-today:hover,
.em.em-calendar .em-cal-nav .em-calnav-today.is-today,
.em.em-calendar .em-cal-nav .month-nav .em-calnav-today.is-today {
	background: rgba(255,255,255,0.15) !important;
	border-color: #fff !important;
	color: #fff !important;
	opacity: 1 !important;
}

/* ---- Weekday header row ---- */
.em.em-calendar .em-cal-head {
	background: var(--color-accent);
}
.em.em-calendar .em-cal-head > div {
	color: #fff;
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ---- Day cells ---- */
.em.em-calendar .em-cal-body .em-cal-day {
	background: #fff;
	border-color: #ede7db;
}
.em.em-calendar .em-cal-body .em-cal-day.eventless-pre,
.em.em-calendar .em-cal-body .em-cal-day.eventless-post,
.em.em-calendar .em-cal-body .em-cal-day.eventful-pre,
.em.em-calendar .em-cal-body .em-cal-day.eventful-post {
	background: var(--color-bg);
}

/* Strip white-circle background the plugin adds to all date spans/anchors */
.em.em-calendar .em-cal-body .em-cal-day .em-cal-day-date span,
.em.em-calendar .em-cal-body .em-cal-day .em-cal-day-date a {
	background: transparent !important;
	border-radius: 0 !important;
}
/* Strip plugin's gray square border from all eventful date anchors */
.em.em-calendar .em-cal-body .em-cal-day.eventful .em-cal-day-date a,
.em.em-calendar .em-cal-body .em-cal-day.eventful-pre .em-cal-day-date a,
.em.em-calendar .em-cal-body .em-cal-day.eventful-post .em-cal-day-date a,
.em.em-calendar .em-cal-body .em-cal-day.eventful-today .em-cal-day-date a {
	border: none !important;
}
.em.em-calendar .em-cal-body .em-cal-day .em-cal-day-date span {
	color: #b8b0a6;
}
/* Day number — today */
.em.em-calendar .em-cal-body .em-cal-day.eventless-today .em-cal-day-date a,
.em.em-calendar .em-cal-body .em-cal-day.eventless-today .em-cal-day-date span {
	color: var(--color-accent);
	font-weight: 700;
}
/* Day number — has events: use !important to beat plugin's doubled-class specificity */
.em.em-calendar .em-cal-body .em-cal-day.eventful .em-cal-day-date a,
.em.em-calendar .em-cal-body .em-cal-day.eventful-today .em-cal-day-date a {
	color: var(--color-text-strong) !important;
	font-weight: 700;
}
/* Hover: filled green circle on event date number */
.em.em-calendar .em-cal-body .em-cal-day.eventful .em-cal-day-date a:hover,
.em.em-calendar .em-cal-body .em-cal-day.eventful-today .em-cal-day-date a:hover {
	color: #fff !important;
	background: var(--color-accent) !important;
	border-radius: 50% !important;
	border: none !important;
}
/* Eventful date ring: circle with accent-green border, centered number */
.em.em-calendar .em-cal-body .em-cal-day.eventful .em-cal-day-date.colored div.ring,
.em.em-calendar .em-cal-body .em-cal-day.eventful-today .em-cal-day-date.colored div.ring {
	border-radius: 50% !important;
	border: 1.5px solid var(--color-accent) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Event pills inside day cells */
.em.em-calendar .em-cal-body .em-cal-event {
	background-color: var(--color-accent) !important;
	color: #fff;
	border-radius: 20px;
	font-size: 11px;
}
.em.em-calendar .em-cal-body .em-cal-event a,
.em.em-calendar .em-cal-body .em-cal-event div {
	color: #fff;
	text-decoration: none;
}
.em.em-calendar .em-cal-body .em-cal-event:hover {
	background-color: var(--color-deep-green) !important;
}

/* ============================================================
   4. EVENTS MANAGER 7.x — LIST VIEW (.em.em-list)
   Actual classes: .em-event.em-item, .em-item-title, .em-item-info,
   .em-item-meta, .em-item-desc, .em-item-actions, .em-item-read-more
   ============================================================ */

/* List wrapper */
.em.em-list.em-events-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Each event row */
.em.em-list .em-event.em-item {
	display: flex;
	flex-direction: row;
	background: #fff;
	border: 1px solid var(--color-tan);
	border-left: 4px solid var(--default-border, var(--color-accent));
	border-radius: 10px;
	overflow: hidden;
	transition: box-shadow 0.18s, transform 0.18s;
}
.em.em-list .em-event.em-item:hover {
	box-shadow: 0 4px 22px rgba(4, 58, 33, 0.11);
	transform: translateY(-2px);
}

/* Event image — must match EM's specificity (.em.em-list .em-item .em-item-image) to win */
.em.em-list .em-item .em-item-image {
	flex: 0 0 220px;
	width: 220px;
	min-width: 220px;
	max-width: 220px;
	height: auto;
}
.em.em-list .em-item .em-item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	padding: 0 !important; /* override EM's padding-right: 10px */
}

/* Event info panel */
.em.em-list .em-item .em-item-info {
	flex: 1;
	min-width: 0;
	padding: 22px 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Event title — fix blue color */
.em.em-list .em-item .em-item-title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 19px;
	font-weight: 700;
}
.em.em-list .em-item .em-item-title a {
	color: var(--color-text-strong) !important;
	text-decoration: none;
	transition: color 0.15s;
}
.em.em-list .em-item .em-item-title a:hover {
	color: var(--color-accent) !important;
}

/* Date bar */
.em.em-list .em-item .em-event-date-header {
	background: var(--color-deep-green);
	color: #fff;
	font-family: var(--font-heading);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 8px 14px;
	border-radius: 4px;
}

/* Meta lines (date, time, location) */
.em.em-list .em-item .em-item-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}
.em.em-list .em-item .em-item-meta-line {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-text);
}
.em.em-list .em-item .em-item-meta-line .em-icon {
	color: var(--color-accent);
	font-size: 15px;
}
.em.em-list .em-item .em-event-location a {
	color: var(--color-accent) !important;
	font-weight: 600;
	text-decoration: none;
}
.em.em-list .em-item .em-event-location a:hover {
	color: var(--color-deep-green) !important;
}

/* Description excerpt */
.em.em-list .em-item .em-item-desc {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.65;
	color: var(--color-text);
}

/* "More Info" button — matches Articles page "Read More" style */
.em.em-list .em-item .em-item-actions {
	margin-top: auto;
	padding-top: 4px;
}
.em.em-list .em-item .em-item-read-more.button {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 11px 18px !important;
	background: var(--color-accent) !important;
	border: 0 !important;
	border-radius: 8px !important;
	color: #fff !important;
	font-family: var(--font-heading);
	font-size: 12px !important;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s, transform 0.15s;
	box-shadow: none !important;
}
.em.em-list .em-item .em-item-read-more.button:hover {
	background: var(--color-text-strong) !important;
	color: #fff !important;
	text-decoration: none;
	transform: translateY(-1px);
	gap: 10px;
	box-shadow: none !important;
}

/* ============================================================
   5. SINGLE EVENT — ATTRIBUTION CARD (.rvwt-event-host)
   ============================================================ */

.rvwt-event-host {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid #e5dfd2;
}
.rvwt-event-host__label {
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text);
	margin-bottom: 14px;
}
.rvwt-event-host__card {
	display: flex;
	align-items: center;
	gap: 18px;
	background: var(--color-bg);
	border: 1px solid var(--color-tan);
	border-radius: 10px;
	padding: 18px 20px;
	text-decoration: none;
	transition: box-shadow 0.18s, border-color 0.18s;
}
.rvwt-event-host__card:hover {
	box-shadow: 0 3px 14px rgba(4, 58, 33, 0.1);
	border-color: var(--color-accent-soft);
	text-decoration: none;
}
.rvwt-event-host__thumb {
	width: 64px;
	height: 64px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
}
.rvwt-event-host__thumb--placeholder {
	width: 64px;
	height: 64px;
	border-radius: 8px;
	background: var(--color-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #fff;
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 900;
}
.rvwt-event-host__info { flex: 1; min-width: 0; }
.rvwt-event-host__name {
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 700;
	color: var(--color-text-strong);
	margin-bottom: 3px;
}
.rvwt-event-host__meta {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--color-text);
	margin-bottom: 5px;
}
.rvwt-event-host__cta {
	font-family: var(--font-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
}
.rvwt-event-host__card--anon {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--color-bg);
	border: 1px solid var(--color-tan);
	border-radius: 10px;
	padding: 14px 18px;
}

/* Source badge */
.rvwt-cal-source-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 20px;
	margin-top: 6px;
}
.rvwt-cal-source-badge--google      { background: #e8f0fe; color: #1a73e8; }
.rvwt-cal-source-badge--outlook     { background: #e3f2fd; color: #0078d4; }
.rvwt-cal-source-badge--ical        { background: #f3e5f5; color: #7b1fa2; }
.rvwt-cal-source-badge--eventbrite  { background: #fff3e0; color: #e05c00; }
.rvwt-cal-source-badge--manual      { background: #f0f5ec; color: var(--color-accent); }

/* ============================================================
   6. LISTING PAGE — UPCOMING EVENTS STRIP (Phase 4+)
   ============================================================ */

.rvwt-listing-events {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid #e5dfd2;
}
.rvwt-listing-events__heading {
	font-family: var(--font-heading);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text);
	margin-bottom: 14px;
}
.rvwt-listing-events__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.rvwt-listing-events__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	background: var(--color-bg);
	border: 1px solid var(--color-tan);
	border-radius: 8px;
	text-decoration: none;
	transition: border-color 0.15s, background 0.15s;
}
.rvwt-listing-events__item:hover {
	border-color: var(--color-accent-soft);
	background: #fff;
	text-decoration: none;
}
.rvwt-listing-events__date {
	background: var(--color-deep-green);
	color: #fff;
	border-radius: 6px;
	padding: 6px 10px;
	text-align: center;
	flex-shrink: 0;
	min-width: 46px;
}
.rvwt-listing-events__date-day {
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 900;
	line-height: 1;
	display: block;
}
.rvwt-listing-events__date-month {
	font-family: var(--font-heading);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-soft);
	display: block;
	margin-top: 2px;
}
.rvwt-listing-events__title {
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 700;
	color: var(--color-text-strong);
}
.rvwt-listing-events__more {
	display: block;
	margin-top: 12px;
	font-family: var(--font-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
	text-decoration: none;
}
.rvwt-listing-events__more:hover { color: var(--color-deep-green); }

/* ============================================================
   7. SINGLE EVENT PAGE — layout + EM content styling
   ============================================================ */

/* Centered single-column wrapper (no sidebar) */
.rvwt-event-single-page {
	padding-top: calc(var(--header-height) + 32px);
	padding-bottom: 80px;
}
.rvwt-event-single-inner {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* Reset EM's own container width overrides */
.rvwt-single__content .em.em-view-container,
.rvwt-single__content .em.em-view-container > div {
	width: 100% !important;
	max-width: 100% !important;
}

/* Info panel — cream card with accent left border */
.rvwt-event-single-inner .em-item-header,
.rvwt-single__content .em-item-header {
	background: var(--color-bg);
	border: 1px solid var(--color-tan);
	border-left: 4px solid var(--color-accent);
	border-radius: 10px;
	padding: 28px 32px;
	margin-bottom: 32px;
}

/* Two-column meta layout */
.rvwt-single__content .em-item-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 48px;
}
.rvwt-single__content .em-item-meta-column {
	flex: 1 1 200px;
}
.rvwt-single__content .em-item-meta-column:empty {
	display: none;
}

/* Section labels: "When", "Where" etc */
.rvwt-single__content .em-event-when h3,
.rvwt-single__content .em-event-where h3,
.rvwt-single__content .em-item-meta-column > h3 {
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--color-text);
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--color-accent);
	display: inline-block;
}

/* Date / time / location lines */
.rvwt-single__content .em-item-meta-line {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 500;
	color: var(--color-text-strong);
	margin-bottom: 10px;
}
.rvwt-single__content .em-item-meta-line .em-icon {
	color: var(--color-accent);
	font-size: 17px;
	flex-shrink: 0;
}

/* Add To Calendar button — outline style
   Must beat plugin's .em button.input.em-tooltip-ddm specificity (0,3,1) + !important.
   Our selectors score (0,4,1) so we win even when both use !important. */
.rvwt-event-single-inner .em button.em-event-add-to-calendar.em-tooltip-ddm,
.rvwt-single__content .em button.em-event-add-to-calendar.em-tooltip-ddm {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin-top: 16px;
	padding: 10px 20px !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 1.5px solid var(--color-accent) !important;
	border-radius: 8px !important;
	color: var(--color-accent) !important;
	font-family: var(--font-heading) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	transition: background 0.15s, color 0.15s, border-color 0.15s !important;
	box-shadow: none !important;
	line-height: 1.2 !important;
	height: auto !important;
	min-height: 0 !important;
	width: auto !important;
}
.rvwt-event-single-inner .em button.em-event-add-to-calendar.em-tooltip-ddm:hover,
.rvwt-single__content .em button.em-event-add-to-calendar.em-tooltip-ddm:hover {
	background-color: var(--color-accent) !important;
	background-image: none !important;
	border-color: var(--color-accent) !important;
	color: #fff !important;
}

/* Add To Calendar dropdown */
.rvwt-event-single-inner .em-event-add-to-calendar.em-tooltip-ddm,
.rvwt-single__content .em-event-add-to-calendar.em-tooltip-ddm {
	position: relative;
}
.rvwt-event-single-inner .em-event-add-to-calendar-content,
.rvwt-single__content .em-event-add-to-calendar-content {
	position: absolute !important;
	top: calc(100% + 6px) !important;
	left: 0 !important;
	z-index: 9999 !important;
	background: #fff !important;
	border: 1px solid var(--color-tan) !important;
	border-radius: 8px !important;
	padding: 6px 0 !important;
	box-shadow: 0 4px 20px rgba(4, 58, 33, 0.14) !important;
	min-width: 200px !important;
}
.rvwt-event-single-inner .em-event-add-to-calendar-content a,
.rvwt-single__content .em-event-add-to-calendar-content a {
	display: block !important;
	padding: 10px 20px !important;
	font-family: var(--font-body) !important;
	font-size: 14px !important;
	color: var(--color-text) !important;
	text-decoration: none !important;
	background: transparent !important;
	transition: background 0.12s, color 0.12s;
}
.rvwt-event-single-inner .em-event-add-to-calendar-content a:hover,
.rvwt-single__content .em-event-add-to-calendar-content a:hover {
	background: var(--color-bg) !important;
	color: var(--color-accent) !important;
}

/* Description section */
.rvwt-single__content .em-event-content {
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.75;
	color: var(--color-text);
	border-top: 1px solid #e5dfd2;
	padding-top: 28px;
}
.rvwt-single__content .em-event-content p {
	margin: 0 0 1.2em;
}
.rvwt-single__content .em-event-content p:last-child {
	margin-bottom: 0;
}

/* ============================================================
   8. RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
	.em.em-list .em-event.em-item {
		flex-direction: column;
	}
	.em.em-list .em-item .em-item-image {
		width: 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 auto;
		height: 200px;
	}
	.em.em-list .em-item .em-item-info {
		padding: 18px 20px;
	}
}

@media (max-width: 600px) {
	.rvwt-cal-toggle {
		width: 100%;
		justify-content: center;
	}
	.rvwt-cal-toggle__btn {
		flex: 1;
		justify-content: center;
		padding: 9px 12px;
	}
	.rvwt-event-host__card {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.rvwt-event-single-inner {
		padding-left: 16px;
		padding-right: 16px;
	}
}