/* 引入新的可愛字體 (Varela Round 圓圓的很親切) */
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
/* =========================================
   CSS 基礎設定 & 全域變數
   ========================================= */
:root {
    /* 定義你的品牌粉色調 */
    --bg-color-hero: #F9CAD2;    /* 頂部 GIF 背景區 (Section 1) */
    --bg-color-about: #FEF0F2;   /* About Me 區 (Section 2) */
    --bg-color-footer: #fbc5c6;  /* Nice to meet you 區 (Section 3) */
    --text-main: #666666;        /* 主要文字顏色 */
    --text-heading: #FFFFFF;     /* 大標題文字顏色 */
    --border-btn: #D6D6D6;       /* 按鈕邊框顏色 */
    --bg-btn: #FFFFFF;           /* 按鈕背景顏色 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Montserrat', 'Noto Sans TC', sans-serif;
    color: var(--text-main);
    line-height: 1.8;
    background-color: #FFFFFF;
    -webkit-font-smoothing: antialiased; /* 文字邊緣優化 */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 確保網頁總高度至少等於螢幕的高度 */
}

h1, h2 { font-weight: 600; text-shadow: 1px 1px 3px rgba(0,0,0,0.1); }
p { font-size: 1rem; }
a { text-decoration: none; color: inherit; transition: 0.3s; }

/* 通用區塊樣式 */
section { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; position: relative; overflow: hidden; }

/* =========================================
   導覽列 (Header)
   ========================================= */
.simple-header {
    background-color: var(--bg-color-about); /* 品牌粉色背景 */
    padding: 15px 40px;
    display: flex;
    justify-content: flex-end; /* 讓導航按鈕靠右排列 */
    align-items: center;
    width: 100%;
}
.simple-nav {
    display: flex;
    gap: 25px; /* 按鈕之間的間距 */
}
.simple-nav a {
    font-family: 'Montserrat', 'Noto Sans TC', sans-serif; /* 強制導航列使用此字體 */
    font-size: 0.85rem; /* 字體稍微縮小 */
    font-weight: 600;
    transition: color 0.3s ease;
}
.simple-nav a:hover {
    color: #fbc5c6; /* 滑鼠移過去變白色 */
}

/* =========================================
   手機版專屬放大設定 (針對觸控螢幕/手機裝置)
   ========================================= */
@media (max-device-width: 896px), (pointer: coarse) {
    .simple-header {
        padding: 40px 50px; /* 再次加大上下間距，配合更大的字體 */
    }
    .simple-nav {
        gap: 45px; /* 加大按鈕之間的距離，避免太擁擠 */
    }
    .simple-nav a {
        font-size: 1.2rem;
    }
}

/* =========================================
   Section 1: Hero (GIF背景 + 導覽按鈕)
   ========================================= */
   #hero {
    min-height: 600px; /* 改用固定像素，避免手機縮小畫面時因 100vh 顯得太長 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 讓內容垂直居中，解決「太上面」的問題 */
    padding-top: 60px;       /* 增加頂部間距，讓裝飾元素有呼吸空間 */
    background-color: var(--bg-color-hero);
}

/* 1.1 背景的 GIF  */
.hero-gif-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('img/hero-background.gif'); 
    background-size: cover;
    background-position: center;
    opacity: 0.8; /* 調整 GIF 的透明度，不搶走文字風采 */
    z-index: 1;
}


/* 1.3 Hero 區的內容容器 (確保文字和按鈕居中) */
.hero-content {
    position: relative;
    z-index: 3; /* 放在所有背景之上 */
    text-align: center;
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 大標題 ET's Portfolio (需替換為 PNG 圖片，或用純文字加 CSS 設定) */
.hero-title {
    margin-bottom: 50px;
    /* 建議在 Canva 匯出「ET's Portfolio」文字圖片 (透明PNG)，保留陰影 */
    background-image: url('img/ets-portfolio-text.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 150px; /* 根據圖片比例調整 */
    text-indent: -9999px; /* 隱藏文字，但 Google 搜得到 */
}

/* 按鈕容器 */
.nav-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap; /* 小螢幕自動換行 */
    gap: 15px; /* 按鈕間距 */
    width: 100%;
}

/* 按鈕基本樣式：呼應附圖的圓角與陰影 */
.nav-btn {
    background-color: var(--bg-btn);
    color: var(--text-main);
    padding: 12px 25px;
    border-radius: 25px;
    border: 1px solid var(--border-btn);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Varela Round', 'Noto Sans TC', sans-serif; 
    cursor: pointer;
    box-shadow: 0 7px 5px rgba(0,0,0,0.05); /* 輕微陰影 */
    display: flex;
    align-items: center;
    gap: 8px; /* 文字與符號間距 */
    white-space: nowrap; /* 確保文字不換行 */
}

/* 按鈕 Hover 效果：增加一點點愛笑的活力 */
.nav-btn:hover {
    transform: translateY(-2px); /* 輕微上浮 */
    box-shadow: 0 6px 12px rgba(249, 202, 210, 0.3); /* 粉色光暈 */
    border-color: #f6b5c0;
}

/* 按鈕內的符號樣式 (使用純文字或 SVG 圖示) */
.btn-icon { font-size: 1rem; color: var(--border-btn); }

/* =========================================
   Section 2: About Me (內文 + 信封圖片背景)
   ========================================= */
#about-me {
    padding: 100px 40px;
    background-color: var(--bg-color-about);
    /* 圖片來源：需替換為該區塊淡粉色圖片路徑 */
    background-image: url('img/about-me-bg.png');
    background-size: cover;
    background-position: center;
    flex-grow: 1; /* 讓中間這塊自動長高去填補空白，把 Footer 剛好推到螢幕最底端 */
}

