/* ==========================================================================
   base.css — Reset, typography, layout primitive, component dùng chung
   --------------------------------------------------------------------------
   Thứ tự nạp: tokens.css → base.css → animations.css → sections-*.css →
   overrides.css.

   NGUYÊN TẮC BẤT DI BẤT DỊCH
   1. Không có literal màu hay font-family nào ở file này — chỉ dùng biến của
      tokens.css. Nếu cần giá trị chưa có token thì báo lại, đừng inline.
   2. Các utility chữ `.t-*` KHÔNG đặt `color`. Lý do: cùng một cỡ chữ script
      xuất hiện cả trên nền ảnh (màu --on-dark) lẫn trên nền giấy (màu --sage).
      Màu do CSS của từng section quyết định. `body` mặc định là --sage.
   3. Mọi chuyển động nằm ở animations.css, không nằm ở đây (trừ transition
      của .btn/.rule là phần "vẻ ngoài" nên giữ tại chỗ định nghĩa component).
   4. Không bao giờ để trang cuộn ngang: `body` khoá overflow-x, `.section`
      dùng overflow-x: clip (có fallback hidden cho Safari cũ).
   ========================================================================== */

/* ==========================================================================
   1. RESET
   Reset hiện đại, tối giản: chỉ bỏ những mặc định gây khó, không "san phẳng"
   ngữ nghĩa (vẫn giữ <strong>, <em>… hoạt động bình thường).
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ol,
ul,
fieldset,
legend {
  margin: 0;
  padding: 0;
}

/* Danh sách chỉ dùng để gom nhóm layout → bỏ bullet. */
ul,
ol {
  list-style: none;
}

/* Fieldset dùng làm nhóm radio → bỏ viền mặc định của trình duyệt. */
fieldset {
  border: 0;
  min-inline-size: 0;
}

/* Ảnh / media: block để không sinh khoảng trắng baseline, không tràn ngang. */
img,
svg,
video,
canvas,
picture {
  display: block;
  max-inline-size: 100%;
}

/* Ảnh có width/height trong HTML: giữ tỉ lệ khi CSS đổi một chiều. */
img {
  block-size: auto;
  border-style: none;
}

