/*
 * VillageGrid — front-end styles.
 *
 * Deliberately minimal. GeneratePress is the design system for this site;
 * anything here should be limited to what the plugin's own markup needs and
 * should inherit colours and fonts from the theme wherever possible.
 */

/* ---------------------------------------------------------------------------
   Village map ([villagegrid_map])
   --------------------------------------------------------------------------- */

.villagegrid-map {
	width: 100%;
	margin: 0 0 1.5em;
	border-radius: 3px;
	/* Height is set inline by the shortcode's height="" attribute. */
}

/* Toggle panel (panel="1"): beside the map, above it on narrow screens. */
.villagegrid-map-layout {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	align-items: flex-start;
	margin: 0 0 1.5em;
}

.villagegrid-map-layout .villagegrid-map {
	flex: 1 1 20em;
	margin: 0;
	/* Height stays inline, from the shortcode's height attribute. */
}

.villagegrid-map-panel {
	flex: 0 0 14em;
	border: 1px solid rgba( 0, 0, 0, 0.15 );
	border-radius: 3px;
	margin: 0;
	padding: 0.6em 0.8em;
	min-width: 0;
}

.villagegrid-map-panel-toggle,
.villagegrid-map-panel-all-toggle {
	margin: 0;
	flex: 0 0 auto;
}

.villagegrid-map-panel-row {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.2em 0;
	cursor: pointer;
}

/* The "All" row leads the list and is ruled off from the rows it drives. It
   carries no swatch, so its label pads itself by the swatch's width plus the
   row gap — the two columns line up rather than the word sitting proud. */
.villagegrid-map-panel-all {
	border-bottom: 1px solid rgba( 0, 0, 0, 0.15 );
	margin-bottom: 0.3em;
	padding-bottom: 0.4em;
}

.villagegrid-map-panel-all .villagegrid-map-panel-label {
	padding-left: calc( 13px + 0.5em );
}

.villagegrid-map-panel-swatch {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	flex: 0 0 auto;
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 );
}

.villagegrid-map-panel-label {
	flex: 1 1 auto;
	min-width: 0;
}

.villagegrid-map-panel-count {
	opacity: 0.7;
	font-size: 0.9em;
	font-variant-numeric: tabular-nums;
}

/* Below this the panel is a header rather than a sidebar. */
@media ( max-width: 640px ) {

	.villagegrid-map-panel {
		flex: 1 1 100%;
	}

	.villagegrid-map-layout .villagegrid-map {
		flex: 1 1 100%;
	}
}

.villagegrid-map-popup {
	line-height: 1.4;
}

.villagegrid-map-popup-address {
	margin-top: 0.25em;
	font-size: 0.9em;
	opacity: 0.8;
}

/* Admin-only "not configured yet" line where a map would have been. */
.villagegrid-map-notice {
	background: #fcf9e8;
	border-left: 4px solid #dba617;
	font-style: italic;
	padding: 0.75em 1em;
}

/* ---------------------------------------------------------------------------
   Departures board ([villagegrid_departures])

   The line badge is colour-coded by transport mode. The four colours live in
   custom properties immediately below so they can be changed in ONE place.

   Each was checked for contrast against the white badge text:

     train  #14548c   7.9 : 1
     bus    #1c6b3f   6.5 : 1
     tram   #7a2d8f   8.1 : 1
     other  #4a4f55   8.3 : 1

   WCAG AA needs 4.5 : 1, so there is room to darken or lighten these without
   breaking readability — but re-check if you change them.

   Colour is never the only signal: the mode is also on the row as a
   data-mode attribute and spoken in the row's title text, so a screen reader
   or a colour-blind reader loses nothing.
   --------------------------------------------------------------------------- */

.villagegrid-departures {
	--villagegrid-badge-train: #14548c;
	--villagegrid-badge-bus: #1c6b3f;
	--villagegrid-badge-tram: #7a2d8f;
	--villagegrid-badge-other: #4a4f55;
	--villagegrid-badge-text: #fff;

	margin: 0 0 1.5em;

	/* The board reacts to ITS OWN width, not the window's: a departures
	   widget in a narrow sidebar on a wide desktop needs the same treatment
	   as one on a phone, and a media query cannot tell those apart. */
	container-type: inline-size;
}

.villagegrid-departures-title {
	margin-bottom: 0.5em;
}

/* ---- Stop picker (only rendered when a board offers several stops) ------- */

.villagegrid-departures-controls {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-bottom: 0.75em;
	flex-wrap: wrap;
}

