/* ==========================================================================
   pj_noticebar – oznamovací lišta
   Barvy se předávají inline z administrace (--pnb-bg, --pnb-ink).
   Hodnoty níže jsou jen záložní, kdyby se inline styl nedostal do stránky.

   Firemní škála pro rychlé zadání v administraci:
     50  #F9FAFA   100 #F4F5F5   200 #E3E8E5   300 #CFD8D3
     400 #9AACA3   500 #6C8478   600 #4A5B55   700 #384841
     800 #222B25   900 #151E19   950 #080D0A

   Pro lištu doporučeny 600 / 700 / 800 se světlým textem, nebo 200 / 300
   s tmavým. Odstíny 400 a 500 nemají pro drobné písmo dost kontrastu.
   ========================================================================== */

.pj-noticebar {
  --pnb-bg:  #4A5B55;  /* 600 */
  --pnb-ink: #F9FAFA;  /* 50 */

  /* Ručně psaný font pro štítek s odpočtem – stejný jako nadpisy šablony. */
  --pnb-display: "Patrick Hand SC", "Patrick Hand", cursive;

  /* Jemné odstíny barvy textu pro podtržení a hover. Prohlížeče bez
     color-mix dostanou plnou barvu textu, což je v pořádku. */
  --pnb-soft: var(--pnb-ink);
  --pnb-wash: transparent;

  position: relative;
  background: var(--pnb-bg);
  color: var(--pnb-ink);
  font-size: .875rem;
  line-height: 1.45;
}

@supports (color: color-mix(in srgb, red, blue)) {
  .pj-noticebar {
    --pnb-soft: color-mix(in srgb, var(--pnb-ink) 55%, transparent);
    --pnb-wash: color-mix(in srgb, var(--pnb-ink) 14%, transparent);
  }
}

/* atribut hidden nastavuje skript; šablona může mít na liště vlastní display */
.pj-noticebar[hidden] {
  display: none !important;
}

.pj-noticebar__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: .55rem 1rem;
  text-align: center;
}

.pj-noticebar--dismissible .pj-noticebar__inner {
  padding-left: 2.75rem;
  padding-right: 2.75rem;
}

/* --------------------------------------------------------------------------
   Přes celou šířku – stejný postup jako u pj_trustbar
   -------------------------------------------------------------------------- */

.pj-noticebar--full {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

html:has(.pj-noticebar--full) {
  overflow-x: clip;
}

/* v náhledu v administraci by lišta vyjela z panelu */
.pj-noticebar--preview.pj-noticebar--full {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* --------------------------------------------------------------------------
   Obsah
   -------------------------------------------------------------------------- */

.pj-noticebar__text {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.pj-noticebar__link,
.pj-noticebar__whole:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  text-decoration-color: var(--pnb-soft);
}

.pj-noticebar__link {
  margin-left: .3em;
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
}

.pj-noticebar__whole {
  color: inherit;
  text-decoration: none;
}

.pj-noticebar a:hover,
.pj-noticebar a:focus {
  color: inherit;
}

.pj-noticebar__link:hover {
  text-decoration-color: currentColor;
}

.pj-noticebar a:focus-visible,
.pj-noticebar__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Štítek s odpočtem – razítko ručním písmem, lehce nakřivo.
   Stojí uvnitř věty, takže se na mobilu zalomí s ní. */
.pj-noticebar__countdown {
  display: inline-block;
  margin-left: .45em;
  vertical-align: .05em;
  padding: .22em .6em .12em;
  border: 1px dashed var(--pnb-soft);
  border-radius: .35em;
  font-family: var(--pnb-display);
  font-size: 1.1em;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  transform: rotate(-2deg);
}

/* --------------------------------------------------------------------------
   Zavírací křížek
   -------------------------------------------------------------------------- */

.pj-noticebar__close {
  position: absolute;
  top: 50%;
  right: .4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: .75;
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity .15s, background-color .15s;
}

.pj-noticebar__close[hidden] {
  display: none;
}

.pj-noticebar__close:hover {
  opacity: 1;
  background: var(--pnb-wash);
}

.pj-noticebar__close svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* Zavírání – lišta se srolí nahoru, obsah pod ní plynule dojede */
.pj-noticebar.is-closing {
  overflow: hidden;
  transition: height .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease-out;
}

/* --------------------------------------------------------------------------
   Zobrazení podle zařízení
   Rozhoduje šířka okna, ne detekce na serveru – lišta se tak chová správně
   i za cache stránek a po otočení tabletu.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .pj-noticebar--no-mobile {
    display: none !important;
  }

  .pj-noticebar {
    font-size: .8125rem;
  }

  .pj-noticebar__inner {
    gap: .45rem;
    padding: .5rem .85rem;
  }

  .pj-noticebar--dismissible .pj-noticebar__inner {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .pj-noticebar__close {
    right: .2rem;
  }
}

@media (min-width: 768px) {
  .pj-noticebar--no-desktop {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pj-noticebar.is-closing,
  .pj-noticebar__close {
    transition: none;
  }
}