/* ===== Banner（WEB-INF/templates/banner.xhtml、banner-brand.xhtml） =====
   這支只管版面；配色與背景圖在外觀主題 css/brand/主題.css（configuration 的 branding.theme，見 BrandingBean），
   版型在這支之後載入、蓋過這裡的預設色。這裡的顏色只是主題沒載到時的保底（深底白字）。
   字標整組用 em 跟著 .banner__brand 的 font-size 縮放，RWD 只要調這一個值。 */
.banner {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 88px;
    padding: 10px 28px;
    overflow: hidden;
    text-decoration: none;
    background: #1f2937;
}

a.banner:hover {
    opacity: 0.92;
}

.banner:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

.banner__brand {
    display: inline-flex;
    align-items: center;
    font-size: clamp(34px, 2.4vw + 24px, 48px);
    line-height: 1;
}

.banner__mark {
    font-family: 'Segoe UI', 'Helvetica Neue', Roboto, Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
}

.banner__title {
    display: flex;
    flex-direction: column;
    margin-left: 0.42em;
    padding-left: 0.5em;
    border-left: 2px solid rgba(255, 255, 255, 0.6);
    font-family: 'Segoe UI', 'Helvetica Neue', Roboto, Arial, sans-serif;
    font-size: max(0.27em, 10.5px);
    line-height: 1.55;
    white-space: nowrap;
}

/* 沒設字標時刊名靠左，不留分隔線 */
.banner__title:first-child {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
}

.banner__journal {
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}

.banner__journal-part {
    white-space: nowrap;
}

/* 刊名裡用方括號標的那段維持大小寫，字距也收窄（JISE 的「Journal of INFORMATION SCIENCE AND ENGINEERING」） */
.banner__journal-keep {
    letter-spacing: 0.04em;
    text-transform: none;
}

.banner__system {
    display: block;
    margin-top: 0.15em;
    font-size: 1.12em;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
}

/* 手機：刊名一段一行 */
@media (max-width: 600px) {
    .banner {
        min-height: 62px;
        padding: 8px 16px;
    }

    .banner__journal-part {
        display: block;
    }
}