/* framework/member-map: structure only; design in ibia.css "Members of IBIA". */

/* The counter is a sibling of the stage, because Google Maps empties whatever
   element it mounts on. The frame is the positioned ancestor they share, so the
   counter's absolute placement in ibia.css keeps working unchanged. */
.ibia-mem-map__frame { position: relative; }
.ibia-mem-map__stage { position: relative; }

/* --fw-blue-grey is a border and active-filter colour, not a text one: at 2.6:1
   on white it fails AA for body text. This is the brand navy at 72% over white,
   which measures 5.4:1 and still reads as secondary to the full-navy figures. */
.ibia-mem-map__count-split {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 18px;
	color: #486d8f;
}

.ibia-mem-map__count-split[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   The map stage and its country modal.
   The map itself is drawn by Google with the brand's own style; everything
   below is the panel that opens when a country marker is clicked.
   --------------------------------------------------------------------------- */

.ibia-mem-map__stage { min-height: 420px; background: #04223d; }

/* Until the script reports in, the stage is just a navy box; once it has, the
   count of countries is on the element, which makes it testable. */
.ibia-mem-map__stage[data-ibia-loaded="error"]::after {
	content: "The member map could not be loaded.";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #cfe0f0;
	font-size: 0.9375rem;
}

.ibia-mm[hidden] { display: none !important; }

.ibia-mm {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: 1.25rem;
}

.ibia-mm__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(2, 26, 48, 0.72);
}

/* The panel itself never scrolls. It is a column of a fixed head and a body that
   takes what is left, so the country and its counts stay put while the member
   list moves under them — and the scrollbar belongs to the list, not the modal. */
.ibia-mm__panel {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: min(640px, 100%);
	max-height: min(76vh, 720px);
	/* clip, not hidden: `hidden` still makes the panel a scroll container, so
	   tabbing to a link far down the list scrolls the head out of view even
	   though the wheel cannot. `clip` creates no scroll container at all. */
	overflow: hidden;
	overflow: clip;
	border-radius: var(--fw-input-radius, 4px);
	background: #fff;
	box-shadow: 0 24px 60px rgba(1, 53, 99, 0.3);
}

.ibia-mm__head {
	flex: 0 0 auto;
	padding: 1.75rem 1.75rem 0;
}

.ibia-mm__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0.25rem 1.75rem 1.75rem;
}

.ibia-mm__close {
	position: absolute;
	z-index: 1;
	inset-block-start: 0.75rem;
	inset-inline-end: 0.75rem;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	border-radius: 50%;
	background: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--fw-blue-grey, #949fb3);
	cursor: pointer;
}

.ibia-mm__close:hover { background: var(--fw-bg-grey, #f5f7fa); }

.ibia-mm__close:focus-visible {
	outline: var(--fw-focus-width, 2px) solid var(--fw-focus-colour, #013563);
	outline-offset: var(--fw-focus-offset, 2px);
}

.ibia-mm__eyebrow {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #486d8f; /* same reason as the counts */
}

.ibia-mm__title {
	margin: 0.15rem 0 0;
	font-size: var(--fw-h3-size, 1.5rem);
	font-weight: var(--fw-h3-weight, 500);
	line-height: 1.25;
}

/* The rule sits flush at the foot of the head, so it reads as the line the list
   scrolls beneath. */
.ibia-mm__counts {
	margin: 0.5rem 0 0;
	padding-block-end: 1rem;
	border-block-end: 1px solid var(--fw-divider, #e3e7ee);
	color: #486d8f; /* see the note above: 5.4:1, not --fw-blue-grey's 2.6:1 */
}

/* The two figures are the point of the line, so they take the full navy. */
.ibia-mm__counts strong { color: var(--fw-navy, #013563); font-weight: 700; }

.ibia-mm__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

/* Name and address lead; the logo follows on the right. That way a member with
   no logo just ends after their address, instead of opening with a gap where one
   would have been. */
.ibia-mm__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.125rem;
	min-height: 60px;
	padding: 0.75rem 0;
}

.ibia-mm__item + .ibia-mm__item { border-block-start: 1px solid var(--fw-divider, #e3e7ee); }

/* Glue Up serves each logo on a square canvas with the artwork letterboxed
   inside: full width, but a median of only 46% of the height. Dropped into a box
   with object-fit alone, the artwork renders at well under half the size of the
   space holding it, and no two logos look alike.

   So the box clips and the image is blown up until the ARTWORK fills it. The
   four fractions come from the server, which measures the ink once per logo;
   the defaults below reproduce plain `contain`, which is what a logo with no
   measurement gets. */
.ibia-mm__logo {
	--logo-w: 150px;
	--logo-h: 84px;
	--tw: 1;
	--th: 1;
	--cx: 0.5;
	--cy: 0.5;
	--size: min( calc( var(--logo-w) / var(--tw) ), calc( var(--logo-h) / var(--th) ) );

	flex: 0 0 auto;
	position: relative;
	margin-inline-start: auto;
	width: var(--logo-w);
	height: var(--logo-h);
	overflow: hidden;
}

.ibia-mm__logo img {
	position: absolute;
	width: var(--size);
	height: var(--size);
	max-width: none;
	object-fit: contain;
	left: calc( var(--logo-w) / 2 - var(--cx) * var(--size) );
	top: calc( var(--logo-h) / 2 - var(--cy) * var(--size) );
}

.ibia-mm__text {
	flex: 1 1 auto;
	min-width: 0;
}

.ibia-mm__name {
	margin: 0;
	font-weight: 500;
	color: inherit;
}

/* The web address is listed in full and is itself the link, so what is clicked
   is what it goes to. Long addresses wrap rather than overflow the panel. */
.ibia-mm__url {
	display: inline-block;
	margin-block-start: 0.125rem;
	font-size: 0.875rem;
	line-height: 1.4;
	/* --fw-green is the LIGHT green (#A3C362), a fill colour: as text it measures
	   1.99:1. --fw-green-dark is the one meant for text and links. */
	color: var(--fw-green-dark, #658138);
	overflow-wrap: anywhere;
}

.ibia-mm__url:hover { text-decoration: underline; }

.ibia-mm__url:focus-visible {
	outline: var(--fw-focus-width, 2px) solid var(--fw-focus-colour, #013563);
	outline-offset: var(--fw-focus-offset, 2px);
}

@media (max-width: 480px) {
	.ibia-mm__logo { --logo-w: 96px; --logo-h: 60px; }
}

.ibia-mm__none { margin: 0; color: var(--fw-blue-grey, #949fb3); }