/* demo1.css (UPDATED – REMOVE SCROLL LOCK FROM CSS)
   - Scroll lock REMOVED from this CSS so subpages can scroll
   - Scroll lock stays ONLY in index.html (inline <style>)
   - Home page stays perfect via index.html overrides (body.home)
   - Subpages get real bottom padding + nav stays readable
   - FIX: nav TEXT vertical alignment / “padding” so it doesn’t look clipped

   ✅ NEW (ONLY change you asked for):
   - Per-page background colors via body classes (home/hosting/webdev)

   ✅ NOW ALSO UPDATED (per your request):
   - FIX: portal button placement in MOBILE DRAWER (overrides header absolute rule)
   - ENHANCE: stronger “blurred glass” look when the mobile drawer is OPEN

   ✅ NEW NEW:
   - BLUR WHAT IS BEHIND the mobile drawer when it is OPEN (CLICK-SAFE backdrop)
   - Backdrop now lives on .site-nav (same stacking context) so menu links remain clickable

   ✅ FIX ADDED NOW:
   - Responsive logo image sizing for mobile (prevents huge logo on small screens)
*/

/* =========================================================
   NAV HEIGHT VAR (define early so body padding works everywhere)
   ========================================================= */
:root { --nav-h: 64px; }

/* =========================================================
   Theme variables
   ========================================================= */
.demo-1 {
	--color-text: #fff;
	--color-bg: #000;

	--color-link: #fff;
	--color-link-hover: #ac1122;
	--color-info: #ac1122;
	--color-title: #fff;
	--color-subtitle: #fff;

	/* =========================================================
	   PAGE BACKGROUNDS (ONLY NEW SECTION)
	   ========================================================= */

	/* Home (RESTORED EXACTLY AS YOU PASTED) */
	--home-bg: radial-gradient(circle at 100% 0,
		#FF7A85 0%,
		#E40E5B 22%,
		#D7263D 44%,
		#8B0A37 66%,
		#3b0a63 82%,
		#2A007A 100%
	);

	/* Hosting colors */
	--crimson-glow: #D7263D;
	--magenta-red:  #E40E5B;
	--soft-rose:    #FF7A85;
	--deep-ruby:    #8B0A37;

	--hosting-bg: radial-gradient(circle at 100% 0,
		var(--soft-rose)    0%,
		var(--magenta-red)  22%,
		var(--crimson-glow) 44%,
		var(--deep-ruby)    66%,
		#3b0a63            82%,
		#2A007A            100%
	);

	/* Webdev colors */
	--c1: #001845;
	--c2: #003173;
	--c3: #004BA0;
	--c4: #003CDE;
	--c5: #4A7CFF;

	--webdev-bg: radial-gradient(circle at 100% 0,
		var(--c5)  0%,
		var(--c4) 22%,
		var(--c3) 44%,
		var(--c2) 66%,
		var(--c1) 100%
	);

	/* Default page background */
	--page-bg: var(--home-bg);

	--spot-inner: 34vmin;
	--spot-mid: 42vmin;
	--spot-outer: 58vmin;

	--scene-size: 88vmin;
}

/* =========================================================
   PER-PAGE BACKGROUND SWITCHING
   ========================================================= */
body.demo-1.home   { --page-bg: var(--home-bg); }
body.demo-1.hosting{ --page-bg: var(--hosting-bg); }
body.demo-1.webdev { --page-bg: var(--webdev-bg); }

/* =========================================================
   PAGE BACKGROUND (SITE)
   ========================================================= */
html {
	height: 100%;
	background: transparent !important;
}

body.demo-1 {
	background-image: var(--page-bg) !important;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;

	padding-top: var(--nav-h);
	padding-bottom: 56px;
}

body.demo-1 main,
body.demo-1 .page,
body.demo-1 .container,
body.demo-1 .container-fluid {
	padding-bottom: 2px;
	box-sizing: border-box;
}

