/* ====================================
   RESPONSIVE OVERRIDES FOR CLEANR THEME
   Higher specificity to override 960.css
   ==================================== */

/* Base responsive container */
.container_16 {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

/* Tablet styles */
@media screen and (max-width: 1024px) {
	.container_16 {
		width: 95%;
		padding: 0 20px;
	}
	
	#content {
		padding-right: 30px;
	}
	
	#header h1 {
		font-size: 36px;
	}
}

/* Mobile styles - override 960.css grid system */
@media screen and (max-width: 768px) {
	/* Container adjustments */
	.container_16 {
		width: 100%;
		padding: 0 15px;
	}
	
	/* Override all grid classes to stack vertically */
	.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, 
	.grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 {
		width: 100%;
		float: none;
		margin-left: 0;
		margin-right: 0;
		display: block;
	}
	
	/* Specific layout adjustments */
	#content {
		width: 100%;
		padding-right: 0;
		border-right: none;
		margin-bottom: 30px;
	}
	
	#sidebar {
		width: 100%;
		padding-top: 20px;
		border-top: 1px solid #eee;
		margin-top: 20px;
	}
	
	/* Header responsive */
	#header {
		padding-top: 1.5em;
		padding-bottom: 1em;
		text-align: center;
	}
	
	#header h1 {
		font-size: 28px;
		float: none;
		text-align: center;
		margin-bottom: 10px;
	}
	
	#header span {
		display: block;
		margin-left: 0;
		top: 0;
		margin-top: 10px;
	}
	
	/* Mobile navigation */
	#access {
		float: none;
		text-align: center;
		margin: 20px 0;
	}
	
	#access ul {
		margin: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	#access li {
		float: none;
		margin: 5px;
	}
	
	#access a {
		padding: 8px 12px;
		font-size: 14px;
		line-height: 1.4;
	}
	
	/* Content responsive */
	#content .post {
		padding-top: 20px;
	}
	
	.post h1, .page h1 {
		font-size: 28px;
		line-height: 1.2;
	}
	
	.post h2, .page h2 {
		font-size: 24px;
	}
	
	/* Forms */
	#searchform #s {
		width: 100%;
		max-width: 300px;
		font-size: 16px;
	}
	
	/* Comments */
	ol.commentlist li {
		padding: 15px 10px;
	}
	
	ol.commentlist li div.comment-author {
		padding: 0;
	}
	
	ol.commentlist li div.vcard img.avatar {
		width: 32px;
		height: 32px;
		margin-right: 8px;
	}
	
	/* Comment form */
	#respond input[type="text"],
	#respond textarea {
		width: 100%;
		box-sizing: border-box;
		font-size: 16px;
	}
	
	#respond .comment-form-author label,
	#respond .comment-form-email label,
	#respond .comment-form-url label,
	#respond .comment-form-comment label {
		position: static;
		display: block;
		margin-bottom: 5px;
		background: none;
		border: none;
		font-weight: bold;
	}
	
	#respond input[type="text"],
	#respond textarea {
		text-indent: 10px;
	}
	
	/* Images */
	.entry img {
		max-width: 100%;
		height: auto;
	}
	
	img.alignleft,
	img.alignright {
		float: none;
		display: block;
		margin: 20px auto;
	}
	
	/* Navigation */
	.navigation {
		margin-top: 20px;
		padding-bottom: 30px;
	}
	
	.navigation .alignleft,
	.navigation .alignright {
		float: none;
		text-align: center;
		margin: 10px 0;
	}
	
	/* Footer */
	#footer p {
		margin: 20px 10px;
		font-size: 13px;
	}
}

/* Small mobile */
@media screen and (max-width: 480px) {
	.container_16 {
		padding: 0 10px;
	}
	
	#header h1 {
		font-size: 24px;
	}
	
	.post h1, .page h1 {
		font-size: 24px;
	}
	
	.post h2, .page h2 {
		font-size: 20px;
	}
	
	#access a {
		padding: 6px 8px;
		font-size: 12px;
	}
	
	ol.commentlist li {
		padding: 10px 5px;
	}
}