/**
 * ============================================================================
 * EDMATES HEADER - COMPLETE CSS ARCHITECTURE
 * ============================================================================
 * 
 * Version: 6.2.6
 * Last Updated: 2024-11-01
 * 
 * STRUCTURE:
 * 1.0 - CSS Variables & Configuration
 * 2.0 - Base Styles & Reset
 * 3.0 - Desktop Header (Default, >768px)
 *   3.1 - Header Container
 *   3.2 - Logo
 *   3.3 - Navigation
 *   3.4 - Dropdown System
 *   3.5 - Apply Button
 * 4.0 - Mobile Overrides (<768px)
 *   4.1 - Mobile Header Container
 *   4.2 - Mobile Actions Bar
 *   4.3 - Hamburger Menu Button
 *   4.4 - Mobile Navigation Panel
 *   4.5 - Mobile Menu Items
 * 5.0 - Tablet Adjustments (769px-1024px)
 * 6.0 - Admin Bar Compatibility
 * 7.0 - Print Styles
 * 
 * ============================================================================
 */


/* ============================================================================
   1.0 - CSS VARIABLES & CONFIGURATION
   ============================================================================ */

:root {
  /* 1.1 - Layout Dimensions */
  --eh-height: 3.5rem;
  --eh-container-width: 1140px;
  --eh-mobile-breakpoint: 768px;
  
  /* 1.2 - Color Palette */
  --eh-bg: #F7F9FA;
  --eh-primary: #e50916;
  --eh-primary-hover: #cc0814;
  --eh-primary-light: #fef2f2;
  --eh-text: #334155;
  --eh-text-light: #64748b;
  --eh-text-lighter: #94a3b8;
  --eh-border: #e2e8f0;
  --eh-border-alpha: rgba(226, 232, 240, 0.8);
  
  /* 1.3 - Shadows */
  --eh-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --eh-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
  --eh-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  
  /* 1.4 - Z-Index Scale */
  --eh-z-header: 50;
  --eh-z-dropdown: 51;
  --eh-z-hamburger: 52;
  --eh-z-mobile-nav: 51;
  --eh-z-overlay: 49;
  
  /* 1.5 - Transitions */
  --eh-transition-fast: 150ms ease;
  --eh-transition-base: 200ms ease;
  --eh-transition-slow: 300ms ease;
  
  /* 1.6 - Border Radius */
  --eh-radius-sm: 0.25rem;
  --eh-radius-md: 0.5rem;
  --eh-radius-full: 9999px;
}


/* ============================================================================
   2.0 - BASE STYLES & RESET
   ============================================================================ */

/* 2.1 - Box Sizing Reset */
.edmates-header *,
.edmates-header *::before,
.edmates-header *::after {
  box-sizing: border-box;
}

/* 2.2 - Base Header Element */
.edmates-header {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2.3 - Hide Original Theme Headers */
.has-edmates-header .site-header:not(.edmates-header),
.has-edmates-header #masthead:not(.edmates-header),
.has-edmates-header header.header:not(.edmates-header) {
  display: none;
}

/* 2.4 - Body Padding for Fixed Header */
.has-edmates-header {
  padding-top: var(--eh-height);
}


/* ============================================================================
   3.0 - DESKTOP HEADER LAYOUT
   ============================================================================ */

/* 3.1 - Header Container
   -------------------------------------------------------------------------- */

.edmates-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: var(--eh-z-header);
  background-color: var(--eh-bg);
  border-bottom: 1px solid var(--eh-border);
  box-shadow: var(--eh-shadow-sm);
  transition: box-shadow var(--eh-transition-base);
}

.edmates-header.scrolled {
  box-shadow: var(--eh-shadow-md);
}

.edmates-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--eh-container-width);
  height: var(--eh-height);
  margin: 0 auto;
  padding: 0;
}


/* 3.2 - Logo
   -------------------------------------------------------------------------- */

.edmates-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  z-index: 1;
}

.edmates-logo a {
  display: block;
  line-height: 0;
  text-decoration: none;
}

