/******************************************************
 * MSBG Header Modern - Clean Desktop Baseline (v2)
 * 目標：
 *  - 桌機兩行 Header（Logo Row + Nav Row）
 *  - Announcement Bar 滿版
 *  - 紫金 Mega Dropdown v2
 *  - 玻璃霧面效果 + Sticky 強化
 *  - Mobile 由 header-mobile.css / msbg-mobile-menu.css 負責
 ******************************************************/

/*----------------------------------------------------
  0. 共用設定
-----------------------------------------------------*/

:root {
    --msbg-header-padding-x: 40px;
    --msbg-header-nav-gap: 28px;
    --msbg-gold: #f6e6b8;
    --msbg-gold-soft: #e9dbb0;
    --msbg-purple-soft: #c69cff;
    --msbg-header-bg: rgba(5, 5, 5, 0.70);
    --msbg-header-bg-sticky: rgba(5, 5, 5, 0.86);
}

/*----------------------------------------------------
  Sticky Header + Admin Bar Offset
  讓 Header 貼齊 WP Admin Bar 下緣
-----------------------------------------------------*/

:root{
  --msbg-adminbar-offset: 0px;
}

/* WP admin bar：desktop 32px、mobile 46px */
body.admin-bar{
  --msbg-adminbar-offset: 32px;
}

@media (max-width: 782px){
  body.admin-bar{
    --msbg-adminbar-offset: 46px;
  }
}

/* Header 黏在 admin bar 下緣 */
.site-header.site-header--modern{
  position: sticky;
  top: var(--msbg-adminbar-offset);
  z-index: 9990; /* 高於一般內容；dropdown 你已設 10000 仍會在上層 */
}

/*----------------------------------------------------
  1. Announcement Bar - Full Width 橫幅
-----------------------------------------------------*/

/* ----------------------------------------------------
   Announcement Bar – FIX vertical centering
   關鍵：inner 不用 flex，置中交給 item
---------------------------------------------------- */

.am-marquee-inner {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 var(--msbg-header-padding-x);
    box-sizing: border-box;
    overflow: hidden;
}

/* track 只負責垂直輪播 */
.am-marquee-track {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 每一則公告才是真正置中的容器 */
.am-marquee-item {
    width: 100%;
    display: flex;
    align-items: center;       /* 垂直置中 */
    justify-content: center;   /* 水平置中 */
    text-align: center;

    white-space: normal;
    box-sizing: border-box;

    /* 讓背景高度跟著字級縮放，但不會太薄也不會太厚 */
    padding-block: clamp(1px, 0.14em, 4px);
    padding-inline: 0;

    /* 讓行高穩定，避免字級變動時高度跳動 */
    line-height: 1.25;
}

/* 清掉 WP 自動 p margin */
.am-marquee-text,
.am-marquee-text p {
    margin: 0;
    padding: 0;
}

.am-marquee-text {
    font-size: inherit;        /* 關鍵：讓後台字級生效 */
    letter-spacing: 0.04em;
    margin: 0;
    padding: 0;
}

/*----------------------------------------------------
  2. Header 容器 + 玻璃霧面 + Sticky
-----------------------------------------------------*/

.site-header.site-header--modern {
    background: var(--msbg-header-bg);
    background-color: transparent; /* 合併進來 */
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.55);
    transition:
        background 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

/* Sticky 狀態：加深背景與陰影 */
.body-has-sticky-header .site-header.site-header--modern,
.msbg-header--scrolled .site-header.site-header--modern,
.site-header.site-header--modern.is-stuck {
    background: var(--msbg-header-bg-sticky);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
}

/* Header 內部結構：兩行排版 */
.site-header--modern .site-header__inner {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

/*----------------------------------------------------
  3. Logo Row（第一行）
  - 包含 SVG/IMG reset
  - 包含金屬流光（Plan A）唯一版本
-----------------------------------------------------*/

.site-header--modern .site-header__logo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0 8px;

    /* Shimmer needs */
    position: relative;
    overflow: hidden;
}

/* Logo Image base reset (SVG / IMG) */
.site-header__logo-img,
.msbg-mobile-menu__logo-img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* LOGO 圖片桌機縮放 */
.site-header--modern .site-header__logo-row img {
    transition: max-height 0.22s ease, transform 0.22s ease;
    max-height: 72px;
    height: auto;
    width: auto;
}

/* 捲動縮放：msbg-header-core.js 會在桌機捲動時加上 .is-header-shrink */
#site-header.site-header--modern.is-header-shrink .site-header__logo-row {
    padding: 10px 0 4px;
}
#site-header.site-header--modern.is-header-shrink .site-header__logo-row img {
    max-height: 52px;
}

/*----------------------------------------------------
  4. Nav Row（第二行）桌機主選單 + 右側按鈕
-----------------------------------------------------*/

.site-header--modern .site-header__nav-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* 左佔位 / 中央選單 / 右按鈕 */
    align-items: center;
    padding: 4px var(--msbg-header-padding-x) 12px;
    column-gap: 16px;
}

/* 左側佔位：確保「主選單」能真正置中 */
.site-header--modern .site-header__col--spacer { min-height: 1px; }

/* Grid placement：spacer=col1，nav=col2，actions=col3 */
.site-header--modern .site-header__col--nav { grid-column: 2; }
.site-header--modern .site-header__col--actions { grid-column: 3; }

/* 中間：主選單容器 */
.site-header--modern .site-header__col--nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 右側：會員中心、購物車、菜單按鈕 */
.site-header--modern .site-header__col--actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

