/* ═══════════════════════════════════════════════════════════════════════
   ENERGARD — єдина поведінка кнопок.

   Власник 2026-10-06: «пройдись по всьому, щоб усюди був однаковий гарний
   ховер в обох темах». До цього кнопки описували три файли й по-різному:
   .btn-p/.btn-s — у banner-home.css (жорстко прописане золото, світлої теми
   не знали) і ще раз у pages-pro.css (на токенах); .btn-primary та
   .eg-btn-primary — у style.css, теж із жорстким rgba(255,191,47) у тіні.
   Через це на головній і на внутрішніх сторінках однакові на вигляд кнопки
   поводились по-різному, а в світлій темі синя кнопка світилась жовтим.

   Тут — спільний шар поверх усіх трьох родин: колір, тінь, ховер, натиск
   і фокус. Геометрію (padding, radius, розмір шрифту) лишаємо на місці —
   вона в кожної кнопки своя й від неї залежать розкладки.

   Файл підключається останнім (functions.php, пріоритет 102), тому виграє
   в каскаді без !important. Акцент береться з --gold, а він у світлій темі
   уже синій — звідси «однаково в обох темах».
   ═══════════════════════════════════════════════════════════════════════ */

:root{ --btn-ink:#09090D; }                 /* текст на залитій кнопці */
html[data-theme="light"]{ --btn-ink:#FFFFFF; }
/* у «темних островах» світлої теми заливка лишається золотою — текст теж темний */
html[data-theme="light"] .eg-island{ --btn-ink:#09090D; }

/* ── Первинна (залита) ────────────────────────────────────────────────── */
.btn-p, .btn-primary, .eg-btn-primary{
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color:var(--btn-ink);
  border:0;
  box-shadow:0 2px 12px color-mix(in srgb, var(--gold) 22%, transparent);
  transition:transform .22s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, filter .2s ease;
}
.btn-p:hover, .btn-primary:hover, .eg-btn-primary:hover,
.btn-p:focus-visible, .btn-primary:focus-visible, .eg-btn-primary:focus-visible{
  color:var(--btn-ink);
  transform:translateY(-2px);
  filter:brightness(1.07);
  box-shadow:0 10px 30px color-mix(in srgb, var(--gold) 42%, transparent);
}
.btn-p:active, .btn-primary:active, .eg-btn-primary:active{
  transform:translateY(0) scale(.985);
  filter:none;
  box-shadow:0 2px 10px color-mix(in srgb, var(--gold) 26%, transparent);
}

/* ── Вторинна (контурна) ──────────────────────────────────────────────── */
.btn-s, .btn-secondary, .eg-btn-secondary{
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:none;
  transition:transform .22s cubic-bezier(.16,1,.3,1), border-color .2s ease,
             background-color .2s ease, color .2s ease;
}
.btn-s:hover, .btn-secondary:hover, .eg-btn-secondary:hover,
.btn-s:focus-visible, .btn-secondary:focus-visible, .eg-btn-secondary:focus-visible{
  color:var(--text);
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--gold) 60%, transparent);
  background-color:var(--hover-bg);
}
.btn-s:active, .btn-secondary:active, .eg-btn-secondary:active{
  transform:translateY(0) scale(.985);
}

/* ── Фокус із клавіатури — однаковий у всіх ───────────────────────────── */
.btn-p:focus-visible, .btn-primary:focus-visible, .eg-btn-primary:focus-visible,
.btn-s:focus-visible, .btn-secondary:focus-visible, .eg-btn-secondary:focus-visible{
  outline:3px solid color-mix(in srgb, var(--gold) 55%, transparent);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  .btn-p, .btn-primary, .eg-btn-primary,
  .btn-s, .btn-secondary, .eg-btn-secondary{ transition:box-shadow .2s ease, border-color .2s ease; }
  .btn-p:hover, .btn-primary:hover, .eg-btn-primary:hover,
  .btn-s:hover, .btn-secondary:hover, .eg-btn-secondary:hover,
  .btn-p:active, .btn-primary:active, .eg-btn-primary:active,
  .btn-s:active, .btn-secondary:active, .eg-btn-secondary:active{ transform:none; }
}