/*
Theme Name: Cherokee Antique Row
Theme URI: https://cherokeeantiquerow.net/
Author: Cherokee Antique Row volunteers
Description: Theme for cherokeeantiquerow.net. A guide to the six blocks of Cherokee
  Street between Jefferson and Lemp: the businesses, the map and what is on.
  Pages carried over from the static site are still styled by assets/css/legacy.css.
Version: 0.6.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cherokeeantiquerow
*/

/*
 * This file styles the reworked design and nothing else.
 *
 * It is enqueued only for pages drawn by header.php - the carried-over pages ask
 * for header-legacy.php and get assets/css/legacy.css instead. The routing lives
 * in inc/legacy.php; see car_route_assets_by_header().
 */

/* -----------------------------------------------------------------------------
 * Tokens
 *
 * The brand colour is the navy the static site was built on, kept at its exact
 * value by the owner's decision. Contrast on the page surface is 12.28:1, well
 * clear of anything required.
 *
 * One measured caveat, recorded so nobody rediscovers it as a bug: it sits 14.4
 * from the violet used for the Beauty and Services category in OKLab (x100),
 * just under the 15 floor where two colours stop being reliably distinguishable,
 * and the masthead and the map markers do share a screen on the home page. If
 * that ever reads as a clash, the fix is to move the category colour and
 * revalidate the five as a set - not to alter this one.
 *
 * There is no light tint of it: lightening walks straight into the band the
 * category colours occupy.
 * -------------------------------------------------------------------------- */

:root {
	--car-brand: #003366;
	--car-brand-ink: #ffffff;

	--car-surface: #fcfcfb;
	--car-ink: #0b0b0b;
	--car-ink-2: #52514e;
	--car-muted: #898781;
	--car-line: #e1e0d9;

	--car-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--car-text-s: 13px;
	--car-text-m: 15px;
	--car-text-l: 17px;
	--car-text-xl: 22px;
	--car-text-xxl: 32px;

	--car-gap: 20px;
	--car-width: 1180px;
	--car-radius: 8px;
}

/* Base ------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--car-surface);
	color: var(--car-ink);
	font-family: var(--car-font);
	font-size: var(--car-text-m);
	line-height: 1.5;
}

a {
	color: var(--car-brand);
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--car-brand);
	outline-offset: 2px;
}

h1,
h2,
h3 {
	margin: 12px 0;
	line-height: 1.2;
}

h1 { font-size: var(--car-text-xxl); }
h2 { font-size: var(--car-text-xl); }
h3 { font-size: var(--car-text-l); }

img {
	max-width: 100%;
	height: auto;
}
table {
	border:1px solid #000;
	border-collapse: collapse;
}
table th, table td {
	padding: 3px 5px;
	border:1px solid #000;
}

.car-shell {
	max-width: var(--car-width);
	margin: 0 auto;
	padding: 0 16px;
}

/* Sends keyboard users past the navigation; visible only once focused. */
.car-skip {
	position: absolute;
	left: -9999px;
}

.car-skip:focus {
	left: 8px;
	top: 8px;
	z-index: 10;
	padding: 8px 12px;
	background: var(--car-brand);
	color: var(--car-brand-ink);
}

/* Masthead --------------------------------------------------------------- */

/* The strip above the masthead ------------------------------------------- */

/* A shade darker than the masthead rather than a contrasting band: it should
   read as the top edge of the header, not as a second bar competing with it. */
.car-topbar {
	background: #002550;
	color: rgba(255, 255, 255, 0.85);
	font-size: 12px;
}

.car-topbar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
	max-width: var(--car-width);
	margin: 0 auto;
	padding: 5px 16px;
}

.car-topbar-inner p {
	margin: 0;
}

.car-topbar-temp {
	font-weight: 600;
	color: #ffffff;
}

.car-topbar-sep {
	opacity: 0.5;
}

/* Kept next to the weather it qualifies rather than pushed to the far edge. A
   warning works by sitting beside its subject; nine hundred pixels away, in a
   corner the eye has already left, it is decoration. Told apart by weight
   instead of by position. */
.car-topbar-rain {
	font-weight: 600;
	color: #ffffff;
}

/* Narrow screens keep all three and let them wrap. Nothing is dropped: the
   phone's own status bar shows the reader's time, which is precisely the time
   this strip is not about, so hiding the clock here would throw away the one
   thing a visitor from out of state cannot get anywhere else on the page. */
@media (max-width: 560px) {
	.car-topbar-inner {
		gap: 2px 12px;
	}

	/* Wrapped to its own line, so pinning it right would leave it stranded
	   under a gap. */
	.car-topbar-rain {
		margin-left: 0;
	}
}

