/*
 * ACAI Flags — nationality flag and class insignia grid (#158).
 *
 * Enqueued rather than inlined so the site can run a CSP without a style-src
 * exception (#196).
 *
 * Everything inherits: no font stack, no text colour, no background. The grid
 * sits inside fc-united on dev2 and inside theme/iwsa locally, and both should
 * dress it. The only colours declared are the card surface and its border,
 * derived from currentcolor so they follow a dark or light context on their own.
 */

.acai-flags {
	--acai-flags-columns: 4;
	--acai-flags-gap: 1.25rem;
	--acai-flags-radius: 10px;
	--acai-flags-line: color-mix(in srgb, currentcolor 18%, transparent);
	--acai-flags-surface: color-mix(in srgb, currentcolor 4%, transparent);
}

/*
 * The column count arrives as a class, not as a style attribute. An inline
 * style is blocked under any CSP that does not allow style-src-attr
 * 'unsafe-inline', and unlike a <style> element it cannot be cleared by a nonce
 * or a hash — so the attribute would have quietly cost this plugin the very CSP
 * the file header claims it does not need.
 */
.acai-flags--cols-2 { --acai-flags-columns: 2; }
.acai-flags--cols-3 { --acai-flags-columns: 3; }
.acai-flags--cols-4 { --acai-flags-columns: 4; }
.acai-flags--cols-5 { --acai-flags-columns: 5; }
.acai-flags--cols-6 { --acai-flags-columns: 6; }

/* ------------------------------------------------------------------ search */

.acai-flags__search {
	margin: 0 0 1.5rem;
	max-width: 28rem;
}

.acai-flags__label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.9em;
	opacity: 0.75;
}

.acai-flags__input {
	width: 100%;
	padding: 0.6em 0.8em;
	font: inherit;
	color: inherit;
	background: var(--acai-flags-surface);
	border: 1px solid var(--acai-flags-line);
	border-radius: var(--acai-flags-radius);
}

.acai-flags__input:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 2px;
}

.acai-flags__count,
.acai-flags__total {
	margin: 0.5rem 0 0;
	font-size: 0.85em;
	opacity: 0.7;
}

.acai-flags__total {
	margin-top: 1.5rem;
}

/* -------------------------------------------------------------------- grid */

.acai-flags__grid {
	display: grid;
	grid-template-columns: repeat(var(--acai-flags-columns), minmax(0, 1fr));
	gap: var(--acai-flags-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.acai-flags__item {
	display: flex;
	flex-direction: column;
	padding: 1rem;
	background: var(--acai-flags-surface);
	border: 1px solid var(--acai-flags-line);
	border-radius: var(--acai-flags-radius);
	/* Each card is the anchor a legacy download URL lands on (#50). Without
	   this it sits under a sticky header when linked to directly. */
	scroll-margin-top: 6rem;
}

/*
 * Not redundant with the browser's [hidden] rule — it is what makes it work.
 * The filter hides a card by setting `el.hidden = true`, which relies on the UA
 * stylesheet's `[hidden] { display: none }`. Any author `display` declaration
 * beats the UA sheet regardless of specificity, so the `display: flex` above
 * silently won and the search filtered nothing at all.
 */
.acai-flags__item[hidden] {
	display: none;
}

.acai-flags__item:target {
	outline: 2px solid currentcolor;
	outline-offset: 3px;
}

/* --------------------------------------------------------------- the artwork */

/* Two panes per card. The source artwork is uniform within each category —
   helmet 4:3, hull 1:1 — so a fixed box keeps every card the same height
   without measuring anything. */
.acai-flags__arts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}

.acai-flags__art {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	padding: 0.5rem;
	color: inherit;
	text-decoration: none;
	border-radius: calc(var(--acai-flags-radius) - 4px);
}

.acai-flags__art:hover,
.acai-flags__art:focus-visible {
	background: var(--acai-flags-surface);
}

.acai-flags__img {
	width: 100%;
	height: 72px;
	object-fit: contain;
	/* The PDFs rasterise onto white. On a dark page an untouched preview is a
	   bright rectangle, so it gets a rounded white plate of its own instead of
	   bleeding into the card. */
	background: #fff;
	border-radius: 4px;
}

.acai-flags__noimg {
	display: grid;
	place-items: center;
	width: 100%;
	height: 72px;
	font-size: 0.75em;
	border: 1px dashed var(--acai-flags-line);
	border-radius: 4px;
	opacity: 0.6;
}

.acai-flags__artlabel {
	font-size: 0.72em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.65;
}

/* ---------------------------------------------------------------- the name */

.acai-flags__name {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	margin: 0.85rem 0 0;
	font-size: 1em;
	line-height: 1.25;
}

.acai-flags__code {
	font-weight: 700;
	letter-spacing: 0.04em;
}

.acai-flags__nation {
	font-size: 0.85em;
	font-weight: 400;
	opacity: 0.7;
}

/* ----------------------------------------------------------- the downloads */

.acai-flags__dls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.85rem;
}

.acai-flags__dl {
	padding: 0.3em 0.7em;
	font-size: 0.8em;
	color: inherit;
	text-decoration: none;
	border: 1px solid var(--acai-flags-line);
	border-radius: 999px;
}

.acai-flags__dl:hover,
.acai-flags__dl:focus-visible {
	border-color: currentcolor;
}

.acai-flags__empty {
	padding: 1rem;
	border: 1px dashed var(--acai-flags-line);
	border-radius: var(--acai-flags-radius);
}

/* ------------------------------------------------------------- narrow view */

/*
 * Capped by redefining the variable, not by `repeat(min(var(…), 3), …)`.
 * repeat()'s first argument must be an integer — a math function there is
 * invalid, so that declaration was dropped outright and a 4-, 5- or 6-column
 * grid stayed at full width all the way down to 640px. Lowering the custom
 * property caps the wide layouts and leaves 2 and 3 alone, which forcing
 * `repeat(3, …)` would not.
 */
@media (max-width: 900px) {
	.acai-flags--cols-4,
	.acai-flags--cols-5,
	.acai-flags--cols-6 {
		--acai-flags-columns: 3;
	}
}

@media (max-width: 640px) {
	.acai-flags__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		--acai-flags-gap: 0.85rem;
	}

	.acai-flags__item {
		padding: 0.75rem;
	}

	.acai-flags__ext {
		display: none;
	}
}