/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:40;
  background:var(--header-bg);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-onbg);
}
.header-inner{
  max-width:1180px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Baloo 2', sans-serif; font-weight:700;
  font-size:21px; color:var(--text);
}
.brand-mark{
  width:30px; height:30px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg, var(--gold), var(--berry) 55%, var(--sage));
  box-shadow:0 4px 10px -2px rgba(255,111,89,0.45);
  transform:rotate(-6deg);
}
.brand small{ display:block; font-family:'Space Mono',monospace; font-style:normal; font-size:9.5px; letter-spacing:.1em; color:var(--text-soft); text-transform:uppercase; font-weight:400; }

.header-controls{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}

nav.tabs{ display:flex; gap:4px; background:var(--bg-raised); padding:4px; border-radius:999px; border:2px solid var(--line-onbg); }
nav.tabs button{
  font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.04em; text-transform:uppercase; font-weight:600;
  background:transparent; border:none; color:var(--text-soft);
  padding:8px 16px; border-radius:999px; cursor:pointer; transition:background .2s, color .2s;
}
nav.tabs button.active{ background:var(--accent-secondary); color:#0c1f1d; }

.theme-toggle{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:var(--bg-raised); border:2px solid var(--line-onbg); color:var(--text);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .2s, transform .15s;
}
.theme-toggle:hover{ transform:rotate(20deg); background:var(--gold); color:#241f1a; }
.theme-toggle i{ font-size:18px; }
html[data-theme="dark"] .icon-sun{ display:block; }
html[data-theme="dark"] .icon-moon{ display:none; }
html[data-theme="light"] .icon-sun{ display:none; }
html[data-theme="light"] .icon-moon{ display:block; }

/* ---------- Header dropdown menu (About / Privacy / Contact) ---------- */
.nav-dropdown{ position:relative; }
.nav-dropdown-toggle{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:var(--bg-raised); border:2px solid var(--line-onbg); color:var(--text);
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px;
  transition:background .2s, border-color .2s, color .2s;
}
.nav-dropdown-toggle:hover, .nav-dropdown-toggle[aria-expanded="true"]{
  background:var(--accent-secondary); color:#0c1f1d; border-color:var(--accent-secondary);
}
.nav-dropdown-menu{
  position:absolute; top:calc(100% + 10px); right:0; min-width:170px; z-index:50;
  background:var(--paper); border:2px solid var(--line-onpaper); border-radius:16px;
  box-shadow:0 16px 32px -12px rgba(0,0,0,0.35); padding:6px; display:flex; flex-direction:column; gap:2px;
}
.nav-dropdown-menu.hidden{ display:none; }
.nav-dropdown-menu a{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px;
  font-family:'Inter',sans-serif; font-size:13.5px; font-weight:500; color:var(--ink);
  transition:background .15s, color .15s;
}
.nav-dropdown-menu a i{ width:16px; text-align:center; color:var(--text-soft); font-size:13px; }
.nav-dropdown-menu a:hover{ background:var(--bg-raised); color:var(--berry); }
.nav-dropdown-menu a:hover i{ color:var(--berry); }

/* Page content for static pages (about / privacy / contact) */
.page-content{ max-width:800px; margin:40px auto; padding:32px; background:var(--paper); color:var(--ink); border-radius:24px; border:2px solid var(--line-onpaper); }
.page-content h1{ font-family:'Baloo 2', sans-serif; font-weight:700; font-size:2.2rem; margin-top:0; color:var(--berry); }
.page-content p{ line-height:1.7; }

/* Footer (shared) */
footer{ border-top:2px solid var(--line-onbg); padding:26px 20px; }
.footer-inner{ max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.04em; color:var(--text-soft); text-transform:uppercase; }
.footer-inner a{ text-decoration:none; transition:color .2s; }
.footer-inner a:hover{ color:var(--berry); }

@media (max-width:640px){
  .header-inner{ flex-direction:column; align-items:stretch; gap:8px; }
  .header-controls{ flex-wrap:wrap; justify-content:center; }
}