/* ============================================================
   自定义样式:顶部菜单栏撑满整页宽度
   作用:覆盖主题 .header__inner 固定 760px 宽度的限制,
        让左侧 logo 贴页面左边缘、右侧菜单贴页面右边缘
   ============================================================ */

/* 外层 header:左右留出边距(数值可调,想要更贴边就调小) */
.header {
  padding: 20px 32px;
}

/* 关键:去掉固定 760px,改为撑满父容器 */
.header__inner {
  width: 100%;
  max-width: 100%;
}

/* 菜单整体靠右对齐 */
.menu__inner {
  justify-content: flex-end;
  padding: 0;
}

/* 菜单项间距稍微加大,观感更舒展(可选) */
.menu__inner li {
  margin: 0 16px;
}

/* 手机端保持紧凑,避免挤到换行 */
@media (max-width: 684px) {
  .header {
    padding: 16px 16px;
  }
  .menu__inner li {
    margin: 0;
  }
}

/* 去掉链接自带的右边距:保证菜单右边缘与 logo 左边缘留白完全对称 */
.menu__inner a {
  margin-right: 0;
}

/* ============================================================
   页脚:合并为一行 + 缩小字号
   主题原本是两个 .footer__inner 区块(各占一行);
   这里把外层改成 flex 让两块并排,并整体缩小字号
   ============================================================ */
.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 0.75em;          /* 两块之间的间隔 */
  font-size: 0.8rem;      /* 字号:1rem → 0.8rem(想要更小可改 0.75rem) */
}

/* 去掉固定 760px 宽度,让两块内容能并排 */
.footer__inner {
  width: auto;
  max-width: 100%;
  margin: 0;
}

/* 内容字号跟随 .footer */
.footer__content {
  font-size: inherit;
}

/* 顶部那块内部条目之间也稍微收紧 */
.footer__content > *:not(:last-child)::after {
  padding: 0 4px;
}

/* ============================================================
   页脚:窄屏(手机/平板)也保持单行
   主题在 <=900px 时把 .footer__content 改成竖排并隐藏分隔符,
   这里覆盖回横排,并整体缩小字号,保证一行放得下
   ============================================================ */
@media (max-width: 900px) {
  .footer {
    font-size: 0.72rem;      /* 手机上再小一点,确保一行放得下 */
    gap: 0 0.5em;
  }
  .footer__content {
    flex-direction: row;     /* 覆盖主题的 column */
    margin-top: 0;           /* 覆盖主题的 10px 上边距 */
    gap: 0 0.5em;            /* 条目之间留一点空隙 */
  }
  /* 主题在窄屏把分隔符 content 清空了,这里用 gap 代替即可 */
  .footer__content > *:not(:last-child)::after {
    content: "";
    padding: 0;
  }
}

/* 更窄的手机(<=420px):再缩小字号与间距,保证仍是一行 */
@media (max-width: 420px) {
  .footer {
    font-size: 0.62rem;
    gap: 0 0.3em;
  }
  .footer__content {
    gap: 0 0.3em;
  }
  .footer__content svg {
    width: 13px;
    height: 13px;
  }
}

/* ============================================================
   顶栏 logo:把 🍺(logo__mark)排到文字与闪动光标之后
   .logo 本身是 flex,直接用 order 调整顺序即可
   最终呈现:> $ cd /home/Brew-Lab █ 🍺
   ============================================================ */
.logo__text   { order: 0; }
.logo__cursor { order: 1; }   /* 光标紧跟文字 */
.logo__mark   {
  order: 2;                   /* 🍺 放到光标之后 */
  margin-right: 0;            /* 主题原本是 margin-right: 5px(在左侧用) */
  margin-left: 5px;           /* 移到右侧后改成左边距 */
}