.car-masthead {
	background: var(--car-brand);
	color: var(--car-brand-ink);
}

/* Centred, not baseline-aligned: the row now holds a 48px picture beside a line
   of text, and baseline alignment would hang the menu off the lettering inside
   the logo rather than level with the name.
 *
 * The vertical padding is 8px rather than 16 to pay for that picture. The line
 * was 33px of text inside 16px padding, 65px in all; it is now 48px of logo
 * inside 8px, which is 64. The masthead is the same height it always was, which
 * is the whole point - the hero below it must not be pushed down the page. */
.car-masthead-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px var(--car-gap);
	max-width: var(--car-width);
	margin: 0 auto;
	padding: 8px 16px;
}

/* Rendered as <h1> on the front page and <p> everywhere else - see header.php.
   Every property a heading would otherwise bring is pinned here, line height
   included, so the two tags are indistinguishable on screen. */
.car-wordmark {
	margin: 0;
	font-size: var(--car-text-xl);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.01em;
}

.car-wordmark a,
.car-menu a {
	color: inherit;
	text-decoration: none;
}

/* The wordmark is deliberately left out: it is the one link on the page whose
   destination nobody has to guess, and an underline running under the mark and
   the name together makes the header look like a mistake. The menu keeps its
   underline - those items do need to announce themselves. */
.car-menu a:hover {
	text-decoration: underline;
}

.car-wordmark a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/* 48px is the smallest height at which the three ribbons separate and it is
   visible that something is written on them. Below that the mark collapses into
   a red smudge: the lettering inside it is about five per cent of its height, so
   at 32px the capitals are under two pixels and cannot resolve at all.
 *
 * The square cut is used rather than the original portrait one. Height is what
 * the masthead can spare and width is what the words needed, and the square
 * version widens the ribbons without touching the lettering - so at the same
 * 48px it gives the words half again as many pixels across. */
.car-wordmark-logo {
	display: block;
	flex: none;
	width: auto;
	height: 48px;
}

/* Left for the map legend and anywhere else a category mark is drawn inline. */
.car-wordmark-icon {
	display: flex;
	flex: none;
	/* Set against the cap height rather than the line box, so the mark sits level
	   with the lettering instead of towering over it. */
	width: 1.05em;
	height: 1.05em;
}

.car-wordmark-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.car-masthead a:focus-visible {
	outline-color: var(--car-brand-ink);
}

.car-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--car-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--car-text-m);
}

.car-menu .current-menu-item a {
	text-decoration: underline;
}

/* Events strip ----------------------------------------------------------- */

.car-events {
	padding: 8px 0 28px;
}

.car-events-head,
.car-press-head,
.car-visit-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--car-gap);
	margin-bottom: 12px;
}

.car-events-head h2,
.car-press-head h2,
.car-visit-head h2 {
	margin: 0;
}

.car-events-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.car-event-link {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding: 14px;
	border: 1px solid var(--car-line);
	border-radius: var(--car-radius);
	color: inherit;
	text-decoration: none;
}

.car-event-link:hover {
	border-color: var(--car-muted);
}

.car-event-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: none;
	min-width: 48px;
	color: var(--car-brand);
	line-height: 1;
}

.car-event-day {
	font-size: var(--car-text-xxl);
	font-weight: 700;
}

.car-event-month {
	margin-top: 3px;
	font-size: var(--car-text-s);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.car-event-body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
	/* Takes the slack so the chip stays pinned to the right edge whatever the
	   name's length. */
	flex: 1;
}

.car-event-chip {
	display: block;
	flex: none;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: 6px;
}

.car-event-chip img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.car-event-name {
	font-size: var(--car-text-m);
	font-weight: 600;
}

/* Colour carries the state, but the word is always there too: "Ended" has to be
   readable without relying on the reader telling one hue from another. Each pair
   was measured - 7.2, 6.2 and 8.1 to one against its own fill. */
.car-event-state {
	align-self: flex-start;
	padding: 1px 9px;
	border-radius: 999px;
	font-size: var(--car-text-s);
	font-weight: 600;
	white-space: nowrap;
}

.car-event-state--upcoming {
	background: #e8f0fa;
	color: #1b4f8a;
}

.car-event-state--ongoing {
	background: #edfaef;
	color: #0a6b2d;
}

.car-event-state--past {
	background: #fceeee;
	color: #8a1f2b;
}

/* Events page ------------------------------------------------------------ */

