/*! msu-side-nav.css v1.0.2 — เมนูขวา (page parent / children-links) แบบใหม่ สำหรับธีม ed-school
 *  ใช้กับหน้า template "Sidebar right + child pages"
 *  (body.page-template-template-sidebar-right-childpages) เท่านั้น — หน้าอื่นไม่ถูกกระทบ
 *  ทำงานได้ด้วย CSS อย่างเดียว (จัด layout + สไตล์รายการ)
 *  msu-side-nav.js เพิ่ม: หัวข้อ+จำนวน, ช่องค้นหา, ปุ่มย่อ/ขยาย, แบ่งกลุ่ม, dropdown บนมือถือ
 */

.page-template-template-sidebar-right-childpages {
	--msu-side-w: 300px;            /* ความกว้างเมนูขวา (เดิม 25% ≈ 320px) */
	--msu-side-w-collapsed: 48px;   /* ความกว้างเมื่อย่อ */
	--msu-side-gap: 32px;           /* ช่องว่างระหว่างเนื้อหากับเมนู */
	--msu-side-top: 24px;           /* ระยะ sticky จากขอบบน (เพิ่มเท่าความสูง header ถ้า header เป็น sticky) */
	--msu-side-navy: #262B50;
	--msu-side-navy-deep: #151B54;
	--msu-side-gold: #FFCD22;
	--msu-side-ink: #1E2436;
	--msu-side-muted: #5F6882;
	--msu-side-line: #E2E6EF;
	--msu-side-surface: #F4F6FA;
	--msu-side-hover: #E9EDF6;
	--msu-side-white: #FFFFFF;
	--msu-side-font: var(--msu-font, 'Kanit', 'Mornamchi', system-ui, sans-serif);
}

/* ------------------------------------------------------------------ */
/* 1) Layout: เนื้อหา + เมนูขวา เป็น grid (เลิก float 75% / 25%)        */
/* ------------------------------------------------------------------ */
@media (min-width: 1025px) {
	body.page-template-template-sidebar-right-childpages .wh-content > .cbp-container {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) var(--msu-side-w);
		column-gap: var(--msu-side-gap);
		align-items: stretch; /* ให้คอลัมน์เมนูสูงเท่าเนื้อหา → sticky ทำงาน */
		transition: grid-template-columns .25s ease;
	}
	body.page-template-template-sidebar-right-childpages .wh-content > .cbp-container::before,
	body.page-template-template-sidebar-right-childpages .wh-content > .cbp-container::after {
		display: none; /* clearfix ของธีมจะกลายเป็น grid item ถ้าไม่ปิด */
	}
	/* !important เพราะ grid ของธีม (.fourth.one{width:25%} ฯลฯ) โหลดหลังไฟล์นี้และ specificity เท่ากัน */
	body.page-template-template-sidebar-right-childpages .wh-content-inner,
	body.page-template-template-sidebar-right-childpages .wh-sidebar {
		float: none !important;
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
	}
	body.page-template-template-sidebar-right-childpages .wh-sidebar {
		margin-top: 0 !important;     /* ธีมตั้ง -160px ให้กล่องลอยทับ title bar */
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	body.msu-side--collapsed.page-template-template-sidebar-right-childpages .wh-content > .cbp-container {
		grid-template-columns: minmax(0, 1fr) var(--msu-side-w-collapsed);
	}
}

/* (ตัวเลือก) บล็อกหลักสูตร [msu-fp] กว้างไม่เกิน 860px — ปล่อยให้เต็มคอลัมน์เนื้อหา */
.page-template-template-sidebar-right-childpages .wh-content-inner .msu-fp {
	max-width: none;
}

/* ------------------------------------------------------------------ */
/* 2) กล่องเมนู                                                         */
/* ------------------------------------------------------------------ */
.page-template-template-sidebar-right-childpages .wh-sidebar .children-links {
	box-shadow: none;
	border-top: 0;
	margin: 0;
	padding: 6px;
	background: var(--msu-side-surface);
	border-radius: 14px;
	font-family: var(--msu-side-font);
	position: sticky;
	top: var(--msu-side-top);
}
.msu-side [hidden] { display: none !important; }

