/* ============================================================================
   css/site-header.css — 全站唯一一份「站点级页头」样式
   ----------------------------------------------------------------------------
   这些规则原本长在 css/home.css 的 .hp- 命名空间里，页头因此只有首页拥有。
   第 6 阶段把页头抽成共享组件后，样式随组件一起搬到本文件：
   首页 / 体育 / 校历 / 管理后台四页共用同一份，不存在第二份实现。

   两条约定：
   1) 令牌默认值写在 :where(:root)（特异性 0）。首页 css/home.css 的 :root
      优先级更高，因此首页的令牌取值逐字不变；其它页面由本文件兜底。
   2) 除 :where(:root) 与 .hp-header 的盒模型规则外，每条规则都以 .hp- 开头，
      不会作用到 .hp- 以外的任何元素。
   ============================================================================ */

/* ── 令牌默认值（与 css/home.css 第 24 行 :root 逐字一致，只做缺省兜底）── */
:where(:root) {
    --hp-ink: #2A1430;
    --hp-ink-soft: #4A2E50;
    --hp-muted: #6F5A74;
    --hp-faint: #715C78;
    --hp-cream: #FAF5FB;
    --hp-line: #E3D6E8;
    --hp-line-soft: #EDE2F0;
    --hp-plum: #813A89;
    --hp-plum-deep: #5E2864;
    --hp-teal: #813A89;
    --hp-max: 1240px;
    --hp-gutter: 40px;
    --hp-fs-micro: 12px;
    --hp-r-pill: 999px;
    --hp-display: 'Cormorant', 'Noto Serif SC', Georgia, serif;
    --hp-serif: 'Noto Serif SC', 'Songti SC', 'Cormorant', Georgia, serif;
    --hp-sans: 'Outfit', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


/* ══ 英文模式：不重复显示第二行英文品牌名 ══ */

html[lang="en"] .hp-brand__en {
    display: none;
}

/* ══════════════════════ 页头 + 主导航（顶部工具条已整条移除）══════════════════════ */
/* 层级 60：与抽取前的 css/site-chrome.css 页头一致，高于体育页悬停卡片
   (.aux-card-wrapper:hover 的 50) 与后台工具栏；首页原本也没有 51–59 的竞争者。 */
.hp-header {
    position: sticky;
    top: 0;
    z-index: 60;
    /* 非首页没有 css/home.css 的 .hp-body，这里补齐等价继承值，四页页头才逐像素一致 */
    font-family: var(--hp-sans);
    line-height: 1.75;
    color: var(--hp-ink);
    -webkit-font-smoothing: antialiased;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--hp-line-soft);
}

/* 键盘焦点环：首页这条规则来自 css/home.css 的 .hp-body a/button:focus-visible，
   其它页面没有它，页头会退回浏览器默认焦点环（各页不一致）。这里给页头自带一份，
   取值与首页完全相同（3px 品牌紫、offset 3px），四页 focus-visible 表现才一致。 */
.hp-header a:focus-visible,
.hp-header button:focus-visible {
    outline: 3px solid var(--hp-teal);
    outline-offset: 3px;
    border-radius: 2px;
}

/* 页头内部元素统一盒模型与字族。
   字族必须显式声明：个别页面（后台 css/admin.css）有一条 * { font-family: 'Inter' }
   的全局规则，它会绕过继承把页头内部的字体改掉，页头就不再与首页一致。
   需要别的字族的元素（品牌中文 = 衬线、品牌英文 = 展示体）在下面各自声明，
   源序更靠后、特异性相同，仍然生效。 */
.hp-header,
.hp-header *,
.hp-header *::before,
.hp-header *::after {
    box-sizing: border-box;
    font-family: var(--hp-sans);
}

.hp-header__inner {
    max-width: var(--hp-max);
    margin: 0 auto;
    padding: 12px var(--hp-gutter);
    display: flex;
    align-items: center;
    gap: 22px;
}

.hp-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 2px 0;   /* logo 视觉仍 40px，把可点区域补足到 44px（无障碍点按目标） */
    text-decoration: none;
    color: var(--hp-ink);
    flex: 0 0 auto;
}

.hp-brand__logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
}

.hp-brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.hp-brand__zh {
    font-family: var(--hp-serif);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--hp-ink);
}

.hp-brand__en {
    font-family: var(--hp-display);
    font-size: var(--hp-fs-micro);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hp-faint);
}

.hp-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
}

/* ── 语言切换器（中 / EN）── */
.hp-lang {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-r-pill);
    background: #fff;
    margin-left: 14px;
    flex: 0 0 auto;
    overflow: hidden;
}

.hp-lang__btn {
    min-width: 46px;
    min-height: 44px;
    /* 触摸目标 ≥44px */
    padding: 0 12px;
    border: 0;
    background: transparent;
    font-family: var(--hp-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--hp-muted);
    cursor: pointer;
    transition: background .18s, color .18s;
}

.hp-lang__btn:hover {
    color: var(--hp-ink);
    background: var(--hp-bg-alt);
}

.hp-lang__btn[aria-pressed="true"] {
    background: var(--hp-ink);
    color: #fff;
}

/* 语言按钮是紧贴边框的胶囊，焦点环内收 3px 更贴合；
   选择器带上 .hp-header 提高特异性，避免被上面的统一焦点环覆盖。 */
.hp-header .hp-lang__btn:focus-visible {
    outline: 3px solid var(--hp-teal);
    outline-offset: -3px;
}

