/* This file is small, and that is deliberate.

   Salient sets font-family (via theme options). Type sizes live in
   typography.css. Below only what Salient does not do and what every component
   would otherwise have to handle itself. */

/* The header is fixed, so the top of the viewport is not the top of the page.
   scroll-padding on the scroll container is what tells the browser that: anchor
   jumps, :target and focus scrolls all land below the bar instead of under it.
   Salient's own animated anchor scrolling is switched off so this native
   behaviour is the only thing in play — see inc/header.php. */
html {
	scroll-padding-top: var(--scroll-offset);
}

body {
	/* Prevents orphaned words on a line of their own in running text. */
	text-wrap: pretty;
}

/* Media fills the slot the component gives it. The shape comes from
   aspect-ratio in the component, not from fixed heights here. */
img,
svg,
video {
	max-inline-size: 100%;
	block-size: auto;
}

/* Keep focus visible, also where the framework wipes outlines away. */
:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Content links: underline. Salient strips decoration globally; menus and
   .btn stay bare. :where() keeps specificity low so component resets win. */
a:where(:not(.btn)) {
	text-decoration: underline;
}

:is(nav, .sf-menu, #header-outer, #slide-out-widget-area) a {
	text-decoration: none;
}

/* Stretch a link over its nearest positioned ancestor (Bootstrap-style). */
.stretched-link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Diagonal radius: top-left + bottom-right. Large by default; .border-radius-sm uses --radius-m. */
.border-radius {
	--row-radius: var(--radius-lg);
	border-start-start-radius: var(--row-radius);
	border-end-end-radius: var(--row-radius);
}

.border-radius-sm {
	--row-radius: var(--radius-m);
}

.border-radius-children > :first-child {
	border-start-start-radius: var(--radius-lg);
}

.border-radius-children > :last-child {
	border-end-end-radius: var(--radius-lg);
}

/* 10/12 of Salient `.container` (= span_10 / homepage 10-col band). */
@media (min-width: 1000px) {
	.container.normal-container-small {
		max-width: calc(var(--container-width, 1425px) * 10 / 12);
	}
}