/* Спільне для всіх сторінок редизайну (головна, блог, стаття): рух і поправка на адмін-панель WP.
   Підключається після стилів сторінки (inc/redesign.php). Криві й тривалості — з Emil Kowalski (скіл animate):
   ховери ~150мс ease (десятки разів на день — ледь помітно), натискання 160мс, акордеони 200мс --ease-out. */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  interpolate-size: allow-keywords; /* height: auto у переходах — акордеони без JS */
}

/* ——— Відгук на натискання: тап і клік (без прив'язки до ховера) ——— */
.btn, .icon-btn, .filters a, .ff-skin .ff-btn-submit {
  transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.btn:active, .icon-btn:active, .filters a:active, .ff-skin .ff-btn-submit:active { transform: scale(0.97); }

/* ——— Колір посилань — плавно ——— */
.nav a, .menu a, .logo, .crumbs a, .footer a, .scene-link, .tags--links a, .contacts a, .copy p a, .panel a,
.rub__tops a, .rub__all, .rub__name, .start__min, .read, .row__title, .toc a, .prose a:not(.btn), .rel h3, .pn a, .panel--posts b {
  transition: color 150ms ease, border-color 150ms ease, opacity 150ms ease, text-decoration-color 150ms ease;
}

/* ——— Ховери: лише миша (на дотику tap дає «фальшивий» hover) ——— */
.rub, .start, .feature img, .row__thumb, .rel img, .panel--posts img {
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 150ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn--accent:hover, .ff-skin .ff-btn-submit:hover { box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--accent) 32%, transparent); }
  .btn--ghost:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .btn:hover:active, .ff-skin .ff-btn-submit:hover:active { transform: scale(0.97); }
  .icon-btn:hover { border-color: var(--ink); }
  .rub:hover { transform: translateY(-3px); box-shadow: 0 0.875rem 1.875rem rgba(20, 14, 6, .08); }
  .start:hover { transform: translateY(-3px); }
  .row:hover .row__thumb { transform: translateY(-3px); box-shadow: 0 0.875rem 1.875rem rgba(0, 0, 0, .18); }
  .feature:hover img { transform: scale(1.015); }
  .rel a:hover img, .panel--posts a:hover img { transform: translateY(-2px); }
  .tags--links a:hover { color: var(--accent); }
}

/* ——— FAQ: відкриття/закриття плавно замість стрибка (CSS ::details-content; де не підтримується — як раніше, миттєво) ——— */
.faq details::details-content, .panel--faq details::details-content {
  height: 0;
  overflow: clip;
  opacity: 0;
  transition: height 200ms var(--ease-out), opacity 200ms var(--ease-out), content-visibility 200ms allow-discrete;
}
.faq details[open]::details-content, .panel--faq details[open]::details-content { height: auto; opacity: 1; }
/* відступ під відповіддю — padding, а не margin: інакше висота «стрибає» на margin наприкінці */
.faq details p { margin-bottom: 0; padding-bottom: 1.125rem; }
.panel--faq details p { margin-bottom: 0; padding-bottom: 1rem; }
.faq summary::after, .panel--faq summary::after { transition: transform 200ms var(--ease-out); }

/* ——— Менше руху: лишаємо колір і прозорість, прибираємо зсуви й масштаб ——— */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .icon-btn:active, .filters a:active, .ff-skin .ff-btn-submit:active,
  .btn:hover, .rub:hover, .start:hover, .row:hover .row__thumb, .feature:hover img, .rel a:hover img, .panel--posts a:hover img { transform: none; }
  .faq details::details-content, .panel--faq details::details-content { transition: opacity 150ms ease, content-visibility 150ms allow-discrete; }
  .faq summary::after, .panel--faq summary::after { transition: none; }
}

/* ——— Телефон: базовий шрифт 15 px замість 16 (рішення 9.10 — «трохи зменшити все»). Усі розміри редизайну в rem, тож масштабується все разом ——— */
@media (max-width: 480px) { html { font-size: 93.75%; } }

/* ——— Адмін-панель WP (лише для залогінених): шапка й липкі елементи під нею, а не під панеллю ——— */
.admin-bar .top { top: 32px; }
.admin-bar .bar { top: calc(4.5rem + 32px); }
.admin-bar .month { top: calc(4.5rem + 32px + var(--bar-h, 4rem)); }
.admin-bar .readbar { top: calc(4.5rem + 32px); }
@media (max-width: 782px) {
  .admin-bar .top { top: 46px; }
  .admin-bar .bar { top: calc(4.5rem + 46px); }
  .admin-bar .month { top: calc(4.5rem + 46px + var(--bar-h, 4rem)); }
  .admin-bar .readbar { top: calc(4.5rem + 46px); }
}

/* ——— Перемикач мов UA/EN (inc/i18n.php, flavor_lang_switch_html()): та сама кругла кнопка, що й перемикач теми, з підписом мови ——— */
.lang-btn { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1; color: inherit; text-decoration: none; }
.top .lang-btn + .icon-btn { margin-left: 0; } /* на вузьких екранах margin-left: auto має лише перша кнопка групи праворуч */
.top .logo { white-space: nowrap; }
@media (max-width: 359px) { /* iPhone SE, вузькі Android: «Меню» + дві кнопки по 44 px переносили логотип; лишаємо бургер, назву дає aria-label */
  .menu-btn__t { display: none; }
  .menu-btn { padding-inline: 0.75rem; }
}