/*
A file for css that optimises the Minerva skin on larger devices.
*/

@import '../../../minerva.less/minerva.variables';
@import '../../../minerva.less/minerva.mixins';
@paddingVertical: 1.4em;

@media screen and ( min-width: @width-breakpoint-tablet ) {
	.client-js {
		#searchIcon {
			display: none;
		}
	}

	.header {
		.branding-box {
			width: @brandingBoxWidth;
		}

		.search-box {
			display: table-cell;
			width: auto;

			.search {
				width: @searchBoxWidth;
			}
		}
	}

	.toc-mobile {
		// Reset the rule for mobile mode (but not for .client-nojs)
		display: table;
		visibility: visible;
		position: relative;
		font-size: 1.3em;
		margin: 1em 0;
		border: solid 1px transparent;

		> h2 {
			visibility: hidden;
			font-family: @fontFamilyBase;
			font-size: @tocFontSize;
			font-weight: bold;
			border-bottom: 0;
			padding: @paddingVertical / 2 0;
		}
	}

	// FIXME: Have a class that identifies all of these selectors
	.pre-content,
	/* Form only pages e.g. Special:MobileOptions */
	#mw-content-text > form,
	.content,
	.post-content {
		max-width: @contentMaxWidthTablet;
		margin: 0 @contentPaddingTablet;
	}

	.content {
		// Classes added by thumbnails
		// e.g. [[File:Scholars mate animation.gif|frame|left|"[[Scholar's mate]]"]]
		// We use @noflip because we still want .tleft to be on the left and
		// .tright to be on the right in RTL languages.
		figure,
		.thumb {
			max-width: @width-breakpoint-tablet - @contentMargin;

			&.mw-halign-left,
			&.tleft {
				/* @noflip */
				float: left;
				/* @noflip */
				clear: left;
				/* @noflip */
				margin-right: 1.4em;
			}

			&.mw-default-size,
			&.mw-halign-right,
			&.tright {
				/* @noflip */
				float: right;
				/* @noflip */
				clear: right;
				/* @noflip */
				margin-left: 1.4em;
			}
		}

		table {
			caption {
				background: inherit; // T170344
			}

			tbody {
				display: table-row-group;
			}
		}
	}

	.last-modified-bar {
		background-color: transparent;
		padding-left: 0;
		padding-right: 0;
		font-size: 1em;
	}
}

@media screen and ( min-width: @width-breakpoint-desktop ) {
	.banner-container,
	/* FIXME: Generic header class needed me-thinks! */
	.header,
	.page-header-bar,
	.overlay-header,
	/* FIXME: Generic content class needed? */
	.content,
	.overlay-content,
	.content-unstyled,
	.pre-content,
	.post-content,
	/* Form only pages e.g. Special:MobileOptions */
	#mw-content-text > form,
	/* FIXME: remove need for id selector */
	#mw-mf-page-center .pointer-overlay {
		margin-left: auto;
		margin-right: auto;
		width: 90%;
		max-width: @contentMaxWidthTablet;
	}

	.header {
		// Make sure the main menu and secondary button icon images are aligned
		// with the content.
		max-width: @contentMaxWidthTablet + 2 * @iconGutterWidth;
	}
}