.car-events-page {
	padding-bottom: 8px;
}

.car-events-heading {
	margin: 28px 0 12px;
	font-size: var(--car-text-l);
}

.car-events-heading:first-child {
	margin-top: 0;
}

.car-events-none {
	margin: 0;
	color: var(--car-ink-2);
}

.car-event-rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.car-event-row {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px 0;
	border-top: 1px solid var(--car-line);
}

.car-event-row:last-child {
	border-bottom: 1px solid var(--car-line);
}

/* Finished events stay legible but stop competing with what is still to come. */
.car-event-row.is-past .car-event-date,
.car-event-row.is-past .car-event-thumb img {
	opacity: 0.55;
}

.car-event-row .car-event-date {
	min-width: 62px;
}

.car-event-year {
	font-size: var(--car-text-s);
	color: var(--car-muted);
}

.car-event-row .car-event-body {
	flex: 1;
	min-width: 0;
}

.car-event-row .car-event-name {
	margin: 0 0 6px;
	font-size: var(--car-text-l);
}

.car-event-row .car-event-name a {
	color: var(--car-ink);
	text-decoration: none;
}

.car-event-row .car-event-name a:hover {
	text-decoration: underline;
}

/* Separated by rule rather than punctuation typed into the markup: any of these
   may be missing, and a stray bullet is what that costs. */
.car-event-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 0;
	font-size: var(--car-text-s);
	color: var(--car-ink-2);
}

.car-event-summary {
	margin: 8px 0 0;
	color: var(--car-ink-2);
}

.car-event-thumb {
	display: block;
	flex: none;
	width: 140px;
}

/* Whole poster, not a crop of one. Event artwork is usually portrait and carries
   its information in the artwork - a fixed height with object-fit: cover would
   cut the title off the top of half of them. */
.car-event-thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--car-radius);
}

@media (max-width: 640px) {
	.car-event-row {
		flex-wrap: wrap;
	}

	/* Full width would make a portrait poster taller than the phone. */
	.car-event-thumb {
		order: -1;
		width: 45%;
	}
}

/* Single event ----------------------------------------------------------- */

.car-event-page {
	padding-top: 24px;
	padding-bottom: 48px;
}

/* Same proportions as a business page: reading column, then a narrow rail. */
.car-event-page-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 28px;
	align-items: start;
}

.car-event-page-main {
	min-width: 0;
}

.car-event-page-text {

}

/* Low on purpose. This map answers "whereabouts on the street", not "how do I
   drive there" - it needs to be looked at, not explored. */
.car-event-map-box {
	margin: 0 0 20px;
}

.car-event-map {
	height: 200px;
	border: 1px solid var(--car-line);
	border-radius: var(--car-radius);
}

.car-event-map-name {
	margin: 8px 0 0;
	font-size: var(--car-text-s);
	font-weight: 600;
	color: var(--car-ink-2);
}

.car-event-page-aside {
	position: sticky;
	top: 16px;
}

@media (max-width: 860px) {
	.car-event-page-body {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The poster ahead of the detail on a phone: it is the announcement, and it
	   is what tells somebody at a glance whether they care. */
	.car-event-page-aside {
		position: static;
		order: -1;
		max-width: 340px;
	}
}

.car-event-page-back {
	margin: 0 0 12px;
	font-size: var(--car-text-s);
}

.car-event-page-back a {
	text-decoration: none;
}

.car-event-page-back a:hover {
	text-decoration: underline;
}

/* Loud on purpose: a cancellation is the one thing on this page that can send
   somebody home again. */
.car-event-page-notice {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-left: 4px solid #8a1f2b;
	background: #fceeee;
	color: #8a1f2b;
	font-weight: 600;
}

.car-event-page-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 0 0 16px;
}

.car-event-page-when {
	font-size: var(--car-text-l);
	font-weight: 600;
}

.car-event-page-facts {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 4px 16px;
	margin: 0 0 20px;
	padding: 14px 0;
	border-top: 1px solid var(--car-line);
	border-bottom: 1px solid var(--car-line);
	font-size: var(--car-text-s);
}

.car-event-page-facts dt {
	color: var(--car-muted);
}

.car-event-page-facts dd {
	margin: 0;
}

/* Free is good news and gets to look like it, without shouting. */
.car-event-free {
	font-weight: 600;
	color: #0a6b2d;
	background: #edfaef;
	padding: 1px 9px;
   border-radius: 999px;
}

.car-event-page-poster {
	margin: 0 0 20px;
}

.car-event-page-poster img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--car-radius);
}

