/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */


/* Industrial retro-futurism: brushed steel, gunmetal, chrome — monochrome metallic, no hazard/accent colour. Torchwood-style frosted-grey panels over the animated background. */
:root {
	--lmw-void: #0d0f10;
	--lmw-logo-blue: #003c8a;
	--lmw-gunmetal: #23282c;
	--lmw-steel: #8b95a1;
	--lmw-chrome: #c9d3e0;
	--lmw-chrome-bright: #eef2f5;
	/* darkened so nav-link text stays >= 4.5:1 contrast against every band, not just the dark ones */
	--lmw-steel-gradient: repeating-linear-gradient(115deg, #4c5257 0px, #4c5257 14px, #181b1e 14px, #181b1e 18px, #3a3e42 18px, #3a3e42 26px, #23282c 26px, #23282c 32px);
	--lmw-corrugated: repeating-linear-gradient(115deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 3px, rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 6px);
	/* corner boss: raised rounded pad molded into the panel, with a machined
	   groove cut into it, and the bolt head sitting down inside the groove */
	--lmw-bolt:
		radial-gradient(circle at 38% 32%, #f6f8f9 0%, #e4e8eb 16%, #aab2b9 32%, #565c61 44%, transparent 46%),
		radial-gradient(circle at 50% 50%, transparent 44%, rgba(0,0,0,0.55) 46%, rgba(0,0,0,0.5) 56%, rgba(255,255,255,0.28) 58%, rgba(255,255,255,0.14) 62%, transparent 64%),
		radial-gradient(circle at 32% 24%, #9aa2a9 0%, #6b7278 42%, #3a3e42 78%, #202326 100%);
	/* square gusset plate — perfectly flat, exactly the frame's own colour, no gradient/bevel of
	   its own, so there's no visible seam between it and the border it's part of */
	--lmw-gusset: var(--lmw-steel);
}

/* corner bolt heads — riveted-plate look on framed panels, no markup needed */
.card, .btn-primary, .btn.btn-primary, .btn-outline-secondary {
	position: relative;
}

.btn-primary, .btn-outline-secondary {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

/* same flush gusset treatment as the panels, scaled down for a button-sized frame */
.btn-primary::before, .btn-primary::after,
.btn-outline-secondary::before, .btn-outline-secondary::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 2px;
	background: var(--lmw-bolt) center / 60% 60% no-repeat, var(--lmw-gusset);
	box-shadow: none;
	z-index: 2;
	pointer-events: none;
}

.btn-primary::before, .btn-outline-secondary::before { top: -3px; left: -3px; }
.btn-primary::after, .btn-outline-secondary::after { bottom: -3px; right: -3px; }

h1, h2, h3, h4, h5, h6,
.navbar-brand, .lmw-display {
	font-family: 'Michroma', 'Space Grotesk', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* subtle cool-metal glow on display headings inside panels */
.lmw-panel h1, .lmw-panel h2, .lmw-panel h3,
.card h1, .card h2, .card h3,
.card-body h5 {
	text-shadow: 0 0 1px rgba(201, 211, 224, 0.5), 0 0 14px rgba(201, 211, 224, 0.15);
	/* long single-word product names (e.g. "Trailhauler") must wrap inside a narrow grid
	   column instead of overflowing into the next card */
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Bootstrap flex/grid columns default to min-width: auto, so an unbreakable long word can
   force a column wider than its track and bleed into the next one — reset it everywhere. */
.row > [class*="col-"] {
	min-width: 0;
}

a.navbar-brand {
	white-space: normal;
	text-align: center;
	word-break: break-all;
}

a {
	color: #ffffff;
	text-decoration-color: #ffffff;
}

.btn-primary {
	color: #ffffff;
	background: var(--lmw-gunmetal);
	background-image: var(--lmw-corrugated);
	border: 6px solid var(--lmw-steel);
	border-radius: 1px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 4px rgba(0,0,0,0.4);
}

.btn-primary:hover,
.btn-primary:focus {
	color: var(--lmw-void);
	background: var(--lmw-chrome-bright);
	background-image: none;
	border-color: var(--lmw-chrome-bright);
	box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
	color: #ffffff;
	background: var(--lmw-gunmetal);
	border-color: var(--lmw-steel);
}

.btn-outline-secondary {
	color: #ffffff;
	background: transparent;
	border: 6px solid var(--lmw-steel);
	border-radius: 1px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
	color: var(--lmw-void);
	background: var(--lmw-chrome);
	border-color: var(--lmw-chrome);
}

/* Bootstrap 4.3.1 is vendored here and has no gap-* utilities (added in Bootstrap 5.1) —
   use real flexbox gap directly for button rows instead of a dead Bootstrap class */
.lmw-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
	font-size: 14px;
}

@media (min-width: 768px) {
	html {
		font-size: 16px;
	}
}

.border-top {
	border-top: 1px solid #e5e5e5;
}

.border-bottom {
	border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
	box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
	font-size: 1rem;
	line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
	position: relative;
	min-height: 100%;
}

header {
	font-weight: 700;
}

body {
	font-weight: 400;
	background: var(--lmw-logo-blue);
	color: #ffffff;
	/* sticky footer: on pages shorter than the window, the content area grows so the footer
	   sits at the bottom instead of floating mid-screen */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

body > .container {
	flex: 1 0 auto;
}

body > footer {
	margin-top: auto;
}

/* lava-lamp background: deep logo-blue base, slow black blobs drifting behind everything */
.lmw-lavalamp {
	position: fixed;
	inset: 0;
	z-index: -3;
	overflow: hidden;
	background: radial-gradient(ellipse at 50% 0%, #0c357f 0%, #062255 55%, #02102b 100%);
}

.lmw-lavalamp::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px);
	pointer-events: none;
}

.lmw-blob {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle at 38% 35%, #000000 0%, #000000 68%, rgba(0,0,0,0) 88%);
	filter: blur(10px);
	opacity: 0.98;
	will-change: transform;
}

.lmw-blob.b1 { width: 440px; height: 440px; left: -100px; top: 6%; animation: lmwLava1 20s ease-in-out infinite; }
.lmw-blob.b2 { width: 340px; height: 340px; right: -80px; top: 52%; animation: lmwLava2 24s ease-in-out infinite; }
.lmw-blob.b3 { width: 280px; height: 280px; left: 28%; top: 68%; animation: lmwLava3 16s ease-in-out infinite; }
.lmw-blob.b4 { width: 380px; height: 380px; right: 12%; top: 2%; animation: lmwLava4 22s ease-in-out infinite; }
.lmw-blob.b5 { width: 220px; height: 220px; left: 52%; top: 30%; animation: lmwLava5 14s ease-in-out infinite; }

@keyframes lmwLava1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	25% { transform: translate(140px, 170px) scale(1.25); }
	50% { transform: translate(60px, 340px) scale(0.8); }
	75% { transform: translate(-100px, 140px) scale(1.15); }
}

@keyframes lmwLava2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	30% { transform: translate(-130px, -160px) scale(0.85); }
	60% { transform: translate(-50px, -300px) scale(1.3); }
	85% { transform: translate(90px, -120px) scale(0.9); }
}

@keyframes lmwLava3 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33% { transform: translate(110px, -130px) scale(1.3); }
	66% { transform: translate(-90px, -260px) scale(0.75); }
}

@keyframes lmwLava4 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	40% { transform: translate(-150px, 190px) scale(0.85); }
	70% { transform: translate(-70px, 360px) scale(1.2); }
}