.edmates-logo img {
  display: block;
  max-height: 2rem;
  width: auto;
  object-fit: contain;
}


/* 3.3 - Navigation Container (Desktop)
   -------------------------------------------------------------------------- */

.edmates-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-left: auto;
}

.edmates-nav-list {
  display: flex;
  align-items: center;
  gap: 1.875rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative;
  margin: 0;
  padding: 0;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.125rem;
  color: var(--eh-text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--eh-transition-fast);
  cursor: pointer;
}

.nav-link:hover {
  color: var(--eh-primary);
}

.nav-link:focus-visible {
  outline: 2px solid var(--eh-primary);
  outline-offset: 0.25rem;
  border-radius: var(--eh-radius-sm);
}


/* 3.4 - Dropdown System (Desktop)
   -------------------------------------------------------------------------- */

/* 3.4.1 - Dropdown Indicator Arrow */
.dropdown-indicator {
  flex-shrink: 0;
  transition: transform var(--eh-transition-fast);
}

.has-dropdown:hover .dropdown-indicator,
.has-dropdown.keyboard-focus .dropdown-indicator {
  transform: rotate(180deg);
}

/* 3.4.2 - Dropdown Container */
.dropdown-list {
  position: absolute;
  top: 100%;
  left: -27px;
  z-index: var(--eh-z-dropdown);
  margin-top: 0.5rem;
  padding: 0.5rem 0;
  background-color: #FFFFFF;
  border: 1px solid #D1D1D1;
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.07), 0 10px 20px rgba(0,0,0,0.1);
  list-style: none;
  min-width: 200px;
  
  /* Hidden by default */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.96);
  transform-origin: top left;
  transition: 
    opacity 180ms ease-out,
    transform 180ms ease-out,
    visibility 0ms linear 180ms;
}

/* 3.4.3 - Dropdown Active State */
.has-dropdown:hover .dropdown-list,
.has-dropdown.keyboard-focus .dropdown-list {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  transition: 
    opacity 180ms ease-out,
    transform 180ms ease-out,
    visibility 0ms linear 0ms;
}

/* 3.4.4 - Dropdown Hover Bridge */
.has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0.5rem;
  background: transparent;
}

/* 3.4.5 - Dropdown Links */
.dropdown-link {
  display: block;
  padding: 0.875rem 1.5rem;
  color: #1a1a1a;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: normal;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border-left: 3px solid transparent;
  transition: 
    color 120ms ease,
    background-color 120ms ease,
    border-color 120ms ease;
}

.dropdown-link:hover {
  color: #1a1a1a;
  background-color: #F5F5F5;
}

.dropdown-link:focus-visible {
  outline: 2px solid #e50916;
  outline-offset: -2px;
}


/* 3.5 - Apply Button (Desktop)
   -------------------------------------------------------------------------- */

.edmates-apply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.53rem 1.5rem;
  background-color: var(--eh-primary);
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.4;
  text-decoration: none;
  border: none;
  border-radius: var(--eh-radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--eh-transition-fast);
}

.edmates-mobile-apply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.53rem 1.5rem;
  background-color: var(--eh-primary);
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.4;
  text-decoration: none;
  border: none;
  border-radius: var(--eh-radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--eh-transition-fast);
}

.edmates-apply-btn:hover,
.edmates-mobile-apply-btn:hover {
  background-color: var(--eh-primary-hover);
  color: white;
}

/* Arrow Icon */
.edmates-apply-btn::after {
  content: "›";
  font-size: 1.25em;
  font-weight: bold;
  line-height: 1;
  transition: transform var(--eh-transition-fast);
}

.edmates-mobile-apply-btn::after {
  content: "›";
  font-size: 1.25em;
  font-weight: bold;
  line-height: 1;
  transition: transform var(--eh-transition-fast);
}

.edmates-apply-btn:hover::after,
.edmates-mobile-apply-btn:hover::after {
  transform: translateX(2px);
}


/* 3.6 - Mobile-Only Elements (Hidden on Desktop)
   -------------------------------------------------------------------------- */

.edmates-mobile-actions,
.edmates-mobile-menu-btn,
.edmates-mobile-menu-header {
  display: none;
}