.car-event-page-poster figcaption {
	margin-top: 6px;
	font-size: var(--car-text-s);
	color: var(--car-ink-2);
}

/* Actions ---------------------------------------------------------------- */

.car-event-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin: 0 0 20px;
}

.car-event-calendar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.car-event-calendar-label {
	font-size: var(--car-text-s);
	color: var(--car-muted);
}

.car-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--car-line);
	border-radius: 6px;
	background: #f2f1ec;
	font-size: var(--car-text-s);
	line-height: 1;
	text-decoration: none;
	color: var(--car-ink);
}

.car-btn:hover {
	border-color: var(--car-muted);
	background: #eceae3;
	color: var(--car-ink);
}

.car-btn-icon {
	display: flex;
	flex: none;
	width: 16px;
	height: 16px;
}

.car-btn-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	/* Each mark in its own colour against the same neutral button. Tinting the
	   whole button with the brand instead would give three loud rectangles
	   competing with the one filled button that actually matters. */
	fill: var(--car-cal, currentColor);
}

/* One filled button among outlined ones: going to the organiser's own page is
   the thing most people want, adding a diary entry is the thing a few do. */
.car-btn--primary {
	border-color: var(--car-brand);
	background: var(--car-brand);
	color: var(--car-brand-ink);
	font-weight: 600;
}

.car-btn--primary:hover {
	color: var(--car-brand-ink);
	opacity: 0.92;
}

@media (max-width: 560px) {
	.car-event-page-facts {
		grid-template-columns: 1fr;
	}

	.car-event-page-facts dd {
		margin-bottom: 8px;
	}
}

/* Pagination ------------------------------------------------------------- */

.car-pagination {
	margin: 24px 0 0;
}

/* Qualified by element throughout. paginate_links() puts the class page-numbers
   on the list AND on every link inside it, so an unqualified .page-numbers rule
   lays out the list and then strips the padding off the buttons - which is
   exactly how this looked before. */
.car-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.car-pagination li {
	display: flex;
	margin: 0;
}

.car-pagination a.page-numbers,
.car-pagination span.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--car-line);
	border-radius: 6px;
	background: var(--car-surface);
	font-size: var(--car-text-s);
	line-height: 1;
	text-decoration: none;
	color: var(--car-ink-2);
}

.car-pagination a.page-numbers:hover {
	border-color: var(--car-muted);
	color: var(--car-ink);
}

/* Filled, not merely tinted: the page you are on has to be obvious without
   relying on telling one shade of grey from another. */
.car-pagination span.current {
	border-color: var(--car-ink);
	background: var(--car-ink);
	color: #fff;
}

/* The ellipsis is not a button and must not be dressed as one. */
.car-pagination span.dots {
	min-width: 0;
	padding: 0 4px;
	border-color: transparent;
	background: none;
	color: var(--car-muted);
}

.car-pagination a.prev,
.car-pagination a.next {
	font-weight: 600;
	color: var(--car-brand);
}

/* Press ------------------------------------------------------------------ */

.car-press {
	padding: 36px 0 8px;
}

.car-press-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--car-gap);
}

.car-quote {
	margin: 0;
	padding-left: 16px;
	border-left: 3px solid var(--car-brand);
}

.car-quote blockquote {
	margin: 0 0 8px;
	font-size: var(--car-text-l);
	line-height: 1.45;
}

.car-quote figcaption {
	color: var(--car-ink-2);
	font-size: var(--car-text-s);
}

/* Plain pages: history, privacy ------------------------------------------- */

.car-article {
	padding-bottom: 24px;
}

.car-article-body h2 {
	margin-top: 32px;
}

.car-article-body p {
	margin: 0 0 14px;
}

.car-article-body ul {
	margin: 0 0 14px;
	padding-left: 20px;
}

.car-article-body figure {
	margin: 24px 0;
}

.car-article-body figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--car-radius);
}

.car-article-body figcaption {
	margin-top: 8px;
	color: var(--car-ink-2);
	font-size: var(--car-text-s);
}

/* Sponsors and information partners --------------------------------------- */

.car-partners {
	padding: 4px 0 44px;
}

.car-partners-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Logos arrive at whatever size and shape their owner drew them. Capping the
   height rather than the width is what makes a wide wordmark and a square badge
   sit level with each other instead of one towering over the row. */
.car-partner-logo {
	display: block;
	width: auto;
	max-width: 200px;
	height: auto;
	max-height: 56px;
	object-fit: contain;
}

.car-partner-name {
	font-weight: 600;
}

.car-partner-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.car-partner-link:hover {
	text-decoration: underline;
}

