/* Global */
body { font-family: 'Inter', sans-serif; margin: 0; padding: 0; }

/* --- Header Layout --- */
.header-wrapper { 
  width: 100%; 
  background: white; 
  border-bottom: 1px solid #F6F6F6;
  position: fixed; 
  top: 0; 
  left: 0; 
  z-index: 1000; 
  height: 72px; 
  display: flex;
  align-items: center;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease;
}

.header-container { 
  width: 100%;
  max-width: 1440px; 
  margin: 0 auto; 
  padding: 0 20px; 
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  /* REQUIRED for absolute centering of nav */
  position: relative; 
}

/* 1. Desktop Centering Logic: Fixed widths for outer elements force the center to be the middle */
.logo-link {
  z-index: 3;
}

.header-cta-container { 
  /* Pushes CTA to the far right of the flex container */
  margin-left: auto; 
  display: flex; 
  align-items: center;
  z-index: 3;
}

/* Scroll Classes */
.header-wrapper.header--hidden { transform: translateY(-100%); }
.header-wrapper.header--scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
}

.logo { height: 40px; width: auto; }

/* --- Desktop Navigation Logic --- */
.mobile-toggle { display: none; border: none; background: none; cursor: pointer; }

.nav-and-cta-wrapper {
  display: flex;
  align-items: center;
  width: 100%; /* Spans the full container */
}

