/*
 Theme Name: test 
 Author: Fan Cheuk Hang
 Version: 1.0
 */

@view-transition {
    navigation: auto;
}


/* 控制舊頁面淡出 */
::view-transition-old(root) {
    animation-duration: 0.1s;
    animation-timing-function: ease-out;
}

/* 控制新頁面淡入 */
::view-transition-new(root) {
    animation-duration: 0.3s;
    animation-timing-function: ease-in;
}

/* ------------------------------ */
/* Base */
/* ------------------------------ */

body.lang-en,
body.lang-zh {
    background-color: #e5e5e5; /* 淺灰色背景 */

    margin-top: 20px;
    margin-left: 4vw;
    margin-right: 4vw;

    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    color: #000;
}

html.device-iphone {
    body.lang-en,
    body.lang-zh {
        font-size: 44px;
        line-height: 1.5;
    }
}

body.lang-en {
    font-family: "Spectral", serif;
}

body.lang-zh {
    font-family: "Noto Serif TC", serif;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    width: 100%;
    height: auto;
    display: block;
}

/* Firefox */
html {
    scrollbar-width: none;
}
/* IE / old Edge */
html {
    -ms-overflow-style: none;
}
/* Chrome, Safari, Edge (Chromium) */
html::-webkit-scrollbar {
    display: none;
}

/* ------------------------------ */
/* Header / Navigation */
/* ------------------------------ */

#logo {
    font-weight: 600; /* semibold */
    font-size: 20px;
}

.site-header__leading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

main {
    display: flex;
    justify-content: space-between; /* 讓 Logo 在左，Nav 在右 */
    align-items: flex-start;
}

nav ul {
    display: flex;
    flex-direction: column;
    gap: 8px;

    list-style: none; /* 移除點點 */
    text-align: end; /* 讓文字靠右對齊 */

    padding: 0px;
    margin: 0px;
}

.site-nav__lang-switch {
    margin-top: 0px; /* 讓 "中" 字與上方拉開距離 */
}

.lang-switch__link-zh {
    font-family: "Spectral", serif;
}

.lang-switch__link-en {
    font-family: "Noto Serif TC", serif;
}

/* 僅 ≤512px 顯示選單按鈕；寬螢幕不顯示、也不做開合 */
.site-nav__toggle {
    display: none;
}

html.device-ipad,
html.device-iphone {
    nav ul {
        flex-direction: row;
        gap: 50px;

        margin-top: 10px;
    }

    .site-nav__lang-switch {
        margin-top: 10px;
    }
}

html.device-iphone {
    main {
        flex-direction: column;
        align-items: stretch;
    }

    #logo {
        font-size: 48px;

        padding-bottom: 80px;
    }

    .site-header__leading {
        gap: 6px;
    }

    .site-nav {
        width: 100%;
    }

    /* 不要左右 padding；清掉 UA 預設，圖示才會與 logo 左緣對齊 */
    .site-nav__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0;
        margin: 0;
        border: none;
        background: transparent;
        color: inherit;
        cursor: pointer;
        font: inherit;
        appearance: none;
        -webkit-appearance: none;
    }

    .site-nav__toggle:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }

    .site-nav__panel {
        display: none;
        width: 100%;
    }

    .site-nav.is-open .site-nav__panel {
        display: block;
        margin-top: 20px;

        font-size: 40px;
        padding-top: 40px;
        padding-bottom: 10px;
    }

    /*
     * 外層 ul 是唯一 flex 列：各主選單 li + 語言 li 要「直接」當子項，
     * 才能 space-between 橫跨整欄。若 ul.menu 維持 display:flex，會整坨算一個 item，連結全擠左邊。
     */
    .site-nav__panel > ul {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: clamp(8px, 3vw, 24px);
        margin: 0;
        padding: 0;
        text-align: start;
    }

    .site-nav__panel > ul > li:first-child {
        display: contents;
    }

    .site-nav__panel > ul > li:first-child > div {
        display: contents;
    }

    .site-nav__panel ul.menu {
        display: contents;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .site-nav__panel ul.menu > li {
        flex: 0 1 auto;
    }

    .site-nav__panel .site-nav__lang-switch {
        flex: 0 0 auto;
    }

    .site-nav__lang-switch {
        margin-top: 0;
    }

    .site-nav__toggle-icon {
        position: relative;
        display: block;
        width: 40px;
        height: 28px; /* 兩條線＋中間空隙的總高度 */
    }
    
    /* 上下兩條線 */
    .site-nav__toggle-icon::before,
    .site-nav__toggle-icon::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background: currentColor;
    }
    
    .site-nav__toggle-icon::before {
        top: 0;
    }
    
    .site-nav__toggle-icon::after {
        bottom: 0;
    }
}

/* ------------------------------ */
/* Layout */
/* ------------------------------ */

.page-content {
    padding: 0;
    margin-top: -62px;
}

.single-post {
    padding: 0;
    margin-top: -62px;
    margin-left: 10vw;

    width: 45vw;
}

html.device-ipad,
html.device-iphone {
    .page-content {
        margin-top: 40px;
    }

    .single-post {
        margin-top: 40px;
        margin-left: 0;
        width: 100%;
    }
}

html.device-iphone {
    .page-content {
        margin-top: 60px;
    }
}

/* ------------------------------ */
/* Components */
/* ------------------------------ */

/* Works list item */
.works-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 頂部 */
    margin-top: 10px;
    margin-left: 10vw;
    margin-bottom: 7vh;

    gap: 10px;
}

.works-item__image {
    flex-shrink: 0;
    width: 45vw;
    height: auto;
    margin: 0;
    display: block;
    cursor: pointer;
}

