/**
 * Brand blue instead of charcoal/black backgrounds on the front booking pages, Terms, FAQ, customer login and portal
 * (home, /book/) and the shared top bar + footer + phone menu sheet.
 * Loaded last (new file name, so Cloudflare fetches it fresh). Red stays as the accent.
 * Blue = the logo's blue #0c4a7d; footer uses the deeper #083659.
 */

/* ---------- Top bar ---------- */
html body #navbar#navbar.navbar,
html body #navbar#navbar.navbar.scrolled {
	background: #0c4a7d !important;
	border-bottom-color: #0c4a7d !important;
	box-shadow: 0 8px 24px rgba(8, 54, 89, 0.28) !important;
}
html body #navbar#navbar.navbar::after { background: #0c4a7d !important; }

/* ---------- Phone menu sheet ---------- */
@media (max-width: 768px) {
	html body #nav-links#nav-links.lp-burger-sheet-portaled,
	html body.menu-open #nav-links#nav-links.lp-burger-sheet-portaled {
		background:
			repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 110px),
			radial-gradient(420px 260px at 100% 0%, rgba(173, 3, 3, 0.3), transparent 70%),
			#0c4a7d !important;
		box-shadow: 0 -18px 50px rgba(8, 54, 89, 0.5) !important;
	}
}

/* ---------- Footer ---------- */
html body footer.footer.footer {
	background: #083659 !important;
}

/* ---------- Page background behind the white card (desktop): white, card kept ---------- */
@media (min-width: 769px) {
	html body.has-booking-hero .booking-hero.booking-hero--with-form.booking-hero--compact.lqb,
	html body.has-booking-hero .booking-hero.lqb,
	html body .lqb.booking-hero,
	html body .lqh {
		background: #ffffff !important;
	}
	html body.has-booking-hero:not(.has-customer-dashboard) {
		background-color: #ffffff !important;
	}
	.lqb-shell,
	.lqh .lqh-card {
		box-shadow: 0 18px 50px rgba(15, 23, 42, 0.14);
		border-left: 1px solid #d9e3ee;
		border-right: 1px solid #d9e3ee;
		border-bottom: 1px solid #d9e3ee;
	}
}

/* ---------- Category strips on home ---------- */
html body .lqh .lqh-cat-head {
	background:
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 70px),
		#0c4a7d !important;
}
html body .lqh .lqh-jump a:hover {
	background: #0c4a7d !important;
	color: #ffffff !important;
}

/* ---------- /book/ details that were black ---------- */
html body .lqb .lqb-steps li.is-done .lqb-num {
	background: #0c4a7d !important;
}
html body.has-booking-hero:not(.has-customer-dashboard) .lqb .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-month-prev-btn:hover,
html body.has-booking-hero:not(.has-customer-dashboard) .lqb .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-month-next-btn:hover {
	background: #0c4a7d !important;
	color: #ffffff !important;
}

/* ---------- Phone action bar on /book/ ---------- */
@media (max-width: 768px) {
	html body.has-booking-hero .lp-floating-cart-fab.lp-booking-action-bar {
		background: #0c4a7d !important;
		box-shadow: 0 -10px 30px rgba(8, 54, 89, 0.35) !important;
	}
}

/* ---------- Logo: the two-tone logo needs a light plate on blue (its blue half would vanish) ---------- */
html body #navbar#navbar.navbar .logo-img,
html body #navbar#navbar.navbar .logo img {
	background: #ffffff !important;
	padding: 5px !important;
	border-radius: 11px !important;
	box-sizing: border-box !important;
	object-fit: contain !important;
}

/* =====================================================================
 * Terms, FAQ, customer login and customer portal (same blue, red stays)
 * ===================================================================== */

/* Terms of Service */
html body .lqt .lqt-hero,
html body header.lqt-hero { background-color: #0c4a7d !important; }
html body .lqt .lqt-cta { background: #0c4a7d !important; }
html body .lqt .lqt-sec h2 span { background: #0c4a7d !important; }

/* FAQ / contact */
html body section.contact-hero.contact-hero,
html body .contact-hero { background: #0c4a7d !important; }

/* Customer login page (/login-account/) */
html:has(body.has-login-page.page-id-2013),
html:has(body.has-login-page.page-id-2013) body { background: #ffffff !important; }
html body.page-id-2013 { background: #ffffff !important; }
html body section.lql.lql { background: #ffffff !important; }
html body .lql-card { box-shadow: 0 18px 50px rgba(15, 23, 42, 0.14) !important; }
html body aside.lql-brand.lql-brand { background-color: #115a94 !important; }

/* Customer portal: redefine the charcoal tokens + direct fallbacks */
html body .lqp { --lqp-charcoal: #0c4a7d; --lqp-charcoal-2: #115a94; }
html body header.lqp-bar.lqp-bar,
html body nav.lqp-mnav.lqp-mnav { background: #0c4a7d !important; }
html body header.lqp-welcome.lqp-welcome { background-color: #0c4a7d !important; }
html body button.lqp-seg-btn.lqp-seg-btn.is-active { background: #0c4a7d !important; }

/* ---------- Red text on blue is hard to read: use a light coral there (red stays on white areas) ---------- */
html body .lql-brand .lql-kicker,
html body .lql-brand .hl-red { color: #ffb0b0 !important; }
html body .lqp-welcome .lqp-welcome-date { color: #ffc2c2 !important; }
html body .contact-hero .contact-eyebrow,
html body .contact-hero .contact-eyebrow span,
html body .contact-hero .contact-eyebrow i {
	color: #ffc2c2 !important;
}
html body .contact-hero .contact-eyebrow { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.28) !important; }

/* ---------- Portal bar logo: the two-tone logo needs a white plate on blue ---------- */
html body .lqp .lqp-brand img {
	background: #ffffff !important;
	padding: 4px !important;
	border-radius: 9px !important;
	box-sizing: content-box !important;
	width: 34px !important;
	height: 34px !important;
	object-fit: contain !important;
}

/* ---------- No shadow under the top bars ---------- */
html body #navbar#navbar.navbar,
html body #navbar#navbar.navbar.scrolled,
html body header.lqp-bar.lqp-bar {
	box-shadow: none !important;
}

/* =====================================================================
 * Let the phone browser hide its address bar when the page scrolls.
 * The document must be the one plain scroller: no overscroll-behavior,
 * no touch-action limits, and horizontal overflow clipped (not hidden,
 * which turns the root into a scroll container in some browsers).
 * ===================================================================== */
html {
	overflow-x: clip !important;
	overflow-y: visible !important;
	overscroll-behavior: auto !important;
	overscroll-behavior-y: auto !important;
	touch-action: auto !important;
}
body {
	overflow-x: clip !important;
	overscroll-behavior: auto !important;
	overscroll-behavior-y: auto !important;
	touch-action: auto !important;
}
body.menu-open { overflow: hidden !important; }