/**
 * File Name: locator.css
 * Description: The little this plugin adds on top of the theme's own components.
 *
 *              The locator search section is the theme's `schools-map` component
 *              (assets/css/schools/schools-map.css) and the location detail page is its `locations`
 *              page set (assets/css/locations/*.css). Neither is repeated here.
 *
 *              What is left is only what those files do not cover: the plugin's own extras — the
 *              radius filter, the loading overlay, the result messages — a live Google map where the
 *              design frames a static image, and the imported body copy, which is richer than the
 *              three short columns the design was drawn around.
 *
 *              Everything is prefixed dcl- so it can never collide with a class the design files
 *              later define. The theme's own stylesheets are not edited: several developers work in
 *              that folder.
 * Developer: AG-0105
 * Created Date: 2026-07-30
 * Last Modified: 2026-08-21
 */

/* ===================================================================
   Location detail page — supplement to the theme's locations components
   =================================================================== */

/*
 * The design's about section is a three-column grid of short generated paragraphs. What renders here
 * instead is each location's own imported copy, which carries headings, lists and a video, so it
 * takes a single measured column. The grid stays in the markup so the theme keeps ownership of the
 * section's spacing.
 *
 * Selected on the column count rather than a class of our own, so the markup keeps the design's
 * class names: one column means it is imported copy, three means it is the design's layout.
 */
.loc-about__cols:has(> .loc-about__col:only-child) {
	display: block;
}

/*
 * Full width, not a reading measure. It was held to 80ch on the argument that long copy is easier to
 * read in a narrow column — true of prose, but this column also carries the section's own headings and
 * lists, and centred at 80ch inside the design's container it read as a stray block rather than as the
 * section it is. The client asked for the width the container gives it.
 */
.loc-about__cols:has(> .loc-about__col:only-child) > .loc-about__col {
	max-width: none;
	margin-inline: 0;
}

/*
 * Typography for the imported copy: it is editor content, so it arrives as plain HTML with headings,
 * lists and embeds that the design's short paragraphs never needed. Scoped to this section, so the
 * rules cannot reach editor content anywhere else.
 */
.loc-about .loc-about__col > * + * {
	margin-top: var(--sp20);
}

.loc-about .loc-about__col h2,
.loc-about .loc-about__col h3,
.loc-about .loc-about__col h4 {
	margin-top: var(--sp40);
	line-height: 1.3;
}

.loc-about .loc-about__col ul,
.loc-about .loc-about__col ol {
	padding-left: var(--sp25);
}

.loc-about .loc-about__col li + li {
	margin-top: var(--sp10);
}

.loc-about .loc-about__col blockquote {
	padding-left: var(--sp20);
	border-left: 3px solid var(--orange);
	font-style: italic;
}

.loc-about .loc-about__col img {
	max-width: 100%;
	height: auto;
}

/*
 * oEmbed hands back a fixed width and height, so without this the video overflows the column on
 * narrow screens.
 */
.loc-about .loc-about__col iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/*
 * The design frames a static map image; this is the live map in the same frame. The frame supplies
 * the padding, background and shadow, so only the aspect ratio the image would have given is needed.
 */
.locmap__frame .dcl-map {
	position: static;
	width: 100%;
	aspect-ratio: 1600 / 620;
}

@media (max-width: 767.98px) {
	.locmap__frame .dcl-map {
		aspect-ratio: 4 / 3;
	}
}

/*
 * The line under the map. The design has no paragraph here, so this is the plugin's own — held to a
 * reading measure and centred under the frame, because a single line running the full width of a
 * 1600px map reads as a stray sentence rather than as a caption to it.
 */
.dcl-locmap__text {
	max-width: 80ch;
	margin: var(--sp25) auto 0;
	text-align: center;
	color: var(--muted);
}

.dcl-locmap__text > * + * {
	margin-top: var(--sp15);
}

.dcl-locmap__text a {
	color: var(--orange);
	text-decoration: underline;
}

