/* Fillmore Street SF: responsive layer.
 * Loaded after style.css via includes/responsive.php. Every rule here is inside a media query,
 * so the desktop layout (>= 1121px wide) is untouched. */

/* ---- Fluid width instead of the fixed 1100px wrapper (tablets / small laptops) ---- */
@media (max-width: 1120px) {
	html, body { overflow-x: hidden; }
	#wrapper { width: 100%; max-width: 1100px; padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
	#header, #container, #footer { width: 100%; }
	#access { max-width: 100%; }
	img, iframe, video, embed, object { max-width: 100%; height: auto; }
}

/* ---- Tablet and phone: stack the columns ---- */
@media (max-width: 860px) {
	#header { padding: 18px 0 10px; margin-bottom: 20px; text-align: center; }
	#logo { float: none; display: block; margin: 0 auto; }
	#logo img { width: 150px; height: auto; }

	/* top navigation: wrap into a centered row */
	#access { float: none; width: 100%; margin: 12px 0 0; }
	#access ul { width: 100%; margin: 0; padding: 0; text-align: center; }
	#access ul li { float: none; display: inline-block; width: auto; margin: 0 2px; background-position: right center; }
	#access a { display: inline-block; padding: 6px 12px; font-size: 18px; }
	#access ul ul { display: none !important; }   /* hover dropdowns do not work on touch */

	/* columns -> one column. Page content first, section menu after it. */
	#container { display: flex; flex-direction: column; float: none; }
	.col1, .col2 { float: none; width: 100%; clear: none; }
	.col2 { order: 1; }
	.col1 { order: 2; margin-top: 28px; }
	body.home .col1 { order: 0; margin: 0 0 12px; }   /* home page: keep the quote on top */
	.col1-content { height: auto; padding: 0 0 12px; }
	.secondary-menu { max-height: 340px; overflow-y: auto; border-top: 1px solid #d9d2bd; padding-top: 14px; -webkit-overflow-scrolling: touch; }
	.secondary-menu ul li { margin-bottom: 10px; }
	.secondary-menu ul li a { display: inline-block; padding: 4px 0; }   /* bigger tap targets */

	/* content + merchant sidebar -> stacked */
	#content-container, #sidebar { float: none; width: 100%; }
	#content, #content-container #content { margin: 0; width: auto; }
	#sidebar { margin-top: 24px; }
	#sidebar .merchant-gallery-container, #sidebar #merchant-details, #sidebar .merchant-gallery { width: 100%; max-width: 100%; }
	#sidebar .merchant-logo img { max-width: 260px; }

	/* headings and text */
	.entry-title, #content h1, #content h2 { font-size: 30px; line-height: 1.15; }
	body, body input, body textarea { font-size: 17px; }
	.wp-block-gallery, .wp-block-image, .entry-content img { max-width: 100%; height: auto; }
	.wp-block-gallery.has-nested-images figure.wp-block-image { width: 100% !important; flex-basis: 100% !important; }

	/* footer */
	#footer { margin-top: 40px; text-align: center; }
	#footer .social-links { float: none; display: block; margin: 10px 0; }

	/* the New Fillmore feed block */
	.nf-feed img { flex-basis: 84px; width: 84px; height: 64px; }
}

/* ---- Overrides for rules in style.css that are more specific than the ones above ---- */
@media (max-width: 860px) {
	#container #content-container, .col2 #content-container, .col2-content #content-container { float: none !important; width: 100% !important; max-width: 100% !important; border-right: 0 !important; }
	#container #sidebar, .col2 #sidebar, .col2-content #sidebar { float: none !important; width: 100% !important; max-width: 100% !important; margin: 24px 0 0 !important; box-sizing: border-box; }
	#container #content, #content-container #content { margin: 0 !important; padding: 0 !important; width: auto !important; max-width: 100% !important; }
	#sidebar #merchant-details, #sidebar .merchant-gallery-container { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
	#sidebar .scrollpane, #content-container .scrollpane { width: auto !important; height: auto !important; overflow: visible !important; }
	.col1-content { width: auto !important; overflow: visible; }
	.col1 { border-right: 0 !important; }

	#footer-wrapper, #footer { width: 100% !important; max-width: 100% !important; float: none !important; box-sizing: border-box; }
	#footer p.copyright, #footer .social-links { float: none !important; width: auto !important; text-align: center; margin: 8px 0 !important; padding: 0 !important; }
	#footer .social-links li { display: inline-block; float: none !important; }
}

/* ---- Small phones ---- */
@media (max-width: 480px) {
	#wrapper { padding-left: 12px; padding-right: 12px; }
	#access a { padding: 6px 8px; font-size: 17px; }
	.entry-title, #content h1, #content h2 { font-size: 26px; }
}