@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");

/* BitArkivo — stilo inspirita de bitarkivo.org */

:root {
  --verda: #009900;
  --nigra: #000000;
  --blanka: #ffffff;
  --papero: #f5f0e8;
  --griz-fono: #e7e7e7;
}

body {
  background-color: var(--papero);
  font-family: "Inter", system-ui, -apple-system, Arial, sans-serif;
}

.navbar-default {
  background-color: var(--griz-fono);
  border-color: #dadada;
}

.navbar-logo {
  height: 28px;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
}

.telegram-ikono {
  width: 22px;
  height: 22px;
  fill: #2aabee;
  vertical-align: middle;
  margin-top: -2px;
}

.telegram-ikono--titolo {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  margin-top: -3px;
}

.navbar-default .navbar-nav > li > a:hover .telegram-ikono,
.navbar-default .navbar-nav > li > a:focus .telegram-ikono {
  fill: #5bc0f7;
}

.navbar-telegram,
.navbar-akcesibileco {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.navbar-telegram .telegram-ikono,
.navbar-akcesibileco .akcesibla-ikono {
  display: block;
  margin-top: 0;
}

.akcesibla-ikono {
  width: 22px;
  height: 22px;
  color: #1565c0;
  vertical-align: middle;
  margin-top: -2px;
}

.navbar-default .navbar-nav > li > a:hover .akcesibla-ikono,
.navbar-default .navbar-nav > li > a:focus .akcesibla-ikono {
  color: #42a5f5;
}

.main-content {
  padding-top: 20px;
  padding-bottom: 10px;
}

/* Hejmo */
.bitarkivo-jumbotron {
  background-color: var(--griz-fono);
  color: var(--nigra);
  border-radius: 6px;
}

.jumbotron-interna {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
}

.jumbotron-teksto {
  min-width: 0;
}

.jumbotron-teksto p:last-child {
  margin-bottom: 0;
}

.logo-granda {
  grid-column: 1 / -1;
  justify-self: start;
  max-width: 420px;
  width: auto;
  display: block;
}

.avatar-granda {
  flex-shrink: 0;
  width: 120px;
  border-radius: 8px;
  align-self: center;
}

.bitarkivo-jumbotron .badge {
  background-color: var(--verda);
  font-size: 1.1em;
}

.retlisto-abono-banero {
  position: relative;
  margin: 0 0 24px;
  padding: 16px 36px 16px 18px;
  background-color: var(--griz-fono);
  border: 1px solid #dadada;
  border-radius: 6px;
}

.retlisto-abono-fermi {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  color: #777;
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}

.retlisto-abono-fermi:hover,
.retlisto-abono-fermi:focus {
  color: #333;
  outline: none;
}

.retlisto-abono-interna {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.retlisto-abono-teksto {
  flex: 1 1 220px;
  min-width: 0;
}

.retlisto-abono-teksto h4 {
  margin: 0 0 4px;
  font-size: 18px;
}

.retlisto-abono-teksto p {
  margin: 0;
  color: #555;
}

.retlisto-abono-formo {
  flex: 1 1 280px;
  min-width: 0;
  max-width: 420px;
}

.retlisto-abono-formo .input-group {
  width: 100%;
}

.retlisto-abono-mesaĝo {
  margin: 8px 0 0;
  font-size: 13px;
}

.retlisto-abono-mesaĝo--sukceso {
  color: var(--verda);
}

.retlisto-abono-mesaĝo--eraro {
  color: #a94442;
}

@media (max-width: 767px) {
  .retlisto-abono-interna {
    flex-direction: column;
    align-items: stretch;
  }

  .retlisto-abono-formo {
    max-width: none;
  }
}

/* Gazetoj-hejmo: listo vs galerio */
.gazetoj-ilo-strio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 15px;
}

.gazetoj-ilo-grupo {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.gazetoj-serĉo-strio {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  width: 100%;
}

.gazetoj-eksporti-grupo {
  margin-left: auto;
  flex-shrink: 0;
}

.gazetoj-eksporti-buto {
  padding-left: 10px;
  padding-right: 10px;
}

.gazetoj-filtri-forigi-buto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #c9302c;
  font-size: 1.35em;
  line-height: 1;
  padding: 4px 6px;
  text-decoration: none;
}

.gazetoj-filtri-forigi-buto:hover,
.gazetoj-filtri-forigi-buto:focus {
  color: #ac2925;
  text-decoration: none;
}

.gazetoj-filtri-reseti-buto {
  color: #c9302c;
  font-size: 1.35em;
  line-height: 1;
  padding: 6px 8px;
  text-decoration: none;
}

.gazetoj-filtri-reseti-buto:hover,
.gazetoj-filtri-reseti-buto:focus {
  color: #ac2925;
  text-decoration: none;
}

.btn.btn-default.gazetoj-filtri-buto--aktiva {
  background-color: #e7e7e7;
  background-image: none;
  border-color: #c9302c;
  color: #c9302c;
  box-shadow: none;
}

.btn.btn-default.gazetoj-filtri-buto--aktiva .glyphicon {
  color: #c9302c;
}

.btn.btn-default.gazetoj-filtri-buto--aktiva:hover,
.btn.btn-default.gazetoj-filtri-buto--aktiva:focus,
.btn.btn-default.gazetoj-filtri-buto--aktiva:active {
  background-color: #d8d8d8;
  background-image: none;
  border-color: #ac2925;
  color: #ac2925;
  box-shadow: none;
}

.btn.btn-default.gazetoj-filtri-buto--aktiva:hover .glyphicon,
.btn.btn-default.gazetoj-filtri-buto--aktiva:focus .glyphicon,
.btn.btn-default.gazetoj-filtri-buto--aktiva:active .glyphicon {
  color: #ac2925;
}

.gazetoj-filtri-grupo {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.gazetoj-filtro-banero {
  margin: 0;
}

.gazetoj-filtro-banero .label {
  margin-right: 4px;
}

.gazetoj-katalogi-banero {
  margin: 12px 0 16px;
}

.gazetoj-filtri-autoro-serĉo {
  margin-bottom: 6px;
}

.jaro-slidilo {
  padding: 4px 0 8px;
}

.jaro-slidilo-valoroj {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  margin-bottom: 10px;
}

.jaro-slidilo-spaco {
  position: relative;
  height: 28px;
}

.jaro-slidilo-streko,
.jaro-slidilo-selekto {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  border-radius: 3px;
}

.jaro-slidilo-streko {
  left: 0;
  right: 0;
  background: #ddd;
}

.jaro-slidilo-selekto {
  background: var(--verda);
  pointer-events: none;
}

.jaro-slidilo input[type="range"] {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.jaro-slidilo input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--nigra);
  border: 2px solid var(--blanka);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  pointer-events: auto;
}

.jaro-slidilo input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--nigra);
  border: 2px solid var(--blanka);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  pointer-events: auto;
}

