/* WS Home Page - home.css
   Same content and section order as before; the layout is now responsive
   (no fixed-width tables), the fonts are the system fonts of each platform,
   and every colour is defined once here. */

:root {
  --navy: #003366;          /* top bar, headings */
  --blue: #1f6fd1;          /* links */
  --sky: #9acdff;           /* button hover, as before */
  --btn: #e9eef5;           /* buttons */
  --btn-border: #b7c3d3;
  --text: #303030;
  --muted: #666666;
  --line: #d9dee6;
  --highlight: #cc0000;     /* the red download line */
  --ground: #ffffff;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* internal links (#download, #userguide, ...) stop below the sticky bar,
   so the heading itself stays visible */
[id] { scroll-margin-top: 72px; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
a { color: var(--blue); }
a:hover { color: var(--navy); }
img { max-width: 100%; height: auto; }

/* --- Top navigation bar --- */
#topnav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--navy);
  color: #fff;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.topnav-home {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1em;
  letter-spacing: .04em;
}
.topnav-home:hover {
  color: var(--sky);   /* oder direkt #9acdff */
}
.topnav-right { display: flex; flex-wrap: wrap; gap: 8px; }
.topnav-btn {
  background: var(--btn);
  color: #000;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid var(--btn-border);
  text-decoration: none;
  font-size: 0.9em;
}
.topnav-btn:hover { background: var(--sky); color: #000; }

/* --- Page column --- */
.page {
  max-width: 1040px;            /* the three screenshots (284 + 284 + 414 px) fit side by side */
  margin: 0 auto;
  padding: 0 16px 32px;
}

/* --- Logo row: header graphic left, SourceForge badge right --- */
.logo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0 8px;          /* no rule below: the header graphic carries its own */
}
.logo-row .logo img { width: min(100%, 700px); height: auto; display: block; }
.logo-row .sf-root { flex: none; }
@media (max-width: 600px) {
  .logo-row { flex-direction: column; align-items: flex-start; }
}

/* --- Text --- */
h1 {
  color: var(--navy);
  font-size: 1.45em;
  font-weight: 700;
  margin: 2em 0 .5em;
  padding-bottom: .2em;
  border-bottom: 2px solid var(--line);
}
main > h1:first-child { margin-top: 1.2em; }
p { margin: 0 0 .9em; }
ul, ol { margin: 0 0 1em 1.5em; padding: 0; line-height: 1.6; }
li { margin-bottom: .3em; }
.red { color: var(--highlight); }
.highlight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  color: var(--highlight);
  font-weight: 700;
  font-size: 1.1em;
}
.highlight .btn { font-weight: 700; font-size: 1em; }
.callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  color: #8a8a00;
  font-weight: 700;
  font-size: 1.05em;
}

/* --- Screenshots --- */
.shots {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0 16px;
}
.shots a { display: block; }
.shots img {
  height: 341px;
  width: auto;
  border: 1px solid #999;
  display: block;
}
@media (max-width: 700px) {
  .shots img { height: auto; width: 100%; }
}

/* --- Buttons (download, user guide languages) --- */
.buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 16px 0 24px;
}
.buttons.langs { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.btn {
  display: inline-block;
  padding: 8px 12px;
  background: var(--btn);
  border: 1px solid var(--btn-border);
  border-radius: 5px;
  text-align: center;
  font-size: 0.95em;
  color: #000;
  text-decoration: none;
}
.btn:hover { background: var(--sky); color: #000; }
.btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.btn.primary:hover { background: #0b4a8c; }

/* --- Footer --- */
footer {
  margin-top: 40px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: .9em;
  color: var(--muted);
}