/* Scoped styles for the custom header */
.vm-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000; /* ensure drawer/overlay can cover the whole page */
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.vm-header a{
    outline: none !important;
}

/* Inner container */
.vm-header > div {
  height: 64px; /* similar to h-16 */
  max-width: 1368px; /* similar to container */
  margin: 0 auto;
  padding: 0 16px; /* px-4 */
  display: flex;
  align-items: center; /* items-center */
  justify-content: space-between; /* justify-between */
}

/* Brand area */
.vm-header a:first-child {
  display: flex; /* flex */
  align-items: center; /* items-center */
  gap: 8px; /* gap-2 */
  text-decoration: none;
  color: inherit;
}

/* Logo box */
.vm-header a:first-child > div svg {
    width: 16px;
    height: 16px;
}
.vm-header a:first-child > div {
  width: 32px; /* w-8 */
  height: 32px; /* h-8 */
  border-radius: 8px; /* rounded-lg */
  display: flex; /* flex */
  align-items: center; /* items-center */
  justify-content: center; /* justify-center */
  background: linear-gradient(135deg, hsl(358 75% 59%), hsl(345 85% 65%)); /* bg-gradient-primary */
  color: #ffffff; /* text-primary-foreground */
}

/* Brand text */
.vm-header a:first-child span {
  font-size: 20px; /* text-xl */
  font-weight: 700; /* font-bold */
  color: #171b26; /* text-foreground */
}

/* Navigation */
.vm-header nav {
  display: none;
}
/* Overlay is hidden on desktop by default */
.vm-header .vm-overlay{ display: none; }

/* Hide mobile-only elements on desktop */
.vm-header .vm-mobile-header{ display: none; }
.vm-header .vm-signup-mobile{ display: none !important; }

@media (min-width: 768px) {
  .vm-header nav {
    display: flex; /* md:flex */
    align-items: center;
    gap: 32px; /* gap-8 */
  }
}

.vm-header nav a {
  text-decoration: none;
  font-size: 16px;
  color: #626a84 !important; /* text-muted-foreground */
  font-weight: 500; /* font-medium */
  transition: color 200ms ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.vm-header nav a:hover {
  color: #e5484d !important; /* hover:text-primary */
}

/* Dropdown (Resources) */
.vm-header .vm-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.vm-header .vm-dropdown-trigger {
  text-decoration: none;
    font-size: 16px !important;
    color: #626a84 !important;
    font-weight: 500 !important;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: transparent;
    border: 0;
    font: inherit;
    outline: none;
  cursor: pointer;
}
.vm-header .vm-dropdown-trigger:hover {
  color: #e5484d !important;
}
.vm-header .vm-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  min-width: 118px;
  padding: 4px;
  background: #ffffff;
  color: #171b26;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  /* box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); */
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1),
    0 2px 4px -2px rgb(0 0 0 / .1);
  display: none;
  z-index: 60;
}
.vm-header .vm-menu a {
  display: block;
  padding: 6px 8px;
  font-size: 14px;
  color: #171b26 !important;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 400 !important;
}
.vm-header .vm-menu a:hover {
  background: #f3f4f6;
  color: #171b26 !important;
}
.vm-header .vm-dropdown.open .vm-menu {
  display: block;
}

/* Right actions */
.vm-header > div > div:last-child {
  display: flex;
  align-items: center;
  gap: 12px; /* gap-3 */
}