.jaro-slidilo-gxis {
  z-index: 2;
}

.jaro-slidilo-de {
  z-index: 1;
}

.gazetoj-vido-ŝanĝilo .btn.active {
  background-color: var(--nigra);
  color: var(--blanka);
  border-color: var(--nigra);
}

/* Jaroj-statistikoj */
.gazetoj-jaroj-avizo {
  margin: 0 0 16px;
}

.gazetoj-jaroj-filtrilo {
  margin-bottom: 20px;
  width: 100%;
}

.gazetoj-jaroj-filtrilo .control-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.gazetoj-jaroj-grafiko-kontenero {
  overflow-x: auto;
  padding-bottom: 8px;
}

.gazetoj-jaroj-grafiko {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  min-height: 220px;
  min-width: min-content;
  padding: 0 4px 4px;
}

.gazetoj-jaroj-stango {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: 28px;
}

.gazetoj-jaroj-stango-spaco {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 180px;
  width: 100%;
}

.gazetoj-jaroj-balko {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 4px;
  margin: 0;
  padding: 2px 0;
  border: none;
  border-radius: 3px 3px 0 0;
  background-color: var(--verda);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.gazetoj-jaroj-balko:hover,
.gazetoj-jaroj-balko:focus {
  background-color: #2a7a2a;
  outline: none;
}

.gazetoj-jaroj-nombro {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 11px;
  line-height: 1;
  color: var(--blanka);
  font-weight: 600;
  user-select: none;
}

.gazetoj-jaroj-etikedo {
  margin-top: 6px;
  font-size: 10px;
  color: #666;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  white-space: nowrap;
}

.gazetoj-galerio {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
}

.gazetoj-galerio-elemento {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  max-width: 200px;
  margin: 0;
  text-align: center;
}

.gazetoj-galerio-ligo {
  display: block;
  width: auto;
  max-width: 200px;
}

.gazetoj-galerio .kovrilo-galerio {
  height: 180px;
  width: auto;
  max-width: 200px;
  aspect-ratio: unset;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.gazetoj-galerio-ligo:hover .kovrilo-galerio {
  transform: scale(1.03);
}

.gazetoj-galerio .kovrilo-galerio-placeholder {
  height: 180px;
  width: 127px;
  max-width: 200px;
  aspect-ratio: unset;
  margin: 0 auto;
}

.gazetoj-galerio-elemento--kompleta .kovrilo-galerio,
.gazetoj-galerio-elemento--kompleta .kovrilo-galerio-placeholder {
  border: 2px solid rgba(0, 153, 0, 0.45);
  border-radius: 4px;
  box-sizing: border-box;
}

.gazetoj-galerio-titolo,
.gazetoj-galerio-meta,
.gazetoj-galerio-jaroj {
  display: block;
  width: 100%;
  max-width: 200px;
}

.gazetoj-galerio-titolo {
  font-size: 0.95em;
  margin: 8px 0 0;
  line-height: 1.3;
}

.gazetoj-galerio-titolo a {
  color: var(--nigra);
}

.gazetoj-galerio-meta {
  font-size: 0.85em;
  color: #444;
  margin: 4px 0 0;
}

.gazetoj-galerio-kompleta {
  margin-left: 6px;
}

.gazetoj-galerio-jaroj {
  font-size: 0.8em;
  color: #666;
  margin: 2px 0 0;
}

.gazetoj-vorto-serĉo-formo {
  display: flex;
  flex: 0 0 auto;
  margin-bottom: 0;
}

.gazetoj-vorto-serĉo-formo .input-group {
  width: 180px;
}

.gazetoj-litero-filtrilo {
  margin-bottom: 12px;
}

.gazetoj-litero-filtrilo-etikedo {
  font-weight: bold;
  margin-right: 8px;
  white-space: nowrap;
}

.gazetoj-litero-filtrilo-literoj {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.gazetoj-litero-filtrilo-literoj--labortable {
  flex: 1 1 auto;
  min-width: 0;
}

.gazetoj-litero-filtrilo--labortable > .gazetoj-eksporti-grupo {
  margin-left: auto;
}

.gazetoj-litero-filtrilo--labortable {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  gap: 6px;
}

.gazetoj-litero-buto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8em;
  padding: 2px 6px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  color: var(--nigra);
  font-size: 0.9em;
  line-height: 1.4;
  cursor: pointer;
}

.gazetoj-litero-buto:hover,
.gazetoj-litero-buto:focus {
  border-color: var(--nigra);
  outline: none;
}

.gazetoj-litero-buto--aktiva {
  background-color: var(--nigra);
  border-color: var(--nigra);
  color: var(--blanka);
}

/* Gazetoj-tabelo */
.gazetoj-tabelo-priskribo {
  margin-left: 0.35em;
  font-weight: normal;
  font-style: italic;
  color: #777;
}

.gazetoj-admin-ligo {
  margin-left: 0.35em;
  color: #999;
  font-size: 0.85em;
  text-decoration: none;
}

.gazetoj-admin-ligo:hover,
.gazetoj-admin-ligo:focus {
  color: #333;
  text-decoration: none;
}

@media (max-width: 767px) {
  .gazetoj-ilo-strio {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }

  .gazetoj-vido-ŝanĝilo {
    display: none;
  }

  .gazetoj-serĉo-strio,
  .gazetoj-litero-filtrilo--labortable {
    display: none;
  }

  .gazetoj-vido--listo .table-responsive {
    overflow: visible;
    border: none;
  }

  .gazetoj-tabelo,
  .gazetoj-tabelo tbody,
  .gazetoj-tabelo tr,
  .gazetoj-tabelo td {
    display: block;
    width: 100%;
  }

  .gazetoj-tabelo thead {
    display: none;
  }

  .gazetoj-tabelo tbody tr {
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  }

  .gazetoj-tabelo tbody tr:hover {
    background-color: #fff;
  }

  .gazetoj-tabelo-vico--kompleta {
    border-color: rgba(0, 153, 0, 0.45);
  }

  .gazetoj-tabelo td {
    border: none;
    padding: 4px 0;
    text-align: left;
  }

  .gazetoj-tabelo td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72em;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
  }

  .gazetoj-tabelo-celo--nomo::before {
    display: none;
  }

  .gazetoj-tabelo-celo--nomo {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 8px;
    padding-top: 0;
  }

  .gazetoj-tabelo-celo--nomo a {
    color: var(--nigra);
  }

  .gazetoj-tabelo-celo--nomo .gazetoj-tabelo-priskribo {
    font-weight: normal;
  }

  .gazetoj-tabelo-celo--komenco,
  .gazetoj-tabelo-celo--fino {
    display: inline-block;
    width: auto;
    padding-right: 0;
  }

  .gazetoj-tabelo-celo--komenco::before {
    content: "Jaroj";
  }

  .gazetoj-tabelo-celo--fino::before {
    display: none;
  }

  .gazetoj-tabelo-celo--komenco:not(:empty):has(+ .gazetoj-tabelo-celo--fino:not(:empty))::after {
    content: " – ";
  }

  .gazetoj-tabelo-celo--fino:empty {
    display: none;
  }

  .gazetoj-tabelo-celo--lando:empty {
    display: none;
  }
}

/* Gazeto-detalo */
.kradvortoj {
  margin-bottom: 15px;
}

.kradvortoj .label,
.kradvortoj-filtro .label {
  background-color: var(--verda);
  font-size: 0.9em;
  margin-right: 4px;
}

.kradvortoj a.label {
  display: inline-block;
  text-decoration: none;
  color: var(--blanka);
}

.kradvortoj a.label:hover,
.kradvortoj a.label:focus {
  background-color: #2a7a2a;
  color: var(--blanka);
  text-decoration: none;
}

.kradvortoj-filtro {
  margin-bottom: 15px;
}

.gazeto-etikedoj-strio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em 0.45em;
  margin-top: 12px;
  margin-bottom: 0;
}