/* 右側每個按鈕的基本樣式（套用到你實際的 .mj-header-link） */
.site-header--modern .mj-header-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--msbg-gold-soft);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(246, 230, 184, 0.18);
    background: radial-gradient(circle at top, rgba(198,156,255,0.16), rgba(22,15,35,0.9));
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.site-header--modern .mj-header-link:hover,
.site-header--modern .mj-header-link:focus-visible {
    border-color: rgba(246, 230, 184, 0.5);
    color: #fff;
    transform: translateY(-1px);
}

/* 購物車數量徽章 */
.site-header--modern .mj-header-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    font-size: 12px;
    line-height: 1;
    border-radius: 999px;
    color: #0b0712;
    background: linear-gradient(90deg, var(--msbg-gold), var(--msbg-purple-soft));
}

/* 桌機版隱藏「手機選單」按鈕（桌機已有主選單） */
@media (min-width: 1024px) {
    .mj-header-link--menu {
        display: none;
    }
}

/*----------------------------------------------------
  5. 桌機主選單基礎樣式
-----------------------------------------------------*/

@media (min-width: 1024px) {

    .mj-primary-nav {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mj-primary-nav__list {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--msbg-header-nav-gap);
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mj-primary-nav__list > li {
        position: relative;
    }

    /* 第一層連結樣式（紫金下劃線動畫） */
    .mj-primary-nav__list > li > a {
        position: relative;
        display: inline-flex;
        align-items: center;
        padding: 6px 0;
        color: var(--msbg-gold-soft);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-decoration: none;
        text-transform: uppercase;
        transition: color 0.18s ease;
    }

    /* 下劃線：預設寬 0，hover 展開 */
    .mj-primary-nav__list > li > a::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--msbg-gold), var(--msbg-purple-soft));
        transition: width 0.22s ease;
    }

    .mj-primary-nav__list > li:hover > a,
    .mj-primary-nav__list > li:focus-within > a {
        color: #ffffff;
    }

    .mj-primary-nav__list > li:hover > a::before,
    .mj-primary-nav__list > li:focus-within > a::before {
        width: 100%;
    }

    /* 有子選單的項目右側小箭頭 */
    .mj-primary-nav__list > li.menu-item-has-children > a::after {
        content: "";
        margin-left: 6px;
        border-width: 4px 4px 0 4px;
        border-style: solid;
        border-color: var(--msbg-gold-soft) transparent transparent transparent;
        transform: translateY(2px);
    }
}

/*----------------------------------------------------
  6. Mega Dropdown v2（紫金面板）
-----------------------------------------------------*/

@media (min-width: 1024px) {

    /* 第二層面板 */
    .mj-primary-nav__list > li > ul {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 100%;            /* 貼在主選單下緣 */
        margin-top: 0;        /* 關鍵：避免 hover gap */

        padding: 16px 28px 20px;
        min-width: 360px;
        max-width: 520px;
        background: radial-gradient(circle at top,
                  rgba(198,156,255,0.22) 0,
                  rgba(12,7,20,0.96) 45%,
                  rgba(5,3,12,1) 100%);
        border-radius: 4px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
        border: 1px solid rgba(246,230,184,0.16);

        list-style: none;
        display: none;
        z-index: 10000; /* 高於 header / announcement */
    }

    /* hover / focus 展開 dropdown */
    .mj-primary-nav__list > li:hover > ul,
    .mj-primary-nav__list > li:focus-within > ul {
        display: block;
    }

    /* 子項目 */
    .mj-primary-nav__list > li > ul > li {
        margin: 2px 0;
        white-space: nowrap;
    }

    .mj-primary-nav__list > li > ul > li > a {
        position: relative;
        display: inline-block;   /* 先給基礎，6-1 會覆蓋成 flex */
        padding: 3px 0;
        padding-bottom: 3px;     /* 預留底線空間 */
        font-size: 14px;
        color: #e0d2ff;
        text-decoration: none;
        overflow: hidden;
        transition: color 0.18s ease;
    }
}

/*----------------------------------------------------
  6-1. Mega Dropdown v2 - 子選單 Hover 視覺（方案 A）
  - 背景淡入
  - 左側金線滑入
  - Active 狀態保留 70%
-----------------------------------------------------*/

@media (min-width: 1024px) {

  /* 讓子選單每一列可吃到背景 */
  .mj-primary-nav__list > li > ul > li > a{
    display: flex;                /* 覆蓋第6段 inline-block */
    align-items: center;
    padding: 11px 14px 11px 16px; /* 點擊區更好用 */
    border-radius: 12px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
  }

  /* 左側金線（預設隱藏） */
  .mj-primary-nav__list > li > ul > li > a::before{
    content: "";
    position: absolute;
    left: 8px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--msbg-gold), var(--msbg-purple-soft));
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.18s ease, opacity 0.18s ease;
  }

  /* Hover / Focus */
  .mj-primary-nav__list > li > ul > li > a:hover,
  .mj-primary-nav__list > li > ul > li > a:focus-visible{
    background: rgba(255, 215, 140, 0.10);
    color: #ffffff;
  }

  .mj-primary-nav__list > li > ul > li > a:hover::before,
  .mj-primary-nav__list > li > ul > li > a:focus-visible::before{
    opacity: 1;
    transform: scaleY(1);
  }

  /* Active（目前頁面） */
  .mj-primary-nav__list > li > ul > li.current-menu-item > a,
  .mj-primary-nav__list > li > ul > li.current-menu-ancestor > a{
    background: rgba(255, 215, 140, 0.07);
  }

  .mj-primary-nav__list > li > ul > li.current-menu-item > a::before,
  .mj-primary-nav__list > li > ul > li.current-menu-ancestor > a::before{
    opacity: 0.75;
    transform: scaleY(1);
  }
}