/* ============================================================================
   4.0 - MOBILE OVERRIDES (<768px)
   ============================================================================ */

@media (max-width: 768px) {

  /* 4.1 - Mobile Header Container
     ------------------------------------------------------------------------ */
  
  /* Force fixed positioning on mobile to handle iOS Safari address bar */
  .edmates-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
  }
  
  /* Push body content below fixed header */
  body {
    padding-top: var(--eh-height);
  }
  
  .edmates-header-container {
    padding: 0 1.25rem;
    align-items: center;
  }
  
  /* Ensure logo and actions are perfectly aligned */
  .edmates-logo,
  .edmates-mobile-actions {
    display: flex;
    align-items: center;
  }


  /* 4.2 - Mobile Actions Bar (Apply + Hamburger)
     ------------------------------------------------------------------------ */
  
  .edmates-mobile-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    height: 100%;
  }
  
  .edmates-mobile-apply-btn {
    display: inline-flex;
    align-items: center;
  }


  /* 4.3 - Hamburger Menu Button
     ------------------------------------------------------------------------ */
  
  .edmates-mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: var(--eh-z-hamburger);
    padding: 0.75rem;
    background: transparent !important;
    border: none;
    color: var(--eh-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  .edmates-mobile-menu-btn:hover,
  .edmates-mobile-menu-btn:active,
  .edmates-mobile-menu-btn:focus {
    background: transparent !important;
  }
  
  /* Hamburger Icon Container */
  .hamburger {
    position: relative;
    width: 1.5rem;
    height: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  /* Hamburger Lines (3 lines) */
  .hamburger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--eh-text);
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.25s cubic-bezier(0.4, 0, 0.6, 1), 
                top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
  }
  
  .hamburger span:nth-child(1) {
    top: 0;
  }
  
  .hamburger span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
  }
  
  .hamburger span:nth-child(3) {
    bottom: 0;
  }
  
  /* Transform to X when active - smoother Apple-style animation */
  .edmates-mobile-menu-btn.active .hamburger span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
  
  .edmates-mobile-menu-btn.active .hamburger span:nth-child(2) {
    opacity: 0;
    transform: translateY(-50%) scale(0.8);
  }
  
  .edmates-mobile-menu-btn.active .hamburger span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
  }


  /* 4.4 - Mobile Navigation Panel
     ------------------------------------------------------------------------ */
  
  .edmates-nav {
    position: fixed;
    top: var(--eh-height);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    height: calc(100vh - var(--eh-height));
    height: calc(100dvh - var(--eh-height));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0;
    margin: 0;
    background-color: var(--eh-bg);
    z-index: var(--eh-z-mobile-nav);
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    transform: scaleY(0);
    transform-origin: top;
    visibility: hidden;
    will-change: transform;
    transition: 
      transform 400ms cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear 400ms;
    pointer-events: none;
  }
  
  /* Mobile Nav - OPEN State */
  .edmates-nav.active {
    transform: scaleY(1);
    visibility: visible;
    overflow-x: hidden;
    overflow-y: auto;
    transition: 
      transform 400ms cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear 0s,
      overflow 0s linear 400ms;
    pointer-events: auto;
  }
  
  .edmates-nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    padding: 1rem 1.25rem;
  }


  /* 4.5 - Mobile Menu Items Styling
     ------------------------------------------------------------------------ */
  
  .nav-item {
    width: 100%;
    border-bottom: 1px solid var(--eh-border);
  }
  
  /* Remove borders from submenu items - ULTRA specific override */
  .dropdown-list .nav-item,
  .dropdown-list > .nav-item,
  .dropdown-list > li.nav-item,
  .dropdown-list li,
  .has-dropdown .dropdown-list .nav-item,
  .edmates-nav .dropdown-list .nav-item,
  ul.dropdown-list > li.nav-item {
    border-bottom: none !important;
    border: none !important;
  }
  
  /* Hide parent border when dropdown is open */
  .has-dropdown.active {
    border-bottom: none;
  }
  
  .nav-link {
    display: flex;
    width: 100%;
    padding: 1rem 0;
    min-height: 56px;
    box-sizing: border-box;
    font-size: 1rem;
    font-weight: 700;
    justify-content: space-between;
    align-items: center;
    color: var(--eh-text);
    background: transparent;
  }
  
  .nav-link:hover,
  .nav-link:focus {
    color: var(--eh-primary);
  }
  
  /* Dropdown Indicator - Mobile */
  .dropdown-indicator {
    width: 1rem;
    height: 1rem;
    color: var(--eh-text);
    transition: transform 250ms ease;
    flex-shrink: 0;
  }
  
  /* Disable hover rotation on mobile - only use .active class */
  .has-dropdown:hover .dropdown-indicator,
  .has-dropdown.keyboard-focus .dropdown-indicator {
    transform: none;
  }
  
  /* Rotate chevron only when dropdown is actually open */
  .has-dropdown.active .dropdown-indicator {
    transform: rotate(180deg);
  }


  /* 4.7 - Mobile Dropdown (Accordion Style)
     ------------------------------------------------------------------------ */
  
  .dropdown-list {
    position: static;
    margin-top: 0;
    padding: 0;
    width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: 
      max-height 350ms cubic-bezier(0.4, 0, 0.2, 1),
      opacity 300ms ease,
      transform 300ms ease,
      visibility 0s linear 300ms;
  }
  
  /* Hide dropdown arrow pointer on mobile */
  .dropdown-list::before {
    display: none;
  }
  
  /* Mobile Dropdown - OPEN State */
  .has-dropdown.active .dropdown-list {
    max-height: 400px;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: 
      max-height 350ms cubic-bezier(0.4, 0, 0.2, 1),
      opacity 300ms ease,
      transform 300ms ease,
      visibility 0s linear 0s;
  }
  
  /* Remove desktop hover bridge on mobile */
  .has-dropdown::after {
    display: none;
  }

  /* Mobile Dropdown Links - NO BORDERS */
  .dropdown-link {
    display: block;
    padding: 1rem 0 1rem 1rem;
    min-height: 56px;
    box-sizing: border-box;
    color: var(--eh-text-light);
    font-size: 0.9375rem;
    font-weight: 400;
    border: none !important;
    border-left: none !important;
    border-bottom: none !important;
  }
  
  .dropdown-link:hover {
    background-color: transparent;
    color: var(--eh-text);
  }


  /* 4.8 - Hide Desktop Apply Button on Mobile
     ------------------------------------------------------------------------ */
  
  .edmates-apply-btn {
    display: none;
  }

}