.car-partner-link:hover .car-partner-logo {
	/* A logo cannot be underlined, so it answers the cursor another way. */
	opacity: 0.8;
}

/* "Wrong or missing info?" ------------------------------------------------ */

.car-report {
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--car-line);
}

.car-report-link {
	font-size: var(--car-text-s);
	font-weight: 600;
}

/* Hero -------------------------------------------------------------------- */

/* Edge to edge, and pulled up by the top padding .car-content puts on every
   page, so the band meets the masthead instead of floating below it. */
.car-hero {
	margin: -24px 0 24px;
}

.car-hero img {
	display: block;
	width: 100%;
	/* Tall enough to be a photograph, short enough that the directory is still
	   the first thing on the page on a laptop. No radius: a full-bleed band with
	   rounded corners reads as a card that has outgrown its container. */
	height: clamp(200px, 28vw, 400px);
	object-fit: cover;
}

/* About the Row ----------------------------------------------------------- */

.car-about {
	padding: 28px 0 8px;
}

.car-about-body p {
	margin: 0 0 12px;
}

.car-about-more {
	margin: 0 0 4px;
	font-weight: 600;
}

.car-about-association {
	margin: 16px 0 0;
	padding-left: 16px;
	border-left: 3px solid var(--car-line);
	color: var(--car-ink-2);
	font-size: var(--car-text-s);
}

/* Getting here ----------------------------------------------------------- */

.car-visit {
	padding: 0 0 44px;
}

/* The rule sits inside the shell so it stops where the content stops, rather
   than running the full width of the window past everything above it. */
.car-visit .car-shell {
	padding-top: 28px;
	border-top: 1px solid var(--car-line);
}

.car-visit-directions {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--car-brand);
	color: var(--car-brand-ink);
	font-size: var(--car-text-s);
	font-weight: 600;
	text-decoration: none;
}

.car-visit-directions:hover {
	background: #00284f;
}

.car-visit-directions svg {
	display: block;
	width: 15px;
	height: 15px;
	fill: currentColor;
}

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

.car-visit-way {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.car-visit-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	/* A tint of the brand rather than the brand itself: three filled navy discs
	   in a row read as buttons, and none of these are. */
	background: rgba(0, 51, 102, 0.08);
}

.car-visit-icon svg {
	display: block;
	width: 19px;
	height: 19px;
	fill: var(--car-brand);
}

.car-visit-text h3 {
	margin: 0 0 2px;
	font-size: var(--car-text-m);
}

.car-visit-text p {
	margin: 0;
	color: var(--car-ink-2);
	font-size: var(--car-text-s);
}

@media (max-width: 860px) {
	.car-visit-list {
		grid-template-columns: 1fr;
	}
}

/* The category dot. Lives here rather than in directory.css because it is used
   on business pages too, and that file is only loaded where the map is. */
.car-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--car-dot, var(--car-muted));
	/* A ring so the lighter categories keep an edge on any background. */
	box-shadow: 0 0 0 1px rgba(11, 11, 11, 0.18);
	flex: none;
}

/* The map marker. Here rather than in directory.css because both maps use it -
   the twenty-five on the home page and the single one on a business page - and
   that file only loads where the directory renders. This is the third rule to
   have been caught out that way; the test is simply whether a second template
   uses it.

   Leaflet's divIcon wraps the marker in a span, and width and height do nothing
   on an inline box, hence display. The Maki files carry no fill attribute, so
   every colour is set here. */
.car-marker {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--car-dot);
	/* The ink is picked per category from the fill's luminance - white disappears
	   on the amber one - and the 2px ring keeps the disc legible over dark tiles. */
	box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(11, 11, 11, 0.4);
}

/* The Maki frame is kept intact - see car_shop_category_icon_svg() - so the size
   comes from the box. 18px inside a 26px disc: the widest artwork then draws 18px
   across and still clears the rim, and the square ones draw 15.6px because their
   own frame insets them, which is what keeps the five looking equal. */
.car-marker svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: var(--car-ink-on, #fff);
}

/* Scaled rather than resized: Leaflet pins the icon by its anchor, so changing
   width and height would shift the marker off its own coordinates. */
.car-marker.is-selected {
	transform: scale(1.35);
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--car-dot), 0 1px 4px rgba(11, 11, 11, 0.5);
}

/* Single business -------------------------------------------------------- */

.car-shop-page-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0 0 6px;
}

.car-shop-page-cats .car-shop-cat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--car-text-s);
	color: var(--car-ink-2);
}

