/**
 * The public roll of recognitions.
 *
 * Everything here is prefixed md1812- so that nothing on the page around it
 * is touched (rule 16). Colours and type are the theme's own wherever they
 * can be inherited; the few that are written out are the ones the theme has
 * no variable for.
 */

/*
 * Two declarations that have to be important, and the reason, because an
 * important without a reason is how a stylesheet becomes untouchable.
 *
 * Something on md1812.org gives a container in the content area that carries
 * no wp- class a multi-column layout. The roll went out flowing across three
 * columns with the carousel squeezed into a fourth, while every other child of
 * the content area was left alone. It is in none of the 83 stylesheets the
 * page can read, which leaves the one it loads cross-origin, so its
 * specificity cannot be measured and therefore cannot be out-measured.
 *
 * The width is the same fight one level down. The theme frames every direct
 * child of the content area with a rule carrying six classes, prose at 40rem
 * and everything else at 70rem, and the roll belongs with the prose: it is a
 * list of names, and a list of names 1,120px wide reads as a spreadsheet.
 *
 * The roll lays itself out. Nothing outside it should be deciding how many
 * columns it has or how wide it is.
 */
.md1812-roll {
	column-count: auto !important;
	column-width: auto !important;
	max-width: 40rem !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.md1812-roll {
	--md1812-roll-navy: #00235c;
	--md1812-roll-rule: #dfe3ea;
	--md1812-roll-wash: #f4f6f9;
	--md1812-roll-mute: #6b7280;
	--md1812-roll-gap: 12px;
}

.md1812-roll__title {
	margin-bottom: 0.4em;
}

.md1812-roll__empty {
	color: var(--md1812-roll-mute);
}

/* ---- the year buttons ---- */

.md1812-roll__years {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 1.25rem;
	padding: 0;
}

.md1812-roll__years[hidden] {
	display: none;
}

.md1812-roll__yearbtn {
	font: inherit;
	font-size: 1.0625rem;
	line-height: 1.2;
	color: var(--md1812-roll-navy);
	background: #fff;
	border: 1px solid var(--md1812-roll-rule);
	border-radius: 999px;
	padding: 7px 18px;
	cursor: pointer;
}

.md1812-roll__yearbtn:hover {
	border-color: var(--md1812-roll-navy);
}

.md1812-roll__yearbtn[aria-selected="true"] {
	background: var(--md1812-roll-navy);
	color: #fff;
	border-color: var(--md1812-roll-navy);
}

/* ---- one year ---- */

.md1812-roll__year + .md1812-roll__year {
	margin-top: 2.5rem;
}

.md1812-roll__year[hidden] {
	display: none;
}

.md1812-roll__heading {
	margin: 0 0 0.25rem;
}

.md1812-roll__count {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
	color: var(--md1812-roll-mute);
}

/* ---- the roll of names ---- */

.md1812-roll__names {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	border-top: 1px solid var(--md1812-roll-rule);
}

.md1812-roll__person {
	border-bottom: 1px solid var(--md1812-roll-rule);
	padding: 9px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: baseline;
}

.md1812-roll__name {
	font-weight: 600;
	color: var(--md1812-roll-navy);
}

.md1812-roll__unit {
	font-size: 0.9375rem;
	color: var(--md1812-roll-mute);
}

.md1812-roll__seelink {
	font: inherit;
	font-size: 0.875rem;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	margin-left: auto;
	cursor: pointer;
	text-decoration: underline;
}

/* ---- the photographs ---- */

/*
 * A photograph is mounted whole, never cropped. These pictures hold one, two
 * or three boys and nothing here knows where any of them is standing, so a
 * crop that flatters one cuts another out of his own photograph. The plate is
 * a fixed shape and the picture sits inside it.
 */
.md1812-roll__photos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 20px;
}

.md1812-roll__figure {
	margin: 0;
}

/*
 * The picture is positioned against the plate rather than sized by percentages
 * of it, and that is the whole point of this rule.
 *
 * The first version was `display: grid` on the plate and `width: 100%;
 * height: 100%; object-fit: contain` on the picture, which reads correctly and
 * is not. A box whose height comes from `aspect-ratio` has no definite height
 * for a percentage to resolve against, so `height: 100%` fell back to `auto`,
 * the picture took its own proportions at the full width, and a 768 by 1024
 * photograph rendered 622 by 829 inside a 624 by 468 plate. `overflow: hidden`
 * then quietly removed 361px of it, top and bottom, while the computed
 * `object-fit` still said `contain`.
 *
 * That is the Color Guard banner for the third time: the instrument said the
 * picture was being fitted and the pixels said it was being cropped. These
 * photographs hold one, two or three boys and nothing here knows where any of
 * them is standing, so nothing may be cropped at all.
 *
 * An absolutely positioned child with `inset: 0` takes its size from the
 * plate's padding box, which is definite, so `object-fit` finally has a box to
 * fit the picture into.
 */
