/* ==========================================================================
   SECURITY & PROTECTION STYLES (NO-COPY, WATERMARK, PRINT-SHIELD)
   ========================================================================== */

/* 1. Суворе блокування виділення тексту для будь-якого вмісту під /learning/...
   (data-page-type виставляється лише там — і на уроках, і на presentation.html,
   яке підключає ці стилі напряму, оскільки збірка копіює його поза MkDocs). */
body[data-page-type],
body[data-page-type] * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* Дозволяємо виділяти ТІЛЬКИ фрагменти коду */
body[data-page-type] pre,
body[data-page-type] code,
body[data-page-type] .highlight,
body[data-page-type] pre *,
body[data-page-type] code *,
body[data-page-type] .highlight * {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* 2. Приховати вміст сторінки при друку ТІЛЬКИ для захищених URL (/learning/...) */
@media print {
  body[data-page-type] {
    background: #ffffff !important;
    color: transparent !important;
  }

  body[data-page-type] * {
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

/* 3. Динамічний водяний знак на уроках і презентаціях */
.protection-watermark-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 99999 !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: repeat(4, 1fr) !important;
  overflow: hidden !important;
  opacity: 0.08 !important;
}

/* При відкритому модальному вікні презентації приховуємо фоновий водяний знак сторінки уроку
   (сама презентація в iframe рендерить власний водяний знак у межах свого viewport). */
body:has(.presentation-modal.is-active) > .protection-watermark-overlay {
  display: none !important;
}

.watermark-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: rotate(-25deg) !important;
  white-space: nowrap !important;
  font-family: var(--font-sans, sans-serif) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #0B1220 !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Слайди презентації чергують світлий і темний фон (.slide / .slide--dark) під одним
   спільним viewport, тож один водяний знак на всю сторінку не може виглядати доречно
   одразу на обох. Замість цього кожен .slide отримує власний оверлей (позиціонований
   відносно слайду, а не viewport) — за замовчуванням той самий непомітний стиль,
   що й на уроках (успадковується від .watermark-item вище), і лише .slide--dark
   нижче отримує контрастніший варіант. */
body[data-page-type="presentation"] .slide {
  position: relative !important;
}

.protection-watermark-overlay.protection-watermark-overlay--slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(2, 1fr) !important;
}

/* font-size для .watermark-item на слайдах виставляється не тут, а inline через JS
   (applyScaleCompensation у protection.js) — у модальному вікні main.js динамічно
   масштабує .slide (transform: scale(...)) під розмір iframe-панелі (реальний коефіцієнт
   залежить від екрана й ширини notes pane), і той самий 0.9rem, що на уроках, усередині
   цього transform виходить помітно дрібнішим за фактом. Фіксоване значення в CSS не могло
   б врахувати цей коефіцієнт, тож JS обчислює його з getComputedStyle(slide).transform і
   компенсує розмір шрифту так, щоб фінальний (уже масштабований) текст на екрані відповідав
   0.9rem — так само, як на уроках. */

/* mix-blend-mode: difference свідомо не використовується для .slide--dark — на практиці
   (Chromium) картки слайдів промотуються у власний композитний шар (тінь/рамка), і
   difference-блендинг фіксованого/абсолютного оверлею з вмістом усередині такого шару
   просто не застосовується. Натомість — чіткий 1px-обвід (без розмиття) навколо білої
   заливки: результат не залежить від композитних шарів і однаково рендериться скрізь. */
body[data-page-type="presentation"] .slide--dark .protection-watermark-overlay {
  opacity: 0.22 !important;
}

body[data-page-type="presentation"] .slide--dark .watermark-item {
  color: rgba(255, 255, 255, 0.75) !important;
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, 0.6),
     1px -1px 0 rgba(0, 0, 0, 0.6),
    -1px  1px 0 rgba(0, 0, 0, 0.6),
     1px  1px 0 rgba(0, 0, 0, 0.6) !important;
}

/* 4. Прихована пастка для ботів */
.protection-honey-trap {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}