/* Phones and small tablets (the desktop layout is a fixed 926px; base.css is untouched). Loaded by the new site's
   template with <meta name="viewport">; everything here only applies below 960px. */
@media screen and (max-width: 960px) {
	body { margin-bottom: 0; }
	/* a slim top bar: small logo on the left, a Menu button on the right that opens the links */
	#container { width: auto; padding: 66px 10px 0; }
	#subheader { width: 100%; left: 0; height: 56px; }
	#header-logo { left: 10px; top: 4px; margin-left: 0; width: 62px; height: 48px; background-size: contain; }
	#nav-toggle { display: block; position: absolute; right: 10px; top: 11px; padding: 6px 12px; font: bold 14px Verdana, Arial, sans-serif;
		color: #4d7f34; background: #fff; border: 1px solid #cfd6dd; border-radius: 6px; cursor: pointer; }
	#submenu { display: none; position: absolute; top: 56px; left: 10px; right: 10px; margin: 0; height: auto; padding: 4px 0;
		background: #fff; border: 1px solid #e3e6ea; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,0.12); z-index: 20; }
	#submenu.open { display: block; }
	#submenu ul { display: block; }
	#submenu li { display: block; margin: 0; }
	#submenu li a { display: block; padding: 11px 16px; height: auto; font-size: 15px; border-bottom: 1px solid #f0f2f4; }
	#submenu li:last-child a { border-bottom: 0; }
	#submenu li a:hover, #submenu li a.currpage { border-bottom: 1px solid #f0f2f4; background: #f4f8f1; }
	/* Home first, then Download as the main button */
	#submenu li.nav-home { display: block; }
	#submenu li.nav-download a { margin: 6px 12px 8px; padding: 10px 16px; text-align: center; color: #fff; background: #2e8b3e;
		border: 0; border-radius: 6px; }
	#submenu li.nav-download a:hover, #submenu li.nav-download a.currpage { background: #25732f; border: 0; }

	#content-top, #content-bottom { display: none; }
	#content { background: #fff; border: 1px solid #e3e6ea; border-radius: 6px; padding: 16px 14px; }
	#content img { max-width: 100%; height: auto; }
	/* thumbnails sized with an inline height (Features) keep their shape when they have to shrink */
	#content img[style*="height"] { height: auto !important; width: auto; max-height: 125px; }
	#features #content table, #features #content tbody, #features #content tr { display: block; }
	#features #content td { display: inline-block; vertical-align: middle; padding: 6px !important; }
	/* embedded videos and fixed-width blocks shrink to the screen (videos keep 16:9) */
	#content iframe { max-width: 100%; height: auto; aspect-ratio: 16 / 9; }
	#content div[style*="width"] { max-width: 100%; }
	#content table { max-width: 100%; }
	#content input[type=text], #content textarea, #content select { max-width: 100%; box-sizing: border-box; }
	h1 { font-size: 22px; line-height: 30px; }
	h2 { font-size: 18px; line-height: 26px; }
	center { display: block; }

	/* two-column pages stack */
	#home #content-left, #download #content-left, #download #content-right, #upgrade #content-left, #upgrade #content-right {
		float: none; width: auto; margin: 0 0 1em; }
	#home #content-left { text-align: center; }
	#home #content-left img { width: 100%; max-width: 360px; }
	/* the home page's three picture columns merge into one even two-column grid: the page body becomes a grid where
	   everything else spans both columns and the columns' pictures flow into it */
	#home #content { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; align-items: center; justify-items: center; }
	#home #content > * { grid-column: 1 / -1; justify-self: stretch; }
	#home #content > .content-float { display: contents; }
	#home .content-float > a, #home .content-float > img { grid-column: auto; justify-self: center; }
	#home .content-float br, #home .content-float h4, #home .content-float > div[style] { display: none; }
	#home .content-float map { position: absolute; }
	#home .content-float img { max-height: 150px; width: auto; }

	/* wide tables scroll sideways instead of widening the page */
	#products #comparison, #upgrade table#feature, #upgrade #comparison, .how-to table, #license {
		display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	#upgrade table#feature { margin: 0; border-spacing: 0.5em; }
	.how-to td { display: block; width: auto; padding: 0 0 1.5em; }
	.gallery td { display: inline-block; vertical-align: top; }
	.gallery div.column { width: auto; }
	#contact #id_subject, #contact #id_message, #bug #id_error, #bug #id_details { width: 100%; }

	#footer { padding: 1em 0 0; text-align: center; }
	#footer-menu, #footer-copyright, #footer-language { float: none; padding: 0.4em 0; }
	#footer-language { padding-bottom: 1.5em; }
}

/* the home page's "Collage ideas" cards (all widths; the grid itself is in guides.css) */
.home-ideas h2 { text-align: center; margin-bottom: 0; }
.home-ideas .ideas { grid-template-columns: repeat(5, 1fr); }
.home-ideas .ideas .cap { font-weight: bold; color: #2058a1; font-size: 13px; }
@media screen and (max-width: 960px) { .home-ideas .ideas { grid-template-columns: repeat(2, 1fr); } }

/* the menu button and the menu's Home item are for phones only */
@media (min-width: 961px) { #nav-toggle, #submenu li.nav-home { display: none; } }
/* the Translate link: an icon and the visitor's language (all widths) */
#footer-language #translate-link { display: inline-flex; align-items: center; gap: 6px; color: #666; font-size: 12px; padding: 4px 10px;
	border: 1px solid #d6dade; border-radius: 999px; background: #fff; text-decoration: none; }
#footer-language #translate-link:hover { color: #2058a1; border-color: #9db5d3; }
/* the Help page's manual and guides lists (all widths) */
table.help-index { width: 100%; margin: 1.5em 0 0.5em; }
table.help-index td { vertical-align: top; width: 50%; padding-right: 1.5em; }
@media screen and (max-width: 960px) { table.help-index td { display: block; width: auto; padding: 0 0 1em; } }