.gazeto-etikedoj-strio .kradvortoj {
  margin-bottom: 0;
}

.gazeto-etikedoj-strio .gazeto-lokaj-filtriloj {
  margin-left: auto;
}

.gazeto-lingvoj-filtriloj {
  margin-bottom: 0;
}

.gazeto-atributoj-tabelo .kradvortoj .label {
  margin-bottom: 4px;
}

.gazeto-lokaj-filtriloj {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35em 0.45em;
  max-width: 100%;
}

.gazeto-loko-ikono {
  color: #555;
  font-size: 1.1em;
  line-height: 1;
}

a.gazeto-loko-ikono {
  text-decoration: none;
}

a.gazeto-loko-ikono:hover,
a.gazeto-loko-ikono:focus {
  color: #00897b;
}

.gazeto-loko-etikedo {
  display: inline-block;
  font-size: 0.9em;
  font-weight: normal;
  text-decoration: none;
  color: #fff;
  border: none;
}

.gazeto-loko-etikedo--urbo {
  background-color: #00897b;
}

.gazeto-loko-etikedo--urbo:hover,
.gazeto-loko-etikedo--urbo:focus {
  background-color: #00695c;
  color: #fff;
  text-decoration: none;
}

.gazeto-loko-etikedo--lando {
  background-color: #1565c0;
}

