/*
  Navbar CSS - HubSpot CMS Version
  =================================
  Pixel-perfect replica of Vention marketing navbar styling.

  Key Features:
  - CSS Custom Properties (variables) for theming
  - Responsive breakpoints: mobile (< 1070px), desktop (>= 1070px)
  - Shared viewport pattern for dropdown menus
  - Mobile-first responsive design
  - Smooth animations and transitions

  CSS Architecture:
  1. CSS Variables (custom properties)
  2. Base/Reset styles
  3. Main navbar container
  4. Logo section
  5. Desktop navigation & dropdowns
  6. Shared viewport styles
  7. Utility links
  8. Mobile navigation
  9. Responsive breakpoints
*/

/* ============================================
   CSS Custom Properties (Variables)
   ============================================
   Centralized color and sizing variables for easy theming.
   All colors and key measurements are defined here.
*/
/* --- HubSpot theme neutralizer for the header --- */
.v-header-scope, .v-header-scope * { box-sizing: border-box; }

/* kill generic UL/LI/A/Button resets from the theme */
/* Keep this – harmless and useful */
.v-header-scope, .v-header-scope * { box-sizing: border-box; }

/* Only normalize the TOP-LEVEL menu list */
.v-header-scope .navbar-menu-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex;
  align-items: center !important;
  gap: 0;
}

/* Only normalize TOP-LEVEL li */
.v-header-scope .navbar-menu-list > li {
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
}

/* Only normalize the TOP-LEVEL triggers/links */
.v-header-scope .navbar-menu-list > li > .navbar-menu-trigger,
.v-header-scope .navbar-menu-list > li > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  line-height: 24px !important;
  height: auto !important;
  padding: 8px 16px !important;   /* your desired vertical rhythm */
  text-decoration: none !important;
  border: 0;                       /* avoid nuking other buttons elsewhere */
}

/* Keep the baseline alignment on the container */
.v-header-scope .navbar-container {
  display: flex;
  align-items: center;
  height: var(--header-nav-height);
}

