/* =============================================================================
   PTAC Events — Eventbrite Plugin (Fullworks) Custom Styles
   Aligned with .ptac-tl-card design system (Technical Library cards).
   Targeted at .wfea / .eaw-* classes only.
   Primary: var(--ast-global-color-0, #1b5e61)
   ============================================================================= */

/* Widget wrapper: top-edge gradient bleed for visual interest at low card counts */
.wfea-preview.wfea-elementor-widget {
	background: linear-gradient(180deg, rgba(27, 94, 97, 0.07) 0%, transparent 55%);
	padding: 2rem;
}

/* Custom property alias — stays in sync with the TL card system */
.wfea-preview {
	--wfea-teal:    var(--ast-global-color-0, #1b5e61);
	--wfea-dark:    #0f2d2f;
	--wfea-body:    #3d4a4c;
	--wfea-muted:   rgba(27, 94, 97, 0.85);
	--wfea-border:  rgba(27, 94, 97, 0.12);
	--wfea-surface: rgba(27, 94, 97, 0.05);
}


/* =============================================================================
   PLUGIN CSS RESET
   The plugin stylesheet is not fully disabled and injects a large block of
   .wfea-card-scoped rules, many using !important. Each rule below targets the
   exact plugin selector and counters the specific conflicting declaration.
   Keep this block before our own styles so the cascade is predictable.
   ============================================================================= */

/* 1. Grid: plugin sets display:flex !important on .wfea-card (which our section has) */
section.wfea.wfea-blocks {
	display:          grid !important;
	flex-wrap:        initial !important;
	justify-content:  initial !important;
	margin:           0 !important;
}

/* 2. Card items: plugin caps width at 20rem and adds h-padding */
article.wfea-card-list-item {
	max-width:     none !important;
	padding-left:  0 !important;
	padding-right: 0 !important;
	width:         auto !important;
	margin-bottom: 0 !important;
}

/* 3. Card wrapper: plugin adds border-radius:3px */
.wfea-card .wfea-card-item {
	border-radius: 0 !important;
}

/* 4. Thumbnail: plugin uses the padding-top % hack with position:absolute on the img.
      Override the ratio to 50% = exactly 2:1. Also clear the 3px accent bar. */
.wfea-card .wfea-card-item .eaw-thumb-wrap {
	padding-top: 50% !important;   /* 2:1 via padding hack (plugin: 42.10526%) */
	margin-top:  3px !important;   /* clear the accent bar */
	background:  #e8efef !important;
}

/* 5. Content wrap: plugin adds a border, white bg, and tiny padding */
.wfea-card .wfea-card-item .eaw-content-wrap {
	background:     transparent !important;
	padding:        1.2rem 1.25rem 0 !important;
	border:         none !important;
	flex-direction: column !important;
}

/* 6. Date block: plugin makes it a large centered column */
.wfea-card .wfea-card-item .eaw-content-wrap .eaw-calendar-date {
	flex:        initial !important;
	text-align:  left !important;
	font-size:   0.8125rem !important;
	line-height: 1.45 !important;
}

/* 7. Month label: plugin sets orange (#d6472b) + uppercase */
.wfea-card .wfea-card-item .eaw-content-wrap .eaw-calendar-date .eaw-calendar-date-month {
	color:          rgba(27, 94, 97, 0.85) !important;
	text-transform: none !important;
	font-size:      0.8125rem !important;
}

/* 8. Day number: plugin sets 1.25rem */
.wfea-card .wfea-card-item .eaw-content-wrap .eaw-calendar-date .eaw-calendar-date-day {
	font-size: 0.8125rem !important;
}

/* 9. Content block: plugin adds h-padding and forces color:#000 */
.wfea-card .wfea-card-item .eaw-content-wrap .eaw-content-block {
	padding-left:  0 !important;
	padding-right: 0 !important;
	color:         #0f2d2f !important;
}

/* 10. h3 title: plugin sets 0.875rem font-size and color:#000 */
.wfea-card .wfea-card-item .eaw-content-wrap .eaw-content-block h3 {
	font-size:   1.0625rem !important;
	color:       #0f2d2f !important;
	margin-bottom: 0 !important;
}

.wfea-card .wfea-card-item .eaw-content-wrap .eaw-content-block h3 a {
	color: inherit !important;
}

/* 11. Buttons row: plugin uses flex-wrap + space-between */
.wfea-card .wfea-card-item .eaw-content-wrap .eaw-content-block .eaw-buttons {
	flex-direction:  column !important;
	flex-wrap:       nowrap !important;
	justify-content: stretch !important;
	padding-top:     0 !important;
}

/* 12. Details button: plugin strips it to a plain text link with !important on
       color, text-decoration, background, border, and padding */
.wfea-card .wfea-card-item .eaw-content-wrap .eaw-content-block .eaw-buttons .eaw-button-details {
	color:            var(--ast-global-color-0, #1b5e61) !important;
	text-decoration:  none !important;
	background:       #fff !important;
	border:           1px solid rgba(27, 94, 97, 0.45) !important;
	padding:          0.5rem 0.85rem !important;
	border-radius:    0 !important;
	width:            100% !important;
	min-height:       2.5rem !important;
	box-sizing:       border-box !important;
	display:          inline-flex !important;
	align-items:      center !important;
	justify-content:  center !important;
}

.wfea-card .wfea-card-item .eaw-content-wrap .eaw-content-block .eaw-buttons .eaw-button-details:hover,
.wfea-card .wfea-card-item .eaw-content-wrap .eaw-content-block .eaw-buttons .eaw-button-details:focus {
	background:    #000 !important;
	color:         #fff !important;
	border-color:  #000 !important;
	outline:       none !important;
}

/* 13. Register button: plugin sets its own green, border-radius:3px, width:auto,
       box-sizing:content-box, and min-height:auto */
.wfea-card .wfea-card-item .eaw-content-wrap .eaw-content-block .eaw-buttons .eaw-booknow a {
	background:      var(--ast-global-color-0, #1b5e61) !important;
	border-radius:   0 !important;
	padding:         0.5rem 0.85rem !important;
	min-height:      2.5rem !important;
	box-sizing:      border-box !important;
	width:           100% !important;
	display:         inline-flex !important;
	align-items:     center !important;
	justify-content: center !important;
	color:           #fff !important;
	text-decoration: none !important;
	border:          1px solid var(--ast-global-color-0, #1b5e61) !important;
}

.wfea-card .wfea-card-item .eaw-content-wrap .eaw-content-block .eaw-buttons .eaw-booknow a:hover {
	background:   #000 !important;
	border-color: #000 !important;
}


/* =============================================================================
   OUR STYLES
   Build on top of the reset above.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. GRID CONTAINER
   Mirrors .ptac-tl-grid__cards: 3-col fixed above 900px, auto-fill below.
   ----------------------------------------------------------------------------- */

section.wfea.wfea-blocks {
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 1.5rem;
	padding: 0.5rem 0 2rem;
	list-style: none;
	align-items: stretch;
}

@media (min-width: 900px) {
	section.wfea.wfea-blocks {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 600px) {
	section.wfea.wfea-blocks {
		grid-template-columns: 1fr;
	}
}


/* -----------------------------------------------------------------------------
   2. CARD SHELL
   Matches .ptac-tl-card__inner:
   — square corners, gradient bg, 3-px top accent bar, subtle shadow + hover lift.
   ----------------------------------------------------------------------------- */

article.wfea-card-list-item {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.wfea-card-item {
	position: relative;
	border: 1px solid var(--wfea-border);
	background: linear-gradient(180deg, #fff 0%, #fafcfc 55%, #f6fafa 100%);
	box-shadow:
		0 1px 2px rgba(15, 40, 42, 0.05),
		0 4px 12px rgba(27, 94, 97, 0.04);
	display: flex;
	flex-direction: column;
	height: 100%;
	transition:
		border-color 0.22s ease,
		box-shadow    0.22s ease,
		transform     0.22s ease;
}

/* 3-px gradient accent bar — matches .ptac-tl-card__inner::before */
.wfea-card-item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(
		90deg,
		var(--wfea-teal) 0%,
		rgba(27, 94, 97, 0.35) 72%,
		rgba(27, 94, 97, 0.08) 100%
	);
	z-index: 1;
	pointer-events: none;
}

article.wfea-card-list-item:hover .wfea-card-item,
article.wfea-card-list-item:focus-within .wfea-card-item {
	border-color: rgba(27, 94, 97, 0.28);
	box-shadow:
		0 2px 6px rgba(15, 40, 42, 0.06),
		0 12px 28px rgba(27, 94, 97, 0.1);
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.wfea-card-item,
	article.wfea-card-list-item:hover .wfea-card-item {
		transition: none;
		transform: none;
	}
}


/* -----------------------------------------------------------------------------
   3. THUMBNAIL
   The plugin forces position:relative on the wrap and position:absolute on the
   img (its legacy padding-top aspect-ratio hack). We override the ratio to 50%
   (2:1) in the reset block above; here we just control the hover zoom.
   ----------------------------------------------------------------------------- */

article.wfea-card-list-item:hover img.eaw-thumb {
	transform: scale(1.03);
	transition: transform 0.35s ease;
}


/* -----------------------------------------------------------------------------
   4. CONTENT WRAPPER
   ----------------------------------------------------------------------------- */

.eaw-content-wrap {
	flex: 1;
	gap: 0;
}


/* -----------------------------------------------------------------------------
   5. DATE META BLOCK
   Styled as .ptac-tl-card__meta — teal-tinted box, small-caps "Date" label.
   ----------------------------------------------------------------------------- */

.eaw-calendar-date {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: 0.5rem;
	background: var(--wfea-surface);
	border: 1px solid rgba(27, 94, 97, 0.09);
	padding: 0.6rem 0.75rem;
	margin-bottom: 0.85rem;
	font-family: 'Montserrat', sans-serif;
	border-radius: 0;
}

/* "Date" label — matches .ptac-tl-card__row dt style */
.eaw-calendar-date::before {
	content: "Date";
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wfea-muted);
	flex-shrink: 0;
	white-space: nowrap;
}

/* Month + day — plain body weight, inline */
.eaw-calendar-date-month,
.eaw-calendar-date-day {
	display: inline;
	font-weight: 500;
	color: #2c3a3b;
	letter-spacing: 0;
}


/* -----------------------------------------------------------------------------
   6. TITLE + TIME
   Matches .ptac-tl-card__title and description typography.
   ----------------------------------------------------------------------------- */

.eaw-content-block {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid rgba(27, 94, 97, 0.08);
}

h3.eaw-title {
	font-family:    'Montserrat', sans-serif !important;
	font-weight:    700 !important;
	line-height:    1.32 !important;
	letter-spacing: -0.01em !important;
	margin:         0 0 0.2rem !important;
	padding:        0 !important;
}

h3.eaw-title a:hover {
	color: var(--wfea-teal) !important;
	text-decoration: none;
}

time.eaw-time {
	font-family: 'Montserrat', sans-serif;
	font-size:   0.8125rem;
	font-weight: 500;
	color:       var(--wfea-body);
	display:     block;
	line-height: 1.45;
}


/* -----------------------------------------------------------------------------
   7. BUTTON AREA
   Matches .ptac-tl-card__actions: stacked full-width square buttons, flush
   at card bottom with a top border separator.
   ----------------------------------------------------------------------------- */

.eaw-buttons {
	align-items:  stretch;
	gap:          0.45rem;
	width:        calc(100% + 2.5rem);
	margin-left:  -1.25rem;
	margin-right: -1.25rem;
	margin-top:   auto;
	padding:      1rem 1.25rem 1.25rem;
	box-sizing:   border-box;
}

/* Details button base styles (resets in the plugin block handle !important) */
button.eaw-button-details {
	-webkit-appearance: none;
	appearance:  none;
	font-family: 'Montserrat', sans-serif;
	font-size:   0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor:      pointer;
	position:    relative;
	transition:
		background   0.18s ease,
		color        0.18s ease,
		border-color 0.18s ease;
}

/* Details dropdown popup */
.eaw-card-details {
	display:      none;
	position:     absolute;
	bottom:       calc(100% + 8px);
	left:         0;
	right:        0;
	z-index:      20;
	background:   #fff;
	border:       1px solid rgba(27, 94, 97, 0.15);
	border-radius: 0;
	padding:      0.9rem 1rem;
	box-shadow:
		0 4px 16px rgba(15, 40, 42, 0.1),
		0 1px 3px rgba(27, 94, 97, 0.08);
	font-family:  'Montserrat', sans-serif;
	font-size:    0.875rem;
	font-weight:  400;
	color:        var(--wfea-body);
	line-height:  1.58;
	white-space:  normal;
	text-align:   left;
	text-transform: none;
	letter-spacing: 0;
}

button.eaw-button-details:hover .eaw-card-details,
button.eaw-button-details:focus .eaw-card-details,
button.eaw-button-details.is-open .eaw-card-details {
	display: block;
}

/* Register button base styles (colour + shape handled by plugin reset block) */
.eaw-booknow {
	display: flex;
}

a.wfea-button,
.eaw-booknow a {
	font-family:    'Montserrat', sans-serif !important;
	font-size:      0.78rem !important;
	font-weight:    700 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	transition:
		background   0.18s ease,
		border-color 0.18s ease !important;
}


/* =============================================================================
   FORMIDABLE FORMS CALENDAR — PTAC AESTHETIC OVERRIDES
   Targets .frmcal / .frm-modern-calendar (Formidable Views calendar widget).
   Overrides plugin CSS variables and structural rules to match the PTAC
   design system used by the Eventbrite card section above.
   Primary: var(--ast-global-color-0, #1b5e61)
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. CSS VARIABLE OVERRIDES
   Re-map all Formidable calendar tokens to the PTAC palette.
   ----------------------------------------------------------------------------- */

.frmcal.frm-modern-calendar {
	--frm-views-calendar-accent-color:        var(--ast-global-color-0, #1b5e61);
	--frm-views-calendar-accent-bg-color:     rgba(27, 94, 97, 0.09);
	--frm-views-calendar-border-color:        rgba(27, 94, 97, 0.14);
	--frm-views-calendar-border-radius:       0px;
	--frm-views-calendar-background-color:    #ffffff;
	--frm-views-calendar-background-hover-color: rgba(27, 94, 97, 0.05);
	--frm-views-calendar-color:               #0f2d2f;
	--frm-views-calendar-font-size:           14px;

	/* Nav arrow SVGs — swap blue fill (#00acff) for teal (#1b5e61) */
	--frm-views-calendar-left-arrow-icon:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231b5e61' d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
	--frm-views-calendar-right-arrow-icon:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231b5e61' d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
	--frm-views-calendar-dropdown-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231b5e61' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");

	font-family: 'Montserrat', sans-serif;
}

.frmcal {
    padding-top: 0px !important;
}


/* -----------------------------------------------------------------------------
   2. CALENDAR WRAPPER
   Top gradient bleed + left accent bar to visually connect with the card grid.
   ----------------------------------------------------------------------------- */

.frmcal.frm-modern-calendar {
	position:   relative;
	margin-top: 2rem;
}

/* 3-px gradient accent bar along the top — matches .wfea-card-item::before */
.frmcal.frm-modern-calendar::before {
	content:    "";
	display:    block;
	height:     3px;
	background: linear-gradient(
		90deg,
		var(--ast-global-color-0, #1b5e61) 0%,
		rgba(27, 94, 97, 0.35) 72%,
		rgba(27, 94, 97, 0.08) 100%
	);
	margin-bottom: 0;
}


/* -----------------------------------------------------------------------------
   3. HEADER
   ----------------------------------------------------------------------------- */

.frm-modern-calendar .frmcal-header {
	background:    #ffffff !important;
	border:        1px solid rgba(27, 94, 97, 0.18) !important;
	border-bottom: none !important;
	padding:       0.875rem 1rem !important;
	min-height: 74px !important;
}

/* Month + Year title */
.frm-modern-calendar .frmcal-title {
	font-family:    'Montserrat', sans-serif;
	font-weight:    700;
	letter-spacing: -0.01em;
	color:          #0f2d2f;
	font-size:      1.25rem !important; /* plugin sets 1.7em — rein it in */
}

.frm-modern-calendar .frmcal-title b,
.frm-modern-calendar .frmcal-title span {
	color: inherit;
}


/* -----------------------------------------------------------------------------
   4. NAVIGATION ARROWS
   Square corners, strong border, generous touch target (≥ 44 × 44px).
   ----------------------------------------------------------------------------- */

.frm-modern-calendar .frmcal-navs {
	border:        2px solid #1b5e61 !important;
	border-radius: 0 !important;
	overflow:      hidden;
	height:        44px !important;
}

.frm-modern-calendar .frmcal-nav {
	background:  #ffffff !important;
	min-width:   44px !important;
	height:      44px !important;
	display:     flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor:      pointer;
	transition:  background 0.18s ease;
}

.frm-modern-calendar .frmcal-nav:hover,
.frm-modern-calendar .frmcal-nav:focus-visible {
	background: #1b5e61 !important;
	outline:    none;
	/* Swap arrow SVG fill to white on hover */
	--frm-views-calendar-left-arrow-icon:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
	--frm-views-calendar-right-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
}

.frm-modern-calendar .frmcal-nav:focus-visible {
	box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #1b5e61;
}

/* Divider between prev / next buttons */
.frm-modern-calendar .frmcal-navs .frmcal-nav + .frmcal-nav {
	border-left: 2px solid #1b5e61 !important;
}


/* -----------------------------------------------------------------------------
   5. FILTER DROPDOWNS (month + year selects)
   Minimum 44px height for accessibility; strong visible border at rest.
   ----------------------------------------------------------------------------- */

.frm-modern-calendar .frmcal-filters {
	display:     flex !important;
	gap:         0.5rem !important;
	align-items: center !important;
}

.frm-modern-calendar .frmcal-filters select.frmcal-dropdown {
	font-family:      'Montserrat', sans-serif !important;
	font-size:        0.825rem !important;
	font-weight:      600 !important;
	color:            #0f2d2f !important;
	border:           2px solid #1b5e61 !important;
	border-radius:    0 !important;
	background-color: #ffffff !important;
	padding:          0 2.25rem 0 0.75rem !important;
	height:           44px !important;
	min-width:        7rem !important;
	cursor:           pointer;
	transition:       background 0.18s ease, border-color 0.18s ease;
	/* Preserve plugin's dropdown-arrow background image */
}

.frm-modern-calendar .frmcal-filters select.frmcal-dropdown:hover {
	background-color: rgba(27, 94, 97, 0.06) !important;
}

.frm-modern-calendar .frmcal-filters select.frmcal-dropdown:focus-visible {
	border-color: #0f2d2f !important;
	outline:      2px solid #1b5e61 !important;
	outline-offset: 1px !important;
}

.frm-modern-calendar .frmcal-filters select.frmcal-dropdown:focus {
	outline: none !important;
}


/* -----------------------------------------------------------------------------
   6. CALENDAR GRID SHELL
   ----------------------------------------------------------------------------- */

.frm-modern-calendar .frmcal-calendar {
	border:        1px solid rgba(27, 94, 97, 0.14) !important;
	border-radius: 0 !important;
	margin-top:    0 !important;   /* header border-bottom:none handles the join */
}


/* -----------------------------------------------------------------------------
   7. DAY-OF-WEEK HEADINGS ROW
   ----------------------------------------------------------------------------- */

.frm-modern-calendar .frmcal-calendar .frmcal-row-headings {
	background:    rgba(27, 94, 97, 0.07);
	border-bottom: 1px solid rgba(27, 94, 97, 0.14);
}

.frm-modern-calendar .frmcal-calendar .frmcal-row-headings > div {
	font-family:    'Montserrat', sans-serif;
	font-size:      0.65rem;
	font-weight:    700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          rgba(27, 94, 97, 0.85);
}


/* -----------------------------------------------------------------------------
   8. DAY CELLS
   ----------------------------------------------------------------------------- */

/* All cells in week rows — pure white base, no default tint */
.frm-modern-calendar .frmcal-calendar > div:not(.frmcal-row-headings) > div {
	background:   #ffffff !important;
	border-color: rgba(27, 94, 97, 0.12) !important;
	transition:   background 0.15s ease;
}

.frm-modern-calendar .frmcal-calendar > div:not(.frmcal-row-headings) > div:hover {
	background: rgba(27, 94, 97, 0.06) !important;
}

/* Day number label */
.frm-modern-calendar .frmcal-day-num {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	color:       #3d4a4c;
}

/* Inactive (out-of-month) cells — no fill, just muted number */
.frm-modern-calendar .frmcal-calendar .frm-inactive {
	background: #f9f9f9 !important;
}

.frm-modern-calendar .frmcal-calendar .frm-inactive .frmcal-day-num {
	color: rgba(27, 94, 97, 0.3) !important;
}

/* Weekend cells — clean white, no tint (avoids muddying the calendar) */
.frm-modern-calendar .frmcal-calendar .frmcal-week-end {
	background: #ffffff !important;
}

/* Today — teal border-top accent + very light fill; number gets solid teal badge */
.frm-modern-calendar .frmcal-calendar .frmcal-today {
	background:  rgba(27, 94, 97, 0.06) !important;
	border-top:  3px solid #1b5e61 !important;
}

.frm-modern-calendar .frmcal-calendar .frmcal-today .frmcal-day-num {
	background:    #1b5e61 !important;
	color:         #ffffff !important;
	border-radius: 0 !important;
	font-weight:   700 !important;
}


/* -----------------------------------------------------------------------------
   9. EVENTS (multi-day banners + single-day pills)
   ----------------------------------------------------------------------------- */

/* Multi-day event banners
   Solid teal fill, white text (contrast ratio > 4.5:1), generous padding,
   bottom border acts as a subtle depth cue between stacked rows.           */
.frm-modern-calendar .frmcal-multi-day-event {
	background:     #1b5e61 !important;
	border-radius:  0 !important;
	color:          #ffffff !important;
	font-family:    'Montserrat', sans-serif !important;
	font-size:      0.75rem !important;
	font-weight:    600 !important;
	letter-spacing: 0.01em !important;
	padding:        3px 8px !important;
	border-bottom:  2px solid rgba(255, 255, 255, 0.18) !important;
	transition:     background 0.18s ease, border-color 0.18s ease !important;
	cursor:         pointer;
}

.frm-modern-calendar .frmcal-multi-day-event:hover,
.frm-modern-calendar .frmcal-multi-day-event:focus-visible {
	background:    #0f2d2f !important;
	border-bottom: 2px solid rgba(255, 255, 255, 0.35) !important;
	outline:       none !important;
}

/* Single-day event pills
   Left-border accent on a light teal surface; text stays dark for contrast. */
.frm-modern-calendar .frmcal-daily-event {
	background:     rgba(27, 94, 97, 0.1) !important;
	border-left:    3px solid #1b5e61 !important;
	border-radius:  0 !important;
	color:          #f6fafa !important;
	font-family:    'Montserrat', sans-serif !important;
	font-size:      0.75rem !important;
	font-weight:    600 !important;
	letter-spacing: 0.01em !important;
	padding:        3px 6px !important;
	transition:     background 0.18s ease, border-color 0.18s ease !important;
	cursor:         pointer;
}

.frm-modern-calendar .frmcal-daily-event:hover,
.frm-modern-calendar .frmcal-daily-event:focus-visible {
	background:  rgba(27, 94, 97, 0.2) !important;
	border-color: #0f2d2f !important;
	outline:     none !important;
}


/* -----------------------------------------------------------------------------
   10. EVENT DETAIL POPUP
   Matches .eaw-card-details popup style from the card section above.
   ----------------------------------------------------------------------------- */

.frm-modern-calendar .frmcal-popup {
	border:        1px solid rgba(27, 94, 97, 0.15) !important;
	border-radius: 0 !important;
	box-shadow:
		0 4px 16px rgba(15, 40, 42, 0.1),
		0 1px 3px  rgba(27, 94, 97, 0.08) !important;
	font-family: 'Montserrat', sans-serif !important;
	color:       #3d4a4c !important;
}

.frm-modern-calendar .frmcal-popup-title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color:       #0f2d2f;
}

.frm-modern-calendar .frmcal-popup-date {
	font-size:  0.8rem;
	color:      rgba(27, 94, 97, 0.85);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Close button */
.frm-modern-calendar .frmcal-popup-close {
	border-radius: 0 !important;
	transition: background 0.18s ease, color 0.18s ease;
}

.frm-modern-calendar .frmcal-popup-close:hover {
	background: #000 !important;
	color:      #fff !important;
}

/* "View" / CTA link inside popup */
.frm-modern-calendar .frmcal-popup a {
	color:           var(--ast-global-color-0, #1b5e61) !important;
	font-weight:     700;
	text-decoration: none;
	transition:      color 0.18s ease;
}

.frm-modern-calendar .frmcal-popup a:hover {
	color: #000 !important;
}


/* -----------------------------------------------------------------------------
   11. RESPONSIVE
   No structural changes — just ensure the mobile title bar uses our typography.
   ----------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.frm-modern-calendar .frmcal-filters select.frmcal-dropdown {
		font-size: 0.75rem !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.frm-modern-calendar .frmcal-nav,
	.frm-modern-calendar .frmcal-calendar > div:not(.frmcal-row-headings) > div,
	.frm-modern-calendar .frmcal-multi-day-event,
	.frm-modern-calendar .frmcal-daily-event {
		transition: none;
	}
}