.gazeto-loko-etikedo--lando:hover,
.gazeto-loko-etikedo--lando:focus {
  background-color: #0d47a1;
  color: #fff;
  text-decoration: none;
}

.gazeto-loko-etikedo--kontinento {
  background-color: #7b1fa2;
}

.gazeto-loko-etikedo--kontinento:hover,
.gazeto-loko-etikedo--kontinento:focus {
  background-color: #4a148c;
  color: #fff;
  text-decoration: none;
}

/* Vikipedio-snippet (kiel DokuWiki {{wp:eo>…}}) */
.vikipedio-snippet {
  background-color: #ebebeb;
  border-radius: 5px;
  margin-bottom: 20px;
}

.vikipedio-snippet > dt {
  border-bottom: 1px solid #ccc;
  font-size: 1.15em;
  padding: 0.2em 1em;
}

.vikipedio-snippet > dt em {
  font-size: 0.85em;
  font-style: normal;
  margin-right: 0.35em;
}

.vikipedio-snippet > dt a {
  font-weight: bold;
}

.vikipedio-snippet > dd {
  margin: 0;
  padding: 0.7em 1em 0;
  overflow: hidden;
}

.vikipedio-snippet-bildo {
  float: right;
  max-width: 120px;
  height: auto;
  margin: 0 0 0.5em 1em;
  border-radius: 4px;
}