.car-shop-page-closed {
	display: inline-block;
	margin: 0 0 16px;
	padding: 3px 10px;
	border: 1px solid var(--car-brand);
	border-radius: 999px;
	color: var(--car-brand);
	font-size: var(--car-text-s);
	font-weight: 600;
}

.car-shop-page-photo {
	margin: 16px 0 24px;
}

/* Capped and cropped rather than shown at its own size. A 1024x768 photo drawn
   full width stands 768px tall, which is the whole screen: the visitor gets a
   title and a picture and has to scroll to find out anything about the shop.
   The slight upscale a crop costs is a fair price for the text being visible. */
.car-shop-page-photo img {
	display: block;
	width: 100%;
	max-height: 380px;
	object-fit: cover;
	border-radius: var(--car-radius);
}

.car-shop-page-photo figcaption {
	margin-top: 6px;
	color: var(--car-ink-2);
	font-size: var(--car-text-s);
}

.car-shop-page-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
	gap: 40px;
	align-items: start;
	margin-top: 8px;
}

.car-shop-page-main h2 {
	margin-top: 28px;
	font-size: var(--car-text-l);
}

.car-shop-page-main h2:first-child {
	margin-top: 0;
}


/* Standing text under a directory. Runs the full width of the shell, like
   everything else - no reading measure anywhere on this site by decision of the
   owner. If a measure is ever wanted, set it on the paragraphs and never on the
   container: .car-shell centres itself, so narrowing the container drifts the
   text into the middle of the page instead of lining it up with the list above. */
.car-afternote {
	margin-top: 8px;
	padding-bottom: 48px;
	color: var(--car-ink-2);
}

.car-afternote p {
	margin: 0 0 12px;
}

.car-afternote p:last-child {
	margin-bottom: 0;
	font-size: var(--car-text-s);
	color: var(--car-muted);
}

.car-shop-page-hours {
	white-space: pre-line;
}

/* Two columns where there is room: these are one- and two-word entries, and a
   single tall column of them leaves the page mostly margin. */
.car-shop-page-notes {
	margin: 0;
	padding-left: 1.2em;
	columns: 2;
	column-gap: 32px;
}

.car-shop-page-notes li {
	margin-bottom: 4px;
	/* A bullet must not be orphaned at the foot of the first column. */
	break-inside: avoid;
}

@media (max-width: 560px) {
	.car-shop-page-notes {
		columns: 1;
	}
}

.car-shop-page-note {
	color: var(--car-ink-2);
}

.car-shop-page-aside {
	padding: 16px;
	border: 1px solid var(--car-line);
	border-radius: var(--car-radius);
	font-size: var(--car-text-m);
}

/* Map in the aside ------------------------------------------------------- */

.car-shop-map-box {
	position: relative;
	margin: -4px 0 10px;
}

.car-shop-map {
	height: 190px;
	border: 1px solid var(--car-line);
	border-radius: var(--car-radius);
}

/* Expandable maps -------------------------------------------------------- */

/* Any box holding a map and its button. Three of them: the directory panel, the
   business aside and the event aside. */
.car-map-frame {
	position: relative;
}

.car-map-expand {
	position: absolute;
	right: 8px;
	top: 8px;
	z-index: 500;
	padding: 5px 10px;
	border: 1px solid var(--car-line);
	border-radius: 999px;
	background: var(--car-surface);
	font: inherit;
	font-size: var(--car-text-s);
	color: var(--car-ink-2);
	cursor: pointer;
}

.car-map-expand:hover {
	color: var(--car-ink);
	border-color: var(--car-muted);
}

.car-map-expand-close,
.car-map-frame.is-expanded .car-map-expand-open {
	display: none;
}

.car-map-frame.is-expanded .car-map-expand-close {
	display: inline;
}

.car-shop-map-name {
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--car-line);
	font-size: var(--car-text-m);
	font-weight: 600;
}

/* Expanded: the map takes over the screen. Fixed rather than a resized box so
   the page underneath does not reflow and lose the reader's place.

   A column, because the frame may hold more than the map - the directory's
   legend rides along inside it, and the map takes whatever is left. */
.car-map-frame.is-expanded {
	position: fixed;
	inset: 5vh 5vw;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 10px;
	overflow: auto;
	background: var(--car-surface);
	border-radius: var(--car-radius);
	box-shadow: 0 8px 40px rgba(11, 11, 11, 0.35);
}

/* min-height overrides the sidebar heights the three maps carry, which flex
   would otherwise treat as a floor and push the legend off the bottom. */