/* ============================================================
   字体:Inter → Figtree
   1) 分字重静态文件 400/600/700/800 + 400 斜体,共 5 个约 56KB
      (不要改用"可变字体"单文件:浏览器实测只按 Light 渲染,标题会变细)
   2) 覆盖主题 body 上的字体栈(主题在 _main.scss 里写死 Inter)
   注意:顶栏 logo 的 monospace 与代码块的 Consolas 保持不变
   ============================================================ */
@font-face { font-family:'Figtree'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/Figtree-400-latin.woff2') format('woff2'); }
@font-face { font-family:'Figtree'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/Figtree-600-latin.woff2') format('woff2'); }
@font-face { font-family:'Figtree'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/Figtree-700-latin.woff2') format('woff2'); }
@font-face { font-family:'Figtree'; font-style:normal; font-weight:800; font-display:swap; src:url('/fonts/Figtree-800-latin.woff2') format('woff2'); }
@font-face { font-family:'Figtree'; font-style:italic; font-weight:400; font-display:swap; src:url('/fonts/Figtree-400-Italic-latin.woff2') format('woff2'); }
body {
  /* 注意:字体栈里不要再保留 Inter —— Figtree 没有的字符(如 🍺、中文)
     会触发浏览器去下载主题自带的 Inter-Regular.woff2(96.8KB),
     而它其实也没有这些字形,纯属浪费流量。直接交给系统字体回退即可。 */
  font-family: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    Helvetica, Arial, sans-serif;
}

/* ============================================================
   页脚:底色比正文深一档(不加分割线,只用底色区分,靠对比度划分)
   颜色取自主题调色板 _variables.scss:
     浅色 $light-background-secondary #eaeaea
     深色 $dark-background-header     #1b1c1d(与顶部菜单栏同色,首尾呼应)
   明暗切换方式与主题保持一致:[data-theme] + prefers-color-scheme 双保险
   ============================================================ */
.footer {
  background-color: #f7f7f7;     /* 浅色(再浅一档,与页面白底差别更小) */
}
@media (prefers-color-scheme: dark) {
  .footer {
    background-color: #1b1c1d;   /* 深色:与顶部菜单栏同色 */
  }
}
[data-theme=dark] .footer {
  background-color: #1b1c1d;
}
[data-theme=light] .footer {
  background-color: #f7f7f7;
}

/* ============================================================
   菜单栏底色:比主题默认(#fafafa)加深一点点
   注意:刻意比页脚(#eaeaea)浅一档,避免头尾撞色
   ============================================================ */
:root { --header-bg: #e0e0e0; }                       /* 浅色(逐步加深) */
@media (prefers-color-scheme: dark) {
  :root { --header-bg: #1b1c1d; }                       /* 跟随系统深色 */
}
[data-theme=dark]  { --header-bg: #1b1c1d; }
[data-theme=light] { --header-bg: #e0e0e0; }

.header { background: var(--header-bg); }
/* 主题里 [data-theme=light] .header 的优先级更高,必须同样带属性选择器才能覆盖 */
[data-theme=dark]  .header { background: var(--header-bg); }
[data-theme=light] .header { background: var(--header-bg); }
@media (prefers-color-scheme: dark) {
  .header { background: var(--header-bg); }
}

/* ============================================================
   修复:菜单区出现"方块"
   主题给 .menu / .submenu 也铺了一层旧标题栏底色(#fafafa),
   而我们把标题栏改成了 --header-bg(#f2f2f2)→ 菜单区就显示成
   一块颜色略浅的方块。这里让它们跟随新底色:
     桌面端:菜单就嵌在标题栏里 → 直接透明,最干净
     手机端:菜单是下拉浮层 → 需要不透明,用标题栏同色
   ============================================================ */
.header .menu,
.header .submenu {
  background: var(--header-bg);
}
@media (min-width: 685px) {
  .header .menu,
  .header .submenu {
    background: transparent;
  }
}
/* 下拉面板也跟标题栏同色,保持一致 */
.header .submenu .dropdown-content {
  background: var(--header-bg);
}

/* 页脚:压扁高度(原来上下留白 28px,现在 14px) */
.footer {
  padding: 14px 20px;
}
@media (max-width: 900px) {
  .footer {
    padding: 12px 12px;
  }
}
@media (max-width: 420px) {
  .footer {
    padding: 10px 8px;
  }
}

/* ============================================================
   顶栏 logo 字体:显式指定,不再依赖浏览器"默认等宽字体"
   原因:主题写的是 font-family: monospace(泛型字体),具体用哪个由系统决定 ——
     你在 Windows Edge 上解析成 Courier New(打字机感、偏细偏旧),
     Linux 上则是 DejaVu Sans Mono,每台机器都不一样。
   现在自托管 JetBrains Mono:所有设备渲染一致,也是常见的终端/代码字体。
   (不依赖系统字体,离线也能正确显示)
   ============================================================ */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/JetBrainsMono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/JetBrainsMono-700.woff2') format('woff2');
}

.logo {
  font-family: 'JetBrains Mono', Consolas, 'Courier New', monospace;
}

/* ===== 首页 hero:整页渐变 + 碰杯主体 ===== */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Caveat-500-latin.woff2') format('woff2');
}

/* 渐变铺满整页(菜单栏有自己的底色,盖在上面 → 天然「除菜单栏外」) */
body.home {
  background-color: #F7BC5C;
  background-image: url('/img/hero-bg.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #2E2018;
}

/* 页脚在首页透明,让渐变一直铺到底(两种模式通用) */
body.home .footer { background: transparent; }

/* 浅色:暖黄底 + 深棕文字 */
body.home h1 { color: #2E2018; }
body.home .subtitle { color: rgba(46, 32, 24, .72); }
body.home .footer__content,
body.home .footer__content a { color: rgba(46, 32, 24, .72); }
body.home .social-icons a,
body.home .social-icons svg { color: #2E2018; fill: #2E2018; }

/* 深色:紫色底 + 浅色文字 */
[data-theme="dark"] body.home {
  background-color: #473A7E;
  background-image: url('/img/hero-bg-purple.svg');
  color: #F4EFFF;
}
[data-theme="dark"] body.home h1 { color: #F7F3FF; }
[data-theme="dark"] body.home .subtitle { color: rgba(244, 239, 255, .74); }
[data-theme="dark"] body.home .footer__content,
[data-theme="dark"] body.home .footer__content a { color: rgba(244, 239, 255, .74); }
[data-theme="dark"] body.home .social-icons a,
[data-theme="dark"] body.home .social-icons svg { color: #F4EFFF; fill: #F4EFFF; }
[data-theme="dark"] .hero__handle { color: #F7F3FF; }

/* 主体 */
.hero {
  width: 430px;
  max-width: 80vw;
  margin: 0 auto 18px;
}
.hero__art,
.hero__art > svg {
  display: block;
  width: 100%;
  height: auto;
}
.hero__handle {
  text-align: center;
  font-family: 'Caveat', cursive;
  font-weight: 500;
  font-size: 2.7em;
  line-height: 1;
  color: #2E2018;
  transform: rotate(-2.5deg);
}

@media (max-width: 600px) {
  .hero { width: 300px; max-width: 78vw; }
  .hero__handle { font-size: 2.1em; }
}

/* ============================================================
   首页专用:菜单栏与整页渐变同色
   浅色模式 → 菜单栏透明,直接透出同一张渐变底(顶部最亮那部分)
   深色模式 → 同样透明(两种模式显示方式一致)
   ============================================================ */
body.home .header {
  background: transparent;
}

/* 深色模式:与浅色同一套显示方式 —— 菜单栏同样透明,直接融进紫渐变
   (--header-bg 仍保留深紫值,给手机端展开菜单的浮层用,保证不透明可读) */
[data-theme=dark] body.home {
  --header-bg: #2C2158;
}
[data-theme=dark] body.home .header {
  background: transparent;
}