/* Shared header/footer parity layer (R2).
 *
 * The header and footer markup is the vendor preview's own markup, so almost
 * every rule comes from the vendored Tailwind build (reference-layout.css) and
 * the vendored navx navigation stylesheet (assets/navx/).  Only the three gaps
 * below are filled here, each measured against the preview's computed styles:
 *
 *  - .text-sl        the preview's custom utility (font-size 1rem / line-height
 *                    24px).  Without it the footer lists inherit body 1.65 and
 *                    every list row grows to 26.4px instead of 24px.
 *  - .navigation     the preview's nav is 80px tall at 1440 and at 390 (navx
 *                    alone gives min-height 60px), and its inherited text colour
 *                    is #000 (the preview body colour) rather than the theme's
 *                    #111827.
 *  - footer          the preview footer inherits line-height normal; the theme
 *                    body uses 1.65, which would make the copyright line 26.4px.
 */
.text-sl {
  font-size: 1rem;
  line-height: 1.5rem;
}

/* WordPress' global-styles block prints `ul { padding-left: 2em; margin: … }`
 * for every list; the preview relies on Tailwind's preflight reset instead, so
 * the two footer lists must be reset explicitly (padding 40px + 16px margin
 * would otherwise stretch the footer from 456px to 477px).
 *
 * R2fix D2: the reset is scoped to the footer lists and to navx' own menu
 * containers (.navigation-menu / .navigation-dropdown, which navx already
 * zeroes itself).  As a bare `.navigation ul` (0,1,1) it out-ranked Tailwind's
 * `.p-2` (0,1,0) and wiped the language panel's 8px padding — panel 224px wide,
 * items 224px instead of 206px. */
footer ul,
.navigation .navigation-menu,
.navigation .navigation-dropdown {
  margin: 0;
  padding: 0;
  list-style: none;
}

footer li,
.navigation li {
  margin: 0;
  padding: 0;
}

.navigation {
  height: 80px;
  color: #000;
}

/* navx ships 14px links / 13px drop-down links / 180px drop-downs; the preview
 * overrides all three (16px text, 200px drop-down panel), so they are restored
 * here from the preview's computed styles. */
.navigation .navigation-link {
  font-size: 16px;
}

.navigation .navigation-input {
  padding: 11px 40px 11px 12px;
  font-size: 14px;
  line-height: 1.4;
}

/* Tailwind's preflight forces `line-height: inherit` on form controls; navx
 * expects 1.4 (preview input 43.6px tall at both viewports). */
.navigation .navigation-btn {
  line-height: 1.4;
}

/* The drop-down panel is 200px on desktop only: navx keeps it full-width inside
 * the mobile drawer, and the preview does the same (390px at 390). */
@media (min-width: 992px) {
  .navigation .navigation-dropdown {
    width: 200px;
  }
}

.navigation .navigation-dropdown-link {
  font-size: 16px;
}

.navigation-logo a {
  color: #0066cc;
}

/* R2fix D4: the theme's global `a { color: var(--bw-purple) }` (style.css, with
 * regression.css redefining --bw-purple to #746100) wins over the preview's
 * customer.css link colour #0066cc.  Restored only on the two header/footer
 * link groups R9 flagged — the language entries and the four social links —
 * so no other page element changes colour. */
.navigation a[data-bw-language],
footer a[aria-label="facebook"],
footer a[aria-label="instagram"],
footer a[aria-label="tiktok"],
footer a[aria-label="youtube"] {
  color: #0066cc;
}

.navigation-header {
  height: 80px;
}

/* R2fix D1（面板边框）：预览站的 Tailwind preflight 带 `*,::before,::after
 * {border-style:solid}` 基础层，所以只写 `border`（1px）的元素也能画出 1px 边框；
 * 本站 reference-layout.css 缺这一层，`.border`（1px）因 border-style 仍是 none
 * 被算成 0 → 语言面板 76px、预览站 78px。这里只对 nav/页脚子树补回同一行为，
 * 不触碰其它页面元素。 */
.navigation .border,
footer .border {
  border-style: solid;
}