.works-item__title {
    flex: 1;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    cursor: pointer;
}

.works-item__author {
    cursor: pointer;
}

html.device-ipad,
html.device-iphone {
    .works-item {
        margin-left: 0;
        margin-bottom: 4vh;
        width: 100%;
    }

    .works-item__image {
        width: 100%;
    }
}

html.device-iphone {
    .works-item__title {
        font-size: 40px;
    }
}

/* Journal list item */
.journal-item {
    /* iPhone 版面時 .journal-item__type .badge 的最小寬度（em 會跟該區字級縮放） */
    --journal-badge-min-width: 7em;

    display: flex;
    align-items: center; /* 置中 */
    gap: 50px;

    margin-left: 10vw;
    margin-top: 10px;
    margin-bottom: 10px;

    width: 70vw;
}

.journal-item__meta {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 50px;
    flex-shrink: 0;
}

.journal-item__date {
    font-family: "Spectral", serif;

    flex-shrink: 0;
    line-height: 1.2;
}

.journal-item__type {
    flex-shrink: 0;
    line-height: 1.2;

    font-size: 12px;

    margin-right: 0;

    /* letter-spacing: 0.06em; optional */
    text-transform: uppercase; /* optional */
}

.journal-item__title {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.5;
    font-size: 24px;
}

.journal-item__venue {
    flex-shrink: 0;
    line-height: 1.5;
    font-size: 18px;
}

.journal-item.is-upcoming {
    color: #227A91;
}

.journal-list__divider {
    border: none; /* 移除預設邊框 */
    border-top: 1px solid #333; /* 在上方加邊框 */
    margin: 0px 0; /* 上下間距 */
    margin-left: 10vw;
    width: 70vw;
}

.journal-list__divider.is-upcoming {
    border-top-color: #227A91; /* 改顏色 */
}

html.device-ipad,
html.device-iphone {
    .journal-item {
        margin-left: 0;
        width: 100%;
    }

    .journal-list__divider {
        margin-left: 0;
        width: 100%;
    }
}

html.device-iphone {
    .journal-item {
        flex-direction: column;
        align-items: stretch;
        align-content: stretch;
        gap: 12px;
    }

    .journal-item__meta {
        gap: 16px;
        width: 100%;
        justify-content: flex-start;
    }

    .journal-item__date {
        font-size: 48px;
    }

    .journal-item__type {
        font-size: 30px;
        line-height: 1;
        display: flex;
        align-items: center;

        padding-left: 40px;
    }

    .journal-item__type .badge {
        width: auto;
        min-width: var(--journal-badge-min-width);
        height: auto;
        min-height: unset;
        padding: 0.2em 0.5em;
        font-size: inherit;
        font-family: inherit;
        line-height: 1;
    }

    .journal-item__title {
        flex: none;
        width: 100%;
        max-width: none;
        display: flex;
        flex-direction: column;
        align-items: stretch;

        font-size: 48px;
    }

    .journal-item__title > a {
        display: block;
        width: 100%;
    }

    .journal-item__venue {
        width: 100%;
        max-width: none;

        font-size: 36px;
    }
}

/* Shared UI */
.badge {
    font-family: "Spectral", serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 90px; /* adjust to match the pic */
    height: 23.2px; /* adjust to match the pic */
    /* padding: 0 10px; optional; remove if you want strictly fixed inner space */

    border: 1px solid currentColor;
    box-sizing: border-box;
}

/* About page */
.about-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    /* margin-top: 10px; */
    margin-left: 10vw;
    margin-right: 10vw;
    margin-bottom: 10vh;
    /* gap: 20px; */
}

.about-item__content p,
.about-item__content ul,
.about-item__content ol,
.about-item__content h1,
.about-item__content h2,
.about-item__content h3,
.about-item__content h4,
.about-item__content h5,
.about-item__content h6 {
    margin: 0;      /* add this */
    padding: 0;

    width: 45vw;
}

.about-page__email {
    font-family: "Spectral", serif;
    font-weight: 400;
}

.about-item__nav ul{
    font-family: "Spectral", serif;
    font-weight: 400;

    display: flex;
    flex-direction: column;
    
    list-style: none; /* 移除點點 */
    margin: 0;      /* add this */
    padding: 0;
    text-align: end; /* 讓文字靠右對齊 */
}

.about-item__nav li {
    flex-shrink: 0;
    list-style: none;
}

.about-item__nav a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.1em; /* smaller offset = closer to text */
}

html.device-ipad,
html.device-iphone {
    .about-item{
        flex-direction: column-reverse;
        justify-content: flex-start;

        margin-left: 0;
    }

    .about-item__content p,
    .about-item__content ul,
    .about-item__content ol,
    .about-item__content h1,
    .about-item__content h2,
    .about-item__content h3,
    .about-item__content h4,
    .about-item__content h5,
    .about-item__content h6 {
        width: 80vw;
    }

    .about-item__nav ul {
        text-align: start;

        margin-bottom: 20px;
    }
}

html.device-iphone {
    .about-item{
        flex-direction: column-reverse;
        justify-content: flex-start;

        margin-left: 0;
    }

    .about-item__content p,
    .about-item__content ul,
    .about-item__content ol,
    .about-item__content h1,
    .about-item__content h2,
    .about-item__content h3,
    .about-item__content h4,
    .about-item__content h5,
    .about-item__content h6 {
        width: 90vw;

    }

    .about-item__nav ul {
        text-align: start;

        margin-bottom: 80px;

        /* font-size: 42px;
        line-height: 1.2; */
    }
}

/* Single post */
.single-post__title {
    padding: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

html.device-iphone {
    .single-post__title {
        font-size: 48px;
    }
}