@keyframes lmwLava5 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(130px, 230px) scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
	.lmw-blob { animation: none; }
}

footer.text-muted {
	color: #ffffff !important;
	/* same corrugated metal pattern as the navbar, so the frame sits on matching background */
	background: var(--lmw-steel-gradient);
	/* matching trim line, mirrored onto the top edge since the footer sits at the bottom of the page */
	border-top: 10px solid var(--lmw-steel) !important;
	box-shadow: inset 0 3px 0 rgba(0,0,0,0.5), 0 -2px 10px rgba(0,0,0,0.5);
}

/* real flexbox gap — Bootstrap 4.3.1 (vendored here) has no gap-* utilities */
.lmw-icon-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.navbar-light {
	/* corrugated metal pattern behind the bar; each nav link gets its own flat framed
	   button on top of it so the text still sits on a clean, readable surface */
	background: var(--lmw-steel-gradient) !important;
	border-bottom: 10px solid var(--lmw-steel) !important;
	box-shadow: inset 0 -3px 0 rgba(0,0,0,0.5), 0 2px 10px rgba(0,0,0,0.5);
	padding-top: 18px;
	padding-bottom: 18px;
}

/* no outer frame around the whole nav area any more — the logo and each nav item
   carry their own frame now, so this is just a flex layout wrapper with generous
   breathing room between the logo cluster and the nav-link cluster */
