/* jdtheme26 — header main menu (Chinese labels) fitted into the Sweets header. The small English subtitle under each label
   (`data-en` attribute + ::after) was removed 2026-09-26 (operator 「幫我把menu的英文刪除」). No !important. */

/* 2026-09-26: every `.whb-header` selector below is `:is(.whb-header, .whb-clone)` — the sticky header is a separate
   `.whb-sticky-header.whb-clone` element OUTSIDE `.whb-header` (Kids-style sticky clone), and without this it showed the
   demo's per-item menu icons. */

/* (2026-09-28: 10 items) 9 items must stay on ONE row inside the header's menu column (it is the flexible middle column between
   the logo and the account/wishlist/compare/cart tools). */
:is(.whb-header, .whb-clone) .wd-header-nav .wd-nav-main {
  --nav-gap: 6px;                 /* WoodMart's default is 20px */
  flex-wrap: nowrap;
  justify-content: flex-start;
}
:is(.whb-header, .whb-clone) .wd-header-nav .wd-nav-main > li > a {
  font-size: 16px;                /* 2026-09-27: +2px (operator 「menu字級加大2px」; was 14px) */
  letter-spacing: .15em;          /* 2026-09-27: the site-wide default (was .03em); tiers below re-fit the row */
  padding-inline: 4px;
  white-space: nowrap;
}

/* the demo's per-item icons are not used */
:is(.whb-header, .whb-clone) .wd-nav-main .wd-nav-img { display: none; }

/* 1025–1279px desktop widths leave the middle column even narrower: tighten */
@media (min-width: 1025px) and (max-width: 1279px) {
  :is(.whb-header, .whb-clone) .wd-header-nav .wd-nav-main { --nav-gap: 2px; }
  :is(.whb-header, .whb-clone) .wd-header-nav .wd-nav-main > li > a { font-size: 15px; padding-inline: 3px; }   /* +2px (was 13px) */
}

/* ---- Kids header follow-up (2026-09-26) ------------------------------------------------------------
   The header is a solid, non-overlapping bar now (Kids header-1), so WoodMart's 40px top padding of the main
   content column shows as a white strip between the header line and the home hero — remove it on the front page. */
body.home .wd-content-layout.content-layout-wrapper { padding-top: 0; }

/* ---- Fixed spacing between menu items (operator 2026-09-26: 「header menu改成不要用每個li固定寬度，改成固定間隔就好」) ------
   Replaces the same-width-per-<li> rule of earlier the same day. Desktop ≥1280px: every item keeps its own (content) width and
   the gap between neighbouring items is one fixed value, no padding on the links — so the space between two labels is
   identical everywhere in the menu. Two tiers so all 9 labels (≈560px of text at 14px) always fit beside the tools:
     1280–1399px → 16px (room ≈ 706px at 1280)      ≥1400px → 24px (room ≈ 814px at 1400, ≈ 860px at 1450)
   ≤1279px keeps the compact rule above (2px gap + 3px link padding each side = 8px between labels). Applies to the header
   and to the sticky clone bar. */
@media (min-width: 1280px) {
  :is(.whb-header, .whb-clone) .wd-header-nav .wd-nav-main {
    --nav-gap: 16px;                                 /* the fixed gap between items */
    justify-content: center;
  }
  :is(.whb-header, .whb-clone) .wd-header-nav .wd-nav-main > li > a {
    padding-inline: 0;
  }
}
@media (min-width: 1400px) {
  :is(.whb-header, .whb-clone) .wd-header-nav .wd-nav-main { --nav-gap: 24px; }
}

/* ---- Header main menu hover: "Soft Fill Circle" (menuhover.com; operator 2026-09-27: 「header主選單的hover 請加入動態效果 … Soft Fill Circle 顏色#faf4e6」) ----
   The reference is just `a{transition:.4s} a:hover{background-color: rgba(166,166,166,.2); border-radius:50%}` on a padded link — a soft filled ellipse behind the label.
   Here the fill is a ::before box centred on the label (14px wider each side, 40px high, radius 50%) so the menu spacing / row height do not change; it fades and
   grows in over .4s. Colour #faf4e6 (operator-given, not a palette colour). Header, sticky clone alike. Text colour on hover is the theme's own (unchanged). */
:is(.whb-header, .whb-clone) .wd-header-nav .wd-nav-main > li > a {
  position: relative;
  isolation: isolate;
}
:is(.whb-header, .whb-clone) .wd-header-nav .wd-nav-main > li > a::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: -14px;
  right: -14px;
  height: 40px;
  border-radius: 50%;
  background-color: #faf4e6;
  opacity: 0;
  transform: translateY(-50%) scale(.85);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
:is(.whb-header, .whb-clone) .wd-header-nav .wd-nav-main > li:hover > a::before,
:is(.whb-header, .whb-clone) .wd-header-nav .wd-nav-main > li > a:focus-visible::before {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  :is(.whb-header, .whb-clone) .wd-header-nav .wd-nav-main > li > a::before { transition: none; }
}

/* ---- Sticky bar logo 150px (operator 2026-09-27: 「sticky header改成寬度150px」, read as the logo): the sticky clone copies the header's logo HTML with an inline
   `max-width:200px`, so Header Builder's `sticky_width` (now 150 too) does not reach it — hence `!important`. The normal header logo stays 200px. */
.whb-clone .site-logo img { max-width: 150px !important; }

