/**
 * XCSoar — site layer on Bootstrap 5.3.8.
 * Theme: xcsoar-{blue|green|red}.css (after this file).
 * Screenshots grid + carousel: screenshots.css (only if page.lightbox or page.carousel).
 *
 * Body/UI: DejaVu Sans (self-hosted woff2), same family as the navbar title SVG wordmark.
 */

/* --- Fonts --- */
@font-face {
  font-family: "DejaVu Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dejavu-sans-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "DejaVu Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/dejavu-sans-latin-700-normal.woff2") format("woff2");
}

/* --- Base --- */
:root {
  --bs-font-sans-serif: "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
  /* Navbar: <mark> <wordmark> + <page title> — one type rhythm */
  --navbar-brand-line-font-size: 1.5rem;
  --navbar-brand-line-line-height: 1.35;
  --navbar-brand-line-letter-spacing: 0.015em;
  --navbar-brand-wordmark-font-weight: 700;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--bs-font-sans-serif);
  font-size: 1.0625rem;
  color: #453c37;
  line-height: 1.6;
}

a:link {
  text-decoration: none;
}
/* Exclude navbar brand: underline on flex link propagates to wordmark; :not avoids fighting it */
a:hover:not(#logo) {
  text-decoration: underline;
}

hr {
  border: 0;
  border-top: 1px dotted #9f9c99;
}

blockquote {
  border-left: 0.25rem solid #ccc;
  padding-left: 0.75rem;
  margin: 0 0 1rem;
}

/* White content card on textured body background */
.shadowed {
  background: #fff;
  width: 97%;
  max-width: 87.5rem;
  margin: 1rem auto 0;
  padding: 1rem 0 1.5rem;
  box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.35);
  overflow-x: hidden;
}

#primary {
  padding-top: 0.5rem;
}

/* Navbar: logo + wordmark – page title (one line; page title subordinate to brand) */
#primary .navbar {
  border-bottom: 1px dotted #9f9c99;
  padding-bottom: 0.45rem;
  margin-bottom: 0.65rem;
}

/* Bootstrap’s .container-fluid under .navbar is already flex; align brand + page title + toggler */
.navbar > .container-fluid.navbar-top-line {
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
}

@media (min-width: 768px) {
  .navbar-expand-md > .container-fluid.navbar-top-line {
    flex-wrap: nowrap;
  }
}

.navbar-top-line__brand {
  min-width: 0;
  gap: 0.5rem;
}

.navbar-top-line__brand .navbar-brand {
  flex-shrink: 0;
}

/* Page title (navbar) and home hero title share the same type rhythm */
#primary h1.navbar-page-title,
.home-page-title {
  font-family: inherit;
  font-size: var(--navbar-brand-line-font-size);
  font-weight: 400;
  line-height: var(--navbar-brand-line-line-height);
  letter-spacing: var(--navbar-brand-line-letter-spacing);
  color: #6c757d;
}

#primary h1.navbar-page-title {
  flex: 1 1 5rem;
  min-width: 0;
}

.home-page-title-row {
  padding: 0.35rem 0 0.85rem;
  margin-bottom: 0.15rem;
}

.home-page-title {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

/* Navbar brand: linked mark + plain wordmark (no self-link on “XCSoar” text) */
.navbar-brand.navbar-brand--split {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: inherit;
  font-size: var(--navbar-brand-line-font-size);
  line-height: var(--navbar-brand-line-line-height);
  text-decoration: none;
}
a#logo.navbar-brand__mark-link,
a#logo.navbar-brand__mark-link:link,
a#logo.navbar-brand__mark-link:visited,
a#logo.navbar-brand__mark-link:hover,
a#logo.navbar-brand__mark-link:focus,
a#logo.navbar-brand__mark-link:focus-visible,
a#logo.navbar-brand__mark-link:active {
  text-decoration: none !important;
  text-decoration-line: none !important;
}
a#logo.navbar-brand__mark-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.navbar-brand--split .navbar-brand__mark {
  height: 1.2em;
  width: auto;
  flex-shrink: 0;
  vertical-align: middle;
  display: block;
}
.navbar-brand--split .navbar-brand__wordmark {
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--navbar-brand-wordmark-font-weight);
  line-height: inherit;
  letter-spacing: var(--navbar-brand-line-letter-spacing);
  color: #141414;
  flex-shrink: 0;
  user-select: none;
}
.navbar-brand--split .navbar-brand__wordmark--red {
  color: #d01717;
}
.navbar-brand--split .navbar-brand__wordmark--green {
  color: #2a8033;
}
/* Nav: compact uppercase; theme sheet sets global `a` colours */
.navbar-nav .nav-link {
  color: #6c757d;
  text-transform: uppercase;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  text-decoration: underline;
}
.navbar-nav .nav-link.active {
  font-weight: 600;
}

.nav-link-icon {
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: middle;
}

/* Map popup HTML built in JS (download/maps OpenLayers pages) */
.map-popup {
  margin: 0;
  padding: 5px;
}

.map-popup__title {
  font-size: 1.7em;
}

/* News archive (news-archive.html) */
.news-archive__back {
  margin-bottom: 1.5rem;
}

.news-archive__intro {
  color: #6c757d;
  margin-bottom: 1rem;
}

.news-archive-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.news-archive-list__item {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.news-archive-list__meta {
  color: #6c757d;
  font-size: 0.875rem;
}

/* Footer sits on body background (outside .shadowed) */
footer {
  margin-top: 1rem;
}
footer,
footer a {
  color: #fff !important;
  font-size: 0.875rem;
}
footer a:hover {
  color: #e7f0f7 !important;
  text-decoration: underline;
}

/* Simple layout (imprint, hardware) */
.row.simple-page > article {
  max-width: 45rem;
  margin-right: auto;
  margin-top: 1rem;
  padding-bottom: 2rem;
}

address.imprint-address {
  font-style: normal;
  margin: 0.75rem 0 1.25rem;
  line-height: 1.6;
}

/* Screenshot gallery + carousel: /css/screenshots.css (when page.lightbox or page.carousel) */

/* Download pages: platform icons on list items (Kramdown {:.list-item-*} ) */
ul:has(> li[class*="list-item-"]) {
  list-style: none;
  padding-left: 0;
}

li[class*="list-item-"] {
  list-style: none;
  padding-left: 1.75rem;
  margin-bottom: 0.35rem;
  background-repeat: no-repeat;
  background-position: 0 0.2rem;
  background-size: 1.25rem 1.25rem;
}

li.list-item-data { background-image: url("/img/icon-globe.png"); }
li.list-item-windows { background-image: url("/img/icon-windows.png"); }
li.list-item-wince { background-image: url("/img/icon-windows-mobile.png"); }
li.list-item-android { background-image: url("/img/icon-android.png"); }
li.list-item-debian,
li.list-item-unix { background-image: url("/img/icon-debian.svg"); }
li.list-item-cubie { background-image: url("/img/icon-cubie.svg"); }
li.list-item-pi { background-image: url("/img/icon-pi.svg"); }
li.list-item-mac { background-image: url("/img/icon-apple.png"); }
li.list-item-kobo { background-image: url("/img/icon-kobo.svg"); }
li.list-item-xcsoar { background-image: url("/img/icon-xcsoar.png"); }
li.list-item-linux { background-image: url("/img/icon-pi.svg"); }

/* News / posts: normal nested lists (avoid stealing download rules) */
:is(article, main) ul:not(:has(> li[class*="list-item-"])),
:is(article, main) ol:not(:has(> li[class*="list-item-"])) {
  padding-left: 1.25rem;
}

:is(article, main) ul ul,
:is(article, main) ol ol {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}