#youcan-section--navbar{
    --spring-width-offset:10px;
  }
  #youcan-section--navbar:has([data-sticky-mode]:not([data-sticky-mode=none])){
    position:sticky;
    z-index:51;
    inset-block-start:var(--spacing-0);
  }
  [ui-layout=navbar]{
    display:grid;
    grid-template-areas:"logo menu actions";
    grid-template-columns:1fr 4fr 1fr;
    align-items:center;
    padding:attr(data-top-spacing px) var(--spacing-24) attr(data-bottom-spacing px);
    transform:translateY(0%);
    transition:transform var(--transition-standard-slow-spatial);
    background-color:inherit;
    grid-gap:var(--spacing-16);
    gap:var(--spacing-16);
  }
  [ui-layout=navbar][aria-hidden=true]{
    transform:translateY(-150%);
  }
  [ui-layout=navbar][data-bottom-border="1"]{
    border-block-end:1px solid var(--color-surface-variant);
  }
  [ui-layout=navbar][data-header-layout=logo-center-menu-first]{
    grid-template-areas:"menu logo actions";
    grid-template-columns:1fr auto 1fr;
  }
  [ui-layout=navbar] .logo{
    grid-area:logo;
  }
  [ui-layout=navbar] .logo .name{
    font:var(--font-title-md);
    text-transform:uppercase;
  }
  [ui-layout=navbar] .logo a:has(img){
    display:flex;
  }
  [ui-layout=navbar] .logo a:has(img) img{
    -o-object-fit:contain;
       object-fit:contain;
  }
  @media (max-width: 769px){
    [ui-layout=navbar] .logo a:has(img) img{
      width:attr(data-mobile-width px);
    }
  }
  [ui-layout=navbar] .links{
    display:flex;
    grid-area:menu;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--spacing-24);
  }
  [ui-layout=navbar] .links[data-split-menu=first-half]{
    grid-area:menu-left;
  }
  [ui-layout=navbar] .links[data-split-menu=second-half]{
    grid-area:menu-right;
  }
  [ui-layout=navbar] .links .link{
    position:relative;
  }
  [ui-layout=navbar] .links .link:has(> a:hover, > a:focus-visible, .sub-links:hover) > a::before, [ui-layout=navbar] .links .link:focus-within > a::before{
    width:100%;
  }
  [ui-layout=navbar] .links .link:has(> a:hover, > a:focus-visible, .sub-links:hover) .sub-links, [ui-layout=navbar] .links .link:focus-within .sub-links{
    animation:open-sub-menu var(--transition-expressive-default-spatial) forwards;
    pointer-events:auto;
  }
  [ui-layout=navbar] .links .link .sub-links{
    display:flex;
    position:absolute;
    z-index:50;
    flex-direction:column;
    width:250px;
    padding:var(--spacing-8);
    transform:translateY(-8px);
    animation:close-sub-menu var(--transition-expressive-default-spatial);
    border:1px solid var(--color-surface-variant);
    border-radius:var(--radius-button);
    opacity:0;
    background-color:var(--nav-bar-bg);
    pointer-events:none;
    inset-inline-start:calc(var(--spacing-24) * -1);
    inset-block-start:calc(100% + var(--spacing-32));
  }
  [ui-layout=navbar] .links .link .sub-links::before{
    content:"";
    position:absolute;
    height:calc(var(--spacing-32) + 1px);
    inset-block-end:100%;
    inset-inline:0;
  }
  [ui-layout=navbar]:not(#\#) .links .link .sub-links .sub-link [ui-slot=button]{
    justify-content:space-between !important;
    text-transform:none !important;
  }
  [ui-layout=navbar] .links .link .sub-links .sub-link [ui-slot=button] span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  [ui-layout=navbar] .actions{
    display:flex;
    grid-area:actions;
    flex-shrink:0;
  }
  [ui-layout=navbar] > .logo, [ui-layout=navbar] > .links, [ui-layout=navbar] > .actions{
    display:flex;
  }
  [ui-layout=navbar] > .logo:nth-of-type(2), [ui-layout=navbar] > .links:nth-of-type(2), [ui-layout=navbar] > .actions:nth-of-type(2){
    justify-content:center;
  }
  [ui-layout=navbar] > .logo:last-child, [ui-layout=navbar] > .links:last-child, [ui-layout=navbar] > .actions:last-child{
    justify-content:flex-end;
  }
  [ui-layout=navbar] .links:not([data-split-menu]){
    flex-shrink:0;
  }
  [ui-layout=navbar] .menu{
    grid-area:menu;
  }
  [ui-layout=navbar][data-header-layout=logo-first-menu-center]{
    grid-template-areas:"logo menu actions";
    grid-template-columns:1fr 4fr 1fr;
  }
  [ui-layout=navbar][data-header-layout=logo-first-menu-center] .links{
    justify-content:center;
  }
  [ui-layout=navbar][data-header-layout=logo-center-menu-split]{
    grid-template-areas:"menu-left logo split-right";
    grid-template-columns:1fr auto 1fr;
  }
  [ui-layout=navbar][data-header-layout=logo-center-menu-split] .right-split{
    display:flex;
    grid-area:split-right;
    align-items:center;
    justify-content:flex-end;
    gap:var(--spacing-32);
  }
  @media (min-width: 769.02px){
    [ui-layout=navbar]:not(#\#) .actions .menu{
      display:none !important;
    }
  }
  @media (max-width: 769px){
    [ui-layout=navbar]{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding-inline:var(--spacing-8);
    }
    [ui-layout=navbar] .links{
      display:none;
    }
    [ui-layout=navbar] .logo{
      display:flex;
    }
    [ui-layout=navbar] .actions{
      flex-direction:row-reverse;
      gap:var(--spacing-0);
      justify-content:flex-end;
    }
    [ui-layout=navbar]:not(#\#) .actions .search{
      display:none !important;
    }
  }
  [data-intensity=as-solid-bg] [ui-layout=navbar],
  [data-intensity=as-foreground] [ui-layout=navbar]{
    --nav-bar-bg:var(--color-on-primary);
  }
  [data-intensity=as-light-bg] [ui-layout=navbar]{
    --nav-bar-bg:var(--color-primary-container);
  }
@keyframes open-sub-menu{
  from{
    transform:translateY(-8px) scale(0.95);
    opacity:0;
  }
  to{
    transform:translateY(0) scale(1);
    opacity:1;
  }
}
@keyframes close-sub-menu{
  from{
    transform:translateY(0) scale(1);
    opacity:1;
  }
  to{
    transform:translateY(-8px) scale(0.95);
    opacity:0;
  }
}