/* Form control thừa hưởng font của trang thay vì font hệ thống. */
input,
button,
textarea,
select,
optgroup {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

textarea {
  resize: vertical;
  overflow: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Chống chữ dài (link, số tài khoản) làm tràn khối. */
p,
h1,
h2,
h3,
h4,
li,
dd,
figcaption {
  overflow-wrap: break-word;
}

/* Bảng lịch do calendar.js dựng — gom viền, bỏ khoảng cách ô. */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Phần tử mang [hidden] phải ẩn thật, kể cả khi component đặt display khác. */
[hidden] {
  display: none !important;
}

/* ==========================================================================
   2. GỐC TRANG
   ========================================================================== */
html {
  scroll-behavior: smooth;
  /* Chừa chỗ cho các anchor (#invitation…) không bị dính sát mép trên. */
  scroll-padding-block-start: var(--sp-6);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Tôn trọng prefers-reduced-motion ngay ở cấp cuộn trang. */
@media (prefers-reduced-motion: reduce) and (max-width: 0px) { /* guard tắt theo yêu cầu: thiệp LUÔN chạy animation. Xoá ' and (max-width: 0px)' để bật lại. */
  html {
    scroll-behavior: auto;
  }
}

body {
  /* Nền: màu ngà của thiệp + vân giấy trắng chồng lên bằng multiply.
     paper-texture-white.png là ảnh ĐẶC (không alpha) nên phải blend,
     nếu không nó sẽ che mất màu --ivory. */
  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;

  color: var(--sage); /* reference: gần như toàn bộ chữ là sage */
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-relaxed);

  min-block-size: 100%;
  margin: 0;
  overflow-x: hidden; /* chốt cuối: trang không bao giờ cuộn ngang */

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Chữ nội dung dài cần tương phản cao hơn thì dùng --ink qua .t-body-ink. */
::selection {
  background-color: rgba(var(--sage-rgb), 0.18);
  color: var(--sage-deep);
}

/* ==========================================================================
   3. UTILITY CHỮ
   Ánh xạ 1–1 với bảng số đo trong REFERENCE.md. Nhắc lại: KHÔNG đặt color.
   ========================================================================== */

/* --- Hastegi (display) ------------------------------------------------- */

/* Tên cô dâu/chú rể ở khối thiệp mời — reference 55px, in hoa */
.t-name {
  font-family: var(--ff-display);
  font-size: var(--fs-name);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* Tên cô dâu/chú rể ở hero — reference 82.28px, KHÔNG in hoa */
.t-name-lg {
  font-family: var(--ff-display);
  font-size: var(--fs-name-lg);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: var(--ls-wide);
  text-transform: none;
}

/* Ngày 25.10.2025 ở hero — reference 24.01px, in hoa (section CSS xoay 5deg) */
.t-date-hero {
  font-family: var(--ff-display);
  font-size: var(--fs-date-hero);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* --- BeyondPerfection (script tiếng Anh) ------------------------------- */

/* "Dresscode" 38.05px, "October" 40.51px */
.t-script-xl {
  font-family: var(--ff-script);
  font-size: var(--fs-script-xl);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: 0;
  text-transform: none;
}

/* "All of me loves / all of you" 35.87px, "Thank you" 29.55px */
.t-script-lg {
  font-family: var(--ff-script);
  font-size: var(--fs-script-lg);
  font-weight: 400;
  line-height: var(--lh-snug);
}

/* "Countdown" 28.87px, "Our moments" */
.t-script-md {
  font-family: var(--ff-script);
  font-size: var(--fs-script-md);
  font-weight: 400;
  line-height: var(--lh-snug);
}

/* Chú thích script trên tranh — 12.59px / line-height 1.7 */
.t-script-sm {
  font-family: var(--ff-script);
  font-size: var(--fs-script-sm);
  font-weight: 400;
  line-height: var(--lh-loose);
}

/* --- Rift (nhãn) ------------------------------------------------------- */

/* Nhãn nhỏ in hoa giãn chữ */
.t-label {
  font-family: var(--ff-label);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

/* DẤU ":" giữa các nhóm số đếm ngược — reference #HEADLINE86/87/88: Rift bold
   29.87px. ĐÂY LÀ CHỖ DUY NHẤT (cùng .lightbox__counter) reference dùng Rift.
   tabular-nums là BẮT BUỘC: giây đổi mà không được nhảy layout. */
.t-digit {
  font-family: var(--ff-label);
  font-size: var(--fs-digit);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-wide);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* CHỮ SỐ đếm ngược — reference #COUNTDOWN1: Hastegi 54px, tracking 1px, sage.
   Tách hẳn khỏi .t-digit: dùng chung một utility cho cả số lẫn dấu ":" là lý
   do bản trước đặt số sai cả kiểu chữ (Rift, một mặt chữ thể thao/công nghệ
   trong một tấm thiệp Hastegi/Lora/script) lẫn cỡ chữ (nhỏ hơn 45%, khiến
   đồng hồ mất hẳn vai trò điểm nhấn — số còn nhỏ hơn tiêu đề của chính nó).
   Lỗi này từng bị che vì 25.10.2025 của bản mẫu đã qua nên đồng hồ luôn
   [hidden]. Thiệp nay trỏ vào 20.09.2026 — đồng hồ ĐANG hiện thật, nên utility
   này là thứ khách nhìn thấy mỗi giây. Đừng gộp lại vào .t-digit. */
.t-digit-lg {
  font-family: var(--ff-display);
  font-size: var(--fs-digit-lg);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--ls-wide);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --- UVN Hoa Tay (chữ ký tay) ------------------------------------------ */

/* "Cô dâu" 35.57px / "Chú rể" 30.41px */
.t-hand {
  font-family: var(--ff-hand);
  font-size: var(--fs-script-xl);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: 0;
  text-transform: none;
}

/* --- Lora (toàn bộ nội dung tiếng Việt) -------------------------------- */

/* Nhãn in hoa nhưng là VĂN XUÔI, không phải UI chrome — "nhà trai"/"nhà gái"
   (reference #HEADLINE6/#HEADLINE8: Lora bold 14px in hoa, canh giữa) và các
   legend của form (reference #FORM2: Lora 16px).
   Dùng .t-label (Rift) cho những chỗ này là sai: reference chỉ dùng Rift ở ba
   dấu ":" của đồng hồ đếm ngược. Rift ở ngay dưới tên cô dâu chú rể làm hỏng
   hệ chữ Hastegi/Lora/script của cả tấm thiệp. */
.t-label-serif {
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* Tiêu đề section kiểu Lora in hoa — "Kính mời…" 18.33px */
.t-heading {
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* Tên địa điểm / tên ngân hàng — Lora SemiBold in hoa 21px */
.t-venue {
  font-family: var(--ff-body);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* Nội dung thường — RSVP intro 16px / 1.5 */
.t-body {
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-normal);
}

/* Nội dung nhỏ — chuyện tình 13px / 1.6, tên bố mẹ 13px / 1.4 */
.t-body-sm {
  font-family: var(--ff-body);
  font-size: var(--fs-2xs);
  font-weight: 400;
  line-height: var(--lh-relaxed);
}

/* Địa chỉ, thứ trong tuần, tên màu dresscode — 14px / 1.4 */
.t-caption {
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: var(--lh-snug);
}

/* Ngày âm lịch — Lora ITALIC 15px */
.t-lunar {
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  font-style: italic;
  line-height: var(--lh-snug);
}

/* ==========================================================================
   4. LAYOUT PRIMITIVE
   .stage  = khung "sân khấu" 520px, là canvas cho các lớp absolute
   .content= cột nội dung 420px đúng như reference
   .section= khối dọc, tạo stacking context riêng
   .decor  = một lớp hoạ tiết absolute
   ========================================================================== */
.stage {
  position: relative;
  inline-size: 100%;
  max-inline-size: var(--w-stage);
  margin-inline: auto;
}

.content {
  position: relative;
  z-index: var(--z-content);
  inline-size: 100%;
  max-inline-size: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section {
  display: block;
  position: relative;
  isolation: isolate; /* hoạ tiết của section này không chen vào section khác */
  padding-block: var(--sp-8);

  /* Chặn tràn ngang do hoạ tiết bleed và do .reveal--left/--right dịch 24px.
     `clip` không tạo scroll container (khác `hidden`) nên position: sticky
     bên trong vẫn chạy; dòng `hidden` phía trên là fallback cho Safari < 16. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* Lớp hoạ tiết. Section CSS chỉ cần đặt inset/inline-size/rotate.
   LƯU Ý: .decor không có offset mặc định → nếu section CSS quên đặt
   top/left thì nó nằm ở "static position", không bị mất tích. */
.decor {
  position: absolute;
  z-index: var(--z-decor);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  max-inline-size: none; /* hoạ tiết được phép rộng hơn khối cha để bleed */
}

/* Dòng chảy dọc có khoảng cách thống nhất; đổi --gap tại chỗ dùng. */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap, var(--sp-4));
}

.center {
  text-align: center;
}

/* ==========================================================================
   5. COMPONENT DÙNG CHUNG
   ========================================================================== */

/* --- Nút -------------------------------------------------------------- */
/* .btn = nền sage, chữ ngà, viên thuốc, Lora in hoa.
   animations.css đã lo transition + translateY(-1px) khi hover, ở đây chỉ
   khai báo hình thức. `.btn--solid` là tên animations.css dùng cho biến thể
   nền sage → nhận cùng hình thức để markup viết kiểu nào cũng đúng. */
.btn,
.btn--solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);

  padding: var(--sp-3) var(--sp-6);
  border: 1px solid var(--sage);
  border-radius: var(--r-pill);

  background-color: var(--sage);
  color: var(--ivory);

  font-family: var(--ff-body);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;

  cursor: pointer;
  min-block-size: 2.75rem; /* 44px — vùng chạm tối thiểu */
}

.btn:hover,
.btn--solid:hover {
  background-color: var(--sage-deep);
  border-color: var(--sage-deep);
  color: var(--ivory);
}

/* Nút viền: nền trong suốt, chữ sage; hover thì đổ nền sage. */
.btn--ghost {
  background-color: transparent;
  color: var(--sage);
  border-color: var(--sage);
}

.btn--ghost:hover {
  background-color: var(--sage);
  border-color: var(--sage);
  color: var(--ivory);
}

.btn[disabled],
.btn--solid[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Icon bên trong nút (ghim chỉ đường, icon copy) tô theo màu chữ hiện tại. */
.btn svg,
.btn--solid svg {
  inline-size: 1em;
  block-size: auto;
  fill: currentColor;
  flex: 0 0 auto;
}

/* --- Đường phân cách có hoạ tiết giữa -------------------------------- */
/* Một nét vàng 1px mảnh, tâm là viên kim cương nhỏ màu sage.
   Chỉ dùng ::after → chừa ::before cho section CSS nếu cần. */
.rule {
  position: relative;
  inline-size: min(100%, 14rem);
  block-size: 1px;
  margin-inline: auto;
  margin-block: var(--sp-5);
  border: 0;
  background-image: linear-gradient(
    to right,
    rgba(var(--sage-rgb), 0) 0%,
    var(--gold) 22%,
    var(--gold) 78%,
    rgba(var(--sage-rgb), 0) 100%
  );
}

.rule::after {
  content: '';
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  inline-size: 0.4375rem; /* 7px */
  block-size: 0.4375rem;
  transform: translate(-50%, -50%) rotate(45deg);
  background-color: var(--sage);
}

/* --- Nhãn eyebrow ----------------------------------------------------- */
.label-eyebrow {
  display: block;
  font-family: var(--ff-label);
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--sage);
}

/* --- Thẻ giấy --------------------------------------------------------- */
.card {
  position: relative;
  background-color: var(--cream);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}

/* --- Khung ảnh vòm ---------------------------------------------------- */
/* Dùng được cả hai cách: .arch trên chính <img>, hoặc .arch trên khối bọc. */
.arch {
  border-radius: var(--r-arch);
  overflow: hidden;
}

img.arch,
.arch > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

/* ==========================================================================
   6. UTILITY TRỢ NĂNG & TRẠNG THÁI
   ========================================================================== */

/* Chỉ trình đọc màn hình đọc được, mắt không thấy. */
.sr-only {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Ẩn như .sr-only nhưng HIỆN RA khi được focus bằng bàn phím (skip link). */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-within {
  position: fixed;
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-3);
  z-index: var(--z-toast);
  inline-size: auto;
  block-size: auto;
  padding: var(--sp-2) var(--sp-4);
  margin: 0;
  clip: auto;
  clip-path: none;
  background-color: var(--sage);
  color: var(--ivory);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-md);
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
}

/* --- Bản dự phòng khi tắt JavaScript ---------------------------------- */
/* <noscript> trong index.html. KHÔNG file section nào nhận khối này (cả 4
   agent section đều báo lại là nó không thuộc phạm vi của mình), nên nó thuộc
   về đây: nó không phải một section, nó là chrome của trang. Trước khi có
   những quy tắc này, khách tắt JS thấy chữ tràn hết bề rộng màn hình, không
   canh giữa, không nhịp cách. */
.noscript {
  inline-size: 100%;
  max-inline-size: var(--w-content);
  margin-inline: auto;
  padding: var(--sp-8) var(--pad-x);
  text-align: center;
}

.noscript__lead {
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--sage);
}

.noscript__facts {
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid rgba(var(--sage-rgb), 0.28);

  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--sage);
}

.noscript__facts strong {
  display: block;
  margin-block-end: var(--sp-2);
  font-family: var(--ff-display);
  font-size: var(--fs-name);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* Khoá cuộn trang khi lightbox / popup / màn phong bì đang mở.
   JS gắn class này lên <body>. */
/* Khoá cuộn nền khi lightbox / popup đang mở.
   ĐÃ BỎ `touch-action: none`: gallery.js bật class này suốt thời gian lightbox
   mở, và touch-action: none vô hiệu hoá pinch-zoom cùng double-tap-zoom cho MỌI
   thứ bên trong — kể cả chính .lightbox__img. Xem ảnh to là lý do duy nhất
   khách bấm vào thumbnail, mà ảnh lại bị chặn ở max-block-size không phóng
   được. `overflow: hidden !important` ở ngay dưới đã đủ chặn cuộn nền; chống
   rubber-band của iOS thì dùng overscroll-behavior: contain trên chính overlay
   (đã có ở #lightbox trong sections-event.css) chứ không giết cử chỉ toàn trang. */
.no-scroll {
  overflow: hidden !important;
}

/* ==========================================================================
   7. BẢN IN
   Mục tiêu: in ra tờ thiệp đọc được — chữ đen trên giấy trắng, còn lời mời,
   địa điểm, ngày, timeline. Bỏ mọi thứ tương tác hoặc chỉ có nghĩa trên màn
   hình: màn phong bì, đồng hồ đếm ngược, lightbox album, form RSVP.
   ========================================================================== */
@media print {
  /* 7.1 Nền phẳng, chữ đen. Dùng token, không literal. */
  html,
  body {
    background-color: var(--paper);
    background-image: none;
    color: var(--ink);
  }

  body {
    font-size: 11pt;
    line-height: var(--lh-snug);
  }

  /* 7.2 QUAN TRỌNG: .reveal mặc định opacity 0 — nếu không mở ra thì bản in
     sẽ là những trang trắng. Bắt buộc hiện hết. */
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--down,
  .reveal--scale,
  .reveal--rotate-left,
  .reveal--rotate-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .envelope__card {
    opacity: 1 !important;
    transform: none !important;
  }

  /* 7.3 Bỏ khỏi bản in: màn phong bì, countdown, lightbox, popup, form RSVP,
     album ảnh, nút nhạc, gợi ý cuộn, skip link, mọi lớp hoạ tiết. */
  #envelope-intro,
  #countdown,
  #lightbox,
  #rsvp-success,
  #gallery,
  #rsvp .rsvp__form,
  .music-toggle,
  .hero__scroll-cue,
  .skip-link,
  .decor,
  .quote__scrim,
  .thanks__scrim,
  .countdown__scrim {
    display: none !important;
  }

  /* 7.4 Chữ vốn là trắng trên ảnh → chuyển thành đen trên giấy. */
  .quote__script,
  .thanks__script,
  .thanks__body,
  .calendar__month,
  .calendar__panel,
  .countdown__caption {
    color: var(--ink) !important;
  }

  /* Ảnh nền tối sau các khối chữ trắng: bỏ đi cho dễ đọc. */
  .quote__photo,
  .thanks__photo,
  .calendar__wash {
    display: none !important;
  }

  /* 7.5 Không cắt ngang một khối nội dung. */
  .section,
  .story__profile,
  .timeline__item,
  .gift__account {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .section {
    padding-block: var(--sp-4);
    overflow: visible;
  }

  /* 7.6 Nút "chỉ đường" in ra dạng viền, kèm URL để người đọc gõ lại. */
  .btn,
  .btn--solid {
    background-color: transparent !important;
    color: var(--ink) !important;
    border-color: var(--ink) !important;
  }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 8pt;
    font-weight: 400;
    word-break: break-all;
  }
}