/*
 * SEO Companion - heading outline for the "simple" theme (D-216).
 *
 * The output pass swaps two elements on article, category and tag pages:
 *
 *   <h1> site title </h1>      ->  <div class="seo-site-title"> ... </div>
 *   <h2> article / archive title </h2>  ->  <h1 class="seo-h1"> ... </h1>
 *
 * These rules make each new element look exactly like the one it replaces.
 * Every value is copied from the rule that styled the old element; the
 * source is named next to it. "simple.css" is the stylesheet the theme
 * links from cdn.simplecss.org, "style.css" the theme's own, "UA" the
 * browser's default stylesheet for the old element.
 *
 * Linked only on a request the pass is armed for, after both of those.
 */

/* Was: <h1> in body > header. */
body > header .seo-site-title {
	display: block;             /* UA h1 */
	font-size: 3rem;            /* simple.css: h1 */
	font-weight: bold;          /* UA h1 */
	line-height: 1.1;           /* simple.css: h1, h2, h3 */
	max-width: 1200px;          /* simple.css: body > header h1 */
	margin: 1rem auto;          /* simple.css: body > header h1 */
	overflow-wrap: break-word;  /* simple.css: p, h1 ... h6 */
}

/*
 * Was: <h2> as a child of main. Being an <h1>, it already has the bold
 * weight (UA), line-height 1.1 and overflow-wrap (simple.css) the <h2> had;
 * what differs between the two is the size and the margins.
 */
main h1.seo-h1 {
	font-size: 2.6rem;          /* simple.css: h2 */
	margin: 0 0 0.83em;         /* top: style.css main h2; bottom: UA h2 (0.83em); sides: UA h2 */
}

/* Was: <h2> right after the cover image of an article. */
.cover-image + h1.seo-h1 {
	margin: 1rem 0;             /* style.css: .cover-image + h2 */
}

/* simple.css: "Reduce header size on mobile", same breakpoint. */
@media only screen and (max-width: 720px) {
	body > header .seo-site-title {
		font-size: 2.5rem;      /* simple.css: h1 */
	}

	main h1.seo-h1 {
		font-size: 2.1rem;      /* simple.css: h2 */
	}
}