.bw-hf-spacer {
  height: 80px;
}

footer {
  line-height: normal;
}

/* R2fix D6: at 390 the preview's two-line copyright block measures 44px (two
 * 22px line boxes); the same text in this theme's font stack (Noto Sans CJK
 * fallback, `normal` = 1.448em) gives two 24px boxes = 48px, which pushes the
 * whole bar to 80px against the preview's 77px (+3.9%, over the 3% line).  At
 * 1440 the preview is a single 24px line and this theme already matches it, so
 * the pin is mobile-only. */
@media (max-width: 767px) {
  footer .py-4 .text-center {
    line-height: 22px;
  }
}

/* ---------------------------------------------------------------------------
 * M1c（目标 C）：导航 hover / active 配色与预览站一致。
 *
 * 现状（M1c 修复前实测，1440）：首页「首页」与「产品中心」的 .navigation-link::after
 * 背景是 rgb(254,217,0)=#FED900（预览站同值），而 about / news 是 rgb(115,103,240)
 * —— 因为首页另载原站 CSS（带 #FED900），其余页面只剩 navx 的 colored skin
 * （navigation-skin-colored.css 里写死 #7367F0 !important）。用户看到的就是
 * 「首页按钮背景与悬停色正常，其它页面不正常」。
 *
 * 预览站三页实测值（getComputedStyle，1440，见 m1c/measurements.md）：
 *   hover 产品中心 / active 首页 / 下拉项 hover：
 *     .navigation-link          color: rgb(255,255,255)
 *     .navigation-link::after   background-color: rgb(254,217,0)
 *     .navigation-dropdown-link color: rgb(255,255,255)
 *                               background-color: rgb(254,217,0)
 *     .submenu-indicator::after border-color: transparent #fff #fff transparent
 * 因此这里把「悬停/焦点/当前项」三点统一到 #FED900，覆盖 navx skin 的紫色。
 * 选择器比 skin 多一个 .navigation 前缀（0,9,x > 0,8,x），且本文件在 skin 之后加载，
 * 不改变任何非 hover/active 的静态观感。
 * ------------------------------------------------------------------------- */
:root {
  --bw-nav-active-bg: #fed900; /* 预览站 computed rgb(254,217,0) */
}

.navigation .navigation-menu:not(.navigation-social-menu) .navigation-item:not(.navigation-avatar-item):not(.navigation-logo):not(.navigation-brand-text):hover > .navigation-link::after,
.navigation .navigation-menu:not(.navigation-social-menu) .navigation-item:not(.navigation-avatar-item):not(.navigation-logo):not(.navigation-brand-text):focus > .navigation-link::after,
.navigation .navigation-menu:not(.navigation-social-menu) .navigation-item:not(.navigation-avatar-item):not(.navigation-logo):not(.navigation-brand-text).is-active > .navigation-link::after {
  background-color: var(--bw-nav-active-bg) !important;
}

.navigation .navigation-menu:not(.navigation-social-menu) .navigation-item:not(.navigation-avatar-item):not(.navigation-logo):not(.navigation-brand-text):hover > .navigation-link,
.navigation .navigation-menu:not(.navigation-social-menu) .navigation-item:not(.navigation-avatar-item):not(.navigation-logo):not(.navigation-brand-text):focus > .navigation-link,
.navigation .navigation-menu:not(.navigation-social-menu) .navigation-item:not(.navigation-avatar-item):not(.navigation-logo):not(.navigation-brand-text).is-active > .navigation-link {
  color: #fff;
  border-color: var(--bw-nav-active-bg);
}

/* 下拉项：预览站背景同样是 #FED900（navx skin 给 #7367F0）。 */
.navigation .navigation-dropdown .navigation-dropdown-item:hover > .navigation-dropdown-link,
.navigation .navigation-dropdown .navigation-dropdown-item:focus > .navigation-dropdown-link,
.navigation .navigation-dropdown .navigation-dropdown-item.is-active > .navigation-dropdown-link {
  color: #fff;
  background-color: var(--bw-nav-active-bg);
}