/* Shared navigation for the interactive home and reading pages. */
.home-page .nav,
.document-page .site-header,
html.homadebar-app .document-page .site-header {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto auto;
  gap: 12px 28px;
  align-items: center;
  z-index: 40;
}
.document-page .language-menu { grid-column: 3; grid-row: 1; }
:is(.home-navigation, .site-navigation, .language-menu) { position: relative; font-family: var(--font-ui); }
:is(.home-menu-toggle, .site-menu-toggle, .language-menu > summary) {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  gap: 8px;
  padding: 0;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
:is(.home-menu-toggle, .site-menu-toggle, .language-menu > summary)::-webkit-details-marker { display: none; }
:is(.home-menu-links, .site-menu-links) { display: flex; align-items: center; gap: 24px; font-size: 13px; }
:is(.home-menu-links, .site-menu-links) a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); white-space: nowrap; }
:is(.home-menu-links, .site-menu-links) a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.language-chevron { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.language-menu[open] .language-chevron { transform: translateY(2px) rotate(225deg); }
.language-options {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  width: max-content;
  min-width: 172px;
  max-width: calc(100vw - 40px);
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 12px 32px #102e311a;
}
.language-options a { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 44px; padding: 8px 12px; color: var(--ink); text-decoration: none; font-size: 14px; border-radius: 6px; }
.language-options a:hover, .language-options a[aria-current="page"] { background: var(--line); }
.language-options a[aria-current="page"]::after { content: '✓'; }
:is(.home-navigation, .site-navigation, .language-menu) :is(a, summary):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (min-width: 1001px) {
  .home-navigation[open] > .home-menu-toggle, .site-navigation[open] > .site-menu-toggle { display: none; }
}
@media (max-width: 1000px) {
  .home-page .nav,
  .document-page .site-header,
  html.homadebar-app .document-page .site-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px 16px;
    padding-inline: 20px;
  }
  :is(.home-navigation, .site-navigation) { grid-column: 2; grid-row: 1; }
  :is(.home-menu-links, .site-menu-links) {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 45;
    width: max-content;
    min-width: 190px;
    max-width: calc(100vw - 40px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 12px 32px #102e311a;
  }
  :is(.home-menu-links, .site-menu-links) a { padding: 8px 12px; white-space: normal; line-height: 1.4; }
  .site-menu-links a:hover { background: var(--line); }
  :is(.home-navigation, .site-navigation):not([open]) > :is(.home-menu-links, .site-menu-links) { display: none; }
}
@media (max-width: 360px) {
  .home-page .nav, .document-page .site-header { gap: 8px 12px; padding-inline: 16px; }
  .document-page .brand { font-size: 12px; }
  :is(.home-menu-toggle, .site-menu-toggle, .language-menu > summary) { font-size: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  :is(.home-navigation, .site-navigation, .language-menu)[open] > :is(.home-menu-links, .site-menu-links, .language-options) { animation: menu-reveal 140ms ease-out; }
  @keyframes menu-reveal { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
}

/* Homepage destinations stay beside the language selector. */
.home-navigation[open] > .home-menu-toggle{display:none}
.home-page .home-navigation{grid-column:2;grid-row:1}
.home-page .language-menu{grid-column:3;grid-row:1}
.home-page .home-menu-links{position:static;width:auto;min-width:0;max-width:none;flex-direction:row;flex-wrap:nowrap;justify-content:center;gap:0 24px;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
@media(max-width:1000px){
 .home-page .nav{height:82px;grid-template-columns:minmax(70px,1fr) auto auto;gap:0 16px;padding-inline:20px}
 .home-page .brand-link{width:90px}
 .home-page .home-menu-links{gap:0 16px}
 .home-page .home-menu-links a{padding:4px 0;font-size:12px}
}
@media(max-width:600px){
 .home-page .nav{height:auto;min-height:114px;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;padding:10px 12px}
 .home-page .brand-link{grid-column:1;grid-row:1;width:80px}
 .home-page .home-navigation{grid-column:1/-1;grid-row:2;min-width:0}
 .home-page .language-menu{grid-column:2;grid-row:1}
 .home-page .home-menu-links{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 8px;text-align:center}
 .home-page .home-menu-links a{justify-content:center;font-size:11px;overflow-wrap:anywhere}
 .home-page .language-menu>summary{font-size:11px;gap:4px}
}