.villagegrid-departures-label {
	font-weight: 600;
}

.villagegrid-departures-select {
	max-width: 100%;
}

/* ---- The table ---------------------------------------------------------- */

.villagegrid-departures-table {
	width: 100%;
	border-collapse: collapse;
	/* AUTO layout, deliberately (1.0.3). The three short columns ask for
	   width:1% and refuse to wrap, which auto layout reads as "no narrower
	   than your content, no wider either"; the destination then receives
	   everything left over and truncates. Fixed layout would have handed
	   those columns a literal 1% and gone on distributing the rest evenly —
	   which is how a near-empty Gleis column came to starve the destinations
	   into "Schaff…" at tablet width. */
	table-layout: auto;
}

.villagegrid-departures-table th,
.villagegrid-departures-table td {
	text-align: left;
	padding: 0.4em 0.6em;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.1 );
	vertical-align: top;
}

/* Priority sizing: time, line and platform take exactly the room their
   content needs; the destination — the column carrying the information
   anyone actually came for — gets everything else. */
.villagegrid-departures-th-time,
.villagegrid-departures-th-line,
.villagegrid-departures-th-platform,
.villagegrid-departure-time,
.villagegrid-departure-line,
.villagegrid-departure-platform {
	width: 1%;
	white-space: nowrap;
}

.villagegrid-departures-th-platform,
.villagegrid-departure-platform {
	text-align: center !important;
}

/* The second copy of the platform, for a container too narrow to keep the
   column. Always present in the markup, shown only by the container query
   below. */
.villagegrid-departure-platform-inline {
	display: none;
}

/* The separator belongs to the DISPLAY MODE, not to the text, which is why
   the JavaScript emits none. Shown inline after a destination it needs a dot;
   shown on its own line it does not. Both rules live here so the two modes
   are correct by construction rather than by remembering — this one covers
   the inline case, the container query below cancels it for the stacked one. */
.villagegrid-departure-platform-inline::before {
	content: '\00B7\00A0';
}


/* The one column allowed to truncate when space runs out.
 *
 * max-width:0 is not a typo and not decoration. In an auto-layout table a
 * nowrap cell reports its FULL text as its minimum width, and overflow:hidden
 * does not reduce that — so without this the table refuses to shrink below
 * the longest destination and overflows its container instead of ellipsising.
 * Zero tells the browser this column has no width of its own, which lets it
 * take the leftovers and truncate inside them. Measured, not assumed: without
 * it a 462px container produced a 480px table.
 */
.villagegrid-departures-th-destination,
.villagegrid-departure-destination {
	max-width: 0;
}

