/* =========================================================
   Simple Footer Widgets — footer-widgets.css
   3 columns side-by-side on desktop AND mobile.
   Mobile footer total height fixed to 600px (each column
   scrolls internally if its content is taller than the space).
   ========================================================= */

.sfw-footer-wrap {
	display: flex;
	flex-direction: row;        /* always side by side, desktop + mobile */
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 24px;
	width: 100%;
	box-sizing: border-box;
	padding: 48px 40px;
	background: #181818;
	color: #e6e6e6;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.sfw-footer-wrap * {
	box-sizing: border-box;
}

.sfw-footer-col {
	flex: 1 1 0;
	min-width: 0;               /* allows flex children to shrink below content size */
}

.sfw-widget-title {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-bottom: 2px solid #3b82f6;
	padding-bottom: 8px;
}

.sfw-empty-notice {
	font-size: 12px;
	color: #888;
	font-style: italic;
	margin: 0;
}

/* ---------- Widget 1: About ---------- */
.sfw-about-inner {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sfw-about-logo {
	max-width: 120px;
	height: auto;
	margin-bottom: 4px;
}

.sfw-about-name {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
}

.sfw-about-desc {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: #bbbbbb;
}

/* ---------- Widget 2: Quick Links ---------- */
.sfw-quicklinks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sfw-quicklinks li a {
	color: #cfcfcf;
	text-decoration: none;
	font-size: 13.5px;
	transition: color 0.2s ease, padding-left 0.2s ease;
	display: inline-block;
}

.sfw-quicklinks li a:hover,
.sfw-quicklinks li a:focus {
	color: #3b82f6;
	padding-left: 4px;
}

/* ---------- Widget 3: Google Map ---------- */
.sfw-map-wrap {
	width: 100%;
	overflow: hidden;
	border-radius: 6px;
	background: #222;
}

.sfw-map-iframe {
	width: 100%;
	display: block;
	border: 0;
}

.sfw-map-placeholder {
	font-size: 12.5px;
	color: #888;
	margin: 0;
}

/* =========================================================
   MOBILE — columns stay side by side, whole footer capped
   at 600px tall. Each column scrolls independently if its
   widget content is taller than the available space.
   ========================================================= */
@media (max-width: 768px) {

	.sfw-footer-wrap {
		height: 600px;
		max-height: 600px;
		padding: 20px 12px;
		gap: 10px;
		overflow: hidden;         /* the 600px cap is enforced here */
		align-items: stretch;
	}

	.sfw-footer-col {
		height: 100%;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding-right: 4px;
	}

	/* thin scrollbars inside each mobile column */
	.sfw-footer-col::-webkit-scrollbar {
		width: 4px;
	}
	.sfw-footer-col::-webkit-scrollbar-thumb {
		background: #444;
		border-radius: 4px;
	}

	.sfw-widget-title {
		font-size: 12.5px;
		margin-bottom: 8px;
		padding-bottom: 6px;
	}

	.sfw-about-desc,
	.sfw-quicklinks li a,
	.sfw-map-placeholder {
		font-size: 11.5px;
	}

	.sfw-about-name {
		font-size: 12.5px;
	}

	.sfw-about-logo {
		max-width: 60px;
	}

	.sfw-quicklinks {
		gap: 6px;
	}

	.sfw-map-iframe {
		height: 140px !important;
	}
}

/* Extra-small phones: tighten further but keep 3 columns side by side */
@media (max-width: 380px) {
	.sfw-footer-wrap {
		padding: 14px 8px;
		gap: 6px;
	}
	.sfw-widget-title {
		font-size: 11px;
	}
	.sfw-about-desc,
	.sfw-quicklinks li a {
		font-size: 10.5px;
	}
}