/*
 * The public marketing shell.
 *
 * The hero, its background image cascade, the footer, and the body backgrounds. Contributed by
 * SiteHeadBehavior for MasterTemplate only; the portal shell never loads it.
 */

/*
 * Moved here from the navbar sheet when that sheet became portal-only, and this was the rule that
 * proved the split needed checking rather than assuming. It reads as navbar styling and is public
 * styling: the exclusion below is what makes it so, since the portal's own marks are
 * .navbar-brand-image and Tabler sizes those itself. Contributed by PortalHeaderNav it reached
 * every page except the one it was written for, and the public brand went back to 0x0 - silently,
 * the same failure it was added to fix.
 */
.navbar-brand img:not(.navbar-brand-image) {
	/*
	 * 2.5rem for a 2rem mark, and the extra is not a size change.
	 *
	 * yetinet-logo-shadow.svg pads its viewBox so the drop shadow has somewhere to go - without it
	 * the halo was clipped flat against all four edges of the canvas, measured. The wordmark is
	 * therefore 63 units of a 79-unit box rather than filling it, so a box at the old 2rem would
	 * draw the mark itself at 1.6rem. 2rem x 79/63 puts it back where it was.
	 *
	 * Change the two together: if the asset's padding changes, this number does.
	 */
	height: 2.5rem;
	width: auto;
}



/* Public shell */
.app {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	position: relative;
}

.app-body {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
}

.content-container:has(.hero),
.content-container:has(.status) {
	padding-top: 0 !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
}

.content-container:has(.about_us) {
	padding-right: 0 !important;
	padding-bottom: 0 !important;
	padding-left: 0 !important;
}

/*
 * Tabler's .footer is an admin footer and this is a marketing one, so the whole of its surface
 * treatment has to be taken back, not half of it.
 *
 * Tabler sets background-color, padding, color and a border-top on .footer. Overriding only the
 * background left the border, which rendered as a hard near-white rule above the dark footer -
 * --tblr-border-color from the light palette against a --tblr-dark surface. Two half-applied
 * themes meeting at one edge.
 *
 * Unscoped .footer is safe here rather than sloppy: this application's only footer is the public
 * one, since MasterTemplate is the sole place a Footer is constructed and UserTemplate leaves
 * TablerPage's newFooter() at its default of none, so the Tabler shell renders no footer bar to
 * collide with. That stops being true the moment a portal page wants one.
 */
.footer {
	flex: 0 1 auto;
	border-top: 0;
	/*
	 * Sampled from the treeline in footer-bg.jpg rather than picked by eye, so the footer reads as
	 * the ground the trees stand on instead of a second panel below them. #3e3f3a is 2,040,067 of
	 * the pixels in the image's bottom quarter against 11,201 for the next color, and the bottom
	 * row averages to the same value, so the join is seamless wherever the image is cropped.
	 *
	 * Not a --tblr-* token on purpose: it belongs to this artwork, not to the theme, and following
	 * a theme color would break the join the moment the palette moved.
	 */
	background-color: #3e3f3a;
}

.footer .nav-link,
.footer p,
.footer a {
	padding: 0;
	color: #f8f5f0;
	font-size: 13px;
	font-weight: 300;
	line-height: 22px;
}

.footer .nav-header {
	color: #fff;
	font-size: .85rem;
	font-weight: 700;
	text-transform: uppercase;
}

/* Public marketing page */
.hero {
	padding: 12rem 0 15rem;
}

.hero-content {
	position: relative;
	z-index: 2;
	padding-top: 5rem;
	padding-bottom: 5rem;
}

/*
 * No height here, and the omission is the fix.
 *
 * The Sass this came from said `@extend .h-100`, which compiled to height: 100%. Under Sandstone
 * that resolved to auto, because no ancestor had a definite height for the percentage to resolve
 * against, so the hero was always sized by its content. Tabler sets `:root { height: 100% }`, which
 * gives the chain a definite height for the first time - and the literal conversion of that extend
 * then started resolving. The hero went to 2532px against 937px of content, the overflow pushed the
 * footer past the end of the scrollable area, and the page read as having no footer at all.
 *
 * Converting Sass to CSS preserved the declaration and lost the context that made it a no-op. Any
 * other percentage height carried over from that stylesheet is suspect for the same reason.
 */
