/**
 * Header — khớp reference: thanh xanh thẫm trong suốt, cao ~69px,
 * viền đáy tóc, blur 14px, nav chữ hoa 13/600, nút Book pill vàng.
 * Không đổi cấu trúc Elementor của header, không đổi menu.
 */

#masthead.site-header {
  background-color: rgba(7, 33, 26, .55);
  border-bottom: 1px solid rgba(247, 243, 233, .12);
  backdrop-filter: saturate(120%) blur(14px);
  -webkit-backdrop-filter: saturate(120%) blur(14px);
  transition: background-color var(--sl-dur-fast) var(--sl-ease);
}

/* Dính khi cuộn — class do sl-motion.js gắn vào <body>.
   Loại trừ header riêng của trang redesign: nó đã `fixed` sẵn, để rule này
   ăn vào thì `sticky` sẽ thắng và thanh trôi mất khi cuộn. */
body.sl-stuck #masthead.site-header:not(:has(.sl-hdr)) {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: var(--sl-deep);
}
/* Header riêng: giữ nền đặc khi đã cuộn, vẫn giữ fixed. */
body.sl-stuck #masthead:has(.sl-hdr) { background-color: var(--sl-deep); }

/* Header đè lên hero: vẫn giữ nền mờ như reference, không để trong suốt hẳn */
#masthead.overlap-header { background-color: rgba(7, 33, 26, .55); }

/* CozyStay tạo một header riêng khi cuộn. Nền xanh hơi trong với blur nhẹ;
   giữ opacity của cả header để chữ và nút vẫn rõ. */
#sticky-site-header.site-header {
  background-color: rgba(7, 33, 26, .92) !important;
  opacity: 1;
  backdrop-filter: saturate(120%) blur(10px);
  -webkit-backdrop-filter: saturate(120%) blur(10px);
}

