/**
 * McGill Library Genesis - phones and tablets (BLOGS-22)
 *
 * functions.php loads this file after style.css with media="(max-width: 800px)",
 * and every rule below is also inside a max-width query. A window wider than
 * 800px never applies any of it, so the desktop design is exactly what
 * style.css draws and nothing here can change it.
 *
 * The layouts were designed and checked from a 320px phone upwards. Because the
 * theme's own stylesheet is written desktop-first, these rules correct it from
 * the top of its 800px breakpoint downwards: first what every small screen
 * needs, then phones (650px, the theme's own second breakpoint), then the
 * smallest phones (480px).
 *
 * Several selectors below look heavier than necessary, or carry !important.
 * That is only ever to match the style.css rule being corrected, which uses the
 * same selector or !important; the comments say which one.
 */

@media (max-width: 800px) {

	/* =Nothing wider than the screen
	----------------------------------------------- */

	/* The search box's hidden "Search" label sat just past the right edge of the
	   header and made every page scroll sideways on phones. */
	#branding #searchform .assistive-text {
		left: 0;
		top: 0;
	}

	/* Post, comment and widget images: never wider than their column, keep
	   their proportions (older posts carry fixed width/height attributes), and
	   count the theme's 6px frame inside the width rather than on top of it. */
	.entry-content img,
	.entry-summary img,
	.comment-content img,
	.widget img,
	.wp-caption img,
	#content .gallery img {
		box-sizing: border-box;
		height: auto;
		max-width: 100%;
	}
	.wp-caption {
		box-sizing: border-box;
		max-width: 100%;
	}
	/* Block-editor images are wrapped in a link that sizes itself to the
	   picture, so the picture's own max-width had nothing to hold on to. */
	.entry-content figure,
	.entry-content .wp-block-image > a,
	.entry-content .wp-block-image figure > a {
		max-width: 100%;
	}

	/* Videos and other embeds (style.css only limited embed and object). */
	.entry-content iframe,
	.entry-content video,
	.entry-content embed,
	.entry-content object,
	.comment-content iframe,
	.widget iframe,
	.widget video {
		max-width: 100%;
	}
	.entry-content video,
	.widget video {
		height: auto;
	}
	/* Pasted video players keep a video shape when they shrink. */
	.entry-content iframe[src*="youtube.com"],
	.entry-content iframe[src*="youtube-nocookie.com"],
	.entry-content iframe[src*="vimeo.com"],
	.entry-content iframe[src*="nfb.ca"],
	.entry-content iframe[src*="onf.ca"] {
		aspect-ratio: 16 / 9;
		height: auto;
		width: 100%;
	}

	/* Wide tables scroll inside their own box instead of widening the page. */
	.entry-content table,
	.comment-content table {
		display: block;
		overflow-x: auto;
	}

	/* Long web addresses and words wrap instead of running off the screen. */
	.entry-content,
	.entry-summary,
	.comment-content,
	.widget,
	.page-title,
	.entry-title,
	#site-title,
	#site-generator {
		overflow-wrap: break-word;
	}

	/* Search fields inside pages (404, no results, search widget). */
	.entry-content #s,
	.error404 #main #s,
	.widget_search #s {
		background-position: 6px 50%;
		box-sizing: border-box;
		font-size: 16px; /* anything smaller makes iPhones zoom the page */
		height: 44px;
		max-width: 100%;
	}

	/* Footer line had 75px of padding on each side. */
	#site-generator {
		padding: 20px 7.6% 1px;
	}


	/* =Menu button
	----------------------------------------------- */

	/* header.php prints the button hidden; it only appears here, and only once
	   the head script has added mlib-js, so without JavaScript the full menu
	   stays in place. */
	.mlib-js #access .menu-toggle {
		-webkit-appearance: none;
		appearance: none;
		background: transparent;
		border: 0;
		border-radius: 0;
		color: #eee;
		cursor: pointer;
		display: block;
		font-family: inherit;
		font-size: 14px;
		line-height: 3.333em; /* same height as the menu bar on desktop */
		margin: 0 0 0 calc(7.6% - 12px);
		min-height: 44px;
		padding: 0 12px;
	}
	.mlib-js #access .menu-toggle::before {
		background: currentColor;
		box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
		content: "";
		display: inline-block;
		height: 2px;
		margin-right: 10px;
		position: relative;
		top: -2px;
		vertical-align: middle;
		width: 16px;
	}
	.mlib-js #access .menu-toggle:hover,
	.mlib-js #access.menu-open .menu-toggle {
		color: #fff;
	}
	.mlib-js #access .menu-toggle ~ div {
		display: none;
	}
	.mlib-js #access.menu-open .menu-toggle ~ div {
		display: block;
	}
	/* The opened menu lists one link per row. A normal line height with padding
	   keeps each row 46px tall, like the bar, while long page names wrap onto a
	   second line neatly instead of doubling the row. */
	.mlib-js #access.menu-open li {
		float: none;
	}
	.mlib-js #access.menu-open li a {
		border-top: 1px solid rgba(255, 255, 255, 0.25);
		line-height: 20px;
		padding-bottom: 13px;
		padding-top: 13px;
	}
	.mlib-js #access.menu-open ul ul {
		box-shadow: none;
		display: block;
		float: none;
		position: static;
		width: auto;
	}
	.mlib-js #access.menu-open ul ul a {
		background: transparent;
		border-bottom: 0;
		color: #eee;
		padding-left: 2.4em;
		width: auto;
	}


	/* =Columns
	----------------------------------------------- */

	/* Network front page (Blog posts Aggregate Template): style.css fixes its
	   two columns at 69% and 18.8% with !important, which overrode the theme's
	   800px stacking rules, so phones got a 60px-wide blog list and tablets
	   lost the right-hand edge of the posts. The selectors and !important match
	   those style.css rules. */
	.page-template-post-agregate-php #primary,
	.left-sidebar.page-template-post-agregate-php #primary,
	.page-template-page-agregate-php #primary,
	.left-sidebar.page-template-page-agregate-php #primary {
		float: none;
		margin: 0 !important;
		width: auto !important;
	}
	.page-template-post-agregate-php #main #content,
	.left-sidebar.page-template-post-agregate-php #main #content,
	.left-sidebar.page-template-post-agregate-php #main #content.mu_activate {
		margin: 0 7.6% 20px;
		width: auto;
	}
	.page-template-post-agregate-php #secondary,
	.left-sidebar.page-template-post-agregate-php #secondary {
		float: none !important;
		margin: 0 7.6% 20px !important;
		width: auto !important;
	}

	/* Single posts on a left-sidebar blog: the later "sidebar support in
	   singular posts" rule in style.css pulled the column 26.4% off the right
	   edge of the screen. */
	.left-sidebar.singular #primary {
		margin: 0;
	}

	/* Archive, search and author headings reserved 130px of height. */
	.page-header {
		min-height: 0;
	}

	/* The sidebar's empty profile placeholder left a gap above the widgets. */
	#secondary > aside#meta:first-child {
		margin-bottom: 0;
	}

	/* Author page: the name and email sit beside the picture and wrap. */
	#mlibgenesisauthorbox #mlibgenesisauthorinfo {
		float: none;
		overflow: hidden;
		overflow-wrap: anywhere;
	}

	/* Sign-up page: 90% width plus 10% margins came to 110%. */
	.widecolumn .mu_register {
		margin: 0;
		width: auto;
	}
	.mu_register input[type="text"],
	.mu_register input[type="submit"] {
		box-sizing: border-box;
		max-width: 100%;
	}


	/* =Things to tap
	----------------------------------------------- */

	/* Sidebar lists: categories, archives, links, recent posts, blog list. */
	.widget ul li,
	.blogs-list aside ul li {
		margin-bottom: 0;
	}
	.widget ul li a {
		display: inline-block;
		padding: 12px 0;
	}
	.tagcloud a {
		display: inline-block;
		padding: 8px 2px;
	}
	.widget_calendar #wp-calendar tbody td a {
		display: block;
		padding: 12px 0;
	}
	.wp-calendar-nav a {
		display: inline-block;
		padding: 12px 0;
	}

	/* Older / newer posts and comment pages. */
	#nav-above a,
	#nav-below a,
	#comment-nav-above a,
	#comment-nav-below a {
		display: inline-block;
		padding: 9px 0;
	}

	/* Network front page list. */
	#recent-posts .blog-title {
		display: inline-block;
		padding: 12px 0 0;
	}
	#recent-posts .blog-entry-title {
		display: inline-block;
		padding: 4px 0 8px;
	}
	/* "MORE" keeps its small label; only the area that answers a tap grows. */
	.blog-entry-more::after {
		bottom: -14px;
		content: "";
		left: -12px;
		position: absolute;
		right: -12px;
		top: -14px;
	}

	a.comment-reply-link {
		line-height: 20px;
		padding: 12px 14px;
	}
	/* The Post Comment button was floated with a negative margin and hung half
	   outside the grey comment box on a phone; it now sits on its own row at the
	   right-hand side, inside the box. */
	#respond .form-submit {
		float: none;
		margin: 12px 0 0;
		text-align: right;
	}
	#respond input#submit {
		left: 0; /* was pushed 30px to the right */
		margin: 0;
		min-height: 44px;
	}

	/* Subscribe button widget: 30px tall became 44px, contents centred. */
	.rss_widget {
		height: 44px;
	}
	.rss_widget a {
		align-items: center;
		display: flex;
		height: 100%;
	}
	.rss_widget img,
	.rss_widget a span {
		float: none;
		margin-top: 0;
		margin-bottom: 0;
	}

	/* Keyboard focus is visible again (style.css removes every outline). */
	a:focus-visible,
	button:focus-visible,
	input:focus-visible,
	select:focus-visible,
	textarea:focus-visible {
		outline: 2px solid #1982d1;
		outline-offset: 2px;
	}
	#access a:focus-visible,
	#access .menu-toggle:focus-visible {
		outline-color: #fff;
		outline-offset: -4px;
	}
}


