/*
 * Page chrome for the Bootstrap-shelled pages: the certificate page, the public form, the avatar
 * session page and the themed 404s. (The greeting-card reveal is chromeless and loads none of it.)
 *
 * BootstrapHead links this file in exactly one slot — AFTER bootstrap.min.css and BEFORE the
 * account theme block — and that position is the whole point:
 *
 *   bootstrap.min.css   the custom build, with DEFAULT_COLOR and Lato compiled in
 *   chrome.css          this file: the product's own defaults, which must beat Bootstrap
 *   theme block         the account's color / bg_css / font_family, which must beat both
 *
 * Every declaration here collides with a Bootstrap declaration at equal specificity, so it only
 * wins by coming later; and every one of them is something an account may brand, so it must lose
 * to the theme block. Component <style> blocks are emitted after BOTH (SvelteKit puts route CSS
 * last in <head>) — which is the reason nothing brandable may be restated in a component: a
 * `:global(body)` background in a component would silently beat a paying account's `bg_css`.
 *
 * Anything that is not brandable and belongs to one component belongs in that component instead.
 */

:root {
	/*
	 * Plus Jakarta Sans is already the card reveal's UI face; naming it here makes the two public
	 * surfaces one design language and buys the 500/600 weights the layout needs, which the
	 * self-hosted Lato (400/700 only) cannot supply. Lato stays as the first fallback, so a blocked
	 * or slow Google Fonts response lands on the face Bootstrap was built against.
	 */
	--bs-font-sans-serif:
		'Plus Jakarta Sans', Lato, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
		Arial, sans-serif;

	/* Warmer, higher-contrast ink than Bootstrap's #222 flat gray. */
	--bs-body-color: #16181d;
	--bs-body-color-rgb: 22, 24, 29;
	--bs-secondary-color: rgba(22, 24, 29, 0.6);
	--bs-tertiary-color: rgba(22, 24, 29, 0.42);
	--bs-border-color: #e5e7eb;
	--bs-border-radius-xl: 1.125rem;

	/*
	 * The product's own surface tokens. They resolve `var(--bs-primary)` at use time, so a branded
	 * account's color reaches them from the theme block that comes after this file — the tints,
	 * hairlines and washes below are all the account's own hue, not a fixed gray.
	 */
	--mom-ink: #16181d;
	--mom-muted: #6b7280;
	--mom-surface: #ffffff;
	/*
	 * The brand color as INK. An account picks its color to be filled with — the button, the
	 * accent rule — and at that job any hue works; as text on white it can land anywhere from
	 * 2:1 to 12:1 contrast, and a pale one is unreadable. Darkening toward the page's ink keeps
	 * the hue recognisable while putting every choice above 4.5:1. Rule of thumb for the whole
	 * page: brand as a FILL is `--bs-primary`, brand as TEXT or a glyph is this.
	 */
	--mom-ink-brand: color-mix(in srgb, var(--bs-primary), #101418 32%);
	--mom-line: color-mix(in srgb, var(--bs-primary) 14%, #e5e7eb);
	--mom-tint: color-mix(in srgb, var(--bs-primary) 7%, #ffffff);
	--mom-tint-strong: color-mix(in srgb, var(--bs-primary) 14%, #ffffff);
	--mom-radius: 1.125rem;
	--mom-radius-sm: 0.75rem;
	--mom-shadow-sm:
		0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -14px rgba(16, 24, 40, 0.24);
	--mom-shadow:
		0 1px 2px rgba(16, 24, 40, 0.05), 0 18px 44px -18px rgba(16, 24, 40, 0.28);
	--mom-shadow-lift:
		0 2px 4px rgba(16, 24, 40, 0.06), 0 32px 64px -24px rgba(16, 24, 40, 0.34);
}

/*
 * The default page ground. `bg_css` replaces this outright — it emits the `background` shorthand,
 * which resets the image, size and repeat set here as well as the color, so a branded background
 * never shows through as a stray wash. Unbranded accounts get DEFAULT_COLOR's hue, which is what
 * makes this read as "the product" rather than as an arbitrary gray.
 *
 * The two radials are sized in pixels rather than left to stretch, so the wash stays behind the
 * certificate at the top of the page instead of smearing down a long attachments list.
 */
body {
	/*
	 * The page column. `min-height`, never a fixed viewport height: <body>'s content box is the
	 * containing block the sticky navbar sticks within, so app.html's old `vh-100` dropped the bar
	 * out of the page the moment the content ran past one screenful. (On cert pages that was
	 * masked by `body { overflow-x: hidden }`, which forces overflow-y to auto and made <body>
	 * itself the scroll container — taking `#top`, scrollIntoView and window.scrollTo with it.)
	 *
	 * The flex column is what `mt-auto` on the footer has always assumed; the wrapper it used to
	 * be declared on is `display: contents` and never had a box for `auto` to distribute.
	 */
	min-height: 100dvh;
	display: flex;
	flex-direction: column;

	background-color: #f4f5f7;
	background-image:
		radial-gradient(
			120% 100% at 8% 0%,
			color-mix(in srgb, var(--bs-primary) 16%, transparent),
			transparent 60%
		),
		radial-gradient(
			90% 100% at 100% 0%,
			color-mix(in srgb, var(--bs-primary) 10%, transparent),
			transparent 62%
		);
	background-size: 100% 640px, 100% 520px;
	background-position: top left, top right;
	background-repeat: no-repeat;
}

/* Bootstrap's underlines sit on the baseline and clip descenders. */
a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 0.06em;
}

::selection {
	background: color-mix(in srgb, var(--bs-primary) 22%, #ffffff);
}

/*
 * Bootstrap's headings inherit the body's 1.2 line-height and default tracking, which reads loose
 * and wide at display sizes. Tightening both is what separates a heading from big body copy.
 */
h1,
h2,
h3 {
	letter-spacing: -0.018em;
	line-height: 1.18;
}

/*
 * The shell bar and footer. Both shells render them — AccountShell with the tenant's brand,
 * GenericShell (404s, which belong to no account) without — so the rules they share live here
 * rather than being copied into two components. AccountShell keeps `.app-brand`, which only it
 * has.
 *
 * The bar is translucent over the page's own wash with a hairline rule, not Bootstrap's drop
 * shadow: the ground stays visible behind it instead of the header reading as a separate strip
 * bolted on top.
 */
.app-nav {
	--bs-navbar-padding-y: 0.75rem;
	background: rgba(255, 255, 255, 0.78);
	border-bottom: 1px solid rgba(16, 24, 40, 0.08);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
}

.app-nav > .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 48px;
}

/*
 * `margin-top: auto` is what pins this to the bottom of a short page, so the padding-top is
 * purely the gap above the attribution on a LONG one — where it adds to whatever the page's own
 * bottom padding already is. Keeping it modest is half of that sum; the pages own the other half.
 */
.app-footer {
	margin-top: auto;
	padding: 1.5rem 0 2.5rem;
	text-align: center;
	font-size: 0.8125rem;
	color: var(--mom-muted);
}

.app-footer a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}

.app-footer a:hover {
	color: var(--bs-primary);
}
