/* ========================================
   RESPONSIVE STYLES
   Mobile-first responsive breakpoints
   ======================================== */

/* Extra large screens - 1429px+ */
@media only screen and (min-width: 1429px) {
	#quick-links .block .media-heading {
		font-size: 30px;
	}
	
	#quick-links .block i {
		font-size: 35px;
	}
}

/* Mobile Layout: 320px - 767px
   Gutters: 24px.
   Outer margins: 34px.
   cols: 1, 2, 3
   px: 68, 160, 252
   ========================================== */
@media only screen and (max-width: 767px) {
	.navbar-nav > li {
		display: inline;
		text-align: left;
	}
	
	.nav-main > li a {
		padding: 8px 1px 8px 1px;
		margin: 0;
	}
	
	section + section {
		margin-top: 25px;
	}
	
	#features .block {
		margin-bottom: 8px;
	}
	
	.block-heading {
		margin: 30px 0;
	}
	
	.block-heading h2,
	.products-heading h2 {
		font-size: 30px;
	}
	
	.products {
		margin-bottom: 20px;
	}
	
	/* Blog mobile adjustments */
	#blog .blog-zone > li {
		margin-bottom: 80px;
	}
	
	#blog .blog-zone > li:last-child {
		margin-bottom: 0;
	}
	
	#blog .blog-zone {
		margin-top: 50px;
	}
	
	#topic-header {
		text-align: left;
	}
}

/* Wide Mobile Layout: 480px - 767px
   Gutters: 24px.
   Outer margins: 22px.
   cols: 1, 2, 3, 4, 5
   px: 68, 160, 252, 344, 436
   ========================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	/* Add specific styles for wide mobile if needed */
}

/* Tablet Layout: 768px - 991px
   Gutters: 24px.
   Outer margins: 28px.
   cols: 1, 2, 3, 4, 5, 6, 7, 8
   px: 68, 160, 252, 344, 436, 528, 620, 712
   ========================================== */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	/* Add specific styles for tablet if needed */
}

/* Blog responsive styles - Max width: 1046px (65.375em) */
@media screen and (max-width: 65.375em) {
	#blog .blog-zone > li .cbp_tmtime span:last-child {
		font-size: 1.5em;
	}
}

/* Blog mobile timeline - Max width: 755px (47.2em) */
@media screen and (max-width: 47.2em) {
	#blog .blog-zone:before {
		display: none;
	}
	
	#blog .blog-zone > li .cbp_tmtime {
		width: 100%;
		position: relative;
		padding: 0 0 20px 0;
	}
	
	#blog .blog-zone > li .cbp_tmtime span {
		text-align: left;
	}
	
	#blog .blog-zone > li .blog-box {
		margin: 0 0 80px 0;
		padding: 1em;
		font-weight: 400;
		font-size: 95%;
	}
	
	#blog .blog-zone > li .blog-box:after {
		right: auto;
		left: 20px;
		border-right-color: transparent;
		border-bottom-color: #3594cb;
		top: -20px;
		display: none;
	}
	
	#blog .blog-zone > li:nth-child(odd) .blog-box:after {
		display: none;
	}
	
	#blog .blog-zone > li .blog-icon {
		position: relative;
		float: left;
		left: auto;
		margin: -55px 5px 0 0px;
	}
}
/* Mobile menu focus improvements */
@media only screen and (max-width: 767px) {
	.nav-main > li a:focus {
		outline-offset: 2px;
	}
	
	/* Make dropdown easier to tap on mobile */
	.dropdown-menu li a {
		padding: 12px 10px;
		min-height: 44px; /* WCAG touch target size */
	}
}

/* Footer responsive adjustments */
@media only screen and (max-width: 767px) {
	footer h2 {
		font-size: 24px;
		margin-bottom: 15px;
	}
	
	footer .footer-links li a {
		font-size: 18px;
	}
	
	footer .col-md-3 {
		margin-bottom: 30px;
	}
}