.vikipedio-snippet-teksto {
  margin: 0 0 0.7em;
  line-height: 1.5;
}

.vikipedio-licenco {
  border-top: 1px solid #ccc;
  font-size: 0.85em;
  margin: 0;
  padding: 0.4em 0 0.7em;
}

.vikipedio-snippet a {
  color: var(--verda);
}

/* Enhavo-snippetoj (gazeto, vikidatumo) — sama stilo kiel vikipedio */
.gazeto-snippet,
.vikidatumo-snippet {
  background-color: #ebebeb;
  border-radius: 5px;
  margin-bottom: 20px;
}

.gazeto-snippet > dt,
.vikidatumo-snippet > dt {
  border-bottom: 1px solid #ccc;
  font-size: 1.15em;
  padding: 0.2em 1em;
}

.gazeto-snippet > dt em,
.vikidatumo-snippet > dt em {
  font-size: 0.85em;
  font-style: normal;
  margin-right: 0.35em;
}

.gazeto-snippet > dt a,
.vikidatumo-snippet > dt a {
  font-weight: bold;
}

.gazeto-snippet > dd,
.vikidatumo-snippet > dd {
  margin: 0;
  padding: 0.7em 1em;
  overflow: hidden;
}

.gazeto-snippet-logo {
  float: right;
  max-width: 80px;
  height: auto;
  margin: 0 0 0.5em 1em;
  border-radius: 4px;
}

.gazeto-snippet-priskribo,
.vikidatumo-snippet-priskribo,
.gazeto-snippet-meta {
  margin: 0 0 0.5em;
  line-height: 1.5;
}

.gazeto-snippet-meta {
  font-size: 0.9em;
  color: #666;
}

.gazeto-snippet a,
.vikidatumo-snippet a {
  color: var(--verda);
}

.gazeto-kapo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 20px;
  padding-bottom: 15px;
  margin-bottom: 20px;
}

.gazeto-kapo .kovrilo-granda {
  float: none;
  margin: 0;
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
}

.gazeto-kapo h1,
.gazeto-kapo > p,
.gazeto-kapo > .gazeto-etikedoj-strio {
  grid-column: 1;
}

.gazeto-kapo > :last-child {
  margin-bottom: 0;
}

.gazeto-kapo h1,
.gazeto-kapo > p:not(.gazeto-metadatumoj) {
  font-family: "Inter", system-ui, -apple-system, Arial, sans-serif;
  color: var(--nigra);
}

.gazeto-kapo h1 {
  margin-top: 0;
  margin-bottom: 0.35em;
  font-size: 2.6em;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.015em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  padding-bottom: 0.2em;
}

.gazeto-kapo > p:not(.gazeto-metadatumoj) {
  font-size: 1.15em;
  line-height: 1.55;
}

.gazeto-metadatumoj {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em 0.5em;
  margin-top: 12px;
  margin-bottom: 0;
}

.gazeto-atributoj-tabelo {
  margin: 0 0 1.5em;
  font-size: 0.95em;
}

.gazeto-atributoj-tabelo > tbody > tr > th {
  width: 12em;
  vertical-align: top;
  white-space: nowrap;
}

.gazeto-atributoj-tabelo > tbody > tr > td {
  vertical-align: top;
}

