/* ==========================================================
   Header 3 Rows Layout (Mockup style)
   For: index-2-3rows.html
   ========================================================== */

.header.header-3rows {
	--row1: 44px; /* social + phone/email */
	--row2: 44px; /* quick links + lang */
	--row3: 56px; /* main menu */
	--logoW: 280px; /* logo column width */
	background: #fff;
}

/* Prevent original spacing */
.header.header-3rows .header-top,
.header.header-3rows .main-navigation {
	display: none;
}

.header.header-3rows .header-3rows__grid {
	display: grid;
	grid-template-columns: var(--logoW) 1fr;
	grid-template-rows: var(--row1) var(--row2) var(--row3);
	align-items: stretch;
	column-gap: 24px;
	padding: 12px 0;
}

/* Logo spans 3 rows */
.header.header-3rows .header-3rows__logo {
	grid-column: 1;
	grid-row: 1 / span 3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header.header-3rows .header-3rows__logo img {
	max-height: calc(var(--row1) + var(--row2) + var(--row3) - 10px);
	width: auto;
	display: block;
}

/* Row 1 */
.header.header-3rows .header-3rows__top {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
}

.header.header-3rows .header-3rows__top .top-social a {
	margin-right: 8px;
	min-width: 36px;
	max-width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid gainsboro;
	line-height: 36px;
}

.header.header-3rows .header-3rows__top .top-social a:hover {
	background: whitesmoke;
}

.header.header-3rows .header-3rows__top .top-contact-info ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 16px;
}

.header.header-3rows .header-3rows__top .top-contact-info li {
	margin: 0;
}

/* Row 2 */
.header.header-3rows .header-3rows__mid {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
}

.header.header-3rows .header-3rows__quick {
	display: flex;
	align-items: center;
	gap: 18px;
}

.header.header-3rows .header-3rows__quick a {
	font-weight: 500;
	font-size: 15px;
	line-height: 1;
}

.header.header-3rows .header-3rows__quick a:hover,
.header.header-3rows .header-3rows__quick a:active,
.header.header-3rows .header-3rows__quick a:focus {
	color: var(--theme-color);
}

.header.header-3rows .header-3rows__mid .lang {
	display: flex;
	align-items: center;
}

/* Row 3 */
.header.header-3rows .header-3rows__nav {
	grid-column: 2;
	grid-row: 3;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.header.header-3rows .header-3rows__navbar {
	width: 100%;
	padding: 0;
}

.header.header-3rows .header-3rows__nav-inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
}

.header.header-3rows .navbar-nav {
	align-items: center;
	gap: 18px;
}

.header.header-3rows .navbar-nav .nav-link {
	padding-top: 0;
	padding-bottom: 0;
	line-height: var(--row3);
	white-space: nowrap;
}

.header.header-3rows .header-nav-right {
	margin-left: 18px;
}

.nice-select.open .list {
	z-index: 1000;
}

.top-contact-info ul li a {
	color: var(--color-dark);
}

.nice-select {
	color: var(--color-dark);
	font-weight: 500;
	background: none;
	border: none;
	padding: 0px 25px 0px 0px;
}

.nice-select .current::before {
	font-family: var(--fa-style-family, "Font Awesome 6 Pro");
	font-weight: var(--fa-style, 900);
	content: "\f0ac";
	margin-right: 5px;
}

.nice-select:after {
	border-color: var(--color-dark);
}

.top-social a {
	color: var(--color-dark);
}

.drawer-close {
	display: none;
}

.mobile-clone {
	display: none;
}

.navbar.header-3rows__navbar.fixed-top #main_nav {
	justify-content: center;
}

/* ===========================
   Mobile Offcanvas (CSS only)
   Uses existing #main_nav (.collapse)
   =========================== */