.about-content {
    display: flex;
    flex-direction: column; /* 讓子元素（信封和文字）由上而下排列 */
    align-items: center;    /* 讓內容整體居中 */
    max-width: 800px;
    margin: auto;
}

/* 內文文字 (全面保留可選取的純文字) */
.about-text {
    flex: 1; /* 佔滿剩餘空間 */
    color: var(--text-main);
    text-align: left;
    padding-right: 30px; /* 給信封圖示一點空間 */
    font-size: 1rem;
    font-weight: 300;
}

/* 2.1 信封圖示調整：改為在文字上方 */
.about-envelope {
    width: 150px; 
    height: 120px; 
    margin: 0 auto 20px auto; /* 0 auto 讓它水平居中，20px 是與下方文字的間距 */
    background-image: url('img/envelope-with-paper.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; /* 圖片在容器內居中 */
    
    /* 取消原本的浮動設定 */
    float: none; 
}
/* 2.2 About Me 文字可愛化 */
.about-text p {
    font-family: 'Varela Round', 'Noto Sans TC', sans-serif; /* 套用圓潤字體 */
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 15px;
}

/* =========================================
   Section 3: Nice to Meet You (愛心圖片背景)
   ========================================= */
#nice-to-meet {
    padding: 100px 40px;
    background-color: var(--bg-color-footer);
    /* 圖片來源：需替換為底部區塊背景圖片路徑 */
    background-image: url('img/footer-background.png');
    background-size: cover;
    background-position: center;
    color: var(--text-heading);
    text-align: center;
}

/* 大標題 "Nice to meet you" */
#nice-to-meet h2 {
    font-size: 2.5rem;
    letter-spacing: 1px;
    margin-bottom: 100px;
    position: relative;
    z-index: 2; /* 放在愛心上層 */
}

/* 3.1 愛心圖示  */
.footer-heart {
    width: 250px;
    height: 200px;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%); /* 絕對居中 */
    z-index: 1;
    opacity: 0.7; /* 調整愛心的透明度 */
    /* 圖片來源：需替換為透明 PNG 愛心路徑 */
    background-image: url('img/heart-decorations.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
/* 3.2 Nice to meet you 圖片設定 */
.nice-to-meet-img {
    width: 100%;
    max-width: 600px; /* 根據圖片寬度調整 */
    height: 200px;    /* 根據圖片高度調整 */
    background-image: url('img/nice-to-meet-text.png'); /* 替換為你的圖片路徑 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    z-index: 5; /* 確保在愛心上面 */
    margin: 0 auto;
}
/* =========================================
   Footer (Email 聯絡資訊)
   ========================================= */
footer {
    padding: 20px 40px;
    background-color: var(--bg-color-footer);
    color: var(--text-main);
    text-align: center;
    font-size: 0.8rem;
    font-weight: 300;
}

/* =========================================
   右下角漂浮社群連結 (Social Floating Links)
   ========================================= */
.social-floating {
    position: fixed;
    right: 45px;
    bottom: 110px; /* 高度預留空間，避免擋到回到頂部按鈕 */
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 998;
}

.social-floating a {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #E58B9D; /* 品牌粉色 */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(229, 139, 157, 0.4);
    transition: all 0.3s ease;
}

.social-floating a:hover {
    transform: scale(1.1) translateY(-3px); /* 移入時放大並稍微上浮 */
    background-color: #d17586;
}

.social-floating svg {
    width: 20px;
    height: 20px;
}