/*!
 * ============================================================================
 * Powerman Header CSS — v2.1.7 (EN/CN rollout)
 * Architecture & Contract（真实实现说明）
 * ----------------------------------------------------------------------------
 * 目标
 * - 原生 WordPress blocks，仅用 tokens；显隐协议单一：[hidden]。
 * - Header：三列 15 / auto / 25 栅格；统一 sticky holder。
 * - Search：Header 仅 icon-only 按钮；抽屉面板为 Header 外的原生 Search。
 * - 宽度策略：抽屉容器整行 100%；form 宽度 100%（避免 flex 收缩）；
 *             胶囊 80% 行宽 + 上限（--wp--style--global--wide-size）；≤768px 满宽。
 *
 * DOM 合约
 * - Header 根：.pm-header
 * - 触发器（可多个）：.pm-header 内 .wp-block-search .wp-block-search__button
 * - 面板容器：#pm-search-panel 或 [data-pm-panel]（二选一，二者皆被支持）
 * - 面板 form：form.wp-block-search（位于面板容器内或面板容器本身）
 *
 * 样式职责
 * - Sticky：通过 .wp-block-template-part:has(.pm-header) 提供吸顶框架。
 * - 栅格：.pm-header-grid 建立主对齐基线；右列为聚合区（语言/CTA/搜索）。
 * - 导航：一级菜单保持单行；桌面子菜单 absolute，避免撑高行高。
 * - 语言切换：桌面“贴字 + 上下 5px”；下拉为 text-only，左缘像素对齐。
 * - 搜索：
 *   · Header 内隐藏输入，只显示放大镜（--pm-search-icon-size）。
 *   · 面板默认隐藏：#pm-search-panel,[data-pm-panel]{display:none}
 *   · 显示条件：:not([hidden]) → display:flex；容器整行，form 占满。
 *   · 胶囊 inside-wrapper：width:80%; max-width: var(--wp--style--global--wide-size)
 * - Logo：受 header 高度约束 + 视觉 max-width:140px。
 *
 * Tokens（必须存在）
 * - 颜色：--wp--custom--pm--color--fg/bg/border
 * - 间距：--wp--custom--pm--space--header-y / --wp--custom--pm--space--section-y / --wp--preset--spacing--20
 * - 圆角：--wp--custom--pm--radius--pill / --wp--custom--pm--radius--card
 * - 高度：--wp--custom--pm--header--height-desktop / --wp--custom--pm--header--height-mobile
 * - 宽度：--wp--style--global--wide-size
 * - 搜索图标：--pm-search-icon-size（在 :root 定义）
 * - 仅图标兜底：--pm-icon-search-fallback（本文件自带）
 *
 * Override 钩子（常用可调）
 * - :root { --pm-search-icon-size: 24px; }        // 放大镜尺寸（Header+面板共用）
 * - .pm-header .pm-lang summary.pm-lang__summary   // “贴字”内边距微调
 * - .pm-header .pm-cta .wp-element-button         // CTA 贴字与圆角
 * - .wp-block-site-logo（或其 img/svg）           // 视觉宽/高约束
 * - .wp-block-search__inside-wrapper               // 胶囊 80% → 70%/90% 等
 *
 * 无障碍
 * - focus ring：--wp--custom--pm--a11y--focus-ring
 * - 交互命中：桌面“贴字”，移动端（≤782px）兜底 min-height:44px
 *
 * 依赖
 * - powerman-header.js v2.3.2（自动标记面板、注入关键隐藏 CSS、切换 [hidden]）
 *
 * 维护提示
 * - 严禁为已存在 tokens 写 fallback（var(--token, …)）；仅图标兜底例外。
 * - 若更换“相对 80%”的参考对象，只需调整 form/容器的宽度约束，不改显隐协议。
 * ============================================================================
 */


