/* =====================================================================
   Halloween header, mobile menu and footer: only on the Halloween page
   (body.mhw-page) and its checkout steps (body.mhw-checkout). The NORFLO
   header and footer markup is the theme's own; the logo file is swapped
   for assets/logo-halloween.svg in halloween.php (witch hat + bat).
   ===================================================================== */

:is(body.mhw-page, body.mhw-checkout) {
	--hwc-night: #070B17;
	--hwc-plum: #121A33;
	--hwc-line: rgba(140, 170, 255, .14);
	--hwc-text: #D6DEF3;
	--hwc-muted: #9AA6C4;
	--hwc-pumpkin: #FF7A1A;
	--hwc-pumpkin-hover: #FF9440;
	--hwc-pumpkin-text: #FFA45C;
	--hwc-pumpkin-ink: #2B1100;
}

/* ---------- Header ------------------------------------------------------ */
:is(body.mhw-page, body.mhw-checkout) .navbar {
	background: linear-gradient(180deg, rgba(10, 15, 31, .95) 0%, rgba(10, 15, 31, .84) 100%) !important;
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 rgba(255, 122, 26, .3), 0 16px 40px -20px rgba(0, 0, 0, .7) !important;
}
/* A cobweb in the top-left corner and a spider dangling below the bar */
:is(body.mhw-page, body.mhw-checkout) .navbar::before {
	content: ""; position: absolute; top: 0; left: 0; width: 76px; height: 76px; pointer-events: none;
	background: url(assets/web.svg) 0 0 / 76px auto no-repeat; opacity: .35;
}
:is(body.mhw-page, body.mhw-checkout) .navbar::after {
	content: ""; position: absolute; top: 100%; right: 23%; width: 26px; height: 74px; pointer-events: none;
	background:
		url(assets/spider.svg?v=3) center bottom / 26px auto no-repeat,
		linear-gradient(rgba(190, 210, 255, .45), rgba(190, 210, 255, .45)) center top / 1px calc(100% - 20px) no-repeat;
	transform-origin: 50% 0;
	animation: mhwSwing 3.6s ease-in-out infinite alternate;
}
@keyframes mhwSwing { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }

/* The Halloween logo is taller (the hat): same width, the hat rises above the usual line */
:is(body.mhw-page, body.mhw-checkout) .navbar-brand img.main-logo { width: 140px !important; height: auto !important; margin-top: -18px; }

