/* =============================================================================
   HEADER  |  Top bar, theme toggle, sliding glass menu (also the bottom bar on phones).
   HTML: index.html -> <!-- SECTION: HEADER -->     JS: js/header.js
   Edit only this file when you want to change how header looks.
   ============================================================================= */

.nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + .8rem);z-index:40;margin-top:.8rem;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 .6rem 0 1.1rem;border-radius:99px}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:700;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.nav .btn{padding:.6rem 1.2rem;font-size:.88rem}
.gnav{position:relative;display:flex;gap:2px;padding:4px;border-radius:99px;background:rgba(10,10,10,.06);box-shadow:inset 0 1px 3px rgba(0,0,0,.08)}
.gnav a{position:relative;z-index:1;padding:.45rem 1rem;border-radius:99px;color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:500;transition:color .3s}
.gnav a.on,.gnav a:hover{color:var(--ink)}
.ind{position:absolute;left:0;top:4px;bottom:4px;width:0;border-radius:99px;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.7));box-shadow:0 3px 12px rgba(0,0,0,.14),inset 0 1.5px 1px #fff,inset 0 -1px 2px rgba(0,0,0,.06);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .5s cubic-bezier(.3,1.35,.4,1),width .5s cubic-bezier(.3,1.35,.4,1),opacity .3s}
.dock{position:fixed;z-index:45;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 1.5rem);bottom:calc(env(safe-area-inset-bottom,0px) + .8rem)}
@media(max-width:819px){
  .dock{background:var(--g-bg);border:1px solid var(--g-border);box-shadow:var(--g-shadow),var(--g-inner);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);padding:5px}
  .dock a{padding:.5rem .9rem;font-size:.86rem}
  .ind{top:5px;bottom:5px}
}
@media(min-width:820px){
  .dock{bottom:auto;top:calc(env(safe-area-inset-top,0px) + .8rem + 8px)}
}
.nr{display:flex;align-items:center;gap:.6rem}
.tgl{position:relative;flex:none;width:58px;height:32px;border-radius:99px;border:1px solid var(--g-border);background:var(--g-bg);box-shadow:var(--g-shadow),var(--g-inner);cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.th{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#fff,#e8e8e3);box-shadow:0 2px 6px rgba(0,0,0,.25);color:#0a0a0a;transition:transform .45s cubic-bezier(.3,1.35,.4,1)}
.th svg{width:14px;height:14px}
.moon{display:none}
.tgl[aria-checked="true"] .th{transform:translateX(26px)}
.tgl[aria-checked="true"] .sun{display:none}
.tgl[aria-checked="true"] .moon{display:block}
[data-theme=dark] .gnav{background:rgba(255,255,255,.06);box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
[data-theme=dark] .ind{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.1));box-shadow:0 3px 12px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.22)}
.tgl::before{content:"";position:absolute;inset:-6px}
@media(max-width:480px){
  .nav{padding:0 .4rem 0 .8rem}
  .nav .btn{padding:.55rem .95rem;font-size:.84rem}
  .nr{gap:.4rem}
  .logo{gap:.45rem}
  .tgl{width:52px;height:30px}
  .th{width:22px;height:22px}
  .tgl[aria-checked="true"] .th{transform:translateX(22px)}
}
@media(max-width:340px){
  .logo{font-size:.95rem}
}
@media(max-width:819px){
  .dock a{padding:.5rem .7rem}
}
@media(max-width:360px){
  .dock a{padding:.5rem .5rem;font-size:.8rem}
}
.logo{font-size:1.2rem;letter-spacing:-.01em;gap:.28em}

/* ----- logo images: two files, one per theme. Replace assets/logo-light.svg and assets/logo-dark.svg ----- */
.logo img{display:block;height:28px;width:auto}
.logo .on-dark{display:none}
[data-theme=dark] .logo .on-light{display:none}
[data-theme=dark] .logo .on-dark{display:block}
@media(max-width:480px){.logo img{height:24px}}
@media(max-width:340px){.logo img{height:22px}}