/*
Theme Name: Skill Horizon Theme
Theme URI: https://skillhorizon.pro
Author: Skill Horizon
Description: Glass UI тема, сумісна з Elementor (Free) та WP Dark Mode.
Version: 3.1
Requires at least: 6.0
Tested up to: 6.9
License: GPLv2 or later
Text Domain: sh-theme
*/

/* =========================================================================
   iOS 27 LIQUID GLASS SKIN
   -------------------------------------------------------------------------
   Цей блок міняє лише СПОСІБ ВІДОБРАЖЕННЯ (прозорість, розмиття, тіні) —
   жодна розмітка чи логіка плагінів не зачіпається. Все працює через ті самі
   CSS-змінні, які тема вже використовує в design-tokens.css / theme-vars.css.
   Файл style.css підключається останнім (sh-main залежить від sh-base і
   sh-components), тому значення нижче спокійно перекривають попередні —
   а там, де оригінал сам був на !important, тут теж стоїть !important
   з тим самим селектором, щоб виграти порядком підключення.
   ========================================================================= */

/* ---------- 1. Токени скла (світла тема) ----------
   Головна відмінність від попередньої версії: менше saturate (він підсилює
   КОЛІР того, що позаду — саме тому скло "фарбувалось" в синій) і вищий
   базовий білий фон, щоб скло читалось як нейтральне скло, а не як плашка
   кольору фону. */
