/**
 * Sống Lành — Hero + Marquee
 * Hero: chữ display cỡ lớn, ảnh tràn, phủ tối nhẹ để chữ luôn đủ tương phản.
 * Marquee: dải chữ chạy ngang, chèn bằng shortcode [sl_marquee] trong Elementor.
 */

/* ---- Hero của trang trong (archive / single) ---------------------- */
.page-title-section {
  position: relative;
  background-color: var(--sl-bg);
}
.page-title-section .page-title-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 33, 26, .38) 0%, rgba(7, 33, 26, .68) 100%);
}

/* Hero bài viết dùng ảnh đại diện — thường rất sáng (món ăn, bãi biển),
   phủ nhạt là chữ chìm. Đậm thêm một nấc riêng cho trang bài viết. */
.single-post .page-title-section .page-title-bg::after {
  background: linear-gradient(180deg, rgba(7, 33, 26, .48) 0%, rgba(7, 33, 26, .75) 100%);
}

/* Dòng meta trong hero: typography.css cho .meta-item màu --sl-dim (tối),
   trên ảnh thì mất hút. Ép sáng lại khi có ảnh nền. */
.page-title-section .page-title-bg + .container .meta-item,
.page-title-section .page-title-bg + .container .meta-item a,
.page-title-section .page-title-bg + .container time,
.page-title-section .page-title-bg + .container .post-meta,
.page-title-section .page-title-bg + .container .cat-links a {
  color: rgba(255, 253, 247, .92);
}
.page-title-section .page-title-bg + .container .meta-wrap { text-shadow: 0 1px 12px rgba(7, 33, 26, .5); }
.page-title-section .container { position: relative; z-index: 2; }

.page-title-section .page-title,
.page-title-section .entry-title {
  font-size: var(--sl-fs-hero);
  line-height: var(--sl-lh-display);
  letter-spacing: -.02em;
  margin: 0;
  max-width: 18ch;
}
.page-title-section.page-title-large { padding-block: clamp(6rem, 14vw, 11rem); }

/* Mô tả chuyên mục dưới tiêu đề */
.page-title-section .archive-description,
.page-title-section .taxonomy-description {
  font-size: var(--sl-fs-body);
  line-height: 1.7;
  max-width: var(--sl-measure);
  margin-top: 1.25rem;
  opacity: .9;
}

/* Có ảnh nền → chữ phải sáng. Dùng sibling selector nên chỉ áp dụng
   đúng khi .page-title-bg thật sự tồn tại; archive không ảnh giữ chữ tối. */
.page-title-section .page-title-bg + .container .entry-title,
.page-title-section .page-title-bg + .container .page-title,
.page-title-section .page-title-bg + .container .archive-description,
.page-title-section .page-title-bg + .container .taxonomy-description,
.page-title-section .page-title-bg + .container .breadcrumb,
.page-title-section .page-title-bg + .container .breadcrumbs,
.page-title-section .page-title-bg + .container a {
  color: #FFFDF7;
}
.page-title-section .page-title-bg + .container .entry-title,
.page-title-section .page-title-bg + .container .page-title {
  text-shadow: 0 1px 24px rgba(20, 24, 20, .35);
}

/* Breadcrumb mảnh */
.page-title-section .breadcrumb,
.page-title-section .breadcrumbs,
.entry-breadcrumb {
  font-size: var(--sl-fs-meta);
  letter-spacing: var(--sl-ls-meta);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

/* Hero của trang redesign — số đo lấy từ reference:
   cao 78vh (702px @900), khối chữ NEO ĐÁY, cách đáy 64px,
   và các khoảng hở dọc: eyebrow→h1 14px, h1→lede 18px, lede→nút 26px. */
.sl-band--hero { min-height: 78vh; display: flex; align-items: flex-end; }
/* Container chỉ cao bằng nội dung, nên phải neo chính container xuống đáy
   của section (align-items trên section), không phải align bên trong nó. */
.sl-band--hero > .elementor-container { align-self: flex-end; }

.sl-band--hero .sl-eyebrow { margin-bottom: 14px; }
.sl-band--hero .sl-display--hero { margin-bottom: 18px; }
.sl-band--hero .sl-lede { margin-bottom: 26px; }
.sl-band--hero .sl-lede p { margin-bottom: 0; }

@media (max-width: 768px) {
  .sl-band--hero { min-height: 70vh; }
  .sl-band--hero .sl-lede { margin-bottom: 20px; }
}

/* ---- Hero trang chủ (Elementor) ----------------------------------- */
/* Chỉ phóng to thang chữ, không đụng cấu trúc section của Elementor. */
body.home .elementor-widget-heading .elementor-heading-title,
body.home .elementor-widget-cs_heading .elementor-heading-title {
  letter-spacing: -.02em;
}

/* Lớp tiện ích gắn thủ công trong Elementor (Advanced → CSS Classes) */
.sl-hero-title {
  font-family: var(--sl-font-display) !important;
  font-size: var(--sl-fs-hero) !important;
  line-height: var(--sl-lh-display) !important;
  letter-spacing: -.02em !important;
}
.sl-hero-tagline {
  font-family: var(--sl-font-body) !important;
  font-size: clamp(1rem, 1.5vw, 1.1875rem) !important;
  line-height: 1.6 !important;
  letter-spacing: .01em !important;
  max-width: 34ch;
}

/* ---- Marquee — dải vàng, chữ xanh thẫm (đúng reference) ---------- */
.sl-marquee {
  --sl-marquee-duration: 42s;
  position: relative;
  overflow: hidden;
  width: 100%;
  border: 0;
  padding-block: 13px;                 /* reference: 13px trên/dưới, cao 42px */
  background: var(--sl-gold);
}

.sl-marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: sl-marquee-scroll var(--sl-marquee-duration) linear infinite;
}
.sl-marquee:hover .sl-marquee__track { animation-play-state: paused; }

.sl-marquee__group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-right: clamp(1.5rem, 3vw, 2.5rem);
}

.sl-marquee__item {
  font-family: var(--sl-font-body);
  font-size: .75rem;                   /* 12px */
  font-weight: 800;
  line-height: 1.33;
  letter-spacing: var(--sl-ls-marquee);
  text-transform: uppercase;
  color: var(--sl-deep);
  white-space: nowrap;
}
.sl-marquee__sep {
  color: var(--sl-deep);
  font-size: .75rem;
  line-height: 1;
  opacity: .75;
}

@keyframes sl-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .sl-marquee__track { animation: none; }
  .sl-marquee { overflow-x: auto; scrollbar-width: none; }
  .sl-marquee::-webkit-scrollbar { display: none; }
}

/* ---- Dải phân cách mảnh giữa các section -------------------------- */
.sl-rule {
  border: 0;
  border-top: 1px solid var(--sl-border-soft);
  margin-block: var(--sl-space-section);
}