/*
 * 经典红色主题（classic-red，任务 20261020-02）。仿中国商业文化研究会官网：深红主色、白底、浅灰面板、直角、微软雅黑；
 * 页头照参考站：上面白底刊名，下面通栏红色导航条；栏目标题粗体黑字，下有一段红线压在灰色通线上；
 * 页脚配色随页头，深红底白字（Owner 2026-10-20）。
 *
 * 本文件在速刊的四份样式表之后加载。开头重定义速刊的 --sukan-* 变量，后面只写与速刊不同的规则。
 * 页面主体的类名都是速刊的；以 cr_ 开头的类名只出现在本主题的 layout 里（页头右侧、导航条、页脚底条）。
 * 命名（Owner 2026-10-20）：代号 classic-red，类名前缀 cr_，变量前缀 --cr-；之后的“经典蓝色”照此用 classic-blue、cb。
 * 色值只写在下面的 :root 里；取值来自 2026-10-20 对参考站首页的实测，见任务书背景一节。
 */

:root {
    /* 一种强调色：速刊的主色、强调色、交互色在这里都是深红（设计规范第 1 节） */
    --sukan-color-brand-surface: #af090b;
    --sukan-color-accent: #af090b;
    --sukan-color-interactive: #af090b;
    --sukan-color-interactive-hover: #8a0709;
    --sukan-color-interactive-subtle: rgba(175, 9, 11, 0.08);
    --sukan-color-text: #333333;
    --sukan-color-text-muted: #666666;
    --sukan-color-surface: #ffffff;
    --sukan-color-surface-subtle: #f6f6f6;
    --sukan-color-border: #cccccc;
    --sukan-color-border-subtle: #e5e5e5;

    /* 参考站是平面的：直角，卡片不带阴影 */
    --sukan-radius-small: 0;
    --sukan-radius-medium: 0;
    --sukan-shadow-card: none;
    --sukan-shadow-card-hover: none;
    --sukan-shadow-menu: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
    --sukan-shadow-cover: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.16);

    /* 参考站内容区宽 1100px */
    --sukan-container: 68.75rem;

    /* 页脚随页头用深红底白字 */
    --sukan-color-footer-text: rgba(255, 255, 255, 0.88);
    --sukan-color-footer-link: #ffffff;
    --sukan-color-footer-muted: rgba(255, 255, 255, 0.8);
    --sukan-color-footer-rule: rgba(255, 255, 255, 0.2);

    /* 本主题自己的几项 */
    --cr-color-heading: #000000;
    /* 页头刊名用参考站会名的红，比导航条略亮 */
    --cr-color-masthead: #c30d23;
    --cr-color-head-text: #212529;
    --cr-color-nav-divider: #d68584;
    --cr-color-legal: #8a0709;
    --cr-color-button-subtle: #efefef;
    --cr-color-button-subtle-hover: #e1e1e1;
    --cr-font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC",
        "Source Han Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

    /* 宽屏页头白底一条的固定高度（参考站 118px）：吸顶时按这个高度卷走，只留导航条 */
    --cr-head-height: 7.375rem;
    --cr-nav-height: 2.8125rem;
    --cr-nav-height-narrow: 2.5rem;
    /* 导航项的最小宽度（参考站 121px 加 1px 竖线） */
    --cr-nav-item: 7.5625rem;
    /* 栏目标题下的红线；首屏顶边的红线 */
    --cr-title-rule: 0.3125rem;
    --cr-head-rule: 0.1875rem;
}

/* —— 字体与底色 —— */

html,
body {
    background: var(--sukan-color-surface);
    font-family: var(--cr-font-family);
}

.sukan_page {
    background: var(--sukan-color-surface);
}

/* 英文刊名随正文用无衬线字，加宽字距，与参考站会名下的英文一致 */
.sukan_brand_english,
.sukan_main .sukan_hero__english {
    font-family: inherit;
    font-style: normal;
    letter-spacing: 0.08em;
}

.sukan_main .sukan_breadcrumbs a {
    color: var(--sukan-color-text);
    text-decoration: none;
}

.sukan_main .sukan_breadcrumbs a:hover,
.sukan_main .sukan_breadcrumbs a:focus {
    color: var(--sukan-color-interactive);
}

/* —— 页头：白底一条（参考站 div.cbox-1-0）。刊名在左，注册、登录在最右，与刊名同一中线 —— */

.cr_head {
    border-block-start: 0;
    border-block-end: 0;
}

.cr_head .sukan_site_name .sukan_site_name__link,
.cr_head .sukan_site_name .sukan_site_name__link:hover,
.cr_head .sukan_site_name .sukan_site_name__link:focus {
    color: var(--cr-color-masthead);
}

