/**
 * Mid-Autumn seasonal header — scoped under body.xx-season-midautumn.
 * Revert: set XX_ACTIVE_SEASON to '' in inc/xx-seasonal.php.
 *
 * Assets: ../../images/seasonal/midautumn/
 */

body.xx-season-midautumn {
  --xx-season-bg: #0063A9;
  --xx-season-bg-deep: #0a2f66;
  --xx-season-nav: #ffffff;
  --xx-season-nav-hover-bg: rgba(255, 255, 255, 0.14);
  --xx-season-badge-bg: #ffce43;
  --xx-season-badge-border: #e5921a;
  --xx-season-badge-text: #7a2a0a;
  --xx-season-dropdown-bg: #FFFAE6;
  --xx-season-banner-bg: #F6E07D;
}

/* ----- Header skin ----- */
body.xx-season-midautumn #header .header-wrapper,
body.xx-season-midautumn #masthead,
body.xx-season-midautumn #header .header-main {
  background-color: var(--xx-season-bg) !important;
  background-image:
    url("../../images/seasonal/midautumn/star.svg"),
    url("../../images/seasonal/midautumn/star.svg"),
    url("../../images/seasonal/midautumn/star.svg"),
    url("../../images/seasonal/midautumn/star.svg"),
    url("../../images/seasonal/midautumn/star.svg"),
    url("../../images/seasonal/midautumn/star.svg"),
    url("../../images/seasonal/midautumn/star.svg");
  background-repeat: no-repeat;
  background-size:
    10px 10px,
    8px 8px,
    12px 12px,
    7px 7px,
    9px 9px,
    6px 6px,
    11px 11px;
  background-position:
    8% 72%,
    18% 18%,
    42% 12%,
    58% 78%,
    72% 22%,
    88% 68%,
    96% 28%;
}

body.xx-season-midautumn #header .header-wrapper,
body.xx-season-midautumn #masthead.header-wrapper,
body.xx-season-midautumn .header-main {
  border-bottom: none;
  box-shadow: none;
}

body.xx-season-midautumn #header .header-main {
  position: relative;
  overflow: visible;
  z-index: 1;
}

/* ----- Logo + moon ----- */
body.xx-season-midautumn #logo {
  position: relative;
  z-index: 2;
}

body.xx-season-midautumn #logo::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 30%;
  width: 72px;
  height: 72px;
  /* 相对 logo 中心：偏左、偏上 */
  transform: translate(-72%, -78%);
  background: url("../../images/seasonal/midautumn/moon.svg") center / contain no-repeat;
  pointer-events: none;
  z-index: -1;
}

body.xx-season-midautumn #logo img,
body.xx-season-midautumn #logo .header-logo-dark,
body.xx-season-midautumn #logo .header-logo-light {
  position: relative;
  z-index: 1;
}

/* ----- Nav links (white on night sky；中秋徽章除外） ----- */
body.xx-season-midautumn .header-nav-main li.menu-item:not(.menu-item--midautumn) > a.nav-top-link {
  color: var(--xx-season-nav) !important;
  border-color: transparent;
}

body.xx-season-midautumn .header-nav-main li.menu-item:not(.menu-item--midautumn):hover > a.nav-top-link {
  background: var(--xx-season-nav-hover-bg);
  color: var(--xx-season-nav) !important;
  border-color: rgba(255, 255, 255, 0.35);
}

/* Header icons (cart / account) — keep light on dark；勿覆盖中秋徽章 */
body.xx-season-midautumn #header .header-nav > li:not(.menu-item--midautumn) > a,
body.xx-season-midautumn #header .header-nav > li:not(.menu-item--midautumn) > a i,
body.xx-season-midautumn #header .header-nav .cart-icon strong,
body.xx-season-midautumn #header .header-button a,
body.xx-season-midautumn #header .icon-menu,
body.xx-season-midautumn #header .nav-icon-a {
  color: var(--xx-season-nav) !important;
}

/* Cart img icon (SVG upload) → white on dark header */
body.xx-season-midautumn #header .header-cart-icon img.cart-img-icon,
body.xx-season-midautumn #header .cart-item img.cart-img-icon,
body.xx-season-midautumn #header .image-icon.header-cart-icon img {
  filter: brightness(0) invert(1);
}

/* ----- Dropdowns: cream background ----- */
body.xx-season-midautumn #header .nav-dropdown,
body.xx-season-midautumn #header .has-mega-menu > .nav-dropdown,
body.xx-season-midautumn #header .ub-menu.nav-dropdown,
body.xx-season-midautumn #header .xx-mega,
body.xx-season-midautumn #header .xx-mega .xx-mega__panel,
body.xx-season-midautumn #header .xx-mega .xx-mega__grid,
body.xx-season-midautumn #header .xx-mega .xx-mega__region,
body.xx-season-midautumn #header .xx-mega .xx-mega__region--scenes,
body.xx-season-midautumn #header .xx-mega .xx-mega__region--regular-items,
body.xx-season-midautumn #header .xx-mega.xx-mega--new-layout .xx-mega__region--regular-items,
body.xx-season-midautumn #header .xx-mega.xx-mega--cards .xx-mega__card {
  background: var(--xx-season-dropdown-bg) !important;
  background-color: var(--xx-season-dropdown-bg) !important;
}

body.xx-season-midautumn #header .xx-mega .xx-mega__region--festival,
body.xx-season-midautumn #header .xx-mega.xx-mega--new-layout .xx-mega__region--new-arrivals {
  background: #fff3d1 !important;
}

