/* Legacy look: Verdana on dark background, white links, red hover */
:root {
	--main-font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* Prevent header/nav shift when pages have/need a vertical scrollbar */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
	html { overflow-y: scroll; }
}

body { margin: 0; background: #000; color: #fff; font-family: var(--main-font-family); }
header { margin: 0 0 1rem; }

/* Global links */
a { color: #fff; text-decoration: none; }
a:hover { background-color: #990000; color: #fff; }

/* Header */
.header-hero { text-align: center; padding-top: 10px; }
.header-hero img { width: 100%; max-width: 750px; height: auto; }
header nav { text-align: center; margin-top: 6px; }
nav a { margin: 0 0.5rem; padding: 0 2px; border-radius: 2px; display: inline-block; font-weight: 700; }
h1 { font-size: 1.25rem; }

/* Headings */
h1, h2, h3 { font-family: var(--main-font-family); font-weight: 700; }
h1 { font-size: 1.25rem; }
h2 { font-size: 1.00rem; }
h3 { font-size: 0.80rem; }

/* Tables on dark */
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #333; padding: 0.5rem; }
th { background: #111; color: #fff; text-align: left; }
.muted { color: #aaa; }

/* Centered page container to avoid overly wide content on large screens */
.container { max-width: 1100px; margin: 0 auto; padding: 1rem; }

/* Wars page: keep column widths consistent across all group tables */
table.wars-table { table-layout: fixed; width: 100%; }
table.wars-table th, table.wars-table td {
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0.4rem;
	text-align: center;
}
/* Consistent backgrounds for wars table */
table.wars-table tbody tr { background: #000; }
table.wars-table tbody tr:nth-child(even) { background: #0a0a0a; }
table.wars-table { margin-bottom: 1.25rem; }

/* Nested maps table should fill the Maps cell but not affect outer widths */
table.maps-table { table-layout: fixed; width: 100%; }
table.maps-table th, table.maps-table td {
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0.35rem;
}
table.maps-table { font-size: 0.95em; }
table.maps-table th, table.maps-table td { text-align: center; }
/* Consistent backgrounds for nested maps tables */
table.maps-table tbody tr { background: #000; }
/* Force solid black for all map cells so parent row bg doesn't show through */
table.maps-table { background: #000; }
table.maps-table td { background: #000; }

/* Link‑styled button for triggers */
.btn-link { background: none; border: none; color: #fff; padding: 0; cursor: pointer; text-decoration: none; font: inherit; }
.btn-link:hover { background-color: #990000; color: #fff; }

/* Lightbox modal */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 2rem; }
.lightbox[aria-hidden="false"] { display: flex; }
.lightbox__content { position: relative; max-width: 95vw; max-height: 95vh; }
.lightbox__img { max-width: 95vw; max-height: 85vh; object-fit: contain; box-shadow: 0 0 0 1px #333, 0 10px 40px rgba(0,0,0,.8); }
.lightbox__caption { margin-top: .5rem; text-align: center; color: #ddd; font-size: 1.0rem; }
.lightbox__close { position: absolute; top: -12px; right: -12px; background: #111; border: 1px solid #333; color: #fff; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }
.lightbox__close:hover { background: #990000; }

/* Page-specific helpers */
.group-title { margin-top: 1.25rem; }

/* Home page videos */
.main-video { margin-bottom: 1.5rem; }
.main-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.video-row { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.video-row .thumb iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.video-row.cols-3 .thumb { flex: 1 1 calc((100% - 1.5rem) / 3); }
.video-row.cols-4 .thumb { flex: 1 1 calc((100% - 2.25rem) / 4); }
@media (max-width: 900px) {
  .video-row.cols-3 .thumb,
  .video-row.cols-4 .thumb { flex: 1 1 calc((100% - 0.75rem) / 2); }
}
@media (max-width: 560px) {
  .video-row .thumb { flex: 1 1 100%; }
}