:root {
  --lg-bg: rgba(255, 255, 255, 0.46);
  --lg-border: rgba(255, 255, 255, 0.55);
  --lg-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.14), inset 0 1px 1px 0 rgba(255, 255, 255, 0.5);
  --lg-blur: blur(26px) saturate(130%);

  /* прибираємо рельєфний (embossed) текст та іконки, лишені від 3D-версії */
  --sh-text-3d: none;
  --sh-icon-3d: none;
  --sh-active-glow: drop-shadow(0 0 6px color-mix(in srgb, var(--brand-primary, #287FF0) 45%, transparent));

  /* дрібний фікс: змінна вживається в 404.php, але ніде не була оголошена */
  --sh-text-muted: var(--text-muted, rgba(33, 37, 41, 0.62));
}

/* ---------- 2. Токени скла (темна тема) ----------
   Той самий принцип: нейтральне темно-сіре скло, а не "прозорий синій" */
html.wp-dark-mode-active body,
body.wp-dark-mode-active {
  --lg-bg: rgba(28, 28, 32, 0.48) !important;
  --lg-border: rgba(255, 255, 255, 0.14) !important;
  --lg-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.55), inset 0 1px 1px 0 rgba(255, 255, 255, 0.10) !important;
  --lg-blur: blur(26px) saturate(120%) !important;

  --sh-text-3d: none !important;
  --sh-icon-3d: none !important;
  --sh-active-glow: drop-shadow(0 0 8px color-mix(in srgb, var(--brand-primary, #0A84FF) 60%, transparent)) !important;

  --sh-text-muted: var(--text-muted, rgba(245, 245, 247, 0.62));
}

/* ---------- 3. Фон сайту: чистий синій градієнт, без інших кольорів ---------- */
body { position: relative; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, #BFE0FE 0%, #6FA8F0 45%, #2E63C4 75%, #1E4C9A 100%);
}
html.wp-dark-mode-active body::before,
body.wp-dark-mode-active::before {
  background: linear-gradient(180deg, #16233D 0%, #101B30 45%, #0B1526 75%, #060B14 100%);
}

/* ---------- 4. Пряме визначення скла на кожному елементі ----------
   За вашим прикладом — один консистентний рецепт на всіх поверхнях теми:
   background + border + box-shadow + backdrop-filter, з !important там,
   де початкові правила теми теж на !important (щоб гарантовано виграти). */
.sh-glass, .sh-glass-panel, .sh-glass-element, .sh-card,
.elementor-button, .sh-news-strip,
.sh-badge, .sh-pill, .sh-alert,
.sh-button, .sh-btn-all, .sh-empty-state {
  background: var(--lg-bg) !important;
  border: 1px solid var(--lg-border) !important;
  box-shadow: var(--lg-shadow) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  position: relative;
  isolation: isolate;
}
/* .sh-empty-state лишає свою пунктирну рамку, просто в кольорі скла */
.sh-empty-state {
  border-style: dashed !important;
}
/* нативні поля форм: без !important на рамці/тіні (щоб не забивати фокус-стан),
   але з тим самим фоном і розмиттям */
.sh-input, .sh-select, .sh-textarea {
  background: var(--lg-bg) !important;
  border-color: var(--lg-border) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
}

/* світлий відблиск зверху — лише на контейнерах (не на <input>/<select>:
   браузери не малюють псевдоелементи на нативних полях форм) */
.sh-glass::before, .sh-glass-panel::before, .sh-glass-element::before, .sh-card::before,
.elementor-button::before, .sh-news-strip::before,
.sh-badge::before, .sh-pill::before, .sh-alert::before,
.sh-button::before, .sh-btn-all::before, .sh-empty-state::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 45%);
}
html.wp-dark-mode-active .sh-glass::before, body.wp-dark-mode-active .sh-glass::before,
html.wp-dark-mode-active .sh-glass-panel::before, body.wp-dark-mode-active .sh-glass-panel::before,
html.wp-dark-mode-active .sh-glass-element::before, body.wp-dark-mode-active .sh-glass-element::before,
html.wp-dark-mode-active .sh-card::before, body.wp-dark-mode-active .sh-card::before,
html.wp-dark-mode-active .elementor-button::before, body.wp-dark-mode-active .elementor-button::before,
html.wp-dark-mode-active .sh-news-strip::before, body.wp-dark-mode-active .sh-news-strip::before,
html.wp-dark-mode-active .sh-badge::before, body.wp-dark-mode-active .sh-badge::before,
html.wp-dark-mode-active .sh-pill::before, body.wp-dark-mode-active .sh-pill::before,
html.wp-dark-mode-active .sh-alert::before, body.wp-dark-mode-active .sh-alert::before,
html.wp-dark-mode-active .sh-button::before, body.wp-dark-mode-active .sh-button::before,
html.wp-dark-mode-active .sh-btn-all::before, body.wp-dark-mode-active .sh-btn-all::before,
html.wp-dark-mode-active .sh-empty-state::before, body.wp-dark-mode-active .sh-empty-state::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 45%);
}
/* вміст елементів лишається над відблиском */
.sh-glass > *, .sh-glass-panel > *, .sh-glass-element > *, .sh-card > *,
.elementor-button > *, .sh-news-strip > *,
.sh-badge > *, .sh-pill > *, .sh-alert > *,
.sh-button > *, .sh-btn-all > * {
  position: relative;
  z-index: 1;
}

/* ---------- 4б. Нижнє меню (dock) ----------
   .sh-dock-menu отримує свій вигляд напряму у footer.php (той самий
   рецепт прозорості), бо там уже є власний <style>-блок, підключений
   пізніше за цей файл — правити з style.css його марно, він однаково
   програє порядком підключення. Дивіться footer.php. */

/* ---------- 4в. Кольорові варіанти .sh-button ----------
   .sh-button (форми/UI поза Elementor) не входив у список вище, тому й
   лишався суцільним, без скла — саме тому кнопки виглядали інакше за
   навігацію. Тепер .sh-button теж скляний (успадковує рецепт вище).
   primary/danger отримують кольоровий відтінок КРІЗЬ те саме скло —
   той самий прийом, що й .sh-btn-accent нижче — щоб заклик до дії
   лишався помітним, а не розчинявся серед нейтральних карток. */
.sh-button--primary {
  background: color-mix(in srgb, var(--brand-primary, #287FF0) 70%, var(--lg-bg)) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}
.sh-button--primary:hover {
  filter: brightness(0.96);
}
.sh-button--danger {
  background: color-mix(in srgb, var(--danger, #E03131) 70%, var(--lg-bg)) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}
.sh-button--danger:hover {
  filter: brightness(0.96);
}
/* secondary/ghost лишаються нейтральним склом (успадковують фон вище);
   колір тексту й далі відрізняє їх — див. components.css */

/* ---------- 5. Бонус: тонована (accent) скляна кнопка — опційно ---------- */
/* Додайте клас sh-btn-accent через "Класи CSS" у Elementor (Просунуті),
   щоб виділити важливу кнопку (наприклад "Відгукнутися") насиченим кольором
   крізь скло — на відміну від звичайних кнопок, які лишаються нейтральним
   склом. Це не змінює жодну наявну кнопку — працює тільки там, де клас
   додано свідомо. */
.elementor-button.sh-btn-accent {
  background: color-mix(in srgb, var(--brand-primary, #287FF0) 72%, transparent) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
}
.elementor-button.sh-btn-accent,
.elementor-button.sh-btn-accent span {
  color: #fff !important;
  text-shadow: none !important;
}

/* ---------- 6. Бонус: мʼяке "скляне" світіння для великих чисел/лічильників ---------- */
/* Це НЕ застосовується автоматично (лічильник вакансій — не з файлів теми,
   а з Elementor/плагіна). Щоб прибрати важку 3D-тінь із самого числа і
   замінити її на мʼякий ореол без рамки — додайте клас sh-glow-number
   цьому елементу (Elementor: Просунуті → Класи CSS), або, якщо у вас
   безкоштовний Elementor без поля "Класи CSS" — використайте поле "CSS ID"
   і назвіть його, наприклад, sh-counter (тоді напишіть мені цю назву,
   і я підправлю селектор нижче). */
.sh-glow-number {
  text-shadow: 0 0 24px color-mix(in srgb, var(--brand-primary, #287FF0) 45%, transparent),
               0 0 48px color-mix(in srgb, var(--brand-primary, #287FF0) 22%, transparent) !important;
}
html.wp-dark-mode-active .sh-glow-number, body.wp-dark-mode-active .sh-glow-number {
  text-shadow: 0 0 26px color-mix(in srgb, var(--brand-primary, #0A84FF) 60%, transparent),
               0 0 52px color-mix(in srgb, var(--brand-primary, #0A84FF) 30%, transparent) !important;
}