/* ---- Sticky bar menu (operator 2026-09-29: 「sticky header menu的主選單文字改成15px, 並且每個選單中間gap要等距離加大間隔」) ----
   ONE font size in the sticky bar: 15px at every desktop width (before: 16 / 15 / 14 / 14 / 13px by width). The gap between the 10 items is one value
   (flex gap → every distance is equal) and is as LARGE as the bar allows: it grows with the window and is capped at 40px.
   How it is worked out [measured 2026-09-29 in the real sticky bar]:
     room for the menu  ≈ window − 372px (≥1280px)  ·  window − 300px (1025–1279px)      (logo column 170 + tools column 120 + side margins)
     width of the 10 labels at 15px, no gaps:  893px (.15em letter-spacing, 7 dropdown arrows)  ·  773px (.1em, no arrows)  ·  735px (.05em, no arrows)
                                               ≈ 696px (0 letter-spacing, no arrows)
     gap = (room − labels − 24px spare) ÷ 9
   To keep 15px where the bar is short, the letter-spacing gets tighter and the small dropdown arrows are left out below 1440px (the dropdowns still
   open on hover). The NORMAL header is not affected. The label is the inner <span class="nav-link-text">, which has its own letter-spacing from the
   site default → both selectors. */
@media (min-width: 1025px) {
  .whb-clone .wd-header-nav .wd-nav-main { justify-content: center; }
  .whb-clone .wd-header-nav .wd-nav-main > li > a { padding-inline: 0; }
  .whb-clone .wd-header-nav .wd-nav-main > li > a,
  .whb-clone .wd-header-nav .wd-nav-main > li > a .nav-link-text { font-size: 15px; }
}
@media (min-width: 1440px) {
  .whb-clone .wd-header-nav .wd-nav-main { --nav-gap: clamp(14px, calc((100vw - 1289px) / 9), 40px); }      /* 1440 → 16px · 1470 → 20px · 1600 → 34px · ≥1650 → 40px */
}
@media (min-width: 1025px) and (max-width: 1439px) {
  .whb-clone .wd-header-nav .wd-nav-main > li > a::after { display: none; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .whb-clone .wd-header-nav .wd-nav-main { --nav-gap: clamp(12px, calc((100vw - 1169px) / 9), 26px); }      /* 1280 → 12px · 1366 → 21px · ≥1403 → 26px */
  .whb-clone .wd-header-nav .wd-nav-main > li > a,
  .whb-clone .wd-header-nav .wd-nav-main > li > a .nav-link-text { letter-spacing: .1em; }
}
@media (min-width: 1140px) and (max-width: 1279px) {
  .whb-clone .wd-header-nav .wd-nav-main { --nav-gap: clamp(7px, calc((100vw - 1075px) / 9), 20px); }       /* 1140 → 7px · 1200 → 14px · ≥1255 → 20px (24px overflowed at 1279px in the test) */
  .whb-clone .wd-header-nav .wd-nav-main > li > a,
  .whb-clone .wd-header-nav .wd-nav-main > li > a .nav-link-text { letter-spacing: .05em; }
}
@media (min-width: 1025px) and (max-width: 1139px) {
  .whb-clone .wd-header-nav .wd-nav-main { --nav-gap: clamp(1px, calc((100vw - 1020px) / 9), 13px); }       /* 1025 → 1px · 1080 → 6px · 1139 → 13px */
  .whb-clone .wd-header-nav .wd-nav-main > li > a,
  .whb-clone .wd-header-nav .wd-nav-main > li > a .nav-link-text { letter-spacing: 0; }
}

/* Menu hover text stays dark (operator 2026-09-27: 「主選單hover的文字顏色改回黑色」): WoodMart turns the hovered link the primary colour (teal) — on the cream Soft-Fill
   ellipse that is ~1.7:1. Hover / keyboard-focus / open-dropdown state now keeps the normal label colour (ink-900). The CURRENT-page item keeps its own colour. */
body :is(.whb-header, .whb-clone) .wd-header-nav .wd-nav-main > li:hover > a,
body :is(.whb-header, .whb-clone) .wd-header-nav .wd-nav-main > li.wd-opened > a,
body :is(.whb-header, .whb-clone) .wd-header-nav .wd-nav-main > li > a:focus-visible { color: var(--jd-ink-900); }

/* ---- phone / tablet side menu (.mobile-nav), operator 2026-09-29 ----
   「.mobile-nav .wd-nav-opener 把 border-inline-start 改成0 … 手機版主選單請隱藏"手作零食"因為跟"JUST DOG 天然零食"重複，字級改16px, 粗細改normal」
   (the icon of 服飾配件 is a menu item picture, not CSS: uploads/nav-icons/navicon-apparel.svg)
   The desktop menu uses the same WordPress menu and keeps all ten items. */
body .mobile-nav .wd-nav-opener { border-inline-start: 0; }
body .mobile-nav .wd-nav-mobile > li.jd-hide-mobile { display: none; }        /* menu item with the CSS class jd-hide-mobile (Appearance > Menus) */
body .mobile-nav .wd-nav-mobile > li > a {
  font-size: 16px;
  font-weight: 400;
}
/* no item icons in the phone / tablet side menu (operator 2026-09-30: 「手機版選單刪除圖示」). The pictures stay on the menu items
   (uploads/nav-icons/*.svg), so they can come back by removing this rule; the desktop menu hides them already (rule near the top). */
body .mobile-nav .wd-nav-mobile .wd-nav-img { display: none; }