@layer sections{
  #youcan-section--navbar{
    --spring-width-offset:10px;
    position:relative;
    z-index:50;
  }
  #youcan-section--navbar:has([data-sticky-mode]:not([data-sticky-mode=none])){
    position:sticky;
    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:var(--top-spacing) 8% var(--bottom-spacing);
    transform:translateY(0%);
    transition:box-shadow var(--transition-standard-fast-spatial), transform var(--transition-standard-slow-spatial);
    grid-gap:var(--spacing-16);
    gap:var(--spacing-16);
    background-color:var(--nav-bar-bg);
  }
  [ui-layout=navbar][data-shadow=true]{
    border-block-end:none;
    box-shadow:var(--shadow-md);
  }
  [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:var(--mobile-width);
    }
  }
  [ui-layout=navbar] .links{
    --sub-menu-inset-start:calc(var(--spacing-24) * -1);
    --sub-menu-inset-end:auto;
    display:flex;
    grid-area:menu;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--spacing-32);
  }
  [ui-layout=navbar] .links[data-split-menu=first-half]{
    grid-area:menu-left;
  }
  [ui-layout=navbar] .links[data-split-menu=second-half]{
    --sub-menu-inset-start:auto;
    --sub-menu-inset-end:calc(var(--spacing-24) * -1);
    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, [ui-layout=navbar] .links .link:focus-within > a{
    background-size:100% 1px;
    color:color-mix(in srgb, var(--color-link-button), var(--color-on-background) 30%);
    background-position-x:left;
    background-position-y:bottom;
  }
  [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-24);
    transform:translateY(-8px);
    animation:close-sub-menu var(--transition-expressive-default-spatial);
    border-radius:20px;
    opacity:0;
    background-color:var(--nav-bar-bg);
    box-shadow:color-mix(in srgb, currentcolor 9%, transparent) 0 3px 12px;
    pointer-events:none;
    gap:var(--spacing-12);
    inset-inline:var(--sub-menu-inset-start) var(--sub-menu-inset-end);
    inset-block-start:100%;
  }
  [ui-layout=navbar] .links .link .sub-links .sub-link a{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  [ui-layout=navbar] .actions{
    display:flex;
    grid-area:actions;
    flex-shrink:0;
    gap:var(--spacing-12);
  }
  [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{
    display:flex;
    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] .menu{
      display:none;
    }
  }
  @media (max-width: 769px){
    [ui-layout=navbar]{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      padding-inline:var(--spacing-24);
    }
    [ui-layout=navbar][data-header-layout=logo-center-menu-split] .left-split{
      grid-area:logo;
    }
    [ui-layout=navbar][data-header-layout=logo-center-menu-split] .right-split{
      grid-area:actions;
    }
    [ui-layout=navbar][data-mobile-logo-position=center]{
      grid-template-areas:"menu logo actions";
      grid-template-columns:1fr auto 1fr;
    }
    [ui-layout=navbar][data-mobile-logo-position=start]{
      grid-template-areas:"logo menu actions";
      grid-template-columns:1fr auto 1fr;
    }
    [ui-layout=navbar][data-mobile-logo-position=start] .menu{
      justify-content:center;
    }
    [ui-layout=navbar] .links{
      display:none;
    }
    [ui-layout=navbar] .logo{
      display:flex;
    }
    [ui-layout=navbar] .actions{
      gap:var(--spacing-0);
      justify-content:flex-end;
    }
  }
  #menu [ui-slot=sheet-body] .mobile-links{
    display:flex;
    flex-direction:column;
    gap:var(--spacing-14);
  }
  #menu [ui-slot=sheet-body] .mobile-links .link [ui-slot=link-button]{
    align-items:center;
    justify-content:space-between !important;
    width:100% !important;
    height:40px;
  }
  #menu [ui-slot=sheet-body] .mobile-links .sub-links{
    display:flex;
    flex-direction:column;
    margin-inline-start:var(--spacing-12);
    padding-inline-start:var(--spacing-12);
    border-inline-start:1px solid var(--color-surface-variant);
  }
  #menu [ui-slot=sheet-body] .mobile-links .sub-links .link a span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #menu [ui-slot=sheet-footer]{
    grid-template-columns:1fr !important;
  }
  #menu [ui-slot=sheet-footer] .social-links{
    display:flex;
    justify-content:center;
  }
  [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);
    opacity:0;
  }
  to{
    transform:translateY(0);
    opacity:1;
  }
}
@keyframes close-sub-menu{
  from{
    transform:translateY(0);
    opacity:1;
  }
  to{
    transform:translateY(-8px);
    opacity:0;
  }
}