/* reset ปุ่มของธีม (padding 21px 35px, uppercase, Montserrat ฯลฯ) */
.msu-side button {
	font-family: var(--msu-side-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	padding: 0;
	margin: 0;
	cursor: pointer;
}
.msu-side button:focus-visible,
.msu-side input:focus-visible,
.page-template-template-sidebar-right-childpages .wh-sidebar .children-links ul li > a:focus-visible {
	outline: 2px solid var(--msu-side-gold);
	outline-offset: 2px;
}

/* หัวข้อ + จำนวน + ปุ่มย่อ */
.msu-side__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 10px 10px 16px;
}
.msu-side__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--msu-side-navy-deep);
}
.msu-side__count {
	font-size: 12px;
	font-weight: 500;
	line-height: 20px;
	padding: 0 8px;
	border-radius: 999px;
	color: var(--msu-side-muted);
	background: var(--msu-side-white);
	border: 1px solid var(--msu-side-line);
	font-variant-numeric: tabular-nums;
}
.msu-side button.msu-side__collapse {
	margin-left: auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--msu-side-line);
	background: var(--msu-side-white);
	color: var(--msu-side-muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	transition: color .15s, border-color .15s;
}
.msu-side button.msu-side__collapse:hover {
	color: var(--msu-side-navy-deep);
	border-color: var(--msu-side-navy);
}
.msu-side svg { width: 16px; height: 16px; display: block; }

/* ช่องค้นหา */
.msu-side__search {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 10px 10px;
	padding: 0 12px;
	height: 38px;
	background: var(--msu-side-white);
	border: 1px solid var(--msu-side-line);
	border-radius: 8px;
	color: var(--msu-side-muted);
	transition: border-color .15s;
}
.msu-side__search:focus-within { border-color: var(--msu-side-navy); }
.msu-side__search input[type="search"],
.msu-side__search input[type="search"]:focus {
	flex: 1;
	min-width: 0;
	width: auto;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	outline: none;
	font-family: var(--msu-side-font);
	font-size: 14px;
	color: var(--msu-side-ink);
}
.msu-side__search input[type="search"]::placeholder { color: var(--msu-side-muted); opacity: .8; }
.msu-side__search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* พื้นที่เลื่อนของรายการ */
.msu-side__scroll {
	max-height: calc(100vh - var(--msu-side-top) - 150px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 10px 10px;
	scrollbar-width: thin;
	scrollbar-color: #C9D0DE transparent;
}
.msu-side__scroll::-webkit-scrollbar { width: 6px; }
.msu-side__scroll::-webkit-scrollbar-thumb { background: #C9D0DE; border-radius: 3px; }

/* กลุ่ม (คณะ / วิทยาลัย / สถาบัน) */
.msu-side__group + .msu-side__group { margin-top: 10px; }
.msu-side__group-label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 8px 4px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--msu-side-muted);
}
.msu-side__group-label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--msu-side-line);
}
.msu-side__group-n { font-variant-numeric: tabular-nums; order: 2; }
.msu-side__empty {
	margin: 0;
	padding: 10px 14px 12px;
	font-size: 13px;
	color: var(--msu-side-muted);
}

/* รายการ */
.page-template-template-sidebar-right-childpages .wh-sidebar .children-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.page-template-template-sidebar-right-childpages .wh-sidebar .children-links ul li {
	border: 0;
	margin: 0;
	padding: 0;
}
.page-template-template-sidebar-right-childpages .wh-sidebar .children-links ul li > a {
	display: block;
	position: relative;
	width: auto;
	margin: 2px 0;
	padding: 10px 14px 10px 18px;
	border-radius: 8px;
	font-family: var(--msu-side-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--msu-side-ink);
	text-decoration: none;
	transition: background-color .15s, color .15s;
}
.page-template-template-sidebar-right-childpages .wh-sidebar .children-links ul li > a::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 11px;
	bottom: 11px;
	width: 3px;
	border-radius: 3px;
	background: transparent;
	transition: background-color .15s;
}
.page-template-template-sidebar-right-childpages .wh-sidebar .children-links ul li > a:hover,
.page-template-template-sidebar-right-childpages .wh-sidebar .children-links ul li > a:focus-visible {
	background: var(--msu-side-hover);
	color: var(--msu-side-navy-deep);
}
.page-template-template-sidebar-right-childpages .wh-sidebar .children-links ul li > a:hover::before {
	background: var(--msu-side-gold);
}
.page-template-template-sidebar-right-childpages .wh-sidebar .children-links ul li.current_page_item > a,
.page-template-template-sidebar-right-childpages .wh-sidebar .children-links ul li.current_page_item > a:hover {
	background: var(--msu-side-navy);
	color: var(--msu-side-white);
	font-weight: 600;
}
.page-template-template-sidebar-right-childpages .wh-sidebar .children-links ul li.current_page_item > a::before {
	background: var(--msu-side-gold);
}

