/* DL6ZB static site – custom styles on top of Pico CSS v2 */
:root {
  --dl6zb-accent: #c8102e;
}
html { scroll-behavior: smooth; }
body { line-height: 1.7; }

/* Narrower reading column than Pico's default container */
.container { max-width: 960px; }

/* Header / navigation */
.site-header {
  border-bottom: 1px solid var(--pico-muted-border-color);
  margin-bottom: 1.5rem;
}
.site-header nav { flex-wrap: wrap; }
.site-header nav ul { flex-wrap: wrap; }
.site-header nav ul li { padding-top: .5rem; padding-bottom: .5rem; }
.site-header .brand { text-decoration: none; }
.site-header .brand strong {
  font-family: ui-monospace, "DejaVu Sans Mono", Consolas, monospace;
  font-size: 1.25rem;
  letter-spacing: .04em;
  color: var(--dl6zb-accent);
}
.site-header .brand small { color: var(--pico-muted-color); margin-left: .35rem; }
.site-header nav a[aria-current="page"] { font-weight: 700; }
@media (max-width: 575px) {
  .site-header nav { justify-content: center; }
  .site-header .brand small { display: none; }
  .site-header nav ul:last-child li { padding: .15rem .1rem; }
  .site-header nav ul:last-child a { font-size: .9rem; }
}

/* Breadcrumb */
nav[aria-label="breadcrumb"] { font-size: .875rem; margin-bottom: .5rem; }

/* Content (the main <article> is not a Pico card) */
article.content { background: none; box-shadow: none; padding: 0; margin-bottom: 0; }
.content h1 { margin-bottom: .75rem; }
.content h2 { margin-top: 2.25rem; }
.content h3 { margin-top: 1.75rem; }
.content .kicker {
  margin-bottom: .25rem;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--dl6zb-accent);
}
.content .kicker em { font-style: normal; }
.content pre { white-space: pre-wrap; word-break: break-word; }
.content code { word-break: break-word; }
.content img { max-width: 100%; height: auto; }

/* Figures: schematics and photos; tap/click opens the full-size file */
figure { margin: 0 0 1.5rem; }
figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: #fff;            /* schematics with transparency stay readable in dark mode */
}
figure a { display: inline-block; max-width: 100%; }
figcaption {
  margin-top: .4rem;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--pico-muted-color);
}
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  align-items: start;
  margin-bottom: 1.5rem;
}
.gallery figure { margin: 0; }
.gallery figure a, .gallery figure img { width: 100%; }
.gallery figure img { aspect-ratio: 4 / 3; object-fit: contain; }
figure.group > figcaption { margin-top: -.75rem; }

/* Wide tables scroll horizontally on small screens */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--pico-spacing); }
.table-wrap table { margin-bottom: 0; }
.table-wrap td, .table-wrap th { white-space: nowrap; }
@media (min-width: 768px) { .table-wrap td, .table-wrap th { white-space: normal; } }

/* Project fact box ("Steckbrief") */
.factbox {
  width: 100%;
  max-width: 26rem;
  margin: 0 0 1.5rem;
  border-collapse: collapse;
  font-size: .925rem;
  border: 2px solid var(--pico-muted-border-color);
  border-left: 8px solid var(--dl6zb-accent);
  background: var(--pico-card-background-color);
}
.factbox caption {
  caption-side: top;
  text-align: left;
  padding: .35rem .75rem;
  background: #3a3f44;
  color: #fff;
  font: 700 .8rem/1.4 ui-monospace, "DejaVu Sans Mono", Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.factbox th, .factbox td {
  padding: .35rem .75rem;
  border-bottom: 1px dashed var(--pico-muted-border-color);
  vertical-align: top;
  text-align: left;
  background: transparent;
}
.factbox tr:last-child th, .factbox tr:last-child td { border-bottom: 0; }
.factbox th {
  width: 38%;
  font: 600 .8rem/1.6 ui-monospace, "DejaVu Sans Mono", Consolas, monospace;
  color: var(--pico-muted-color);
}
@media (min-width: 900px) {
  .factbox { float: right; margin: .25rem 0 1rem 1.5rem; }
  .content figure, .content .gallery, .content .table-wrap, .content hr { clear: both; }
}

/* Home page */
.hero-images { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.hero-images figure { margin: 0; flex: 1 1 240px; }
.hero-images a { display: block; }
.hero-images img { width: 100%; height: 200px; object-fit: cover; }
.station { font-size: 1.05rem; }
.station .call {
  font-family: ui-monospace, "DejaVu Sans Mono", Consolas, monospace;
  color: var(--dl6zb-accent);
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.cards article { margin: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.cards article .thumb {
  display: block;
  height: 150px;
  background: #fff;
  border-bottom: 1px solid var(--pico-muted-border-color);
}
.cards article .thumb img { width: 100%; height: 100%; object-fit: contain; border: 0; }
.cards article .body { padding: .75rem 1rem 1rem; }
@media (max-width: 575px) { .cards article .thumb { height: 120px; } }
.cards article h3 { font-size: 1.05rem; margin-top: 0; margin-bottom: .4rem; }
.cards article p { font-size: .9rem; margin-bottom: 0; color: var(--pico-muted-color); }
.cards article.plain .body { padding-top: 1rem; }
.badge {
  display: inline-block;
  font-size: .7rem;
  padding: .05rem .4rem;
  border-radius: 1rem;
  background: var(--dl6zb-accent);
  color: #fff;
  vertical-align: middle;
  margin-left: .25rem;
}

/* Prev / next */
.pager { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 2.5rem 0 1rem; font-size: .9rem; }

/* Draft note (Datenschutz) */
.draft-note {
  border-left: 6px solid var(--dl6zb-accent);
  padding: .75rem 1rem;
  background: var(--pico-card-background-color);
}

/* Footer */
.site-footer {
  margin-top: 3rem;
  padding: 1.5rem 0 2rem;
  border-top: 1px solid var(--pico-muted-border-color);
  font-size: .875rem;
  color: var(--pico-muted-color);
}
.site-footer p { margin-bottom: .5rem; }
.site-footer a { margin-right: 1rem; }

/* Back / Home buttons (top: below breadcrumb, bottom: above footer) */
.page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: .5rem;
  margin: .25rem 0 1.25rem;
}
.page-actions-bottom {
  clear: both;
  margin: 2rem 0 .5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--pico-muted-border-color);
}
.page-actions a[role="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;          /* ~44 px touch target */
  min-width: 5.5rem;
  padding: .35rem 1rem;
  font-size: .875rem;
  line-height: 1.2;
}
@media (max-width: 575px) {
  .page-actions a[role="button"] { flex: 1 1 0; }
}

/* Prominent download button (ZB Keyer user manual) */
.manual-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 1rem 0 1.5rem; }
.manual-cta a[role="button"] { background: var(--dl6zb-accent); border-color: var(--dl6zb-accent); color: #fff; font-weight: 600; }
.manual-cta a[role="button"]:hover, .manual-cta a[role="button"]:focus { background: #a50d26; border-color: #a50d26; }
.manual-cta small { color: var(--pico-muted-color); }