/* --- Base & General Navbar Styles --- */
.growf-navbar {
  background-color: #252525; /* Primary Navbar Background */
  font-family: Inter, sans-serif;
  padding: 0 24px; /* Desktop padding */
  height: 70px; /* Default height, adjust as per theme.json or specific needs */
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1000;
  max-width:100vw;
  overflow: hidden;
}

.growf-navbar .nav-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 768px) and (max-width: 1200px) {
  .growf-navbar .nav-content-wrapper {
    max-width: none; /* Full width between 768px and 1200px */
  }
}

.growf-navbar .header-logo img {
  max-height: 40px; /* Adjust as needed */
  width: auto;
}

.growf-navbar .header-col-holder { /* Retained for structure if used by JS or base theme */
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
}

.no-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.show-for-sr { /* Screen reader only text */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Desktop Navigation Styles --- */
.header__menu--desktop {
  display: flex;
  align-items: center;
  margin-left: 20px; /* Space between logo and nav */
}

.growf-desktop-nav__list {
  display: flex;
  align-items: center;
}

.growf-desktop-nav__item {
  position: relative;
  margin: 0;
}
a.growf-desktop-nav__link {
    color: #E0E0E0;
}
a.growf-desktop-nav__link:hover {
    color: rgba(250, 204, 21, 1.0);
}

.growf-desktop-nav__link,
.growf-desktop-nav__dropdown-toggle {
  font-family: Inter,sans-serif;
  font-weight: 500; /* Medium */
  font-size: 15px;
  color: #E0E0E0; /* Light Gray */
  text-decoration: none;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease-out;
  position: relative; /* For ::after pseudo-element */
}

.growf-desktop-nav__link:hover,
.growf-desktop-nav__link:focus,
.growf-desktop-nav__dropdown-toggle:hover,
.growf-desktop-nav__dropdown-toggle:focus {
  color: rgba(250, 204, 21, 1.0); /* Growf Yellow */
}

.growf-desktop-nav__link[aria-current="page"],
.growf-desktop-nav__dropdown-toggle[aria-expanded="true"] {
  color: rgba(250, 204, 21, 1.0); /* Growf Yellow */
}

.growf-desktop-nav__link[aria-current="page"]::after,
.growf-desktop-nav__dropdown-toggle[aria-expanded="true"]::after {
  content: '';
  position: absolute;
  bottom: 0; /* Adjust as needed for underline position */
  left: 15px;
  right: 15px;
  height: 2px;
  background-color: rgba(250, 204, 21, 1.0); /* Growf Yellow */
}

.growf-desktop-nav__dropdown-toggle .fa-chevron-down {
  font-size: 12px;
  margin-left: 8px;
  color: #E0E0E0;
  transition: transform 0.2s ease-out, color 0.15s ease-out;
}
.growf-desktop-nav__dropdown-toggle:hover .fa-chevron-down,
.growf-desktop-nav__dropdown-toggle:focus .fa-chevron-down,
.growf-desktop-nav__dropdown-toggle[aria-expanded="true"] .fa-chevron-down {
  color: rgba(250, 204, 21, 1.0); /* Growf Yellow */
}

.growf-desktop-nav__dropdown-toggle[aria-expanded="true"] .fa-chevron-down {
  transform: rotate(180deg);
}

/* --- Desktop Mega-Menu Styles --- */
.growf-desktop-nav__dropdown-menu { /* Base for all dropdowns */
  position: absolute;
  top: calc(100% + 5px); /* Small gap below navbar, adjust if needed */
  left: 0; /* Default, will be overridden for mega-menu centering */
  background-color: #FAFAFA; /* Subtle Off-White */
  border-radius: 8px; /* Updated */
  box-shadow: 0 10px 25px rgba(0,0,0,0.08); /* Updated */
  padding: 0; /* Panes handle internal padding */
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px); /* Slight slide-up for entry */
  transform-origin: top center;
  transition: opacity 0.2s ease-out, visibility 0.2s ease-out, transform 0.2s ease-out;
  min-width: 220px; /* For simple dropdowns, mega-menu overrides */
}

.growf-desktop-nav__dropdown-menu.mega-menu {
  /* left: 50%; */ /* JS will handle left positioning for mega-menus */
  /* transform: translateX(-50%) translateY(-10px); */ /* JS will handle translateX, base class .growf-desktop-nav__dropdown-menu handles initial translateY */
  width: 80vw;
  max-width: 960px;
  /* Padding is 0, inner panes handle it */
}