/* หน้าลูกระดับถัดไป (ถ้ามี) — คงกลไก .open ของธีม */
.page-template-template-sidebar-right-childpages .wh-sidebar .children-links ul li.page_item_has_children > a {
	padding-right: 34px;
}
.page-template-template-sidebar-right-childpages .wh-sidebar .children-links ul li.page_item_has_children > a i {
	position: absolute;
	right: 6px;
	top: 50%;
	font-size: 20px;
	padding: 4px;
	color: var(--msu-side-muted);
	transform: translateY(-50%) rotate(-90deg);
	transition: transform .15s;
}
.page-template-template-sidebar-right-childpages .wh-sidebar .children-links ul li.page_item_has_children.open > a i {
	transform: translateY(-50%) rotate(0);
}
.page-template-template-sidebar-right-childpages .wh-sidebar .children-links ul li.page_item_has_children.open > a {
	margin-bottom: 0;
}
.page-template-template-sidebar-right-childpages .wh-sidebar .children-links ul li .children {
	padding: 2px 0 4px 14px;
}
.page-template-template-sidebar-right-childpages .wh-sidebar .children-links ul li .children a {
	font-size: 13px;
	font-weight: 400;
	background: transparent;
}
.page-template-template-sidebar-right-childpages .wh-sidebar .children-links ul li .children .current_page_item > a,
.page-template-template-sidebar-right-childpages .wh-sidebar .children-links ul li .children a:hover {
	background: var(--msu-side-hover);
	color: var(--msu-side-navy-deep);
}

/* ------------------------------------------------------------------ */
/* 3) โหมดย่อ (desktop): เหลือแถบตั้ง 48px → เนื้อหากว้างเต็ม            */
/* ------------------------------------------------------------------ */
.msu-side button.msu-side__tab {
	display: none;
	width: var(--msu-side-w-collapsed);
	min-height: 220px;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 14px 0 16px;
	border-radius: 10px;
	background: var(--msu-side-navy);
	color: var(--msu-side-white);
	position: relative;
	transition: background-color .15s;
}
.msu-side button.msu-side__tab::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	bottom: 16px;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--msu-side-gold);
}
.msu-side button.msu-side__tab:hover { background: var(--msu-side-navy-deep); }
.msu-side__tab-icon { color: var(--msu-side-gold); }
.msu-side__tab-text {
	writing-mode: vertical-rl;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .02em;
	white-space: nowrap;
}
@media (min-width: 1025px) {
	body.msu-side--collapsed .wh-sidebar .children-links {
		background: transparent;
		padding: 0;
		border-radius: 0;
	}
	body.msu-side--collapsed .msu-side__head,
	body.msu-side--collapsed .msu-side__body { display: none; }
	body.msu-side--collapsed .msu-side button.msu-side__tab { display: flex; }
}

/* ------------------------------------------------------------------ */
/* 4) แท็บเล็ต/มือถือ (≤1024px): เมนูย้ายไปบนเนื้อหา เป็น dropdown        */
/* ------------------------------------------------------------------ */
.msu-side button.msu-side__current { display: none; }
@media (max-width: 1024px) {
	body.page-template-template-sidebar-right-childpages .wh-content > .cbp-container {
		display: flex !important;
		flex-direction: column;
	}
	body.page-template-template-sidebar-right-childpages .wh-content > .cbp-container::before,
	body.page-template-template-sidebar-right-childpages .wh-content > .cbp-container::after { display: none; }
	body.page-template-template-sidebar-right-childpages .wh-content-inner,
	body.page-template-template-sidebar-right-childpages .wh-sidebar {
		float: none !important;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
	}
	body.page-template-template-sidebar-right-childpages .wh-sidebar {
		order: -1;
		margin-top: 0 !important;
		padding-top: 8px;
		padding-bottom: 0;
	}
	body.page-template-template-sidebar-right-childpages .wh-sidebar .children-links {
		position: relative;
		z-index: 5;
		background: transparent;
		padding: 0;
		border-radius: 0;
	}
	.msu-side__head,
	.msu-side button.msu-side__tab { display: none; }
	.msu-side button.msu-side__current {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		padding: 10px 14px;
		border-radius: 10px;
		background: var(--msu-side-navy);
		color: var(--msu-side-white);
	}
	.msu-side__current-text { display: flex; flex-direction: column; min-width: 0; }
	.msu-side__current-label { font-size: 11px; font-weight: 400; opacity: .75; line-height: 1.3; }
	.msu-side__current-name { font-size: 15px; font-weight: 500; line-height: 1.35; }
	.msu-side__current-chevron { margin-left: auto; flex: none; color: var(--msu-side-gold); transition: transform .2s; }
	.msu-side.is-open .msu-side__current-chevron { transform: rotate(180deg); }
	.msu-side__body {
		display: none;
		margin-top: 8px;
		padding-top: 8px;
		background: var(--msu-side-surface);
		border: 1px solid var(--msu-side-line);
		border-radius: 12px;
		box-shadow: 0 12px 30px -12px rgba(21, 27, 84, .25);
	}
	.msu-side.is-open .msu-side__body { display: block; }
	.msu-side__scroll { max-height: 55vh; }
}

@media print {
	.page-template-template-sidebar-right-childpages .wh-sidebar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.msu-side *, .msu-side,
	.page-template-template-sidebar-right-childpages .wh-content > .cbp-container { transition: none !important; }
}