/* Optional: ensure only top-level triggers get the extra clamp */
.v-header-scope .navbar-menu-item > a,
.v-header-scope .navbar-menu-item > .navbar-menu-trigger {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
/*
.v-header-scope :where(ul)  { margin:0 !important; padding:0 !important; list-style:none !important; }
.v-header-scope :where(li)  { margin:0 !important; padding:0 !important; }
.v-header-scope :where(a)   {
  margin:0 !important; padding:0 !important;
  line-height:1.2 !important; text-decoration:none !important;
  display:inline-flex !important; align-items:center !important;
}
.v-header-scope :where(button){
  margin:0 !important; border:0 !important; background:none !important;
  line-height:1.2 !important; padding:0 !important;
}
*/

/* ensure the menu items align on the same baseline */
.v-header-scope .navbar-container{ display:flex; align-items:center; height:var(--header-nav-height); }
.v-header-scope .navbar-menu-list{ display:flex; align-items:center !important; gap:0; }
.v-header-scope .navbar-menu-item{ display:flex; align-items:center; }
.v-header-scope .navbar-menu-trigger{
  display:inline-flex !important; align-items:center !important; justify-content:center;
  padding:8px 16px !important; line-height:24px !important; height:auto !important;
}

/* sometimes themes force anchors to full height with padding—double clamp it */
.v-header-scope .navbar-menu-item > a,
.v-header-scope .navbar-menu-item > .navbar-menu-trigger{
  padding-top:8px !important; padding-bottom:8px !important;
}
/* Isolation: stop theme CSS bleeding in */
.vention-navbar-wrap,
.vention-navbar-wrap * ,
.vention-navbar-wrap *::before,
.vention-navbar-wrap *::after {
  box-sizing: border-box;
}

/* Normalize common offenders the theme might touch */
.vention-navbar-wrap a,
.vention-navbar-wrap button {
  line-height: 1;             /* prevent tall inline boxes */
  text-decoration: none;
}

.vention-navbar-wrap svg {
  display: inline-block;
  vertical-align: middle;     /* keep icons aligned to text */
}

.vention-navbar-wrap {
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  line-height: 1.5;
}
:root {
  /* Layout */
  --header-nav-height: 70px;

  /* Gray Scale Colors */
  --gray-light-800: #1f293b; /* Main navbar background */
  --gray-light-700: #3b5366;
  --gray-light-600: #4a5568;
  --gray-light-400: #9ca3af; /* Icon/default text color */
  --gray-light-200: #e5e7eb; /* Borders */
  --gray-light-50: #f9fafb;  /* Light backgrounds */

  /* Brand Colors */
  --brand-600: #2563eb; /* Primary brand blue */
  --brand-500: #3b82f6; /* same family as your --brand-600 */
  --brand-200: #bfdbfe;

  /* Status Colors */
  --success-500: #10b981;
  --error-500: #ef4444;
  --red-500: #ef4444; /* Cart badge, alerts */

  /* Base Colors */
  --white: #ffffff;
  --black: #000000;
}

/* Reset and base styles */
.navbar-wrapper * {
  box-sizing: border-box;
}

.navbar-wrapper {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.5;
}

/* Main Navigation Container */
.navbar-main {
  background-color: var(--gray-light-800) !important;
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
}

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

/* Logo Section */
.navbar-logo-section {
  display: flex;
  flex-grow: 1;
  align-items: center;
}

.navbar-logo-small {
  display: block;
  padding: 0.5rem 0;
}

.navbar-logo-small.hidden-lg {
  display: none;
}

.navbar-logo-full {
  display: none;
  padding: 0.75rem 0;
  margin-top: -3px;
}

.navbar-logo-full.show-mobile {
  display: flex;
}

.navbar-logo-small a,
.navbar-logo-full a {
  display: inline-block;
  text-decoration: none;
  color: var(--white) !important;
}

.navbar-logo-small svg,
.navbar-logo-full svg {
  fill: var(--white) !important;
  color: var(--white) !important;
}

.navbar-logo-small svg {
  height: 1.75rem;
}

.navbar-logo-full svg {
  height: 1.25rem;
  display: block;
}

/* Force all paths and nested elements to be white */
.navbar-logo-small svg path,
.navbar-logo-full svg path,
.navbar-logo-small svg g,
.navbar-logo-full svg g,
.navbar-logo-small svg g path,
.navbar-logo-full svg g path {
  fill: var(--white) !important;
  color: var(--white) !important;
}

/* Desktop Navigation */
.navbar-desktop-nav {
  display: flex;
  position: relative; /* This makes left: 0 of the viewport equal to the end of the logo section */
}

.navbar-desktop-nav.hidden-lg {
  display: none;
}

.navbar-menu-list {
  display: flex;
  flex: 1;
  padding: 0 2rem;
  list-style: none;
  margin: 0;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
}

.navbar-menu-item {
  position: relative;
}

.navbar-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  font-weight: 700;
  font-size: 15px;
  line-height: 24px;
  color: var(--white);
  text-decoration: none;
  transition: all 0.2s;
  border: none;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}

/* Spacing between menu items */
.navbar-menu-item:not(:last-child) .navbar-menu-trigger {
  margin-right: .15rem;
}

.navbar-menu-trigger:hover,
.navbar-menu-trigger[aria-expanded="true"] {
  color: var(--white);
  text-decoration: none;
  background: transparent !important; /* Forces no background highlight */
}

/* Chevron arrow only appears on buttons with dropdowns (has aria-haspopup="true") */
.navbar-menu-trigger[aria-haspopup="true"]::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 0.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23ffffff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
  position: relative;
  top: 1px;
  transition: transform 0.2s;
}

.navbar-menu-trigger[aria-haspopup="true"][aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* Dropdown Menu - Original position (hidden, kept for structure) */
.navbar-dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 0.375rem;
  width: 780px;
  background: var(--white);
  border: 1px solid var(--gray-light-200);
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 2rem;
  display: none;
  z-index: 50;
  visibility: hidden;
  pointer-events: none;
}

.navbar-dropdown.show {
  display: block;
  animation: fadeIn 0.15s ease-out;
}

