/*
  Responsive overrides for the truq.ch static archive.

  Not part of the original theme. The archived DirectoryPress skin is a
  fixed-width 960px layout from ~2012 with no media queries of its own, so
  every rule here lives inside a media query and desktop rendering is
  untouched. The original site served a separate user-agent-switched mobile
  site (PPT_MOBILE) that the mirror never captured; this replaces it with a
  single responsive set of pages.

  Loaded last, after the theme's own stylesheets. !important is used freely
  because the rules it overrides are themselves highly specific or
  !important, and the archive is frozen — the theme CSS will not change
  underneath this file.
*/

/* ==========================================================================
   Phones and small tablets
   ========================================================================== */

@media (max-width: 820px) {

	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

	/* --- Break the fixed 960px shell ------------------------------------ */

	/* css.960.css pins the page open at 960px. */
	body { min-width: 0 !important; }

	.w_960 { width: auto !important; max-width: 100%; }

	#header .w_960,
	#menubar .w_960,
	#submenubar .w_960,
	#page .w_960,
	#footer .w_960 {
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;
	}

	/* Nothing should be able to push the page wider than the viewport. */
	#page, #content, .itembox, .itemboxinner, .page_content, .entry {
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	img, embed, object, iframe, video {
		max-width: 100%;
		height: auto;
	}

	/* --- Collapse the three-column body --------------------------------- */

	.left3cols, .middle3cols, .right3cols,
	.left2cols, .middle2cols, .right2cols,
	#footer .left3cols, #footer .middle3cols, #footer .right3cols,
	#footer .left2cols, #footer .middle2cols, #footer .right2cols {
		width: auto !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/*
	  Source order is sidebar-left, content, sidebar. On a phone the content
	  has to come first, so reorder rather than reflow in DOM order.
	*/
	#content { display: flex; flex-direction: column; }
	#content > .middle3cols { order: 1; }
	#content > .right3cols  { order: 2; }
	#content > .left3cols   { order: 3; }

	/* .floatl/.floatr/.left/.right are float:...!important in the framework. */
	#footer .left, #footer .right,
	.page_container .left, .page_container .right {
		float: none !important;
		display: block !important;
	}

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

	#logo, #logo.f_half {
		width: auto !important;
		float: none !important;
		display: block !important;
	}

	#banner {
		float: none !important;
		margin-top: 0;
	}

	/* --- Navigation ------------------------------------------------------ */

	#menubar .nav-bar {
		display: flex;
		flex-wrap: wrap;
	}

	.menu li {
		float: none !important;
		min-width: 0 !important;
		padding-left: 0;
		padding-right: 0;
	}

	/* line-height:50px in the theme already clears the 44px touch target. */
	.menu li a { padding: 0 14px; }

	/* --- Two-up blocks stack -------------------------------------------- */

	.f_half, .f1, .f2, .f3, .f4,
	.b_half_col, .b_fourth_col, .m_half_col {
		width: auto !important;
		float: none !important;
	}

	/* --- Homepage category tiles ----------------------------------------- */

	/*
	  These were 170-200px floats. A two-up grid keeps the tile feel of the
	  original and gives each category a real touch target.
	*/
	#homeCompactCategories .innerwrapper ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	#PPTHomePage #homeCompactCategories ul li,
	#PPTHomePage .full #homeCompactCategories ul li,
	#PPTHomePage .middle3cols #homeCompactCategories ul li,
	#PPTHomePage .middle2cols #homeCompactCategories ul li {
		width: auto !important;
		float: none !important;
		overflow: visible !important;
	}

	#homeCompactCategories .bit a.sm {
		display: inline-block;
		padding: 4px 0;
		margin-right: 12px;
	}

	/* --- Line-heights that only break once text wraps --------------------- */

	/*
	  The theme sets line-height:10px on these, which is under their font
	  size. At 960px the text always fit one line so it never showed; the
	  moment it wraps on a phone the lines overlap each other.
	*/
	#PPTHomePage #homeFeaturedList h3 { line-height: 1.3 !important; }
	.path, .path a { line-height: 1.4 !important; }

	/* --- Homepage carousel ----------------------------------------------- */

	/*
	  jCarouselLite animates `left` inside an overflow:hidden container, so
	  narrowing the container just shows fewer items — the script keeps
	  working. 68px is the two 34px prev/next buttons.
	*/
	#PPTHomePage #style3 { width: 100% !important; }
	#PPTHomePage #style3 .container { width: calc(100% - 68px) !important; }

	/* --- Forms ------------------------------------------------------------ */

	/* <16px text inputs make iOS zoom the whole page on focus. */
	input, select, textarea { font-size: 16px; }

	.left3cols input, .left3cols select, .left3cols textarea,
	.right3cols input, .right3cols select, .right3cols textarea,
	.left3cols .ppt_search_inputbox select,
	.right3cols .ppt_search_inputbox select,
	.left3cols .ppt_search_inputbox input,
	.right3cols .ppt_search_inputbox input {
		width: 100% !important;
		max-width: 100%;
		box-sizing: border-box;
	}

	.left3cols .pptnumslider, .left3cols .pptnumslider-bar,
	.right3cols .pptnumslider, .right3cols .pptnumslider-bar {
		width: 100% !important;
	}

	.middle3cols #comment {
		width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box;
	}

	/* Submit buttons and inline links need finger-sized hit areas. */
	.buttonbox a, .buttonbox input,
	input[type="submit"], button {
		min-height: 44px;
	}
}

/* ==========================================================================
   Narrow phones
   ========================================================================== */

@media (max-width: 560px) {

	/* One column of categories — two is too cramped below ~560px. */
	#homeCompactCategories .innerwrapper ul {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The theme's 20px gutters eat too much of a 360px screen. */
	.inner { padding: 12px; }
	.padding20 { padding: 12px; }

	#header .w_960,
	#menubar .w_960,
	#submenubar .w_960,
	#page .w_960,
	#footer .w_960 {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* Listing pages float the site thumbnail opposite the summary. */
	.page_container .right.frame,
	.page_container .left {
		float: none !important;
		margin-left: 0;
		margin-right: 0;
	}

	h1 { font-size: 24px; line-height: 28px; letter-spacing: 0; }
	h2 { font-size: 20px; line-height: 24px; }
}