/* =======================
   左侧导航（高亮更明显）
   ======================= */

/* 普通导航项 */
.md-nav__link {
  font-size: 0.9rem;
}

/* hover 反馈 */
.md-nav__link:hover {
  color: #ffb300;
}

/* 当前页面（只保留这一套 active 样式） */
.md-nav__link--active {
  font-weight: 600;
  color: #ffb300;
  border-left: 3px solid #ffb300;
  padding-left: 8px;
}

/* 一级分类标题 */
.md-nav__title {
  font-weight: 600;
  font-size: 0.9rem;
  color: #37474f;
}


/* =======================
   顶部 Banner（图片 + 遮罩 + 标题）
   ======================= */

.md-header {
  background-image: url("/assets/banner.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 150px;
  position: relative; /* 让 ::before 的 absolute 有参照 */
}

/* 自己加一个稳定的遮罩（提升字可读性） */
.md-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 0;
}

.md-header__inner {
  position: relative;
  z-index: 1;
}

/* 顶部标题（合并为一处） */
.md-header__title {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.2px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* ===============================
   一级标题（页面级）
   =============================== */

.md-content h1 {
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 0.3px;
  color: #263238; /* 深蓝灰 */
  margin-bottom: 1.5rem;
  border-bottom: 3px solid #ffb300; /* amber 强锚点 */
  padding-bottom: 0.4rem;
}

/* ===============================
   二级标题（每个银行）
   =============================== */

.md-content h2 {
  font-weight: 700;
  font-size: 1.25rem;
  color: #1e88e5; /* Material 蓝 */
  margin-top: 3rem;
  margin-bottom: 1rem;
  padding-left: 0.6rem;
  border-left: 5px solid #1e88e5;
}

/* ===============================
   三级标题（如 Bonus Tiers）
   =============================== */

.md-content h3 {
  font-weight: 600;
  font-size: 1.05rem;
  color: #37474f;
  margin-top: 1.5rem;
}

/* ===============================
   内容块可读性增强
   =============================== */

.md-content p,
.md-content li {
  line-height: 1.65;
}

/* ===============================
   分隔线（---）增强
   =============================== */

.md-content hr {
  border: none;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    #cfd8dc,
    transparent
  );
  margin: 2.5rem 0;
}

/* ===============================
   Table of Contents 当前项更明显
   =============================== */

.md-nav__link--active {
  font-weight: 600;
  color: #ffb300;
}

.md-nav__link--active::before {
  width: 4px;
  background-color: #ffb300;
}
.md-content a {
  color: #1e88e5;
  font-weight: 500;
  text-decoration: underline;
}

.home-hero {
  background-image: url("../assets/banner.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1.2rem;
}

.home-hero::before {
  content: "";
  display: block;
  background: rgba(0, 0, 0, 0.45);
  padding: 2.2rem 1.6rem;
}

.home-hero-inner {
  margin-top: -9999px;
  padding: 2.2rem 1.6rem;
  color: #fff;
}

.home-hero-title {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 0.6rem;
  text-transform: uppercase;
}

.home-hero-text {
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 760px;
}

.home-hero-email {
  color: #ffecb3;
  font-weight: 700;
}

.home-hero-updated {
  font-size: 0.85rem;
  opacity: 0.9;
  margin-top: 0.4rem;
}

/* ===== Header title + subtitle ===== */

.md-header__title {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

/* 主标题 */
.md-header__title span {
  font-size: 1.25rem;
  font-weight: 700;
}

/* 副标题（你的那段话） */
.md-header__title::after {
  content: "Feel free to use our referral links. Questions? Email favolinkhub@gmail.com · Updated 01/10/2026";
  font-size: 0.75rem;
  font-weight: 400;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.85);
}

/* 深色模式微调 */
[data-md-color-scheme="slate"] .md-header__title::after {
  color: rgba(255, 255, 255, 0.75);
}

/* ===============================
   Header 标题与副标题间距微调
   =============================== */

/* 整个 header 内部往下挪一点（不影响背景图） */
.md-header__inner {
  padding-top: 12px; /* 调大/调小都只改这一行 */
}

/* Site title（Favo & Maya's Referrals） */
.md-header__title {
  margin-top: 6px;
  margin-bottom: 6px; /* 和下面那行拉开一点 */
}

/* 副标题（你那段说明文字） */
.md-header__topic + .md-header__topic,
.md-header__topic p,
.md-header__topic span {
  display: block;
  margin-top: 4px;
  line-height: 1.35;
  opacity: 0.95;
}

/* 如果副标题是一整行文本，给它一点呼吸空间 */
.md-header__topic {
  margin-bottom: 0px;
}

/* Header 中隐藏 page name，只保留 site name + 副标题 */
.md-header__topic + .md-header__topic {
  display: none;
}

/* 固定顶部 header（banner） */
.md-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* 左侧导航与正文分隔 */
.md-sidebar--primary {
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}

/* 右侧 TOC 与正文分隔 */
.md-sidebar--secondary {
  border-left: 1px solid rgba(0, 0, 0, 0.06);
}

/* 修复 TOC / anchor 被固定 header 遮挡的问题 */
html {
  scroll-padding-top: 85px !important; /* 按你的header+banner实际高度调 */
}

.md-typeset :is(h1,h2,h3,h4,h5,h6)[id] {
  scroll-margin-top: 85px !important;
}

:root{
  --header-h: 85px; /* 改这里：80/85/90 你自己定 */
}

:root{ --header-h: 85px; }

@media (max-width: 768px){

  /* 只影响“抽屉里面的可滚动内容区”，不碰外层容器 */
  nav, .nav, .navigation, .menu, .drawer, .sidebar {
    scroll-padding-top: var(--header-h);
  }

  /* 给抽屉里真正的列表区域留顶部空间（常见结构：nav ul / nav .content / nav .items） */
  nav ul,
  nav .content,
  nav .items,
  .drawer ul,
  .sidebar ul{
    padding-top: var(--header-h) !important;
    box-sizing: border-box;
  }
}

@media (max-width: 768px){

  /* 1) 先别让抽屉顶部标题栏被压扁/隐藏 */
  .drawer-header,
  .sidebar-header,
  .menu-header,
  nav header,
  nav .header,
  nav .title,
  nav .toolbar{
    display: block !important;
    height: auto !important;
    min-height: 44px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    overflow: visible !important;
  }

  /* 2) 抽屉内容区继续保留你需要的下移（不要碰 header） */
  :root{ --mobile-drawer-top: 85px; }

  nav ul,
  nav .content,
  nav .items,
  .drawer ul,
  .sidebar ul{
    padding-top: var(--mobile-drawer-top) !important;
    box-sizing: border-box;
  }
}

@media (max-width: 768px){

  /* 抽屉顶部那条（站点名 + table of contents）强制可见 */
  nav header, nav header * ,
  nav [role="banner"], nav [role="banner"] * ,
  .drawer-header, .drawer-header * ,
  .sidebar-header, .sidebar-header * {
    visibility: visible !important;
    opacity: 1 !important;

    /* 防止被 text-fill 之类弄成透明 */
    color: #202124 !important;
    -webkit-text-fill-color: #202124 !important;
  }

  /* 如果是被层级盖住：把它抬到最上 */
  nav header,
  nav [role="banner"],
  .drawer-header,
  .sidebar-header{
    position: relative !important;
    z-index: 9999 !important;
  }
}