/* =====================================================
   LogiLab Parts / SWELL Header & Footer Integration
   v0.37.0
   Uses the same visual tokens as the canonical keycaps.
===================================================== */

:root{
  --ll-chrome-key-unit:44px;
  --ll-chrome-key-gap:7px;
  --ll-chrome-sp-key-unit:40px;
  --ll-chrome-radius:6px;
  --ll-chrome-font:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --ll-chrome-key-top:color-mix(in srgb,var(--ll-color-paper) 78%,var(--ll-color-line) 22%);
  --ll-chrome-key-side:color-mix(in srgb,var(--ll-color-line) 70%,var(--ll-color-paper) 30%);
  --ll-chrome-key-base:var(--ll-color-muted);
  --ll-chrome-red-top:color-mix(in srgb,var(--ll-key-3) 74%,white 26%);
  --ll-chrome-red-side:var(--ll-key-3);
  --ll-chrome-red-base:color-mix(in srgb,var(--ll-key-3) 68%,black 32%);
}

/* Three visible layers in one box: top face / sloped side / base. */
#header .c-gnav>li>a .ttl,
#fix_header .c-gnav>li>a .ttl{
  box-sizing:border-box!important;
  border:0!important;
  border-radius:var(--ll-chrome-radius)!important;
  background:
    linear-gradient(180deg,var(--ll-chrome-key-top),var(--ll-chrome-key-top)) center 5px / calc(100% - 10px) calc(100% - 11px) no-repeat,
    linear-gradient(180deg,color-mix(in srgb,var(--ll-color-line) 70%,var(--ll-color-paper) 30%),var(--ll-chrome-key-side)) center 2px / calc(100% - 4px) calc(100% - 4px) no-repeat,
    var(--ll-chrome-key-base)!important;
  box-shadow:0 4px 7px rgba(34,30,25,.14),inset 0 1px 0 rgba(255,255,255,.18)!important;
  color:var(--ll-color-text)!important;
  font-family:var(--ll-chrome-font)!important;
  font-weight:700!important;
  text-decoration:none!important;
  transition:transform .08s ease,box-shadow .08s ease,filter .08s ease!important;
}

/* ---------------- HEADER ---------------- */
body:has(style[id="logilab-parts-swell-chrome-inline-css"] :root){} /* harmless marker for old caches */

#header,#fix_header{
  background:var(--ll-color-sub-bg)!important;
  border-bottom:1px solid var(--ll-color-line)!important;
  box-shadow:0 2px 0 color-mix(in srgb,var(--ll-color-muted) 14%,transparent),0 5px 12px rgba(34,30,25,.06)!important;
}
#header .l-header__inner,#fix_header .l-fixHeader__inner{background:transparent!important}
#header[data-spfix="1"]{background:var(--ll-color-sub-bg)!important}
#header .c-headLogo__link,#fix_header .c-headLogo__link{color:var(--ll-color-text)!important}
#header .c-gnav,#fix_header .c-gnav{gap:var(--ll-chrome-key-gap)!important}
#header .c-smallNavTitle,#fix_header .c-smallNavTitle,
#header .c-gnav>li>a .ttl i,#fix_header .c-gnav>li>a .ttl i{display:none!important}

#header .c-gnav>li>a .ttl,#fix_header .c-gnav>li>a .ttl{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:var(--ll-chrome-key-unit)!important;height:var(--ll-chrome-key-unit)!important;min-width:var(--ll-chrome-key-unit)!important;
  padding:0!important;font-size:11px!important;line-height:1!important;letter-spacing:.01em!important;text-align:center!important;
}
#header .c-gnav>li>a:hover .ttl,#fix_header .c-gnav>li>a:hover .ttl{
  transform:translateY(2px)!important;box-shadow:0 2px 4px rgba(34,30,25,.12),inset 0 1px 0 rgba(255,255,255,.15)!important;filter:brightness(.97);
}
#header .c-gnav>li:last-child>a .ttl,#fix_header .c-gnav>li:last-child>a .ttl{
  width:calc(var(--ll-chrome-key-unit)*2 + var(--ll-chrome-key-gap))!important;
  min-width:calc(var(--ll-chrome-key-unit)*2 + var(--ll-chrome-key-gap))!important;
  color:var(--ll-key-3-text)!important;font-size:12px!important;
  background:
    linear-gradient(180deg,var(--ll-chrome-red-top),var(--ll-key-3)) center 5px / calc(100% - 10px) calc(100% - 11px) no-repeat,
    linear-gradient(180deg,var(--ll-key-3),var(--ll-chrome-red-side)) center 2px / calc(100% - 4px) calc(100% - 4px) no-repeat,
    var(--ll-chrome-red-base)!important;
}

