/*
 * 速刊主题 · 父主题提供的那部分基础表现。
 *
 * 原主题 sukanTheme 是 OJS 默认主题的子主题：盒模型、段落与列表的行距、面包屑、窄屏菜单的开合、
 * 目录里页码的位置等，原本来自父主题。父主题按 GPL 发布，它的样式不复制；这里按线上页面实测的
 * 数值重新写出同样的表现。本文件先于 sukan.css 等三份加载，后者里的同名规则会覆盖这里。
 */

/* 父主题里直接写出的少数色值，收成变量，取值与线上一致。 */
:root {
    --sukan-color-breadcrumb-current: rgba(0, 0, 0, 0.54);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
}

img {
    max-inline-size: 100%;
}

/* 只给读屏软件的文字。 */
.sukan_visually_hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* 跳到正文：平时移出画面，键盘聚焦时出现在左上角。 */
.sukan_skip_link {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: -100vw;
    z-index: 2000;
    padding: 0.5rem 1rem;
    color: var(--sukan-color-on-interactive);
    background: var(--sukan-color-brand-surface);
}

.sukan_skip_link:focus {
    inset-inline-start: 0;
}

/* —— 正文区的段落、列表与标题 —— */

.sukan_main p {
    margin: 1.43rem 0;
    line-height: 1.785rem;
}

.sukan_main ul {
    line-height: 1.785rem;
}

/* 页面标题紧跟在面包屑之后，上方不再留空。选择器写得比后面三份样式表里的规则更具体，以保持这一点。 */
.sukan_content .sukan_main > .sukan_view > h1,
.sukan_view_article .sukan_article_details > .page_title {
    margin-block-start: 0;
}

/* —— 面包屑 —— */

.sukan_breadcrumbs {
    display: inline-block;
}

.sukan_breadcrumbs ol {
    margin: 0 0 2.143rem;
    padding: 0.357rem 0;
    font-size: 0.93rem;
    line-height: 1.43rem;
    list-style: none;
}

.sukan_breadcrumbs a {
    display: inline-block;
    text-decoration: none;
}

.sukan_breadcrumbs li {
    display: block;
}

.sukan_breadcrumbs .current {
    color: var(--sukan-color-breadcrumb-current);
}

/* —— 页头导航 —— */

.sukan_nav_primary,
.sukan_nav_user,
.sukan_footer_menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sukan_nav_primary > li,
.sukan_nav_user > li,
.sukan_footer_menu > li {
    position: relative;
    display: block;
}

.sukan_nav_menu a {
    text-decoration: none;
}

.sukan_nav_user {
    font-size: 0.93rem;
}

/* 窄屏的菜单按钮：三道杠，展开后变成叉。文字留给读屏软件。 */
.sukan_nav_toggle {
    position: absolute;
    display: none;
    padding: 0;
    cursor: pointer;
}

.sukan_nav_toggle > span {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 1.5rem;
    block-size: 1.1875rem;
    border-block-end: 3px solid;
    transform: translate(-50%, -50%);
    /* 按钮的文字推出方框并裁掉，只留给读屏软件 */
    overflow: hidden;
    text-indent: 200%;
    white-space: nowrap;
}

.sukan_nav_toggle > span::before,
.sukan_nav_toggle > span::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inline-size: 1.5rem;
    block-size: 3px;
    transition: transform var(--sukan-duration-standard) ease;
}

.sukan_nav_toggle > span::before {
    inset-block-start: 0;
}

.sukan_nav_toggle > span::after {
    inset-block-start: 0.5rem;
}

.sukan_nav_toggle--open > span {
    border-block-end-color: transparent;
}

.sukan_nav_toggle--open > span::before {
    inset-block-start: 0.5rem;
    transform: rotate(45deg);
}

.sukan_nav_toggle--open > span::after {
    transform: rotate(-45deg);
}

@media (max-width: 62rem) {
    .sukan_nav_toggle {
        display: block;
    }

    /* 菜单平时收起，展开时铺在页头下方，与页头同宽。 */
    .sukan_nav_menu {
        position: absolute;
        inset-inline: 0;
        z-index: 1;
        display: none;
    }

    .sukan_nav_menu--open {
        display: block;
    }
}

@media (min-width: 62.0625rem) {
    /* 导航项多到一行放不下时折到下一行，不撑破页头（原站只有六项，没有遇到）。 */
    .sukan_nav_primary {
        flex-wrap: wrap;
    }

    /* 第一项向左收半个字宽，与线上一致。 */
    .sukan_nav_primary > li:first-child > a {
        margin-inline-start: -0.5em;
    }
}

/* —— 正文与页脚在窄屏下的内边距 —— */

@media (max-width: 47.99rem) {
    .sukan_content,
    .sukan_footer_container {
        padding-inline: 0.714rem;
    }
}

/* —— 页脚导航的链接：宽屏下带内边距，窄屏下横排时不带 —— */

@media (min-width: 62rem) {
    .sukan_footer_menu a {
        padding: 0.357rem 0.714rem;
    }
}

.sukan_footer__record a {
    text-decoration: underline;
}

/* 版权行与“技术支持”一行上下排列。 */
.sukan_footer .sukan_footer__support {
    opacity: 0.8;
}

/* —— 期次目录里的一行 —— */

.sukan_issue_toc .heading .published {
    margin: 1.43rem 0;
}

.sukan_issue_toc .heading .label {
    font-weight: 700;
}

/* 线上每一行的作者下方还有一小段空（原来放全文链接的位置，空着也占间距），照此保留。 */
.sukan_article_summary .meta {
    position: relative;
    margin-block-end: 0.714rem;
}

/* 宽屏下页码靠右，作者一栏给它让出位置；窄屏下页码另起一行。 */
@media (min-width: 48rem) {
    .sukan_article_summary .authors {
        padding-inline-end: 5em;
    }

    .sukan_article_summary .pages {
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: 0;
        line-height: 2.143rem;
    }
}

/* —— 本系统新增的少量元素，原主题里没有 —— */

/* 线上首页的首屏比其他页面的首行低一个间距（首屏前有一个不占高度的锚点，仍占一格网格间距），照此保留。 */
.sukan_view_home {
    padding-block-start: var(--sukan-space-5);
}

/* 没有封面时首屏只有文字一栏。 */
.sukan_hero--no_cover {
    grid-template-columns: minmax(0, 1fr);
}

/* 期刊信息一项都没有填时不出现信息栏，最新文章占满整行。 */
.sukan_homepage_grid--single {
    grid-template-columns: minmax(0, 1fr);
}

.sukan_homepage_empty {
    color: var(--sukan-color-text-muted);
}

/* —— 文章页 —— */

.sukan_article_details .authors .name {
    display: block;
}

/* 侧栏卡片里的小标题比主栏的轻：常规字重、正文色。 */
.sukan_article_details .entry_details .sub_item .label {
    margin: 0;
    color: var(--sukan-color-text);
    font-size: 0.93rem;
    font-weight: 400;
}

/* 文章页：引用导出的两个链接、出版后公告。 */
.sukan_article_exports {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sukan-space-4);
}

.sukan_article_details > .sukan_alert {
    margin-block-end: var(--sukan-space-4);
}

.sukan_article_notices {
    display: grid;
    gap: var(--sukan-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sukan_article_notices__date {
    color: var(--sukan-color-text-muted);
    font-size: var(--sukan-font-size-small);
}

.sukan_article_details .entry_details .value .sukan_button {
    inline-size: 100%;
    margin-block-start: var(--sukan-space-2);
}