/* ===================================================================
   Locator search — supplement to the theme's schools-map component
   ===================================================================

   The layout, the search bar, the result list, the canvas and the popup card are all styled by
   assets/css/schools/schools-map.css in the theme. Nothing here repeats any of it.

   What remains below is only what that design file does not cover, either because the plugin adds
   the feature (radius filter, geolocation, loading overlay, result messages) or because a live
   Google map needs handling a static mock-up does not. Every class is prefixed dcl- so it cannot
   collide with a class the design file later defines. */

/* --- Radius filter, sitting inside .schools-map__field --- */

/* The mode select moved to locator-search-bar.css: the footer's search bar is on every page,
   and this file is not. */

/* The submit button keeps its look while a search runs; only the cursor says it is busy. */
.schools-map__search[aria-busy="true"] .schools-map__submit {
	opacity: .75;
	cursor: progress;
}

/* --- Selected result --- */

/*
 * The design already tints the active item; this adds the accent edge that marks which one the map
 * pin belongs to. Drawn as an inset shadow rather than a border so the text does not shift by 3px
 * when an item becomes active, and so the design's own padding is left alone. The item already has
 * `transition: var(--transition)` from the design, so the edge fades in with the tint.
 */
.schools-map__item.is-active {
	box-shadow: inset 3px 0 0 var(--orange);
}

/*
 * The items are focusable (they pair with the map pins), and the design styles hover and .is-active
 * but not :focus. Without this a keyboard user gets no feedback at all on the list.
 */
.schools-map__item:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: -2px;
}

/* --- Result messages --- */

.dcl-message {
	padding: 14px 16px;
	margin: 0 0 var(--sp20);
	background: var(--cdf7);
	border-left: 3px solid var(--muted);
}

.dcl-message--error {
	background: #fdf1eb;
	border-left-color: var(--orange);
	color: #8c3202;
	margin-top: calc(-1 * var(--sp20));
}

/* --- Layout states --- */

/*
 * Without an API key there is no map, so the list takes the full width and stops being a fixed
 * height scroll panel — there is nothing beside it to match.
 */
.dcl-layout--no-map {
	grid-template-columns: minmax(0, 1fr);
}

.dcl-layout--no-map .schools-map__list {
	max-height: none;
	overflow-y: visible;
}

/*
 * A search that found nothing hides the layout rather than removing it, so the map instance inside
 * stays alive for the next search — re-creating it would be another billable map load.
 */
.dcl-layout--empty {
	display: none;
}

/* --- The live map inside the design's canvas --- */

/*
 * z-index: 0 rather than auto on purpose — it makes the canvas a stacking context, which traps the
 * very high z-index values Google Maps uses on its own tiles and controls. Without it those paint
 * over the loading overlay.
 *
 * The canvas already carries the aspect ratio, the placeholder background and overflow clipping,
 * so nothing else is needed from here.
 */
.schools-map__canvas {
	z-index: 0;
}

/*
 * The map fills the canvas rather than replacing it. The Maps API empties the element it mounts on,
 * so the loader has to be a sibling of the map, not a child of it.
 */
.dcl-map {
	position: absolute;
	inset: 0;
}

/* --- Search in progress --- */

/*
 * Over the map only. The list is left alone so it stays readable and scrollable while a search
 * runs — covering the whole layout made a fast search feel heavier than it is.
 */
.dcl-loader {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp10);
	/* Light wash: the map underneath stays visible, it just recedes. */
	background: rgba(255, 255, 255, .6);
}

.schools-map__layout.is-loading .dcl-loader {
	display: flex;
}

/*
 * A search from an empty state has nothing to show yet, so give the layout height while it loads
 * and beat --empty's display:none — otherwise the very first search would show no feedback at all.
 */
.schools-map__layout.is-loading {
	display: grid;
	min-height: 220px;
}

.dcl-spinner {
	width: 28px;
	height: 28px;
	border: 3px solid rgba(0, 0, 0, .12);
	border-top-color: var(--orange);
	border-radius: 50%;
	animation: dcl-spin .7s linear infinite;
}

.dcl-loader__text {
	font-size: var(--f16);
	font-weight: 600;
	color: var(--text);
}

@keyframes dcl-spin {
	to {
		transform: rotate(360deg);
	}
}

/*
 * Results ease in rather than snapping into place, with a short stagger so the list reads as
 * filling up. Applied by the script after each swap.
 */
