@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* 页面字体样式设置 */
* {
    font-family: 'Roboto', 'Noto Sans CJK SC', 'Noto Sans SC', 'Segoe UI Variable Text', 'Roboto Flex', 'Roboto', 'Segoe UI', 'Inter', 'Sarasa UI SC', 'PingFang SC', 'Microsoft Yahei UI', 'Noto Sans CJK SC', 'Noto Sans SC', sans-serif;
}

/* 自定义样式 */

.text-pink {
    color: rgb(255, 162, 208);
}

.hero {
    border-radius: 1rem;
}

.navbar {
    border-color: #1f2229;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    animation-duration: 0.4s;
}

/* 汉堡图标 / 下拉箭头：hotpink 色相偏品红（发紫），统一成站点的珊瑚粉 */
.navbar-burger span {
    background-color: #ff6685;
}

.navbar-link:not(.is-arrowless)::after {
    border-color: #ff6685;
}

.btn-pink {
    background-color: #ff6685;
    border: none;
    color: white;
}

.btn-pink:hover {
    background-color: #f04d70;
    border: none;
}

.btn-pink:active {
    background-color: #d63a5c;
    border: none;
}

.bg-pink {
    background-color: rgb(155, 55, 105) !important;
    color: white;
}

.mt-4rem {
    margin-top: 4rem !important;
}

.footer {
    border-top-left-radius: 2em;
    border-top-right-radius: 2em;
}

.has-dropdown a[class="navbar-link"]::after {
	transform: rotate(-135deg);
	transition: transform 0.2s;
}
.has-dropdown a[class="navbar-link is-active"]::after {
	transform: rotate(-45deg);
	transition: transform 0.2s;
}

/* 并排按钮在窄屏（手机竖屏 / 平板）下会折行，而 Bulma 的 .button 是
   inline-flex，折行后两行按钮之间没有任何间距，看着贴在一起。
   这里给「后面还跟着另一个按钮」的按钮补一点下间距：同行内所有按钮的
   margin-bottom 一致，因此换行只影响行与行之间，不会把同一行的按钮顶歪；
   宽屏不折行时外观与改动前完全一致。 */
@media (max-width: 991.98px) {
    .button:has(+ .button) {
        margin-bottom: 0.5rem;
    }
}

/* 自定义深色模式样式 */
@media (prefers-color-scheme: dark){
    .message-body-text {
        color: white !important;
    }

    /* 首页「加入 QQ 群」等 message 面板：Bulma 在夜间只把底色压暗了一点，
       这里原来补的是半透明亮粉（#ff4b6f8d），整块面板在深色页面里是一大片
       荧光粉，看着像没适配。夜间改成「深色面板 + 浅色文字 + 红色左边条」，
       与其它卡片同一套质感；亮色模式完全不受影响。 */
    .message {
        background-color: hsl(var(--bulma-scheme-h, 221), var(--bulma-scheme-s, 14%), 13%);
        border-radius: 0.5rem;
        box-shadow: none;
    }

    .message.is-danger {
        background-color: hsl(348, 45%, 14%);
        border: 1px solid rgba(255, 107, 138, 0.3);
    }

    .message.is-info {
        background-color: hsl(207, 45%, 14%);
        border: 1px solid rgba(0, 174, 236, 0.3);
    }

    .message-body {
        background-color: transparent;
        border: none;
        color: hsl(var(--bulma-scheme-h, 221), 8%, 88%);
    }

    /* 标题条：Bulma 夜间给的是 70% 亮度的浅粉，白字压上去只有 2.8:1，
       换成更深一档的红，白字可读且不再整块发亮。 */
    .message.is-danger > .message-header {
        background-color: #b32847;
        color: #ffffff;
    }

    .message.is-info > .message-header {
        background-color: #0b6b8f;
        color: #ffffff;
    }

    /* Bulma 的 is-light / is-white 按钮在夜间模式下仍是白底（#f3f4f6），
       在深色页面里就是一块刺眼的白。夜间改成深底浅字，尺寸/间距不变。 */
    .button.is-light,
    .button.is-white {
        background-color: hsl(var(--bulma-scheme-h, 221), var(--bulma-scheme-s, 14%), 17%);
        border-color: hsl(var(--bulma-scheme-h, 221), var(--bulma-scheme-s, 14%), 26%);
        color: #f1f3f6;
    }

    .button.is-light:hover,
    .button.is-white:hover,
    .button.is-light.is-hovered,
    .button.is-white.is-hovered {
        background-color: hsl(var(--bulma-scheme-h, 221), var(--bulma-scheme-s, 14%), 23%);
        color: #ffffff;
    }

    /* 玫红色按钮（首页「了解详情 / 下载」、专栏底部按钮、导航「返回主页」）：
       Bulma 夜间把 danger 提亮到 70%（#ff6685），一整排白字粉底在深色页面上
       像没做暗色，白字对比度也只有 2.8:1。夜间换成深玫红底 + 白字，
       观感与其它深色卡片统一，对比度达标；outlined 描边版保持原样。 */
    .button.is-danger:not(.is-outlined),
    .button.has-background-danger {
        background-color: #c22a4a;
        border-color: #c22a4a;
        color: #ffffff;
    }

    .button.is-danger:not(.is-outlined):hover,
    .button.is-danger:not(.is-outlined).is-hovered,
    .button.has-background-danger:hover,
    .button.has-background-danger.is-hovered {
        background-color: #d63a5c;
        border-color: #d63a5c;
        color: #ffffff;
    }

    /* v0.3 之类的纯色徽标（非按钮，没有 hover 态） */
    .has-background-danger {
        background-color: #c22a4a !important;
        color: #ffffff !important;
    }
}

/* ---------- 卡片右侧冒出「上下拖动条」的问题 ----------
   Bulma 给 .media-content 设了 overflow-x: auto，按规范另一轴 visible 会被计算成 auto；
   竖屏下卡片标题换行后，内容比容器高出 1px，右侧就出现一条可上下拖动的滚动条
   （点箭头只挪 1px）。内容本身会正常换行，不需要这里的内部滚动，直接放开。 */
.media-content {
    overflow: visible;
}

/* 卡片里的长链接 / 长英文串允许断行（不再依赖内部滚动条兜底） */
.card-content,
.media-content {
    overflow-wrap: anywhere;
}

/* ---------- 手机竖屏：卡片内容防溢出（整体兜底） ----------
   背景：Bulma 的 .button 是 inline-flex + white-space:nowrap，长文案按钮（如
   「26.30 - 26.45 光影清单 »」）在窄屏不会折行，会顶出卡片右边缘；
   卡片里的长英文串/长链接同理。这里在窄屏放宽这些限制，
   保证无论字体如何（Google Fonts 加载失败时回退字体更宽）卡片都不会顶出去。 */
@media screen and (max-width: 768px) {
    /* 按钮：允许换行、限制在容器内、高度自适应 */
    .button {
        max-width: 100%;
        height: auto;
        white-space: normal;
        text-align: center;
    }

    /* 按钮组 / 分组控件允许折行 */
    .buttons,
    .field.is-grouped {
        flex-wrap: wrap;
    }

    /* 卡片内的标题与正文：长英文串、长链接允许断行 */
    .card-content,
    .card-content .title,
    .card-content .subtitle,
    .media-content {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* 卡片内的图片不超宽 */
    .card-content img {
        max-width: 100%;
        height: auto;
    }
}