"use client";

/**
 * 1:1 translation of doormile-site/includes/layout/header.php.
 * Only PHP syntax, href routes, and image paths are replaced.
 * All Elementor wrapper divs, classes, data-* attributes, IDs, srcset/sizes, inline styles, and the trailing <style> block are preserved verbatim.
 * Menu open/close + sidebar state is read from HeaderUIProvider so BodyOverlay (sibling at body level) can react.
 */

import { useEffect, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";
import { useHeaderUI } from "./HeaderUIProvider";

// Mirror of header.php $current_page_map (lines 24-35)
const CURRENT_PAGE_MAP: Record<string, string> = {
  "/": "home",
  "/how-it-works": "how-it-works",
  "/miletruth": "miletruth",
  "/solutions": "solutions",
  "/about-us": "about",
  "/blog": "blogs",
};

// Mirror of header.php $current_page_aliases (lines 37-44)
const CURRENT_PAGE_ALIASES: Record<string, string[]> = {
  home: ["home"],
  "how-it-works": ["how-it-works", "how-its-works"],
  miletruth: ["miletruth"],
  solutions: ["solutions"],
  about: ["about", "about-us", "women"],
  blogs: ["blogs"],
};

export default function Header() {
  const pathname = usePathname();
  const { isMenuOpen, isSidebarOpen, toggleMenu, toggleSidebar, closeAll } = useHeaderUI();

  const isHome = pathname === "/";
  const currentPage = CURRENT_PAGE_MAP[pathname] ?? "";

  // Mirror of header.php $dm_header_active (lines 45-47)
  const dmHeaderActive = (key: string) =>
    (CURRENT_PAGE_ALIASES[key] ?? []).includes(currentPage) ? " active" : "";

  // Mirror of header.php <script> block (lines 628-660):
  //   - on doc.ready: $('.header-hide-until-scroll').addClass('header-visible-scrolled')
  //   - on scroll:   toggleClass('dm-header-scrolled', scrollTop > 50)
  const [visibleScrolled, setVisibleScrolled] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const handle = requestAnimationFrame(() => {
      setVisibleScrolled(true);
    });
    return () => cancelAnimationFrame(handle);
  }, []);

  useEffect(() => {
    let rafId: number | null = null;
    const onScroll = () => {
      if (rafId !== null) return;
      rafId = requestAnimationFrame(() => {
        const scrolled = window.scrollY > 50;
        setIsScrolled(scrolled);
        rafId = null;
      });
    };
    onScroll();
    window.addEventListener("scroll", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      if (rafId !== null) cancelAnimationFrame(rafId);
    };
  }, []);

  // Mirror of header.php $header_style (line 21): inline opacity:0;visibility:hidden on home (before JS adds .header-visible-scrolled)
  const headerInlineStyle = isHome && !visibleScrolled ? { opacity: 0, visibility: "hidden" as const } : undefined;

  const wrapperClass = [
    "elementor-element",
    "elementor-element-466de1b",
    "e-con-full",
    "sticky-container-on",
    "e-flex",
    "cut-corner-no",
    "e-con",
    "e-parent",
    "header-hide-until-scroll",
    visibleScrolled ? "header-visible-scrolled" : "",
    isScrolled ? "dm-header-scrolled" : "",
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <>
      <header id="masthead" itemScope itemType="https://schema.org/WPHeader">
        <p className="main-title bhf-hidden" itemProp="headline">
          <Link href="/" title="Doormile" rel="home">Doormile</Link>
        </p>
        <div data-elementor-type="wp-post" data-elementor-id="5180" className="elementor elementor-5180">
          <div
            className={wrapperClass}
            data-id="466de1b"
            data-element_type="container"
            data-settings='{"position":"absolute"}'
            style={headerInlineStyle}
          >
            <div
              className="elementor-element elementor-element-e052838 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
              data-id="e052838"
              data-element_type="container"
            >
              <div
                className="elementor-element elementor-element-d681ece e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
                data-id="d681ece"
                data-element_type="container"
              >
                <div
                  className="elementor-element elementor-element-472172e e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
                  data-id="472172e"
                  data-element_type="container"
                >
                  <div
                    className="elementor-element elementor-element-2f31137 elementor-hidden-laptop elementor-hidden-tablet_extra elementor-hidden-tablet elementor-hidden-mobile_extra elementor-hidden-mobile elementor-widget elementor-widget-logico_slide_sidebar"
                    data-id="2f31137"
                    data-element_type="widget"
                    data-widget_type="logico_slide_sidebar.default"
                  >
                    <div className="elementor-widget-container">
                      <div className="logico-slide-sidebar-widget">
                        <div className="dropdown-trigger" data-id="2f31137" onClick={toggleSidebar}>
                          <span className="dropdown-trigger-icon"></span>
                        </div>
                      </div>
                      <div
                        style={{ zIndex: 100000 }}
                        className={`slide-sidebar-wrapper slide-sidebar-position-left${isSidebarOpen ? " active" : ""}`}
                        id="side-panel-2f31137"
                      >
                        <div className="slide-sidebar-close" onClick={closeAll}></div>
                        <div className="slide-sidebar">
                          <div className="slide-sidebar-content">
                            <div id="block-37" className="widget widget_block">
                              <div className="widget-wrapper">
                                <div className="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained">
                                  <figure className="wp-block-image size-full is-resized">
                                    <Image
                                      width={305}
                                      height={58}
                                      src="/images/doormile-logo.png"
                                      alt="Doormile logo"
                                      className="wp-image-5851"
                                      style={{ width: "150px", height: "auto" }}
                                      sizes="(max-width: 305px) 100vw, 305px"
                                    />
                                  </figure>

                                  <div style={{ height: "46px" }} aria-hidden="true" className="wp-block-spacer"></div>

                                  <div className="wp-block-title">
                                    <h6
                                      className="wp-block-heading has-text-font-font-family"
                                      style={{
                                        fontSize: "18px",
                                        fontStyle: "normal",
                                        fontWeight: 700,
                                        letterSpacing: "0px",
                                        textTransform: "none",
                                      }}
                                    >
                                      Our Location
                                    </h6>
                                  </div>

                                  <p>5th Floor, Vision Ultima, Street No.3, Jayabheri Enclave, Gachibowli, Hyderabad, Telangana 500032.</p>

                                  <div style={{ height: "3px" }} aria-hidden="true" className="wp-block-spacer"></div>

                                  <div className="wp-block-title">
                                    <h6
                                      className="wp-block-heading has-text-font-font-family"
                                      style={{
                                        fontSize: "18px",
                                        fontStyle: "normal",
                                        fontWeight: 700,
                                        letterSpacing: "0px",
                                        textTransform: "none",
                                      }}
                                    >
                                      Contact Us
                                    </h6>
                                  </div>

                                  <p>Tel : +91 86886 97941</p>

                                  <div style={{ height: "3px" }} aria-hidden="true" className="wp-block-spacer"></div>

                                  <div className="wp-block-title">
                                    <h6
                                      className="wp-block-heading has-text-font-font-family"
                                      style={{
                                        fontSize: "18px",
                                        fontStyle: "normal",
                                        fontWeight: 700,
                                        letterSpacing: "0px",
                                        textTransform: "none",
                                      }}
                                    >
                                      Email
                                    </h6>
                                  </div>

                                  <p>
                                    <a href="mailto:care@doormile.com" data-wplink-edit="true">care@doormile.com</a>
                                  </p>

                                  <div style={{ height: "3px" }} aria-hidden="true" className="wp-block-spacer"></div>

                                  <ul
                                    className="wp-block-social-links has-icon-color is-style-logos-only has-background is-layout-flex wp-block-social-links-is-layout-flex"
                                    style={{ backgroundColor: "#1f1f1f" }}
                                  >
                                    <li
                                      style={{ color: "#ffffff" }}
                                      className="wp-social-link wp-social-link-facebook has-white-color wp-block-social-link"
                                    >
                                      <a rel="noopener nofollow" target="_blank" href="https://www.facebook.com/" className="wp-block-social-link-anchor">
                                        <svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
                                          <path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z" />
                                        </svg>
                                        <span className="wp-block-social-link-label screen-reader-text">Facebook</span>
                                      </a>
                                    </li>

                                    <li
                                      style={{ color: "#ffffff" }}
                                      className="wp-social-link wp-social-link-x has-white-color wp-block-social-link"
                                    >
                                      <a rel="noopener nofollow" target="_blank" href="https://x.com/" className="wp-block-social-link-anchor">
                                        <svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
                                          <path d="M13.982 10.622 20.54 3h-1.554l-5.693 6.618L8.745 3H3.5l6.876 10.007L3.5 21h1.554l6.012-6.989L15.868 21h5.245l-7.131-10.378Zm-2.128 2.474-.697-.997-5.543-7.93H8l4.474 6.4.697.996 5.815 8.318h-2.387l-4.745-6.787Z" />
                                        </svg>
                                        <span className="wp-block-social-link-label screen-reader-text">X</span>
                                      </a>
                                    </li>

                                    <li
                                      style={{ color: "#ffffff" }}
                                      className="wp-social-link wp-social-link-linkedin has-white-color wp-block-social-link"
                                    >
                                      <a rel="noopener nofollow" target="_blank" href="https://www.linkedin.com/" className="wp-block-social-link-anchor">
                                        <svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
                                          <path d="M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.418,3.582,21,4.3,21h15.4c0.718,0,1.3-0.582,1.3-1.3V4.3 C21,3.582,20.418,3,19.7,3z M8.339,18.338H5.667v-8.59h2.672V18.338z M7.004,8.574c-0.857,0-1.549-0.694-1.549-1.548 c0-0.855,0.691-1.548,1.549-1.548c0.854,0,1.547,0.694,1.547,1.548C8.551,7.881,7.858,8.574,7.004,8.574z M18.339,18.338h-2.669 v-4.177c0-0.996-0.017-2.278-1.387-2.278c-1.389,0-1.601,1.086-1.601,2.206v4.249h-2.667v-8.59h2.559v1.174h0.037 c0.356-0.675,1.227-1.387,2.526-1.387c2.703,0,3.203,1.779,3.203,4.092V18.338z" />
                                        </svg>
                                        <span className="wp-block-social-link-label screen-reader-text">LinkedIn</span>
                                      </a>
                                    </li>

                                    <li
                                      style={{ color: "#ffffff" }}
                                      className="wp-social-link wp-social-link-youtube has-white-color wp-block-social-link"
                                    >
                                      <a rel="noopener nofollow" target="_blank" href="https://www.youtube.com/" className="wp-block-social-link-anchor">
                                        <svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
                                          <path d="M21.8,8.001c0,0-0.195-1.378-0.795-1.985c-0.76-0.797-1.613-0.801-2.004-0.847c-2.799-0.202-6.997-0.202-6.997-0.202 h-0.009c0,0-4.198,0-6.997,0.202C4.608,5.216,3.756,5.22,2.995,6.016C2.395,6.623,2.2,8.001,2.2,8.001S2,9.62,2,11.238v1.517 c0,1.618,0.2,3.237,0.2,3.237s0.195,1.378,0.795,1.985c0.761,0.797,1.76,0.771,2.205,0.855c1.6,0.153,6.8,0.201,6.8,0.201 s4.203-0.006,7.001-0.209c0.391-0.047,1.243-0.051,2.004-0.847c0.6-0.607,0.795-1.985,0.795-1.985s0.2-1.618,0.2-3.237v-1.517 C22,9.62,21.8,8.001,21.8,8.001z M9.935,14.594l-0.001-5.62l5.404,2.82L9.935,14.594z" />
                                        </svg>
                                        <span className="wp-block-social-link-label screen-reader-text">YouTube</span>
                                      </a>
                                    </li>
                                  </ul>

                                  <div style={{ height: "137px" }} aria-hidden="true" className="wp-block-spacer"></div>

                                  <div className="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
                                    <div className="wp-block-button is-style-simple is-style-theme">
                                      <Link href="/contact" className="wp-block-button__link wp-element-button" style={{ borderRadius: "10px" }}>
                                        Get in touch
                                      </Link>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    className="elementor-element elementor-element-846e53d elementor-widget elementor-widget-site-logo"
                    data-id="846e53d"
                    data-element_type="widget"
                    data-widget_type="site-logo.default"
                  >
                    <div className="elementor-widget-container">
                      <div className="hfe-site-logo">
                        <Link data-elementor-open-lightbox="" className="elementor-clickable" href="/">
                          <div className="hfe-site-logo-set">
                            <div className="hfe-site-logo-container">
                              <Image width={400} height={76} className="hfe-site-logo-img logo-desktop elementor-animation-" src="/images/doormile-white.png" alt="doormile-logo" priority />
                              <Image width={400} height={76} className="hfe-site-logo-img logo-mobile elementor-animation-" src="/images/doormile-black.png" alt="doormile-logo" priority />
                            </div>
                          </div>
                        </Link>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  className="elementor-element elementor-element-e44ee7e e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
                  data-id="e44ee7e"
                  data-element_type="container"
                >
                  <div
                    className="elementor-element elementor-element-0b7bf6f logico-breakpoint-laptop elementor-widget__width-auto elementor-widget elementor-widget-logico_navigation_menu"
                    data-id="0b7bf6f"
                    data-element_type="widget"
                    data-widget_type="logico_navigation_menu.default"
                  >
                    <div className="elementor-widget-container">
                      <div className="header-menu-container">
                        <nav>
                          <ul id="menu-main-menu" className="main-menu">
                            <li id="menu-item-10508" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10508${dmHeaderActive("home")}`}>
                              <Link href="/">Home</Link>
                            </li>
                            <li id="menu-item-10509" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10509${dmHeaderActive("how-it-works")}`}>
                              <Link href="/how-it-works">How It Works</Link>
                            </li>
                            <li id="menu-item-10510" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10510${dmHeaderActive("miletruth")}`}>
                              <Link href="/miletruth">MileTruth&trade; AI</Link>
                            </li>
                            <li id="menu-item-10511" className={`menu-item menu-item-type-custom  menu-item-10511${dmHeaderActive("solutions")}`}>
                              <Link href="/solutions">Solutions</Link>
                            </li>
                            <li id="menu-item-10512" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10512${dmHeaderActive("about")}`}>
                              <Link href="/about-us">About</Link>
                            </li>
                            <li id="menu-item-10535" className={`menu-item menu-item-type-post_type menu-item-object-page menu-item-10535${dmHeaderActive("blogs")}`}>
                              <Link href="/blog">Blogs</Link>
                            </li>
                          </ul>
                        </nav>
                      </div>
                      <div className="menu-trigger" data-id="0b7bf6f" onClick={toggleMenu}>
                        <span className="menu-trigger-icon">
                          <span className="hamburger">
                            <span></span>
                            <span></span>
                            <span></span>
                          </span>
                        </span>
                      </div>

                      <div
                        style={{ zIndex: 100000 }}
                        className={`mobile-header-menu-container${isMenuOpen ? " active" : ""}`}
                        id="mobile-header-0b7bf6f"
                      >
                        <div className="mobile-header-row">
                          <div className="header-icons-container">
                            <div className="header-icon mini-cart">
                              <a href="#" className="mini-cart-trigger">
                                <i className="mini-cart-count"></i>
                              </a>
                            </div>
                            <a className="header-icon search-link" href="#">
                              <span className="search-trigger-icon"></span>
                            </a>
                            <div className="header-icon login-logout">
                              <a href="#" title="Login/Register" className="link-login"></a>
                            </div>
                            <div className="header-icon menu-close" onClick={closeAll}>
                              <span className="menu-close-icon"></span>
                            </div>
                          </div>
                        </div>
                        <nav>
                          <ul id="menu-main-menu-1" className="main-menu">
                            <li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10508${dmHeaderActive("home")}`}>
                              <Link href="/" onClick={closeAll}>Home</Link>
                            </li>
                            <li className={`menu-item menu-item-type-custom menu-item-object-custom  menu-item-10509${dmHeaderActive("how-it-works")}`}>
                              <Link href="/how-it-works" onClick={closeAll}>How It Works</Link>
                            </li>
                            <li className={`menu-item menu-item-type-custom menu-item-object-custom  menu-item-10510${dmHeaderActive("miletruth")}`}>
                              <Link href="/miletruth" onClick={closeAll}>MileTruth&trade; AI</Link>
                            </li>
                            <li className={`menu-item menu-item-type-custom menu-item-10511${dmHeaderActive("solutions")}`}>
                              <Link href="/solutions" onClick={closeAll}>Solutions</Link>
                            </li>
                            <li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10512${dmHeaderActive("about")}`}>
                              <Link href="/about-us" onClick={closeAll}>About</Link>
                            </li>
                            <li className={`menu-item menu-item-type-post_type menu-item-object-page menu-item-10535${dmHeaderActive("blogs")}`}>
                              <Link href="/blog" onClick={closeAll}>Blogs</Link>
                            </li>
                          </ul>
                        </nav>
                        <div className="header-mobile-contacts">
                          <div className="contact-item contact-item-phone">
                            <span className="contact-item-label">Phone</span>
                            <div className="contact-item-value">
                              <p>Tel : +91 86886 97941</p>
                            </div>
                          </div>
                          <div className="contact-item contact-item-email">
                            <span className="contact-item-label">Email</span>
                            <div className="contact-item-value">
                              <p>
                                <a href="mailto:care@doormile.com" data-wplink-edit="true">care@doormile.com</a>
                              </p>
                            </div>
                          </div>
                        </div>
                        <div className="header-mobile-socials">
                          <ul className="mobile-menu-socials wrapper-socials">
                            <li>
                              <a href="https://www.facebook.com/" target="_blank" aria-label="Facebook" rel="noreferrer">
                                <svg aria-hidden="true" width="18" height="18" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                                  <path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z" />
                                </svg>
                              </a>
                            </li>
                            <li>
                              <a href="https://x.com/" target="_blank" aria-label="X (Twitter)" rel="noreferrer">
                                <svg aria-hidden="true" width="18" height="18" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                                  <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
                                </svg>
                              </a>
                            </li>
                            <li>
                              <a href="https://www.linkedin.com/" target="_blank" aria-label="LinkedIn" rel="noreferrer">
                                <svg aria-hidden="true" width="18" height="18" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                                  <path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z" />
                                </svg>
                              </a>
                            </li>
                            <li>
                              <a href="https://www.youtube.com/" target="_blank" aria-label="YouTube" rel="noreferrer">
                                <svg aria-hidden="true" width="18" height="18" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                                  <path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z" />
                                </svg>
                              </a>
                            </li>
                          </ul>
                        </div>
                        <div className="header-mobile-button">
                          <Link className="logico-alter-button" href="/contact" target="_blank">Get in Touch</Link>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              className="elementor-element elementor-element-f961133 e-con-full elementor-hidden-laptop elementor-hidden-tablet_extra elementor-hidden-tablet elementor-hidden-mobile_extra elementor-hidden-mobile e-flex cut-corner-no sticky-container-off e-con e-child"
              data-id="f961133"
              data-element_type="container"
            >
              <div
                className="elementor-element elementor-element-cabdb09 elementor-widget elementor-widget-logico_header_button"
                data-id="cabdb09"
                data-element_type="widget"
                data-widget_type="logico_header_button.default"
              >
                <div className="elementor-widget-container">
                  <div className="header-button-container">
                    <Link href="/contact" target="_blank" className="header-button header-button-animation-fade">
                      Contact Us
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>
      {/* Inline <style> block — 1:1 translation of header.php lines 600-627 */}
      <style
        dangerouslySetInnerHTML={{
          __html: `
            #masthead .elementor-element.elementor-element-466de1b {
                position: absolute !important;
                top: 5px !important;
                left: 0 !important;
                right: 0 !important;
                width: auto !important;
                transition: background-color 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease !important;
                z-index: 10000 !important;
            }

            /* .e-con's --padding-* falls through two competing stylesheets and lands at 10px locally
               (vs 0 in production). Zero out the pill wrappers so the navbar matches prod height (~122px). */
            #masthead .elementor-element.elementor-element-e052838,
            #masthead .elementor-element.elementor-element-d681ece {
                padding-top: 0 !important;
                padding-bottom: 0 !important;
            }

            @media (min-width: 1025px) {
                #masthead {
                    position: relative;
                    z-index: 10000;
                }

                /* Production pins the wrapper via Elementor sticky-effects JS (not shipped here).
                   Force position:fixed once scrolled past 50px so the header stays in viewport. */
                #masthead .elementor-element.elementor-element-466de1b.dm-header-scrolled {
                    position: fixed !important;
                    background: #4b4b4baa !important;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
                    top: 0 !important;
                }

                #masthead .elementor-element.elementor-element-466de1b.dm-header-scrolled .elementor-element.elementor-element-e052838 {
                    background: transparent !important;
                }
            }

            #masthead .header-menu-container .main-menu > li.active > a:before {
                background-color: #ffffff !important;
                opacity: 1 !important;
            }

            /* The theme reveals the mobile slide-in menu via Elementor's
               body[data-elementor-device-mode="mobile"] rules, which are set by
               Elementor's frontend JS — that JS isn't shipped in this Next port,
               so the panel stayed display:none and the hamburger opened nothing.
               Restore it with the same 1024px breakpoint the nav already switches
               at. The panel sits off-screen (right:-320px) until .active slides
               it in, matching production behaviour. */
            @media (max-width: 1024px) {
                #masthead .elementor-widget-logico_navigation_menu .mobile-header-menu-container {
                    display: block !important;
                }
            }
          `,
        }}
      />
    </>
  );
}