/* ============================================
   Shared Dropdown Viewport
   ============================================
   This is the key innovation: a single shared container for all dropdowns.
   Instead of each dropdown being positioned relative to its menu item,
   all dropdowns render into this single viewport container.

   Benefits:
   - Eliminates gaps between trigger and dropdown (smooth hover)
   - Consistent positioning and sizing
   - Smooth transitions when switching between menu items
   - Centered below the menu list

   Positioning:
   - Absolutely positioned relative to .navbar-menu-list
   - Centered horizontally using left: 50% + translateX(-50%)
   - Positioned below menu with margin-top
*/
.navbar-dropdown-viewport {
  position: absolute;
  /* Aligns to the start of the desktop nav container */
  left: 0; 
  /* Ensures no centering translations remain */
  transform: none !important; 
  top: calc(100% + 8px);

  /* Shift the menu slightly to the left to account for the logo spacing */
  /* This makes the sub-menu left edge sit where the logo right edge ends */
  margin-left: 0; 

  width: 780px;
  margin-top: 0; 
  background: var(--white);
  border: 1px solid var(--gray-light-200);
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  padding: 0 !important;
  display: none;
  z-index: 50;
  overflow: hidden;
}
/* Only apply 3 columns if the dropdown has the --xl class */
.navbar-dropdown--xl .navbar-dropdown-grid {
    grid-template-columns: repeat(3, 1fr) !important;
}

.navbar-dropdown-viewport.show {
  display: block;
  animation: fadeInViewport 0.15s ease-out;
}

/* Dropdown Content Inside Viewport
   When dropdown content is cloned into the viewport,
   these styles override the original dropdown positioning
   to make it fit seamlessly inside the viewport container. */
.navbar-dropdown-viewport .navbar-dropdown {
  position: static; /* Not absolutely positioned inside viewport */
  margin: 0;
  padding: 0; /* Viewport already has padding */
  border: none; /* Viewport already has border */
  box-shadow: none; /* Viewport already has shadow */
  width: 100%;
  display: block;
  visibility: visible;
  pointer-events: auto;
  animation: none; /* No animation needed, viewport handles it */
}