/* ----- Mid-Autumn badge (Figma yellow pill) ----- */
body.xx-season-midautumn #header .header-nav-main li.menu-item.menu-item--midautumn > a.nav-top-link {
  background: var(--xx-season-badge-bg);
  color: var(--xx-season-badge-text) !important;
  border: 2px solid var(--xx-season-badge-border);
  border-radius: 4px;
  padding: 6px 12px;
  position: relative;
  overflow: visible;
  z-index: 10;
}

body.xx-season-midautumn #header .header-nav-main li.menu-item.menu-item--midautumn:hover > a.nav-top-link {
  background: #ffd86a;
  color: var(--xx-season-badge-text) !important;
  border-color: var(--xx-season-badge-border);
  transform: scale(1.04);
}

body.xx-season-midautumn #header .header-nav-main li.menu-item.menu-item--midautumn:active > a.nav-top-link {
  transform: scale(0.99);
}

/* Sparkle (top-right) — megamenu hides li::before/::after, decorate the link instead */
body.xx-season-midautumn #header .header-nav-main li.menu-item.menu-item--midautumn > a.nav-top-link::after {
  content: "";
  position: absolute;
  right: -8px;
  top: -10px;
  width: 16px;
  height: 18px;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: url("../../images/seasonal/midautumn/sparkle.svg") center / contain no-repeat;
  pointer-events: none;
  transform: rotate(10deg) scaleX(-1);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
  z-index: 2;
}

/* Lantern (bottom-left of badge) */
body.xx-season-midautumn #header .header-nav-main li.menu-item.menu-item--midautumn > a.nav-top-link::before {
  content: "";
  position: absolute;
  left: -14px;
  bottom: -14px;
  width: 24px;
  height: 26px;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: url("../../images/seasonal/midautumn/lantern.svg") center / contain no-repeat;
  pointer-events: none;
  z-index: 2;
}

/* ----- Mobile / tablet ----- */
@media screen and (max-width: 849px) {
  body.xx-season-midautumn #logo::before {
    width: 56px;
    height: 56px;
    transform: translate(-70%, -72%);
  }

  body.xx-season-midautumn #header .header-wrapper,
  body.xx-season-midautumn #masthead,
  body.xx-season-midautumn #header .header-main {
    background-size:
      8px 8px,
      6px 6px,
      9px 9px,
      5px 5px,
      7px 7px,
      5px 5px,
      8px 8px;
  }

  /* Top bar：前方熊仔月饼 icon（仅手机） */
  body.xx-season-midautumn .section.top-bar .banner-inner {
    position: relative;
    padding-left: 58px !important;
    box-sizing: border-box;
  }

  body.xx-season-midautumn .section.top-bar .banner-inner::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 48px;
    height: 48px;
    transform: translateY(-50%);
    background: url("../../images/seasonal/midautumn/bear-mooncake.png") center / contain no-repeat;
    pointer-events: none;
    z-index: 1;
  }

  /* 侧栏中秋菜单：黄底 + 前方 icon（对齐 Figma 41678:109548） */
  body.xx-season-midautumn #main-menu .nav-sidebar > li.menu-item.menu-item--midautumn,
  body.xx-season-midautumn .nav-sidebar > li.menu-item.menu-item--midautumn,
  body.xx-season-midautumn .mobile-sidebar .nav-sidebar > li.menu-item.menu-item--midautumn {
    background: var(--xx-season-banner-bg) !important;
    border-top: 1px solid #f3f3f3;
  }

  body.xx-season-midautumn #main-menu .nav-sidebar > li.menu-item.menu-item--midautumn > a,
  body.xx-season-midautumn .nav-sidebar > li.menu-item.menu-item--midautumn > a,
  body.xx-season-midautumn .mobile-sidebar .nav-sidebar > li.menu-item.menu-item--midautumn > a {
    background: transparent !important;
    color: #5E2323 !important;
    border: none !important;
    border-radius: 0;
    display: flex !important;
    align-items: center;
    min-height: 48px;
    padding: 6px 48px 6px 52px !important;
    position: relative;
    font-weight: 600;
    transform: none !important;
  }

  body.xx-season-midautumn #main-menu .nav-sidebar > li.menu-item.menu-item--midautumn > a::before,
  body.xx-season-midautumn .nav-sidebar > li.menu-item.menu-item--midautumn > a::before,
  body.xx-season-midautumn .mobile-sidebar .nav-sidebar > li.menu-item.menu-item--midautumn > a::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 34px;
    height: 36px;
    transform: translateY(-50%);
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: url("../../images/seasonal/midautumn/bear-mooncake.png") center / contain no-repeat;
    pointer-events: none;
    z-index: 1;
  }
}

/* ----- Homepage promo banner strip（人均$98起） ----- */
body.xx-season-midautumn .section.top-bar {
  background-color: var(--xx-season-banner-bg) !important;
  background-image: none !important;
}

body.xx-season-midautumn .section.top-bar .banner-text {
  color: #5E2323 !important;
}

body.xx-season-midautumn .section.top-bar .banner-text .banner-price {
  color: #EE4816 !important;
}

/* ----- 報價查詢 button（Figma 41677:99822） ----- */
body.xx-season-midautumn #header button.quotation {
  background: #ffce43 !important;
  background-color: #ffce43 !important;
  color: #5e2323 !important;
  border: none !important;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.238px;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

body.xx-season-midautumn #header button.quotation:hover {
  background: #ffd86a !important;
  color: #5e2323 !important;
  filter: brightness(1.02);
}