/* ==========================================================================
   Site Footer widget  ·  custom-site-footer
   CSS source: design-git footer.html / .sfoot component
   Three bands on a navy ground: brand + policy | social + contact | copyright
   ========================================================================== */

/* --------------------------------------------------------------------------
   Root
   -------------------------------------------------------------------------- */

.custom-site-footer {
	background: var(--navy, #16418C);
	color: rgba(255, 255, 255, 0.78);
	font-family: inherit;
}

/* --------------------------------------------------------------------------
   Inner wrapper — horizontal padding via Elementor responsive control.
   Sections own their vertical padding; no top/bottom here.
   -------------------------------------------------------------------------- */

.custom-site-footer__inner {
	/* padding written by Elementor */
}

/* --------------------------------------------------------------------------
   Band 1 — brand + policy links  (.sfoot__grid)
   grid: 1.55fr 1fr 1fr 1fr  (brand col 1 · policy grid-column 2/-1)
   -------------------------------------------------------------------------- */

.custom-site-footer__top {
	display: grid;
	grid-template-columns: 1.55fr 1fr 1fr 1fr;
	gap: clamp(18px, calc(2.2 * var(--vwu, 14.4px)), 34px)
	     clamp(24px, calc(2.8 * var(--vwu, 14.4px)), 48px);
	align-items: start;
	padding-block: min(clamp(26px, calc(2.6 * var(--vwu, 14.4px)), 46px), calc(4.6 * var(--vhu, 9px)))
	               min(clamp(10px, calc(1 * var(--vwu, 14.4px)), 16px), calc(1.8 * var(--vhu, 9px)));
}

/* -- brand column -------------------------------------------------------- */

.custom-site-footer__brand {
	/* grid column 1 — no extra style needed */
}

.custom-site-footer__logo {
	display: inline-block;
	margin-bottom: 18px;
}

/* height-driven so width is always proportional */
.custom-site-footer__logo-img {
	display: block;
	height: clamp(58px, calc(5.2 * var(--vwu, 14.4px)), 76px);
	width: auto;
}

.custom-site-footer__org {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	color: #fff;
}

.custom-site-footer__addr {
	margin: 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.7);
}

/* -- policy links column ------------------------------------------------- */

.custom-site-footer__policy {
	grid-column: 2 / -1;
}

.custom-site-footer__policy ul {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 3;
	column-gap: clamp(24px, calc(2.8 * var(--vwu, 14.4px)), 48px);
}

.custom-site-footer__policy li {
	break-inside: avoid;
	margin-bottom: 11px;
}

.custom-site-footer__policy a,
.custom-site-footer__policy span {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color 0.2s;
}

.custom-site-footer__policy a:hover {
	color: #fff;
}

/* --------------------------------------------------------------------------
   Band 2 — "ติดตามเราได้ที่" + contact strip  (.sfoot__mid)
   Same 4-column grid: follow col 1 · strip grid-column 2/-1 (3 × 1fr)
   -------------------------------------------------------------------------- */

.custom-site-footer__mid {
	display: grid;
	grid-template-columns: 1.55fr 1fr 1fr 1fr;
	gap: clamp(16px, calc(2 * var(--vwu, 14.4px)), 30px)
	     clamp(24px, calc(2.8 * var(--vwu, 14.4px)), 48px);
	align-items: center;
	padding-block: min(clamp(14px, calc(1.5 * var(--vwu, 14.4px)), 20px), calc(2.4 * var(--vhu, 9px)));
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* -- social follow ------------------------------------------------------- */

.custom-site-footer__follow {
	/* grid column 1 */
}

.custom-site-footer__follow-lbl {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.62);
}

.custom-site-footer__social {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.custom-site-footer__social a {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
	text-decoration: none;
	transition: background 0.25s var(--ease, cubic-bezier(.2,.8,.2,1)),
	            border-color 0.25s var(--ease, cubic-bezier(.2,.8,.2,1)),
	            transform 0.25s var(--ease, cubic-bezier(.2,.8,.2,1));
}

.custom-site-footer__social a:hover {
	background: var(--cp-blue, #50A3D5);
	border-color: var(--cp-blue, #50A3D5);
	transform: translateY(-3px);
}

/* -- contact strip ------------------------------------------------------- */

.custom-site-footer__strip {
	grid-column: 2 / -1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(12px, calc(1.6 * var(--vwu, 14.4px)), 26px);
}

.custom-site-footer__cell {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 2px 0;
	text-decoration: none;
	color: inherit;
}

.custom-site-footer__cell-ico {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.78);
	transition: transform 0.3s var(--ease, cubic-bezier(.2,.8,.2,1));
}

.custom-site-footer__cell-ico svg {
	width: 32px;
	height: 32px;
}

.custom-site-footer__cell:hover .custom-site-footer__cell-ico {
	transform: scale(1.08);
}

.custom-site-footer__cell-body {
	display: grid;
	gap: 2px;
}

.custom-site-footer__cell-body small {
	display: block;
	font-size: 12px;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.62);
}

.custom-site-footer__cell-body b {
	display: block;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.2px;
	color: #fff;
	transition: color 0.2s;
}

.custom-site-footer__cell:hover .custom-site-footer__cell-body b {
	color: var(--cp-blue, #50A3D5);
}

/* --------------------------------------------------------------------------
   Band 3 — copyright  (.sfoot__legal)
   -------------------------------------------------------------------------- */

.custom-site-footer__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px clamp(20px, calc(2.4 * var(--vwu, 14.4px)), 40px);
	flex-wrap: wrap;
	padding: 12px 0 15px;
	border-top: 1px solid rgba(255, 255, 255, 0.13);
	font-size: 12px;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.5);
}

.custom-site-footer__legal > span {
	flex: 0 1 auto;
}

/* --------------------------------------------------------------------------
   ≤ 1200px — 2-column (brand full-width · policy + strip span all cols)
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.custom-site-footer__top,
	.custom-site-footer__mid {
		grid-template-columns: 1fr 1fr;
	}

	.custom-site-footer__brand {
		grid-column: span 2;
	}

	.custom-site-footer__policy,
	.custom-site-footer__strip {
		grid-column: 1 / -1;
	}

	.custom-site-footer__policy ul {
		columns: 2;
	}
}

/* --------------------------------------------------------------------------
   ≤ 1024px — mid single column, strip stacks vertically
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.custom-site-footer__mid {
		grid-template-columns: 1fr;
	}

	.custom-site-footer__strip {
		grid-column: 1 / -1;
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.custom-site-footer__cell {
		padding: 10px 0;
	}
}

/* --------------------------------------------------------------------------
   ≤ 640px — single column everything
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
	.custom-site-footer__top {
		grid-template-columns: 1fr;
	}

	.custom-site-footer__brand {
		grid-column: auto;
	}

	.custom-site-footer__policy {
		grid-column: auto;
	}

	.custom-site-footer__policy ul {
		columns: 1;
	}

	.custom-site-footer__legal {
		justify-content: flex-start;
	}
}