.navbar-dropdown-viewport .navbar-dropdown-grid {
  padding: 2rem; /* Re-applied padding here so content isn't squashed */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeInViewport {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

.navbar-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.navbar-dropdown-section {
  display: flex;
  flex-direction: column;
}

.navbar-dropdown-heading {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 1.5rem 0;
  color: var(--black);
}

.navbar-dropdown-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-dropdown-link-item {
  margin-bottom: 0.5rem;
}

.navbar-dropdown-link {
  display: flex !important;
  align-items: flex-start !important; /* Keeps icon at the top of the row */
  padding: 0.75rem;
  text-decoration: none;
}

.navbar-dropdown-link:hover {
  background-color: var(--gray-light-50);
  text-decoration: none;
}

.navbar-dropdown-link-icon {
  width: 24px;
  height: 24px;
  margin-right: 0.75rem;
  margin-top: 2px; /* Precision alignment with top of text line */
  flex-shrink: 0;
}

.navbar-dropdown-link-content {
  display: block !important; /* Allows title and subtitle to stack while link remains a row */
  flex: 1;
}

.navbar-dropdown-link-title {
  display: inline-block !important; /* Ensures it sits next to the icon space */
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 2px;
  color: var(--black);
}

.navbar-dropdown-link-subtitle {
  display: block !important; /* Forces the description to the next line */
  font-size: 0.875rem;
  line-height: 1.4;
  color: #6b7280;
}

.navbar-dropdown-view-more {
  margin-top: 2rem;
}

.navbar-dropdown-view-more-link {
  display: inline-flex;
  align-items: center;
  color: var(--brand-600);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
}

.navbar-dropdown-view-more-link:hover {
  color: var(--brand-600);
  text-decoration: none;
}

.navbar-dropdown-view-more-link::after {
  content: '→';
  margin-left: 0.5rem;
  transition: transform 0.2s;
}

.navbar-dropdown-view-more-link:hover::after {
  transform: translateX(4px);
}

/* Dropdown Footer */
.navbar-dropdown-footer {
  list-style: none;
  margin: 0 !important; /* Removes the 2rem margin-top gap */
  padding: 1.5rem 1.5rem;
  display: flex;
  align-items: center;
  background-color: var(--gray-light-50);
  border-radius: 0 0 0.375rem 0.375rem;
}

.navbar-dropdown-footer-link {
  display: flex;
  align-items: center;
  color: var(--brand-600);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
}

.navbar-dropdown-footer-link:hover {
  color: var(--brand-600);
  text-decoration: none;
}

.navbar-dropdown-footer-icon {
  width: 20px;
  height: 20px;
  margin-right: 0.5rem;
  display: inline-block;
}

/* Dropdown with Images */
.navbar-dropdown-image {
  width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
  border-radius: 0.375rem;
}

/* Utility Links Section */
.navbar-utility-links {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--header-nav-height);
  overflow-x: hidden;
}

.navbar-utility-links.hidden-lg {
  display: none;
}

.navbar-cart-link {
  position: relative;
  display: flex;
  color: var(--gray-light-400);
  text-decoration: none;
  padding: 8px 4px;
  transition: color 0.2s;
  margin-left: 1px;
}

.navbar-cart-link:hover {
  color: var(--white);
}

.navbar-cart-icon {
  width: 32px;
  height: 24px;
}

.navbar-cart-badge {
  position: absolute;
  width: 20px;
  height: 20px;
  top: -4px;
  right: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: var(--red-500);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

.navbar-featured-buttons {
  display: flex;
  align-items: center;
  margin-left: 0;
}

.navbar-button-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 12px !important;
  height: 38px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  border-radius: 0.375rem !important;
  background-color: var(--white) !important;
  color: #374151 !important;
  text-decoration: none !important;
  margin-left: 10px !important;
  transition: all 0.2s !important;
  border: 1px solid #d1d5db !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.navbar-button-secondary:hover {
  background-color: #f3f4f6;
  text-decoration: none;
  color: #374151;
  border-color: #d1d5db;
}

.navbar-button-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 13px !important;
  height: 38px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  border-radius: 0.375rem !important;
  background-color: var(--brand-500) !important;
  color: var(--white) !important;
  text-decoration: none !important;
  margin-left: 8px !important;
  transition: all 0.2s !important;
  border: none !important;
  cursor: pointer !important;
}

.navbar-button-primary:hover {
  background-color: var(--brand-600);
  text-decoration: none;
  color: var(--white);
}

/* User Menu */
.navbar-account-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-light-400);
  text-decoration: none;
  transition: color 0.2s;
  margin-left: 1px;
  margin-right: 7px;
}

.navbar-account-link:hover {
  color: var(--white);
}

.navbar-user-menu-icon {
  width: 32px;
  height: 24px;
}

/* Legacy user menu styles (kept for compatibility, but not used) */
.navbar-user-menu {
  position: relative;
  margin-left: 0;
}

.navbar-user-menu-trigger {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--gray-light-400);
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.2s;
}

.navbar-user-menu-trigger:hover {
  color: var(--white);
}

.navbar-user-menu-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.navbar-user-menu-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.5rem;
  width: 240px;
  background: var(--white);
  border: 1px solid var(--gray-light-200);
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 0.5rem;
  display: none;
  z-index: 50;
}

.navbar-user-menu-dropdown.show {
  display: block;
  animation: fadeIn 0.15s ease-out;
}

.navbar-user-menu-item {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  border-radius: 0.375rem;
  text-decoration: none;
  color: var(--black);
  font-size: 0.875rem;
  transition: background-color 0.2s;
  cursor: pointer;
}

.navbar-user-menu-item:hover {
  background-color: var(--gray-light-50);
  text-decoration: none;
}

.navbar-user-menu-item-icon {
  width: 16px;
  height: 16px;
  margin-right: 0.75rem;
  color: #6b7280;
}

