/* nu01 additions on top of Dimension's main.css. */

/* The background follows the hero on show (set by nu01.js). */
#bg:after {
	background-image: var(--hero-bg, url("../../images/bg-learning.jpg"));
	transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, background-image 0.9s ease-in-out;
}

/* The logo circle holds the wordmark instead of an icon. */
#header .logo .logo-mark {
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 5.5rem;
}
#header .logo .logo-mark b { color: #7cf29c; font-weight: 600; }

#header .content .inner h1 .accent { color: #7cf29c; }
#header .content p.freemium { font-size: 0.75rem; opacity: 0.85; }

/* The sign-up call: a line and a Substack button under the access line. */
#header .content p.signup { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
#header .content p.signup .button { margin: 0; }

/* The rotating hero line, under the description. */
#header .heroes {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-height: 2.75rem;
	margin-top: 1.25rem;
	font-size: 0.9rem;
}
#header .heroes .hero {
	border-bottom: 0;
	animation: nu01-hero-in 0.6s ease;
}
#header .heroes .hero strong {
	display: inline-block;
	margin-right: 0.5rem;
	padding: 0 0.6rem;
	border-radius: 4px;
	background: rgba(124, 242, 156, 0.18);
	color: #7cf29c;
	font-size: 0.7rem;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
}
#header .heroes .hero-pause {
	height: 1.9rem;
	padding: 0 0.6rem;
	line-height: 1.9rem;
	font-size: 0.55rem;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
@keyframes nu01-hero-in {
	from { opacity: 0; transform: translateY(0.4rem); }
	to { opacity: 1; transform: none; }
}

/* The nav button of the hero on show. */
#header nav ul li a.is-current { background-color: rgba(255, 255, 255, 0.12); }

/* Articles: long (translated) headings wrap instead of overflowing. */
#main article h2.major { width: auto; max-width: 100%; display: inline-block; overflow-wrap: break-word; }

/* Articles: the illustrations sit on the panel colour. */
#main article .image.main { background: #131722; border-radius: 4px; }
#main article .image.main img { max-height: 22rem; object-fit: contain; }
#main article pre code { white-space: pre-wrap; word-break: break-all; }

/* Languages, in the footer. */
#footer .langs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
	font-size: 0.7rem;
	letter-spacing: 0.15rem;
	text-transform: uppercase;
}
#footer .langs li { padding: 0; }
#footer .langs a { border-bottom: 0; opacity: 0.6; }
#footer .langs a:hover, #footer .langs a[aria-current="page"] { opacity: 1; }
#footer .langs a[aria-current="page"] { border-bottom: 1px solid #fff; }

@media screen and (max-width: 480px) {
	#header .heroes { flex-direction: column; gap: 0.5rem; }
	#main article h2.major { letter-spacing: 0.2rem; }
}

@media (prefers-reduced-motion: reduce) {
	#header .heroes .hero { animation: none; }
}

/* The release candidate (rc.nu01.com) is marked on every page. */
body[data-stage="rc"]::after {
	content: "RC";
	position: fixed;
	right: 12px;
	bottom: 12px;
	z-index: 10;
	padding: 4px 10px;
	border-radius: 6px;
	background: #d42a2a;
	color: #fff;
	font: 600 13px/1.4 "Source Sans Pro", sans-serif;
	letter-spacing: 0.1em;
	pointer-events: none;
}

/* The local dev server's build (scripts/dev.py) is marked too. */
body[data-stage="local"]::after {
	content: "LOCAL";
	position: fixed;
	right: 12px;
	bottom: 12px;
	z-index: 10;
	padding: 4px 10px;
	border-radius: 6px;
	background: #2a6fd4;
	color: #fff;
	font: 600 13px/1.4 "Source Sans Pro", sans-serif;
	letter-spacing: 0.1em;
	pointer-events: none;
}

/* Nav: seven buttons don't fit Dimension's sizes below ~1000px. Tighter
   buttons on tablets, and Dimension's stacked column up to 640px. */
@media screen and (max-width: 1000px) {
	#header nav ul li a { min-width: 0; padding: 0 0.8rem 0 0.9rem; letter-spacing: 0.1rem; }
}
@media screen and (max-width: 640px) {
	#header nav.use-middle:after { display: none; }
	#header nav ul { flex-direction: column; min-width: 10rem; max-width: 100%; }
	#header nav ul li { border-left: 0; border-top: solid 1px #ffffff; }
	#header nav ul li:first-child { border-top: 0; }
	#header nav ul li a { height: 3rem; line-height: 3rem; width: 100%; padding: 0 1.25rem 0 1.45rem; letter-spacing: 0.2rem; }
}