/* =====================================================================
   Mobile-friendly layout (used by header2.html / footer2.html)
   Desktop: menu on the left, content on the right.
   Phones (under 700px wide): menu across the top, content below.
   ===================================================================== */

/* Page fits the screen, but never wider than the old 950px */
.responsive #container {
	width: auto;
	max-width: 950px;
}
.responsive #mainContent {
	padding: 0 15px;
}
.responsive img {
	max-width: 100%;
	height: auto;
}

/* Menu beside the content */
.layout {
	display: flex;
	align-items: flex-start;
	gap: 15px;
}
.layout .sidebar {
	flex: 0 0 auto;
}
.layout .content {
	flex: 1 1 auto;
	min-width: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}

/* Wide tables scroll sideways instead of breaking the page */
.layout .content table {
	max-width: 100%;
}

/* ---------- Phones ---------- */
@media (max-width: 700px) {
	.layout {
		flex-direction: column;
	}
	.layout .sidebar {
		width: 100%;
	}
	.layout .cnomenu {
		width: auto;
		margin: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
	}
	.layout .cnomenu li {
		margin: 0;
	}
	.layout .cnomenu a {
		padding: 8px 10px;   /* bigger tap targets */
	}
	.layout .content {
		font-size: 15px;
	}
	.pastmeetings {
		min-width: 0;
		width: 100%;
	}
	.pastmeetings th,
	.pastmeetings td {
		padding: 6px;
	}
}