/* Chaos Tracker — styling derived from footballagainstfascism.org:
   green ground, thick white borders, Brigends Expanded headings with a hard
   black shadow, red accents, and "reverse" (white-on-black) panels. */

@font-face {
	font-family: 'Brigends';
	font-style: normal;
	font-weight: normal;
	src: local('Brigends Expanded Regular'),
	     url('assets/BrigendsExpanded.woff') format('woff');
}

:root {
	--green: #007a33;
	--green-dark: #005c26;
	--white: #ffffff;
	--black: #111111;
	--red: #e2231a;
	--line: 10px;          /* mobile centre line / accent thickness */
	--line-wide: 18px;     /* desktop centre line thickness */
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--green);
	border: 10px solid var(--white);
	font-family: sans-serif;
	color: var(--white);
	margin: 0;
	padding: 1rem;
	font-size: 1.15rem;
	line-height: 1.7rem;
}

@media (min-width: 700px) {
	body {
		border: 40px solid var(--white);
		padding: 2rem;
	}
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: var(--white);
	text-decoration: none;
	border-bottom: 1px solid var(--white);
}

h1, h2, h3 {
	font-family: 'Brigends', sans-serif;
	letter-spacing: 0.02em;
	text-shadow: 2px 2px 2px var(--black);
	line-height: 0.95em;
	margin: 0 0 0.5rem;
}

/* -----------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
.site-header {
	text-align: center;
	max-width: 900px;
	margin: 1rem auto 2.5rem;
}

.site-header .logo {
	max-width: 360px;
	margin: 0 auto 1.5rem;
}

.site-header h1 {
	font-size: 2.2rem;
}

@media (min-width: 700px) {
	.site-header h1 {
		font-size: 3.4rem;
	}
}

.site-header .tagline {
	font-size: 1.1rem;
	opacity: 0.95;
}

/* Logo now lives at the foot of the page. */
.site-footer {
	text-align: center;
	margin: 4rem auto 1rem;
}

.site-footer .logo {
	max-width: 360px;
	margin: 0 auto;
}

/* -----------------------------------------------------------------------
   Timeline: two columns with a thick white centre line.
   Each row is a CSS grid: [left] [line] [right].
   --------------------------------------------------------------------- */
.timeline {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

/* One continuous white line running the full height of the timeline, down the
   centre between the two columns (regardless of where entries fall). */
.timeline::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: var(--line-wide);
	background: var(--white);
}

.timeline-row {
	display: grid;
	grid-template-columns: 1fr var(--line-wide) 1fr;
	align-items: start;
}

/* Place the card in the correct column and add breathing room either side
   of the white line. */
.timeline-row.left .entry  { grid-column: 1; padding-right: 2.5rem; }
.timeline-row.right .entry { grid-column: 3; padding-left: 2.5rem; }

/* On desktop the columns alternate left/right, so adjacent rows live on
   opposite sides and never actually collide. Pull each row up into the
   previous one so the timeline interleaves vertically instead of leaving a
   full row's gap between entries. (net spacing = 2.5rem gap - 8rem ≈ -5.5rem) */
@media (min-width: 700px) {
	.timeline-row + .timeline-row {
		margin-top: -8rem;
	}
	/* Left column reads toward the centre line: right-align its content. */
	.timeline-row.left .entry {
		text-align: right;
	}
	/* Extend the tag line toward the centre line so it touches it. The gap is
	   the entry's side padding (2.5rem) plus the inner padding (1.5rem) = 4rem. */
	.timeline-row.left .tag-line  { margin-right: -4rem; }
	.timeline-row.right .tag-line { margin-left: -4rem; }
	/* Rows span the full width, so the empty half of an overlapping row would
	   otherwise sit on top of the neighbouring card and swallow its clicks.
	   Let clicks fall through the row, but keep the entry itself interactive. */
	.timeline-row {
		pointer-events: none;
	}
	.timeline-row .entry {
		pointer-events: auto;
	}
}

/* -----------------------------------------------------------------------
   Entry — sits directly on the green ground, white text (no panel).
   --------------------------------------------------------------------- */
.entry {
	color: var(--white);
}

.entry-inner {
	padding: 1.25rem 1.5rem 1.5rem;
}

/* The centre line starts at the very top of the timeline; drop the first
   entry's top padding so its coloured tag line aligns with the line's top. */
.timeline-row:first-child .entry-inner {
	padding-top: 0;
}

.entry .tag {
	margin-bottom: 0.75rem;
}

/* The coloured tag: a thick line in the tag colour, then the title in caps. */
.tag-line {
	height: var(--line);
	border-radius: 2px;
	margin-bottom: 0.4rem;
	/* No fixed width: as an auto-width block it fills the entry, and the
	   negative margins below extend (not just shift) it to the centre line. */
}

.tag-title {
	font-family: 'Brigends', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 1.1rem;
	text-shadow: none;
}

.entry .date {
	display: block;
	font-family: 'Archivo', sans-serif;
	font-size: 0.9rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--white);
	opacity: 0.85;
	font-weight: bold;
	margin-bottom: 0.4rem;
}