.car-map-frame.is-expanded .car-map-canvas {
	flex: 1;
	width: 100%;
	height: auto;
	min-height: 0;
}

body.car-map-expanded::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 999;
	background: rgba(11, 11, 11, 0.45);
}

/* Search, results and the 404 -------------------------------------------- */

.car-search {
	margin: 0 0 24px;
}

.car-search-label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--car-text-s);
	color: var(--car-ink-2);
}

.car-search-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.car-search-field {
	flex: 1 1 220px;
	min-width: 0;
	padding: 9px 12px;
	border: 1px solid var(--car-line);
	border-radius: var(--car-radius);
	background: var(--car-surface);
	font: inherit;
	color: var(--car-ink);
}

.car-search-field:focus-visible {
	outline: 2px solid var(--car-brand);
	outline-offset: 1px;
}

.car-search-count {
	color: var(--car-ink-2);
}

.car-results {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A rule between entries rather than around each: the list is scanned top to
   bottom, and boxes would make every result look like a card to consider. */
.car-result {
	padding: 14px 0;
	border-top: 1px solid var(--car-line);
}

.car-result-name {
	font-size: var(--car-text-l);
	font-weight: 600;
}

.car-result-cat {
	margin-left: 8px;
	font-size: var(--car-text-s);
	color: var(--car-ink-2);
}

.car-result-line {
	margin: 4px 0 0;
	color: var(--car-ink-2);
}

.car-404-links {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.car-404-links li {
	padding: 10px 0;
	border-top: 1px solid var(--car-line);
	color: var(--car-ink-2);
}

.car-404-links a {
	font-weight: 600;
}

/* The link and its explanation are one line, so the gap between them has to be
   a real space rather than the newline the markup happens to contain. */
.car-404-links a::after {
	content: " - ";
	color: var(--car-ink-2);
	font-weight: 400;
}

.car-404-tell {
	color: var(--car-ink-2);
}

/* Contacts --------------------------------------------------------------- */

.car-contacts {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.car-contact {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 5px;
	font-size: var(--car-text-s);
}

.car-contact-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 20px;
	height: 20px;
}

.car-contact-icon svg {
	display: block;
	width: 19px;
	height: 19px;
	fill: var(--car-brand);
}

/* Simple Icons draw on a 24x24 field and fill nearly all of it, where Maki draw
   on 15x15 with air around the shape. Matched box for box, the brand marks come
   out visibly the larger; this trims them back to the same optical weight. */
.car-contact--social .car-contact-icon svg {
	width: 16px;
	height: 16px;
}

/* Long addresses and emails must not push the panel wider than its column.
   Underlined only on hover: a column of underlined lines reads as a wall of
   links, and the icon beside each already says it is one. */
.car-contact a {
	min-width: 0;
	overflow-wrap: anywhere;
	text-decoration: none;
}

.car-contact a:hover,
.car-contact a:focus-visible {
	text-decoration: underline;
}

/* Hours ------------------------------------------------------------------ */

.car-hours {
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var(--car-line);
}

.car-hours-now {
	margin: 0 0 8px;
	font-weight: 600;
}

.car-hours-now.is-open {
	color: #0a6b2d;
}

.car-hours-now.is-shut {
	color: var(--car-brand);
}

.car-hours-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--car-text-s);
	border:none;
}

.car-hours-table th {
	padding: 2px 0;
	font-weight: 400;
	text-align: left;
	color: var(--car-ink-2);
	border:none;
}

.car-hours-table td {
	padding: 2px 0;
	text-align: right;
	font-variant-numeric: tabular-nums;
	border:none;
}

.car-hours-shut td {
	color: var(--car-muted);
}

.car-hours-note {
	margin: 8px 0 0;
	font-size: var(--car-text-s);
	color: var(--car-ink-2);
	font-style: italic;
}

/* One rule for every separator in the panel, so they cannot double up: the name
   already draws a line under itself, and the address used to draw another right
   beneath it. Laid out like a contact row so its pin sits on the same axis as
   the handset and the envelope below - the address is one more way to arrive. */
.car-shop-page-address {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 12px;
	font-size: var(--car-text-s);
}

/* An address wraps to two lines where a phone number does not; centring the pin
   against the block would leave it floating in the middle of them. */
.car-shop-page-address .car-contact-icon {
	height: calc(var(--car-text-s) * 1.5);
}

.car-shop-page-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.car-shop-page-links li + li {
	margin-top: 4px;
}

.car-shop-page-unchecked,
.car-shop-page-verified {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--car-line);
	font-size: var(--car-text-s);
}

