/**
 * Mobile day popup for the Top Shelf VCS Event Calendar.
 *
 * Only structural defaults live here. Every colour, size and spacing value is
 * re-declared by the widget's Elementor "Mobile Popup" style controls, so this
 * file is what the popup falls back to before an editor touches it.
 *
 * The popup element is a native <dialog>. It is promoted to the top layer while
 * open, which is what keeps it clear of the calendar's own stacking and of any
 * `overflow: hidden` container it happens to sit inside -- it stays a DOM
 * descendant of the widget wrapper, so Elementor's scoped selectors still reach
 * it.
 */

.vcs-event-calendar__popup {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 10000;
	box-sizing: border-box;
	width: 100%;
	max-width: 34rem;
	max-height: 85vh;
	margin: 0 auto;
	padding: 0;
	overflow: hidden auto;
	overscroll-behavior: contain;
	border: 0;
	border-radius: 14px 14px 0 0;
	background-color: #ffffff;
	color: #24303f;
	box-shadow: 0 -8px 40px rgba(15, 32, 56, 0.28);
}

.vcs-event-calendar__popup::backdrop {
	background-color: rgba(12, 26, 45, 0.62);
}

/* Non-modal fallback for browsers without dialog.showModal(). */
.vcs-event-calendar__popup:not(:modal) {
	position: fixed;
	inset: auto 0 0 0;
}

.vcs-event-calendar__popup-inner {
	position: relative;
	padding: 22px 20px 26px;
}

/*
 * Themes skin bare <button> elements globally -- the Elementor kit lands a gold
 * pill here. Reset the inherited skin so the widget's own Elementor controls
 * decide how this looks rather than whichever theme rule wins.
 *
 * The `button.` qualifier is deliberate: the kit's rules are
 * `.elementor-kit-NNN button` and `.elementor-kit-NNN button:hover, :focus`,
 * and showModal() autofocuses this button the moment the popup opens -- so
 * without out-specifying the focus rule the popup opens wearing the theme's
 * gold call-to-action skin.
 */
.vcs-event-calendar__popup button.vcs-event-calendar__popup-close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	border-radius: 50%;
	background: rgba(27, 57, 97, 0.07);
	color: #1b3961;
	font-family: inherit;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
}

.vcs-event-calendar__popup button.vcs-event-calendar__popup-close:hover,
.vcs-event-calendar__popup button.vcs-event-calendar__popup-close:focus,
.vcs-event-calendar__popup button.vcs-event-calendar__popup-close:focus-visible {
	background: rgba(27, 57, 97, 0.16);
	border-color: transparent;
	color: #1b3961;
	box-shadow: none;
}

/* Keyboard users still need a ring; pointer users should not see one. */
.vcs-event-calendar__popup button.vcs-event-calendar__popup-close:focus {
	outline: none;
}

.vcs-event-calendar__popup button.vcs-event-calendar__popup-close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.vcs-event-calendar__popup-card {
	margin: 0;
}

.vcs-event-calendar__popup-header {
	margin: 0 44px 14px 0;
}

.vcs-event-calendar__popup-header h4 {
	margin: 0;
	color: #1b3961;
	font-size: 19px;
	line-height: 1.25;
	font-weight: 700;
}

.vcs-event-calendar__popup-meta {
	margin: 4px 0 0;
	font-size: 14px;
	opacity: 0.75;
}

.vcs-event-calendar__popup-day-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vcs-event-calendar__popup-day-item + .vcs-event-calendar__popup-day-item {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid rgba(27, 57, 97, 0.14);
}

.vcs-event-calendar__popup-day-link {
	display: block;
	color: #1b3961;
	font-size: 17px;
	line-height: 1.3;
	font-weight: 700;
	text-decoration: none;
}

.vcs-event-calendar__popup-day-link:hover,
.vcs-event-calendar__popup-day-link:focus-visible {
	text-decoration: underline;
}

.vcs-event-calendar__popup-day-time {
	display: block;
	margin-top: 3px;
	font-size: 14px;
	font-weight: 600;
	opacity: 0.75;
}

.vcs-event-calendar__popup-day-excerpt {
	margin: 7px 0 0;
	font-size: 15px;
	line-height: 1.45;
}

.vcs-event-calendar__popup-day-action {
	display: inline-block;
	margin-top: 8px;
	color: #2c5c9c;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.vcs-event-calendar__popup-day-action:hover,
.vcs-event-calendar__popup-day-action:focus-visible {
	text-decoration: underline;
}

.vcs-event-calendar__popup-empty {
	margin: 0;
}

/* The page behind a modal dialog still scrolls on iOS; pin it while open. */
body.vcs-event-calendar-popup-open {
	overflow: hidden;
}

@media (min-width: 480px) {
	.vcs-event-calendar__popup {
		inset: 0;
		height: -moz-fit-content;
		height: fit-content;
		margin: auto;
		border-radius: 14px;
	}

	.vcs-event-calendar__popup:not(:modal) {
		inset: 50% auto auto 50%;
		transform: translate(-50%, -50%);
	}
}