.entry h2 {
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-stretch: expanded;
	letter-spacing: 0.01em;
	text-transform: none;
	text-shadow: none;
	color: var(--white);
	font-size: 1.4rem;
	margin-bottom: 0.6rem;
	line-height: 1.2;
	text-wrap: balance;  
}

@media (min-width: 700px) {
	.entry h2 { font-size: 1.6rem; }
}

.entry .summary {
	font-size: 1rem;
	line-height: 1.55rem;
	margin: 0 0 1rem;
	text-wrap: balance;  
}

.entry .entry-image {
	margin: 0 0 1rem;
}

.entry .entry-image img {
	width: 100%;
	border: 2px solid var(--white);
}

.entry .read-more {
	display: inline-block;
	background: var(--red);
	color: var(--white);
	border: none;
	border-bottom: none;
	padding: 0.5rem 1.25rem;
	border-radius: 20px;
	font-weight: bold;
	font-size: 0.95rem;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}

.entry .read-more:hover {
	background: var(--black);
}

.empty {
	text-align: center;
	max-width: 600px;
	margin: 3rem auto;
}

/* -----------------------------------------------------------------------
   Mobile: collapse to a single full-width column, no centre line.
   --------------------------------------------------------------------- */
@media (max-width: 699px) {
	/* Hide the centre line on mobile. */
	.timeline::before {
		display: none;
	}
	.timeline-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.timeline-row.left .entry,
	.timeline-row.right .entry {
		grid-column: 1;
		padding-left: 0;
		padding-right: 0;
	}
}

/* -----------------------------------------------------------------------
   Admin
   --------------------------------------------------------------------- */
.admin {
	max-width: 820px;
	margin: 0 auto;
}

/* The items list gets more room than the narrow form pages. */
.admin.wide {
	max-width: 1200px;
}

.admin .panel {
	background: var(--white);
	color: var(--black);
	padding: 1.5rem 1.75rem;
	margin-bottom: 1.5rem;
	box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.25);
}

.admin h1, .admin h2 {
	color: var(--white);
}

/* Admin h2 titles use the wide Archivo display face (no heavy shadow), with
   some breathing room underneath. */
.admin h2 {
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-stretch: expanded;
	letter-spacing: 0.01em;
	text-shadow: none;
	margin-bottom: 1rem;
}

.admin .panel h2 {
	color: var(--black);
	text-shadow: none;
	font-size: 1.4rem;
}

.admin-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.admin-bar .actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Top nav: stack the menu onto its own line beneath the headline. The menu row
   spans the full width so "View site"/"Log out" can sit at the right edge while
   Items/Tags stay left — consistent on every admin page. */
.admin-nav {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}
.admin-nav .actions { width: 100%; align-items: center; }
.admin-nav .actions .push-right { margin-left: auto; }

/* Items / Tags as a segmented tab control rather than buttons. */
.tabs {
	display: inline-flex;
	border: 2px solid var(--white);
	border-radius: 6px;
	overflow: hidden;
}
.tabs .tab {
	padding: 0.4rem 1.25rem;
	color: var(--white);
	font-weight: bold;
	font-size: 0.85rem;
	text-decoration: none;
	border: none;          /* override the global link underline */
	border-bottom: none;
}
.tabs .tab + .tab {
	border-left: 2px solid var(--white);
}
.tabs .tab.active {
	background: var(--white);
	color: var(--green-dark);
}
.tabs .tab:not(.active):hover {
	background: rgba(255, 255, 255, 0.15);
}

label {
	display: block;
	font-weight: bold;
	margin: 1rem 0 0.35rem;
	font-size: 0.95rem;
}

input[type=text],
input[type=url],
input[type=date],
input[type=password],
select,
textarea {
	width: 100%;
	font-size: 1rem;
	padding: 0.7rem 0.8rem;
	border: 1px solid #999;
	border-radius: 4px;
	font-family: inherit;
}

textarea { min-height: 120px; resize: vertical; }

input[type=color] {
	width: 56px;
	height: 40px;
	padding: 2px;
	border: 1px solid #999;
	border-radius: 4px;
	vertical-align: middle;
	cursor: pointer;
}

.btn {
	display: inline-block;
	font-family: inherit;   /* <button> doesn't inherit font by default */
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.2;        /* fixed so <a> and <button> match in height */
	background: var(--red);
	color: var(--white);
	border: none;
	border-radius: 20px;
	padding: 0.65rem 1.5rem;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
	cursor: pointer;
	text-decoration: none;
}

.btn:hover { background: var(--black); }
.btn.secondary { background: var(--green-dark); }
.btn.dark { background: var(--black); }
.btn.small { padding: 0.4rem 1rem; font-size: 0.85rem; }

/* No drop shadows under admin buttons. */
.admin .btn { box-shadow: none; }