.schools-map__list.is-fresh .schools-map__item {
	animation: dcl-fade-in .3s ease both;
}

.schools-map__list.is-fresh .schools-map__item:nth-child(2) {
	animation-delay: .04s;
}

.schools-map__list.is-fresh .schools-map__item:nth-child(3) {
	animation-delay: .08s;
}

.schools-map__list.is-fresh .schools-map__item:nth-child(4) {
	animation-delay: .12s;
}

.schools-map__list.is-fresh .schools-map__item:nth-child(n + 5) {
	animation-delay: .16s;
}

@keyframes dcl-fade-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

/* Motion can trigger nausea and migraines: pulse instead of spinning, and skip the slide. */
@media (prefers-reduced-motion: reduce) {
	.dcl-spinner {
		animation: dcl-pulse 1.4s ease-in-out infinite;
	}

	.schools-map__list.is-fresh .schools-map__item {
		animation: none;
	}

	@keyframes dcl-pulse {
		50% {
			opacity: .35;
		}
	}
}

/* --- Google's InfoWindow, dressed as the design's popup card --- */

/*
 * The card body reuses the design's popup element classes, so only the wrapper is defined here.
 * .schools-map__popup itself is not used: it is absolutely positioned for the static mock-up,
 * whereas Google positions its own container.
 */
/*
 * The padding is set here rather than on Google's own boxes. The API writes padding-bottom: 0 and
 * padding-inline-end: 0 inline on .gm-style-iw-c, so the last line of the card sat flush against the
 * bottom edge — measured at 0px of clearance. Only bottom and right are added: the 12px of left
 * padding Google applies is shared with the title row above, so matching it here keeps the two
 * aligned.
 */
.dcl-popup {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 190px;
	padding-right: var(--sp25);
	padding-bottom: var(--sp25);
}

.dcl-popup .schools-map__name {
	margin-bottom: var(--sp10);
	font-size: var(--f16);
}

/*
 * Google's close button is a masked span: the API writes its own circled-X mask, plus width and
 * height, inline on the element. Feeding our own X through the same mask replaces the icon without
 * touching the button Google owns — the mask only reads the shape's alpha, so the colour still comes
 * from background-color. !important is required on the mask because the value it overrides is inline.
 */
.schools-map__canvas .gm-ui-hover-effect > span,
.locmap__frame .gm-ui-hover-effect > span {
	--dcl-close-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2017%2017%22%3E%3Cpath%20d=%22M14.3105%200C14.3544%200%2014.3971%200.016535%2014.4287%200.046875L16.418%202.03711C16.4825%202.10358%2016.4803%202.21107%2016.418%202.27344L10.8115%207.87891L10.458%208.23242L16.418%2014.1924C16.4804%2014.2548%2016.4826%2014.3622%2016.418%2014.4287L14.4307%2016.416C14.3988%2016.4476%2014.3554%2016.4658%2014.3105%2016.4658C14.2658%2016.4658%2014.2222%2016.4475%2014.1904%2016.416L8.58594%2010.8096L8.23242%2010.4561L7.87891%2010.8096L2.27441%2016.416C2.24266%2016.4475%202.19998%2016.4657%202.15527%2016.4658C2.11047%2016.4658%202.06698%2016.4476%202.03516%2016.416L0.047852%2014.4287C-0.016897%2014.3623%20-0.014577%2014.2548%200.047852%2014.1924L6.00781%208.23242L5.6543%207.87891L0.049805%202.27344C0.03432%202.25797%200.021076%202.23897%200.012695%202.21875C0.004403%202.19867%200.000034%202.177%200%202.15527C0%202.13339%200.004315%202.11104%200.012695%202.09082L0.049805%202.03711L2.03711%200.047852L2.03613%200.046875C2.06779%200.016291%202.1112%200%202.15527%200C2.19984%200.000072%202.24269%200.017543%202.27441%200.048828L7.87891%205.6543L8.23242%206.00781L14.1914%200.048828C14.2232%200.017559%2014.266%200.000021%2014.3105%200Z%22/%3E%3C/svg%3E");

	width: 17px !important;
	height: 17px !important;
	margin: 0;
	background-color: var(--orange);
	-webkit-mask: var(--dcl-close-icon) center / contain no-repeat !important;
	mask: var(--dcl-close-icon) center / contain no-repeat !important;
}

