/* Navigation fixes + language menu with flags (2026-09-30).
   Markup: tools/add-lang-menu.js · behaviour: lang-menu.js */

/* Menu items and the logo never break over two lines ("Command / stations") */
nav .nav-logo, nav .nav-logo-brand { flex-shrink: 0; }
nav .nav-logo-text, nav .nav-logo-byline { white-space: nowrap; }
nav .nav-links { flex-wrap: nowrap; }
nav .nav-links > li { flex-shrink: 0; }
nav .nav-links a, nav .nav-links button { white-space: nowrap; }
@media (min-width: 1280px) and (max-width: 1480px) {
  nav .nav-links { gap: 4px; }
  nav .nav-links > li > a:not(.nav-cta) { padding-left: 11px; padding-right: 11px; }
}

/* Flags (drawn, so they look the same on Windows, Mac, iPhone and Android) */
.ll-flag { display: inline-block; flex: none; width: 22px; height: 15px; border-radius: 3.5px; background: center / cover no-repeat; box-shadow: 0 0 0 1px rgba(15, 23, 42, .14), 0 1px 2px rgba(0, 0, 0, .14); }
.ll-flag[data-flag="nl"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath fill='%2321468B' d='M0 0h9v6H0z'/%3E%3Cpath fill='%23fff' d='M0 0h9v4H0z'/%3E%3Cpath fill='%23AE1C28' d='M0 0h9v2H0z'/%3E%3C/svg%3E"); }
.ll-flag[data-flag="de"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Cpath fill='%23FFCE00' d='M0 0h5v3H0z'/%3E%3Cpath fill='%23DD0000' d='M0 0h5v2H0z'/%3E%3Cpath fill='%23000' d='M0 0h5v1H0z'/%3E%3C/svg%3E"); }
.ll-flag[data-flag="fr"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23EF4135' d='M0 0h3v2H0z'/%3E%3Cpath fill='%23fff' d='M0 0h2v2H0z'/%3E%3Cpath fill='%230055A4' d='M0 0h1v2H0z'/%3E%3C/svg%3E"); }
.ll-flag[data-flag="gb"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30' preserveAspectRatio='xMidYMid slice'%3E%3Cpath fill='%23012169' d='M0 0h60v30H0z'/%3E%3Cpath stroke='%23fff' stroke-width='6' d='M0 0l60 30M60 0L0 30'/%3E%3Cpath stroke='%23C8102E' stroke-width='2.4' d='M0 0l60 30M60 0L0 30'/%3E%3Cpath stroke='%23fff' stroke-width='10' d='M30 0v30M0 15h60'/%3E%3Cpath stroke='%23C8102E' stroke-width='6' d='M30 0v30M0 15h60'/%3E%3C/svg%3E"); }
.ll-flag[data-flag="us"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 10' preserveAspectRatio='xMidYMid slice'%3E%3Cpath fill='%23fff' d='M0 0h19v10H0z'/%3E%3Cpath fill='%23B22234' d='M0 0h19v.77H0zM0 1.54h19v.77H0zM0 3.08h19v.77H0zM0 4.62h19v.77H0zM0 6.15h19v.77H0zM0 7.69h19v.77H0zM0 9.23h19v.77H0z'/%3E%3Cpath fill='%233C3B6E' d='M0 0h7.6v5.38H0z'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='1.1' cy='1' r='.32'/%3E%3Ccircle cx='2.9' cy='1' r='.32'/%3E%3Ccircle cx='4.7' cy='1' r='.32'/%3E%3Ccircle cx='6.5' cy='1' r='.32'/%3E%3Ccircle cx='2' cy='2.1' r='.32'/%3E%3Ccircle cx='3.8' cy='2.1' r='.32'/%3E%3Ccircle cx='5.6' cy='2.1' r='.32'/%3E%3Ccircle cx='1.1' cy='3.2' r='.32'/%3E%3Ccircle cx='2.9' cy='3.2' r='.32'/%3E%3Ccircle cx='4.7' cy='3.2' r='.32'/%3E%3Ccircle cx='6.5' cy='3.2' r='.32'/%3E%3Ccircle cx='2' cy='4.3' r='.32'/%3E%3Ccircle cx='3.8' cy='4.3' r='.32'/%3E%3Ccircle cx='5.6' cy='4.3' r='.32'/%3E%3C/g%3E%3C/svg%3E"); }

/* The button */
nav .lang-switcher { position: relative; display: flex; align-items: center; gap: 0; }
.lang-menu { position: relative; }
.lang-menu-toggle { display: inline-flex; align-items: center; gap: 7px; height: 36px; margin: 0; padding: 0 9px 0 8px; border: 1px solid var(--border-light); border-radius: 10px; background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; line-height: 1; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
[data-theme="light"] .lang-menu-toggle { background: #fff; border-color: rgba(15, 23, 42, .11); }
.lang-menu-toggle:hover, .lang-menu.is-open .lang-menu-toggle { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .14); }
.lang-menu-toggle:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; }
.lang-menu-chevron { width: 12px; height: 12px; color: var(--text-secondary); transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.lang-menu.is-open .lang-menu-chevron { transform: rotate(180deg); }

/* The menu */
.lang-menu-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 1200; display: grid; gap: 2px; min-width: 214px; padding: 6px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 16px; background: rgba(22, 22, 32, .98); box-shadow: 0 26px 60px -18px rgba(0, 0, 0, .6), 0 4px 14px rgba(0, 0, 0, .2); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity .16s ease, transform .2s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .2s; }
.lang-menu-panel::before { content: ""; position: absolute; top: -6px; right: 22px; width: 11px; height: 11px; transform: rotate(45deg); border-left: 1px solid rgba(255, 255, 255, .09); border-top: 1px solid rgba(255, 255, 255, .09); background: inherit; border-radius: 2px 0 0 0; }
[data-theme="light"] .lang-menu-panel { border-color: rgba(15, 23, 42, .08); background: rgba(255, 255, 255, .98); box-shadow: 0 26px 60px -18px rgba(15, 23, 42, .3), 0 4px 14px rgba(15, 23, 42, .08); }
[data-theme="light"] .lang-menu-panel::before { border-color: rgba(15, 23, 42, .08); }
.lang-menu.is-open .lang-menu-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
nav .lang-menu-panel .lang-menu-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 10px 12px !important; border: 0; border-radius: 10px !important; background: none; color: var(--text-primary) !important; font: inherit; font-size: 14.5px !important; font-weight: 650; line-height: 1.2; letter-spacing: 0; text-align: left; text-decoration: none; opacity: 1; cursor: pointer; transform: none !important; white-space: nowrap; }
nav .lang-menu-panel .lang-menu-item:hover, nav .lang-menu-panel .lang-menu-item:focus-visible { background: rgba(255, 255, 255, .07) !important; outline: none; }
[data-theme="light"] nav .lang-menu-panel .lang-menu-item:hover, [data-theme="light"] nav .lang-menu-panel .lang-menu-item:focus-visible { background: rgba(15, 23, 42, .05) !important; }
nav .lang-menu-panel .lang-menu-item[aria-current] { background: rgba(245, 158, 11, .13) !important; font-weight: 800; }
.lang-menu-item .ll-flag { width: 24px; height: 16px; }
.lang-menu-name { flex: 1; }
.lang-menu-check { flex: none; width: 16px; height: 16px; margin-left: 8px; color: #f59e0b;  visibility: hidden; }
.lang-menu-item[aria-current] .lang-menu-check { visibility: visible; }

/* Inside the phone and tablet menu: the languages as a grid of tiles */
@media (max-width: 1023px) {
  nav .nav-links.open .lang-switcher { display: block; width: 100%; padding: 10px 22px 6px; }
  nav .nav-links.open .lang-menu-toggle { display: none; }
  nav .nav-links.open .lang-menu-panel { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; visibility: visible; transform: none; }
  nav .nav-links.open .lang-menu-panel::before { display: none; }
  nav .nav-links.open .lang-menu-panel .lang-menu-item { gap: 10px; border: 1px solid var(--border-light) !important; padding: 12px 14px !important; font-size: 15px !important; }
  nav .nav-links.open .lang-menu-panel .lang-menu-item[aria-current] { border-color: #f59e0b !important; }
  nav .nav-links.open .lang-menu-check { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lang-menu-panel, .lang-menu-chevron { transition: none; }
}