.lmw-navbar-frame {
	gap: 28px;
	flex-wrap: wrap;
	row-gap: 16px;
}

.lmw-footer-frame {
	position: relative;
	background: var(--lmw-gunmetal);
	border: 4px solid var(--lmw-steel);
	border-radius: 1px;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
	padding: 24px 20px;
}

.lmw-footer-frame::before, .lmw-footer-frame::after {
	content: "";
	position: absolute;
	width: 14px;
	height: 14px;
	border-radius: 2px;
	background: var(--lmw-bolt) center / 60% 60% no-repeat, var(--lmw-gusset);
	z-index: 2;
	pointer-events: none;
}

.lmw-footer-frame::before { top: -3px; left: -3px; }
.lmw-footer-frame::after { bottom: -3px; right: -3px; }

/* gap between the individual nav-item buttons themselves */
.navbar-light .navbar-nav {
	gap: 14px;
	row-gap: 12px;
}

/* each nav item is its own bolted button, same family as .btn-outline-secondary, nested
   inside the outer .lmw-navbar-frame chassis */
.navbar-light .nav-link {
	position: relative;
	color: #ffffff !important;
	background: var(--lmw-gunmetal);
	border: 3px solid var(--lmw-steel);
	border-radius: 1px;
	padding: 10px 18px !important;
	/* matches the light, wide-set geometric sans used in the "Asset Development" logo type */
	font-family: 'Jost', sans-serif;
	font-weight: 500;
	font-size: 1.15rem;
	letter-spacing: 0.03em;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
	display: inline-block;
}

.navbar-light .nav-link::before, .navbar-light .nav-link::after {
	content: "";
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 2px;
	background: var(--lmw-bolt) center / 60% 60% no-repeat, var(--lmw-gusset);
	z-index: 2;
	pointer-events: none;
}

.navbar-light .nav-link::before { top: -3px; left: -3px; }
.navbar-light .nav-link::after { bottom: -3px; right: -3px; }

/* logo gets its own frame too, with a beveled emboss edge so it stands out as the
   most prominent item rather than reading as just another nav button */
/* same chamfered rounded-corner treatment as .lmw-panel — rounded top-left/bottom-right,
   sharp top-right/bottom-left where the gusset bolts sit */
.lmw-logo-frame {
	position: relative;
	width: 190px;
	height: 190px;
	background: var(--lmw-gunmetal);
	border: 4px solid var(--lmw-steel);
	border-radius: 40px 0 40px 0;
	box-shadow:
		inset 0 3px 0 rgba(255,255,255,0.25),
		inset 0 -3px 0 rgba(0,0,0,0.55),
		inset 3px 0 0 rgba(255,255,255,0.12),
		inset -3px 0 0 rgba(0,0,0,0.4);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.navbar-brand:hover .lmw-logo-frame {
	border-color: var(--lmw-chrome-bright);
	box-shadow:
		inset 0 3px 0 rgba(255,255,255,0.25),
		inset 0 -3px 0 rgba(0,0,0,0.55),
		inset 3px 0 0 rgba(255,255,255,0.12),
		inset -3px 0 0 rgba(0,0,0,0.4),
		0 0 20px rgba(238, 242, 245, 0.35);
}

.lmw-logo-frame::before, .lmw-logo-frame::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	border-radius: 2px;
	background: var(--lmw-bolt) center / 60% 60% no-repeat, var(--lmw-gusset);
	z-index: 2;
	pointer-events: none;
}

