/* ==========================================================================
   VIKNA.TECH — надбудова над версткою для WordPress
   --------------------------------------------------------------------------
   Тут лише те, чого не було у статичних сторінках: класи ядра WordPress,
   службові дрібниці й ті інлайн-стилі верстки, які в шаблонах стали класами.
   Базові файли (tokens/base/layout/components/sections) не чіпаємо —
   так їх можна оновлювати з макета без злиття правок.
   ========================================================================== */

/* --- Пастка для ботів ---------------------------------------------------- */

.u-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Дрібниці, що були інлайн-стилями у статичній верстці ----------------- */

.marquee__label {
  text-align: center;
  color: var(--text-mute);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin: 0 0 var(--s-6);
}

.compare-grid,
.prose-grid {
  align-items: start;
  gap: var(--s-8);
}

.prose-grid { gap: var(--s-10); }

.summary__warnings {
  display: grid;
  gap: 0.5rem;
  padding: 0 1.1rem;
}
.summary__warnings:empty { padding: 0; }

.contacts-side { border-left: var(--bw) solid var(--border); }
@media (max-width: 899px) {
  .contacts-side { border-left: 0; border-top: var(--bw) solid var(--border); }
}

.map--stacked {
  border-left: 0;
  border-top: var(--bw) solid var(--border);
  min-height: 280px;
}

.map--embed { padding: 0; display: block; }
.map--embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  filter: grayscale(1) contrast(1.05);
}

.logo__img { display: block; height: 34px; width: auto; }

/* Заголовок модалки — H2 заради структури документа, розмір лишається як у H3. */
.modal__title { font-size: var(--fs-h3); }

/* --- Класи ядра WordPress ------------------------------------------------- */

.alignleft {
  float: left;
  margin: 0 var(--s-6) var(--s-4) 0;
  max-width: 50%;
}
.alignright {
  float: right;
  margin: 0 0 var(--s-4) var(--s-6);
  max-width: 50%;
}
.aligncenter {
  display: block;
  margin-inline: auto;
}
.alignwide,
.alignfull { max-width: 100%; }

.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-element-caption,
figcaption {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-mute);
  margin-top: var(--s-2);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.prose img,
.prose iframe { max-width: 100%; height: auto; }

.prose figure { margin: var(--s-6) 0; }

/* --- Пагінація ------------------------------------------------------------ */

.navigation.pagination { margin-top: var(--s-8); }
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding-inline: 0.6rem;
  border: var(--bw) solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--c-ink-800);
}
.nav-links .page-numbers:hover { border-color: var(--c-accent); color: var(--c-accent-700); }
.nav-links .page-numbers.current {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: #fff;
}

/* --- Адмінбар не має ховати липкий хедер ---------------------------------- */

body.admin-bar .header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .header { top: 46px; }
}

/* --- Плитка портфоліо як посилання на сторінку роботи ---------------------- */

.cases__item:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }