/*
 * Tourdance — mobile layout.
 * Loaded only on screens up to 980px wide (the <link> carries the same media query) and printed
 * after rtl.css, so the desktop layout is untouched. The parent templates (hebrew.php, header.php,
 * footer.php, russian.php) hard-code inline styles and width attributes; !important is used only
 * where a rule has to beat one of those.
 */
@media screen and (max-width: 980px) {

	/* =Frame
	-------------------------------------------------------------- */
	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}
	#wrapper {
		margin-top: 0;
		padding: 0 12px;
		width: auto;
	}
	#main,
	#branding,
	#access,
	#access .menu-header,
	div.menu,
	#site-title {
		width: auto;
	}
	#colophon {
		width: auto !important; /* hebrew.php: inline width:980px */
	}

	/* =Header
	-------------------------------------------------------------- */
	#header {
		padding-top: 10px;
	}
	#site-title {
		float: none;
		font-size: 24px;
		margin-bottom: 8px;
	}
	#branding table {
		width: 100%;
	}
	#branding td {
		width: auto;
	}
	#branding > img {
		float: none;
		width: 100%;
		height: auto;
	}
	/* hebrew.php title row: EN flag | quick links | site name */
	.page-template-hebrew #branding td {
		padding: 0 0 6px !important;
	}
	.page-template-hebrew #branding td span {
		font-size: 26px !important;
	}

	/* =Menu
	-------------------------------------------------------------- */
	#access {
		float: none;
		margin: 0;
		padding: 4px 0;
	}
	/* hebrew.php / russian.php: the menu is a one-row table */
	#access table,
	#access tbody {
		display: block;
		width: 100%;
	}
	#access tr {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	#access td {
		display: block;
		padding: 0 !important;
	}
	#access td[width] {
		display: none; /* empty spacer cell */
	}
	/* header.php: wp_nav_menu */
	#access .menu-header,
	#access div.menu {
		margin: 0;
	}
	#access .menu-header ul.menu,
	#access div.menu > ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	#access .menu-header li,
	#access div.menu li {
		float: none;
	}
	#access ul ul {
		display: none !important; /* hover sub-menus don't work on touch; parents link to their pages */
	}
	#access a {
		font-size: 15px;
		line-height: 22px;
		padding: 8px 9px;
	}

	/* =Layout: default template (English pages, posts, archives, russian.php)
	-------------------------------------------------------------- */
	#main {
		padding-top: 18px;
	}
	#container {
		background-image: none;
		float: none;
		margin: 0;
	}
	#content {
		margin: 0 0 24px;
	}
	.one-column #content,
	.single-attachment #content {
		padding: 0;
		width: auto;
	}
	#primary,
	#secondary {
		float: none;
		overflow: visible;
		width: auto;
	}

	/* =Layout: hebrew.php (content | spacer | sidebar table)
	-------------------------------------------------------------- */
	#container-hebrew {
		background-image: none;
		float: none;
		margin: 0;
	}
	#container-hebrew > table,
	#container-hebrew > table > tbody,
	#container-hebrew > table > tbody > tr,
	#container-hebrew > table > tbody > tr > td {
		display: block;
		width: auto;
	}
	#container-hebrew > table > tbody > tr > td[width="15"] {
		display: none;
	}
	#content-hebrew {
		margin: 0;
		padding: 0;
	}
	#content-hebrew h1 {
		font-size: 26px !important;
		line-height: 1.25;
		padding-bottom: 8px !important;
	}
	#container-hebrew > table > tbody > tr > td:last-child {
		padding-top: 10px;
		text-align: center !important;
	}
	#container-hebrew .widget-area {
		float: none !important;
		width: auto !important;
		text-align: right;
	}
	#container-hebrew .widget-area h3,
	#container-hebrew .widget-area a {
		width: auto !important;
	}

	/* =Sidebar menus (both layouts): full-width bars instead of 160px images
	-------------------------------------------------------------- */
	#main .widget-area ul {
		margin-left: 0;
		margin-right: 0;
	}
	#main .widget-area .widget-title {
		background-image: none;
		background-color: #7fa785;
		font-size: 16px;
		line-height: 32px;
		padding: 0 8px !important;
	}
	#main .widget-area ul ul a {
		background-image: none;
		background-color: #e2c798;
		font-size: 15px;
		line-height: 22px;
		padding: 8px !important;
		width: auto;
	}
	#main .widget-area ul ul a:hover {
		background-image: none;
		background-color: #d6bc8b;
		line-height: 22px;
		padding: 8px !important;
		width: auto;
	}

	/* =Content
	-------------------------------------------------------------- */
	.entry-content,
	.entry-content-hebrew,
	.entry-summary {
		overflow-wrap: break-word;
	}
	.entry-content-hebrew {
		font-size: 16px;
		line-height: 1.6;
	}
	#content img,
	#content-hebrew img,
	#main .widget-area img,
	.wp-caption {
		max-width: 100%;
		height: auto;
	}
	.wp-caption {
		width: auto !important;
	}
	#content iframe,
	#content-hebrew iframe,
	#content object,
	#content-hebrew object,
	#content embed,
	#content-hebrew embed,
	#content video,
	#content-hebrew video {
		max-width: 100%;
	}
	#content iframe[src*="youtube"],
	#content-hebrew iframe[src*="youtube"],
	#content iframe[src*="vimeo"],
	#content-hebrew iframe[src*="vimeo"] {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}
	/* Layout tables in page content: fluid, cells drop their fixed widths */
	#content table,
	#content-hebrew table {
		max-width: 100%;
	}
	.entry-content table,
	.entry-content-hebrew table,
	.entry-summary table {
		width: 100% !important;
		height: auto !important;
	}
	.entry-content td,
	.entry-content-hebrew td,
	.entry-summary td {
		width: auto !important;
		height: auto !important;
	}
	.entry-content td:empty,
	.entry-content-hebrew td:empty {
		padding: 0 !important; /* spacer cells with inline padding */
	}
	#content tr th,
	#content thead th {
		padding: 6px 4px; /* theme's 24px sides made the event calendar's 7 columns wider than a phone */
	}
	/* Forms (Contact Form 7, comments) */
	#content input[type="text"],
	#content input[type="email"],
	#content input[type="tel"],
	#content input[type="url"],
	#content textarea,
	#content select,
	#content-hebrew input[type="text"],
	#content-hebrew input[type="email"],
	#content-hebrew input[type="tel"],
	#content-hebrew input[type="url"],
	#content-hebrew textarea,
	#content-hebrew select {
		box-sizing: border-box;
		max-width: 100%;
		font-size: 16px; /* stops iOS zooming into the field */
	}
	.wpcf7 input[type="text"],
	.wpcf7 input[type="email"],
	.wpcf7 input[type="tel"],
	.wpcf7 input[type="url"],
	.wpcf7 textarea,
	.wpcf7 select {
		width: 100%;
	}
	.entry-content-hebrew td:has(> .wpcf7) {
		padding-right: 0 !important; /* inline 20px */
	}
	#content input[type="submit"],
	#content-hebrew input[type="submit"] {
		font-size: 16px;
		padding: 8px 22px;
	}

	/* =Fixed-size AdSense rows (728px) and footer
	-------------------------------------------------------------- */
	#wrapper > table,
	#main > table {
		display: block;
		overflow-x: auto;
		width: auto;
	}
	#wrapper > table td[width="200"],
	#main > table td[width="200"] {
		display: none;
	}
	#colophon table,
	#colophon tbody,
	#colophon tr,
	#colophon td {
		display: block;
		width: auto !important;
	}
	#colophon td {
		padding: 4px 0 !important;
		text-align: center;
	}
}

@media screen and (max-width: 640px) {
	/* hebrew.php title row: the quick links repeat the menu right below — keep flag + site name */
	.page-template-hebrew #branding td:nth-child(2) {
		display: none;
	}

	/* Content-table rows that pair media with a block of text (marked .tdm-stack by mobile.js):
	   one cell under the other, each at full width. */
	tr.tdm-stack {
		display: flex;
		flex-direction: column;
	}
	tr.tdm-stack > td {
		display: block;
		padding-bottom: 12px;
	}
	tr.tdm-stack > td:empty {
		display: none;
	}
	/* Content blocks indented with a large inline side padding (marked .tdm-unpad by mobile.js) */
	.tdm-unpad {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

@media screen and (max-width: 480px) {
	/* Images floated beside a paragraph would leave the text a narrow strip: put them above it */
	#content img.alignleft,
	#content img.alignright,
	#content .wp-caption.alignleft,
	#content .wp-caption.alignright,
	#content-hebrew img.alignleft,
	#content-hebrew img.alignright,
	#content-hebrew .wp-caption.alignleft,
	#content-hebrew .wp-caption.alignright {
		display: block;
		float: none;
		margin: 4px auto 12px;
	}
}