:root{
  --bg:#f7f8fa;
  --card:#ffffff;
  --ink:#222222;
  --muted:#555555;
  --brand:#0b5ed7;
  --brand-ink:#003366;
  --line:#d0d4da;
}

.container {
  width: min(1120px, 92vw);
  margin-inline: auto;
  padding-inline: 16px;
}

.site-header{
  position:sticky; top:0;
  background-color:#ffffff;
  border-bottom:1px solid var(--line);
  z-index:10;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:7px 0}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700}
.brand-mark{width:28px;height:28px;stroke:var(--brand);fill:none}
.brand-name{letter-spacing:.2px}

.nav, .dropdown-nav{display:flex;gap:18px;align-items:center}
.nav a, .dropbtn{color:var(--ink);text-decoration:none;font-weight:600;cursor:pointer}
.nav a:hover, .dropbtn:hover{color:var(--brand)}

.dropdown { position: relative; }
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 180px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
  border: 1px solid var(--line);
  border-radius: 4px;
  top: 100%;
  right: 0;
  left: auto;
  max-width: 100vw;
  overflow-wrap: break-word;
}
.dropdown-content a { display: block; padding: 5px 10px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.dropdown-content a:hover { background-color: #eef3f9; }
.dropdown:hover .dropdown-content { display: block; }

html {
  scroll-padding-top: 55px;
}

/* Desktop keeps hover */
@media (hover: hover) and (pointer: fine) {
  .dropdown:hover > .dropdown-content { display: block; }
}

/* Touch devices use an 'open' class instead of :hover */
@media (hover: none), (pointer: coarse) {
  .dropdown > .dropdown-content { display: none; }
  .dropdown.open > .dropdown-content { display: block; }
  .dropbtn { touch-action: manipulation; }
}

/* Accessibility/focus fallback for keyboards */
.dropdown:focus-within > .dropdown-content { display: block; }