/*
Theme Name: Madara-Child
Description:  A child theme for Madara - Astral Novels 定制（小说站）
Author:       Madara
Author URI:   https://mangabooth.com/
Template: madara
Version: 1.0.4
*/

/* ==========================================================================
   1. 字体：Poppins（导航/标题） + Inter（正文）
   --------------------------------------------------------------------------
   参考 goodnovel.com —— 它用的就是 Poppins（Google Fonts 免费商用）。
   Poppins 是几何无衬线体，字重做到 900，小字号下辨识度明显高于
   原来的 Cardo（Cardo 是衬线体，笔画细，做导航发虚）。
   正文保留 Inter，长文阅读比 Poppins 舒服。
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* 导航、标题、按钮 —— 用 Poppins */
.site-navigation,
.navbar,
.main-navigation,
.main-menu,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.font-heading,
.c-btn,
.btn,
.widget-title,
.post-title,
.entry-title,
.c-page-title,
.heading,
h4 a,
.manga-title-badges,
.breadcrumb,
.breadcrumb a {
    font-family: 'Poppins', sans-serif;
}

/* 导航加粗一点，视觉更稳 */
.main-menu > li > a,
.navbar-nav > li > a,
.site-navigation .menu > li > a {
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* 正文保持 Inter */
body,
.entry-content,
.reading-content,
.description-summary {
    font-family: 'Inter', sans-serif;
}

/* ==========================================================================
   2. 导航对齐修复
   --------------------------------------------------------------------------
   实测（1440px 视口，Playwright 量取真实坐标）发现的问题：

     branding  x=165 w=278   ← Logo 232px 塞在 278px 栏里，只剩 46px 余量
     main-menu x=443 w=666   ← 5 个菜单项共 525px，左对齐后右侧空 141px
     search    x=1109        ← 孤零零贴右边

   根因是主题用固定百分比分栏（logo 25% / 菜单 60% / 搜索 15%），
   跟实际内容宽度不匹配：菜单整体偏左、三项垂直中心线不一致
   （branding 中心 190 / menu 中心 466 / search 中心 1126）。

   修法：
     1. 三栏改用 flex + align-items:center，让它们共享同一条垂直中心线
     2. 菜单区用 justify-content 把剩余空间分掉，视觉上不再是"挤在左边"
     3. Logo 限高不限宽，并给容器留呼吸空间
     4. 移动端抽屉菜单（大写那套）在桌面端彻底隐藏，避免两套菜单叠加
   ========================================================================== */
.main-menu li:empty,
.navbar-nav li:empty,
.site-navigation .menu li:empty {
    display: none !important;
}

/* --- 1. 导航三栏：同一条垂直中心线 --- */
@media (min-width: 992px) {
  .site-header .main-navigation.style-1 .main-navigation_wrap {
    display: flex;
    align-items: center;
    gap: 0;
  }

  /* Logo 区：给足宽度但不允许挤压菜单 */
  .site-header .main-navigation.style-1 .wrap_branding {
    width: auto;
    flex: 0 0 auto;
    max-width: 280px;
    display: flex;
    align-items: center;
  }
  .site-header .main-navigation.style-1 .wrap_branding a {
    display: flex;
    align-items: center;
  }
  .site-header .main-navigation.style-1 .wrap_branding a img {
    max-width: 220px;
    max-height: 46px;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* 菜单区：吃掉中间所有剩余空间，内部左对齐但整体有呼吸感 */
  .site-header .main-navigation.style-1 .main-menu {
    width: auto;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
  }

  /* 搜索区：固定在右，垂直居中 */
  .site-header .main-navigation.style-1 .search-navigation {
    width: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-left: 12px;
  }
}

/* --- 2. 菜单项：垂直居中 + 均匀间距 --- */
.main-menu .nav.navbar-nav.main-navbar,
.nav.navbar-nav.main-navbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.navbar-nav > li,
.main-menu > li {
  display: flex;
  align-items: center;
}

.navbar-nav > li > a,
.main-menu > li > a {
  padding: 0 15px;
  line-height: 1.45;
  white-space: nowrap;
  display: flex;
  align-items: center;
  height: 100%;
}

/* 首个菜单项去掉左内边距，跟 Logo 保持一个干净的间距 */
.navbar-nav > li:first-child > a { padding-left: 4px; }

/* --- 3. 下拉菜单：给足宽度，避免长分类名换行错位 --- */
.main-menu .sub-menu,
.navbar-nav .dropdown-menu,
.navbar-nav .sub-menu {
  min-width: 210px;
  padding: 8px 0;
}

.main-menu .sub-menu li a,
.navbar-nav .dropdown-menu li a,
.navbar-nav .sub-menu li a {
  padding: 7px 18px;
  white-space: nowrap;
  font-weight: 500;
}

/* --- 4. 移动端抽屉菜单在桌面端隐藏 ---
   实测首页同时渲染了两套菜单：顶部横排（Poppins 600）+ 侧边抽屉
   （大写、字重 400、固定 200px 宽）。抽屉是给窄屏用的，
   桌面端若没藏干净会造成元素重叠和视觉错位。 */
@media (min-width: 992px) {
  .c-togle__menu,
  .c-sidebar__menu,
  .site-header .c-togle__menu {
    display: none !important;
  }
}

/* ==========================================================================
   3. 首页分类横条（在首页模板里渲染，样式在这里）
   ========================================================================== */
.an-genre-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 14px 0;
    margin: 0 0 22px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.an-genre-bar .an-genre-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.55;
    margin-right: 6px;
}

.an-genre-bar a {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    padding: 7px 15px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.045);
    color: inherit;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.an-genre-bar a:hover {
    background: #2f6fed;
    color: #fff;
}

.an-genre-bar a .cnt {
    opacity: 0.5;
    font-weight: 500;
    margin-left: 5px;
}

.an-genre-bar a:hover .cnt {
    opacity: 0.85;
}

/* ==========================================================================
   4. 首页焦点区：1 大 + 4 小
   ========================================================================== */
.an-featured {
    display: grid;
    grid-template-columns: 1.65fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
    margin-bottom: 34px;
}

.an-featured .an-hero {
    grid-row: span 2;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #111;
    min-height: 420px;
}

.an-featured .an-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.92;
}