/* =========================================================
   CONTENT CONTAINER
   ========================================================= */
.demo-1 .content {
	position: relative;
	width: 100%;
	min-height: 0;
	overflow: visible;
}

.demo-1 .content::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(circle at 50% 50%,
		rgba(0,0,0,0.92) 0%,
		rgba(0,0,0,0.92) var(--spot-inner),
		rgba(0,0,0,0.55) var(--spot-mid),
		rgba(0,0,0,0.00) var(--spot-outer)
	);
}

/* =========================================================
   SCENE
   ========================================================= */
.demo-1 #scene {
	width: var(--scene-size);
	height: var(--scene-size);
	max-width: 100vw;
	max-height: 100vh;
	position: relative;
	z-index: 1;
	background: transparent !important;
	transform-origin: center center;
}

/* =========================================================
   TEXT (HOME)
   ========================================================= */
.demo-1 .content__inner {
	position: absolute;
	z-index: 2;
	text-align: center;
	pointer-events: none;
}

.content__title {
	font-family: 'Playfair Display', serif;
	font-size: clamp(2.5rem, 10vw, 10vw);
	color: #fff;
	margin: 0;
	text-shadow: 0 2px 20px rgba(0,0,0,.7);
}

.content__subtitle {
	font-size: clamp(0.75rem, 1.25em, 1.25em);
	background: linear-gradient(135deg, #ac1122, #8a0e1a);
	color: #fff;
	padding: .45em .5em;
	letter-spacing: .5em;
	text-indent: .5em;
	font-weight: bold;
	text-transform: uppercase;
}

/* =========================================================
   NAV (site-wide, safe)
   ========================================================= */
.site-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--nav-h);
	z-index: 10010;
	background: transparent;

	/* ✅ IMPORTANT: ensures pseudo-element backdrop layers reliably */
	isolation: isolate;
}

/* “Glass” look (used by JS .scrolled, and forced on non-home below) */
.site-nav.scrolled {
	background: rgba(0,0,0,.35);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid rgba(255,255,255,.08);
}

/* ✅ FIX: vertical alignment + clickable padding that won’t look clipped */
.site-nav__inner {
	max-width: 1280px;
	margin: 0 auto;
	height: 100%;
	padding: 0 20px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	position: relative;
	box-sizing: border-box;
}

/* Force consistent line metrics so text sits centered in the 64px bar */
.site-nav__logo,
.site-nav__menu a,
.client-portal-btn {
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: calc(var(--nav-h) - 8px);
	margin: 4px 0;
}

/* Logo */
.site-nav__logo {
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	padding: 0 6px;

	/* ✅ prevents logo from shrinking in tight flex layouts */
	flex-shrink: 0;
}

/* ✅ NEW: Logo image sizing (desktop + mobile) */
.site-nav__logo-img {
	display: block;
	width: auto;
	height: 48px; /* desktop default */
	max-width: 100%;
}
/* Logo image: fits nav nicely (no max-width:200px hacks) */
.site-nav__logo img {
  display: block;
  height: calc(var(--nav-h) - 5px); /* fits inside 64px nav */
  width: auto;
  max-width: 42vw;                  /* prevents taking over on small screens */
  object-fit: contain;
}

/* Mobile tweaks */
@media (max-width: 900px) {
  .site-nav__logo img {
    height: 34px;     /* nice and compact */
    max-width: 55vw;  /* allow a bit more width since menu collapses */
  }
}
/* Menu */
.site-nav__menu {
	display: flex;
	gap: 24px;
	align-items: center;
}

.site-nav__menu a {
	color: #fff;
	text-decoration: none;
	padding: 0 8px;
	border-radius: 10px;
	transition: background 160ms ease, transform 160ms ease;
}

.site-nav__menu a:hover {
	background: rgba(255,255,255,.08);
	transform: translateY(-1px);
}

/* =========================================================
   PORTAL BUTTONS (visibility controlled by classes)
   ========================================================= */
