/* ============================================
   ZnoteAAC — Responsive Breakpoints
   ============================================ */

/* Large desktops — tighten up */
@media screen and (max-width: 1300px) {
	.main {
		width: 1100px;
	}
	.banner {
		height: 210px;
	}
}

/* Standard desktops */
@media screen and (max-width: 1200px) {
	.main {
		width: 95%;
	}
	.banner {
		height: 190px;
	}
	.rightPane {
		width: 280px;
	}
}

/* Small desktops / large tablets */
@media screen and (max-width: 1024px) {
	nav .container > div > ul > li > a {
		padding: 14px 16px;
		font-size: 12px;
	}
	.banner {
		height: 170px;
	}
	.rightPane {
		width: 260px;
	}
}

/* Tablets — stack layout */
@media screen and (max-width: 900px) {
	.feedContainer {
		flex-direction: column;
	}
	.leftPane {
		width: 100%;
	}
	.rightPane {
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.rightPane > * {
		flex: 1;
		min-width: 260px;
	}
	.banner {
		height: 160px;
	}
	nav .container > div.pull-right {
		display: none;
	}
	.mobile-menu-toggle {
		display: block;
	}
}

/* Small tablets / large phones */
@media screen and (max-width: 768px) {
	.main {
		padding: 12px 0;
	}
	nav {
		border-radius: 10px;
	}
	nav .container {
		flex-wrap: wrap;
		padding: 8px 12px;
	}
	nav .container > div.pull-left {
		width: 100%;
		display: none;
	}
	nav .container > div.pull-left.show {
		display: block;
	}
	nav .container > div.pull-left > ul {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	nav .container > div > ul > li {
		display: block;
	}
	nav .container > div > ul > li > a {
		padding: 12px 16px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	}
	nav .container > div > ul > li > ul {
		position: static;
		box-shadow: none;
		border: none;
		border-radius: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0.15);
		animation: none;
	}
	nav .container > div > ul > li > ul > li > a {
		padding-left: 32px;
	}
	.banner {
		height: 140px;
		border-radius: 10px;
		margin-top: 12px;
	}
	.rightPane {
		flex-direction: column;
	}
	.rightPane > * {
		min-width: 100%;
	}
	.topPane {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}
	.topPane > .well {
		flex: 1;
		min-width: 0;
	}
	.searchForm {
		width: 100%;
	}
	footer {
		padding: 16px !important;
	}
	footer .pull-left,
	footer .pull-right {
		float: none;
		text-align: center;
	}
	footer .pull-right {
		margin-top: 8px;
	}
	/* Tables scroll horizontally */
	table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	/* Alert boxes full width */
	.alert-box {
		max-width: 100%;
	}
	/* Forum textareas */
	textarea,
	.forumReply {
		width: 100% !important;
		max-width: 100% !important;
	}
	/* Forum avatar cells */
	td.avatar {
		width: 100px;
		padding: var(--space-sm);
	}
	/* Shop nav */
	#categoryNavigator {
		gap: 4px;
	}
	#categoryNavigator .nav_link {
		padding: 6px 12px;
		font-size: 11px;
	}
}

/* Mobile phones */
@media screen and (max-width: 576px) {
	body {
		font-size: 13px;
	}
	.main {
		width: 100%;
		padding: 8px 0;
	}
	nav {
		border-radius: 0;
		margin: 0 -2%;
		width: 104%;
	}
	.banner {
		height: 100px;
		border-radius: 8px;
	}
	.feedContainer {
		gap: 12px;
	}
	h1 {
		font-size: 20px;
		margin-bottom: 16px;
	}
	h2 {
		font-size: 17px;
	}
	td, th {
		padding: 6px 8px;
		font-size: 12px;
	}
	.header {
		padding: 12px 14px;
		font-size: 13px;
	}
	ul.linkbuttons li {
		width: 100%;
		margin-right: 0 !important;
	}
	.smedia {
		font-size: 1.5em;
	}
	.smedia a {
		width: 38px;
		height: 38px;
	}
	select,
	input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
		height: 40px;
		font-size: 16px; /* Prevents iOS zoom */
	}
	input[type="submit"],
	button[type="submit"],
	.submitButton {
		height: 44px;
		font-size: 14px;
	}
}