/* ============================================
   Site Logo - Consistent sizing across all pages
   ============================================ */
.site-logo,
.elementor-49 .site-logo,
.elementor-widget-image .site-logo,
.elementor-49 .elementor-element-1d1bf8e img {
  color: #1a1a1a; /* Default: black for light backgrounds */
  height: 48px !important;
  width: auto !important;
  max-width: 180px !important;
  max-height: 48px !important;
  object-fit: contain !important;
}

/* Ensure logo container doesn't clip */
.elementor-49 .elementor-element-1d1bf8e,
.elementor-49 .elementor-element-1d1bf8e .elementor-widget-container {
  overflow: visible !important;
  height: auto !important;
  min-height: 48px !important;
}

/* Homepage has dark header - white logo */
body.home .site-logo,
body.homepage .site-logo,
.dark-header .site-logo {
  color: #ffffff;
}

/* ============================================
   GLOBAL: Remove Elementor Orange Hover Color
   Prevents #FF6442 from appearing on link/button hover
   EXCEPT for header navigation menu and intentional CTAs
   ============================================ */

/* General link hover reset - exclude header nav */
a:hover,
a:focus,
a:active,
button:hover,
button:focus,
button:active {
  text-decoration: none !important;
}

/* Prevent Elementor's global accent color on hover - exclude nav menu */
.elementor-widget a:not(.ekit-menu-nav-link):hover,
.elementor-widget a:not(.ekit-menu-nav-link):focus,
.elementor-widget button:hover,
.elementor-widget button:focus,
[class*="elementor"] a:not(.ekit-menu-nav-link):hover,
[class*="elementor"] a:not(.ekit-menu-nav-link):focus {
  color: inherit !important;
  background-color: inherit !important;
}

/* Prevent white text on hover for toolbar buttons */
.toolbar-btn:hover,
.toolbar-btn:focus,
.toolbar-btn:active {
  color: #000 !important;
  background-color: #fafafa !important;
}

.toolbar-btn:hover span,
.toolbar-btn:focus span,
.toolbar-btn:active span {
  color: #000 !important;
}

