/* Offset for fixed navbar when scrolling to anchors */
html {
    scroll-padding-top: 80px;
}

h1, h2, h3, h4, h5, h6 {
    color: #DDA0DD;
}

.picfit {
    object-fit: cover;
    width: 200px;
    height: 200px;
}

.figure {
    width: 200px;
    height: 320px;
    margin: 3px
}

#page-toc .toc-item > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

#page-toc .toc-item.toc-has-children > a::after {
    content: '\25B8';
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

#page-toc .toc-item.toc-has-children.is-expanded > a::after {
    content: '\25BE';
}

#page-toc .toc-sublist {
    display: none;
}

#page-toc .toc-item.is-expanded > .toc-sublist {
    display: block;
}

#page-content img {
    max-width: 100%;
    height: auto;
}

/* Language Switch Toggle */
.lang-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    cursor: pointer;
}

.lang-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.lang-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #6c757d;
    transition: 0.3s;
    border-radius: 26px;
}

.lang-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.lang-switch input:checked + .lang-slider {
    background-color: #0d6efd;
}

.lang-switch input:checked + .lang-slider:before {
    transform: translateX(24px);
}

.lang-switch input:focus + .lang-slider {
    box-shadow: 0 0 1px #0d6efd;
}

/* Character list card alignment */
#chara-list.row {
    align-items: stretch;
}

#chara-list .col > a {
    display: flex;
    height: 100%;
}

/* Character card using CSS Grid layout */
.card.h-100 {
    height: 100% !important;
    display: grid;
    grid-template-rows: auto 1fr;  /* 圖片自動高度，body 填滿剩餘空間 */
    transition: filter 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Card body using CSS Grid for internal layout */
.card.h-100 .card-body {
    display: grid;
    grid-template-rows: auto auto 1fr;  /* 標題、假名自動高度，摘要填滿剩餘 */
}

/* Hover effect: float + triple-layer glow */
.card.h-100:hover {
    transform: translateY(-5px);
    box-shadow:
        0 8px 20px rgba(221, 160, 221, 0.4),   /* 外層陰影 */
        0 0 40px rgba(221, 160, 221, 0.3),     /* 中層光暈 */
        0 0 60px rgba(221, 160, 221, 0.2) !important;  /* 最外層光暈 */
}