/* No line of its own: it sits under the notice above, which already has one. */
.car-shop-page-back {
	margin: 12px 0 0;
	font-size: var(--car-text-s);
}

.car-shop-page-unchecked {
	color: var(--car-brand);
}

.car-shop-page-verified {
	color: var(--car-ink-2);
}

@media (max-width: 760px) {
	.car-shop-page-body {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	/* The panel comes first on a phone: address, hours and a phone number are
	   what someone standing on the street needs, and the history can wait until
	   they have scrolled past it. The heading above the two columns already
	   names the place, so the panel's own copy of the name comes out. */
	.car-shop-page-aside {
		order: -1;
	}

	.car-shop-map-name {
		display: none;
	}

	.car-shop-map-box {
		margin-bottom: 14px;
	}
}

/* Press page ------------------------------------------------------------- */

/* One column, not the home page's two: this is a page to read down, and a pull
   quote loses its weight when it has to share the line. Full container width. */
.car-press-page {
	margin: 0;
	padding: 0;
	list-style: none;
}

.car-press-page li + li {
	margin-top: 28px;
}

.car-quote--full blockquote {
	font-size: var(--car-text-xl);
}

.car-press-archive-link,
.car-press-empty {
	margin-top: 36px;
	color: var(--car-ink-2);
}

/* Home intro ------------------------------------------------------------- */

.car-intro {
	padding-bottom: 8px;
}

.car-intro-body {
	color: var(--car-ink-2);
}

@media (max-width: 760px) {
	.car-events-list,
	.car-press-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Content and footer ----------------------------------------------------- */

.car-content {
	padding: 24px 0 48px;
}

/* The brand navy, matching the masthead, so the page is closed at the bottom the
   way it is opened at the top. Before this the footer was grey text on the page
   background behind a hairline, which read as more content rather than as the
   end of the page.

   The link colour has to be restated: the global rule paints links in the brand
   navy, which on this band would be navy on navy. */
.car-colophon {
	background: var(--car-brand);
	color: var(--car-brand-ink);
	font-size: var(--car-text-s);
}

.car-colophon a {
	color: var(--car-brand-ink);
}

.car-colophon a:focus-visible {
	outline-color: var(--car-brand-ink);
}

.car-colophon-inner {
	max-width: var(--car-width);
	margin: 0 auto;
	padding: 20px 16px 40px;
}

.car-colophon p {
	margin: 0 0 6px;
}

/* What the site is on the left, what you can do about it on the right. Not a
   half-and-half split: the left column is running prose and needs the room,
   the right one holds a button and three links. */
.car-colophon-cols {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 20px var(--car-gap);
	align-items: start;
}

.car-colophon-col--end {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}

.car-colophon-col--end .car-colophon-legal {
	justify-content: flex-end;
}

@media (max-width: 640px) {
	.car-colophon-cols {
		grid-template-columns: 1fr;
	}

	/* Stacked, the right column has nothing to sit against, and text pushed to
	   the right edge of a phone reads as a mistake. */
	.car-colophon-col--end {
		align-items: flex-start;
		text-align: left;
	}

	.car-colophon-col--end .car-colophon-legal {
		justify-content: flex-start;
	}
}

.car-colophon-support {
	margin-top: 12px;
}

/* Amber with a black rule and a red cup, by the owner's choice. Measured:
   black lettering on the amber is 13.57, the red mark on it 3.66 against the
   3.0 asked of graphics, and the amber stands 8.15 clear of the navy behind it.

   Worth knowing rather than acting on: in OKLab the amber is 10.2 from the
   Other Shops marker and the red 8.9 from Food and Drink, both inside the 15
   this site keeps between category colours. They never share a screen at the
   same size - these are a small pill in the footer, those are markers on a map
   - but if the palette is ever revisited, that is the pair to look at. */
.car-kofi-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid #000000;
	border-radius: 999px;
	background: #fbc869;
	font-weight: 600;
	text-decoration: none;
}

/* Overrides the white the colophon gives every link. */
.car-colophon .car-kofi-link {
	color: #000000;
}

.car-kofi-link:hover {
	background: #f7b743;
}

.car-kofi-icon {
	display: flex;
	flex: none;
	width: 18px;
	height: 18px;
}

/* The cup keeps its own colour rather than following the lettering - it is the
   only thing in the footer that is a mark rather than text. */
.car-kofi-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: #d10000;
}

.car-colophon-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 14px;
}

/* Set off from the links above it, and quieter than them: it is a statement of
   fact, not somewhere to go. */
.car-colophon-copyright {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	opacity: 0.75;
}