.flash {
	padding: 0.85rem 1.1rem;
	margin-bottom: 1.25rem;
	border-radius: 4px;
	font-weight: bold;
}
.flash.ok    { background: #d6f5dd; color: #14532d; border: 1px solid #14532d; }
.flash.error { background: #fde2e1; color: #7f1d1d; border: 1px solid #7f1d1d; }

table.items { width: 100%; border-collapse: collapse; }
table.items th, table.items td {
	text-align: left;
	padding: 0.6rem 0.5rem;
	border-bottom: 1px solid #ddd;
	vertical-align: top;
}
table.items th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
/* No bottom rule under the last item. */
table.items tbody tr:last-child td { border-bottom: none; }
/* Give the Tag column (2nd) more room so longer tag names don't wrap. */
table.items th:nth-child(2), table.items td:nth-child(2) { min-width: 180px; }
/* Keep the cell a normal table cell (so its bottom border lines up with the
   rest of the row, even when the headline wraps), and put the flex layout on an
   inner wrapper. Edit (an <a>) and Delete (a <button> in a form) stretch to a
   shared height so they match. */
table.items .row-actions { white-space: nowrap; }
table.items .actions-inner { display: flex; gap: 0.5rem; align-items: stretch; }
table.items .actions-inner form { display: flex; margin: 0; }
table.items .actions-inner .btn { display: inline-flex; align-items: center; }

.tag-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.85rem;
}
.tag-swatch {
	width: 28px;
	height: 14px;
	border-radius: 2px;
	border: 1px solid rgba(0,0,0,0.2);
}

.tag-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid #eee;
}
.tag-row .name { flex: 1; font-weight: bold; }
.tag-row .colour-field { flex-shrink: 0; }

/* Colour picker paired with a typed hex field. */
.colour-field {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.colour-field .hex {
	width: 7.5em;
	font-family: monospace;
	text-transform: lowercase;
}

/* Save/Cancel row: align the <button> and the <a> on a shared centre line. */
.form-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}
.form-actions .btn { display: inline-flex; align-items: center; }

.current-image {
	margin: 0.5rem 0;
}
.current-image img {
	max-width: 220px;
	border: 2px solid var(--black);
}

.hint { font-size: 0.85rem; color: #555; font-weight: normal; margin-top: 0.25rem; }

/* Location picker: a full-globe equirectangular map you click to drop a pin. */
.map-picker {
	position: relative;
	width: 100%;
	aspect-ratio: 2 / 1;          /* force exact 2:1 so click math stays accurate */
	border: 2px solid #999;
	border-radius: 4px;
	overflow: hidden;
	cursor: crosshair;
}
.map-picker img {
	width: 100%;
	height: 100%;
	object-fit: fill;             /* fill the 2:1 box exactly */
	display: block;
	user-select: none;
}
.map-marker {
	position: absolute;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;        /* centre the dot on the point */
	background: var(--red);
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
	pointer-events: none;
}

.latlng-fields {
	display: flex;
	gap: 0.75rem;
	align-items: flex-end;
	flex-wrap: wrap;
}
.latlng-fields span { flex: 1; min-width: 140px; }
.latlng-fields label.inline { margin: 0.5rem 0 0.35rem; }
.latlng-fields .btn { margin-bottom: 0; }

/* Place-name search above the map. */
.place-search {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
	margin-bottom: 0.6rem;
}
.place-search input { flex: 1; }
.place-search .btn { display: inline-flex; align-items: center; white-space: nowrap; }
.place-status { display: block; min-height: 1.2em; }

.login-box { max-width: 380px; margin: 4rem auto; }

/* -----------------------------------------------------------------------
   Admin — mobile: collapse the items and tags tables to a single column.
   --------------------------------------------------------------------- */
@media (max-width: 699px) {
	.admin .panel { padding: 1.25rem 1rem; }

	/* Items table → stacked cards. Each row becomes a block; each cell sits on
	   its own line with its column name (from data-label) as a label. */
	table.items, table.items tbody, table.items tr, table.items td {
		display: block;
		width: 100%;
	}
	/* Hide the header row; labels come from data-label instead. */
	table.items thead { display: none; }
	/* The min-width hint on the Tag column would force horizontal overflow. */
	table.items th:nth-child(2), table.items td:nth-child(2) { min-width: 0; }

	table.items tr {
		border: 1px solid #ddd;
		border-radius: 4px;
		padding: 0.5rem 0.75rem;
		margin-bottom: 1rem;
	}
	table.items tr:last-child { margin-bottom: 0; }

	table.items td {
		padding: 0.4rem 0;
		border-bottom: 1px solid #eee;
	}
	table.items td:last-child { border-bottom: none; }

	/* Show the column name ahead of each value. */
	table.items td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-size: 0.7rem;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		font-weight: bold;
		color: #555;
		margin-bottom: 0.2rem;
	}
	/* Actions stretch full width and wrap if needed. */
	table.items .row-actions { white-space: normal; }
	table.items .actions-inner { flex-wrap: wrap; }

	/* Tags: stack each row's controls vertically, full width. */
	.tag-row { flex-direction: column; align-items: stretch; }
	.tag-row .colour-field { justify-content: flex-start; }
}