/*--------------------------------------------------------------
# Earthtone Header Color Palette
# Colors derived from the provided color palette image
--------------------------------------------------------------*/

:root {
  /* Earthtone Color Palette */
  --earthtone-almond: #E3D5C5;      /* Lightest - for backgrounds and text */
  --earthtone-khaki: #9E9B88;       /* Light neutral - for secondary text */
  --earthtone-ebony: #59614B;       /* Medium green - for accents */
  --earthtone-blackolive: #2D3126;  /* Dark green - for primary backgrounds */
  --earthtone-black: #000000;       /* Darkest - for high contrast text */
  
  /* Header-specific color assignments */
  --header-bg-primary: var(--earthtone-blackolive);
  --header-bg-secondary: var(--earthtone-ebony);
  --header-text-primary: var(--earthtone-almond);
  --header-text-secondary: var(--earthtone-khaki);
  --header-accent: var(--earthtone-ebony);
  --header-hover: var(--earthtone-almond);
  
  /* Mobile menu colors */
  --mobile-menu-bg: var(--earthtone-blackolive);
  --mobile-menu-overlay: rgba(45, 49, 38, 0.85);
  --mobile-menu-border: var(--earthtone-ebony);
  
  /* Social media icons */
  --social-icon-bg: transparent;
  --social-icon-border: var(--earthtone-khaki);
  --social-icon-text: var(--earthtone-almond);
  --social-icon-hover-bg: var(--earthtone-ebony);
  --social-icon-hover-text: var(--earthtone-almond);
}

/*--------------------------------------------------------------
# Header Background & Base Styling
--------------------------------------------------------------*/
.top-header {
  background: linear-gradient(135deg, var(--header-bg-primary) 0%, var(--header-bg-secondary) 100%) !important;
  border-bottom: 2px solid var(--earthtone-ebony) !important;
  box-shadow: 0 4px 20px rgba(45, 49, 38, 0.3) !important;
}

.top-header::before {
  background: rgba(45, 49, 38, 0.95) !important;
}

/* Scrolled header effect with earthtone colors */
.top-header.scrolled {
  border-bottom-color: var(--earthtone-ebony) !important;
  box-shadow: 0 2px 25px rgba(45, 49, 38, 0.4) !important;
}

/*--------------------------------------------------------------
# Logo Section
--------------------------------------------------------------*/
.top-logo {
  color: var(--header-text-primary) !important;
}

.top-logo:hover {
  filter: drop-shadow(0 4px 8px rgba(89, 97, 75, 0.4)) !important;
}

