/*
 * Chez Matze — mobile layout for the Twenty Ten theme.
 *
 * Replaces Jetpack's old "Mobile Theme" (Minileven), which Jetpack removed;
 * since the Jetpack update on 2026-10-21 phones got the fixed 940px desktop
 * layout. Loaded by the "Mobile CSS" plugin (mobile-css-sekl), which also adds
 * the viewport meta tag.
 *
 * Everything sits inside one media query. The breakpoint is 979px, not 767px:
 * with the viewport tag a tablet in portrait (768-979px) would otherwise get
 * the 980px fixed layout clipped instead of scaled. Desktop windows of 980px
 * and more are untouched.
 *
 * Cascade: WordPress prints this file BEFORE the Customizer's "Additional CSS"
 * (<style id="wp-custom-css">), which sets e.g. "#branding img { margin-bottom:
 * 38px }". Rules that must beat it are written with higher specificity
 * (#header #branding img), never with !important.
 *
 * Consent elements (newsletter consent, comment-form consent) must stay
 * visible: nothing in this file may hide them.
 */
@media (max-width: 979px) {
	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	/* Twenty Ten inflates these on iOS (120-160%); keep sizes as designed here */
	#access, .entry-meta, .entry-utility, .navigation, .widget-area,
	#site-description, pre, code { -webkit-text-size-adjust: 100%; }
	body { padding: 0; }

	/* The fixed 940px frame becomes the screen width */
	#wrapper,
	#branding,
	#main,
	#colophon,
	#access .menu-header,
	#access div.menu {
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
	}
	#wrapper { margin: 0; padding: 0 14px; }

	/* Header: logo first, tagline under it (DOM order is title, tagline, logo) */
	#header { padding-top: 16px; }
	#branding { display: flex; flex-direction: column; }
	/* the plugin wraps the logo in a.chezmatze-logo-link (link to the homepage);
	   the order applies to whichever is the flex item, link or bare image */
	#header #branding > a.chezmatze-logo-link { order: 1; display: block; }
	#header #branding img {
		order: 1;
		float: none;
		display: block;
		width: 100%;
		max-width: 400px;	/* the logo file is 400px wide; no upscaling on tablets */
		height: auto;
		border: none;
		margin: 0;
	}
	#site-title { float: none; width: auto; margin: 0 0 4px; font-size: 22px; line-height: 1.3; }
	#site-description {
		order: 2;
		float: none;
		width: auto;
		margin: 8px 0 18px;	/* the space between logo/tagline and the menu bar */
		font-size: 14px;
	}

	/* Menu: a full-width bar; items wrap instead of running off the screen */
	/* flow-root: un-floated, the bar must still contain its floated menu items,
	   or it collapses to 0px and the black background disappears */
	#access { float: none; display: flow-root; width: auto; max-width: none; margin: 0 -14px; }
	#access .menu-header ul,
	#access div.menu ul { width: auto; padding: 0 6px; }
	#access a { padding: 0 9px; line-height: 44px; }
	/* submenus (none today) shown inline rather than as hover dropdowns */
	#access ul ul { display: block; position: static; width: auto; box-shadow: none; }
	#access ul ul a { width: auto; padding: 0 9px 0 24px; line-height: 40px; }

	/* One column: content first, then the sidebar */
	#main { padding-top: 18px; }
	#container { float: none; margin: 0; width: auto; }
	#content { margin: 0; width: auto; }
	#primary,
	#secondary {
		float: none;
		width: auto;
		margin: 32px 0 0;
		padding-top: 20px;
		border-top: 1px solid #e7e7e7;
		overflow: visible;
		font-size: 15px;
		line-height: 1.55;
	}

	/* Readable type */
	#content,
	#content input,
	#content textarea { font-size: 17px; line-height: 1.6; }
	#content .entry-title { font-size: 22px; line-height: 1.3; }
	#content h1, #content h2 { font-size: 21px; line-height: 1.35; }
	#content h3 { font-size: 18px; }
	.entry-meta, .entry-utility { font-size: 13px; }
	.entry-utility { line-height: 1.9; }	/* spaces out the small category/tag links */

	/* Media never wider than the screen */
	#content img,
	#content iframe,
	#content embed,
	#content object,
	#content video,
	.wp-caption,
	.wp-block-image,
	.wp-block-embed { max-width: 100% !important; }
	#content img,
	.wp-caption img { height: auto; }
	.wp-caption { width: auto !important; }
	#content .alignleft,
	#content .alignright,
	#content img.alignleft,
	#content img.alignright { float: none; display: block; margin: 0 auto 1em; }
	#content table { display: block; overflow-x: auto; }
	pre { white-space: pre-wrap; }

	/* Previous/next */
	.navigation .nav-previous,
	.navigation .nav-next { float: none; width: auto; margin-bottom: 8px; }

	/* Comments: no avatar gutter (the site shows no avatars), replies indented */
	#comments .commentlist li.comment { padding-left: 0; }
	#comments .commentlist .children { margin: 0 0 0 10px; padding-left: 14px; border-left: 3px solid #e7e7e7; }
	#comments .reply a { display: inline-block; padding: 10px 0; font-size: 14px; }
	#respond input[type="text"],
	#respond input[type="email"],
	#respond input[type="url"],
	#respond textarea { width: 100%; box-sizing: border-box; padding: 8px; font-size: 16px; }
	#respond .form-submit input { font-size: 16px; min-height: 44px; padding: 0 20px; }
	/* Comment consent (WP GDPR Compliance): visible, sized like a checkbox.
	   Its 98%-wide input renders as a ~68px square on desktop too. */
	#respond .wpgdprc-checkbox { align-items: flex-start; }
	#respond .wpgdprc-checkbox input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 auto; margin: 2px 10px 0 0; }
	#respond .wpgdprc-checkbox label { font-size: 14px; line-height: 1.5; }

	/* Simplified sidebar on phones and tablets: search first, then newsletter,
	   recent posts, Instagram and categories. Desktop keeps every widget. */
	#primary > ul.xoxo,
	#secondary > ul.xoxo { display: flex; flex-direction: column; gap: 28px; }
	#primary .widget-container,
	#secondary .widget-container { margin: 0; }
	#primary .widget-title,
	#secondary .widget-title { font-size: 17px; margin-bottom: 8px; }
	#main #primary ul,
	#main #secondary ul { padding-right: 0; }	/* Twenty Ten reserves 20px here */
	#primary li,
	#secondary li { margin-bottom: 4px; }
	#primary .widget_search { order: -1; }
	/* hidden on phones and tablets: archive (~190 months back to 2010), Meta
	   (login and feeds), the 45-tag cloud, and the old text widget with the
	   Facebook button and the pigeon-weather logo */
	#primary .widget_archive,
	#primary .widget_meta,
	#primary .widget_tag_cloud,
	#primary .widget_text,
	#secondary .widget_archive,
	#secondary .widget_meta,
	#secondary .widget_tag_cloud,
	#secondary .widget_text { display: none; }

	/* Sidebar form controls: 16px so iOS does not zoom on focus, 44px targets */
	#primary input,
	#primary textarea,
	#primary select,
	#primary button { font-size: 16px; line-height: 1.4; }
	#primary input[type="text"],
	#primary input[type="email"],
	#primary input[type="search"] { width: 100%; max-width: 100%; box-sizing: border-box; padding: 8px; }
	#primary input[type="submit"],
	#primary button { min-height: 44px; padding: 0 18px; }
	#primary .widget_search form > div { display: flex; gap: 8px; }
	#primary .widget_search #s { flex: 1 1 auto; width: auto; min-width: 0; }
	/* newsletter consent: visible, with a checkbox you can actually hit */
	#primary .gdpr-label { display: block; padding: 6px 0; line-height: 1.5; }
	#primary .gdpr-label input[type="checkbox"] { width: 20px; height: 20px; margin: 0 8px 0 0; vertical-align: -4px; }

	/* Categories as compact wrapping tags instead of an 18-line list.
	   #main prefix: Twenty Ten indents nested widget lists with
	   "#main .widget-area ul ul { margin-left: 1.3em }" */
	#main #primary .widget_categories ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
	#primary .widget_categories li { margin: 0; list-style: none; }
	#primary .widget_categories li a {
		display: inline-block;
		padding: 9px 12px;
		border: 1px solid #e3cbd4;
		border-radius: 18px;
		text-decoration: none;
		line-height: 1.2;
	}

	/* Footer */
	#site-info,
	#site-generator { float: none; width: auto; text-align: left; margin-bottom: 8px; }
}