/* Header chính và bản sticky dùng chung template Island Resort (54). */
:is(#masthead, #sticky-site-header) .elementor-54 .elementor-section {
  padding-block: 16px;
}
:is(#masthead, #sticky-site-header) .elementor-54 .cs-menu .primary-menu > li > a {
  line-height: 24px;
  padding-block: 10px;
}
:is(#masthead, #sticky-site-header) .elementor-54 .elementor-column > .elementor-widget-wrap {
  align-items: center;
  align-content: center;
}
:is(#masthead, #sticky-site-header) .elementor-54 .elementor-widget-cs_text-editor,
:is(#masthead, #sticky-site-header) .elementor-54 .elementor-widget-cs_text-editor :is(p, a) {
  color: var(--sl-on-deep);
  font-family: var(--sl-font-body);
  font-size: var(--sl-fs-nav);
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
}
:is(#masthead, #sticky-site-header) .elementor-54 .elementor-widget-cs_text-editor p {
  margin: 0;
}
:is(#masthead, #sticky-site-header) .elementor-54 .elementor-widget-cs_text-editor a:hover {
  color: var(--sl-gold-soft);
}

/* Thu gọn chiều cao về gần 69px của reference: theme đệm rất dày. */
#masthead.site-header .elementor-section { padding-block: 0; }
#masthead.site-header .elementor-section > .elementor-container { min-height: 69px; }
#masthead.site-header .elementor-widget,
#masthead.site-header .elementor-widget-wrap { margin-block: 0; padding-block: 0; }
#masthead.site-header .elementor-column > .elementor-element-populated { padding-block: 0; }
.cs-menu .primary-menu > li > a,
.main-navigation .menu > li > a { padding-block: 1.375rem; }

/* ---- Menu chính --------------------------------------------------- */
.cs-menu .primary-menu > li > a,
.main-navigation .menu > li > a {
  font-family: var(--sl-font-body);
  font-size: var(--sl-fs-nav);
  font-weight: 600;
  letter-spacing: var(--sl-ls-nav);
  text-transform: uppercase;
  color: var(--sl-mist);
  padding-block: 1.5rem;
  position: relative;
  transition: color var(--sl-dur-fast) var(--sl-ease);
}
.cs-menu .primary-menu > li > a:hover,
.main-navigation .menu > li > a:hover { color: var(--sl-gold-soft); }

/* Trang đang xem: chữ vàng như reference */
:is(#masthead, #sticky-site-header) :is(.cs-menu .primary-menu, .main-navigation .menu) > li:is(.current-menu-item, .current_page_item, .current-menu-ancestor, .current-menu-parent, .current_page_parent, .current_page_ancestor) > a,
:is(#masthead, #sticky-site-header) :is(.cs-menu .primary-menu, .main-navigation .menu) > li > a[aria-current="page"] {
  color: var(--sl-gold) !important;
  font-weight: 700 !important;
}

/* Bỏ gạch chân chạy — reference dùng đổi màu, không dùng gạch */
.cs-menu .primary-menu > li > a::after,
.main-navigation .menu > li > a::after { content: none; }

/* ---- Nút Book: pill vàng đặc -------------------------------------- */
:is(#masthead, #sticky-site-header) .cs-button-popup,
:is(#masthead, #sticky-site-header) .elementor-widget-cs_button a,
:is(#masthead, #sticky-site-header) .elementor-button {
  background-color: var(--sl-gold);
  color: var(--sl-deep);
  border: 0;
  border-radius: var(--sl-radius-button);
  padding: 10px 20px;
  font-family: var(--sl-font-body);
  font-size: var(--sl-fs-small);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
  line-height: 20px;
  transition: background-color var(--sl-dur-fast) var(--sl-ease);
}
:is(#masthead, #sticky-site-header) .cs-button-popup:hover,
:is(#masthead, #sticky-site-header) .elementor-widget-cs_button a:hover,
:is(#masthead, #sticky-site-header) .elementor-button:hover { background-color: var(--sl-gold-soft); color: var(--sl-deep); }

/* ---- Text phụ trong header (Tel, EN/FR) --------------------------- */
#masthead .elementor-widget-cs_text-editor,
#masthead .elementor-widget-text-editor,
#masthead .elementor-widget-cs_text-editor p,
#masthead .elementor-widget-text-editor p {
  font-family: var(--sl-font-body);
  font-size: var(--sl-fs-small);
  color: var(--sl-mist);
  background: transparent;
  margin: 0;
}
#masthead a { color: var(--sl-mist); }
#masthead a:hover { color: var(--sl-gold-soft); }

/* Nút Book giữ chữ tối trên nền cam, cả header thường và header sticky. */
:is(#masthead, #sticky-site-header) .elementor-widget-cs_button a.button,
:is(#masthead, #sticky-site-header) .elementor-widget-cs_button a.button:hover,
:is(#masthead, #sticky-site-header) .elementor-widget-cs_button a.button:focus-visible {
  --btn-color: var(--sl-deep);
  --btn-color-hover: var(--sl-deep);
  --btn-bg: var(--sl-gold);
  --btn-bg-hover: var(--sl-gold-soft);
  background: var(--sl-gold) !important;
  border: 0 !important;
  color: var(--sl-deep) !important;
}
:is(#masthead, #sticky-site-header) .elementor-widget-cs_button a.button:hover,
:is(#masthead, #sticky-site-header) .elementor-widget-cs_button a.button:focus-visible {
  background: var(--sl-gold-soft) !important;
}
:is(#masthead, #sticky-site-header) .elementor-widget-cs_button a.button span {
  color: inherit;
}

/* Giữ chiều cao và các đường viền tạo 3 vạch của theme ở cả hai header. */
:is(#masthead, #sticky-site-header) .menu-toggle {
  background: transparent;
  color: var(--sl-mist);
}

/* ---- Logo chữ ----------------------------------------------------- */
.site-title, .site-title a,
#masthead .elementor-widget-cs_logo .site-title {
  font-family: var(--sl-font-display);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sl-on-deep);
}

/* ---- Menu mobile / offcanvas -------------------------------------- */
/* Chỉ áp cho trang dùng header riêng — offcanvas là custom_blocks dùng
   chung toàn site, đổi vô điều kiện sẽ ảnh hưởng mọi trang.
   Theme đặt ẢNH nền cho khối này; chữ trắng trên ảnh sáng đọc không nổi. */
body:has(#masthead .sl-hdr) .sidemenu.sidemenu-custom {
  background-color: var(--sl-jade);
  background-image: none;
}
body:has(#masthead .sl-hdr) .sidemenu .container,
body:has(#masthead .sl-hdr) .sidemenu .elementor-section,
body:has(#masthead .sl-hdr) .sidemenu .elementor-background-overlay {
  background-image: none;
  background-color: transparent;   /* theme tô .container màu đen đặc */
}
.sidemenu .menu > li > a {
  font-family: var(--sl-font-display);
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  text-transform: none;
  color: var(--sl-on-deep);
  padding-block: .45em;
  display: inline-block;
}
.sidemenu .menu > li { border-bottom: 1px solid rgba(247, 243, 233, .12); }
.sidemenu .menu > li:last-child { border-bottom: 0; }
.sidemenu .menu > li > a:hover { color: var(--sl-gold-soft); }

/* ---- Lớp phủ tìm kiếm --------------------------------------------- */
.search-screen { background-color: rgba(7, 33, 26, .97); }
.search-screen .search-form input[type="search"],
.search-screen .search input[type="search"] {
  font-family: var(--sl-font-display);
  font-size: clamp(1.75rem, 5vw, 3rem);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(247, 243, 233, .3);
  border-radius: 0;
  padding: .5em 0;
  color: var(--sl-on-deep);
}
.search-screen .search-form input[type="search"]::placeholder { color: rgba(247, 243, 233, .5); }

.skip-link:focus { background: var(--sl-card); color: var(--sl-ink); }

/* ==================================================================
 * Header riêng của trang redesign (custom_site_headers "Destin Redesign
 * Header"). Bố cục: logo trái · menu giữa · nút Book phải — như reference.
 * Header dùng chung của site KHÔNG bị ảnh hưởng bởi khối này.
 * ================================================================== */

/* Chỉ trang nào dùng header này mới cố định — các trang khác giữ nguyên.
   Reference: fixed, cao 69px, container 1120px, padding 14px 0. */
body #masthead:has(.sl-hdr) {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
}
body.admin-bar #masthead:has(.sl-hdr) { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar #masthead:has(.sl-hdr) { top: 46px; } }

.sl-hdr > .elementor-container {
  width: min(1120px, 100% - 2 * var(--sl-gutter));
  max-width: none;
  margin-inline: auto;
  min-height: 69px;
  padding-block: 14px;
}
.sl-hdr { padding-inline: 0 !important; }
.sl-hdr .elementor-column > .elementor-element-populated { padding: 0; }

.sl-hdr-left  .elementor-widget-wrap { justify-content: flex-start; }
.sl-hdr-center .elementor-widget-wrap { justify-content: center; }
.sl-hdr-right .elementor-widget-wrap { justify-content: flex-end; }
.sl-hdr .elementor-widget-wrap { display: flex; align-items: center; }

/* Logo chữ: serif giãn chữ như reference */
.sl-logo .elementor-heading-title,
.sl-logo .elementor-heading-title a {
  font-family: var(--sl-font-display);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sl-on-deep);
  text-decoration: none;
  white-space: nowrap;
}
.sl-logo .elementor-heading-title a:hover { color: var(--sl-gold-soft); }

/* Menu giữa. Theme đặt line-height rất lớn cho link menu (cao 108px),
   phải ghi đè cả line-height lẫn padding thì thanh mới về đúng 69px:
   41px nội dung + 14px×2 padding của container = 69px. */
.sl-hdr-nav .cs-menu .primary-menu { justify-content: center; gap: 26px; align-items: center; }
.sl-hdr-nav .cs-menu .primary-menu > li > a {
  padding-block: 10px;
  line-height: 21px;
  display: inline-block;
}
.sl-hdr .elementor-widget-wrap { min-height: 41px; }

/* Nút Book: pill vàng, ghi đè style outline của theme */
.sl-hdr-cta .cs-button-popup,
.sl-hdr-cta a,
.sl-hdr-cta .button {
  background-color: var(--sl-gold) !important;
  border: 0 !important;
  border-radius: var(--sl-radius-button);
  color: var(--sl-deep) !important;
  padding: 10px 20px;
  font-family: var(--sl-font-body);
  font-size: var(--sl-fs-small);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 20px;
  text-transform: none;
  text-decoration: none;
  height: 40px;
  display: inline-flex;
  align-items: center;
}
.sl-hdr-cta .cs-button-popup:hover,
.sl-hdr-cta a:hover { background-color: var(--sl-gold-soft) !important; color: var(--sl-deep) !important; }

/* Elementor xếp cột dọc dưới 768px — header phải giữ 1 hàng ngang. */
.sl-hdr > .elementor-container { flex-wrap: nowrap; }
.sl-hdr--mobile .elementor-column { width: auto; flex: 1 1 auto; }
.sl-hdr--mobile .sl-hdr-left,
.sl-hdr--mobile .sl-hdr-right { flex: 0 0 auto; }

@media (max-width: 1024px) {
  .sl-hdr > .elementor-container { min-height: 60px; padding-block: 10px; }
  .sl-logo .elementor-heading-title,
  .sl-logo .elementor-heading-title a { font-size: .9375rem; letter-spacing: .18em; }
}
@media (max-width: 480px) {
  .sl-hdr-cta .cs-button-popup, .sl-hdr-cta a { padding: 8px 14px; font-size: .8125rem; }
  .sl-logo .elementor-heading-title,
  .sl-logo .elementor-heading-title a { font-size: .8125rem; letter-spacing: .14em; }
}