@layer sections{
  #youcan-section--navbar{
    --spring-width-offset:10px;
  }
  #youcan-section--navbar:has([data-sticky-mode]:not([data-sticky-mode=none])){
    position:sticky;
    z-index:50;
    top: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);
    background-color:inherit;
    grid-gap:var(--spacing-16);
    gap:var(--spacing-16);
  }
  [ui-layout=navbar][data-shadow=true]{
    border-bottom:none;
    box-shadow:var(--shadow-md);
  }
  [ui-layout=navbar][aria-hidden=true]{
    transform:translateY(-150%);
  }
  [ui-layout=navbar][data-bottom-border="1"]{
    border-bottom: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{
    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]{
    grid-area:menu-right;
  }
  [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-left:var(--spacing-24);
      padding-right: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]{
    justify-content:space-between !important;
    width:100% !important;
    height:40px;
  }
  #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]{
    background-color:var(--color-on-primary);
  }
  [data-intensity=as-light-bg] [ui-layout=navbar]{
    background-color:var(--color-primary-container);
  }
}