/* ===================================================== */
/* TYPOGRAPHY.CSS                                        */
/* CSS cho chữ, tiêu đề, đoạn mô tả và các chi tiết text */
/* dùng chung trên toàn bộ website Seoul Soul.           */
/* ===================================================== */


/* ===================================================== */
/* DISPLAY FONT GROUP                                    */
/* Các class dùng font display sang trọng của website.   */
/* ===================================================== */

.logo-title,
.display-title,
.section-title,
.card-title,
.footer-logo-title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0;
}


/* ===================================================== */
/* LOGO TEXT                                             */
/* Logo dạng chữ nếu không dùng ảnh logo.                */
/* ===================================================== */

.logo-title {
  color: var(--color-terracotta-dark);
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 0.9;
  text-transform: uppercase;
}

/* Dòng subtitle nhỏ dưới logo */
.logo-subtitle,
.footer-logo-subtitle {
  color: var(--color-muted);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ===================================================== */
/* LARGE TITLES                                          */
/* Tiêu đề lớn dùng ở hero và section.                   */
/* ===================================================== */

/* Tiêu đề lớn nhất, thường dùng trong hero */
.display-title {
  max-width: 620px;
  color: var(--color-ink);
  font-size: clamp(44px, 7vw, 76px);
  line-height: 0.98;
}

/* Tiêu đề section thông thường */
.section-title {
  color: var(--color-ink);
  font-size: clamp(34px, 4.8vw, 54px);
  line-height: 1.02;
}

/* Biến thể nhỏ hơn của section title */
.section-title--small {
  font-size: clamp(28px, 3.4vw, 42px);
}


/* ===================================================== */
/* EYEBROW                                               */
/* Dòng chữ nhỏ phía trên tiêu đề section.               */
/* Ví dụ: "Menu", "Our Story", "Reservierung".           */
/* ===================================================== */

.eyebrow {
  color: var(--color-terracotta-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* ===================================================== */
/* KOREAN STAMP                                          */
/* Ô chữ nhỏ phong cách con dấu Hàn Quốc.                */
/* ===================================================== */

.korean-stamp {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  height: 52px;
  border: 1px solid rgba(170, 63, 34, 0.42);
  color: var(--color-terracotta);
  font-size: 15px;
  line-height: 1.05;
  text-align: center;
}


/* ===================================================== */
/* BODY COPY                                             */
/* Đoạn văn bản mô tả dùng chung trong website.          */
/* ===================================================== */

.copy {
  max-width: 520px;
  color: var(--color-muted);
  font-size: 15px;
  line-height: 1.9;
}

/* Từ khóa được nhấn mạnh trong đoạn copy */
.copy strong {
  color: var(--color-ink);
}


/* ===================================================== */
/* PRICE TEXT                                            */
/* Style hiển thị giá món ăn hoặc tổng tiền.             */
/* ===================================================== */

.price {
  color: var(--color-ink);
  font-weight: 800;
}


/* ===================================================== */
/* DECORATIVE LINE                                       */
/* Đường trang trí nhỏ dưới tiêu đề section.             */
/* Gồm 2 đường ngang và 1 hình thoi ở giữa.              */
/* ===================================================== */

.decor-line {
  position: relative;
  width: 78px;
  height: 18px;
  margin: 22px 0 24px;
}

/* Hai đường ngang hai bên */
.decor-line::before,
.decor-line::after {
  position: absolute;
  top: 8px;
  width: 34px;
  height: 1px;
  background: rgba(170, 63, 34, 0.42);
  content: "";
}

.decor-line::before {
  left: 0;
}

.decor-line::after {
  right: 0;
}

/* Hình thoi nhỏ ở giữa */
.decor-line span {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(170, 63, 34, 0.62);
  transform: translateX(-50%) rotate(45deg);
}