/**
 * The announcement popup.
 *
 * Only enqueued while a popup is live (inc/popup.php), so nothing here is on
 * the page the rest of the year.
 *
 * The old CMS has no popup, so unlike the rest of the site there is no
 * original markup to match: what is borrowed instead is the site's own type
 * scale, the red from :root and the .button class, so the dialog reads as part
 * of hses.org rather than as something bolted on.
 */

.hses-popup {
	align-items: center;
	bottom: 0;
	display: none;
	justify-content: center;
	left: 0;
	padding: 24px;
	position: fixed;
	right: 0;
	top: 0;
	/* Above the export's sticky header and its own overlays, which stop at
	   9999, and deliberately below .global-cookie-notice at 999999: if a
	   consent banner is ever switched on, it has to stay on top of this. */
	z-index: 10000;
}

/* popup.js removes the `hidden` attribute and adds this, so a page whose JS
   never runs keeps the dialog out of the way rather than dropping it at the
   bottom of the document. */
.hses-popup.is-open {
	display: flex;
}

.hses-popup-backdrop {
	background: rgba(26, 40, 65, 0.65);
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.hses-popup-dialog {
	background: #fff;
	border-radius: 2px;
	box-shadow: 0 18px 50px rgba(26, 40, 65, 0.35);
	max-height: calc(100vh - 48px);
	max-width: 560px;
	overflow-y: auto;
	position: relative;
	width: 100%;
}

/* Scroll belongs to the dialog while it is open; without this the page behind
   it moves under a phone's thumb. body.show-nav already does the same thing for
   the mobile menu, so the class is kept separate rather than reused. */
html.hses-popup-open,
body.hses-popup-open {
	overflow: hidden;
}

/* --- Close button ---------------------------------------------------------

   A 44px target, which is the smallest comfortable one on a touch screen, and
   every property set explicitly: this is a bare <button>, and the only bare
   button rule in the export is the search form's magnifying glass, which this
   one must not inherit if it ever moves inside such a wrapper. */
.hses-popup-close {
	-webkit-appearance: none;
	appearance: none;
	background: #fff;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(26, 40, 65, 0.25);
	color: #211f20;
	cursor: pointer;
	height: 44px;
	line-height: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 12px;
	top: 12px;
	transition: color 0.2s ease, background-color 0.2s ease;
	width: 44px;
	z-index: 2;
}

.hses-popup-close:hover,
.hses-popup-close:focus {
	background: #fff;
	color: var(--red-color);
}

.hses-popup-close:focus-visible {
	outline: 2px solid var(--red-color);
	outline-offset: 2px;
}

.hses-popup-close svg {
	display: inline-block;
	fill: currentColor;
	height: 14px;
	vertical-align: middle;
	width: 14px;
}

/* --- Content ------------------------------------------------------------- */

.hses-popup-image img {
	display: block;
	height: auto;
	/* A portrait photo would otherwise push the title and the button off the
	   screen, so the frame is capped and the image fills it. */
	max-height: 280px;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

/* The image as the link. Block, so there is no baseline gap under it, and the
   focus ring is drawn inside: an outline on a link flush with the edge of the
   dialog would be clipped by the dialog's own overflow. */
.hses-popup-image-link {
	display: block;
}

.hses-popup-image-link:focus-visible {
	outline: 2px solid var(--red-color);
	outline-offset: -4px;
}

/* --- The image on its own -------------------------------------------------

   A flyer that already carries its own words - a date, a "Click to Register" -
   is the whole announcement, and then two things change. The 280px frame has
   to go: it exists to stop a photo pushing the title and button off the
   screen, and with nothing underneath it would only crop the words out of the
   image. And the dialog stops being a 560px box the image has to fill, and
   becomes whatever size the image is, up to what the viewport allows, so a
   square or a portrait flyer is shown whole instead of letterboxed in white.
   width:auto + max-height is enough for that - the browser keeps the aspect
   ratio on its own, with no object-fit in the way. */
.hses-popup-dialog.is-image-only {
	/* Nothing to scroll: the image is capped to the viewport below, so it
	   always fits. Dropping the scroll container is what lets the close button
	   hang off the corner - inside an overflow:auto box a negative offset is
	   clipped, which is why the button sits at +12px everywhere else. */
	overflow: visible;
	width: auto;
}

/* The X straddles the corner instead of sitting on the artwork. A flyer uses
   its own edges - this one's headline runs to within a few pixels of the top
   right - and a 44px circle 12px inside the image lands on the words, worst of
   all on a phone, where the button keeps its 44px while the image shrinks to
   the screen. Hanging it on the corner keeps the full touch target and leaves
   the image alone, and the 12px it sticks out fits in the padding .hses-popup
   already has, so it never reaches the edge of the screen. */
.hses-popup-dialog.is-image-only .hses-popup-close {
	right: -12px;
	top: -12px;
}

.hses-popup-dialog.is-image-only .hses-popup-image img {
	max-height: calc(100vh - 48px);
	max-width: 100%;
	object-fit: fill;
	width: auto;
}

.hses-popup-body {
	padding: 28px 32px 32px;
}

/* The heading is sized here rather than left to the export's `h2`, because
   that rule is not one size: `h1, .h1-style, .page-index h2` makes an h2 46px
   on the home page and 32px everywhere else, and a dialog that changes size
   with the page under it looks like a mistake. Two classes beat
   `.page-index h2`, and this file loads after the export anyway. */
.hses-popup .hses-popup-title {
	color: var(--default-font-color);
	font: 700 28px var(--alt-font-family);
	line-height: 125%;
	margin: 0 0 14px;
}

.hses-popup-text {
	color: var(--default-font-color);
	font-family: var(--default-font-family);
	font-size: 17px;
	line-height: 160%;
}

.hses-popup-text > :last-child {
	margin-bottom: 0;
}

.hses-popup-actions {
	margin: 24px 0 0;
}

/* .button carries the site's red, shadow and hover from the export; the only
   thing it needs here is room to grow its shadow on hover without the dialog
   scrolling. */
.hses-popup-actions .button {
	margin: 0 4px 4px 0;
}

.hses-popup-actions .button:focus-visible {
	outline: 2px solid var(--default-font-color);
	outline-offset: 3px;
}

/* --- Phones -------------------------------------------------------------- */

@media (max-width: 600px) {
	.hses-popup {
		padding: 16px;
	}

	.hses-popup-dialog {
		max-height: calc(100vh - 32px);
	}

	.hses-popup-image img {
		max-height: 180px;
	}

	.hses-popup-dialog.is-image-only .hses-popup-image img {
		max-height: calc(100vh - 32px);
	}

	.hses-popup-body {
		padding: 22px 20px 24px;
	}

	.hses-popup .hses-popup-title {
		font-size: 23px;
	}

	.hses-popup-text {
		font-size: 16px;
	}
}

/* --- Motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.hses-popup.is-open .hses-popup-backdrop {
		animation: hses-popup-fade 0.2s ease-out both;
	}

	.hses-popup.is-open .hses-popup-dialog {
		animation: hses-popup-rise 0.25s ease-out both;
	}
}

@keyframes hses-popup-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes hses-popup-rise {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}