/* Tewan Song — การ์ดเพลงพับได้บนมือถือ
   ทำงานเฉพาะจอ <= 860px เท่านั้น บนเดสก์ท็อปการ์ดกางเต็มเหมือนเดิม
   ใส่คลาส tw-song ให้ Container ของแต่ละการ์ดใน Elementor */

.tw-song {
	--tw-song-brass: #C9A227;
	--tw-song-line: #2A3C4B;
	position: relative;
}

/* ปุ่มบวก-ลบมุมขวาของหัวการ์ด ซ่อนไว้บนเดสก์ท็อป */
.tw-song__toggle {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--tw-song-line);
	border-radius: 50%;
	color: var(--tw-song-brass);
	pointer-events: none;
	transition: transform .3s ease, border-color .3s ease;
}

.tw-song__toggle svg {
	display: block;
	width: 14px;
	height: 14px;
}

@media (max-width: 860px) {

	.tw-song-js .tw-song > :first-child {
		position: relative;
		padding-right: 44px;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.tw-song-js .tw-song > :first-child:focus-visible {
		outline: 2px solid var(--tw-song-brass);
		outline-offset: 4px;
	}

	.tw-song-js .tw-song__toggle {
		display: flex;
	}

	.tw-song-js .tw-song.is-open .tw-song__toggle {
		transform: rotate(180deg);
		border-color: var(--tw-song-brass);
	}

	/* เนื้อหาธรรมะ — พับเก็บไว้ก่อน
	   ใช้ max-height เพราะการ์ดมีวิดเจ็ตข้างในกี่ตัวก็ได้ ไม่ต้องแก้โครงสร้าง DOM */
	.tw-song-js .tw-song > :nth-child(2) {
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transition: max-height .42s ease, opacity .3s ease;
	}

	.tw-song-js .tw-song.is-open > :nth-child(2) {
		max-height: 2200px;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tw-song__toggle,
	.tw-song-js .tw-song > :nth-child(2) {
		transition: none;
	}
}

/* กันเนื้อหาหายตอนสั่งพิมพ์หน้าเว็บ */
@media print {
	.tw-song > :nth-child(2) {
		max-height: none !important;
		opacity: 1 !important;
	}

	.tw-song__toggle {
		display: none !important;
	}
}