/*
 * The name is fed to the InfoWindow's own header row (setHeaderContent) so it shares a line with
 * the close button. These rules style that row and remove the padding Google leaves above and
 * below it, which is what otherwise reads as a gap over the title.
 */
.schools-map__canvas .gm-style-iw-chr,
.locmap__frame .gm-style-iw-chr {
	align-items: center;
	min-height: 0;
	margin-bottom: var(--sp20);
}
.schools-map__address {
			font-family: var(--font-montserrat);
}
.gm-style .gm-style-iw-c .dcl-popup {
	gap: var(--sp15);
}

.gm-style .gm-style-iw-c .dcl-popup .schools-map__phone {
	margin: 0;
}

.gm-style .gm-style-iw-c .dcl-popup address.schools-map__address {
	margin: 0;
}
/*
 * Only the title cell is restyled. The close button keeps its own width, because overriding it
 * pushed the button past the popup's right edge.
 */
.schools-map__canvas .gm-style-iw-ch,
.locmap__frame .gm-style-iw-ch {
	padding: 0 8px 0 0;
	font-family: var(--font-montserrat);
	font-size: var(--f20);
	font-weight: 700;
	line-height: 1.35;
	text-transform: uppercase;
	color: var(--text);
}

/*
 * Closes the band Google leaves between the header row and the body, and stops the popup showing
 * scrollbars it has no use for.
 *
 * The API sets overflow:scroll inline on this box, not auto, so Windows draws arrow scrollbars on
 * both axes even though nothing overflows — measured on the live page, the content is 97px tall
 * inside a 435px box. auto keeps the ability to scroll if a very long address ever needs it, while
 * hidden would risk clipping instead. !important is required because the value it overrides is
 * inline.
 */
.schools-map__canvas .gm-style-iw-d,
.locmap__frame .gm-style-iw-d {
	padding-top: 0;
	overflow: auto !important;
}

/*
 * The API moves focus into the popup on open, so the first link shows a focus ring. That is wanted
 * for keyboard users — it just needs to hug the text rather than stretch the full width.
 */
.schools-map__canvas .dcl-popup a:focus-visible,
.locmap__frame .dcl-popup a:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 2px;
	border-radius: 2px;
}



/* ===================================================================
   THE MAP'S OWN DOTS AND CARD

   This page used to hand its markers and its popup to Google: teardrop
   pins and an InfoWindow, dressed up with the overrides further up this
   file. It now draws both itself, through the same overlay the home
   page's map module uses — locator-map-shared.js — so the two maps are
   one map with two sets of contents rather than two that were meant to
   look alike.

   The behaviour is shared; these are the clothes. They deliberately
   restate the values the design gives the home page's card, because
   that card is the theme's markup styled by the theme's own stylesheet
   and this one is the plugin's. If the design's card changes, this
   changes with it.
   =================================================================== */

/* Once tiles have been drawn once, the base underneath them becomes the
   land grey rather than the dark placeholder: Google paints it wherever
   a tile has not arrived, and there is always one in flight while the
   camera moves. */
#dc-map.is-drawn {
	background-color: #d7d7d7;
}

/* The overlay pane Google draws the dots into. It is positioned by the
   API, so it takes no coordinates of its own — and must not swallow
   drags meant for the map. The dots and the card take their clicks back
   below. */
.schools-map__pins {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}

.schools-map__pin,
.schools-map__card {
	pointer-events: auto;
}

.schools-map__pin {
	position: absolute;
	/* left and top are set per dot by the overlay, from the map's own projection */
	width: 14px;
	height: 14px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--orange);
	/* the dot marks a point, so it sits centred on it rather than beside it */
	transform: translate(-50%, -50%);
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease;

	/* A dot is pressed, never double-tapped to zoom, and waiting 300ms to
	   find that out made the first tap feel ignored. */
	touch-action: manipulation;
}

.schools-map__pin:hover,
.schools-map__pin:focus-visible {
	transform: translate(-50%, -50%) scale(1.35);
	box-shadow: 0 0 0 4px rgba(230, 46, 0, .25);
}

