/* clone-fixes.css
 * Overrides for Squarespace states that are normally toggled by runtime JS
 * (which we strip in the static clone). Forces JS-gated visibility to on so
 * background images, lazy images and scroll-animated blocks render statically.
 */

/* Hero / section background images: site.css sets visibility:hidden until JS */
.background-image-fx,
.section-background img,
.section-background-content img {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Lazy-loaded content images (image blocks, gallery, summary thumbs) */
img[data-image],
.sqs-image-content,
.summary-thumbnail-image,
.sqs-image,
.gallery-fullscreen-slideshow-item img,
.grid-image .grid-image-inner-wrapper img {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Scroll-reveal animation (thay cho Squarespace site-default animation runtime).
 * clone.js gắn .mia-anim cho các phần tử [data-animation-role] rồi thêm
 * .mia-anim--in khi cuộn tới. Nếu JS lỗi, phần tử vẫn hiện bình thường
 * (base CSS không ẩn chúng) -> progressive enhancement an toàn. */
.mia-anim {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
  will-change: opacity, transform;
}
.mia-anim.mia-anim--in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .mia-anim { opacity: 1; transform: none; transition: none; }
}

/* Loader overlay (site loading screen) must not cover the page without JS */
.sqs-site-loader,
#loader,
.loading-screen {
  display: none !important;
}

/* --- Mobile menu tự dựng ---
 * Header mobile của Squarespace bật/tắt bằng JS đo bề rộng (không media query,
 * không class gate) nên không kích hoạt được nếu thiếu JS runtime. Thay vào đó
 * ta ẩn nav gốc trên mobile và dùng burger + overlay riêng (markup trong layout,
 * toggle trong clone.js) — chắc chắn chạy, đúng 4 link sạch. */
/* Wordmark chữ thay logo ảnh (tên công ty) */
.mia-brand-text {
  display: inline-block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.12em;
  line-height: 1;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.mia-brand-text--footer {
  font-size: 2rem;
  letter-spacing: 0.14em;
  color: inherit;
}

/* Projects gallery: ép 4 cột/hàng, gap nhỏ (thay layout masonry do JS Squarespace
 * tính — JS đã bỏ nên inline style bị đóng băng ở 5 cột). Chỉ trang projects dùng. */
.sqs-gallery-design-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  height: auto !important;
  /* cách lề trái/phải một chút (không dính sát mép) */
  padding-left: 8px !important;
  padding-right: 8px !important;
  box-sizing: border-box !important;
}
.sqs-gallery-design-grid-slide {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  float: none !important;
  left: auto !important;
  top: auto !important;
}
.sqs-gallery-design-grid-slide .margin-wrapper {
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.sqs-gallery-design-grid-slide .image-slide-anchor {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
}
.sqs-gallery-design-grid-slide img.thumb-image {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 1 !important;
}
@media screen and (max-width: 767px) {
  .sqs-gallery-design-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Hero fullscreen (trang chủ): section cao đúng 1 màn hình, thấy trọn ảnh không cần scroll.
 * Trừ chiều cao header (~ biến --nap-header-h) để tổng header + hero = 100vh. */
/* Body của trang chủ = flex cao đúng 1 màn hình: header + hero = 100svh, KHÔNG scroll.
 * Hero tự lấp phần còn lại dưới header (không phụ thuộc số đo header). */
.nap-home {
  display: flex !important;
  flex-direction: column !important;
  height: 100svh !important;
  min-height: 100svh !important;
  overflow: hidden !important;
}
.nap-home > #page {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.nap-home #sections {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.nap-hero-fullscreen {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.nap-hero-fullscreen .section-border,
.nap-hero-fullscreen .section-background,
.nap-hero-fullscreen .section-background-content {
  height: 100% !important;
}
.nap-hero-fullscreen .background-image-fx {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
}

/* Header desktop: logo bên trái, menu bên phải (phá grid branding-center → flex) */
.header-announcement-bar-wrapper { width: 100% !important; }
.header-inner {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  align-items: center !important;
}
.header-display-desktop {
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  align-items: center !important;
}
.header-display-desktop .header-title-nav-wrapper {
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.header-display-desktop .header-title { order: 1 !important; margin: 0 !important; }
.header-display-desktop .header-nav { order: 2 !important; margin: 0 !important; }
.header-display-desktop .header-nav-wrapper { width: auto !important; max-width: none !important; }
.header-display-desktop .header-actions,
.header-display-desktop .header-burger { display: none !important; }
.header-display-desktop .header-nav-list {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  gap: 22px !important;
  width: auto !important;
  max-width: none !important;
}
/* bỏ margin 1.5vw của Squarespace (khoảng cách item quá lớn) */
.header-display-desktop .header-nav-item,
.header-layout-branding-center .header-nav .header-nav-item:not(:last-child) {
  white-space: nowrap !important;
  margin: 0 !important;
}
/* chữ IN HOA cho menu (desktop + mobile) */
.header-display-desktop .header-nav-item a,
#mia-mobile-nav a {
  text-transform: uppercase !important;
}

#mia-burger { display: none; }
#mia-mobile-nav { display: none; }

@media screen and (max-width: 767px) {
  #mia-body { overflow-x: hidden; }

  /* ẩn nav ngang gốc (giữ logo), tránh chồng chéo */
  .header-nav { display: none !important; }

  /* burger riêng, góc trên phải */
  #mia-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    position: fixed;
    top: 16px;
    right: 18px;
    z-index: 10000;
    width: 44px;
    height: 44px;
    padding: 9px;
    background: none;
    border: 0;
    cursor: pointer;
  }
  #mia-burger span {
    display: block;
    width: 26px;
    height: 2px;
    background: #181818;
    transition: transform .25s ease, opacity .25s ease;
  }

  /* overlay menu */
  #mia-mobile-nav {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    background: #fcf8f1;
    transform: translateY(-100%);
    transition: transform .38s cubic-bezier(.2,.7,.2,1);
  }
  #mia-mobile-nav a {
    font-size: 1.7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #181818;
    font-family: "Helvetica Neue", Arial, sans-serif;
  }
  body.mia-menu-open { overflow: hidden; }
  body.mia-menu-open #mia-mobile-nav { transform: none; }
  body.mia-menu-open #mia-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  body.mia-menu-open #mia-burger span:nth-child(2) { opacity: 0; }
  body.mia-menu-open #mia-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* cap tiêu đề hero khổng lồ + ràng buộc fluid-engine cho vừa màn hình */
  #mia-body #page h1 { font-size: clamp(2rem, 11vw, 3.4rem) !important; line-height: 1.12 !important; word-break: break-word; }
  #mia-body #page h2 { font-size: clamp(1.5rem, 8vw, 2.6rem) !important; word-break: break-word; }
  #mia-body .fluid-engine { width: 100% !important; max-width: 100% !important; }
}