.an-featured .an-hero .an-hero-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 26px 24px;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 20%, rgba(0,0,0,0.35) 62%, transparent);
    color: #fff;
}

.an-featured .an-hero .an-badge {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: #2f6fed;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 9px;
}

.an-featured .an-hero h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.22;
    margin: 0 0 8px;
    color: #fff;
}

.an-featured .an-hero h2 a { color: #fff; text-decoration: none; }

.an-featured .an-hero p {
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0 0 12px;
    opacity: 0.9;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.an-featured .an-hero .an-meta {
    font-size: 12.5px;
    opacity: 0.75;
    font-weight: 500;
}

.an-featured .an-side {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #161616;
    min-height: 202px;
}

.an-featured .an-side img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    opacity: 0.85;
}

.an-featured .an-side .an-side-body {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 14px 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.86), transparent);
    color: #fff;
}

.an-featured .an-side h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 4px;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.an-featured .an-side h3 a { color: #fff; text-decoration: none; }
.an-featured .an-side .an-meta { font-size: 11.5px; opacity: 0.72; }

/* 移动端：堆叠 */
@media (max-width: 900px) {
    .an-featured {
        grid-template-columns: 1fr 1fr;
    }
    .an-featured .an-hero {
        grid-row: auto;
        grid-column: span 2;
        min-height: 300px;
    }
    .an-featured .an-hero h2 { font-size: 21px; }
}

@media (max-width: 560px) {
    .an-featured { grid-template-columns: 1fr; }
    .an-featured .an-hero { grid-column: auto; min-height: 260px; }
}

/* 区块标题统一风格 */
.an-section-title {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.an-section-title::before {
    content: '';
    width: 4px;
    height: 20px;
    background: #2f6fed;
    border-radius: 2px;
}