.cr_head .sukan_brand_name {
    font-weight: 700;
    letter-spacing: 0.06em;
}

.cr_head .sukan_brand_english {
    color: var(--sukan-color-text);
    letter-spacing: 0.12em;
}

.cr_head .sukan_header_inner {
    justify-content: space-between;
}

/* 刊名太长、一行放不下时这一组折到下一行，仍然靠右 */
.cr_head_tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    margin-inline-start: auto;
    gap: var(--sukan-space-2) var(--sukan-space-5);
    color: var(--cr-color-head-text);
    font-size: 0.9375rem;
}

.cr_head_account {
    display: flex;
    align-items: center;
    gap: var(--sukan-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cr_head_account a {
    color: var(--cr-color-head-text);
    text-decoration: none;
}

.cr_head_account a:hover,
.cr_head_account a:focus {
    color: var(--sukan-color-interactive);
}

/* —— 页头：通栏红色导航条（参考站 div.cbox-1-1）。导航项从左排起，没有下拉；“在线投稿”在最右 —— */

.cr_nav {
    background: var(--sukan-color-brand-surface);
}

.cr_nav__inner {
    display: flex;
    align-items: center;
    gap: var(--sukan-space-3);
    box-sizing: border-box;
    inline-size: min(100% - 2 * var(--sukan-gutter), var(--sukan-container));
    margin-inline: auto;
}

.cr_nav__list {
    display: flex;
    flex: 0 1 auto;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cr_nav__list > li {
    flex: none;
}

.cr_nav__list a {
    display: block;
    color: var(--sukan-color-on-interactive);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.cr_nav__list a:hover,
.cr_nav__list a:focus {
    color: var(--sukan-color-on-interactive);
    background: var(--sukan-color-interactive-hover);
}

/* 导航条上的“在线投稿”是白底红字的按钮 */
.cr_nav__submission {
    display: inline-flex;
    flex: none;
    align-items: center;
    margin-inline-start: auto;
    min-block-size: 2rem;
    padding-inline: 1.25rem;
    color: var(--sukan-color-brand-surface);
    background: var(--sukan-color-surface);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.cr_nav__submission:hover,
.cr_nav__submission:focus {
    color: var(--sukan-color-interactive-hover);
    background: var(--cr-color-button-subtle);
}

/* 红底上的焦点框用白色，收进元素里面，免得被导航条裁掉 */
.sukan_page .cr_nav__list a:focus-visible,
.sukan_page .cr_nav__submission:focus-visible {
    outline-color: var(--sukan-color-on-interactive);
    outline-offset: calc(-1 * var(--sukan-focus-width) - 0.125rem);
}

.sukan_page .cr_nav__submission:focus-visible {
    outline-offset: 0.125rem;
}

@media (min-width: 62.0625rem) {
    .cr_head {
        inset-block-start: calc(-1 * var(--cr-head-height));
    }

    .cr_head .sukan_header_inner {
        block-size: var(--cr-head-height);
    }

    .cr_head .sukan_brand_name {
        font-size: 2.25rem;
    }

    .cr_head .sukan_brand_english {
        font-size: 0.8125rem;
    }

    .cr_nav__inner {
        min-block-size: var(--cr-nav-height);
    }

    /* 左边一条、每项右边一条竖线；导航项多到一行放不下时折到下一行 */
    .cr_nav__list {
        flex-wrap: wrap;
        align-self: stretch;
        border-inline-start: 1px solid var(--cr-color-nav-divider);
    }

    .cr_nav__list > li {
        border-inline-end: 1px solid var(--cr-color-nav-divider);
    }

    .cr_nav__list a {
        min-inline-size: var(--cr-nav-item);
        padding-inline: 1.25rem;
        font-size: 1.125rem;
        font-weight: 700;
        line-height: var(--cr-nav-height);
    }
}

/* 窄屏：页头不吸顶；导航项照参考站改为可横向滑动的一行，“在线投稿”固定在右端不随之滑动 */
@media (max-width: 62rem) {
    .cr_head {
        position: relative;
    }

    .cr_head .sukan_header_inner {
        flex-wrap: wrap;
        gap: var(--sukan-space-2) var(--sukan-space-4);
        padding-block: var(--sukan-space-3);
        padding-inline-end: 0;
    }

    .cr_head .sukan_brand_name {
        font-size: 1.25rem;
    }

    .cr_head_tools {
        font-size: var(--sukan-font-size-small);
    }

    .cr_nav__list {
        flex: 1 1 auto;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .cr_nav__list a {
        padding-inline: 0.875rem;
        line-height: var(--cr-nav-height-narrow);
    }

    .cr_nav__submission {
        min-block-size: 1.75rem;
        padding-inline: 0.75rem;
        font-size: var(--sukan-font-size-small);
    }
}

/* 手机宽度下联系电话收起（参考站窄屏也不显示），注册、登录才能与刊名留在同一行 */
@media (max-width: 47.99rem) {
    .cr_head_contact {
        display: none;
    }
}

@media (max-width: 26rem) {
    .cr_head .sukan_brand_badge {
        display: none;
    }
}

/* —— 共用按钮：主要操作红底白字；次要操作灰底红字，与参考站“简介”“投稿”按钮一致 —— */

.sukan_main a.sukan_button:not(.sukan_button--primary) {
    color: var(--sukan-color-interactive);
    background: var(--cr-color-button-subtle);
    border-color: var(--cr-color-button-subtle);
}

.sukan_main a.sukan_button:not(.sukan_button--primary):hover,
.sukan_main a.sukan_button:not(.sukan_button--primary):focus {
    color: var(--sukan-color-interactive-hover);
    background: var(--cr-color-button-subtle-hover);
    border-color: var(--cr-color-button-subtle-hover);
}

/* —— 栏目标题：粗体黑字，下有一段与文字同宽的红线，压在整行的灰色通线上 —— */

.sukan_section_header {
    flex-wrap: nowrap;
    align-items: flex-end;
    padding-block-end: 0;
    border-block-end: 1px solid var(--sukan-color-border);
}

.sukan_main .sukan_section_title {
    flex: none;
    color: var(--cr-color-heading);
    border-block-end: var(--cr-title-rule) solid var(--sukan-color-brand-surface);
    font-size: 1.375rem;
    line-height: 2.625rem;
}

.sukan_main a.sukan_section_more {
    flex: 0 1 auto;
    min-inline-size: 0;
    padding-block-end: 0.5rem;
    color: var(--sukan-color-text);
    text-align: end;
}

.sukan_main a.sukan_section_more:hover,
.sukan_main a.sukan_section_more:focus {
    color: var(--sukan-color-interactive);
}

/* 期次目录的栏目名、过刊页的年份用同一写法；灰色通线画在紧接着的列表上 */
.sukan_issue_main .sukan_issue_toc .section > h2,
.sukan_archive_year > h2 {
    inline-size: fit-content;
    margin: 0;
    padding: 0;
    color: var(--cr-color-heading);
    border-block-end: var(--cr-title-rule) solid var(--sukan-color-brand-surface);
    font-size: 1.25rem;
    line-height: 2.5rem;
}

.sukan_issue_main .sukan_issue_toc .section > h2 + .articles,
.sukan_archive_year > h2 + .sukan_archive_issues {
    border-block-start: 1px solid var(--sukan-color-border);
}

/* —— 侧栏：浅灰底，顶上一条红线，栏目名红字（参考站右侧栏） —— */

.sukan_home_widget,
.sukan_issue_sidebar,
.sukan_history__sidebar {
    padding: 0 var(--sukan-space-5) var(--sukan-space-5);
    background: var(--sukan-color-surface-subtle);
    border: 0;
    border-block-start: 1px solid var(--sukan-color-brand-surface);
    border-radius: 0;
    box-shadow: none;
}

.sukan_main .sukan_home_widget h2,
.sukan_issue_sidebar h2,
.sukan_history__sidebar h2 {
    margin: 0;
    padding-block: 0.25rem;
    color: var(--sukan-color-brand-surface);
    border-block-end: 0;
    font-size: 1.375rem;
    line-height: 2.75rem;
}

/* 宽屏下页头吸顶后只剩导航条，吸顶的侧栏与年份锚点跟着往上收 */
@media (min-width: 62.0625rem) {
    .sukan_issue_sidebar,
    .sukan_history__sidebar {
        inset-block-start: calc(var(--cr-nav-height) + var(--sukan-space-5));
    }

    .sukan_history__sidebar {
        max-block-size: calc(100vh - var(--cr-nav-height) - 2 * var(--sukan-space-5));
    }

    .sukan_archive_year > h2 {
        scroll-margin-block-start: calc(var(--cr-nav-height) + var(--sukan-space-4));
    }
}

@media (max-width: 36rem) {
    .sukan_home_widget,
    .sukan_issue_sidebar,
    .sukan_history__sidebar {
        padding-inline: var(--sukan-space-4);
    }
}

.sukan_main .sukan_history__sidebar a {
    color: var(--sukan-color-text);
}

.sukan_main .sukan_history__sidebar a:hover,
.sukan_main .sukan_history__sidebar a:focus {
    color: var(--sukan-color-interactive);
}

/* —— 首页 —— */

.sukan_hero {
    background: var(--sukan-color-surface-subtle);
    border: 0;
    border-block-start: var(--cr-head-rule) solid var(--sukan-color-accent);
}

.sukan_main .sukan_hero__title {
    letter-spacing: 0.08em;
}

.sukan_hero__facts li {
    color: var(--sukan-color-text);
    background: var(--sukan-color-surface);
}

.sukan_role_entry strong {
    color: var(--cr-color-heading);
}

/* 最新文章不再是卡片，直接排在白底上，与参考站的新闻列表一样 */
.sukan_homepage_articles {
    padding: 0;
    background: transparent;
    border: 0;
}

/* —— 期次目录、过刊浏览 —— */

.sukan_issue_main .sukan_issue_toc > .heading {
    background: var(--sukan-color-surface-subtle);
    border: 0;
}

.sukan_issue_main .sukan_issue_toc .section {
    margin-block: 0 var(--sukan-space-6);
    padding: 0;
    background: transparent;
    border: 0;
}

.sukan_main a.sukan_archive_issue {
    color: var(--sukan-color-text);
    background: var(--sukan-color-surface-subtle);
    border-color: var(--sukan-color-surface-subtle);
}

.sukan_archive_year > h2 + .sukan_archive_issues {
    padding-block-start: var(--sukan-space-4);
}

/* —— 文章页：题名与作者黑字，侧栏卡片同首页侧栏 —— */

.sukan_article_details > .page_title {
    color: var(--cr-color-heading);
}

.sukan_article_details .authors .name {
    color: var(--cr-color-heading);
}

.sukan_article_details .entry_details .item {
    background: var(--sukan-color-surface-subtle);
    border: 0;
    border-block-start: 1px solid var(--sukan-color-brand-surface);
}

/* —— 内容页与提示卡片 —— */

.sukan_main > .sukan_view_prose h2,
.sukan_main > .sukan_view_prose h3 {
    color: var(--cr-color-heading);
}

.sukan_view_message,
.sukan_view_error {
    border-radius: 0;
}

/*
 * —— 页脚：配色随页头，深红底白字；与页头同一内容宽 ——
 * 期刊与单位、联系方式从左排起，链接在最右成一行、竖线与导航条相同（与页头“刊名在左、注册登录在右”对应）；
 * 某一块没有资料时不占位。最底一条通栏深一级的红，版权、技术支持与备案号居中。
 */

.cr_footer {
    font-size: var(--sukan-font-size-small);
    background: var(--sukan-color-brand-surface);
}

.cr_footer__body {
    padding-block: var(--sukan-space-6) var(--sukan-space-5);
}

.cr_footer .sukan_footer__columns {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--sukan-space-4) var(--sukan-space-7);
}

.cr_footer .sukan_footer__contact:not(:has(p)) {
    display: none;
}

.cr_footer .sukan_footer__name {
    margin-block-end: var(--sukan-space-2);
    font-size: 1.25rem;
    letter-spacing: 0.06em;
}

.cr_footer .sukan_footer__navigation {
    margin-inline-start: auto;
}

.cr_footer .sukan_footer_menu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sukan-space-2) 0;
}

.cr_footer .sukan_footer_menu > li + li {
    border-inline-start: 1px solid var(--cr-color-nav-divider);
}

.cr_footer .sukan_footer_menu a {
    min-block-size: 1.5rem;
    padding: 0 var(--sukan-space-4);
}

.cr_footer .sukan_footer_menu > li:last-child a {
    padding-inline-end: 0;
}

.cr_footer a:hover,
.cr_footer a:focus {
    color: var(--sukan-color-on-interactive);
    text-decoration: underline;
}

/* 深红底上焦点框用白色 */
.sukan_page .cr_footer a:focus-visible {
    outline-color: var(--sukan-color-on-interactive);
}

.cr_footer__legal {
    background: var(--cr-color-legal);
}

/* 只清上下外边距：左右的 auto 让这一条与页头、正文居中在同一内容宽里 */
.cr_footer .sukan_footer__legal {
    justify-content: center;
    margin-block: 0;
    padding-block: 0.875rem;
    border: 0;
    text-align: center;
}

.cr_footer .sukan_footer__legal p {
    margin: 0;
}

/* 窄屏：几块上下排，链接从左排起 */
@media (max-width: 48rem) {
    .cr_footer .sukan_footer__columns {
        flex-direction: column;
        gap: var(--sukan-space-4);
    }

    .cr_footer .sukan_footer__navigation {
        margin-inline-start: 0;
    }

    .cr_footer .sukan_footer_menu > li:first-child a {
        padding-inline-start: 0;
    }
}