.header-nav { 
  /* ABSOLUTE CENTERING: This ignores the logo and CTA width */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* HubSpot Menu Overrides */
.header-nav .hs-menu-wrapper > ul {
  display: flex;
  gap: 8px; /* Slightly tighter gap to ensure it fits center */
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center;
  white-space: nowrap; /* Prevents menu items from wrapping */
}

.header-nav .hs-menu-item {
  list-style: none !important;
}

.header-nav .hs-menu-item a { 
  display: inline-block;
  text-decoration: none; 
  color: #151718; 
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 135%;
  padding: 10px 16px; 
  border-radius: 4.27px;
  transition: background 0.2s ease-in-out;
}

.header-nav .hs-menu-item a:hover { background-color: #F6F6F6; }

/* --- Footer Styles --- */
.footer-wrapper { 
  background: #0000ff; 
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  padding: 60px 0 40px; /* Adjusted padding for better balance */
  margin: 0 auto;
  color: white; 
  font-family: sans-serif; /* Ensure font consistency */
  position: relative;
  margin-top: -72px;
  z-index: 10;
}

.footer-container { max-width: 1440px; margin: 0 auto; padding: 0 40px; }
.footer-top-section { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
.footer-logo-container { display: flex; flex-direction: column; gap: 30px; align-items: flex-start }
.logo-footer { height: 58px; width: auto; display: block; }
.footer-brand-name { color: white; font-size: 20px; font-weight: bold; margin-left: 10px; }
.footer-top-text-container { display: flex; align-items: center; gap: 20px; }
.copyright { font-size: 12px; opacity: 0.7; margin: 0; }
.footer-divider { border: none; border-top: 1px solid rgba(255, 255, 255, 0.2); margin: 0 0 20px 0; }
.footer-bottom-section { display: flex; justify-content: space-between; align-items: center; }
.cocentric-info { font-size: 12px; opacity: 0.7; margin: 0; }
.footer-links { list-style: none; padding: 0; display: flex; gap: 25px; }
.footer-links a { color: white; text-decoration: none; font-size: 12px; opacity: 0.7; transition: opacity 0.3s ease; }
.footer-links a:hover {
  opacity: 1;
}

.linkedin-icon {
  width: 28px;
  height: auto;
  display: block;
  transition: opacity 0.3s ease;
}

.linkedin-icon:hover {
  opacity: 0.8;
}

/* Body Content Spacing */
.body-container-wrapper { max-width: 1440px; margin: 0 auto; padding-top: 72px; padding-bottom: 0px; }

/* --- Responsive Adjustments --- */
@media (max-width: 991px) {
  /* Reset desktop "true center" logic for mobile */
  .logo-link, .header-cta-container { 
    min-width: 0; 
    position: static; 
    transform: none;
  }
  
  .logo-footer {
    max-width: 120px; /* Adjust this value as needed */
    height: auto;
  }

  .mobile-toggle { 
    display: flex; 
    flex-direction: column; 
    gap: 5px; 
    z-index: 1001;
    background: none;
    border: none;
    cursor: pointer;
  }
  .mobile-toggle span { width: 25px; height: 2px; background: #151718; transition: 0.3s; }
  
  .nav-and-cta-wrapper {
    /* Remove display: none; as it prevents animation */
    display: flex; 
    position: absolute;
    top: 60px; 
    left: 0;
    width: 100%;
    background: white;
    flex-direction: column; 
    padding: 0 20px; /* Vertical padding moved to child items for smoother height animation */
    border-bottom: 1px solid #F6F6F6;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    
    /* Animation Properties */
    overflow: hidden;
    max-height: 0; /* Start at 0 height */
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease, visibility 0.3s;
  }

  .nav-and-cta-wrapper.active {
    max-height: 600px; /* Give it a height large enough to fit content */
    opacity: 1;
    visibility: visible;
    padding: 20px 0; /* Restore padding when open */
  }

  .header-nav {
    position: static;
    transform: none;
    width: 100%;
    margin: 0;
  }
  
  /* Reset HubSpot UL: Critical to remove hidden padding/margins */
  .header-nav .hs-menu-wrapper > ul { 
    flex-direction: column !important; 
    width: 100% !important; 
    align-items: center !important; 
    justify-content: center !important;
    padding: 0 !important; 
    margin: 0 !important;
    list-style: none !important;
  }

  /* Each Menu Item Container */
  .header-nav .hs-menu-item {
    width: 80% !important; /* Forces the item container to 80% width */
    margin: 0 auto !important; /* Centers the 80% container */
    padding: 0 !important;
    list-style: none !important;
    border-bottom: 1px solid #F6F6F6; /* The requested border */
    display: flex;
    justify-content: center;
  }

  /* Remove border from the last menu item before the CTA */
  .header-nav .hs-menu-item:last-child {
    border-bottom: none;
  }

  .header-nav .hs-menu-item a { 
    display: block; 
    width: 100%; 
    text-align: center !important; 
    font-size: 16px; 
    padding: 16px 0; /* Increased padding for better touch targets */
    color: #151718;
    text-decoration: none;
    background: transparent !important; /* Remove any hover backgrounds from desktop */
  }
  
  .header-container {
    justify-content: space-between;
  }

  .header-cta-container { 
    width: 100%; 
    display: flex;
    justify-content: center;
    margin-top: 10px;
    padding: 20px 0;
  }

  .footer-wrapper { margin: 0; border-radius: 0; padding: 40px 20px; }
  .footer-container { 
    padding: 0 20px; 
    display: flex; 
    flex-direction: column; 
  }
  
  /* Top Section Layout */
  .footer-top-section { 
    display: flex;
    flex-direction: row !important; /* Forces side-by-side layout */
    align-items: center; 
    justify-content: space-between; /* Pushes logo left and icon right */
    gap: 15px; 
    width: 100%;
  }
  
  /* Remove copyright from its desktop position visually */
  .footer-logo-container { 
    display: flex;
    align-items: center;
    order: 1; /* Keeps logo on the left */
    flex: 0 1 auto;
  }
  .footer-top-text-container { 
    order: 2; /* Keeps icon on the right */
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
  }
  
  /* Divider */
  .footer-divider { order: 3; width: 100%; }

  /* Bottom Section Layout */
  .footer-bottom-section { 
    order: 4;
    display: flex;
    flex-direction: column; 
    text-align: center; 
    gap: 15px; 
  }

  /* Move Copyright here using order */
  .footer-logo-container .copyright {
    order: 5; /* This moves it to the bottom of its specific flex container */
  }

  /* Target the elements to stack in your specific order */
  .footer-links { order: 1; flex-direction: column; gap: 15px; }
  
  /* Pulling the copyright into the bottom flow via the container order */
  .footer-top-section .copyright {
    position: absolute;
    bottom: 65px; /* Adjust based on exact spacing needed */
    left: 0;
    right: 0;
  }
  
  /* Alternative clean approach: Hide desktop copyright, show mobile-only version, 
     OR simply use flex-direction on the whole container */
  .footer-container {
    display: flex;
    flex-direction: column;
  }
  
  .footer-top-section { order: 1; }
  .footer-divider { order: 2; }
  
  /* The specific sequence you requested */
  .footer-bottom-section { 
    order: 3; 
    display: flex; 
    flex-direction: column; 
  }
  
  .footer-links { order: 1; }
  
  /* We move the copyright from the top section to the bottom visually */
  .footer-logo-container .copyright { display: none; } /* Hide in top */
  
  /* Add this small HTML snippet or use this CSS hack to re-order */
  .footer-bottom-section::before {
    content: "© 2026 Connect. All Rights Reserved.";
    order: 2;
    font-size: 12px;
    opacity: 0.7;
  }
  .cocentric-info { order: 3; }
}

}