/*------------------------------------*\
    ALERT — lightbox popup (Oakhyrst brand)
\*------------------------------------*/

/* Strip Fancybox chrome so #notice is the white box; allow the corner arrow to
   overflow, and hide the default close (we use our own red arrow). */
.lightboxItem .fancybox__content { padding: 0; background: #fff; overflow: visible; }
.lightboxItem .fancybox__toolbar,
.lightboxItem .f-button.is-close-btn,
.lightboxItem .fancybox__button--close,
.lightboxItem [data-fancybox-close] { display: none !important; }
/* Dark dimmed overlay behind the alert */
.lightboxItem .fancybox__backdrop { background: rgba(0, 0, 0, 0.85); }

/* ---- Modal box (white panel) ---- */
#notice.popupAlert,
.popupAlert {
	position: relative;
	width: 92vw;
	max-width: 1100px;
	background: #fff !important;
	padding: 40px 22px;
	box-sizing: border-box;
	overflow: visible;
}

/* ---- Corner arrow shape — points inward, sits at the top-right corner ---- */
.popupAlert::after {
	content: '';
	position: absolute;
	top: 0;
	right: -26px;
	width: 44px;
	height: 44px;
	background: url(../images/bottom-shape-red.svg) center / contain no-repeat;
	transform: rotate(-90deg);
	pointer-events: none;
	z-index: 3;
}

/* ---- Close button (SVG red X), sits just left of the corner arrow ---- */
.popupAlert .alertClose {
	position: absolute;
	top: 52px;
	right: 34px;
	width: 27px;
	height: 27px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
	z-index: 4;
}
.popupAlert .alertClose:hover { padding-left: 0; opacity: 1; }
.popupAlert .alertClose svg { display: block; width: 100%; height: 100%; }
/* Mobile: white close (sits over the image); desktop turns it red below */
.popupAlert .alertClose svg path { stroke: #fff; }

/* ---- Layout (mobile-first: stacked) ---- */
.popupAlert .noticeBody { width: 100%; padding: 0; }
.popupAlert .alertGrid {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Mobile: the media column dissolves so image / text / button stack in a single
   column, with the button ordered last (under the text). Desktop restores the
   media column below so the button sits under the image. */
.popupAlert .alertMedia { display: contents; }
.popupAlert .popupImg   { order: 1; }
.popupAlert .alertText  { order: 2; }
.popupAlert .alertBtn   { order: 3; margin: 70px 0;}
.popupAlert .popupImg { margin: 0; width: 100%; }
.popupAlert .alertImage {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 7px;
}

/* Heading */
.popupAlert .popTitle {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-style: italic;
	color: var(--og-red, #eb2227);
	font-size: 30px;
	line-height: 1.1;
	margin: 16px 0 32px;
}

/* Body text */
.popupAlert .noticeText {
	font-family: quincy-cf, serif;
	font-weight: 400;
	color: var(--og-red, #eb2227);
	font-size: 16px;
	line-height: 1.6;
}
.popupAlert .noticeText p { margin: 0 0 1em; color: var(--og-red, #eb2227); }
.popupAlert .noticeText *  { max-width: 80%; }

/* Button uses the standard a.button styling (arrow + hover) from typography.css. */

/* ---- Desktop: image left, text right ---- */
@media (min-width: 768px) {
	#notice.popupAlert,
	.popupAlert { padding: 26px; }
	.popupAlert::after { width: 70px; height: 70px; }
	.popupAlert .alertClose { top: 0px; right: 40px; width: 23px; height: 25px; margin-top: 25px; }
	.popupAlert .alertClose svg path { stroke: var(--og-red, #eb2227); }
	.popupAlert .alertGrid {
		flex-direction: row;
		align-items: flex-start;
		gap: 48px;
	}
	/* Restore the media column so the button sits under the image on desktop */
	.popupAlert .alertMedia {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		flex: 0 0 40%;
		max-width: 40%;
	}
	.popupAlert .alertText  { flex: 1; }
	.popupAlert .alertImage { aspect-ratio: 1 / 1; }
	.popupAlert .popTitle   { font-size: 44px; margin-top: 80px; margin-bottom: 48px; }
	.popupAlert .noticeText { font-size: 20px; }
}