/* ── Shared header / footer / language selector / mobile menu styles
   Loaded on every page via <link rel="stylesheet" href="/css/partials.css">
   Was previously inlined into a <style> tag by js/layout.js.
   Extracted so it's cacheable, source-controlled, and easy to debug. ── */

header {
  padding:var(--spacing-md,1.5rem) 0;
  border-bottom:1px solid var(--border,#d0d7de);
  background:var(--bg-primary,#fff);
}
.nav-container {
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--spacing-sm,1rem);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--spacing-md,1.5rem);
}
.logo {
  font-size:1.25rem;
  font-weight:500;
  font-family:var(--font-mono,monospace);
  letter-spacing:-.02em;
  color:var(--text-primary,#24292e);
  text-decoration:none;
  flex-shrink:0;
}
.nav-links {
  display:flex;
  gap:var(--spacing-lg,2rem);
  align-items:center;
  flex-wrap:wrap;
}
.nav-link {
  color:var(--text-secondary,#57606a);
  text-decoration:none;
  font-weight:500;
  font-size:.875rem;
  transition:color .2s ease;
}
.nav-link:hover {
  color:var(--text-primary,#24292e);
}
.language-selector {
  flex-shrink:0;
  position:relative;
}
.language-btn {
  display:flex;
  align-items:center;
  gap:.4rem;
  padding:.4rem .75rem;
  background:var(--bg-secondary,#f6f8fa);
  border:1px solid var(--border,#d0d7de);
  border-radius:var(--radius-sm,4px);
  color:var(--text-primary,#24292e);
  cursor:pointer;
  font-size:.875rem;
  font-weight:500;
}
.language-btn:hover {
  border-color:var(--accent,#238636);
}
.current-lang {
  font-weight:600;
}
.language-dropdown {
  position:absolute;
  top:calc(100% + .5rem);
  right:0;
  background:var(--bg-primary,#fff);
  border:1px solid var(--border,#d0d7de);
  border-radius:var(--radius-md,8px);
  box-shadow:var(--shadow-lg,0 10px 15px rgba(0,0,0,.12));
  min-width:180px;
  opacity:0;
  visibility:hidden;
  z-index:1000;
}
.language-option {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.75rem 1rem;
  color:var(--text-primary,#24292e);
  text-decoration:none;
  border-bottom:1px solid var(--border,#d0d7de);
}
.language-option:last-child {
  border-bottom:none;
}
.language-option:hover {
  background:var(--bg-secondary,#f6f8fa);
}
.lang-code {
  font-weight:600;
  font-size:.875rem;
}
.lang-name {
  font-size:.875rem;
  color:var(--text-secondary,#57606a);
}
.mobile-menu-toggle {
  display:none;
  flex-direction:column;
  gap:4px;
  background:none;
  border:none;
  cursor:pointer;
  padding:.5rem;
  z-index:1001;
  margin-left:auto;
}
.mobile-menu-toggle span {
  display:block;
  width:24px;
  height:2px;
  background:var(--text-primary,#24292e);
  transition:all .3s ease;
}
.mobile-menu-toggle.active span:nth-child(1) {
  transform:rotate(45deg) translate(5px,5px);
}
.mobile-menu-toggle.active span:nth-child(2) {
  opacity:0;
}
.mobile-menu-toggle.active span:nth-child(3) {
  transform:rotate(-45deg) translate(7px,-6px);
}
@media(max-width:768px) {
  .nav-container{flex-direction:row;
  justify-content:space-between}.mobile-menu-toggle{display:flex}.nav-links{position:fixed;
  top:0;
  left:-100%;
  width:80%;
  max-width:300px;
  height:100vh;
  background:var(--bg-primary,#fff);
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding:80px 1.5rem 1.5rem;
  box-shadow:0 10px 15px rgba(0,0,0,.2);
  transition:left .3s ease;
  z-index:1000;
  overflow-y:auto;
  border-right:1px solid var(--border,#d0d7de)}.nav-links.active{left:0}.nav-link{width:100%;
  padding:1.5rem;
  border-bottom:1px solid var(--border,#d0d7de);
  text-align:left;
  font-size:1rem}body.menu-open::before{content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,.5);
  z-index:999};
}

.language-option.active {
  background:var(--bg-secondary);
  color:var(--text-primary);
}
.language-option.active .lang-code {
  color:var(--accent);
}