.gazeto-atributoj-autoroj {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gazeto-autoro-vikipedio-etikedo {
  margin-left: 0.35em;
  vertical-align: baseline;
}

.gazeto-etikedo {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.72em;
  font-weight: normal;
  padding: 0.2em 0.45em;
  line-height: 1.2;
  text-decoration: none;
}

.gazeto-etikedo:hover,
.gazeto-etikedo:focus {
  text-decoration: none;
}

.gazeto-etikedo-ikono {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.gazeto-etikedo-glyph {
  font-size: 0.85em;
  top: 0;
}

.gazeto-bpeape {
  margin-top: 0.65em;
  margin-bottom: 0;
  font-size: 0.85em;
  line-height: 1.45;
}

.gazeto-bpeape .bpeape-id {
  margin-left: 0.35em;
  font-weight: normal;
}

.gazeto-bpeape .bpeape-informo {
  margin-left: 0.35em;
  font-style: italic;
  font-size: 0.92em;
  color: #555;
}

.bpeape-informo-kesto {
  position: relative;
}

.bpeape-informo-kesto--kolapsita {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bpeape-vidi-plu {
  display: inline-block;
  margin-top: 0.3em;
  font-size: 0.9em;
  font-style: normal;
  color: #337ab7;
  cursor: pointer;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
}

.bpeape-vidi-plu:hover,
.bpeape-vidi-plu:focus {
  color: #23527c;
}

.kovrilo-granda {
  max-width: 300px;
  float: right;
  margin-left: 20px;
  border-radius: 4px;
}

.kovrilo-numero {
  max-width: 180px;
  width: 100%;
  border-radius: 4px;
}

.numero-panelo {
  margin-bottom: 20px;
}

.numero-listo {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
}

.numero-linio-wrap--ne-aperis .numero-linio-titolo {
  font-style: italic;
  color: #777;
}

.numero-komento {
  margin: 0.35em 0 0.75em;
  padding: 0.5em 0.75em;
  background: #f5f5f5;
  border-left: 3px solid #5bc0de;
  font-size: 0.95em;
  color: #555;
}

.numero-linio-wrap {
  border-bottom: 1px solid #ddd;
}

.numero-linio-wrap:last-child {
  border-bottom: none;
}

.numero-linio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 0;
  min-width: 0;
}

.numero-linio-kapo {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 8px;
  flex-wrap: wrap;
}

.numero-linio-titolo {
  min-width: 0;
  line-height: 1.35;
}

.numero-linio-askoj {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.numero-linio-askoj .btn {
  white-space: nowrap;
}

.numero-linio-askoj .btn-success {
  background-color: var(--verda);
  border-color: #007700;
}

.numero-indekso-ŝaltilo.active {
  background-color: var(--nigra);
  color: var(--blanka);
  border-color: var(--nigra);
}

.numero-indekso {
  padding: 0 0 12px 0;
  font-size: 0.9em;
}

.numero-indekso-autoro {
  margin: 0 0 4px;
  line-height: 1.4;
}

.numero-indekso-elementoj {
  margin: 0 0 4px;
  line-height: 1.4;
}

.numero-indekso-elemento:not(:first-child)::before {
  content: " · ";
}

.numero-panelo .panel-heading {
  background-color: var(--nigra);
  color: var(--blanka);
  border-color: var(--nigra);
}

.enhavo-elemento {
  display: inline;
  margin-right: 4px;
}

.numero-butonoj {
  margin-top: 15px;
}

.numero-butonoj .btn-success {
  background-color: var(--verda);
  border-color: #007700;
}

/* Numero-vido: listo vs galerio */
.gazeto-labortempa {
  margin-bottom: 20px;
}

.gazeto-labortempa-kapo {
  position: relative;
  padding-right: 110px;
}

.gazeto-labortempa-titolo {
  margin: 0 0 8px;
  font-size: 16px;
}

.gazeto-labortempa-priskribo {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.gazeto-labortempa-ampligi {
  position: absolute;
  top: 10px;
  right: 10px;
}

.gazeto-labortempa-korpuso {
  padding: 0;
}

.gazeto-labortempa-kadro {
  display: block;
  width: 100%;
  height: 400px;
  border: 0;
}

.gazeto-labortempa--granda .gazeto-labortempa-kadro {
  height: 75vh;
}

.gazeto-ilo-strio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 15px;
}

.gazeto-staff-kapo {
  margin-bottom: 10px;
}

.gazeto-staff-ligoj {
  margin-top: 0;
}

.gazeto-staff-ligoj .btn + .btn {
  margin-left: 0;
}

.numero-vido-ŝanĝilo {
  margin-bottom: 0;
}

.numero-vido-ŝanĝilo .btn.active {
  background-color: var(--nigra);
  color: var(--blanka);
  border-color: var(--nigra);
}

.numero-sekcio-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 12px 14px;
  background: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.numero-sekcio-nav-ligo {
  display: inline-block;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  color: #337ab7;
  font-size: 0.9em;
  line-height: 1.35;
  text-decoration: none;
}

.numero-sekcio-nav-ligo:hover,
.numero-sekcio-nav-ligo:focus {
  background: #417690;
  border-color: #417690;
  color: #fff;
  text-decoration: none;
}

.numero-sekcio {
  margin-bottom: 1.5em;
}

.numero-sekcio-titolo {
  margin: 0 0 0.75em;
  padding: 0.35em 0 0.45em;
  border-bottom: 2px solid #417690;
  color: #333;
  font-size: 1.25em;
  font-weight: 600;
}

.numero-galerio-sekcio {
  margin-bottom: 2em;
}

.numero-galerio-sekcio .numero-sekcio-titolo {
  margin-bottom: 1em;
}

.numero-galerio {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}

.numero-galerio-elemento {
  text-align: center;
  margin: 0;
}

.kovrilo-galerio {
  display: block;
  width: 100%;
  aspect-ratio: 180 / 254;
  object-fit: cover;
  margin: 0 auto;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease;
}

.numero-galerio-ligo:hover .kovrilo-galerio {
  transform: scale(1.03);
}

.kovrilo-galerio-placeholder {
  width: 100%;
  aspect-ratio: 180 / 254;
  margin: 0 auto;
  background-color: #ddd;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 2em;
}

.galerio-pagado-pli-karto {
  margin: 0;
}

.galerio-pagado-pli-enholdo {
  width: 100%;
  aspect-ratio: 180 / 254;
  margin: 0 auto;
  padding: 12px;
  background-color: #f5f5f5;
  border: 2px dashed #ccc;
  border-radius: 4px;
  color: #555;
  font-size: 0.85em;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.galerio-pagado-pli-enholdo:hover,
.galerio-pagado-pli-enholdo:focus {
  background-color: #eee;
  border-color: #999;
  color: #333;
  outline: none;
}

.galerio-pagado-pli-enholdo .glyphicon {
  font-size: 1.5em;
  color: #999;
}

.numero-galerio-titolo {
  font-size: 0.85em;
  margin-top: 6px;
  line-height: 1.3;
}

.numero-galerio-butonoj {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.numero-indekso--galerio {
  width: 100%;
  text-align: left;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #eee;
}

.reveno {
  margin-top: 30px;
}

/* Footer */
.site-footer {
  background-color: var(--papero);
  color: var(--nigra);
  padding: 10px 0 20px;
  margin-top: 0;
}

.site-footer-interna {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
}

.footer-logo {
  max-height: 100px;
  width: auto;
  flex-shrink: 0;
}

.site-footer-teksto {
  margin: 0;
  text-align: right;
}

.site-footer-teksto p {
  margin: 0 0 6px;
}

.site-footer-teksto p:last-child {
  margin-bottom: 0;
}

.slogano {
  color: var(--verda);
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.site-footer a {
  color: var(--verda);
}

.site-footer-kredito {
  margin: 12px 0 0;
  font-size: 0.75em;
  color: #666;
  text-align: center;
}

.site-footer-kredito a {
  color: #666;
  text-decoration: underline;
}

.site-footer-kredito a:hover,
.site-footer-kredito a:focus {
  color: var(--verda);
}

.kontakto-email {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

.kontakto-email img {
  display: block;
  border: 0;
}

.kontakto-email-ligilo {
  cursor: pointer;
}

.kontakto-email-aviso {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  z-index: 10000;
  padding: 0.7rem 1.2rem;
  border-radius: 8px;
  background: #2d2d2d;
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.4;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transform: translateX(-50%);
  opacity: 1;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.kontakto-email-aviso--foriras {
  opacity: 0;
}

.kontakto-telegram {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  color: #2aabee;
  white-space: nowrap;
}

.kontakto-telegram:hover,
.kontakto-telegram:focus {
  color: #5bc0f7;
  text-decoration: none;
}

.blog-post-titolo-rango {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin-bottom: 0.5em;
}

.blog-post-titolo-rango h1 {
  margin: 0;
}

.blog-post-kartoj {
  margin-top: 0;
}

.blog-post-kolono {
  margin-bottom: 24px;
}

.blog-post-karto-enhavo {
  max-height: 260px;
  overflow: hidden;
}

.blog-post-karto-bildo {
  display: block;
  margin-bottom: 0.5em;
}

.blog-post-karto-enhavo--bilda-flugo .blog-post-karto-bildo {
  float: left;
  max-width: 49%;
  margin: 0 0.75em 0.5em 0;
}

.blog-post-karto-enhavo--bilda-flugo::after {
  content: "";
  display: table;
  clear: both;
}

.blog-post-legopli {
  margin-top: 1em;
  margin-bottom: 0;
}

.blog-post-karto-bildo-img {
  display: block;
  max-width: 100%;
  max-height: 110px;
  width: auto;
  height: auto;
  margin: 0;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}

.blog-post-karto-enhavo .blog-post-titolo {
  margin-top: 0;
  font-size: 1.35em;
}

.blog-post-karto-enhavo .blog-post-dato {
  margin-bottom: 0.5em;
}

@media (min-width: 992px) {
  .blog-post-kartoj {
    display: flex;
    flex-wrap: wrap;
  }

  .blog-post-kolono {
    display: flex;
  }

  .blog-post-karto {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .blog-post-karto .panel-body {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .blog-post-legopli {
    margin-top: auto;
    padding-top: 1em;
  }
}

.blog-post-pagado {
  margin: 0 0 24px;
}

.blog-admin-ligo {
  color: #999;
  font-size: 0.55em;
  text-decoration: none;
  line-height: 1;
}

.blog-admin-ligo:hover,
.blog-admin-ligo:focus {
  color: #333;
  text-decoration: none;
}

.blog-post-enhavo {
  overflow-wrap: anywhere;
}

.blog-post-resumo.blog-post-enhavo img {
  display: none;
}

.blog-post-enhavo img {
  display: block;
  max-width: 100%;
  max-width: min(400px, 100%);
  width: auto;
  height: auto;
  margin: 1rem 0 1.5rem;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

.blog-bildo-lightbox-trigger:focus {
  outline: 2px solid #337ab7;
  outline-offset: 2px;
}

body.blog-bildo-lightbox-aktiva {
  overflow: hidden;
}

.blog-bildo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 56px;
  background: rgba(0, 0, 0, 0.92);
}

.blog-bildo-lightbox[hidden] {
  display: none !important;
}

.blog-bildo-lightbox-bildo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.blog-bildo-lightbox-fermi,
.blog-bildo-lightbox-antaua,
.blog-bildo-lightbox-sekva {
  position: absolute;
  border: 0;
  background: transparent;
  color: #fff;
  line-height: 1;
  cursor: pointer;
  padding: 12px;
  opacity: 0.85;
}

.blog-bildo-lightbox-fermi:hover,
.blog-bildo-lightbox-antaua:hover,
.blog-bildo-lightbox-sekva:hover,
.blog-bildo-lightbox-fermi:focus,
.blog-bildo-lightbox-antaua:focus,
.blog-bildo-lightbox-sekva:focus {
  opacity: 1;
  outline: none;
}

.blog-bildo-lightbox-fermi {
  top: 8px;
  right: 12px;
  font-size: 2.5rem;
}

.blog-bildo-lightbox-antaua {
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
}

.blog-bildo-lightbox-sekva {
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
}

.blog-kunhavilo {
  margin: 2em 0 1.5em;
  padding-top: 1.25em;
  border-top: 1px solid #e8e8e8;
}

.blog-kunhavilo-titolo {
  margin: 0 0 0.75em;
  font-size: 1em;
  font-weight: 600;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.blog-kunhavilo .shareon {
  --size: 2.5rem;
  --gap: 0.5rem;
}