/* Sue Shanly Caption Overlay */

/* Position the caption over the photo and reveal it on hover */
.elementor-widget-image:has(.widget-image-caption) {
	position: relative;
	overflow: hidden;
}

.elementor-widget-image .widget-image-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(118, 23, 36, 0.9); /* Maroon, matches site headings */
	color: #F7F5F0 !important; /* Cream text */
	padding: 12px;
	margin: 0;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	pointer-events: none;
}

.elementor-widget-image:hover .widget-image-caption,
.elementor-widget-image:focus-within .widget-image-caption {
	opacity: 1;
}

/* Touch screens can't hover, so captions are shown there all the time… */
@media (hover: none) {
	.elementor-widget-image .widget-image-caption {
		opacity: 1;
	}

	/* …unless the image is set to "Show when image is tapped".
	   .ssco-js is only present once the script is running, so the caption
	   stays visible if JavaScript is unavailable. */
	html.ssco-js .elementor-widget-image.ssco-touch-tap {
		cursor: pointer; /* also makes iOS Safari send tap events */
		-webkit-tap-highlight-color: transparent;
	}

	html.ssco-js .elementor-widget-image.ssco-touch-tap:not(.ssco-open) .widget-image-caption {
		opacity: 0;
	}

	html.ssco-js .elementor-widget-image.ssco-touch-tap.ssco-open .widget-image-caption {
		opacity: 1;
	}
}