/* ===== 0) Global icon fallback（仅此处允许兜底） ===== */
:root{
  --pm-icon-search-fallback: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>');
  --pm-header-sticky-top: 0px; /* 工程变量 */
}
body.admin-bar{ --pm-header-sticky-top: 32px; }
@media (max-width:782px){ body.admin-bar{ --pm-header-sticky-top: 46px; } }

/* ==========================================================================
   1) Sticky holder
   ========================================================================== */
.wp-block-template-part:has(.pm-header),
.wp-block-template-part.pm-header-sticky{
  position: sticky;
  top: var(--pm-header-sticky-top);
  z-index: var(--pm-z-template-part, 2000);
  background: var(--wp--custom--pm--color--bg);
}

/* ==========================================================================
   2) Header base
   ========================================================================== */
.pm-header{
  position: relative;
  z-index: var(--pm-z-header, 1900);
  background: var(--wp--custom--pm--color--bg);
  color: var(--wp--custom--pm--color--fg);
}
.pm-header a{ color: var(--wp--custom--pm--color--fg); }
.wp-site-blocks > main.wp-block-group{ margin-block-start: 0; }

/* ==========================================================================
   3) Layout grid：15 / 60 / 25
   ========================================================================== */
.pm-header-grid{
  display: flex;
  align-items: center;
  gap: var(--wp--custom--pm--space--grid-gap);
  padding-block: var(--wp--custom--pm--space--header-y);
  min-height: var(--wp--custom--pm--header--height-desktop);
}
@media (max-width: 781.98px){
  .pm-header-grid{ min-height: var(--wp--custom--pm--header--height-mobile); }
}
.pm-col-left{  flex: 0 0 15%; min-width: 0; }
.pm-col-mid{   flex: 1 1 60%; min-width: 0; }
.pm-col-right{ flex: 0 0 25%; min-width: 0; display:flex; justify-content:flex-end; }
.pm-right-cluster{
  display:inline-flex; align-items:center; justify-content:flex-end;
  gap: var(--wp--custom--pm--space--grid-gap); flex-wrap:nowrap; width:100%; min-width:0;
}

/* ==========================================================================
   4) Primary nav
   ========================================================================== */
.pm-header nav.wp-block-navigation > ul{
  display:flex; align-items:center; flex-wrap:nowrap;
  gap: var(--wp--custom--pm--nav--item-gap);
}
.pm-header nav.wp-block-navigation > ul > li{ display:flex; align-items:center; }
.pm-header nav.wp-block-navigation > ul > li > a.wp-block-navigation-item__content{
  display:inline-flex; align-items:center; justify-content:center;
  padding-inline: var(--wp--custom--pm--nav--pad-x);
  padding-block: 0;
  line-height: var(--wp--custom--pm--header--height-desktop);
}
@media (max-width:781.98px){
  .pm-header nav.wp-block-navigation > ul > li > a.wp-block-navigation-item__content{
    line-height: var(--wp--custom--pm--header--height-mobile);
  }
}
@media (min-width:782px){
  .pm-header nav.wp-block-navigation li.wp-block-navigation-submenu{ position:relative; }
  .pm-header nav.wp-block-navigation li.wp-block-navigation-submenu > .wp-block-navigation__submenu-container{
    position:absolute; inset-block-start:100%; inset-inline-start:0;
  }
}

/* ==========================================================================
   5) Language switch（桌面紧凑，不改逻辑）
   ========================================================================== */