/* Disable SWELL nav underline while keeping our key itself intact. */
#header .c-gnav>li>a,#header .c-gnav>li>a:hover,#header .c-gnav>li>a:focus,
#fix_header .c-gnav>li>a,#fix_header .c-gnav>li>a:hover,#fix_header .c-gnav>li>a:focus{text-decoration:none!important}
#header .c-gnav>li>a::before,#header .c-gnav>li>a::after,
#fix_header .c-gnav>li>a::before,#fix_header .c-gnav>li>a::after{content:none!important;display:none!important}

/* ---------------- MOBILE HEADER ---------------- */
@media(max-width:959px){
  #header .l-header__gnav{display:none!important}
  #header,#header .l-header__inner{background:var(--ll-color-sub-bg)!important}
  #header{box-shadow:0 2px 0 color-mix(in srgb,var(--ll-color-muted) 14%,transparent),0 4px 10px rgba(34,30,25,.05)!important}
  #header .l-header__customBtn,#header .l-header__menuBtn{display:flex!important;align-items:center!important;justify-content:center!important}
  #header .l-header__customBtn+.l-header__menuBtn{margin-left:var(--ll-chrome-key-gap)!important}
  #header .l-header__customBtn .c-iconBtn,#header .l-header__menuBtn .c-iconBtn{
    box-sizing:border-box!important;height:var(--ll-chrome-sp-key-unit)!important;border:0!important;border-radius:var(--ll-chrome-radius)!important;
    background:
      linear-gradient(180deg,var(--ll-chrome-key-top),var(--ll-chrome-key-top)) center 5px / calc(100% - 10px) calc(100% - 11px) no-repeat,
      linear-gradient(180deg,color-mix(in srgb,var(--ll-color-line) 70%,var(--ll-color-paper) 30%),var(--ll-chrome-key-side)) center 2px / calc(100% - 4px) calc(100% - 4px) no-repeat,
      var(--ll-chrome-key-base)!important;
    box-shadow:0 4px 7px rgba(34,30,25,.14),inset 0 1px 0 rgba(255,255,255,.18)!important;
    color:var(--ll-color-text)!important;transition:transform .08s ease,box-shadow .08s ease!important;
  }
  #header .l-header__customBtn .c-iconBtn{width:var(--ll-chrome-sp-key-unit)!important}
  #header .l-header__menuBtn .c-iconBtn{
    width:calc(var(--ll-chrome-sp-key-unit)*2 + var(--ll-chrome-key-gap))!important;color:var(--ll-key-3-text)!important;
    background:
      linear-gradient(180deg,var(--ll-chrome-red-top),var(--ll-key-3)) center 5px / calc(100% - 10px) calc(100% - 11px) no-repeat,
      linear-gradient(180deg,var(--ll-key-3),var(--ll-chrome-red-side)) center 2px / calc(100% - 4px) calc(100% - 4px) no-repeat,
      var(--ll-chrome-red-base)!important;
  }
  #header .l-header__customBtn .c-iconBtn:active,#header .l-header__menuBtn .c-iconBtn:active{transform:translateY(2px)!important;box-shadow:0 2px 4px rgba(34,30,25,.12)!important}
  #header .c-iconBtn__icon{font-size:16px!important}
  #header .c-iconBtn__label{font-family:var(--ll-chrome-font)!important;font-size:9px!important;font-weight:700!important;letter-spacing:.04em!important}
  #header .l-header__logo,#header .c-headLogo,#header .c-headLogo__link{height:50px!important;display:flex!important;align-items:center!important}
  #header .c-headLogo__img{width:auto!important;height:45px!important;max-height:45px!important;object-fit:contain!important}
}