.client-portal-btn {
	gap: 6px;
	padding: 0 14px;
	background: linear-gradient(135deg, #eb6325, #faa05f);
	color: #fff;
	text-decoration: none;
	border-radius: 8px;
	font-weight: 600;
}

.portal-desktop { display: flex; }
.portal-mobile { display: none !important; }

/* Toggle (desktop hidden) */
.site-nav__toggle {
	display: none;
	background: none;
	border: 0;
	color: #fff;
	cursor: pointer;
}

/* =========================================================
   NON-HOME: keep nav readable immediately
   ========================================================= */
body.demo-1:not(.home) .site-nav {
	background: rgba(0,0,0,.35);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid rgba(255,255,255,.08);
}

body.demo-1:not(.home) .site-nav__logo,
body.demo-1:not(.home) .site-nav__menu a {
	text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

/* =========================================================
   MOBILE DRAWER + VISIBILITY RULES + CLICK-SAFE BACKDROP BLUR
   ========================================================= */
@media (max-width: 900px) {

	/* ✅ Resize logo on mobile */
	.site-nav__logo-img {
		height: 32px;
	}

	/* ✅ MOBILE BLUR: force frosted look on ALL pages (subpages too) – overrides .site:not(.visible) */
	.site-nav::after,
	body.demo-1 .site-nav::after {
		backdrop-filter: blur(28px) saturate(160%) !important;
		-webkit-backdrop-filter: blur(28px) saturate(160%) !important;
	}
	.site-nav__menu,
	body.demo-1 .site-nav__menu {
		backdrop-filter: blur(22px) saturate(170%) !important;
		-webkit-backdrop-filter: blur(22px) saturate(170%) !important;
	}
	.site-nav__menu.open,
	body.demo-1 .site-nav__menu.open {
		backdrop-filter: blur(28px) saturate(185%) !important;
		-webkit-backdrop-filter: blur(28px) saturate(185%) !important;
	}

	/* ✅ CLICK-SAFE blurred backdrop (UNDER drawer, SAME stacking context) – strong blur like nav bar */
	.site-nav::after {
		content: "";
		position: fixed;
		inset: 0;

		/* below drawer (10011) but within nav stacking context */
		z-index: 10010;

		opacity: 0;
		pointer-events: none;
		transition: opacity .26s ease;

		background: rgba(0,0,0,0.35);
		backdrop-filter: blur(28px) saturate(160%);
		-webkit-backdrop-filter: blur(28px) saturate(160%);
		box-shadow: inset 0 0 120px rgba(0,0,0,0.3);
	}

	/* show backdrop only when drawer is open */
	.site-nav:has(.site-nav__menu.open)::after {
		opacity: 1;
		pointer-events: auto; /* blocks the page behind, NOT the drawer */
	}

	/* Hamburger pinned top-right - POLISHED + CENTERED */
	.site-nav__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;

		position: absolute;
		right: 16px;
		top: 50%;
		transform: translateY(-50%);

		width: 44px;
		height: 44px;

		border-radius: 50%;
		border: 1px solid rgba(255,255,255,0.15);

		background: rgba(20, 10, 40, 0.45);
		backdrop-filter: blur(10px) saturate(140%);
		-webkit-backdrop-filter: blur(10px) saturate(140%);

		line-height: 0;
		color: #fff;
		font-size: 22px;

		z-index: 10012;

		transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
	}

	.site-nav__toggle::before {
		display: block;
		line-height: 1;
		transform: translateY(-1px);
	}

	.site-nav__toggle:hover {
		background: rgba(255,255,255,0.12);
		box-shadow: 0 6px 20px rgba(0,0,0,0.35);
	}

	.site-nav__toggle:active {
		transform: translateY(-50%) scale(0.96);
	}

	.portal-desktop { display: none !important; }

	.portal-mobile {
		display: flex !important;
		margin-top: 12px;
		justify-content: center;
	}

	/* Drawer */
	.site-nav__menu {
		position: fixed;
		top: 0;
		right: 0;
		height: 100vh;
		width: min(92vw, 420px);
		padding: calc(var(--nav-h) + 16px) 22px 28px;

		display: flex;
		flex-direction: column;
		gap: 14px;

		background: linear-gradient(
			180deg,
			rgba(20,10,40,.42),
			rgba(10,5,25,.34)
		);
		backdrop-filter: blur(22px) saturate(170%);
		-webkit-backdrop-filter: blur(22px) saturate(170%);
		border-left: 1px solid rgba(255,255,255,.14);

		box-shadow:
			-24px 0 80px rgba(0,0,0,0.55),
			-2px 0 0 rgba(255,255,255,0.06) inset;

		transform: translateX(110%);
		opacity: 0;
		pointer-events: none;
		transition: transform .26s ease, opacity .26s ease;

		z-index: 10011;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;

		isolation: isolate;
	}

	.site-nav__menu::before {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: -1;

		opacity: 0;
		transition: opacity .26s ease;

		background:
			radial-gradient(circle at 18% 10%,
				rgba(201,225,255,0.20) 0%,
				rgba(111,177,255,0.10) 22%,
				transparent 58%),
			radial-gradient(circle at 80% 22%,
				rgba(255,255,255,0.10) 0%,
				transparent 55%),
			linear-gradient(180deg,
				rgba(255,255,255,0.06),
				rgba(255,255,255,0.00) 40%,
				rgba(0,0,0,0.10) 100%);
	}

	.site-nav__menu.open {
		transform: translateX(0);
		opacity: 1;
		pointer-events: auto;

		background: linear-gradient(
			180deg,
			rgba(20,10,40,.50),
			rgba(10,5,25,.40)
		);
		backdrop-filter: blur(28px) saturate(185%);
		-webkit-backdrop-filter: blur(28px) saturate(185%);
	}

	.site-nav__menu.open::before { opacity: 1; }

	.site-nav__menu a {
		font-size: 20px;
		padding: 12px 10px;
		border-radius: 10px;
		font-weight: 600;
		transition: background 160ms ease, transform 160ms ease;

		height: auto;
		margin: 0;
		line-height: 1.2;
		display: block;
	}

	.site-nav__menu a:hover {
		background: rgba(255,255,255,.08);
		transform: translateX(2px);
	}

	/* ✅ FIX: PORTAL BUTTON IN MOBILE DRAWER */
	.site-nav__menu .portal-mobile { width: 100%; }

	.site-nav__menu .portal-mobile.client-portal-btn,
	.site-nav__menu .portal-mobile .client-portal-btn,
	.site-nav__menu .client-portal-btn {
		position: static !important;
		right: auto !important;
		top: auto !important;

		width: 100%;
		justify-content: center;

		height: auto !important;
		margin: 16px 0 0;
		padding: 12px 14px;

		border-radius: 12px;
	}

	.site-nav__menu .client-portal-btn span {
		display: inline !important;
	}

	.site-nav__menu .portal-mobile {
		margin-top: 16px;
		padding-top: 16px;
		border-top: 1px solid rgba(255,255,255,0.14);
	}

	.demo-1 { --scene-size: 82vmin; }

	.chatbot-widget,
	#chatbot,
	#chatbot-widget,
	#chat-widget,
	.chat-widget,
	iframe[src*="chat"],
	iframe[src*="bot"] {
		z-index: 10000 !important;
	}
}


/* =========================================================
   COMPATIBILITY: keep safe defaults (do NOT lock scroll here)
   ========================================================= */
body.demo-1 {
	position: relative;
	overflow: auto;
	overscroll-behavior: auto;
}

/* =========================================================
   reCAPTCHA: hide floating badge only
   ========================================================= */
.grecaptcha-badge {
	visibility: hidden !important;
}