/*
	All style rules to make the current page look pretty on a cell phone screen belong here.
	
	We start with a CSS 'if' statement. It is supposed to return TRUE if the width of the screen is max-width pixels or less. The value of max-width must be hard-coded in, I cannot use CSS variables in CSS media queries.

	gallery of screen widths - I don't understand where many of these numbers come from
	
	0412 - width of my Android Pixel 8 in portrait mode
	1063 - largest number that will activate this stylesheet for my phone but not for Workstation 1
	1013 - largest number that will activate this stylesheet for my phone but not for Workstation 2
	1080 - width of my Workstation 1 vertical screen.
	1920 - width of my Workstation 1 vertical screen.
*/


@media only screen and (max-width: 1013px) {

	/* 14pt text is too big for a phone screen. */
	:root {--font-base-size-family: 12pt}

	/* Shrink the input fields, and the button, in the THS_login_area. */ 
	html body div#THS_login_area input:nth-child(1) {width: 6rem}
	html body div#THS_login_area input:nth-child(2) {width: 6rem}
	html body div#THS_login_area input:nth-child(3) {width: 2.25rem}
	
	/* Reset the left margin. No effect if UN_MODE is true. */
	html body div#THS_page_body {
		margin-left: calc(var(--sidebar-width) * -1 + var(--page-edge-left) * 8);
	}

	/* Make room for a hamburger menu in the top-right corner. */
	html body div#THS_page_body {
		margin-top: -0.5rem;
	}

	/* Hide <nav class='sidebar'><div class='THS_img_element'> elements. */
	html body div#THS_page_body
	nav.sidebar div.THS_img_element {
		display: none;
	}

	/* Shirink <nav> elements to one em tall and move them to the top of the page. Also make the navigation menu area wider. */
	html body div#THS_page_body nav.sidebar.navmenu {
		background-color: var(--color-background);
		/* border:           1px solid black; */
		/* display: none; */
		max-height:       1em;
		overflow-y:       hidden;
		position:         absolute;
		left:            94%;
		top:              2.5rem;
		width:           14rem;
	}

	/* Add a headline to <nav> elements. I plan to replace this with a 'hamburger'. */
	html body div#THS_page_body nav.sidebar.navmenu::before {
		content: "\2630";
		font-size: 200%;
		text-align: right;
	}

	/* Show <nav> elements at their full height when the mouse hovers over them. */
	html body div#THS_page_body nav.sidebar.navmenu:hover {
		border:     1px solid black;
		max-height: unset;
		margin-left: -12rem;
	}

	/* Hide <blockquote> background images. */
	html body div#THS_page_body blockquote:is(.me_me_me_me, .text_Wikipedia, .text_Yamaha) {
		background-image: none;
		min-height:       0;
		padding-left:     1.5em;
	}

	/* Revert the left-hand margins of <blockquote> code_view and wideblock variants. */
	html body div#THS_page_body blockquote:is(.code_view, .wideblock) {
		margin-left: unset;
	}

	/* Fix blockquote p.source elelments. */
	html body div#THS_page_body blockquote p.source {
		margin-bottom: 0.75rem;
		position:      unset;
	}

	/* Next set of rules: shrink headers a bit. */
	html body div#THS_page_body h1 {font-size: 150%}
	html body div#THS_page_body h2 {font-size: 120%}
	html body div#THS_page_body h3 {font-size: 100%}
	html body div#THS_page_body h4 {font-size:  90%}
	html body div#THS_page_body h4 {font-size:  84%}

	/* The next group of rules apply to fixing images added to the sidebar picture_strip, which are now too big. */
	/* Clear the opaque background, and pad the bottom of the image a little... */
	html body div#THS_page_body
	div.sidebar.picture_strip {
		background-color: transparent;
		left:             0;
		position:         relative;
		top:              unset;
		/*width:            var(--sidebar-width);*/
		/* z-index:          var(--z-index-in-front-1); */
		margin-bottom:    -7rem;
	}

	/* ...pad their bottoms... */
	html body div#THS_page_body
	div.sidebar.picture_strip div.THS_img_element + * {
		margin-top: 0.25rem;
	}

	/* ...shrink the images added to the sidebar picture_strip... */
	html body div#THS_page_body
	div.sidebar.picture_strip div.THS_img_element img {
		padding-bottom: 0.25rem;
		width: 5.5rem;
	}

	html body div#THS_page_body
	div.sidebar.picture_strip div.THS_img_element  div.caption {
		display: none;
	}

	/* ,,,and push to the right any text that follows them. */
	html body div#THS_page_body
	div.sidebar.picture_strip + :is(ol) {
		margin-left: 5.25rem;
	}

	/* I don't understand why this page now shows has horizontal scroll bar in narrow screen mobile_device mode. */
	body#image_browser .browser_thumbnails {
		width: 100%;
	}

	/* The following rules apply to specific pages. */
	body#music_player div#THS_page_body table.THS_info tbody {
		/* display: inline-flex; */
	}

	body#music_player div#THS_page_body table.THS_info tbody tr {
		/* display: block; */
	}

	body#music_player div#THS_page_body table.THS_info td:first-child {
		/*font-size: 120%;*/
		max-width:  10rem;
		white-space: unset;
		z-index: 1;
	}

	body#music_player div#THS_page_body table.THS_info audio{
		z-index: -1;
	}
}

/*
	Any style rules after this point will be active regardless of the outcome of the CSS 'if' statement.
*/