.navbar-user-menu-separator {
  height: 1px;
  background-color: var(--gray-light-200);
  margin: 0.5rem 0;
}

/* Mobile Navigation */
.navbar-mobile-section {
  display: none;
  align-items: center;
}

.navbar-mobile-section.show-lg {
  display: flex;
}

.navbar-mobile-menu-button {
  appearance: none;
  background: transparent;
  border: none;
  margin-left: 1rem;
  padding: 1rem 0.5rem;
  cursor: pointer;
  color: var(--gray-light-400);
  transition: opacity 0.2s;
}

.navbar-mobile-menu-button:hover .navbar-hamburger-inner,
.navbar-mobile-menu-button:hover .navbar-hamburger-inner::before,
.navbar-mobile-menu-button:hover .navbar-hamburger-inner::after {
  background-color: var(--white);
}

/* Hamburger Icon */
.navbar-hamburger {
  width: 24px;
  height: 24px;
  position: relative;
  cursor: pointer;
}

.navbar-hamburger-box {
  width: 100%;
  height: 100%;
  position: relative;
}

.navbar-hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
  width: 24px;
  height: 2px;
  background-color: var(--gray-light-400);
  border-radius: 0;
  position: absolute;
  transition: background-color 0.2s;
}

.navbar-hamburger-inner::before,
.navbar-hamburger-inner::after {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--gray-light-400);
  border-radius: 0;
  position: absolute;
  transition: all 0.2s;
}

.navbar-hamburger-inner::before {
  top: -8px;
}

.navbar-hamburger-inner::after {
  bottom: -8px;
}

.navbar-hamburger.active .navbar-hamburger-inner {
  background-color: transparent;
}

.navbar-hamburger.active .navbar-hamburger-inner::before {
  top: 0;
  transform: rotate(45deg);
  background-color: var(--gray-light-600);
}

.navbar-hamburger.active .navbar-hamburger-inner::after {
  bottom: 0;
  transform: rotate(-45deg);
  background-color: var(--gray-light-600);
}

.navbar-mobile-menu-overlay {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: var(--header-nav-height);
  width: 100%;
  z-index: 50;
  height: calc(100dvh - var(--header-nav-height));
  padding: 1.5rem;
  background: var(--white);
  overflow-y: auto;
  display: none;
}

.navbar-mobile-menu-overlay.show {
  display: block;
}

.navbar-mobile-menu-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.navbar-mobile-accordion {
  width: 100%;
  margin-top: 1.5rem;
  border: 0;
  border-bottom: 1px solid var(--gray-light-200);
  padding-bottom: 1.5rem;
}

.navbar-mobile-accordion-item {
  border: none;
}

.navbar-mobile-accordion-trigger {
  display: flex !important;
  align-items: center !important;
  width: 100%;
  appearance: none;
  background: transparent;
  border: none;
  justify-content: space-between;
  padding: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-light-600);
  text-align: left;
  cursor: pointer;
  transition: color 0.2s;
}

.navbar-mobile-accordion-trigger:hover {
  color: var(--gray-light-700);
}

.navbar-mobile-accordion-trigger::after {
  content: '';
  display: inline-block !important;
  width: 12px; /* Matches desktop size */
  height: 12px; /* Matches desktop size */
  margin-left: auto;
  /* Updated SVG: stroke-width changed to 1, stroke color set to #1f293b */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%231f293b' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.3s ease;
  transform: rotate(0deg);
  /* Ensure it's not being squashed by any flex properties */
  flex-shrink: 0;
}

.navbar-mobile-accordion-trigger[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.navbar-mobile-accordion-content {
  display: none;
  flex-direction: column;
  padding: 1rem;
  gap: 2rem;
  margin-bottom: 2rem;
}

.navbar-mobile-accordion-content.show {
  display: flex;
}

.navbar-mobile-links {
  padding: 1.5rem 0;
}

.navbar-mobile-link {
  display: block;
  text-decoration: none;
  padding: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-light-600);
  transition: color 0.2s;
}

.navbar-mobile-link:hover {
  color: var(--gray-light-700);
  text-decoration: none;
}