.lmw-logo-frame::before { top: -4px; right: -4px; }
.lmw-logo-frame::after { bottom: -4px; left: -4px; }

.navbar-light .nav-link:hover {
	color: #ffffff !important;
	text-shadow: 0 0 8px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.6);
	border-color: var(--lmw-chrome-bright);
	transform: translateY(-2px);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4), 0 4px 10px rgba(0,0,0,0.5);
}


.link {
	color: white !important;
}


* {
	font-family: 'Space Grotesk', sans-serif;
}

/* Bootstrap card (e.g. cookie-consent modal) — solid gunmetal panel, not translucent since it floats over a scrim */
.card {
	margin-right: 45px;
	margin-left: 45px;
	margin-bottom: 32px;
	background: var(--lmw-gunmetal);
	color: #ffffff;
	border: 12px solid var(--lmw-steel);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
	/* rounded chamfer at top-left / bottom-right only, sharp square at top-right / bottom-left
	   where the gusset plate fuses flush with the frame */
	border-radius: 40px 0 40px 0;
}

/* Torchwood-style frosted panel — translucent grey glass over the animated background, used in place of the old plain white inline-style divs */
.lmw-panel {
	position: relative;
	/* near-opaque so the lava-lamp blobs don't show through and distract from the content */
	background: linear-gradient(180deg, rgba(46, 51, 56, 0.97), rgba(20, 22, 24, 0.98));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #ffffff;
	padding: 32px 36px;
	border: 12px solid var(--lmw-steel);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.45);
	margin-bottom: 48px;
	border-radius: 40px 0 40px 0;
}

/* on phones, the fixed 36px padding + 12px border eats too much of a ~375px viewport,
   especially where panels nest (e.g. a product card inside a grid inside a panel) —
   tighten the frame so there's still room left for content */
@media (max-width: 576px) {
	.lmw-panel {
		padding: 20px 18px;
		border-width: 8px;
	}
}

/* square gusset plate at the sharp 90° corners (top-right / bottom-left) — same tone as the
   border itself so it reads as one continuous piece of frame, just thicker at that corner */
.lmw-panel::before, .lmw-panel::after,
.card::before, .card::after {
	content: "";
	position: absolute;
	width: 24px;
	height: 24px;
	border-radius: 2px;
	background: var(--lmw-bolt) center / 60% 60% no-repeat, var(--lmw-gusset);
	box-shadow: none;
	z-index: 2;
	pointer-events: none;
}

.lmw-panel::before, .card::before { top: -3px; right: -3px; }
.lmw-panel::after, .card::after { bottom: -3px; left: -3px; }

/* white/light Bootstrap surfaces (tables, form fields) still need dark text for contrast */
.bg-white, .form-control, .form-select {
	color: #1c1f21;
}

/* muted secondary text on dark panels — Bootstrap's .text-muted is tuned for light backgrounds */
.lmw-muted {
	color: var(--lmw-steel);
}

.centerMedia {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}

.btn.btn-primary {
	color: #ffffff;
	background: var(--lmw-gunmetal);
	background-image: var(--lmw-corrugated);
	border-color: var(--lmw-steel);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active {
	color: var(--lmw-void);
	background: var(--lmw-chrome-bright);
	background-image: none;
	border-color: var(--lmw-chrome-bright);
}

.content-wrapper {
	position: relative;
	z-index: 1;
	padding-top: 32px;
	padding-bottom: 16px;
}

.navbar-light .navbar-toggler-icon,
.navbar-dark .navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}