/* ==========================================================================
   guard.css — Phần hình ảnh của lớp bảo vệ nội dung (đi cùng assets/js/guard.js)
   --------------------------------------------------------------------------
   Nạp SAU 4 file section, TRƯỚC overrides.css: các quy tắc ở đây phải thắng
   được `user-select` của sections-*.css, còn overrides.css thì vẫn phải giữ
   nguyên vai trò "nạp cuối cùng để vá gấp".

   MỌI QUY TẮC ĐỀU BỊ CHẶN SAU MỘT CỜ TRÊN <html>, KHÔNG CÓ CÁI NÀO CHẠY SUÔNG:
       [data-guard-select="off"]   guard.js đang chặn bôi đen
       [data-guard-drag="off"]     guard.js đang chặn kéo ảnh
   guard.js chỉ gắn hai cờ đó khi nó THỰC SỰ thi hành — nghĩa là bản đã deploy,
   không phải file:// hay localhost, và data.js không tắt nó.
   VÌ SAO PHẢI QUA CỜ: nếu viết `body { user-select: none }` thẳng vào CSS thì
   khách tắt JavaScript sẽ nhận một tấm thiệp không bôi đen được chữ nào mà
   cũng chẳng có lớp bảo vệ nào đang chạy — bảo vệ thì mất, bất tiện thì còn.
   Cờ nằm trên <html> (không phải <body>) để có tác dụng ngay từ lúc guard.js
   chạy, tức trước khi <body> tồn tại.

   NGOẠI LỆ .is-guard-free do guard.js gắn theo WEDDING.guard.allowSelect —
   hiện là dãy số tài khoản .gift__number. ĐỪNG viết `.gift__number` thẳng vào
   file này: selector đó khai trong data.js, nhân đôi sang đây là lần sau đổi
   một chỗ mà quên chỗ kia.
   ========================================================================== */

/* ==========================================================================
   1. CHẶN BÔI ĐEN + MENU NHẤN GIỮ TRÊN ĐIỆN THOẠI
   -webkit-touch-callout mới là thứ chặn được bảng "Lưu ảnh / Copy" khi nhấn
   giữ trên iOS — sự kiện contextmenu của guard.js KHÔNG bắn ở Safari iOS, nên
   thiếu dòng này thì trên iPhone khách vẫn nhấn giữ để lưu ảnh mã QR được.
   ========================================================================== */
html[data-guard-select="off"] body {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Số tài khoản và mọi ô nhập liệu của form RSVP thì PHẢI bôi đen được:
   khách cần copy dãy số, và cần sửa được chữ mình vừa gõ. Nhấn giữ ở đây cũng
   trả lại bảng copy của hệ điều hành — đó là đường copy quen nhất trên điện
   thoại, và với dãy 15 số thì nó là đường copy cuối cùng nếu nút copy hỏng. */
html[data-guard-select="off"] .is-guard-free,
html[data-guard-select="off"] input,
html[data-guard-select="off"] textarea,
html[data-guard-select="off"] select,
html[data-guard-select="off"] [contenteditable="true"] {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}

/* ==========================================================================
   2. CHẶN KÉO ẢNH RA KHỎI TRANG
   Sự kiện dragstart của guard.js đã chặn hành vi; dòng này chặn luôn cả BÓNG
   ẢNH bay theo con trỏ ở Chrome/Safari, nên trông như ảnh không nhấc lên được
   chứ không phải nhấc lên rồi bị chặn.
   ========================================================================== */
html[data-guard-drag="off"] img {
  -webkit-user-drag: none;
}

/* ==========================================================================
   3. LỚP PHỦ KHI PHÁT HIỆN DEVTOOLS  (#guard-overlay trong index.html)
   guard.js chỉ bỏ [hidden] và gắn .is-guard-locked lên <body> — không đặt
   style nào từ JS.
   ========================================================================== */

/* [hidden] của base.css là display:none !important nên lớp phủ tắt sẵn; ở đây
   chỉ tả trạng thái đang hiện. */
.guard-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-guard);

  display: grid;
  place-content: center;
  justify-items: center;
  padding: var(--sp-6) var(--pad-x);

  /* Nền ĐẶC, cùng công thức vân giấy như <body> — che kín thiệp phía sau chứ
     không chỉ làm mờ, vì ảnh mã QR nằm trong số thứ phải che. */
  background-color: var(--ivory);
  background-image: url('../img/paper-texture-white.png');
  background-repeat: repeat;
  background-size: 375px auto;
  background-position: center top;
  background-blend-mode: multiply;
}

.guard-overlay__box {
  max-inline-size: 28rem;
  padding: var(--sp-7) var(--sp-6);
  border: 1px solid var(--sage);
  border-radius: var(--r-md);
  background-color: var(--paper);
  box-shadow: var(--shadow-md);
}

.guard-overlay__title {
  color: var(--sage);
}

.guard-overlay__body {
  margin-block-start: var(--sp-4);
  color: var(--ink);
}

/* Làm mờ phần thiệp phía sau. LƯỚI AN TOÀN, không phải lớp chính: nếu
   guard.warnBody để rỗng thì render.js đã xoá #guard-overlay (data-if) và
   đây là thứ duy nhất còn che nội dung.
   pointer-events: none để không ai bấm trúng nút nào sau lớp mờ. */
body.is-guard-locked > *:not(.guard-overlay) {
  filter: blur(14px);
  pointer-events: none;
}