/* ============================================================================
   KiwiScience — Soil Protection Group
   Shared sidebar navigation. Linked by every page of the suite: the hub,
   the research and Red Zone pages, the publications and student pages, and
   the Tika Tipu app. Self-contained: defines the variables it needs (values
   match style.css and tikatipu/css/styles.css).

   Behaviour:
   - Desktop (≥960px): fixed sidebar, content shifted via .layout.
   - Below 960px: off-canvas drawer opened by the .navtoggle hamburger
     (wired by nav.js), with a .backdrop overlay.
   - body.nav-drawer: drawer mode at EVERY width — used by the Tika Tipu app,
     where a permanent sidebar would crowd the workspace.
   ============================================================================ */
:root{
  --cream:      #FDF6E3;
  --kiwi-brown: #63452B;
  --leaf-green: #4A7836;
  --sidebar-w:  280px;
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ---- Skip link ---- */
.skip{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--leaf-green); color:#fff; padding:8px 16px;
  font-family:var(--font-sans); font-size:0.9rem; text-decoration:none;
}
.skip:focus{ left:0; }

/* ---- Sidebar ---- */
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
  background:var(--kiwi-brown); color:var(--cream);
  display:flex; flex-direction:column;
  overflow-y:auto; z-index:60;
  transform:translateX(-100%);
  transition:transform .22s ease;
}
body.nav-open .sidebar{ transform:none; box-shadow:0 0 30px rgba(45,35,24,0.4); }

.sidebar .brand{
  display:flex; align-items:center; gap:12px;
  padding:20px 20px 14px;
}
.sidebar .brand img{
  width:44px; height:44px; border-radius:8px; flex-shrink:0;
  background:var(--cream);
}
.sidebar .brand .titles{ display:flex; flex-direction:column; line-height:1.15; }
.sidebar .brand .name{ font-size:20px; font-weight:700; letter-spacing:0.3px;
  font-family:Georgia, "Times New Roman", Times, serif; }
.sidebar .brand .sub{ font-size:12px; color:rgba(253,246,227,0.72);
  font-family:var(--font-sans); letter-spacing:0.02em; }

nav.sidenav{ padding:0 12px 30px; font-family:var(--font-sans); }
nav.sidenav .navhead{
  font-size:0.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.13em; color:rgba(253,246,227,0.55);
  margin:22px 10px 8px;
}
nav.sidenav ul{ list-style:none; margin:0; padding:0; }
nav.sidenav a{
  display:block; padding:7px 10px; border-radius:7px;
  color:rgba(253,246,227,0.87); text-decoration:none;
  font-size:0.92rem; line-height:1.35;
}
nav.sidenav a:hover{ background:rgba(253,246,227,0.1); color:var(--cream); }
nav.sidenav a.active{ background:var(--leaf-green); color:#fff; font-weight:700; }
nav.sidenav ul.onpage a{
  display:flex; gap:9px; align-items:baseline;
  padding:5px 10px 5px 14px; font-size:0.85rem;
  color:rgba(253,246,227,0.75);
}
nav.sidenav ul.onpage a:hover{ color:var(--cream); }
nav.sidenav .tnum{ font-weight:700; color:#e9d9b8; min-width:1.2em; }

/* ---- Mobile top bar (docs pages; the Tika Tipu app puts the hamburger in
        its own header instead) ---- */
header.mobilebar{
  position:sticky; top:0; z-index:50;
  background:var(--kiwi-brown); color:var(--cream);
  display:flex; align-items:center; gap:12px;
  padding:10px 16px;
}
header.mobilebar img{ width:36px; height:36px; border-radius:7px; background:var(--cream); }
header.mobilebar .name{ font-size:18px; font-weight:700; letter-spacing:0.3px;
  font-family:Georgia, "Times New Roman", Times, serif; }
header.mobilebar .sub{ display:block; font-size:11px; line-height:1.2;
  color:rgba(253,246,227,0.72); font-family:var(--font-sans); }

.navtoggle{
  background:none; border:0; padding:0; cursor:pointer;
  width:42px; height:42px; flex-shrink:0; border-radius:8px;
}
.navtoggle:hover{ background:rgba(253,246,227,0.1); }
.navtoggle span{
  display:block; width:20px; height:2px; margin:4px auto;
  background:var(--cream); border-radius:1px;
}

.backdrop{
  position:fixed; inset:0; z-index:55;
  background:rgba(45,35,24,0.5);
}
.backdrop[hidden]{ display:none; }

/* ---- Desktop: persistent sidebar (unless the page opts into drawer-only
        mode with body.nav-drawer) ---- */
@media (min-width:960px){
  body:not(.nav-drawer) .sidebar{ transform:none; }
  body:not(.nav-drawer) header.mobilebar{ display:none; }
  body:not(.nav-drawer) .backdrop{ display:none !important; }
  body:not(.nav-drawer) .navtoggle{ display:none; }
  body:not(.nav-drawer) .layout{ margin-left:var(--sidebar-w); }
}

/* ---- Print ---- */
@media print{
  .sidebar, header.mobilebar, .backdrop, .navtoggle, .skip{ display:none; }
  .layout{ margin-left:0; }
}