:is(body.mhw-page, body.mhw-checkout) .navbar .nav-link { color: #B8C3DE !important; }
:is(body.mhw-page, body.mhw-checkout) .navbar .nav-link:is(:hover, :focus-visible),
:is(body.mhw-page, body.mhw-checkout) .navbar .dropdown-menu a:is(:hover, :focus-visible) { color: var(--hwc-pumpkin-text) !important; }
:is(body.mhw-page, body.mhw-checkout) .navbar .dropdown-menu { background: var(--hwc-plum) !important; border: 1px solid var(--hwc-line) !important; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8) !important; }
:is(body.mhw-page, body.mhw-checkout) .navbar .dropdown-menu a { color: var(--hwc-text) !important; }
/* "Free Trial": pumpkin */
:is(body.mhw-page, body.mhw-checkout) .navbar .btn { background-color: var(--hwc-pumpkin) !important; color: var(--hwc-pumpkin-ink) !important; font-weight: 800; box-shadow: 0 10px 26px -10px rgba(255, 122, 26, .8); }
:is(body.mhw-page, body.mhw-checkout) .navbar .btn:hover { background-color: var(--hwc-pumpkin-hover) !important; color: var(--hwc-pumpkin-ink) !important; }
:is(body.mhw-page, body.mhw-checkout) .navbar .burger-menu span { background-color: #FFFFFF !important; }

/* Mobile menu panel */
:is(body.mhw-page, body.mhw-checkout) .responsive-navbar.offcanvas { background: var(--hwc-night) url(assets/web.svg) right -20px top -10px / 140px auto no-repeat !important; color: var(--hwc-text); }
:is(body.mhw-page, body.mhw-checkout) .responsive-navbar .logo-responsive-option { color: #FFFFFF !important; }
:is(body.mhw-page, body.mhw-checkout) .responsive-navbar .close-btn { color: #FFFFFF !important; background: transparent !important; }
:is(body.mhw-page, body.mhw-checkout) .responsive-navbar :is(.nav-link, a) { color: var(--hwc-text) !important; border-color: var(--hwc-line) !important; }
:is(body.mhw-page, body.mhw-checkout) .responsive-navbar :is(.nav-link, a):hover { color: var(--hwc-pumpkin-text) !important; }

/* ---------- Footer ------------------------------------------------------ */
:is(body.mhw-page, body.mhw-checkout) .footer-area {
	position: relative; overflow: hidden;
	background-color: var(--hwc-night) !important;
	background-image:
		radial-gradient(640px 320px at 86% 0%, rgba(120, 160, 255, .16), transparent 70%),
		radial-gradient(560px 280px at 6% 100%, rgba(255, 122, 26, .12), transparent 70%) !important;
	background-size: auto !important;
}
/* Cobweb top right, a moon, and two pumpkins on the ground line */
:is(body.mhw-page, body.mhw-checkout) .footer-area::before {
	content: ""; position: absolute; top: 0; right: 0; width: 220px; height: 220px; pointer-events: none;
	background: url(assets/web.svg) 0 0 / contain no-repeat; transform: scaleX(-1); opacity: .6;
}
:is(body.mhw-page, body.mhw-checkout) .footer-area::after {
	content: ""; position: absolute; right: max(16px, calc(50% - 680px)); bottom: 0; width: 190px; height: 101px; pointer-events: none;
	background: url(assets/pumpkins.svg) center bottom / contain no-repeat;
	filter: drop-shadow(0 0 16px rgba(255, 140, 30, .45));
	opacity: .95;
}
:is(body.mhw-page, body.mhw-checkout) .footer-area .container { position: relative; z-index: 1; }
:is(body.mhw-page, body.mhw-checkout) .footer-logo img { width: 200px; height: auto; margin-top: -26px; }
:is(body.mhw-page, body.mhw-checkout) .footer-area :is(h3, h4) { color: #FFFFFF !important; }
:is(body.mhw-page, body.mhw-checkout) .footer-area h3::after {
	content: ""; display: block; width: 28px; height: 3px; margin-top: 10px; border-radius: 2px;
	background: linear-gradient(90deg, var(--hwc-pumpkin), #FFD36B);
}
:is(body.mhw-page, body.mhw-checkout) .footer-area p { color: var(--hwc-muted) !important; }
:is(body.mhw-page, body.mhw-checkout) .footer-area .menu a,
:is(body.mhw-page, body.mhw-checkout) .footer-area .social-links a { color: var(--hwc-muted) !important; }
:is(body.mhw-page, body.mhw-checkout) .footer-area .menu a:is(:hover, :focus-visible),
:is(body.mhw-page, body.mhw-checkout) .footer-area .social-links a:is(:hover, :focus-visible) { color: var(--hwc-pumpkin-text) !important; }
:is(body.mhw-page, body.mhw-checkout) .copyright-area { background: #060A16 !important; border-top: 1px solid var(--hwc-line); }
:is(body.mhw-page, body.mhw-checkout) .copyright-area :is(p, div, span) { color: #8390B0 !important; }
:is(body.mhw-page, body.mhw-checkout) .copyright-area a { color: #8CC8FF !important; }

@media (max-width: 991px) {
	:is(body.mhw-page, body.mhw-checkout) .navbar::after { right: 30%; height: 56px; }
	:is(body.mhw-page, body.mhw-checkout) .navbar::before { width: 60px; height: 60px; background-size: 60px auto; }
	:is(body.mhw-page, body.mhw-checkout) .navbar-brand img.main-logo { margin-top: -14px; }
}
@media (max-width: 640px) {
	:is(body.mhw-page, body.mhw-checkout) .footer-area::before { width: 140px; height: 140px; }
	:is(body.mhw-page, body.mhw-checkout) .footer-area::after { width: 140px; height: 74px; }
}
@media (prefers-reduced-motion: reduce) {
	:is(body.mhw-page, body.mhw-checkout) .navbar::after { animation: none; }
}

/* Mobile menu: the theme's light sub-menu, its toggle square and the header rule */
:is(body.mhw-page, body.mhw-checkout) .responsive-navbar .offcanvas-header { border-bottom-color: var(--hwc-line) !important; }
:is(body.mhw-page, body.mhw-checkout) .responsive-navbar .sub-menu { background: var(--hwc-plum) !important; border-radius: 10px; }
:is(body.mhw-page, body.mhw-checkout) .responsive-navbar .menu-item-has-children::before { background-color: rgba(255, 255, 255, .08) !important; color: var(--hwc-pumpkin-text) !important; border-radius: 6px; }
:is(body.mhw-page, body.mhw-checkout) .responsive-navbar .logo-responsive-option { text-decoration: none; }
:is(body.mhw-page, body.mhw-checkout) .responsive-navbar .logo { text-decoration: none !important; }
@media (max-width: 640px) {
	/* A shorter thread, beside the menu button, clear of the heading text */
	:is(body.mhw-page, body.mhw-checkout) .navbar::after { right: 74px; width: 20px; height: 34px; background-size: 18px auto, 1px calc(100% - 14px); }
}

/* Back-to-top button: pumpkin like the other buttons */
:is(body.mhw-page, body.mhw-checkout) #backtotop { background-color: var(--hwc-pumpkin) !important; color: var(--hwc-pumpkin-ink) !important; box-shadow: 0 10px 26px -10px rgba(255, 122, 26, .8); }
:is(body.mhw-page, body.mhw-checkout) #backtotop:hover { background-color: var(--hwc-pumpkin-hover) !important; }
:is(body.mhw-page, body.mhw-checkout) #backtotop * { color: var(--hwc-pumpkin-ink) !important; }

/* Desktop dropdown ("Setup Guides"): the theme paints .dropdown-item black with !important, which was unreadable on the dark panel */
:is(body.mhw-page, body.mhw-checkout) .navbar .navbar-nav .dropdown-menu .dropdown-item,
:is(body.mhw-page, body.mhw-checkout) .navbar .navbar-nav .dropdown-menu .dropdown-item.nav-link,
:is(body.mhw-page, body.mhw-checkout) .navbar .navbar-nav .dropdown-menu li a { color: var(--hwc-text) !important; background: transparent !important; }
:is(body.mhw-page, body.mhw-checkout) .navbar .navbar-nav .dropdown-menu .dropdown-item:is(:hover, :focus-visible, .active),
:is(body.mhw-page, body.mhw-checkout) .navbar .navbar-nav .dropdown-menu li a:is(:hover, :focus-visible) { color: var(--hwc-pumpkin-text) !important; background: rgba(255, 122, 26, .08) !important; }