/* Card link action (phone number) - white on hover */
.card-link-action:hover,
.card-link-action:focus,
.card-link-action:active,
.card-link-action:hover span,
.card-link-action:focus span,
.card-link-action:active span,
.product-card .card-link-action:hover,
.product-card .card-link-action:hover span {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* ============================================
   Header Navigation Menu - Desktop Styles
   ============================================ */
.ekit-menu-nav-link {
  transition: color 0.2s ease;
}

/* Desktop: show desktop labels, hide mobile labels */
.menu-label-desktop {
  display: inline;
}

.menu-label-mobile {
  display: none;
}

/* Desktop active menu item - black pill per Figma */
.elementskit-navbar-nav > li.current-menu-item > a,
.elementskit-navbar-nav > li.active > a {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
}

.elementskit-navbar-nav > li.current-menu-item > a:hover,
.elementskit-navbar-nav > li.active > a:hover {
  color: #ffffff !important;
}

/* Inactive menu items - no background */
.elementskit-navbar-nav > li:not(.current-menu-item):not(.active) > a {
  background: transparent !important;
  color: #1a1a1a !important;
}

.ekit-menu-nav-link:hover,
.ekit-menu-nav-link:focus {
  color: #ff6442 !important;
}

/* Exclude active item from hover color change */
.elementskit-navbar-nav > li.current-menu-item > a:hover,
.elementskit-navbar-nav > li.current-menu-item > a:focus {
  color: #ffffff !important;
}

@media (max-width: 1024px) {
  .menu-label-desktop {
    display: none !important;
  }
  .menu-label-mobile {
    display: inline !important;
  }
}

/* ============================================
   Prevent accent color on all Elementor buttons
   except explicitly styled CTAs
   ============================================ */
.elementor-button:not(.elementor-button-primary):hover,
.elementor-button:not(.elementor-button-primary):focus {
  background-color: inherit !important;
  color: inherit !important;
}

/* ============================================
   Financing Button - Prevent black hover
   ============================================ */
.financing-btn:hover,
.financing-btn:focus,
.financing-btn:active {
  background-color: #f5f5f5 !important;
  border-color: #d0d0d0 !important;
}

.financing-btn:hover span,
.financing-btn:focus span,
.financing-btn:active span {
  color: #1a1a1a !important;
}

/* ============================================
   Header Arrow Icon
   ============================================ */
.header-arrow-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.header-arrow-icon img {
  width: 32px;
  height: 32px;
  transition: transform 0.2s ease;
}

.header-arrow-icon:hover img {
  transform: scale(1.05);
}

/* Desktop: show desktop icons, hide mobile icons */
.header-arrow-desktop,
.arrow-icon-desktop {
  display: block !important;
}

.header-arrow-mobile,
.arrow-icon-mobile {
  display: none !important;
}

/* Hide orange arrow on mobile - only hamburger should show */
@media (max-width: 1024px) {
  .header-arrow-container {
    display: none !important;
  }
}

/* ============================================
   Mobile Menu Styles
   ============================================ */

/* Desktop: Hide mobile-only elements */
.elementskit-menu-hamburger,
.ekit-wid-con .elementskit-menu-hamburger,
.elementor-49 .elementskit-menu-hamburger {
  display: none !important;
}

.mobile-menu-header {
  display: none;
}

.mobile-menu-logo,
.elementskit-menu-container .mobile-menu-logo {
  display: none !important;
}

.mobile-menu-close-btn {
  display: none;
}

.mobile-menu-social {
  display: none;
}

/* Desktop: Menu container should not be fixed positioned */
.elementskit-menu-container,
#ekit-megamenu-ap-menu,
.ekit-wid-con .elementskit-menu-container {
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}

/* Desktop: Navbar should be visible and inline */
.elementskit-navbar-nav,
#menu-ap-menu,
ul.elementskit-navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Show hamburger on tablet and mobile */
@media (max-width: 1024px) {
  /* Hamburger button - exact Figma specs */
  .elementskit-menu-hamburger,
  button.elementskit-menu-hamburger,
  .elementor-49 .elementskit-menu-hamburger,
  .elementor-49 .elementor-element .elementskit-menu-hamburger,
  .ekit-wid-con .elementskit-menu-hamburger {
    display: flex !important;
    cursor: pointer;
    padding: 0 !important;
    background: #ff6442 !important;
    background-color: #ff6442 !important;
    border: none !important;
    border-radius: 8.944px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4.472px !important;
    z-index: 1001;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .elementskit-menu-hamburger-icon,
  .elementskit-menu-hamburger span.elementskit-menu-hamburger-icon,
  .elementor-49 .elementskit-menu-hamburger-icon,
  .elementor-49 .elementor-element .elementskit-menu-hamburger-icon,
  .ekit-wid-con .elementskit-menu-hamburger-icon {
    display: block !important;
    width: 16.211px !important;
    height: 1.677px !important;
    min-height: 1.677px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-radius: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Hide navbar on mobile - only show inside active menu container */
  .elementskit-navbar-nav,
  #menu-ap-menu,
  ul.elementskit-navbar-nav {
    display: none !important;
  }

  /* Mobile menu container - fixed fullscreen overlay */
  .elementskit-menu-container,
  #ekit-megamenu-ap-menu,
  .ekit-wid-con .elementskit-menu-container {
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100vh - 64px) !important;
    background: #ffffff !important;
    z-index: 10000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  /* Show mobile menu when active */
  .elementskit-menu-container.is-active,
  #ekit-megamenu-ap-menu.is-active {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Override Elementor global colors for active menu items */
  .elementskit-navbar-nav > li.current-menu-item > a,
  .elementskit-navbar-nav > li.current-menu-ancestor > a,
  .elementor-49 .elementor-element .elementskit-navbar-nav > li.current-menu-item > a,
  .elementor-49 .elementor-element .elementskit-navbar-nav > li.current-menu-ancestor > a {
    background-color: transparent !important;
    background: transparent !important;
  }

  /* Remove all borders and dividers inside mobile menu (not text arrows) */
  .elementskit-menu-container,
  .elementskit-menu-container .elementskit-navbar-nav,
  .elementskit-navbar-nav,
  .elementskit-menu-po-left,
  .submenu-click-on-icon,
  #menu-ap-menu,
  ul.elementskit-navbar-nav,
  ul#menu-ap-menu,
  .elementskit-menu-container .menu-item,
  .elementskit-menu-container .mobile-menu-header,
  .elementskit-menu-container .mobile-menu-social,
  .elementskit-nav-identity-panel,
  .elementskit-navbar-nav.elementskit-menu-po-left {
    border: 0 !important;
    border-style: none !important;
    border-width: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-box-shadow: none !important;
  }

  /* Kill any pseudo-element borders on navbar */
  .elementskit-navbar-nav::before,
  .elementskit-navbar-nav::after,
  #menu-ap-menu::before,
  #menu-ap-menu::after {
    display: none !important;
    content: none !important;
    border: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Nuclear option - override ALL border properties on navbar */
  ul#menu-ap-menu.elementskit-navbar-nav.elementskit-menu-po-left.submenu-click-on-icon {
    border: 0 none transparent !important;
    border-top: 0 none transparent !important;
    border-right: 0 none transparent !important;
    border-bottom: 0 none transparent !important;
    border-left: 0 none transparent !important;
    border-inline: 0 none transparent !important;
    border-block: 0 none transparent !important;
    border-inline-end: 0 none transparent !important;
    border-inline-start: 0 none transparent !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    background-color: transparent !important;
    overflow: visible !important;
    scrollbar-width: none !important;
  }

  ul#menu-ap-menu::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
  }

  /* Remove header bottom border on mobile */
  .elementor-49 .elementor-element.elementor-element-893315e {
    border: none !important;
    border-width: 0 !important;
  }

  /* Remove any grey lines from header/nav containers */
  .elementor-location-header,
  .elementor-location-header *,
  [data-elementor-type="header"],
  [data-elementor-type="header"] * {
    border-left: none !important;
    border-right: none !important;
  }

  /* Target the grey border color specifically */
  *[style*="border"][style*="#B6B6B6"],
  *[style*="border"][style*="rgb(182, 182, 182)"] {
    border: none !important;
  }

  /* Hide divider panel and any vertical lines */
  .elementskit-nav-identity-panel,
  .ekit-nav-menu--divider,
  .elementskit-menu-container hr,
  .elementskit-menu-container .divider,
  .elementskit-menu-container [class*="divider"],
  .elementskit-menu-container [class*="separator"] {
    display: none !important;
  }

  /* Remove any borders that could appear as vertical lines */
  .elementskit-menu-container .e-con-inner,
  .elementskit-menu-container .elementor-element,
  .elementskit-menu-container .elementor-widget-container {
    border: none !important;
    border-left: none !important;
    border-right: none !important;
  }

  /* Ensure no element has a grey left/right border */
  .elementskit-menu-container *:not(.mobile-menu-close-btn):not(.ekit-menu-nav-link) {
    border-left-color: transparent !important;
    border-right-color: transparent !important;
  }

  /* Nav items container - show when menu is active */
  .elementskit-menu-container.is-active .elementskit-navbar-nav,
  .elementskit-menu-container.is-active #menu-ap-menu,
  .elementskit-menu-container.is-active ul.elementskit-navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    position: absolute !important;
    left: 24px !important;
    bottom: 100px !important;
    width: 282px !important;
    list-style: none !important;
  }

  /* Hide hamburger when menu is open */
  body.menu-open .elementskit-menu-hamburger,
  .elementskit-menu-container.is-active ~ .elementskit-menu-hamburger,
  .ekit-wid-con:has(.elementskit-menu-container.is-active) .elementskit-menu-hamburger {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Mobile menu items */
  .elementskit-menu-container .menu-item {
    border-bottom: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .elementskit-menu-container .ekit-menu-nav-link {
    display: block !important;
    padding: 0 !important;
    color: #1a1a1a !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 96% !important;
    letter-spacing: -0.03em !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease !important;
    white-space: nowrap !important;
  }

  .elementskit-menu-container .ekit-menu-nav-link::after {
    content: " ↗" !important;
  }

  .elementskit-menu-container .ekit-menu-nav-link:hover,
  .elementskit-menu-container .ekit-menu-nav-link:focus,
  .elementskit-menu-container .ekit-menu-nav-link:active {
    opacity: 0.7 !important;
    color: #1a1a1a !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  .elementskit-menu-container .ekit-menu-nav-link.active {
    color: #1a1a1a !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  /* Prevent black background on menu item click/tap */
  .elementskit-menu-container .menu-item:hover,
  .elementskit-menu-container .menu-item:focus,
  .elementskit-menu-container .menu-item:active,
  .elementskit-menu-container .menu-item a:hover,
  .elementskit-menu-container .menu-item a:focus,
  .elementskit-menu-container .menu-item a:active,
  .elementskit-navbar-nav > li:hover > a,
  .elementskit-navbar-nav > li > a:hover,
  .elementskit-navbar-nav > li > a:focus,
  .elementskit-navbar-nav > li > a:active {
    background: transparent !important;
    background-color: transparent !important;
  }

  /* Mobile active menu item - bordered pill style per Figma (inside menu container only) */
  .elementskit-menu-container.is-active .menu-item.active .ekit-menu-nav-link,
  .elementskit-menu-container.is-active .menu-item.current-menu-item .ekit-menu-nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 38px !important;
    padding: 8px 16px !important;
    height: 47px !important;
    box-sizing: border-box !important;
    color: #1a1a1a !important;
  }

  .elementskit-menu-container.is-active .menu-item.active .ekit-menu-nav-link::after,
  .elementskit-menu-container.is-active .menu-item.current-menu-item .ekit-menu-nav-link::after {
    content: "" !important;
  }

  /* Hide old close button panel */
  .elementskit-nav-identity-panel {
    display: none !important;
  }

  /* Mobile menu header - show when menu active, position for close button */
  /* Position matches the hamburger button location in header */
  .mobile-menu-header {
    display: none;
    position: fixed !important;
    top: 19px !important;
    right: 13px !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: 10002 !important;
  }

  /* Show mobile menu header when menu is active */
  .elementskit-menu-container.is-active .mobile-menu-header {
    display: block !important;
  }

  /* Logo container - always hidden in mobile menu */
  .mobile-menu-logo {
    display: none !important;
  }

  /* Close button - exact Figma specs */
  .mobile-menu-close-btn {
    background: #131212 !important;
    border: none !important;
    border-radius: 8.944px !important;
    cursor: pointer !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  .mobile-menu-close-btn span {
    position: absolute;
    width: 16.211px;
    height: 1.677px;
    background: #d9d9d9;
  }

  .mobile-menu-close-btn span:first-child {
    transform: rotate(45deg);
  }

  .mobile-menu-close-btn span:last-child {
    transform: rotate(-45deg);
  }

  .mobile-menu-close-btn:hover {
    background: #2a2a2a !important;
  }

  .mobile-menu-close-btn:hover span {
    background: #ffffff;
  }

  /* Mobile menu social icons - at bottom per Figma */
  .mobile-menu-social {
    display: none !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 0 !important;
    position: absolute !important;
    left: 24px !important;
    bottom: 60px !important; /* Adjusted for menu starting below header */
    width: 128px !important;
    height: 32px !important;
  }

  /* Show social icons when menu is active */
  .elementskit-menu-container.is-active .mobile-menu-social {
    display: flex !important;
  }

  .mobile-menu-social a {
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    flex: none !important;
  }

  .mobile-menu-social svg {
    width: 100% !important;
    height: 100% !important;
  }

  /* Hide overlay - not needed with full screen menu */
  .elementskit-menu-overlay {
    display: none !important;
  }

  /* Body scroll lock when menu open */
  body.menu-open {
    overflow: hidden !important;
  }
}

/* ============================================
   Homepage Mobile Header - Figma Design
   ============================================ */

/* Mobile header - hidden by default (desktop) */
.mobile-homepage-header {
  display: none;
}

@media (max-width: 768px) {
  /* Show mobile header on mobile */
  .mobile-homepage-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    width: 100%;
    height: 64px;
    background: #1a1a1a;
    box-sizing: border-box;
  }

  .mobile-logo-link {
    flex: none;
    order: 0;
    flex-grow: 0;
    display: flex;
    align-items: center;
    color: #ffffff; /* SVG uses currentColor - set on parent for inheritance */
  }

  .mobile-logo {
    height: 32px;
    width: auto;
    filter: brightness(0) invert(1); /* Make SVG white */
  }

  /* Hide the original page content logo on mobile */
  body.home .elementor-element-6a6574e,
  body.homepage .elementor-element-6a6574e {
    display: none !important;
  }

  /* Fix mobile hero image (image.png) - maintain aspect ratio */
  body.home .elementor-element-588e958 img,
  body.homepage .elementor-element-588e958 img {
    width: 100% !important;
    height: auto !important;
    border-radius: 20px !important;
  }

  .mobile-header-arrow {
    flex: none;
    order: 1;
    flex-grow: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-header-arrow img {
    width: 32px;
    height: 32px;
  }

  /* Hide the absolutely positioned decorative arrow on mobile */
  body.home .elementor-element-7c92759,
  body.homepage .elementor-element-7c92759 {
    display: none !important;
  }
}