@media (max-width: 991px) {
	.mobile-clone {
		display: block;
	}

	/* ให้ header อยู่เหนือเนื้อหา */
	.header.header-3rows {
		position: relative;
		z-index: 999;
	}

	/* ---- OFFCANVAS PANEL (left) ---- */
	.header.header-3rows #main_nav.collapse,
	.header.header-3rows #main_nav.collapsing,
	.header.header-3rows #main_nav.collapse.show {
		position: fixed;
		top: 0;
		left: 0;

		height: 100vh;
		width: min(86vw, 380px);
		max-height: initial;

		background: #fff;
		overflow-y: auto; /* scroll ได้ */
		-webkit-overflow-scrolling: touch;

		padding: 18px 16px;
		box-shadow: 18px 0 50px rgba(0, 0, 0, 0.18);

		border-radius: 0px;

		/* อยู่เหนือ overlay */
		z-index: 10001;
	}

	/* สถานะปิด (default collapse) -> เลื่อนออกซ้าย */
	.header.header-3rows #main_nav.collapse {
		transform: translateX(-105%);
		transition: transform 0.25s ease;
		display: block; /* สำคัญ: ไม่ให้ bootstrap display:none ทำให้เรา transform ไม่ได้ */
		visibility: hidden;
		pointer-events: none;
	}

	/* ตอนกำลัง animate ของ bootstrap */
	.header.header-3rows #main_nav.collapsing {
		transform: translateX(-105%);
		transition: transform 0.25s ease;
		display: block;
		visibility: visible;
		pointer-events: auto;
	}

	/* สถานะเปิด */
	.header.header-3rows #main_nav.collapse.show {
		transform: translateX(0);
		visibility: visible;
		pointer-events: auto;
	}

	/* ---- OVERLAY (กดปิดไม่ได้ด้วย CSS ล้วน แต่ช่วยให้สวย/โฟกัส) ---- */
	.header.header-3rows::before {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.35);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s ease;
		z-index: 10000;
	}

	/* แสดง overlay เมื่อเมนูเปิด */
	.header.header-3rows:has(#main_nav.collapse.show)::before {
		/* opacity: 1; */
		pointer-events: none; /* ถ้าอยากให้กด overlay ปิด ต้องเพิ่ม JS/HTML */
	}

	/* ---- ปรับ list เมนูให้สวยใน drawer ---- */
	.header.header-3rows #main_nav .navbar-nav {
		margin-top: 12px;
		align-items: stretch;
		gap: 0;
	}
	.header.header-3rows #main_nav .navbar-nav .nav-item {
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	}
	.header.header-3rows #main_nav .navbar-nav .nav-link {
		padding: 14px 6px;
		line-height: 1.2;
		font-size: 16px;
		white-space: normal; /* กันล้น */
	}

	/* dropdown ให้เป็นแบบ list (ไม่ลอยทับ) */
	.header.header-3rows #main_nav .dropdown-menu {
		position: static !important;
		float: none;
		border: 0;
		box-shadow: none;
		padding: 0 0 10px 12px;
		margin: 0;
	}
	.header.header-3rows #main_nav .dropdown-menu .dropdown-item {
		padding: 10px 6px;
		font-size: 15px;
	}

	.drawer-close {
		position: absolute;
		top: 15px;
		right: 15px;
		margin-left: auto;
		width: 42px;
		height: 42px;
		border-radius: 12px;
		border: 1px solid rgba(0, 0, 0, 0.08);
		background: #fff;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		z-index: 1;
	}

	.header.header-3rows .header-3rows__nav-inner {
		padding: 12px 15px;
	}

	.navbar-toggler {
		display: flex;
		align-items: center;
		justify-content: center;

		min-width: 48px;
		max-width: 48px;
		height: 48px;

		padding: 0; /* สำคัญมาก */
		border-radius: 10px;
		border: 1px solid gainsboro;
	}

	/* wrapper ของ icon */
	.navbar-toggler-btn-icon {
		display: flex;
		align-items: center;
		justify-content: center;

		width: 100%;
		height: 100%;
	}

	/* ตัว icon จริง */
	.navbar-toggler-btn-icon i {
		display: block; /* ตัด baseline */
		line-height: 1; /* แก้ icon ลอย */
		font-size: 20px; /* คุมขนาดให้สมดุล */
	}

	/* .nice-select {
		position: fixed;
		z-index: 1000;
		right: 65px;
		top: 22px;
		background: white;
	} */

	.header.header-3rows .header-3rows__grid {
		display: block;
		height: 84px;
	}

	.header.header-3rows .header-3rows__logo,
	.header.header-3rows .header-3rows__top,
	.header.header-3rows .header-3rows__mid {
		display: none;
	}

	.header.header-3rows .mobile-clone .header-3rows__logo,
	.header.header-3rows .mobile-clone .header-3rows__top,
	.header.header-3rows .mobile-clone .header-3rows__mid {
		display: block;
	}

	.mobile-clone .lang {
		display: none !important;
	}

	.mobile-navtop-logo {
		width: 100%;
	}

	.mobile-navtop-logo .header-3rows__logo img {
		height: 60px;
	}

	.mobile-clone.mobile-nav-logo .header-3rows__logo img {
		margin: auto;
		height: 100px;
	}

	.mobile-clone.mobile-nav-submenu .header-3rows__quick {
		align-items: stretch;
		gap: 0;
		flex-direction: column;
	}

	.mobile-clone.mobile-nav-submenu .header-3rows__quick a {
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
		padding: 14px 6px;
		line-height: 1.2;
		font-size: 16px;
		white-space: normal;
		font-weight: 700;
	}

	.mobile-clone.mobile-nav-submenu .top-social {
		display: block;
		text-align: center;
		margin-top: 15px;
	}

	.mobile-clone.mobile-nav-submenu .top-contact-info {
		background: whitesmoke;
		border-radius: 10px;
		padding: 10px;
		margin-top: 15px;
	}

	.mobile-clone.mobile-nav-submenu .top-contact-info ul {
		display: block !important;
	}

	.mobile-clone.mobile-nav-submenu .top-contact-info ul li {
		display: block;
		text-align: center;
		margin-top: 10px;
	}

	.mobile-clone.mobile-nav-submenu .top-contact-info ul li:first-child {
		margin-top: 0px;
	}
}