/*
 * nawigacja.css - nawigacja powrotna do /blog/ w artykulach bloga.
 *
 * Ladowany przez mu-plugins/blog-nawigacja.php wylacznie na pojedynczym wpisie.
 *
 * Arkusz jest SAMODZIELNY - nie korzysta ze zmiennych zdefiniowanych na
 * .sxh-blog, bo tego kontenera nie ma na epost.plus (tam artykuly buduje
 * Elementor). Kolory sa te same co --sxh-primary / --sxh-primary-dark
 * w blog-epoczta.css, tylko wpisane wprost.
 */

.sxh-blognav {
  box-sizing: border-box;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Okruszki siedza wewnatrz wlasnego .page-wrapper artykulu - szerokosc i
   padding daje juz ten kontener, wiec nasze wartosci by sie do niego dodaly.
   Powyzsze zostaje dla drogi zapasowej (artykul bez hero), gdzie nawigacja
   trafia poza kontener i musi ustawic sie sama. */
.page-wrapper > .sxh-blognav {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ---------- okruszki pod hero ---------- */

.sxh-blognav--gora {
  /* odstep od hero - bez niego napis przykleja sie do gradientu */
  margin-top: 2rem;
  /* odstep w dol daje juz spis tresci (.toc ma margin: 2.5rem 0) */
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #64748b;
}

.sxh-blognav--gora .sxh-blognav__link {
  color: #64748b;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.sxh-blognav--gora .sxh-blognav__link:hover,
.sxh-blognav--gora .sxh-blognav__link:focus {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

.sxh-blognav__sep {
  margin: 0 8px;
  color: #cbd5e1;
}

/* ---------- blok na koncu artykulu ---------- */

.sxh-blognav--dol {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid #e2e8f0;
  text-align: center;
}

.sxh-blognav__przycisk {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .15s ease;
}

/* strzalka w CSS, a nie w tresci przycisku - dzieki temu tlumaczenie
   etykiety w PHP nie musi jej za kazdym razem powtarzac */
.sxh-blognav__przycisk::before {
  content: "\2190";
  margin-right: 10px;
}

.sxh-blognav__przycisk:hover,
.sxh-blognav__przycisk:focus {
  background: #1e40af;
  color: #fff;
}

.sxh-blognav__wiecej {
  margin: 16px 0 0;
  font-size: 14px;
  color: #64748b;
}

.sxh-blognav__wiecej a {
  color: #2563eb;
  text-decoration: none;
}

.sxh-blognav__wiecej a:hover,
.sxh-blognav__wiecej a:focus {
  text-decoration: underline;
}

@media (max-width: 480px) {

  .sxh-blognav--dol {
    margin-top: 32px;
    padding-top: 22px;
  }

  .sxh-blognav__przycisk {
    display: block;
  }
}