/* .growf-desktop-nav__item--dropdown:hover .growf-desktop-nav__dropdown-menu, */ /* Removed hover trigger */
.growf-desktop-nav__dropdown-toggle[aria-expanded="true"] + .growf-desktop-nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  /* transform is handled by JS for mega-menu positioning and by base class for non-mega */
  /* For mega-menu, JS sets transform: translateY(0) and left. */
  /* For non-mega, it's transform: translateY(0) (see below) */
}

.growf-desktop-nav__dropdown-toggle[aria-expanded="true"] + .growf-desktop-nav__dropdown-menu.mega-menu {
  /* JS handles transform: translateY(0) and left positioning. */
  /* This rule is primarily for opacity and visibility, transform is dynamic. */
}
/* For non-mega-menu dropdowns if any, adjust transform if not centered */
.growf-desktop-nav__dropdown-toggle[aria-expanded="true"] + .growf-desktop-nav__dropdown-menu:not(.mega-menu) {
  transform: translateY(0);
}


.mega-menu__container {
  display: flex;
  justify-content: center;
  min-height: 320px; /* Minimum height for mega-menu */
  background-image: linear-gradient(90deg, #2e2c2c 50%, #eeeeee 50%);
}

.mega-menu__categories-pane {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background-color: #2e2c2c; /* Consistent with container */
  padding: 24px 16px; /* Updated */
  width: 30%;
  max-width: 300px; /* Max width for categories pane */
  border-right: 1px solid #E0E0E0; /* Subtle divider */
}

.mega-menu__category-item {
  display: flex;
  align-items: center;
  width: 100%;
  font-family: Inter, sans-serif;
  font-weight: 500; /* Medium */
  font-size: 16px;
  color: #ccc; /* Medium Gray */
  background-color: transparent;
  border: none;
  padding: 12px 16px; /* Updated */
  border-radius: 6px; /* New */
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

.mega-menu__category-item .fas, /* Assuming Font Awesome Solid */
.mega-menu__category-item .far,
.mega-menu__category-item .fab {
  font-size: 16px;
  margin-right: 12px; /* Space between icon and text */
  color: #555555; /* Default icon color */
  transition: color 0.15s ease-out;
}

.mega-menu__category-item:hover,
.mega-menu__category-item:focus {
  background-color: #eaf0f621; /* Light hover */
}
.mega-menu__category-item:hover .fas,
.mega-menu__category-item:focus .fas {
  color: #252525; /* Dark Gray icon on hover */
}

.mega-menu__category-item--active,
.mega-menu__category-item[aria-selected="true"] {
  background-color: #eaf0f621; /* Growf Yellow */
}

.mega-menu__category-item--active .fas,
.mega-menu__category-item[aria-selected="true"] .fas {
  color: #252525; /* Dark Gray icon on active */
}

.mega-menu__content-panels {
  background-color: #eeeeee; /* Consistent with container */
  width: 70%;
  max-width: 900px;
}

.mega-menu__panel {
  display: none;
}

.mega-menu__panel--active {
  display: block;
}

.mega-menu__panel .mega-menu__items-list {
  /* No specific list styles, items handle their own */
  margin-bottom: 16px;
}

.mega-menu__panel .mega-menu__item-link {
  display: block; /* Or flex if icon is inside */
  padding: 10px 24px; /* Updated */
  text-decoration: none;
  transition: color 0.15s ease-out;
  margin-bottom: 8px; /* Spacing between items, reduced from 20px to fit more */
}
.mega-menu__panel .mega-menu__item-link:last-child {
  margin-bottom: 0;
}

.mega-menu__panel .mega-menu__item-link:hover,
.mega-menu__panel .mega-menu__item-link:focus {
  background-color: #e0e0e0; /* Very light yellow tint */
}

/* Item structure: Icon (optional) + Title/Description block */
.mega-menu__item-content-wrapper { /* New wrapper for text if icon is sibling */
  /* display: flex; align-items: flex-start; */ /* If icon is outside this wrapper */
}
.mega-menu__item-link .fas { /* Icon for items in right pane */
  font-size: 14px;
  color: #757575;
  margin-right: 10px; /* Space between icon and title/desc block */
  /* vertical-align: top; /* Align with top of text block */
}


.mega-menu__item-title { /* This is for the actual item title, not section header */
  font-family: Inter, sans-serif;
  font-weight: 500; /* Medium */
  font-size: 16px;
  color: #252525; /* Dark Gray */
  display: block; /* Or inline if icon is part of this span */
  margin-bottom: 4px;

}
/* Section Header specific styling (e.g. "Products and services" if it's the first in list) */
.mega-menu__items-list > li:first-child .mega-menu__item-title {
  font-weight: 500; /* SemiBold */
  font-size: 18px;
}




.mega-menu__item-description {
  font-family: Inter, sans-serif;
  font-weight: 400; /* Regular */
  font-size: 14px;
  color: #757575; /* Medium-Light Gray */
  display: block;
  line-height: 1.5; /* New */
}

/* --- Desktop CTA Buttons --- */
.growf-navbar__cta {
  display: flex;
  align-items: center;
}

.growf-navbar__cta .button { /* Generic button class if used */
  font-family: Inter, sans-serif;
  font-weight: 600; /* SemiBold */
  font-size: 15px;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  margin-left: 10px; /* Space between buttons */
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out, filter 0.15s ease-out;
}

/* Primary CTA ("Talk to Sales") */
.growf-navbar__cta .button--primary,
.header-button a[href*="talk-to-sales"] { /* Targeting existing HTML structure */
  background-color: rgba(250, 204, 21, 1.0); /* Growf Yellow */
  color: #252525 !important; /* Dark Gray text, important to override base theme if needed */
  border: 1px solid rgba(250, 204, 21, 1.0);
}
.growf-navbar__cta .button--primary:hover,
.growf-navbar__cta .button--primary:focus,
.header-button a[href*="talk-to-sales"]:hover,
.header-button a[href*="talk-to-sales"]:focus {
  filter: brightness(90%);
  background-color: rgba(250, 204, 21, 0.9); /* Slight darken on hover */
  border-color: rgba(250, 204, 21, 0.9);
}

/* Secondary CTA ("Login" - Desktop) */
.growf-navbar__cta .button--secondary,
.header-button a:not([href*="talk-to-sales"]) { /* Targeting existing HTML structure */
  background-color: transparent;
  color: #E0E0E0 !important; /* Light Gray text */
  border: 1px solid rgba(255,255,255,0.2); /* Subtle white border */
}
.growf-navbar__cta .button--secondary:hover,
.growf-navbar__cta .button--secondary:focus,
.header-button a:not([href*="talk-to-sales"]):hover,
.header-button a:not([href*="talk-to-sales"]):focus {
  background-color: rgba(255,255,255,0.2); /* Light background on hover */
  border-color: rgba(255,255,255,0.3);
}


/* --- Mobile Navigation Styles --- */
.growf-mobile-trigger {
  display: none; /* Hidden on desktop, shown via @media */
  margin-left: auto; /* Pushes to the right */
}

.growf-mobile-trigger .mobile-trigger { /* The button itself */
  background: none;
  border: none;
  color: #FFFFFF; /* White icon */
  font-size: 24px;
  padding: 10px; /* Ensure decent tap area */
  cursor: pointer;
}

.growf-mobile-nav { /* Flyout Container */
  position: fixed;
  top: 0;
  right: -100%; /* Start off-screen */
  width: 85%;
  max-width: 320px;
  height: 100vh;
  background-color: #FAFAFA; /* Subtle Off-White */
  box-shadow: -4px 0 12px rgba(0,0,0,0.1);
  z-index: 1002;
  overflow-y: auto;
  transition: right 0.25s ease-out;
  display: flex;
  flex-direction: column;
}

.growf-mobile-nav.active {
  right: 0; /* Slide in */
}

.mobile-menu-header { /* Header within the flyout, containing close button */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 16px; /* Match mobile navbar bar padding */
  background-color: #252525; /* Match navbar bar BG */
  height: 60px; /* Match mobile navbar height */
  flex-shrink: 0;
}

.mobile-menu-header .mobile-close-trigger {
  background: none;
  border: none;
  color: #FFFFFF; /* White icon */
  font-size: 24px;
  padding: 10px;
  cursor: pointer;
}

.growf-mobile-nav .primary-menu-holder { /* Main content area of flyout */
  padding: 24px; /* Updated overall padding */
  flex-grow: 1;
  overflow-y: auto;
}

.growf-mobile-nav__level {
  display: none;
}
.growf-mobile-nav__level.active {
  display: block;
}

.growf-mobile-nav__header { /* Header for Level 2+ (Back button, Title) */
  padding: 16px 10px; /* Updated */
  border-bottom: 1px solid #E0E0E0; /* Light Gray divider */
  margin-bottom: 10px;
}

.growf-mobile-nav__back-btn {
  font-family: Inter, sans-serif;
  font-weight: 500; /* Medium - Updated */
  font-size: 16px;
  color: #555555; /* Medium Gray */
  background: none;
  border: none;
  padding: 0; /* Remove default button padding, use parent's */
  margin-bottom: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.growf-mobile-nav__back-btn .fas { /* Chevron Left */
  margin-right: 8px;
  color: #555555; /* Medium Gray */
}

.growf-mobile-nav__title { /* e.g., "Features", "Strategy" */
  font-family: Inter, sans-serif;
  font-weight: 600; /* SemiBold */
  font-size: 20px;
  color: #252525; /* Dark Gray */
  margin: 0;
  padding: 0 0 0 0px; /* Align with items if back button is above */
}
.growf-mobile-nav__header .growf-mobile-nav__title {
    padding-top: 0; /* No extra top padding if back button is present */
}


.growf-mobile-nav__item {
  border-bottom: 1px solid #E0E0E0; /* Light Gray divider */
}
.growf-mobile-nav__item:last-child {
  border-bottom: none;
}

.growf-mobile-nav__link,
.growf-mobile-nav__submenu-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 16px 10px; /* Updated */
  font-family: Inter, sans-serif;
  text-decoration: none;
  background-color: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}

.growf-column-list {
  flex-direction: column;
  align-items: flex-start;
}

/* Level 1 Item Text */
.growf-mobile-nav__level--1 .growf-mobile-nav__link,
.growf-mobile-nav__level--1 .growf-mobile-nav__submenu-trigger {
  font-weight: 500; /* Medium */
  font-size: 18px;
  color: #252525; /* Dark Gray */
}

/* Level 2 Category Text & Icons */
.growf-mobile-nav__level--2 .growf-mobile-nav__link, /* If a category is a direct link */
.growf-mobile-nav__level--2 .growf-mobile-nav__submenu-trigger { /* If category leads to L3 */
  font-weight: 500; /* Medium */
  font-size: 18px;
  color: #252525; /* Dark Gray */
}
.growf-mobile-nav__level--2 .growf-mobile-nav__link .fas,
.growf-mobile-nav__level--2 .growf-mobile-nav__submenu-trigger .fas {
  font-size: 16px;
  color: #555555; /* Medium Gray icon */
  margin-right: 12px; /* Added margin */
  width: 20px; /* Ensure alignment */
  text-align: center;
}

/* Level 3 Item Text & Icons */
.growf-mobile-nav__level--3 .growf-mobile-nav__link {
  font-weight: 400; /* Regular */
  font-size: 16px;
  color: #252525; /* Dark Gray */
}
.growf-mobile-nav__level--3 .growf-mobile-nav__link .fas {
  font-size: 14px;
  color: #757575; /* Medium-Light Gray icon */
  margin-right: 10px; /* New */
  width: 18px; /* Ensure alignment */
  text-align: center;
}


.growf-mobile-nav__link:hover,
.growf-mobile-nav__link:focus,
.growf-mobile-nav__submenu-trigger:hover,
.growf-mobile-nav__submenu-trigger:focus {
  background-color: rgba(250, 204, 21, 0.15); /* Tap State Background */
}

.growf-mobile-nav__submenu-trigger .fa-chevron-right {
  color: #AAAAAA; /* Light Gray chevron */
  font-size: 14px;
}

/* Mobile Menu CTA Buttons */
.growf-mobile-nav__item--cta {
  border-bottom: none;
  padding: 10px 0; /* Space around buttons */
  margin-top: 16px; /* Space above first CTA */
}
.growf-mobile-nav__item--cta .button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px 20px; /* Updated padding */
  font-size: 16px;
  font-weight: 600; /* SemiBold */
  border-radius: 4px;
  text-decoration: none;
  transition: filter 0.15s ease-out;
}
.growf-mobile-nav__item--cta .button.button--primary {
  background-color: rgba(250, 204, 21, 1.0); /* Growf Yellow */
  color: #252525;
  border: 1px solid rgba(250, 204, 21, 1.0);
}
.growf-mobile-nav__item--cta .button.button--secondary {
  background-color: transparent;
  color: #252525; /* Dark Gray text on light BG */
  border: 1px solid #555555; /* Medium Gray border - Refined */
  margin-top: 10px;
}
.growf-mobile-nav__item--cta .button:hover,
.growf-mobile-nav__item--cta .button:focus {
  filter: brightness(90%);
}

/* --- Responsive Adjustments --- */
@media (max-width: 767px) { /* Mobile Breakpoint from theme.json */
  .growf-navbar {
    padding: 0 16px; /* Mobile padding */
    height: 60px; /* Mobile height */
  }
  .header__menu--desktop,
  .growf-navbar__cta { /* Hide desktop nav and CTAs */
    display: none !important;
  }
  .growf-mobile-trigger {
    display: flex;
    align-items: center;
  }
}

/* Hide HubSpot default drag indicators if they appear on module */
.hs-dragindicator {
  display: none !important;
}