/* Site-specific additions on top of the theme CSS (see templates/ and build.py). */

/* Post / page header: title + meta inside the parallax header row */
#page-header .post-title { margin: 0; color: #fff; font-weight: 700; }
#page-header .post-info-header .post-info { margin-top: 18px; }
#page-header .post-info-header .post-info div { display: inline-block; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.85); }
#page-header .post-info-header .post-info span { padding: 0 9px; }
#page-header .post-info-header .post-info a { color: #fff; }
@media (max-width: 569px) {
	#page-header .post-info-header .post-info div { display: block; margin-top: 4px; }
	#page-header .post-info-header .post-info span { display: none; }
}

/* Reading column for posts and pages */
.ctm-reading-width { max-width: 804px; margin-left: auto; margin-right: auto; }
@media (max-width: 959px) { .ctm-reading-width { padding-left: 36px; padding-right: 36px; } }
.post-content h2 { margin-top: 36px; }
.post-content img.aligncenter { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.post-content div[align="center"] em { display: block; margin: 9px 0 27px; color: #777; }
.post-content iframe { max-width: 100%; margin-bottom: 27px; }

/* Code blocks: Prism styled like the 2017 site's Crayon highlighter, "Classic" theme colours
   (without its alternate-row stripes), on Atom One Light's #fafafa background.
   Selectors are prefixed with .post-content so they win over prism.min.css, which loads later. */
.post-content pre[class*="language-"] { border: 1px solid #999; border-radius: 0; font-size: 13px; line-height: 1.5; margin: 18px 0 27px; background: #fafafa; }
.post-content code[class*="language-"], .post-content pre[class*="language-"] { color: #000; text-shadow: none; }
.post-content pre.line-numbers { padding-left: 3.8em; }
.post-content .line-numbers .line-numbers-rows { background: #dfefff; border-right: 1px solid #c6dcf2; }
.post-content .line-numbers-rows > span:before { color: #5499de; }
.post-content .token.comment, .post-content .token.prolog, .post-content .token.doctype, .post-content .token.cdata { color: #ff8000; font-style: normal; }
.post-content .token.string, .post-content .token.char, .post-content .token.interpolation-string, .post-content .token.attr-value { color: #008000; }
.post-content .token.keyword, .post-content .token.boolean, .post-content .token.null, .post-content .token.important { color: #800080; }
.post-content .token.function, .post-content .token.method { color: #004ed0; }
.post-content .token.class-name, .post-content .token.namespace, .post-content .token.variable { color: #002d7a; }
.post-content .token.number, .post-content .token.constant { color: #ce0000; }
.post-content .token.operator { color: #006fe0; background: none; }
.post-content .token.punctuation { color: #333; }
.post-content :not(pre) > code { background: #f1f1f1; padding: 1px 5px; border-radius: 2px; font-size: .9em; }

/* Wide screens: code blocks grow beyond the text column, just as wide as their longest
   line needs (up to 1100px, or the viewport minus margins), centred on the column.
   Narrow screens keep the column width and scroll sideways. */
@media (min-width: 960px) {
	.ctm-reading-width pre[class*="language-"] {
		width: fit-content;
		min-width: 100%;
		max-width: min(1100px, calc(100vw - 72px));
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}
}

/* Prev / next */
.row-navigation { background: #f7f7f7; }

/* Search results */
#ctm-search-results article { padding: 27px 0; border-bottom: 1px solid #eee; }
#ctm-search-results article:last-child { border-bottom: 0; }
#ctm-search-results .search-field { width: 100%; }
#ctm-search-results mark { background: #fff3a8; }

/* Slimmer menu bar: the theme pads the logo 27px top and bottom (92px bar); 18px gives a
   74px bar (~20% thinner). The theme measures the menu height at runtime, so header
   offsets and the mobile menu panel follow automatically. */
#masthead .logo-container.col-lg-0 { padding-top: 18px; padding-bottom: 18px; }
@media (max-width: 959px) {
	#masthead .menu-container .logo-container { padding-top: 18px !important; padding-bottom: 18px !important; }
}

/* "profile" page layout (About): full-height split, as on the 2019 site's About block:
   photo on the left (centred horizontally, anchored to the top), near-black text pane on
   the right with white text, vertically centred. Stacks on phones (photo 460px high). */
.ctm-profile { display: flex; min-height: 100vh; min-height: 100svh; }
.ctm-profile-photo { flex: 1 1 50%; position: relative; overflow: hidden; }
.ctm-profile-photo-inner { position: absolute; inset: 0; background-size: cover; background-position: center top; background-repeat: no-repeat; }
.ctm-profile-text { flex: 1 1 50%; display: flex; align-items: center; padding: 108px 0 72px; }
.ctm-profile-text-inner { width: 65%; margin: 0 auto; }
.ctm-profile .heading-text h1 { color: #fff; margin: 0; font-weight: 700; }
.ctm-profile hr.separator-break { margin: 27px 0; width: 40px; border-top: 2px solid #006cff; }
.ctm-profile-body { font-family: 'Droid Serif', 'Noto Serif', Georgia, serif; font-size: 15px; line-height: 1.8; color: rgba(255, 255, 255, .75); }
.ctm-profile-body p { margin: 0 0 18px; }
.ctm-profile-body a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 959px) {
	.ctm-profile { flex-direction: column; min-height: 0; }
	.ctm-profile-photo { flex: none; height: 460px; }
	.ctm-profile-text { padding: 54px 0 54px; }
	.ctm-profile-text-inner { width: auto; margin: 0 36px; }
}

/* Homepage title size on desktop-width screens (phones/tablets keep the theme's sizes):
   - grows with the width (50px at 1440px wide, the original size) up to about half the screen
     width on a 16:9 monitor with a full-height window (3.086vh);
   - beyond that grows more slowly, reaching 30% larger at full screen width (4.012vh), then stops.
   The middle term is the slower slope: it equals 3.086vh at half width and 4.012vh at full width. */
@media (min-width: 960px) {
	.home #page-header .row-header h1.fontsize-155944 { font-size: max(50px, min(3.472vw, calc(2.160vh + 1.0416vw), 4.012vh)); }
}