/* --- CSS สำหรับ Navbar (ดีไซน์ "Floating Glossy UI" ขนาดใหญ่) --- */

/* * 1. Desktop Design (หน้าจอใหญ่) */

.navbar {
    position: fixed; /* ยึดไว้บนสุด */
    top: 20px; /* "ลอย" ห่างจากขอบบน */
    width: 100%;
    z-index: 1000;
    font-family: 'Kanit', sans-serif;
    /* Navbar จะโปร่งใส (ไม่มีพื้นหลัง) */
}

/* .nav-container เป็นแค่ตัวจัดกลาง (โปร่งใส) */
.nav-container {
    max-width: 1100px; /* ขยายให้กว้างขึ้นอีก */
    margin: 0 auto; /* จัดกลางจอ */
    
    /* ล้างค่าดีไซน์ทั้งหมด */
    background: transparent;
    backdrop-filter: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    
    display: flex;
    justify-content: center; /* จัดกลาง */
    align-items: center;
    position: relative;
    height: auto; /* ความสูงพอดีกับปุ่ม */
}

/* *** นี่คือหัวใจของดีไซน์ใหม่ *** */
/* * .nav-links (แถบ <ul>) จะเป็น "แถบ Glossy" ทั้งแผง */
.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    
    /* --- ดีไซน์ "Glossy UI" --- */
    background: linear-gradient(to bottom, #FFD6EB 0%, #FFB0D7 100%);
    border-radius: 50px; /* โค้งมนสุด */
    border: 1px solid rgba(255, 255, 255, 0.7);
    /* เงาแบบ "มืออาชีพ" (มีมิติ) */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1), 
                inset 0 1px 1px rgba(255,255,255,1), 
                inset 0 -1px 1px rgba(0,0,0,0.1);
    
    overflow: hidden; /* ซ่อนขอบปุ่ม */
}

.nav-links li {
    margin: 0;
    border-right: 1px solid rgba(172, 83, 126, 0.3); /* เส้นคั่น */
}

.nav-links li:last-child {
    border-right: none; /* อันสุดท้ายไม่ต้องมีเส้นคั่น */
}

.nav-links a {
    text-decoration: none;
    color: #362464; /* สีน้ำตาลเข้มอมม่วง (ชัดมาก) */
    font-weight: bold;
    
    /* --- *** เพิ่มขนาด (แก้ปัญหา "เล็กไป") *** --- */
    font-size: 20px; /* (เดิม 16px) */
    padding: 15px 35px; /* (เดิม 8px 25px) */
    
    display: block;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9); /* เงาสว่าง (คมชัด) */
    
    border-radius: 0; /* ปุ่มข้างในไม่มีขอบ (เดี๋ยวเราทำ Hover เอง) */
    
    transition: color 0.3s ease, text-shadow 0.3s ease, background-color 0.3s ease; 
    
    /* สำหรับเอฟเฟกต์ "ซากุระแตก" */
    position: relative; 
    overflow: hidden;   
}

/* --- เอฟเฟกต์ Hover (ถาวร) --- */
.nav-links a:hover {
    background: rgba(255, 255, 255, 0.5); /* พื้นหลังสว่างขึ้น (ดูเหมือน "กด") */
    text-shadow: 0 1px 1px rgba(255,255,255,0.9), 0 0 5px #FF8AE5, 0 0 10px #FF8AE5;
}

.nav-links a span {
    display: block; /* ขึ้นบรรทัดใหม่ */
    /* --- *** เพิ่มขนาด *** --- */
    font-size: 12px; /* (เดิม 10px) */
    color: #E53935; /* (สีแดง) */
    font-weight: 500;
    margin-top: -2px; /* ปรับระยะห่าง */
    transition: color 0.3s ease;
}

/* ซ่อนปุ่ม Hamburger บน Desktop */
.nav-toggle {
    display: none;
}


/* --- คลาสสำหรับ "ซากุระแตก" --- */
.petal-particle {
    position: absolute;
    width: 6px;
    height: 9px;
    background: #FFB6C1;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    z-index: 10;
    pointer-events: none;
    top: 50%;
    left: 50%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}


/* * 2. Mobile Design (หน้าจอมือถือ) */
@media (max-width: 920px) {

    /* Navbar: กลับไปติดขอบบนสุด */
    .navbar {
        top: 0;
        padding: 0; /* มือถือไม่ต้องมีช่องไฟ */
        background: rgba(255, 240, 245, 0.95); /* (สีชมพูทึบ) */
        backdrop-filter: blur(8px); /* เบลอ */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* (มีเงา) */
    }

    .nav-container {
        max-width: none;
        width: 100%;
        margin: 0;
        background: transparent;
        backdrop-filter: none;
        border-radius: 0; 
        border: none;
        box-shadow: none;
        height: 60px;
        justify-content: flex-end;
        padding: 0 20px;
        transition: none;
    }

    /* --- แสดงปุ่ม Hamburger --- */
    .nav-toggle {
        display: block;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 1001;
    }
    
    .hamburger {
        background: #362464; /* สีเดียวกับตัวอักษร */
        text-shadow: none;
        transition: background-color 0.3s ease;
    }
    .hamburger::before,
    .hamburger::after {
        background: #362464; /* สีเดียวกับตัวอักษร */
        text-shadow: none;
        transition: background-color 0.3s ease;
    }
    
    .hamburger {
        display: block;
        width: 25px;
        height: 3px;
        border-radius: 3px;
        position: relative;
    }
    .hamburger::before,
    .hamburger::after {
        content: '';
        position: absolute;
        width: 25px;
        height: 3px;
        border-radius: 3px;
        left: 0;
        transition: transform 0.3s ease, background-color 0.3s ease;
    }
    .hamburger::before { top: -8px; }
    .hamburger::after { bottom: -8px; }
    
    /* --- ซ่อนเมนู Desktop --- */
    .nav-links {
        display: none; /* ซ่อนไว้ก่อน */
        position: absolute;
        top: 60px; 
        left: 0;
        width: 100%;
        background: rgba(255, 240, 245, 0.98); 
        flex-direction: column; 
        padding: 10px 0;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);

        /* ล้างค่า Desktop */
        border-radius: 0;
        border: none;
        overflow: visible;
    }
    
    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        margin: 0;
        width: 100%;
        text-align: center;
        border-right: none; 
    }

    .nav-links a {
        display: block;
        padding: 15px 0;
        border-bottom: 1px solid rgba(172, 83, 126, 0.2);
        color: #362464; 
        text-shadow: none; 
        font-size: 16px; /* ขนาด */
        border-radius: 0; 
        position: relative; 
        overflow: hidden; 
    }

    .nav-links a span {
        display: inline;
        font-size: 12px;
        color: #E53935; 
        margin-top: 0;
        margin-left: 5px;
    }
}