/* AMA Popup — one-time announcement dialog.

   A native <dialog>, so it is closed and out of the flow until showModal().
   No [hidden] juggling and no z-index race with the chatbot (999) or the
   cookie bar (900): the top layer sits above every stacking context. */

/* Centred on both axes. `inset: 0` plus `margin: auto` against a definite width
   and a fit-content height is what does it — horizontally AND vertically.

   This was already the behaviour, but only by inheritance: the UA stylesheet
   gives `dialog` an `inset-inline: 0` and `dialog:modal` an `inset-block: 0`,
   and `margin: auto` then resolves both. Stating it here means the centring does
   not quietly depend on a UA rule that a browser could narrow later, and that
   anyone reading this file can see why it is centred. */
.ama-popup {
	position: fixed;
	inset: 0;
	margin: auto;
	/* --ama-popup-w is set per popup from the Width setting; 560px when unset.
	   The viewport clamp always wins, so a width of 50vw on a phone cannot push
	   the dialog off screen. */
	width: min(var(--ama-popup-w, 560px), calc(100vw - 32px));
	max-height: calc(100vh - 64px);
	overflow: hidden;                  /* .ama-popup__body does the scrolling */
	padding: 0;                        /* children own their spacing */
	border: 0;
	border-radius: 10px;
	background: var(--white, #fff);
	color: var(--ink, #1a1f33);
	font-family: var(--font-body, 'Atkinson Hyperlegible', Arial, sans-serif);
	box-shadow: 0 16px 56px rgba(0, 0, 0, .28);
}

.ama-popup::backdrop {
	background: rgba(13, 33, 96, .62); /* --blue-deep, which ::backdrop cannot read */
}

/* ::backdrop is outside the document tree, so custom properties defined on
   :root are NOT inherited into it — hence the literal above. */

/* The scroll container. Keeping it off the dialog itself is what lets the close
   button stay pinned to the corner on a long announcement. */
.ama-popup__body {
	max-height: calc(100vh - 64px);
	overflow-y: auto;
	overscroll-behavior: contain;      /* no scroll chaining to the page behind */
	border-radius: 10px;
}

/* Aspect ratio is maintained, and that is the browser's doing rather than
   something declared here. With `width: 100%` and `height: auto` the height
   follows the ratio; add a `max-height` and CSS's replaced-element sizing rules
   (CSS2.1 §10.4) resolve the violation by capping the height and recomputing
   the WIDTH from the same ratio — it never squashes the picture. A portrait
   image capped by height therefore ends up narrower than the dialog, which is
   why `margin-inline: auto` is here to centre it. */
.ama-popup__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: var(--ama-popup-img-h, none);
	margin-inline: auto;
	border-radius: 10px 10px 0 0;
}

.ama-popup__title {
	margin: 24px 28px 0;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--blue-deep, #0d2160);
}

.ama-popup__content {
	margin: 14px 28px 28px;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* An image or a title alone should not lose the bottom gutter. */
.ama-popup__title:last-child { margin-bottom: 24px; }
.ama-popup__img:last-child   { border-radius: 10px; }

.ama-popup__content > :first-child { margin-top: 0; }
.ama-popup__content > :last-child  { margin-bottom: 0; }

/* Two classes, not !important. The Elementor kit emits its link colour as
   `.elementor-kit-{id} a` — one class plus one element, (0,1,1) — and that
   wrapper class sits on <body>, so it matches links in here too. A bare
   `.ama-popup__content a` is also (0,1,1): a tie, settled by stylesheet order,
   which is not something to rely on. Adding the block class gives (0,2,1) and
   wins outright. Same reasoning as ama-cookie.css. */
.ama-popup .ama-popup__content a {
	color: var(--blue, #1740a8);
	text-decoration: underline;
}
.ama-popup .ama-popup__content a:hover,
.ama-popup .ama-popup__content a:focus-visible {
	color: var(--blue-deep, #0d2160);
}

/* The kit also styles bare `button`, at (0,1,1) against a single class. Repeat
   the class for the resting state and again for :hover, which the kit reaches
   at (0,2,1). */
.ama-popup__close.ama-popup__close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 1;                        /* above a full-bleed image */
	display: grid;
	place-items: center;
	width: var(--tap-min, 44px);       /* WCAG 2.5.5 target size */
	height: var(--tap-min, 44px);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--white, #fff);
	color: var(--ink, #1a1f33);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .22);
}
.ama-popup__close.ama-popup__close.ama-popup__close:hover {
	background: var(--paper, #f1ece0);
	color: var(--ink, #1a1f33);
}
.ama-popup__close.ama-popup__close:focus-visible {
	outline: 3px solid var(--blue, #1740a8);
	outline-offset: 2px;
}

/* Set while the dialog is open, removed by its own close handler. <dialog>
   makes the page behind inert but does not stop it scrolling. */
html.ama-popup-open,
html.ama-popup-open body {
	overflow: hidden;
}

@media (max-width: 480px) {
	/* Still honours a configured width smaller than the phone viewport. */
	.ama-popup { width: min(var(--ama-popup-w, 560px), calc(100vw - 24px)); }
	.ama-popup__title   { margin: 20px 20px 0; font-size: 1.125rem; }
	.ama-popup__content { margin: 12px 20px 20px; }
}

/* Respect a reduced-motion preference: no entrance animation is defined, but
   be explicit so one added later inherits the guard. */
@media (prefers-reduced-motion: reduce) {
	.ama-popup { animation: none; transition: none; }
}