.navbar-mobile-footer {
  padding-top: 2rem;
  padding-bottom: 1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  gap: 1.5rem;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--gray-light-200);
  border-bottom: 1px solid var(--gray-light-200);
}

.navbar-mobile-ctas {
  padding-top: 2rem;
  padding-bottom: 1.5rem;
  gap: 1.5rem;
  display: flex;
  flex-direction: column;
}

.navbar-mobile-button {
  width: 100%;
  padding: 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  border-radius: 0.375rem;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.navbar-mobile-button-primary {
  background-color: var(--brand-600);
  color: var(--white);
}

.navbar-mobile-button-primary:hover {
  background-color: #1d4ed8;
  text-decoration: none;
  color: var(--white);
}

.navbar-mobile-button-outline {
  background-color: transparent;
  color: var(--black);
  border: 1px solid var(--gray-light-200);
}

.navbar-mobile-button-outline:hover {
  background-color: var(--gray-light-50);
  text-decoration: none;
  color: var(--black);
}

/* Language/Region Selector */
.navbar-locale-selector {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.navbar-locale-label {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--black);
}

.navbar-select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--gray-light-200);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  background-color: var(--white);
  color: var(--black);
  cursor: pointer;
}

/* Responsive Breakpoints */
/* Mobile: < 1070px (lg) */
@media (max-width: 1069px) {
  .navbar-logo-small.hidden-lg {
    display: none;
  }

  .navbar-logo-full.show-mobile {
    display: flex;
  }

  .navbar-desktop-nav.hidden-lg {
    display: none;
  }

  .navbar-utility-links.hidden-lg {
    display: none;
  }

  .navbar-mobile-section.show-lg {
    display: flex;
  }
  /* Target the footer ONLY when it appears inside the mobile accordion */
  .navbar-mobile-accordion-content .navbar-dropdown-footer {
        background-color: #ffffff !important; /* Force white background */
        border-top: none !important;         /* Remove the separator line if desired */
        margin-top: 0 !important;            /* Remove the gap from the list above */
        padding: 0.75rem 1rem !important;    /* Match the horizontal padding of the links */
    }

    /* Ensure the link inside the footer matches the alignment of the other menu items */
    .navbar-mobile-accordion-content .navbar-dropdown-footer-link {
        color: var(--brand-600) !important;
        font-weight: 600;
        text-decoration: none;
    }
}

/* Desktop with small logo: 1070px (lg) to 1399px (2xl - 1) */
@media (min-width: 1070px) and (max-width: 1399px) {
  .navbar-logo-small.hidden-lg {
    display: block;
  }

  .navbar-logo-full.show-mobile {
    display: none;
  }

  .navbar-desktop-nav.hidden-lg {
    display: flex;
  }

  .navbar-utility-links.hidden-lg {
    display: flex;
  }

  .navbar-mobile-section.show-lg {
    display: none;
  }
}

/* Large desktop with full logo: >= 1400px (2xl) */
@media (min-width: 1400px) {
  .navbar-logo-small.hidden-lg {
    display: none;
  }

  .navbar-logo-full.show-mobile {
    display: flex;
  }

  .navbar-desktop-nav.hidden-lg {
    display: flex;
  }

  .navbar-utility-links.hidden-lg {
    display: flex;
  }

  .navbar-mobile-section.show-lg {
    display: none;
  }
}

/* Body scroll lock when mobile menu is open */
body.navbar-menu-open {
  overflow: hidden;
}

.v-header-scope .navbar-logo-section a {
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 32px !important;
}

