/* assets/css/header.css - Bulletproof Version 2 */

:root {
  --fowoke-green: #009A5E;
  --fowoke-orange: #F58220;
  --fowoke-brown: #4A2C2A;
  --fowoke-light-bg: #FCFBF8;
  --fowoke-border: #EAE8E4;
  --white: #FFFFFF;
  --animation-duration: 0.3s;
}

/* =================================================================
   BULLETPROOF FIX: Stacking & Layers (Z-INDEX)
   ================================================================= */
body #masthead { z-index: 999 !important; }
body #mobile-menu-overlay { z-index: 1000 !important; }
body #mobile-menu { z-index: 1001 !important; }
body #mini-cart-dropdown { z-index: 1002 !important; }
body #search-overlay { z-index: 1003 !important; }

/* =================================================================
   BULLETPROOF FIX: Top Header Bar
   ================================================================= */
body #top-header {
  background-color: var(--fowoke-green) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500;
}
body #top-header .top-header-content {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 0.5rem 1.5rem;
  max-width: 1280px; margin: 0 auto;
}
body #top-header .contact-item {
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: color 0.2s; color: rgba(255, 255, 255, 0.9); text-decoration: none;
}
body #top-header a.contact-item:hover { color: var(--white); }

/* =================================================================
   BULLETPROOF FIX: Header Icon Horizontal Layout
   ================================================================= */
body #masthead .header-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.25rem !important;
  background: none !important;
}
body #masthead .header-actions > *,
body #masthead .header-icon-btn {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 2.75rem !important; height: 2.75rem !important;
  border-radius: 9999px !important;
  color: var(--fowoke-green) !important;
  background-color: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: all var(--animation-duration);
}
body #masthead .header-icon-btn:hover {
  color: var(--fowoke-orange) !important;
  background-color: rgba(245, 130, 32, 0.1) !important;
}

/* =================================================================
   NEW FIX: MOBILE MENU TOGGLE COLOR
   Forces the toggle button to be a visible color on mobile.
   ================================================================= */
body #masthead #mobile-menu-toggle {
    color: var(--fowoke-brown) !important; /* Use dark brown for high contrast */
}

/* =================================================================
   BULLETPROOF FIX: Sub-Menu Dropdown Colors
   ================================================================= */
body #masthead nav ul .sub-menu {
  background-color: var(--white) !important;
  border: 1px solid var(--fowoke-border) !important;
}
body #masthead nav ul .sub-menu a {
  color: var(--fowoke-brown) !important;
  background: none !important;
}
body #masthead nav ul .sub-menu a:hover {
  background-color: var(--fowoke-light-bg) !important;
  color: var(--fowoke-orange) !important;
}
#masthead .current-menu-item > a,
#masthead .current-page-ancestor > a { color: var(--fowoke-orange); }

/* =================================================================
   CART & MENU STYLING (RETAINED)
   ================================================================= */
.cart-contents-count {
  position: absolute; top: 2px; right: 0px;
  display: flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 9999px; font-size: 12px; font-weight: bold;
  line-height: 1; border: 2px solid var(--white);
  background-color: var(--fowoke-orange); color: var(--white);
  transform: scale(1);
  transition: transform var(--animation-duration);
}
.cart-contents-count[class*="count-0"] { transform: scale(0); }
.mobile-menu-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--fowoke-border);
}
#mobile-menu a:hover {
  background-color: var(--fowoke-light-bg); color: var(--fowoke-orange);
}
#mobile-menu .current-menu-item > a {
  background-color: rgba(0, 154, 94, 0.1); color: var(--fowoke-green); font-weight: 700;
}