.top-logo h1 {
  color: var(--header-text-primary) !important;
  background: linear-gradient(45deg, var(--earthtone-almond), var(--earthtone-khaki)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.top-logo h1::after {
  background: linear-gradient(90deg, var(--earthtone-ebony), var(--earthtone-khaki)) !important;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
.top-nav-menu a {
  color: var(--header-text-secondary) !important;
}

.top-nav-menu a:hover,
.top-nav-menu a.active {
  color: var(--header-hover) !important;
  background: rgba(89, 97, 75, 0.2) !important;
  border: 1px solid rgba(158, 155, 136, 0.3) !important;
  box-shadow: 0 4px 15px rgba(89, 97, 75, 0.2) !important;
}

.top-nav-menu a:hover .navicon,
.top-nav-menu a.active .navicon {
  color: var(--earthtone-ebony) !important;
}

/* Navigation underline accent */
.top-nav-menu a::before {
  background: linear-gradient(90deg, var(--earthtone-ebony), var(--earthtone-khaki)) !important;
}

/*--------------------------------------------------------------
# Social Media Icons
--------------------------------------------------------------*/
.header-social-links .social-icon {
  color: var(--social-icon-text) !important;
  border: 1px solid var(--social-icon-border) !important;
  background: var(--social-icon-bg) !important;
  transition: all 0.3s ease !important;
}

.header-social-links .social-icon:hover {
  background: var(--social-icon-hover-bg) !important;
  color: var(--social-icon-hover-text) !important;
  border-color: var(--earthtone-almond) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(89, 97, 75, 0.3) !important;
}

/*--------------------------------------------------------------
# Mobile Menu Toggle
--------------------------------------------------------------*/
.top-menu-toggle {
  background: rgba(158, 155, 136, 0.1) !important;
  border: 1px solid var(--earthtone-khaki) !important;
}

.top-menu-toggle:hover {
  background: rgba(89, 97, 75, 0.2) !important;
  border-color: var(--earthtone-ebony) !important;
}

.hamburger span {
  background: linear-gradient(90deg, var(--earthtone-almond), var(--earthtone-khaki)) !important;
}

.top-menu-toggle.active .hamburger span:nth-child(1),
.top-menu-toggle.active .hamburger span:nth-child(3) {
  background: var(--earthtone-ebony) !important;
}

/*--------------------------------------------------------------
# Mobile Menu Styling
--------------------------------------------------------------*/
@media (max-width: 1024px) {
  /* Mobile menu overlay */
  .mobile-menu-overlay {
    background: var(--mobile-menu-overlay) !important;
  }
  
  /* Sidebar navigation background */
  .top-navigation {
    background: linear-gradient(145deg, var(--earthtone-blackolive) 0%, #1a1f16 100%) !important;
    border-left: 2px solid var(--mobile-menu-border) !important;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.4) !important;
  }
  
  /* Sidebar header */
  .sidebar-header {
    background: rgba(89, 97, 75, 0.15) !important;
    border-bottom: 1px solid var(--earthtone-ebony) !important;
  }
  
  .sidebar-title {
    color: var(--earthtone-khaki) !important;
  }
  
  .sidebar-close {
    background: rgba(158, 155, 136, 0.1) !important;
    color: var(--earthtone-almond) !important;
  }
  
  .sidebar-close:hover {
    background: rgba(220, 53, 69, 0.2) !important;
    color: #dc3545 !important;
  }
  
  /* Mobile navigation menu items */
  .top-nav-menu a {
    color: var(--header-text-secondary) !important;
    background: rgba(158, 155, 136, 0.05) !important;
    border: 1px solid rgba(158, 155, 136, 0.1) !important;
  }
  
  .top-nav-menu a::before {
    background: linear-gradient(90deg, transparent, rgba(89, 97, 75, 0.15), transparent) !important;
  }
  
  .top-nav-menu a:hover {
    background: rgba(89, 97, 75, 0.15) !important;
    border-color: rgba(89, 97, 75, 0.3) !important;
    color: var(--earthtone-almond) !important;
  }
  
  .top-nav-menu a.active {
    background: rgba(89, 97, 75, 0.2) !important;
    border-color: rgba(89, 97, 75, 0.4) !important;
    color: var(--earthtone-khaki) !important;
  }
}

/*--------------------------------------------------------------
# Focus States for Accessibility
--------------------------------------------------------------*/
.top-nav-menu a:focus {
  outline: 2px solid var(--earthtone-ebony) !important;
  outline-offset: 2px !important;
  background: rgba(89, 97, 75, 0.2) !important;
}

.top-menu-toggle:focus {
  outline: 2px solid var(--earthtone-ebony) !important;
  outline-offset: 2px !important;
}

.header-social-links .social-icon:focus {
  outline: 2px solid var(--earthtone-ebony) !important;
  outline-offset: 2px !important;
}

/*--------------------------------------------------------------
# Light Mode Support (Optional)
--------------------------------------------------------------*/
@media (prefers-color-scheme: light) {
  :root {
    --header-bg-primary: var(--earthtone-almond);
    --header-bg-secondary: #f5f1ea;
    --header-text-primary: var(--earthtone-blackolive);
    --header-text-secondary: var(--earthtone-ebony);
  }
  
  .top-header {
    background: linear-gradient(135deg, var(--header-bg-primary) 0%, var(--header-bg-secondary) 100%) !important;
    border-bottom-color: var(--earthtone-ebony) !important;
  }
  
  .top-header::before {
    background: rgba(227, 213, 197, 0.95) !important;
  }
  
  .top-logo h1 {
    background: linear-gradient(45deg, var(--earthtone-blackolive), var(--earthtone-ebony)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }
  
  .top-nav-menu a {
    color: var(--earthtone-blackolive) !important;
  }
  
  .top-nav-menu a:hover {
    color: var(--earthtone-ebony) !important;
    background: rgba(89, 97, 75, 0.1) !important;
  }
}

/*--------------------------------------------------------------
# Additional Enhancements
--------------------------------------------------------------*/
/* Scroll indicator with earthtone colors */
.header-scroll-indicator {
  background: linear-gradient(90deg, var(--earthtone-ebony), var(--earthtone-khaki)) !important;
}

/* Enhanced shadow effects */
.top-header.scrolled {
  backdrop-filter: blur(12px) !important;
}

/* Smooth transitions */
* {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}