/* Shared navigation: quiet typography and a clear active-page underline. */
.site-header { --nav-accent: #0076b3; box-shadow: none; }
body.theme-dark .site-header { --nav-accent: #81d2fa; }
.site-header .primary-nav { border-bottom: 1px solid var(--line); }
body.header-compact-sticky .site-header .primary-nav { box-shadow: none; }
.site-header .primary-nav a { font-weight: 500; border-radius: 0; }
.site-header .primary-nav a[aria-current="page"]:not(.primary-nav-join) { color: var(--nav-accent); font-weight: 600; }
.site-header .primary-nav a[aria-current="page"]::before { content: none; }
.site-header .primary-nav a::after { height: 2px; bottom: 0; background: transparent; }
.site-header .primary-nav a:hover,
.site-header .primary-nav a:focus-visible { color: var(--nav-accent); background: transparent; }
.site-header .primary-nav a:hover::after,
.site-header .primary-nav a:focus-visible::after { background: transparent; }
.site-header .primary-nav a[aria-current="page"]:not(.primary-nav-join)::after { background: var(--nav-accent); }
.site-header .primary-nav a:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: -3px; }
.site-header .primary-nav .primary-nav-join { background: transparent; color: var(--nav-accent); border: 1px solid var(--nav-accent); border-radius: 7px; font-weight: 600; }
.site-header .primary-nav .primary-nav-join:hover { color: var(--nav-accent); background: transparent; border-color: var(--nav-accent); }
.site-header .primary-nav .primary-nav-join[aria-current="page"] { color: var(--paper); background: var(--nav-accent); }
@media (max-width: 640px) {
  .site-header .primary-nav a:hover,
  .site-header .primary-nav a:focus-visible { border-color: transparent; }
  .site-header .primary-nav a[aria-current="page"]:not(.primary-nav-join)::after { display: block; left: 10px; right: 10px; }
  .site-header .primary-nav .primary-nav-join { border-color: var(--nav-accent); }
  .site-header .nav-toggle { font-weight: 600; }
}

/* Utility controls share the same quiet outline treatment. */
.site-header .site-search input { min-height: 30px; background: var(--header-surface); border: 1px solid var(--line); border-radius: 7px; font-weight: 500; box-shadow: none; }
.site-header .site-search input::placeholder { color: var(--muted); opacity: 1; }
.site-header .site-search input:focus { border-color: var(--nav-accent); box-shadow: 0 0 0 1px var(--nav-accent); }
.site-header .site-search-results { border-radius: 7px; background: var(--header-surface); box-shadow: 0 4px 14px #00000012; }
.site-header .header-youtube-link { color: var(--nav-accent); font-weight: 600; }
.site-header .theme-toggle,
.site-header .dalgu-mode-toggle,
.site-header .dalgu-skin-toggle { background: var(--header-surface); color: var(--nav-accent); border: 1px solid var(--line); border-radius: 7px; box-shadow: none; font-weight: 500; min-height: 30px; }
.site-header .dalgu-mode-toggle,
.site-header .dalgu-skin-toggle { width: 30px; min-width: 30px; height: 30px; margin-left: 0; }
.site-header .dalgu-mode-toggle-face { width: 28px; height: 28px; background: transparent; border-radius: 5px; }
.site-header .dalgu-skin-toggle-orb { border-radius: 5px; box-shadow: none; }
.site-header .dalgu-skin-toggle[data-dalgu-skin="none"] .dalgu-skin-toggle-orb { background: transparent; border-color: transparent; box-shadow: none; }
.site-header .theme-toggle:hover,
.site-header .dalgu-mode-toggle:hover,
.site-header .dalgu-skin-toggle:hover { background: var(--header-surface); border-color: var(--nav-accent); box-shadow: none; }
.site-header .theme-toggle:focus-visible,
.site-header .dalgu-mode-toggle:focus-visible,
.site-header .dalgu-skin-toggle:focus-visible { background: var(--header-surface); box-shadow: none; outline: 2px solid var(--nav-accent); outline-offset: 2px; }

/* Rounded utility controls, retaining the restrained colors and borders. */
.site-header .site-search input,
.site-header .theme-toggle { border-radius: 999px; }
.site-header .dalgu-mode-toggle,
.site-header .dalgu-skin-toggle,
.site-header .dalgu-mode-toggle-face,
.site-header .dalgu-skin-toggle-orb { border-radius: 50%; }
.site-header .site-search-results { border-radius: 8px; }

/* Fit Dalgu's face comfortably inside the compact circular control. */
.site-header .dalgu-mode-toggle-face img { width: 44px; top: -1px; left: 37%; }