/**
 * Brothers Home Inspection - Header Branding
 * Option A: Clean Header with Brand Colors
 */

/* ===========================
   HEADER CONTAINER
   =========================== */
.elementor-element-c71549d {
  background-color: var(--white) !important;
  border-bottom: 1px solid var(--gray-light) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  position: relative !important;
  z-index: 9999 !important;
}

/* Ensure header element stays above page content */
header#masthead {
  position: relative !important;
  z-index: 9999 !important;
  overflow: visible !important;
}

.elementor-44 {
  position: relative !important;
  z-index: 9999 !important;
  overflow: visible !important;
}

/* Ensure all header containers allow dropdown to overflow */
.elementor-element-c71549d,
.elementor-element-c71549d > .e-con-inner,
.elementor-element-891614b,
.elementor-element-891614b > .e-con-inner {
  overflow: visible !important;
}

/* ===========================
   NAVIGATION MENU - TEXT LINKS
   =========================== */

/* Default state - menu items */
.jkit-nav-menu .jkit-menu > li > a {
  color: var(--black) !important;
  font-weight: 500 !important;
  transition: color 0.3s ease !important;
}

/* Hover state */
.jkit-nav-menu .jkit-menu > li:hover > a,
.jkit-nav-menu .jkit-menu > li > a:hover {
  color: var(--brand-green) !important;
}

/* Active/Current page */
.jkit-nav-menu .jkit-menu > li.current-menu-item > a,
.jkit-nav-menu .jkit-menu > li.current-menu-ancestor > a {
  color: var(--brand-green) !important;
  font-weight: 600 !important;
}

/* ===========================
   DROPDOWN MENUS
   =========================== */

/* Parent menu item with children - ensure dropdown can escape */
.jkit-nav-menu .jkit-menu li.menu-item-has-children {
  position: relative !important;
}

/* Dropdown container */
.jkit-nav-menu .jkit-menu li.menu-item-has-children .sub-menu {
  background-color: var(--white) !important;
  border: 1px solid var(--gray-light) !important;
  box-shadow: var(--shadow-lg) !important;
  z-index: 99999 !important;
  position: absolute !important;
}

/* Fix: Ensure menu wrapper doesn't clip dropdown */
.jkit-nav-menu .jkit-menu-wrapper {
  overflow: visible !important;
}

.jkit-nav-menu .jkit-menu-container {
  overflow: visible !important;
}

.jkit-nav-menu .jkit-menu {
  overflow: visible !important;
}

/* Dropdown items */
.jkit-nav-menu .jkit-menu .sub-menu li > a {
  color: var(--black) !important;
}

/* Dropdown hover */
.jkit-nav-menu .jkit-menu .sub-menu li:hover > a {
  color: var(--brand-green) !important;
  background-color: var(--brand-beige-very-light) !important;
}

/* Dropdown active item */
.jkit-nav-menu .jkit-menu .sub-menu li.current-menu-item > a {
  color: var(--brand-green) !important;
  font-weight: 600 !important;
}

/* ===========================
   CTA BUTTON (Get a Quote / Contact Us)
   =========================== */

/* Button default state */
.elementor-element-633a764 .elementor-button {
  background-color: var(--brand-green) !important;
  color: var(--white) !important;
  border: 2px solid var(--brand-green) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 12px 28px !important;
  transition: all 0.3s ease !important;
}

/* Button hover state */
.elementor-element-633a764 .elementor-button:hover,
.elementor-element-633a764 .elementor-button:focus {
  background-color: var(--brand-green-dark) !important;
  border-color: var(--brand-green-dark) !important;
  color: var(--white) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(78, 97, 44, 0.25) !important;
}

/* ===========================
   MOBILE MENU (HAMBURGER)
   =========================== */

/* Hamburger icon */
.jkit-nav-menu .jkit-hamburger-menu {
  background-color: var(--brand-green) !important;
  color: var(--white) !important;
  border: none !important;
}

.jkit-nav-menu .jkit-hamburger-menu:hover {
  background-color: var(--brand-green-dark) !important;
}

.jkit-nav-menu .jkit-hamburger-menu i,
.jkit-nav-menu .jkit-hamburger-menu svg {
  color: var(--white) !important;
  fill: var(--white) !important;
}

/* Mobile menu wrapper */
.jkit-nav-menu .jkit-menu-wrapper {
  background-color: var(--white) !important;
}

/* Mobile menu close button */
.jkit-nav-menu .jkit-menu-wrapper .jkit-nav-identity-panel .jkit-close-menu {
  background-color: var(--brand-green) !important;
  color: var(--white) !important;
}

.jkit-nav-menu .jkit-menu-wrapper .jkit-nav-identity-panel .jkit-close-menu:hover {
  background-color: var(--brand-green-dark) !important;
}

.jkit-nav-menu .jkit-menu-wrapper .jkit-nav-identity-panel .jkit-close-menu i,
.jkit-nav-menu .jkit-menu-wrapper .jkit-nav-identity-panel .jkit-close-menu svg {
  color: var(--white) !important;
  fill: var(--white) !important;
}

/* Mobile menu items */
.jkit-nav-menu .jkit-menu-wrapper .jkit-menu > li > a {
  color: var(--black) !important;
}

.jkit-nav-menu .jkit-menu-wrapper .jkit-menu > li:hover > a,
.jkit-nav-menu .jkit-menu-wrapper .jkit-menu > li.current-menu-item > a,
.jkit-nav-menu .jkit-menu-wrapper .jkit-menu > li.current-menu-ancestor > a {
  color: var(--brand-green) !important;
}

/* Mobile dropdown icon */
.jkit-nav-menu .jkit-menu-wrapper .jkit-menu li.menu-item-has-children > a i,
.jkit-nav-menu .jkit-menu-wrapper .jkit-menu li.menu-item-has-children > a svg {
  border-color: var(--gray-light) !important;
}

/* ===========================
   DROPDOWN ARROWS/ICONS
   =========================== */

/* Desktop dropdown arrows */
.jkit-nav-menu .jkit-menu li.menu-item-has-children > a i,
.jkit-nav-menu .jkit-menu li.menu-item-has-children > a svg {
  color: inherit !important;
  fill: inherit !important;
}

/* ===========================
   FOCUS STATES (Accessibility)
   =========================== */

.jkit-nav-menu .jkit-menu > li > a:focus,
.jkit-nav-menu .jkit-menu .sub-menu li > a:focus,
.elementor-element-633a764 .elementor-button:focus {
  outline: 2px solid var(--brand-green) !important;
  outline-offset: 2px !important;
}

/* ===========================
   STICKY HEADER (if enabled)
   =========================== */

.elementor-sticky--active .elementor-element-c71549d {
  background-color: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}