/* ============================================================================
   5.0 - OVERLAY
   ============================================================================ */

.edmates-overlay {
  position: fixed;
  top: var(--eh-height);
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  width: 100dvw;
  height: calc(100vh - var(--eh-height));
  min-height: calc(100vh - var(--eh-height));
  min-height: calc(100dvh - var(--eh-height));
  background-color: rgba(0, 0, 0, 0.5);
  z-index: var(--eh-z-overlay);
  transform: scaleY(0);
  transform-origin: top;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
  transition: 
    transform 400ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 400ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 400ms;
  pointer-events: none;
}

.edmates-overlay.active {
  transform: scaleY(1);
  opacity: 1;
  visibility: visible;
  transition: 
    transform 400ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 400ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0s;
  pointer-events: auto;
}


/* ============================================================================
   6.0 - ADMIN BAR COMPATIBILITY
   ============================================================================ */

@media screen and (min-width: 783px) {
  .admin-bar .edmates-header {
    top: 32px;
  }
}

@media screen and (max-width: 782px) {
  .admin-bar .edmates-header {
    top: 46px;
  }
}


/* ============================================================================
   7.0 - PRINT STYLES
   ============================================================================ */

@media print {
  .edmates-header {
    position: static;
    box-shadow: none;
    border-bottom: 1px solid #ccc;
  }
  
  .edmates-mobile-menu-btn,
  .edmates-mobile-apply-btn,
  .edmates-overlay {
    display: none;
  }
  
  .edmates-nav {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
  }
}