.hero-bg {
	position: relative;
	background-image: url("/assets/image/hero-bg.jpg");
	background-image: image-set(
		url("/assets/image/hero-bg.avif") type("image/avif"),
		url("/assets/image/hero-bg.webp") type("image/webp"),
		url("/assets/image/hero-bg.jpg") type("image/jpeg"));
	background-position: center top;
	background-attachment: fixed;
	background-size: cover;
}

.hero-bg::before {
	content: " ";
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	width: 100%;
	height: 10%;
	background-image: url("/assets/image/divider.png");
	background-image: image-set(
		url("/assets/image/divider.avif") type("image/avif"),
		url("/assets/image/divider.webp") type("image/webp"),
		url("/assets/image/divider.png") type("image/png"));
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: cover;
}

.services {
	padding-top: 1.5rem;
	padding-bottom: 7rem;
}

.services-bg {
	background-color: #2d5276 !important;
}

.about_us-bg {
	background-color: #2d5276 !important;
	background-image: url("/assets/image/footer-bg.jpg");
	background-image: image-set(
		url("/assets/image/footer-bg.avif") type("image/avif"),
		url("/assets/image/footer-bg.webp") type("image/webp"),
		url("/assets/image/footer-bg.jpg") type("image/jpeg"));
	background-repeat: no-repeat;
	background-position: center bottom -1px;
	background-size: cover;
}

.bg-image::after {
	content: " ";
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background-position: center top;
	background-size: cover;
}

.bg-image-1::after {
	background-image: url("/assets/image/bg/bg-1.jpg");
	background-image: image-set(url("/assets/image/bg/bg-1.avif") type("image/avif"), url("/assets/image/bg/bg-1.webp") type("image/webp"), url("/assets/image/bg/bg-1.jpg") type("image/jpeg"));
}

.bg-image-2::after {
	background-image: url("/assets/image/bg/bg-2.jpg");
	background-image: image-set(url("/assets/image/bg/bg-2.avif") type("image/avif"), url("/assets/image/bg/bg-2.webp") type("image/webp"), url("/assets/image/bg/bg-2.jpg") type("image/jpeg"));
}

.bg-image-3::after {
	background-image: url("/assets/image/bg/bg-3.jpg");
	background-image: image-set(url("/assets/image/bg/bg-3.avif") type("image/avif"), url("/assets/image/bg/bg-3.webp") type("image/webp"), url("/assets/image/bg/bg-3.jpg") type("image/jpeg"));
}

.bg-image-4::after {
	background-image: url("/assets/image/bg/bg-4.jpg");
	background-image: image-set(url("/assets/image/bg/bg-4.avif") type("image/avif"), url("/assets/image/bg/bg-4.webp") type("image/webp"), url("/assets/image/bg/bg-4.jpg") type("image/jpeg"));
}

/*
 * The contact card is a two-pane layout: details on a tinted aside, the form beside it. The panes
 * run to the card's edges, so they own the padding and .card-body gives up its own - otherwise the
 * tint stops short of three sides and reads as a stray rectangle inside the card rather than as
 * half of it. overflow keeps it inside the corner radius.
 */
.contact-card {
	overflow: hidden;
}

.contact-card > .card-body {
	padding: 0;
}

/*
 * A tint rather than a border. --tblr-primary is this application's brand blue, so mixing it into
 * the card surface at a low percentage ties the aside to the brand without introducing a colour,
 * and it follows the palette into dark mode on its own.
 */
.contact-card-aside {
	background-color: color-mix(in srgb, var(--tblr-primary) 7%, var(--tblr-card-bg, #fff));
}

@supports not (background-color: color-mix(in srgb, red 50%, blue)) {
	.contact-card-aside {
		background-color: rgba(var(--tblr-primary-rgb), .07);
	}
}