/* Header 背景顏色，桌機高度 100px */
#masthead,
.ast-primary-header-bar {
    height: 100px;
    min-height: 100px;
    background-color: #404850;
}

/* Header 內部項目垂直置中，不改左右排列 */
.ast-site-identity,
.main-header-menu,
.ast-header-social-inner {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* 主選單文字垂直置中 */
.main-header-menu a {
    padding-top: 0;
    padding-bottom: 0;
}

/* 桌機版 Admin Bar 存在時，內容上方距離 */
body.admin-bar .site-content {
    padding-top: 142px; /* Header 100px + Admin Bar 32px + margin 10px */
}

/* 桌機版一般訪客，內容上方距離 Header */
body:not(.admin-bar) .site-content {
    padding-top: 110px; /* Header 100px + margin 10px */
}

/* 手機響應：Header 高度縮小，內容距離調整 */
@media (max-width: 768px) {
    #masthead,
    .ast-primary-header-bar {
        height: 60px;
        min-height: 60px;
    }

    body.admin-bar .site-content {
        padding-top: 102px; /* 手機版 Header 60px + Admin Bar 32px + margin 10px */
    }

    body:not(.admin-bar) .site-content {
        padding-top: 70px; /* 手機版 Header 60px + margin 10px */
    }
}









/* ===========================
   子選單
   =========================== */


/* 桌機版子選單背景與文字 */
.main-header-menu .sub-menu {
    background-color: #666666;   /* 子選單背景色，可改成你想要的 */
    border: 1px solid #888888;   /* 邊框改成灰色 */
}

/* 子選單文字顏色 */
.main-header-menu .sub-menu a {
    color: #ffffff;              /* 文字顏色 */
}

/* 子選單文字滑鼠懸停顏色 */
.main-header-menu .sub-menu a:hover {
    color: #eeeeee;              /* 滑鼠懸停文字顏色 */
}

/* 子選單項目間加分隔線 */
.main-header-menu .sub-menu li {
    border-bottom: 1px solid #888888;  /* 每個項目下方的分隔線 */
}

/* 最後一個項目不要分隔線 */
.main-header-menu .sub-menu li:last-child {
    border-bottom: none;
}

/* 手機側邊滑出選單背景與文字 */
.main-header-menu.mobile-menu .sub-menu {
    background-color: #666666;   /* 背景色 */
    border: 1px solid #888888;   /* 邊框灰色 */
}

.main-header-menu.mobile-menu .sub-menu a {
    color: #ffffff;              /* 文字色 */
}

.main-header-menu.mobile-menu .sub-menu a:hover {
    color: #eeeeee;              /* 懸停色 */
}

/* 手機子選單項目分隔線 */
.main-header-menu.mobile-menu .sub-menu li {
    border-bottom: 1px solid #888888;
}

.main-header-menu.mobile-menu .sub-menu li:last-child {
    border-bottom: none;
}


/* ===========================
   Column 的寬度分配
   =========================== */


/* 1. 父容器：保持並排 */
.vertical-btns-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 30px !important;
}

/* 2. 修正外殼：保留原始設計的長度感 */
.vertical-btns-container .wp-block-button.vertical-btn {
    /* 這裡不強制設定 width: auto，讓它保留 UI 指定的尺寸感 */
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

/* 3. 按鈕本體：將原本的寬度轉化為長度，並強制瘦身 */
.vertical-btns-container .vertical-btn .wp-block-button__link {
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* 瘦度控制：只鎖定這個維度 */
    width: 80px !important;       /* 調整這個數值來決定按鈕多瘦 */
    min-width: 0 !important;
    
    /* 長度控制：尊重原本的比例 */
    height: 160px !important;     /* 這裡我先設一個接近原本設計比例的長度 */
    
    /* 內部空間：確保文字在長條中置中 */
    padding: 10px 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

/* 4. 手機版微調：防止超出螢幕 */
@media (max-width: 768px) {
    .vertical-btns-container {
        gap: 30px !important;      /* 手機版縮小最小間距 */
    }
    .vertical-btns-container .vertical-btn .wp-block-button__link {
        width: 60px !important;
        height: 150px !important;
    }
}