/* The dot whose card is open, picked out from the other eighty-odd. */
.schools-map__pin.is-open {
	background: var(--white, #fff);
	box-shadow: 0 0 0 4px var(--orange);
}

@media (max-width: 767.98px) {

	/* Fingers are wider than 14px. The dot keeps its drawn size and gains
	   an invisible target around it rather than growing, which would crowd
	   the clusters around Chicago into one blob. */
	.schools-map__pin::after {
		content: "";
		position: absolute;
		inset: -9px;
	}
}

/* ---------- the card ---------- */

.schools-map__card {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp10);
	width: 270px;
	max-width: 80vw;
	padding: var(--sp25);
	background: var(--white, #fff);
	color: var(--text, #1b1b1b);

	/* Lifted clear of the dot it belongs to, which the overlay has already
	   put it on top of. */
	transform: translate(-50%, calc(-100% - 16px));
	filter: drop-shadow(0 10px 30px rgba(20, 20, 20, .35));
}

.schools-map__card[hidden] {
	display: none;
}

/* Nudged away from its dot to stay inside the map, so the tail would lie to us. */
.schools-map__card.is-shifted::after {
	display: none;
}

/* the pointer tail down to the dot */
.schools-map__card::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 0;
	border-inline: 14px solid transparent;
	border-top: 18px solid var(--white, #fff);
	transform: translateX(-50%);
}

.schools-map__card .schools-map__name {
	margin: 0;
	font-size: var(--f18);
}

.schools-map__card .schools-map__address,
.schools-map__card .schools-map__phone,
.schools-map__card .schools-map__distance {
	margin: 0;
}

/* Near the edges of the map the card would hang off the panel, so it
   swings inward and its tail follows, still pointing at the dot. */
.schools-map__card.is-left {
	transform: translate(-12%, calc(-100% - 16px));
}

.schools-map__card.is-right {
	transform: translate(-88%, calc(-100% - 16px));
}

.schools-map__card.is-left::after {
	left: 12%;
}

.schools-map__card.is-right::after {
	left: 88%;
}

/* A dot near the top of the map has no room above it, so the card drops
   below and the tail turns over. */
.schools-map__card.is-below {
	transform: translate(-50%, 16px);
}

.schools-map__card.is-below::after {
	top: auto;
	bottom: 100%;
	border-top: 0;
	border-bottom: 18px solid var(--white, #fff);
}

/* A dot in a top corner earns both swings at once. Each rule above
   writes the whole transform, so without these the later one would drop
   the other's horizontal offset while the tail kept following it — the
   card back at centre, the tail out at its edge pointing at nothing. */
.schools-map__card.is-below.is-left {
	transform: translate(-12%, 16px);
}

.schools-map__card.is-below.is-right {
	transform: translate(-88%, 16px);
}

/*
 * On a phone the card has to fit inside a map that is only about 260px tall, and it did not: at
 * 200px wide every line wrapped, which pushed the card to roughly the full height of the map. It
 * then hung off whichever edge it was placed against, and the "View Location" link — the last thing
 * in the card — was the part that ended up outside, behind the page. Reported as the popup opening
 * without its link.
 *
 * So the card is made wider rather than narrower. It still clears the map's own width, and the
 * extra room takes the address off a third line; the tighter padding and gap do the rest.
 */
@media (max-width: 767.98px) {
	.schools-map__card {
		width: 240px;
		gap: 6px;
		padding: 14px 16px;
	}
}

/* ---------- the label a dot shows on hover ---------- */

/* The same label the home page's map shows, because they are meant to be the same map — the
   shared overlay decides when it appears and where it sits, and this only draws it.

   Deliberately not the white card in miniature: charcoal keeps the two apart at a glance, so
   the thing that only names a centre never reads as the card that also carries the address,
   the phone and the link. */
.schools-map__dot-hint {
	position: absolute;
	/* left and top are written per dot by the overlay, from the map's own projection */
	z-index: 1;
	transform: translate(-50%, calc(-100% - 14px));

	display: flex;
	flex-direction: column;
	gap: 2px;

	padding: 6px 10px;
	border-radius: 6px;
	background: var(--charcoal-2, #2b2b2b);
	color: var(--white, #fff);
	text-align: center;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .25);

	/* It follows the pointer's dot and is never pressed: taking the pointer would mean the
	   label sitting over the dot that opened it, stealing the mouseleave and leaving itself up. */
	pointer-events: none;
}

.schools-map__dot-hint[hidden] {
	display: none;
}

/* the tail, pointing back down at the dot */
.schools-map__dot-hint::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 0;
	border-inline: 6px solid transparent;
	border-top: 7px solid var(--charcoal-2, #2b2b2b);
	transform: translateX(-50%);
}

.schools-map__dot-hint-name {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

/* The town and state, quieter than the name. rgba rather than one of the grey tokens, because
   those are drawn for the white card and this backing is the dark one. */
.schools-map__dot-hint-place {
	font-size: 11px;
	line-height: 1.3;
	color: rgba(255, 255, 255, .75);
}

.schools-map__dot-hint-place[hidden] {
	display: none;
}

/* Near the edges of the map the label swings inward and its tail follows, still pointing at
   the dot. The same classes placeCard() gives the card. */
.schools-map__dot-hint.is-left {
	transform: translate(-12%, calc(-100% - 14px));
}

.schools-map__dot-hint.is-right {
	transform: translate(-88%, calc(-100% - 14px));
}

.schools-map__dot-hint.is-left::after {
	left: 12%;
}

.schools-map__dot-hint.is-right::after {
	left: 88%;
}

/* A dot near the top of the map has no room above it, so the label drops below and the tail
   turns over. */
.schools-map__dot-hint.is-below {
	transform: translate(-50%, 14px);
}

.schools-map__dot-hint.is-below.is-left {
	transform: translate(-12%, 14px);
}

.schools-map__dot-hint.is-below.is-right {
	transform: translate(-88%, 14px);
}

.schools-map__dot-hint.is-below::after {
	top: auto;
	bottom: 100%;
	border-top: 0;
	border-bottom: 7px solid var(--charcoal-2, #2b2b2b);
}

/* Nudged clear of an edge, the tail is no longer aimed at its dot, and a tail pointing at the
   wrong place is worse than none. The card drops its the same way. */
.schools-map__dot-hint.is-shifted::after {
	display: none;
}

/* On a phone the map is short and the dots are dense, so a long centre name would run the
   label off both sides. It wraps instead of stretching. */
@media (max-width: 767.98px) {
	.schools-map__dot-hint {
		max-width: 60vw;
		white-space: normal;
	}
}

/* -------------------------------------------------------------------------
 * Seven-days-a-week yard
 *
 * The badge marks the branches whose yard runs all seven days for ten hours
 * or more. It is the only thing on a result card that is not address, phone
 * or distance, so it is given a tinted panel rather than another line of
 * text — a visitor scanning the list should be able to spot it without
 * reading. The icon is a placeholder until the client supplies artwork, so
 * nothing here depends on its shape beyond a fixed box.
 * ------------------------------------------------------------------------- */
.dcl-extended {
	display: flex;
	gap: 10px;
	align-items: center;
}

.schools-map__badge.dcl-extended {
	margin: 10px 0 10px 0;
	padding: 4px 8px;
	border-radius: 6px;
	background: rgba(230, 83, 0, 0.08);
	color: var(--orange, #e65300);
	font-weight: 600;
	line-height: 1.3;
}

.dcl-extended__icon {
	flex: 0 0 auto;
	display: inline-flex;
	width: 24px;
	height: 24px;

	/*
	 * The artwork paints with currentColor, so the colour is set here rather than in the file. On the card
	 * the panel is already orange and this only restates it; on the detail page the text around it is
	 * black, and an inherited black icon would not read as a badge at all.
	 */
	color: var(--orange, #e65300);
}

.dcl-extended__icon svg {
	width: 100%;
	height: 100%;
}

/* On the detail page the badge is one item in the yard list, so it keeps that
   list's layout and only the note underneath is new. */
.school-info__item.dcl-extended {
	align-items: flex-start;
}

.dcl-extended__note {
	display: block;
	margin-top: 4px;
	font-weight: 400;
}