.villagegrid-departure-destination {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.villagegrid-departure-clock {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.villagegrid-departure-delay {
	color: #b32d2e;
	font-size: 0.9em;
	margin-left: 0.35em;
}

.villagegrid-departure-countdown {
	display: block;
	font-size: 0.85em;
	opacity: 0.75;
}

/* ---- Line badge --------------------------------------------------------- */

.villagegrid-badge {
	display: inline-block;
	min-width: 2.75em;
	padding: 0.15em 0.5em;
	border-radius: 3px;
	background: var( --villagegrid-badge-other );
	color: var( --villagegrid-badge-text );
	font-size: 0.9em;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.villagegrid-badge--train {
	background: var( --villagegrid-badge-train );
}

.villagegrid-badge--bus {
	background: var( --villagegrid-badge-bus );
}

.villagegrid-badge--tram {
	background: var( --villagegrid-badge-tram );
}

.villagegrid-badge--other {
	background: var( --villagegrid-badge-other );
}

/* ---- Status, error and empty rows --------------------------------------- */

.villagegrid-departures-status td,
.villagegrid-departures-error td,
.villagegrid-departures-stale td {
	font-style: italic;
	opacity: 0.8;
}

/* "Stand: 14:32" under a board served from the last good copy. Quiet on
   purpose: the times above it are the message, this is the footnote that says
   how old they are. Not red — nothing is broken from where the reader sits,
   the board is simply not being refreshed at the moment. */
.villagegrid-departures-stale td {
	font-size: 0.9em;
}

.villagegrid-departures-error td {
	color: #b32d2e;
	opacity: 1;
}

.villagegrid-departures-source {
	margin-top: 0.5em;
	font-size: 0.85em;
	opacity: 0.75;
}

.villagegrid-departures-notice {
	font-style: italic;
}

/* ---- Narrow screens ----------------------------------------------------- */

/* Must stay readable on a 360px phone — which is exactly where a departure
   board is most likely to be read. Tighten the padding and let the badge sit
   closer; the columns size themselves now, so the old fixed widths that used
   to live here are gone. */
@media ( max-width: 480px ) {

	.villagegrid-departures-table th,
	.villagegrid-departures-table td {
		padding: 0.4em 0.35em;
		font-size: 0.95em;
	}

	.villagegrid-badge {
		min-width: 2.25em;
		padding: 0.15em 0.35em;
	}
}

/* ---- Narrow CONTAINER --------------------------------------------------- */

/* Below this the Gleis column costs more than it carries: its heading wraps
   to "Glei-s" and its mostly-empty width is taken from the destination. So
   the column goes and the value moves inline after the destination instead —
   the same information, a quarter of the space. */
@container ( max-width: 380px ) {

	.villagegrid-departures-th-platform,
	.villagegrid-departure-platform {
		display: none;
	}

	/* Its OWN LINE, not inline after the destination: sharing the line meant
	   the destination's ellipsis ate the platform it was there to rescue
	   ("Schaffhausen · Gl…"). Below the destination it always survives. */
	.villagegrid-departure-platform-inline {
		display: block;
		opacity: 0.75;
	}

	/* No separator needed once it is on a line of its own. */
	.villagegrid-departure-platform-inline::before {
		content: '';
	}

	/* The delay moves onto its own line here, beside the countdown that is
	   already there. Left inline it would make the time column as wide as
	   "07:32 +1 min" — and only on the rows that happen to be delayed, so
	   the column would jump about between refreshes, taking the width from
	   the destination each time. At full width it stays where it was. */
	.villagegrid-departure-delay {
		display: block;
		margin-left: 0;
	}
}


/* --- 0.5.0: marker badges and icon picker --- */

/* The marker colour, configurable since 0.10.0: Settings → VillageGrid
   overrides this value with one inline rule. A place type can override it
   again per marker, which has to be inline because it varies per marker.
   NOTE: these are the MAP markers. The --villagegrid-badge-* properties
   further up are the departures line badges — a different thing entirely. */
:root {
	--villagegrid-marker-colour: #2f6b3c;
}

/* Leaflet owns the divIcon container, so the coloured circle is an inner
   span we write ourselves and can put an inline colour on. */
.villagegrid-marker-badge {
	background: none;
	border: 0;
}

.villagegrid-marker-badge-inner {
	background: var( --villagegrid-marker-colour );
	border: 2px solid #ffffff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.villagegrid-marker-badge svg {
	width: 18px;
	height: 18px;
	display: block;
	margin: auto;
}

.villagegrid-map-popup-heading {
	display: flex;
	align-items: center;
	gap: 0.35em;
}

.villagegrid-map-popup-icon svg {
	width: 1em;
	height: 1em;
	display: block;
	color: var( --villagegrid-marker-colour );
}

.villagegrid-map-popup-types {
	color: #666;
	font-size: 0.85em;
	margin-top: 0.15em;
}

/* Admin icon picker: a wrapping grid of labelled radio choices. */
.villagegrid-icon-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 6px 0;
	max-width: 640px;
}

.villagegrid-icon-picker .villagegrid-icon-choice {
	align-items: center;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	display: flex;
	gap: 6px;
	padding: 4px 8px;
}

.villagegrid-icon-picker .villagegrid-icon-svg svg {
	width: 20px;
	height: 20px;
	display: block;
	color: var( --villagegrid-marker-colour );
}

.villagegrid-icon-picker .villagegrid-icon-label,
.villagegrid-icon-picker .villagegrid-icon-none {
	font-size: 12px;
}

/* Transport stop chooser on the settings screen. */
.villagegrid-stop-results {
	margin: 0.5em 0 1em;
	max-height: 20em;
	overflow-y: auto;
}

.villagegrid-stop-result {
	margin: 0 0 0.4em;
}

.villagegrid-stop-row {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	margin: 0 0 0.6em;
	padding: 0.5em 0.75em;
}

.villagegrid-stop-row p {
	margin: 0.25em 0;
}

.villagegrid-stop-stations {
	margin: 0.25em 0 0 1.5em;
}

.villagegrid-stop-stations li {
	margin: 0.15em 0;
}

/* Eigene Symbole: previews at the size the marker badge uses. */
.villagegrid-custom-icon-preview svg {
	width: 24px;
	height: 24px;
	display: block;
	color: var( --villagegrid-marker-colour );
}