/* Mobile dropdown behavior */
@media (max-width: 767px) {
  .vm-header {
    position: fixed;
  }
  .vm-header > div {
    position: relative;
  }
  /* Mobile drawer */
  .vm-header nav {
    position: fixed;
    top: 0;
    right: 0; /* slide in from right */
    left: auto;
    height: 100vh;
    width: 335px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background: #ffffff;
    border-left: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.10);
    z-index: 2002;
    transform: translateX(100%);
    transition: transform 250ms ease;
    overflow-y: auto;
  }
  .vm-header.is-open nav { transform: translateX(0); }

  /* Overlay */
  .vm-header .vm-overlay{
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    z-index: 2001; /* above site content, below drawer */
    height: 100vh;
  }
  .vm-header.is-open .vm-overlay{
    opacity: 1;
    pointer-events: auto;
  }

  /* Dropdown inside mobile nav */
  .vm-header .vm-dropdown {
    width: 100%;
    align-items: stretch;
  }
  .vm-header .vm-dropdown-trigger {
    width: 100%;
    justify-content: space-between;
  }
  .vm-header .vm-menu {
    position: static;
    margin-top: 0px;
    min-width: 0;
    padding: 4px;
    border: 0;
    box-shadow: none;
    display: none;
    width: 100%;
  }
  .vm-header .vm-dropdown.open .vm-menu {
    display: block;
  }
  .vm-hide-mobile { display: none !important; }

  /* Mobile drawer header */
  .vm-header .vm-mobile-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
  }
  .vm-header .vm-mobile-header span{ font-weight: 600; }
  .vm-header .vm-mobile-header .vm-close{
    border: 0; background: transparent; padding: 6px; border-radius: 6px; cursor: pointer;
  }

  /* Mobile nav items layout */
  #vm-primary-nav > a{ padding: 0px 0; }
  #vm-primary-nav .vm-signup-mobile{ display: inline-flex !important; margin-top: 8px; width: 100%; justify-content: center; }
  #vm-primary-nav .vm-signup-mobile:hover{ color: #fff !important; }
  #vm-primary-nav .vm-signup-mobile{ padding-top: 9px; padding-bottom: 9px; }

  /* Separators between groups */
  #vm-primary-nav .vm-sep{ padding-bottom: 18px;
    margin-bottom: -7px;border-bottom: 1px solid rgba(0,0,0,0.08); }

  /* Resources section label mimic */
  #vm-primary-nav .vm-dropdown-trigger{ font-weight: 600 !important; color: #171b26 !important; font-size: 14px !important; }
  #vm-primary-nav .vm-dropdown-trigger svg{ display: none; }
  #vm-primary-nav .vm-menu a{ padding-left: 16px; color: #626a84 !important; }
  #vm-primary-nav .signin-mobile{ 
    font-size: 14px;
    color: #171b26 !important;
    padding: 8px 0 0 16px;
    margin-bottom: -3px; }

  /* Always show Resources list on mobile */
  .vm-header .vm-menu{ display: block !important; }
}

/* Sign In button (transparent desktop button on the right) */
.vm-header .btn-transparent {
  white-space: nowrap;
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 6px;
  color: #626a84 !important;
  background: transparent;
  transition: color 200ms ease, background-color 200ms ease;
}
@media (max-width: 767px) {
  .vm-header .btn-transparent { display: none !important; } /* hide on mobile */
}
@media (min-width: 768px) {
  .vm-header .btn-transparent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
.vm-header .btn-transparent:hover {
  background: #f3f4f6;
  color: #171b26;
}

/* Sign In link inside the dropdown (mobile only) */
.vm-header .signin-mobile { display: none; }
@media (max-width: 767px) {
  .vm-header .signin-mobile {
    display: block;
    font-size: 16px;
    /* color: #626a84 !important; */
    color: #e5484d !important;
    /* padding: 8px 2px; */
    padding: 0;
    text-decoration: none;
  }
  .vm-header .signin-mobile:hover { color: #171b26 !important; }
}

/* Sign Up button (primary) */
.vm-header .btn-transparent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px; /* h-9 px-3 */
  font-size: 14px; /* text-base */
  font-weight: 500; /* font-semibold */
  border-radius: 6px;
  color: #626a84 !important; /* text-primary-foreground */
  background: transparent; /* bg-gradient-primary */
  transition: transform 300ms ease, box-shadow 300ms ease;
  text-decoration: none;
}

.vm-header .btn-transparent:hover {
  background: #f3f4f6;
}
/* Sign Up button (primary) */
.vm-header .btn-prime {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 13px; /* h-9 px-3 */
  font-size: 16px; /* text-base */
  font-weight: 600; /* font-semibold */
  border-radius: 6px;
  color: #ffffff !important; /* text-primary-foreground */
  background: linear-gradient(135deg, hsl(358 75% 59%), hsl(345 85% 65%)); /* bg-gradient-primary */
  transition: transform 300ms ease, box-shadow 300ms ease;
  text-decoration: none;
}

.vm-header .btn-prime:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px #e5484d2e; /* hover:shadow-primary */
}

/* Mobile menu button */
.vm-header button[aria-label="Open menu"] svg{
    width: 16px;
    height: 16px;
}
.vm-header button[aria-label="Open menu"] {
  display: none;
  outline: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
@media (max-width: 767px) {
    .vm-header button[aria-label="Open menu"] {
        display: inline-flex;
    }
}

.vm-header button[aria-label="Open menu"]:hover {
  background: rgba(0, 0, 0, 0.04); /* hover:bg-accent */
  color: #171b26; /* hover:text-accent-foreground */
}

/* Offset the page content for fixed header */
body.has-vm-header {
  padding-top: 64px;
}

/* Prevent background scroll when drawer is open */
@media (max-width: 767px) {
  body.vm-no-scroll { overflow: hidden; }
}