.md1812-roll__plate {
	position: relative;
	background: var(--md1812-roll-wash);
	border: 1px solid var(--md1812-roll-rule);
	border-radius: 6px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.md1812-roll__plate img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.md1812-roll__caption {
	margin-top: 6px;
	font-size: 0.84375rem;
	line-height: 1.45;
	color: var(--md1812-roll-mute);
}

.md1812-roll__capnames {
	display: block;
	font-size: 1rem;
	color: var(--md1812-roll-navy);
}

/* ---- the same list, shown one at a time ---- */

/*
 * The carousel is not a second copy of the photographs. It is this list with
 * one item showing, which is why a name, a caption and a piece of alt text
 * exist once each however the reader is looking at them.
 */
.md1812-roll__photos--stage {
	display: block;
	max-width: 760px;
	margin: 0 auto;
}

.md1812-roll__photos--stage .md1812-roll__plate {
	aspect-ratio: 4 / 3;
}

.md1812-roll__photos--stage .md1812-roll__caption {
	margin-top: 10px;
	text-align: center;
	font-size: 0.9375rem;
}

.md1812-roll__photos--stage .md1812-roll__capnames {
	font-size: 1.3125rem;
}

.md1812-roll__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 12px;
	flex-wrap: wrap;
}

.md1812-roll__arrow {
	font: inherit;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--md1812-roll-navy);
	background: #fff;
	border: 1px solid var(--md1812-roll-rule);
	border-radius: 50%;
	width: 42px;
	height: 42px;
	cursor: pointer;
}

.md1812-roll__arrow:hover {
	border-color: var(--md1812-roll-navy);
}

.md1812-roll__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 7px;
	max-width: 280px;
}

.md1812-roll__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid #c3cad6;
	background: #fff;
	cursor: pointer;
}

.md1812-roll__dot[aria-current="true"] {
	background: var(--md1812-roll-navy);
	border-color: var(--md1812-roll-navy);
}

.md1812-roll__all {
	font: inherit;
	font-size: 0.9375rem;
	color: var(--md1812-roll-navy);
	background: none;
	border: 0;
	padding: 6px 2px;
	margin: 10px auto 0;
	display: block;
	cursor: pointer;
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Every control states its own hover, focus and active appearance.

   Importantly, and for the same reason the columns are turned off at the head
   of this file: the rule that repaints them lives in the stylesheet this site
   serves cross-origin, which cannot be read and therefore cannot be
   out-measured.

   What it does is paint a navy background on any button it finds. Against a
   navy chevron, a navy year and navy underlined text, that produces a solid
   navy shape with nothing in it. Measured on the live page: "See all the
   photographs" vanished completely under the pointer, the carousel arrows
   became filled ovals with no arrow in them, the year buttons became blank
   pills, and "See the photograph" went to dark grey on navy. Section 12 of
   the site stylesheet records the same fault on the theme's own buttons.

   A control still has to answer the pointer, so each one says how: the year
   buttons and arrows take a navy border, the dots fill, and the two text
   buttons thicken their underline.
   --------------------------------------------------------------------------- */
.md1812-roll__yearbtn:hover,
.md1812-roll__yearbtn:focus,
.md1812-roll__yearbtn:focus-visible,
.md1812-roll__yearbtn:active {
	background: #fff !important;
	color: var(--md1812-roll-navy) !important;
	border-color: var(--md1812-roll-navy) !important;
}

.md1812-roll__yearbtn[aria-selected="true"]:hover,
.md1812-roll__yearbtn[aria-selected="true"]:focus,
.md1812-roll__yearbtn[aria-selected="true"]:focus-visible,
.md1812-roll__yearbtn[aria-selected="true"]:active {
	background: var(--md1812-roll-navy) !important;
	color: #fff !important;
}

.md1812-roll__arrow:hover,
.md1812-roll__arrow:focus,
.md1812-roll__arrow:focus-visible,
.md1812-roll__arrow:active {
	background: #fff !important;
	color: var(--md1812-roll-navy) !important;
	border-color: var(--md1812-roll-navy) !important;
	width: 42px !important;
	height: 42px !important;
	padding: 0 !important;
}

.md1812-roll__dot:hover,
.md1812-roll__dot:focus,
.md1812-roll__dot:focus-visible,
.md1812-roll__dot:active {
	background: var(--md1812-roll-navy) !important;
	border-color: var(--md1812-roll-navy) !important;
	width: 10px !important;
	height: 10px !important;
	padding: 0 !important;
}

.md1812-roll__all:hover,
.md1812-roll__all:focus,
.md1812-roll__all:focus-visible,
.md1812-roll__all:active {
	background: none !important;
	color: var(--md1812-roll-navy) !important;
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	padding: 6px 2px !important;
}

.md1812-roll__seelink:hover,
.md1812-roll__seelink:focus,
.md1812-roll__seelink:focus-visible,
.md1812-roll__seelink:active {
	background: none !important;
	color: var(--md1812-roll-navy) !important;
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	padding: 0 !important;
}

.md1812-roll__yearbtn:focus-visible,
.md1812-roll__arrow:focus-visible,
.md1812-roll__dot:focus-visible,
.md1812-roll__all:focus-visible,
.md1812-roll__seelink:focus-visible {
	outline: 3px solid #ffb703;
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.md1812-roll__photos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--md1812-roll-gap);
	}

	.md1812-roll__seelink {
		margin-left: 0;
		flex-basis: 100%;
	}
}