.hp-nav__link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    min-width: 44px;
    /* 英文短词（如 Admin）在 15px 字号下只有 43px 宽，补足点按目标 */
    justify-content: center;
    text-decoration: none;
    color: var(--hp-ink-soft);
    font-family: var(--hp-sans);
    font-size: 15px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: color .18s, border-color .18s;
    white-space: nowrap;
}

.hp-nav__link:hover,
.hp-nav__link:focus-visible {
    color: var(--hp-plum-deep);
}

.hp-nav__link[aria-current="page"] {
    color: var(--hp-plum);
    border-bottom-color: var(--hp-plum);
    font-weight: 700;
}

.hp-nav__icon {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 外链提示：斜向上小箭头，表示会离开本站（屏幕阅读器由 aria-label 告知） */
.hp-nav__ext {
    width: 11px;
    height: 11px;
    margin-left: -3px;
    flex: 0 0 auto;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(-45deg);
    opacity: .5;
}

.hp-nav__link[aria-current="page"] .hp-nav__icon {
    stroke-width: 1.9;
}

.hp-burger {
    display: none;
    margin-left: auto;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 1px solid var(--hp-line);
    background: #fff;
    border-radius: var(--hp-r-pill);
    cursor: pointer;
    padding: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.hp-burger span {
    display: block;
    width: 19px;
    height: 1.6px;
    background: var(--hp-ink);
    transition: transform .2s, opacity .2s;
}

.hp-burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6.6px) rotate(45deg);
}

.hp-burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.hp-burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6.6px) rotate(-45deg);
}

.hp-drawer {
    border-top: 1px solid var(--hp-line-soft);
    background: #fff;
    padding: 6px var(--hp-gutter) 14px;
}

.hp-drawer__link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--hp-line-soft);
    text-decoration: none;
    color: var(--hp-ink);
    font-family: var(--hp-sans);
    font-size: 16px;
    font-weight: 500;
    min-height: 48px;
    /* 触摸目标 ≥44px */
}

.hp-drawer__link:last-child {
    border-bottom: 0;
}

.hp-drawer__link[aria-current="page"] {
    color: var(--hp-plum);
    font-weight: 700;
}
/* ── 页头：首屏之上透明，滚过首屏后转暖白 ── */
.hp-header {
    background: var(--hp-cream);
    border-bottom: 1px solid var(--hp-line-soft);
    transition: background .35s ease, border-color .35s ease;
}

.hp-header--over {
    background: transparent;
    border-bottom-color: transparent;
}

.hp-header--over .hp-brand__zh,
.hp-header--over .hp-nav__link,
.hp-header--over .hp-nav__icon {
    color: #fff;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
}

.hp-header--over .hp-brand__en {
    color: rgba(255, 255, 255, .78);
    text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
}

.hp-header--over .hp-nav__link:hover {
    color: rgba(255, 255, 255, .78);
}

.hp-header--over .hp-nav__link[aria-current="page"] {
    color: #fff;
    border-bottom-color: #fff;
}

.hp-header--over .hp-lang {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .42);
}

.hp-header--over .hp-lang__btn {
    color: rgba(255, 255, 255, .88);
}

.hp-header--over .hp-lang__btn:hover {
    background: rgba(255, 255, 255, .18);
}

.hp-header--over .hp-lang__btn[aria-pressed="true"] {
    background: #fff;
    color: var(--hp-ink);
}

.hp-header--over .hp-burger {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .42);
}

.hp-header--over .hp-burger span {
    background: #fff;
}

.hp-header__inner {
    padding-top: 14px;
    padding-bottom: 14px;
}
.hp-brand__zh {
    font-family: var(--hp-serif);
    font-weight: 500;
    letter-spacing: .04em;
}

.hp-brand__en {
    font-family: var(--hp-sans);
    letter-spacing: .28em;
    font-weight: 400;
}

/* ══ 响应式：≤900px 收起主导航，改用汉堡抽屉（令牌覆盖与首页同名 @media 保持同值）══ */
@media (max-width: 900px) {
    :where(:root) {
        --hp-gutter: 22px;
    }

    .hp-nav {
        display: none;
    }

    /* 导航收进汉堡后，语言切换器顶到右侧 */
    .hp-lang {
        margin-left: auto;
    }

    .hp-burger {
        display: flex;
        margin-left: 10px;
    }
}


/* ══ 响应式：≤560px 页头预算收紧 ══ */
@media (max-width: 560px) {
    :where(:root) {
        --hp-gutter: 18px;
        --hp-fs-micro: 13px;
    }

    /* 页头预算：390 宽减去左右留白只剩 354px，品牌(logo+两行文字 267px)
       + 语言切换器(94px) + 汉堡(44px) 放不下。隐藏英文副标并让品牌名可省略。
       另外 22px 的 flex gap 在手机上是纯浪费，收窄到 10px。 */
    .hp-header__inner {
        gap: 10px;
        padding: 10px var(--hp-gutter);
    }
    .hp-brand {
        min-width: 0;
        flex: 0 1 auto;
        gap: 9px;
    }

    .hp-brand__en {
        display: none;
    }

    .hp-brand__text {
        min-width: 0;
    }

    .hp-brand__zh {
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 英文品牌名更长（Tsinglan Kindergarten 比「清澜山幼儿园」宽约 60%）。
       允许折成两行，比截成「Tsinglan K…」自然，也不必把字号压到过小。 */
    html[lang="en"] .hp-brand__zh {
        font-size: 14px;
        letter-spacing: 0;
        white-space: normal;
        line-height: 1.18;
        overflow: visible;
        text-overflow: clip;
    }
}