@charset "utf-8";
/* ==========================================
   ชุด CSS รวมสำหรับ เมนูเสียงพระธรรมเทศนา
   ========================================== */

/* --- กำหนดฟอนต์เริ่มต้นเฉพาะในกล่องเมนูเท่านั้น --- */
.dhamma-menu-container {
    font-family: 'thsarabunnew';
}

/* --- แถบหัวข้อด้านบน (Navbar) --- */
.dhamma-menu-container .navbar {
	background-color: #F2F2F2;
	color: #000000;
	display: flex;
	align-items: center;
	padding: 15px 20px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	position: relative;
	z-index: 10;
}

/* --- ปุ่มแฮมเบอร์เกอร์ (มีอนิเมชั่นแสดงตลอดเวลา) --- */
.dhamma-menu-container .hamburger-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    margin-right: 15px;
    padding: 0;
    box-sizing: border-box;
    
    /* เรียกใช้อนิเมชั่นให้ขยับตลอดเวลา วนลูปไม่มีวันสิ้นสุด */
    animation: pulse-button 2s infinite ease-in-out; 
    transition: all 0.2s ease;
}

/* เมื่อเอาเมาส์ไปชี้ (Hover) ปุ่มแฮมเบอร์เกอร์ */
.dhamma-menu-container .hamburger-btn:hover {
    animation-play-state: paused; /* หยุดขยับชั่วคราวตอนเมาส์ชี้เพื่อให้กดง่าย */
    transform: scale(1.15); /* ขยายใหญ่ขึ้นเล็กน้อย */
}

/* เปลี่ยนสีเส้นสามขีดเมื่อชี้เมาส์ */
.dhamma-menu-container .hamburger-btn:hover span {
    background-color: #c9af02; /* เปลี่ยนเป็นสีทองเข้มเพื่อตอบสนองการชี้ */
}

/* อนิเมชั่นเมื่อกดคลิกปุ่มแฮมเบอร์เกอร์ */
.dhamma-menu-container .hamburger-btn:active {
    transform: scale(0.9);
    opacity: 0.8;
}

.dhamma-menu-container .hamburger-btn span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #000000;
    border-radius: 3px;
    transition: all 0.2s ease;
}

/* --- คีย์เฟรมสร้างลูปอนิเมชั่นขยับเข้า-ออกเบาๆ ตลอดเวลา --- */
@keyframes pulse-button {
    0% {
        transform: scale(1);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.12); /* ขยายใหญ่ขึ้นขยับเข้าออกเพื่อบอกให้รู้ว่าคลิกได้ */
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.9;
    }
}

/* --- ชื่อเมนูข้างปุ่ม (ลิงก์หลัก) --- */
.dhamma-menu-container .menu-title-link {
    font-size: 1.8rem;
    color: #000000;
    text-decoration: none; 
    position: relative;
    padding-bottom: 2px;
    cursor: pointer;
}

/* อนิเมชั่นเส้นใต้เมื่อ Hover ที่ชื่อเมนูหลัก */
.dhamma-menu-container .menu-title-link::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #000000;
    transform-origin: bottom left;
    transition: transform 0.25s ease-out;
}

.dhamma-menu-container .menu-title-link:hover::after {
    transform: scaleX(1);
}

/* --- เมนูด้านข้าง (Sidebar Menu) --- */
.dhamma-menu-container .sidebar {
	position: fixed;
	top: 0;
	left: -100%; /* ซ่อนไว้ทางซ้ายเริ่มต้น */
	height: 100%;
	background-color: #F0D202;
	color: #000000;
	z-index: 999999;
	transition: left 0.4s cubic-bezier(0.1, 0.85, 0.25, 1);
	box-shadow: 5px 0 15px rgba(0,0,0,0.2);
	padding: 20px;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

/* ขนาดหน้าจอคอมพิวเตอร์ (หน้าจอกว้างกว่า 1024px) แสดงผลครึ่งจอ */
@media (min-width: 1025px) {
    .dhamma-menu-container .sidebar {
        width: 50%; 
    }
}

/* ขนาดหน้าจอมือถือและแท็บเล็ต (ต่ำกว่า 1024px) แสดงผล 80% ของจอ */
@media (max-width: 1024px) {
    .dhamma-menu-container .sidebar {
        width: 80%; 
    }
}

/* สั่งเปิดเมนูย่อยให้เลื่อนจากซ้ายไปขวาเมื่อ Checkbox ถูกเช็ก */
.dhamma-menu-container #menu-toggle:checked ~ .sidebar {
    left: 0;
}

/* ซ่อน Checkbox ลับ */
.dhamma-menu-container #menu-toggle {
    display: none;
}

/* --- ส่วนหัวภายในเมนูย่อย (ปุ่มปิดด้านบน) --- */
.dhamma-menu-container .sidebar-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.dhamma-menu-container .close-btn {
    background: none;
    border: none;
    font-size: 5rem;
    cursor: pointer;
    color: #000000;
    line-height: 1;
    padding: 0;
    transition: transform 0.2s ease;
}

.dhamma-menu-container .close-btn:hover {
    transform: scale(1.2) rotate(90deg);
}

/* --- รายการเมนูย่อย --- */
.dhamma-menu-container .menu-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px; /* ระยะห่างระหว่างแต่ละช่องเมนู */
    padding: 0;
    margin: 0;
}

.dhamma-menu-container .menu-list li {
    margin: 0;
    padding: 0;
}

/* ดีไซน์เมนูย่อยตอนยังไม่ Hover: แบ่งช่องชัดเจนและมีเส้นคั่น */
.dhamma-menu-container .menu-list li a {
    text-decoration: none;
    color: #000000;
    font-size: 1.8rem;
    display: block;
    padding: 15px 15px;
    background-color: rgba(255, 255, 255, 0.4); /* พื้นหลังขาวจางๆ แบ่งบล็อก */
    transition: all 0.3s ease;
    box-sizing: border-box;
    border-bottom-width: 2px;
    border-left-width: 0px;
    border-bottom-style: solid;
    border-left-style: solid;
    border-bottom-color: rgba(0, 0, 0, 0.15); /* เส้นขอบล่างคั่นช่อง */
    border-left-color: #0073b2;
}

/* อนิเมชั่นเมื่อ Hover (ชี้เมาส์) ที่เมนูย่อย */
.dhamma-menu-container .menu-list li a:hover {
    background-color: rgba(0, 0, 0, 0.08); /* สีพื้นหลังเข้มขึ้นเมื่อชี้ */
    padding-left: 25px; /* ดันข้อความไปทางขวา */
    font-weight: bold;
    border-bottom-width: 2px;
    border-left-width: 6px; /* เพิ่มแถบหนาด้านซ้าย */
    border-bottom-style: solid;
    border-left-style: solid;
    border-bottom-color: #000000;
    border-left-color: #0073b2;
}

/* --- พื้นหลังมืดเมื่อเปิดเมนู (Overlay) --- */
.dhamma-menu-container .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    z-index: 998;
    display: none;
}

.dhamma-menu-container #menu-toggle:checked ~ .overlay {
    display: block;
}