/*
 * Containment for the course inside a WordPress page.
 *
 * The course brings its own design system and paints its own ground; this file
 * only removes the theme furniture that would otherwise crop or letterbox it.
 * Nothing here restyles the course.
 */

.o4t-course {
	/*
	 * Break out of whatever content width the theme applies.
	 *
	 * The supplied "Course - full screen" template removes that width already,
	 * but the template needs WordPress 6.7. On older versions, and anywhere an
	 * author drops the block on an ordinary page, this full-bleed escape is what
	 * stops the course being squeezed into a 780px column - it renders a 260px
	 * sticky sidebar against the viewport and does not survive cropping.
	 */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0;
}

/* Guard against a horizontal scrollbar when the viewport unit includes it. */
body.o4t-course-page {
	overflow-x: hidden;
}

/* The course's own root element, created by support.js when it mounts. */
.o4t-course #dc-root {
	width: 100%;
}

/*
 * The course sizes its sidebar against the viewport (100vh) and sticks it to
 * the top. A theme with a fixed admin bar or header offsets that, so give the
 * page a predictable origin.
 */
body.o4t-course-page {
	margin: 0;
	padding: 0;
}

body.o4t-course-page .wp-site-blocks > * {
	margin-block-start: 0;
}

/* The admin bar is fixed and 32px tall (46px on small screens); keep the
   course's sticky sidebar clear of it rather than under it. */
body.o4t-course-page.admin-bar .o4t-course {
	--o4t-offset: 32px;
}

@media screen and (max-width: 782px) {
	body.o4t-course-page.admin-bar .o4t-course {
		--o4t-offset: 46px;
	}
}

.o4t-notice {
	padding: 16px;
	border: 1px solid #d63638;
	border-radius: 4px;
	color: #d63638;
	font-family: system-ui, sans-serif;
}

/*
 * Defence against the host theme's code styling.
 *
 * The course's own elements carry inline styles, which beat a theme's
 * stylesheet — except its <code> elements, which deliberately carry almost
 * none: inside a <pre> the highlighter supplies colour through inline spans,
 * and the "where this lands" paths set only colour and size. That leaves the
 * theme's own `code` rules to supply everything else, and builder themes
 * (Betheme, Divi, Avada) all style inline code as a light chip:
 *
 *   code { white-space: normal; background: #f5f5f5; padding: 2px 4px; ... }
 *
 * Two visible failures follow. `white-space: normal` collapses every code
 * block onto one line, and the light background lands behind the course's
 * near-white text, leaving the file paths unreadable.
 *
 * !important is warranted here: the theme's selectors are more specific than
 * anything this file can portably declare (Betheme reaches these through
 * "#Content .entry-content code"), and this is a containment stylesheet whose
 * whole job is to stop the host leaking in.
 */

/* Restore the line breaks. */
.o4t-course pre,
.o4t-course pre code {
	white-space: pre !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
	word-wrap: normal !important;
}

.o4t-course pre {
	/* Re-assert the panel in case the theme sets these with !important too. */
	background: var(--color-neutral-900, #1b1d2b) !important;
	color: var(--color-text, #e9e9ed) !important;
	tab-size: 2;
}

/* Strip the theme's inline-code chrome. Colour is left alone: the course sets
   it inline, on the spans inside a block and on the paths themselves. */
.o4t-course code {
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	letter-spacing: normal !important;
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
	display: inline;
	vertical-align: baseline;
	quotes: none;
}

/* Some themes add quotation marks or a copy affordance via generated content. */
.o4t-course code::before,
.o4t-course code::after {
	content: none !important;
}

/* Inside a block, the size and leading come from the <pre>. */
.o4t-course pre code {
	font-size: inherit !important;
	line-height: inherit !important;
}