/* DayZ Mask Editor landing page — plain CSS, no build step. Dark theme. */

:root {
  --bg: #2d2d2d;
  --bg-soft: #353535;
  --bg-card: #333;
  --border: #444;
  --text: #d2d2d2;
  --text-dim: #a8a8a8;
  --link: #008cc3;
  --link-hover: #fff;
  --accent: #00a8e8;
  --font: "lucida grande", helvetica, arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
  letter-spacing: .3px;
  text-shadow: 1px 1px #000;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

img { max-width: 100%; height: auto; }

/* ---- layout ---- */
.wrap { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 20px; }

nav.top {
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, .2);
}
nav.top .wrap {
  display: flex; align-items: center; gap: 22px;
  height: 56px;
}
nav.top .brand { display: flex; align-items: center; gap: 10px; font-weight: bold; }
nav.top .brand img { height: 26px; }
nav.top .links { margin-left: auto; display: flex; gap: 22px; }
nav.top a { font-size: 14px; }

footer.site {
  margin-top: 60px;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 12px;
}
footer.site .wrap { padding-top: 22px; padding-bottom: 40px; }

/* ---- headings ---- */
h1 { font-size: 30px; margin: 28px 0 6px; }
h2 { font-size: 20px; margin: 36px 0 12px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.lead { color: var(--text-dim); font-size: 16px; margin: 0 0 8px; }

/* ---- project card grid ---- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin: 26px 0;
}
.card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  color: var(--text);
  transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--text); }
.card .thumb { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--bg-soft); }
.card .body { padding: 14px 16px 18px; }
.card .body h3 { margin: 0 0 6px; font-size: 17px; color: #fff; }
.card .body p { margin: 0; color: var(--text-dim); font-size: 13px; }

/* ---- project hero ---- */
.hero { padding: 18px 0 8px; }
.hero .tagline { color: var(--text-dim); font-size: 17px; margin: 0 0 18px; }

/* ---- download button ---- */
.actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 18px 0 6px; }
.download {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  background: linear-gradient(180deg, #10a2d8 0%, #008cc3 100%);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 8px;
  text-shadow: none;
  border: 1px solid rgba(0, 0, 0, .28);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.download:hover {
  background: linear-gradient(180deg, #1cb3ea 0%, #0a97cf 100%);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 140, 195, .4), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.download:active { transform: translateY(0); box-shadow: 0 2px 5px rgba(0, 0, 0, .35); }
.download svg { width: 20px; height: 20px; flex: none; opacity: .95; }
.download .label { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.download .sub { font-size: 11px; font-weight: 400; opacity: .9; }
.muted { color: var(--text-dim); font-size: 13px; }

/* ---- feature list ---- */
ul.features { list-style: none; padding: 0; margin: 12px 0; }
ul.features li { padding: 6px 0 6px 22px; position: relative; }
ul.features li::before { content: "▪"; color: var(--accent); position: absolute; left: 4px; }

/* ---- screenshot gallery ---- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 16px 0; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; border: 1px solid var(--border); border-radius: 6px; display: block; background: var(--bg-soft); cursor: zoom-in; transition: border-color .15s; }
.gallery img:hover { border-color: var(--accent); }
.gallery figcaption { color: var(--text-dim); font-size: 12px; margin-top: 6px; text-align: center; }

/* ---- lightbox ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .88); padding: 28px; cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox figure { margin: 0; max-width: 96vw; max-height: 96vh; text-align: center; }
.lightbox img { max-width: 96vw; max-height: 86vh; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-soft); }
.lightbox figcaption { color: var(--text); font-size: 13px; margin-top: 12px; text-shadow: 1px 1px #000; }
.lightbox .close {
  position: fixed; top: 14px; right: 22px;
  color: #fff; font-size: 34px; line-height: 1; cursor: pointer; text-shadow: 1px 1px #000;
}
.lightbox .close:hover { color: var(--accent); }

/* ---- documentation layout ---- */
.doc-wrap { max-width: 1120px; }
.doc { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 44px; align-items: start; }

/* sticky table of contents */
.toc { position: sticky; top: 16px; font-size: 13px; padding-top: 8px; }
.toc .toc-title { text-transform: uppercase; letter-spacing: 1px; font-size: 11px; color: var(--text-dim); margin: 0 0 8px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.toc li { margin: 0; }
.toc a { display: block; color: var(--text-dim); padding: 4px 0 4px 12px; margin-left: -1px; border-left: 2px solid transparent; }
.toc a:hover { color: var(--link-hover); }
.toc a.active { color: var(--accent); border-left-color: var(--accent); }

.doc-main { min-width: 0; }
.doc-main h2 { scroll-margin-top: 12px; }
.doc-main h3 { font-size: 16px; margin: 24px 0 8px; color: #fff; scroll-margin-top: 12px; }
.doc-main p { margin: 10px 0; }
.doc-main ul, .doc-main ol { margin: 10px 0; padding-left: 22px; }
.doc-main li { margin: 4px 0; }
.doc-main code { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-size: 12.5px; font-family: Consolas, Menlo, monospace; text-shadow: none; }

/* numbered walkthrough steps */
ol.steps { counter-reset: step; list-style: none; padding-left: 0; }
ol.steps > li { position: relative; padding: 2px 0 12px 40px; margin: 0; }
ol.steps > li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--link); color: #fff; text-shadow: none;
  font-size: 13px; font-weight: bold; text-align: center; line-height: 26px;
}

/* inline screenshot */
figure.shot { margin: 18px 0; }
figure.shot img { width: 100%; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-soft); cursor: zoom-in; transition: border-color .15s; display: block; }
figure.shot img:hover { border-color: var(--accent); }
figure.shot figcaption { color: var(--text-dim); font-size: 12px; margin-top: 6px; }

/* callouts */
.callout { border: 1px solid var(--border); border-left: 3px solid var(--accent); background: rgba(0,0,0,.18); border-radius: 4px; padding: 10px 14px; margin: 16px 0; font-size: 14px; }
.callout p { margin: 4px 0; }
.callout .k { font-weight: bold; color: #fff; }
.callout.tip { border-left-color: #37b24d; }
.callout.warn { border-left-color: #f08c00; }

/* keyboard / mouse reference table */
table.controls { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
table.controls th, table.controls td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.controls th { color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
table.controls td:first-child { white-space: nowrap; }

kbd {
  font-family: Consolas, Menlo, monospace; font-size: 12px; text-shadow: none;
  background: #1c1c1c; color: #eaeaea;
  border: 1px solid #555; border-bottom-width: 2px; border-radius: 4px;
  padding: 1px 6px; white-space: nowrap;
}

@media (max-width: 820px) {
  .doc { grid-template-columns: 1fr; gap: 8px; }
  .toc { position: static; border: 1px solid #d0d7de; border-radius: 6px; padding: 12px 14px; margin-bottom: 8px; }
  .toc ol { border-left: none; }
  .toc a { padding-left: 0; border-left: none; }
}

/* ---- light "paper" reading surface -------------------------------------------------
   The shell (nav, hero, page background, footer) stays dark; the documentation article
   sits on a white card for legibility. Everything below is scoped to .paper so it
   overrides the dark base theme only inside the content area. */
.paper {
  background: #fbfbfa;
  color: #24292f;
  border: 1px solid #d0d7de;
  border-radius: 10px;
  padding: 30px 42px 38px;
  margin: 22px 0 44px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.68;
  letter-spacing: normal;
}
/* kill the dark-theme text shadow that hurts readability on white */
.paper, .paper h2, .paper h3, .paper p, .paper li,
.paper td, .paper th, .paper figcaption, .paper .toc a, .paper code, .paper kbd {
  text-shadow: none;
}

.paper .doc-main { max-width: 780px; }
.paper .doc-main p, .paper .doc-main li { font-size: 15.5px; }

/* headings & links on white */
.paper h2 { color: #1f2328; border-bottom-color: #d0d7de; }
.paper h3 { color: #1f2328; }
.paper a { color: #0969da; }
.paper a:hover { color: #0a4ea3; text-decoration: underline; }
.paper .download, .paper .download:hover { color: #fff; text-decoration: none; }
.paper strong { color: #1f2328; }
.paper .muted { color: #57606a; }
.paper em { color: #1f2328; }

/* inline code */
.paper code { background: #eff1f3; border-color: #d0d7de; color: #24292f; }

/* table of contents on white */
.paper .toc-title { color: #8b949e; }
.paper .toc ol { border-left-color: #d0d7de; }
.paper .toc a { color: #57606a; }
.paper .toc a:hover { color: #1f2328; }
.paper .toc a.active { color: #0969da; border-left-color: #0969da; font-weight: 600; }

/* screenshots */
.paper figure.shot img { border-color: #d0d7de; background: #f6f8fa; }
.paper figure.shot figcaption { color: #57606a; }

/* callouts — soft tinted backgrounds with dark text */
.paper .callout { background: #f6f8fa; border-color: #d0d7de; border-left-color: #0969da; color: #24292f; }
.paper .callout .k { color: #1f2328; }
.paper .callout.tip { background: #eaf7ee; border-color: #cae9d4; border-left-color: #2da44e; }
.paper .callout.warn { background: #fff8e6; border-color: #f3e2b8; border-left-color: #d29922; }

/* controls table */
.paper table.controls th { color: #57606a; }
.paper table.controls th, .paper table.controls td { border-bottom-color: #d0d7de; }
.paper table.controls tbody tr:hover td { background: #f6f8fa; }

/* keyboard keys — classic light key look */
.paper kbd {
  background: #f6f8fa; color: #24292f;
  border: 1px solid #afb8c1; border-bottom-width: 2px; border-radius: 4px;
}

@media (max-width: 820px) {
  .paper { padding: 22px 18px 28px; }
  .paper .toc { background: #f6f8fa; border-color: #d0d7de; }
}