.pm-header .pm-lang summary.pm-lang__summary,
.pm-header .pm-lang-switch summary.pm-lang__summary{
  display:inline-flex; align-items:center; gap:.5em;
  min-width:0; min-height:0;
  padding-block: 5px; padding-inline: 8px; /* 桌面“贴字” */
  line-height:1.1;
  border:1px solid var(--wp--custom--pm--color--border);
  border-radius: var(--wp--custom--pm--radius--card);
  background:transparent; color:var(--wp--custom--pm--color--fg);
  box-shadow:none; outline:0; cursor:pointer; user-select:none;
}
.pm-header .pm-lang summary.pm-lang__summary::-webkit-details-marker,
.pm-header .pm-lang-switch summary.pm-lang__summary::-webkit-details-marker{ display:none; }
.pm-header .pm-lang details.pm-lang__details,
.pm-header .pm-lang-switch details.pm-lang__details{ position:relative; }
.pm-header .pm-lang details.pm-lang__details > ul.pm-lang__list,
.pm-header .pm-lang-switch details.pm-lang__details > ul.pm-lang__list{
  position:absolute; inset-inline-start:0; inset-block-start:100%;
  z-index: var(--pm-z-lang, 1930);
  list-style:none; margin:0; padding:0;
  background:transparent; border:0; box-shadow:none; white-space:nowrap;
}
.pm-header .pm-lang__list > li.pm-lang__option{ margin:0; padding:0; }
.pm-header .pm-lang__list > li.pm-lang__option > a.pm-lang__link{
  display:inline-block; margin:0; padding:.25em .5em;
  color:inherit; text-decoration:none; background:transparent; border:0; box-shadow:none;
}
.pm-header .pm-lang__list > li.pm-lang__option > a.pm-lang__link:focus-visible,
.pm-header .pm-lang summary.pm-lang__summary:focus-visible,
.pm-header .pm-lang-switch summary.pm-lang__summary:focus-visible{
  outline:0; box-shadow: var(--wp--custom--pm--a11y--focus-ring);
  border-radius: var(--wp--custom--pm--radius--card);
}

/* ==========================================================================
   6) Header Search（按钮 icon-only；输入隐藏）
   ========================================================================== */
.pm-header .wp-block-search{ display:inline-flex; align-items:center; gap:.5rem; }
.pm-header .wp-block-search__input{ display:none; }
.pm-header .wp-block-search__button{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0;
  color: var(--wp--custom--pm--color--fg);
  background:transparent; border:0; border-radius:0; box-shadow:none; outline:0;
  text-indent:-9999px; white-space:nowrap; overflow:hidden;
}
.pm-header .wp-block-search__button svg{ display:none; }
.pm-header .wp-block-search__button::before{
  content:""; position:absolute; inset:0; margin:auto;
  width: var(--pm-search-icon-size); height: var(--pm-search-icon-size);
  background: currentColor;
  -webkit-mask: var(--pm-icon-search, var(--pm-icon-search-fallback)) center/contain no-repeat;
          mask: var(--pm-icon-search, var(--pm-icon-search-fallback)) center/contain no-repeat;
}
.pm-header .wp-block-search__button:focus-visible{
  box-shadow: var(--wp--custom--pm--a11y--focus-ring);
  border-radius: var(--wp--custom--pm--radius--pill);
}

/* ==========================================================================
   7) Search panel（#pm-search-panel 或 [data-pm-panel]；单一 [hidden]）
   ========================================================================== */
/* 默认隐藏 */
#pm-search-panel,
[data-pm-panel]{ display:none; }

/* 显示时（[hidden] 被移除） */
#pm-search-panel:not([hidden]),
[data-pm-panel]:not([hidden]){
  display:flex; justify-content:center; align-items:center;
}

/* 🧹 合并为唯一权威容器规则：整行布局 + 留白 */
#pm-search-panel,
[data-pm-panel]{
  width: 100%;
  max-width: none;                /* 80% 参照整行 */
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--20);
  padding-block:  var(--wp--custom--pm--space--section-y);
}

/* form 占满整行，避免 flex 子项收缩 */
#pm-search-panel form.wp-block-search,
[data-pm-panel] form.wp-block-search{
  width: 100%;
  max-width: none;
  flex: 0 1 auto;
}

