@import '../../../minerva.less/minerva.variables.less';
@import '../../../minerva.less/minerva.mixins.less';
@import 'toc.less';

// Content formatting and typography
//
// Our content is predominately text, hence visual hierarchy must be clear.

body {
	font-family: @font-family-base;
	line-height: 1.4;
	-webkit-tap-highlight-color: rgba( 0, 0, 0, 0.2 );
	overflow-y: scroll;
}

.content {
	line-height: @line-height-content;
	// Deal with long links (T62387)
	word-wrap: break-word;

	/* Emulate Center - from mediawiki.skinning/elements.css */
	.center {
		width: 100%;
		text-align: center;

		> *,
		.thumb {
			margin-left: auto;
			margin-right: auto;
		}
	}
}

// Feature phones < 320px viewport receive smaller font.
@media all and ( max-width: @min-width-breakpoint-mobile - 1 ) {
	html {
		font-size: @font-size-root--feature-phone;
	}

	.content {
		margin: 0 12px;
	}
}

.nomobile {
	// No mobile should trump any other class. e.g. .content table { display: table; }
	display: none !important;
}

// Support iOS 9+ browsers: Enable Dynamic Type resizing, see
// http://www.interactiveaccessibility.com/blog/text-resizing-web-pages-ios-using-dynamic-type
// & T204807.
@supports ( font: -apple-system-body ) {
	html {
		font: -apple-system-body; // stylelint-disable-line font-family-no-missing-generic-family-keyword
	}

	// Most iOS browsers' default font size is 16px but Dynamic Type's default
	// font size is 17px. We need to scale down @font-size-root and
	// @font-size-root--feature-phone by this ratio in order to make them relative to these
	// browsers' defaults again. By doing this, the default Dynamic Type text size
	// will appear identical to the browser's default text size.
	@dynamic-type-scaling-factor: 16 / 17;

	body {
		font-size: @font-size-root * @dynamic-type-scaling-factor;
	}

	@media all and ( max-width: @min-width-breakpoint-mobile - 1 ) {
		body {
			font-size: @font-size-root--feature-phone * @dynamic-type-scaling-factor;
		}
	}
}