/*
Plugin: Testy.org.ua — Номери параграфів
Version: 1.0.2
*/

/* Плашка картки успадковує предметний колір зі «Спільних стилів». */
.testy-org-ua-paragraph-badge {
  --testy-org-ua-paragraph-class-top: 20px;
  position: absolute;
  /*
   * class top + class height + fixed 20px gap.
   * Плашка класу не змінюється; переміщується лише плашка параграфа.
   */
  top: calc(var(--testy-org-ua-paragraph-class-top) + 32px + 1.2em);
  right: 0;
  z-index: 31;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: 70%;
  min-width: 0;
  margin: 0;
  padding: 6px 15px;
  overflow: hidden;
  border: 0;
  border-radius: 14px 0 0 14px;
  background-color: var(
    --testy-org-ua-category-color,
    var(--testy-org-ua-fallback-color, #334155)
  );
  color: #ffffff;
  font-family: var(--testy-org-ua-card-title-font, 'Montserrat', sans-serif);
  font-size: var(--testy-org-ua-badge-font-size, 15px);
  font-weight: 400;
  line-height: var(--testy-org-ua-badge-line-height, 1.2);
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  text-shadow: none;
  white-space: nowrap;
  box-shadow: none;
  filter: none;
  opacity: 1;
  pointer-events: auto;
  cursor: default;
  transform: none;
  transition: none;
}

.testy-org-ua-paragraph-badge:hover {
  background-color: var(
    --testy-org-ua-category-color,
    var(--testy-org-ua-fallback-color, #334155)
  );
  color: #ffffff;
  text-decoration: none;
  text-shadow: none;
  box-shadow: none;
  filter: none;
  opacity: 1;
  transform: none;
}

.testy-org-ua-paragraph-badge--without-class {
  top: var(--testy-org-ua-paragraph-class-top);
}

/* GeneratePress: плашка є sibling посилання, тому сама не клікабельна. */
body.testy-org-ua-paragraph-numbers-active .post-image {
  position: relative;
}

.testy-org-ua-paragraph-badge--archive-no-image,
.testy-org-ua-paragraph-badge--related-no-image,
.testy-org-ua-paragraph-badge--home-no-image {
  position: static;
  display: flex;
  align-self: flex-end;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 6px auto;
  border-radius: 14px 0 0 14px;
}

.testy-org-ua-home-latest-card,
.testy-org-ua-related-tests__card {
  position: relative;
}

/* =========================================================
   Навігація на сторінці окремого тесту
   ========================================================= */

.testy-org-ua-paragraph-navigation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 12px 0 30px;
  padding: 0;
  column-gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 1.2;
  text-shadow: none;
}

.testy-org-ua-paragraph-navigation__link,
.testy-org-ua-paragraph-navigation__link:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 7px 12px;
  overflow: hidden;
  gap: 6px;
  border: 0;
  border-radius: 22px;
  background-color: #f8fafc;
  color: var(--accent, #1877f2);
  font: inherit;
  font-weight: 400;
  text-decoration: none;
  text-shadow: none;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(6, 18, 37, 0.05);
  filter: none;
  opacity: 1;
  transform: none;
  transition: none;
}

.testy-org-ua-paragraph-navigation__link--previous {
  grid-column: 1;
  justify-self: start;
}

.testy-org-ua-paragraph-navigation__link--next {
  grid-column: 3;
  justify-self: end;
}

.testy-org-ua-paragraph-navigation__link:hover,
.testy-org-ua-paragraph-navigation__link:focus {
  border: 0;
  background-color: #f8fafc;
  color: var(--accent, #1877f2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-shadow: none;
  box-shadow: 0 4px 12px rgba(6, 18, 37, 0.05);
  filter: none;
  opacity: 1;
  transform: none;
}

.testy-org-ua-paragraph-navigation__link:focus-visible {
  outline: 2px solid var(--accent, #1877f2);
  outline-offset: 3px;
}

.testy-org-ua-paragraph-navigation__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.testy-org-ua-paragraph-navigation__arrow {
  flex: 0 0 auto;
  font-size: 1.15em;
  line-height: 1;
}

.testy-org-ua-paragraph-navigation__current {
  grid-column: 2;
  justify-self: center;
  box-sizing: border-box;
  max-width: min(34vw, 180px);
  min-width: 0;
  margin: 0;
  padding: 0 2px;
  overflow: hidden;
  color: #061225;
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: none;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .testy-org-ua-paragraph-badge {
    font-size: var(--testy-org-ua-badge-font-size-mobile, 14px);
  }

  .testy-org-ua-paragraph-navigation {
    font-size: 15px;
  }
}

@media (max-width: 640px) {
  .testy-org-ua-paragraph-badge--related {
    --testy-org-ua-paragraph-class-top: 16px;
  }

  .testy-org-ua-paragraph-navigation {
    margin-top: 10px;
    margin-bottom: 24px;
    column-gap: 6px;
  }

  .testy-org-ua-paragraph-navigation__link,
  .testy-org-ua-paragraph-navigation__link:visited {
    padding: 7px 9px;
    gap: 4px;
    border-radius: 16px;
  }

  .testy-org-ua-paragraph-navigation__current {
    max-width: 32vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .testy-org-ua-paragraph-badge,
  .testy-org-ua-paragraph-navigation,
  .testy-org-ua-paragraph-navigation * {
    transition: none !important;
    animation: none !important;
  }
}