/*
 * Pasek informacyjny (parts/components/announcement-bar).
 * Plik pisany ręcznie i wczytywany osobno — pipeline gulpa w tym motywie
 * nie kompiluje się na obecnym Node (node-sass), więc nie dotykamy dist/css/index.css.
 * Kolory bazowe: $primary #815b46, $black #404040, font $font-family-base Krub.
 */

.labs212-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: var(--labs212-bar-bg, #815b46);
  color: var(--labs212-bar-color, #ffffff);
  font-family: "Krub", Helvetica, Arial, sans-serif;
}

.labs212-bar__viewport {
  display: grid;
  grid-template-areas: "slide";
  align-items: center;
  max-width: 1424px;
  margin: 0 auto;
  padding: 9px 16px;
  box-sizing: border-box;
}

/*
 * Zmiana odsłony: wychodzący komunikat gaśnie i odjeżdża do góry, wchodzący
 * wjeżdża z dołu z małym opóźnieniem. Kluczowa jest `visibility` z zerowym
 * czasem i opóźnieniem — bez tego znikała natychmiast i zamiast przejścia
 * było mrugnięcie.
 */
.labs212-bar__slide {
  grid-area: slide;
  min-width: 0;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.labs212-bar__slide.is-leaving {
  visibility: visible;
  transform: translateY(-6px);
}

.labs212-bar__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 0.35s ease 0.18s, transform 0.35s ease 0.18s, visibility 0s;
}

.labs212-bar__text {
  display: block;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.labs212-bar__text strong,
.labs212-bar__text b {
  font-weight: 600;
}

.labs212-bar__link,
.labs212-bar__link:hover,
.labs212-bar__link:focus {
  color: inherit;
  text-decoration: none;
}

.labs212-bar__link:hover .labs212-bar__text,
.labs212-bar__link:focus .labs212-bar__text {
  text-decoration: underline;
}

/* Nagłówek motywu jest position: fixed (height 80px / 50px na mobile),
   a body ma padding-top równy jego wysokości — pasek dokłada swoją. */
body.labs212-has-bar {
  padding-top: calc(80px + var(--labs212-bar-h, 40px));
}

body.labs212-has-bar .header {
  top: var(--labs212-bar-h, 40px);
  transition: top 0.28s ease;
}

/* Pasek admina WordPressa też jest przyklejony do góry: pasek promocyjny idzie
   pod niego, a nagłówek musi zejść o OBIE wysokości. Bez drugiej reguły pasek
   zasłaniał górę menu każdemu zalogowanemu. */
body.labs212-has-bar.admin-bar .labs212-bar {
  top: 32px;
}

body.labs212-has-bar.admin-bar .header {
  top: calc(32px + var(--labs212-bar-h, 40px));
}

/* Chowanie w czasie przewijania: pasek zjeżdża do góry, nagłówek wchodzi na jego
   miejsce. Po zatrzymaniu przewijania klasa znika i oba wracają. */
.labs212-bar {
  transition: transform 0.28s ease;
  will-change: transform;
}

body.labs212-bar-hidden .labs212-bar {
  transform: translateY(-100%);
}

body.labs212-has-bar.labs212-bar-hidden .header {
  top: 0;
}

body.labs212-has-bar.labs212-bar-hidden.admin-bar .header {
  top: 32px;
}

/* Wysunięte menu mobilne (motyw dodaje na body klasę show-sidebar) zajmuje cały
   ekran — pasek nie ma tam czego szukać i tylko wchodzi w drogę. */
body.show-sidebar .labs212-bar {
  transform: translateY(-100%);
}

body.labs212-has-bar.show-sidebar .header {
  top: 0;
}

body.labs212-has-bar.show-sidebar.admin-bar .header {
  top: 32px;
}

@media (max-width: 767.98px) {
  .labs212-bar__viewport {
    padding: 8px 12px;
  }

  .labs212-bar__text {
    font-size: 12px;
    line-height: 17px;
  }

  body.labs212-has-bar {
    padding-top: calc(50px + var(--labs212-bar-h, 44px));
  }
}

@media screen and (max-width: 782px) {
  body.labs212-has-bar.admin-bar .labs212-bar {
    top: 46px;
  }

  body.labs212-has-bar.admin-bar .header {
    top: calc(46px + var(--labs212-bar-h, 44px));
  }

  body.labs212-has-bar.labs212-bar-hidden.admin-bar .header,
  body.labs212-has-bar.show-sidebar.admin-bar .header {
    top: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .labs212-bar,
  body.labs212-has-bar .header {
    transition: none;
  }

  .labs212-bar__slide,
  .labs212-bar__slide.is-active {
    transform: none;
    transition: opacity 0.2s linear, visibility 0s linear 0.2s;
  }

  .labs212-bar__slide.is-active {
    transition: opacity 0.2s linear, visibility 0s;
  }
}