@media (max-width: 650px) {

	/* =Header
	----------------------------------------------- */

	/* The search box leaves the logo's corner and gets its own row under the
	   blog name, so the two no longer overlap. style.css pushed the title down
	   5.3em to make room for it up there. */
	#site-title {
		padding-top: 1.65625em;
	}
	#branding #searchform,
	#branding .with-image #searchform {
		margin: 4px 7.6% 16px;
		max-width: none;
		position: static;
		text-align: left;
	}
	#branding #s,
	#branding #s:focus,
	#branding .only-search #s,
	#branding .only-search #s:focus {
		background-position: 8px 50%;
		box-sizing: border-box;
		float: none;
		font-size: 16px; /* anything smaller makes iPhones zoom the page */
		height: 44px;
		padding-left: 32px;
		width: 100%;
	}
	/* Blogs that hide the header text kept 205px free in the menu bar for the
	   search box, which leaves nothing for the menu on a phone. */
	#branding .only-search + #access div {
		padding-right: 0;
	}
	/* On those blogs the search box was dark grey with dark text, designed to
	   sit over the header picture. On its own row against white it was hard to
	   read, so it uses the same light field as every other blog. */
	#branding .only-search #s {
		background-color: #fafafa;
		border-color: #ddd;
		color: #373737;
	}
	#branding .only-search #s:focus {
		background-color: #f9f9f9;
	}


	/* =Reading sizes
	----------------------------------------------- */

	/* style.css shrinks body text to 13px and enlarges single-post titles to
	   28px at this size; phones keep the desktop reading sizes instead. */
	body,
	input,
	textarea {
		font-size: 15px;
	}
	.singular .entry-title {
		font-size: 22px;
	}


	/* =Comment form
	----------------------------------------------- */

	/* Labels sit above the fields rather than laid over them, the fields use
	   the full width, and the text is 16px so iPhones don't zoom in. */
	#respond .comment-form-author label,
	#respond .comment-form-email label,
	#respond .comment-form-url label,
	#respond .comment-form-comment label {
		background: none;
		box-shadow: none;
		display: block;
		left: auto;
		min-width: 0;
		padding: 0;
		position: static;
		top: auto;
	}
	#respond input[type="text"],
	#respond textarea {
		box-sizing: border-box;
		font-size: 16px;
		text-indent: 0;
		width: 100%;
	}
	#respond input[type="text"] {
		height: 44px;
	}
	#respond .comment-form-author .required,
	#respond .comment-form-email .required {
		font-size: 15px;
		left: auto;
		position: static;
		top: auto;
	}
}


@media (max-width: 480px) {

	/* No grey side margins on small phones. style.css already does this, but
	   only through an old device-width query that narrow browser windows and
	   some Android phones in landscape never match. */
	body {
		padding: 0;
	}
	#page {
		margin-top: 0;
	}
	#branding {
		border-top: none;
	}

	/* Titles kept 76px clear for the 43px comment bubble. */
	.entry-title,
	.entry-header .entry-meta {
		padding-right: 52px;
	}

	/* Image posts split their details 35% / 65% side by side. */
	.indexed.format-image div.entry-meta,
	.indexed.format-image div.entry-meta + div.entry-meta {
		float: none;
		width: auto;
	}
}