/* 胶囊：行宽的 80%，并以站点 wide-size 为上限；小屏满宽 */
#pm-search-panel .wp-block-search__inside-wrapper,
[data-pm-panel] .wp-block-search__inside-wrapper{
  display:flex; align-items:center; gap:.5rem;
  width: 80%;
  max-width: var(--wp--style--global--wide-size);
  margin-inline:auto;
  border:1px solid var(--wp--custom--pm--color--border);
  border-radius: var(--wp--custom--pm--radius--pill);
  background: var(--wp--custom--pm--color--bg);
  box-shadow:none;
  padding-inline: var(--wp--preset--spacing--20);
}
@media (max-width:768px){
  #pm-search-panel .wp-block-search__inside-wrapper,
  [data-pm-panel] .wp-block-search__inside-wrapper{
    width:100%;
    max-width:none;
  }
}

/* Drawer 内输入与按钮 */
#pm-search-panel .wp-block-search__input,
[data-pm-panel] .wp-block-search__input{
  flex:1 1 auto; min-height:52px;
  border:0; outline:0; box-shadow:none; background:transparent;
  font:inherit; color: var(--wp--custom--pm--color--fg);
}
#pm-search-panel .wp-block-search__button,
[data-pm-panel] .wp-block-search__button{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0;
  background:transparent; color: var(--wp--custom--pm--color--fg);
  border:0; border-radius:0; box-shadow:none; outline:0;
  text-indent:-9999px; white-space:nowrap; overflow:hidden;
}
#pm-search-panel .wp-block-search__button svg,
[data-pm-panel] .wp-block-search__button svg{ display:none; }
#pm-search-panel .wp-block-search__button::before,
[data-pm-panel] .wp-block-search__button::before{
  content:""; position:absolute; inset:0; margin:auto;
  width: var(--pm-search-icon-size); height: var(--pm-search-icon-size);
  background: currentColor;
  -webkit-mask: var(--pm-icon-search, var(--pm-icon-search-fallback)) center/contain no-repeat;
          mask: var(--pm-icon-search, var(--pm-icon-search-fallback)) center/contain no-repeat;
}
#pm-search-panel .wp-block-search__button:focus-visible,
[data-pm-panel] .wp-block-search__button:focus-visible{
  box-shadow: var(--wp--custom--pm--a11y--focus-ring);
  border-radius: var(--wp--custom--pm--radius--pill);
}

/* ==========================================================================
   8) Logo constraint
   ========================================================================== */
.pm-header .wp-block-site-logo img,
.pm-header .wp-block-site-logo svg{
  max-width: 140px;
  max-height: calc(var(--wp--custom--pm--header--height-desktop) - 1px);
  height:auto; width:auto;
}
@media (max-width:781.98px){
  .pm-header .wp-block-site-logo img,
  .pm-header .wp-block-site-logo svg{
    max-height: calc(var(--wp--custom--pm--header--height-mobile) - 1px);
  }
}

/* ==========================================================================
   9) CTA & misc
   ========================================================================== */
.pm-header .pm-cta .wp-element-button{
  white-space:nowrap; word-break:normal;
  min-height:0;
  padding-block:8px; padding-inline:14px; /* 桌面“贴字” */
}
.pm-header :is(button,[role="button"],a,input,summary):focus-visible{
  box-shadow: var(--wp--custom--pm--a11y--focus-ring);
  border-radius: var(--wp--custom--pm--radius--card);
}

/* 📱 移动端命中面积兜底（不影响桌面紧凑观感） */
@media (max-width: 781.98px){
  .pm-header .pm-lang summary.pm-lang__summary,
  .pm-header .pm-lang-switch summary.pm-lang__summary,
  .pm-header .pm-cta .wp-element-button{
    min-height:44px;
  }
}

/* ==========================================================================
   10) Utility：视觉隐藏
   ========================================================================== */
.pm-sr-only{
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important;
  overflow:hidden!important; clip:rect(0,0,1px,1px)!important;
  white-space:nowrap!important; border:0!important;
}