/* ============================================
   VALENCE STANDALONE NAVBAR — vanilla port
   Ported from StandaloneNavbar.tsx. No React.
   ============================================ */

/* Altivo font (served locally — site.valence.co blocks cross-origin) */
@font-face{
  font-family:'Altivo';font-style:normal;font-weight:300;font-display:swap;
  src:url('fonts/Altivo-Light.otf') format('opentype');
}
@font-face{
  font-family:'Altivo';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/Altivo-Regular.otf') format('opentype');
}
@font-face{
  font-family:'Altivo';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/Altivo-Medium.otf') format('opentype');
}

.vn-root{
  --vn-background:36 33% 96%;
  --vn-foreground:0 0% 22%;
  --vn-primary:333 100% 58%;
  --vn-primary-foreground:0 0% 100%;
  --vn-secondary:237 90% 93%;
  --vn-secondary-foreground:0 0% 22%;
  --vn-muted-foreground:0 0% 60%;

  position:sticky;top:0;z-index:1000;
  display:flex;width:100%;min-height:4.5rem;
  padding:.5rem 5vw 0;
  flex-direction:column;align-items:center;
  background:transparent;
  font-family:'Altivo','Kantumruy Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:hsl(var(--vn-foreground));
  font-size:1rem;
}

/* The white rounded pill */
.vn-pill{
  width:100%;max-width:90rem;
  padding:.75rem 1rem;
  border-radius:5rem;
  background:#fff;
  box-shadow:rgba(0,0,0,.15) 0 2px 1.5rem 0;
}
.vn-row{
  position:relative;z-index:1;margin:0 auto;
  display:flex;width:100%;height:100%;
  max-width:87.5rem;align-items:center;justify-content:space-between;
}

.vn-logo{display:flex;align-items:center;flex-shrink:0}
.vn-logo img{width:10rem;display:block}

/* Desktop nav cluster (>=1231px) */
.vn-desktop{display:none;width:100%}
.vn-desktop-inner{margin-left:11.25rem;display:flex;flex:1;align-items:center;justify-content:space-between}
.vn-list{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.vn-item{display:flex;align-items:center;position:relative}

.vn-link, .vn-trigger{
  display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;
  gap:.25rem;font-size:.95rem;line-height:1.2;
  padding:1.25rem 1rem;
  color:hsl(var(--vn-foreground));
  font-family:inherit;font-weight:300;text-decoration:none;
  background:transparent;border:none;cursor:pointer;
  transition:color .2s;
}
.vn-trigger{padding:1.25rem .8rem}
.vn-link:hover, .vn-trigger:hover{color:hsl(var(--vn-primary))}

.vn-chevron{width:1.25rem;height:1.25rem;transition:transform .2s;flex-shrink:0}
.vn-item.open .vn-chevron{transform:rotate(180deg)}

/* Dropdown panel */
.vn-dropdown{
  position:absolute;top:100%;left:-25%;
  padding-top:.5rem;z-index:50;display:none;
}
.vn-item.open .vn-dropdown{display:block}
.vn-dropdown-card{
  background:#fff;border-radius:1rem;
  box-shadow:rgba(0,0,0,.15) 0 2px 1.5rem 0;
  min-width:12rem;padding:1rem 0;
}
.vn-dropdown-link{
  display:block;padding:.75rem 1rem;font-size:.95rem;
  white-space:nowrap;text-decoration:none;
  color:hsl(var(--vn-foreground));font-weight:300;
  transition:color .2s;
}
.vn-dropdown-link:hover{color:hsl(var(--vn-primary))}

/* Right-side CTAs */
.vn-ctas{display:flex;flex-shrink:0;align-items:center;gap:1rem}
.vn-cta{
  display:inline-block;font-size:.9rem;line-height:1.2;
  border-radius:3rem;padding:.75rem 1rem;
  text-align:center;text-decoration:none;font-weight:300;font-family:inherit;
  transition:background-color .2s ease-in-out,color .2s ease-in-out;
}
@media(min-width:1280px){ .vn-cta{font-size:.9375rem} }
@media(min-width:1536px){ .vn-cta{font-weight:500} }
.vn-cta-dark{background:hsl(var(--vn-foreground));color:#fff}
.vn-cta-dark:hover{background:hsl(var(--vn-primary))}
.vn-cta-pink{background:hsl(var(--vn-primary));color:#fff}
.vn-cta-pink:hover{background:hsl(var(--vn-secondary));color:hsl(var(--vn-foreground))}

/* Mobile toggle */
.vn-toggle{
  display:flex;align-items:center;
  padding:0;background:transparent;border:none;cursor:pointer;
  color:hsl(var(--vn-foreground));
}
.vn-toggle svg{width:24px;height:24px}
.vn-toggle .vn-icon-close{display:none}
.vn-root.menu-open .vn-toggle .vn-icon-menu{display:none}
.vn-root.menu-open .vn-toggle .vn-icon-close{display:block}

/* Mobile menu panel */
.vn-mobile{
  display:none;background:#fff;
  border-radius:1rem;margin:.5rem auto 0;
  padding:2rem 5%;
  box-shadow:rgba(0,0,0,.15) 0 2px 1.5rem 0;
  width:100%;max-width:90rem;
}
.vn-root.menu-open .vn-mobile{display:block}

.vn-m-row{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:.75rem 0;font-size:.95rem;
  background:transparent;border:none;cursor:pointer;
  color:hsl(var(--vn-foreground));font-weight:300;font-family:inherit;
}
.vn-m-link{
  display:block;padding:.75rem 0;font-size:.95rem;
  text-decoration:none;color:hsl(var(--vn-foreground));font-weight:300;
  transition:color .2s;
}
.vn-m-link:hover{color:hsl(var(--vn-primary))}
.vn-m-children{display:none;padding:0 0 .5rem 1rem}
.vn-m-section.open .vn-m-children{display:block}
.vn-m-section.open .vn-chevron{transform:rotate(180deg)}
.vn-m-sublink{
  display:block;padding:.5rem 0;font-size:.95rem;
  text-decoration:none;color:hsl(var(--vn-muted-foreground));font-weight:300;
  transition:color .2s;
}
.vn-m-sublink:hover{color:hsl(var(--vn-primary))}
.vn-m-ctas{display:flex;gap:1rem;padding-top:1.5rem}
.vn-m-ctas .vn-cta{flex:1;font-size:1rem}

/* Responsive padding & logo sizing per spec */
@media(max-width:991px){
  .vn-root{padding-left:3vw;padding-right:3vw}
  .vn-logo img{width:10rem}
}
@media(max-width:767px){
  .vn-root{padding-left:2vw;padding-right:2vw}
  .vn-logo img{width:9rem}
}

/* Custom 1231px breakpoint */
@media(min-width:1231px){
  .vn-desktop{display:flex}
  .vn-toggle, .vn-mobile{display:none !important}
  .vn-pill{padding-left:2rem;padding-right:2rem;padding-top:0;padding-bottom:0}
}