/* Load Inter (HubSpot allows @import in module CSS) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Scope Inter to the whole navbar */
.v-header-scope,
.v-header-scope * {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

/* Top-level nav items: 14px, semibold */
.v-header-scope .navbar-menu-list > li > .navbar-menu-trigger,
.v-header-scope .navbar-menu-list > li > a {
  font-size: 14px !important;   /* text-sm */
  font-weight: 600 !important;  /* semibold */
  line-height: 20px !important; /* nice compact rhythm for 14px */
}

/* Mobile list items match */
.v-header-scope .navbar-mobile-accordion-trigger,
.v-header-scope .navbar-mobile-link {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
}
/* Full wordmark */
.v-header-scope .navbar-logo-full svg {
  width: 160.94px !important;
  height: 17.5px !important;
}

/* If you also want the small “V” to be consistent, set it explicitly */
.v-header-scope .navbar-logo-small svg {
  width: 24px;  /* tweak as desired */
  height: 24px; /* keeps square icon crisp */
}

/* Lock the variable INSIDE your scoped wrapper */
.v-header-scope {
  --gray-light-800: #1f293b !important;
}

/* Hard clamp the actual element color */
.v-header-scope .navbar-main {
  background-color: #1f293b !important;
  /* Ensure no transparency blends */
  background-image: none !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* If a theme adds a translucent layer via ::before/::after, kill it */
.v-header-scope .navbar-main::before,
.v-header-scope .navbar-main::after {
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* Some themes apply backdrop blur/tints on inner containers—neutralize */
.v-header-scope .navbar-container {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Optional, adds specificity without changing markup */
.v-header-scope :where(.navbar-main) { background-color: #1f293b !important; }
.v-header-scope :where(.navbar-menu-list) > li > .navbar-menu-trigger,
.v-header-scope :where(.navbar-menu-list) > li > a { font-size:14px !important; font-weight:600 !important; }
/* ===== NAV TEXT: final override against theme ===== */

/* 1) Force Inter everywhere in the navbar (but leave SVG paths alone) */
.v-header-scope .navbar-main,
.v-header-scope .navbar-main *:not(svg):not(path) {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2) Top-level items — 14px / 600 with extra specificity bumps */
.v-header-scope.v-header-scope .navbar-main .navbar-menu-list > li > .navbar-menu-trigger,
.v-header-scope.v-header-scope .navbar-main .navbar-menu-list > li > a,
.v-header-scope .navbar-main .navbar-menu-list > li > .navbar-menu-trigger.navbar-menu-trigger, /* repeat class = specificity bump */
.v-header-scope .navbar-main .navbar-menu-list > li > a.navbar-menu-trigger {
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 20px !important;
}

/* 3) Cover common HubSpot theme selectors that might still win */
.v-header-scope .navbar-main .hs-menu-wrapper > ul > li > a,
.v-header-scope .navbar-main .hs-menu-wrapper > ul > li > .hs-menu-item {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

/* 4) Mobile triggers/links too */
.v-header-scope .navbar-main .navbar-mobile-accordion-trigger,
.v-header-scope .navbar-main .navbar-mobile-link {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

/* 5) Dropdown headings/titles just in case the theme touches them */
.v-header-scope .navbar-main .navbar-dropdown-heading,
.v-header-scope .navbar-main .navbar-dropdown-link-title {
  font-weight: 600 !important;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 20px !important;
}

/* ===== Force font + size on CTA buttons ===== */
.v-header-scope .navbar-button-primary,
.v-header-scope .navbar-button-secondary {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;     /* text-sm */
  font-weight: 600 !important;    /* semibold */
  line-height: 20px !important;
  letter-spacing: 0 !important;   /* cancel theme letter-spacing */
  text-transform: none !important;/* ensure normal case */
}

/* maintain background and color */
.v-header-scope .navbar-button-primary {
  background-color: var(--brand-500) !important;
  color: var(--white) !important;
}

.v-header-scope .navbar-button-primary:hover {
  background-color: var(--brand-600) !important;
  color: var(--white) !important;
}

.v-header-scope .navbar-button-secondary {
  background-color: var(--white) !important;
  color: #374151 !important;
}

.v-header-scope .navbar-button-secondary:hover {
  background-color: #f3f4f6 !important;
  color: #374151 !important;
}
/* --- Fix for Community / Secondary Sections --- */
.navbar-dropdown-section--secondary {
    background-color: var(--gray-light-50);
    margin: -32px;      /* Pulls the grey box back to the container edges */
    padding: 32px;     /* Re-adds internal padding so text doesn't touch the edge */
    height: auto;
    display: flex;
    flex-direction: column;
}