/* ========== 桌面版樣式 (螢幕 > 768px) ========== */
#sidebar-content {
    text-align: left;
    padding: 0 20px;
    /* 新增：確保內容垂直分佈，地圖會被推到最下面 */
    display: flex !important;
    flex-direction: column !important;
    border-right: none !important;
}

/* 讓桌面版的個人資訊恢復垂直排列 */
.profile-main {
    display: block;
    /* 移除手機版的 flex 橫排 */
}

#main-avatar {
    display: block;
    width: 120px !important;
    /* 桌面版大頭貼恢復大小 */
    height: 120px !important;
    border-radius: 50%;
    margin-bottom: 25px !important;
}

#user-name {
    margin: 0 0 8px 0 !important;
    font-size: 24px !important;
    font-weight: 700;
    letter-spacing: -0.5px;
}

#user-info {
    color: #666;
    line-height: 1.4;
    margin-bottom: 20px !important;
    font-size: 15px !important;
}

/* 桌面版導航選單：垂直排列 */
#nav-menu {
    display: block !important;
    margin-bottom: 30px !important;
    border-bottom: none !important;
    /* 移除手機版的底線 */
    padding-bottom: 0 !important;
}

#nav-menu a {
    text-decoration: none;
    color: #888;
    font-weight: 500;
    display: block !important;
    /* 垂直排列 */
    font-size: 17px;
    line-height: 2.4;
    font-family: 'Source Serif 4', serif;
}

/* 桌面版顯示原始圖示，隱藏 Follow 按鈕 */
.follow-container {
    display: none !important;
}

.social-icons {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.social-icons a {
    color: #444;
    font-size: 18px;
    text-decoration: none;
}


/* ========== 手機版 RWD (螢幕 <= 1100px) ========== */
@media (max-width: 1100px) {

    /* 強制覆蓋 styles.css 在 960px 時可能加上的 padding */
    header {
        padding-right: 0 !important;
        width: 100% !important;
    }

    .wrapper {
        display: block !important;
        /* 取消桌面版的 flex 排版 */
        width: 100% !important;
        padding: 0 !important;
    }

    #sidebar-content {
        display: flex !important;
        flex-direction: column !important;
        padding: 10px 20px !important;
        height: auto !important;
        /* 確保高度縮回內容大小 */
    }

    /* 在 header.html 的 @media (max-width: 1100px) 內部加入 */
    .sidebar-footer {
        display: none !important;
        /* 手機版隱藏側邊欄地圖，避免撐開高度 */
    }

    /* 導航置頂：橫排、底線、間距 */
    #nav-menu {
        order: -1;
        display: flex !important;
        justify-content: flex-end !important;
        gap: 20px !important;
        /* border-bottom: 1px solid #f0f0f0 !important; */
        padding-bottom: 12px !important;
        margin: 0 -20px 20px -20px !important;
        /* 線條延伸到邊緣 */
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    #nav-menu a {
        display: inline-block !important;
        font-size: 15px !important;
        line-height: 1 !important;
    }

    /* 個人資訊：橫排、小頭像 */
    .profile-main {
        display: flex !important;
        align-items: center !important;
    }

    #main-avatar {
        width: 45px !important;
        height: 45px !important;
        margin: 0 12px 0 0 !important;
    }

    #user-name {
        font-size: 18px !important;
        margin: 0 !important;
    }

    #user-info {
        font-size: 12px !important;
        margin-bottom: 0 !important;
    }

    /* 手機版：隱藏原始圖示，顯示 Follow 按鈕 */
    .social-icons {
        display: none !important;
    }

    .follow-container {
        display: block !important;
        margin-left: auto;
        position: relative;
    }

    #follow-btn {
        padding: 4px 12px;
        border: 1px solid #ddd;
        background: #fff;
        border-radius: 4px;
        font-size: 13px;
        font-family: inherit;

        /* 新增以下三行，解決手機端顏色與外觀問題 */
        color: #444;
        /* 明確指定文字顏色，防止手機端變藍 */
        -webkit-appearance: none;
        /* 移除 iOS 預設的按鈕外觀 */
        appearance: none;
        /* 移除標準瀏覽器的預設外觀 */

        cursor: pointer;
        /* 讓電腦端滑鼠移上去有手型圖示 */
    }

    .social-dropdown {
        display: none;
        /* 預設隱藏 */
        position: absolute;
        right: 0;
        top: 110%;
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        z-index: 9999;
        width: 140px;
    }

    /* 強制選單內的連結垂直排列，不橫排 */
    .social-dropdown a {
        display: flex !important;
        /* 修正：讓圖示和文字水平對齊，但整個 a 垂直堆疊 */
        flex-direction: row !important;
        padding: 10px 15px !important;
        color: #444 !important;
        font-size: 13px !important;
        text-decoration: none !important;
        border-bottom: 1px solid #f9f9f9;
        line-height: 1.2 !important;
    }

    .social-dropdown a i {
        margin-right: 8px;
        width: 16px;
        text-align: center;
        color: #777 !important;
        /* 強制改為灰色，覆蓋掉任何藍色設定 */
    }

    .social-dropdown.show {
        display: block !important;
    }

    /* 顯示選單 */
}