/* =======================================
   Typography - 5sensebase
   Elegant Japanese Editorial Style
======================================= */

/* 全站字型 */

body,
button,
input,
textarea,
select{

    font-family:
    "Noto Sans TC",
    "PingFang TC",
    "Microsoft JhengHei",
    sans-serif;

    font-size:17px;

    line-height:1.9;

    letter-spacing:0.03em;

    font-weight:400;

    color:#3D3D3D;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}


/* 標題 */

h1,h2,h3,h4,h5,h6{

    font-family:
    "Noto Serif TC",
    "Songti TC",
    serif;

    font-weight:500;

    letter-spacing:0.06em;

    line-height:1.45;

    color:#2F2F2F;

    margin-bottom:0.8em;

}


/* Banner 主標 */

h1{

    font-size:56px;

}


/* 大標 */

h2{

    font-size:40px;

}


/* 小標 */

h3{

    font-size:30px;

}


/* 內文 */

p{

    font-size:17px;

    line-height:1.95;

    color:#666;

}


/* 清單 */

li{

    line-height:1.9;

}


/* 連結 */

a{

    text-decoration:none;

    transition:.25s;

}


/* 粗體 */

strong{

    font-weight:600;

}


/* 引言 */

blockquote{

    font-family:"Noto Serif TC", serif;

    font-size:1.15rem;

    line-height:2;

    font-style:italic;

    color:#666;

    border-left:3px solid #C8B18A;

    padding-left:24px;

}


/* 手機 */

@media (max-width:768px){

    body{

        font-size:16px;

    }

    h1{

        font-size:38px;

    }

    h2{

        font-size:30px;

    }

    h3{

        font-size:24px;

    }

}

/* ==========================================
   Responsive Layout System
   5sensebase Japanese Editorial Style
========================================== */

/* 全站 Box Model */
*,
*::before,
*::after{
    box-sizing:border-box;
}

/* 防止圖片超出容器 */
img{
    max-width:100%;
    height:auto;
    display:block;
}

/* 全站內容寬度 */
.site,
.site-content,
.container,
.wp-site-blocks{

    max-width:1280px;

    margin-left:auto;
    margin-right:auto;

    padding-left:5vw;
    padding-right:5vw;

}

/* 區塊上下留白 */
section,
.wp-block-group,
.wp-block-cover,
.wp-block-columns{

    padding-top:clamp(60px,8vw,120px);

    padding-bottom:clamp(60px,8vw,120px);

}

/* 所有文字區塊不要太寬 */
p,
li,
blockquote{

    max-width:72ch;
    margin-left: auto; 
    margin-right: auto;
}

/* 標題置中 */
h1,
h2{

    text-align:center;

    margin-left:auto;

    margin-right:auto;

}

/* 副標可依需求自行改成 left */
h3,
h4{

    text-align:left;

}

/* 內文 */
p{

    margin:0 auto 1.4em!important;

}

/* 按鈕置中 */
.wp-block-buttons,
.buttons,
.button-group{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

}

/* 卡片自動置中 */
.card,
.wp-block-group.is-style-card{

    margin-left:auto;

    margin-right:auto;

}

/* 影片、圖片、表格不超出版面 */
iframe,
video,
table{

    max-width:100%;

}

/* 手機避免文字太貼邊 */
@media (max-width:768px){

    .site,
    .site-content,
    .container,
    .wp-site-blocks{

        padding-left:24px;

        padding-right:24px;

    }

}

/* 超大螢幕不要拉太寬 */
@media (min-width:1600px){

    .site,
    .site-content,
    .container,
    .wp-site-blocks{

        max-width:1400px;

    }

}

/* ===============================
   Fluid Typography
=============================== */

h1{
    font-size:clamp(2.4rem,5vw,4.2rem);
}

h2{
    font-size:clamp(2rem,4vw,3.2rem);
}

h3{
    font-size:clamp(1.5rem,2.8vw,2rem);
}

p,
li{
    font-size:clamp(1rem,1.15vw,1.1rem);
}

small{
    font-size:clamp(.85rem,.9vw,.95rem);
}

/* 文字選取效果 */
::selection{
    background:#E6D7BE;
    color:#2F2F2F;
}

/* 平滑捲動 */
html{
    scroll-behavior:smooth;
}

/* 避免錨點被固定導覽列遮住 */
section{
    scroll-margin-top:90px;
}

/* ===================================
   Elegant Content Width
=================================== */

.site,
.site-content,
.container,
.wp-site-blocks{

    width:min(100%, 1080px);

    margin-left:auto;
    margin-right:auto;

    padding-left:40px;
    padding-right:40px;

}

/* =====================================
   5sensebase Gutenberg Layout Width
   Japanese Minimal Style
===================================== */


/* 全站主要內容 */

.wp-site-blocks{

    max-width:1100px;

    margin-left:auto;

    margin-right:auto;

    padding-left:40px;

    padding-right:40px;

}


/* 一般區塊 */

.wp-block-group{

    max-width:100%;

}


/* 文字閱讀寬度 */

.wp-block-paragraph,
.entry-content p{

    max-width:680px;

    margin-left:auto;

    margin-right:auto;

}


/* 標題置中 */

.wp-block-heading{

    text-align:center;

}


/* 寬版區塊不要滿版 */

.alignwide{

    max-width:1100px;

    margin-left:auto;

    margin-right:auto;

}


/* Full width 仍保留呼吸感 */

.alignfull{

    width:100%;

}


/* 手機 */

@media(max-width:768px){

    .wp-site-blocks{

        padding-left:24px;

        padding-right:24px;

    }

/* 測試主要內容容器

main{
    background:red !important;
} */