/* Mobile navigation. */
.bkk-mobile-menu {
  --menu-accent: #38bdf8;
  --menu-border: #1f2933;
  --menu-surface: #0b0c10;
  position: fixed; inset: 0; margin: 0; padding: 0; width: 100%; max-width: none;
  height: 100vh; height: 100dvh; max-height: none; border: 0;
  background: var(--bkk-ink, #050509); color: #e2e8f0; overflow: hidden; box-sizing: border-box;
  z-index: 10010;
}
.bkk-mobile-menu:not([open]) { display: none; }
.bkk-mobile-menu[open] { display: block; animation: bkk-menu-enter .16s ease-out; }
.bkk-mobile-menu::backdrop { background: var(--bkk-ink, #050509); }
.bkk-mobile-menu *, .bkk-mobile-menu *::before, .bkk-mobile-menu *::after { box-sizing: border-box; }
/* Shared hero texture. */
.bkk-mobile-menu__frame { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.bkk-mobile-menu__topbar {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 88px; padding-block: calc(12px + env(safe-area-inset-top)) 12px;
  padding-left: max(clamp(1rem, 3.2vw, 3rem), env(safe-area-inset-left));
  padding-right: max(clamp(1rem, 3.2vw, 3rem), env(safe-area-inset-right));
  border-bottom: 1px solid #1f293399; background: #050509;
}
.bkk-mobile-menu__brand { display: flex; align-items: center; min-height: 48px; flex: 0 1 auto; }
.bkk-mobile-menu__brand .bkk-brand-logo { display: block; object-fit: contain; }
.bkk-mobile-menu__close {
  appearance: none; flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  padding: 12px; border: 1px solid var(--menu-border); border-radius: 8px;
  background: var(--menu-surface); color: #e2e8f0; cursor: pointer;
}
.bkk-mobile-menu__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.bkk-mobile-menu__body {
  width: 100%; max-width: 1100px; margin: 0 auto; padding-block: 28px calc(28px + env(safe-area-inset-bottom));
  padding-left: max(clamp(1rem, 3.2vw, 3rem), env(safe-area-inset-left));
  padding-right: max(clamp(1rem, 3.2vw, 3rem), env(safe-area-inset-right));
}
.bkk-mobile-menu__label.bkk-eyebrow { margin: 0 0 14px; }
.bkk-mobile-menu__links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--menu-border); }
.bkk-mobile-menu__links li { margin: 0; padding: 0; border-bottom: 1px solid var(--menu-border); }
.bkk-mobile-menu__links a {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 58px; padding: 16px 12px; color: #cbd5e1; text-decoration: none;
  font: 400 15px/1.6 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase;
  transition: color .16s ease, background-color .16s ease;
}
.bkk-mobile-menu__links a span { min-width: 0; overflow-wrap: anywhere; }
.bkk-mobile-menu__arrow { flex: none; color: #64748b; }
.bkk-mobile-menu__links a[aria-current] { color: #fff; background: #38bdf808; }
.bkk-mobile-menu__links a[aria-current]::before { content: ''; position: absolute; inset-inline-start: 0; top: 18px; bottom: 18px; width: 2px; background: var(--menu-accent); }
.bkk-mobile-menu__links a[aria-current] .bkk-mobile-menu__arrow { color: var(--menu-accent); }
.bkk-mobile-menu__secondary { margin-top: 24px; }
/* Same incident button used in the desktop header, stretched for mobile. */
.bkk-mobile-menu__incident-button.bkk-escalate--nav { width: 100%; min-height: 48px; padding: 13px 16px; white-space: normal; text-align: center; }
.bkk-mobile-menu__incident p { margin: 14px 0 0; max-width: 62ch; color: var(--bkk-muted); font: 400 11px/1.8 Inter, system-ui, sans-serif; }
.bkk-mobile-menu__language-section { margin-top: 26px; }
.bkk-mobile-menu__languages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 6px; border: 1px solid #1f2933; border-radius: 12px; background: #0b0c10cc; }
.bkk-mobile-menu__languages :is(a,button) {
  appearance: none; position: relative; display: flex; align-items: center; gap: 10px;
  min-width: 0; width: 100%; min-height: 44px; margin: 0; padding: 8px;
  border: 1px solid transparent; border-radius: 7px; background: transparent; color: #94a3b8;
  text-align: start; font: 400 11px/1.6 'JetBrains Mono', ui-monospace, monospace; cursor: pointer;
}
.bkk-mobile-menu__flag { flex: none; display: grid; place-items: center; width: 26px; height: 21px; border-radius: 4px; }
.bkk-mobile-menu__languages img { display: block; width: 20px; height: 15px; object-fit: cover; border-radius: 2px; }
.bkk-mobile-menu__languages bdi { min-width: 0; overflow-wrap: anywhere; }
.bkk-mobile-menu__check { flex: none; margin-inline-start: auto; visibility: hidden; color: #38bdf8; }
.bkk-mobile-menu__languages :is(a,button)[aria-current] { color: #e2e8f0; }
.bkk-mobile-menu__languages :is(a,button)[aria-current] .bkk-mobile-menu__flag { background: #173245; box-shadow: inset 0 0 0 1px #4c9abb; }
.bkk-mobile-menu__languages :is(a,button)[aria-current] .bkk-mobile-menu__check { visibility: visible; }
.bkk-mobile-menu :is(a,button):focus-visible { outline: 2px solid var(--bkk-cyan); outline-offset: 3px; }
.bkk-mobile-menu__links a:focus-visible { outline-offset: -2px; }
.bkk-mobile-menu__languages :is(a,button):focus-visible { outline-offset: -1px; }
html.bkk-menu-open { overflow: hidden; }
[dir="rtl"] .bkk-mobile-menu__arrow { transform: rotate(180deg); }
[dir="rtl"] .bkk-mobile-menu__links a { letter-spacing: .015em; }
.bkk-mobile-noscript { display: none; }
@media (min-width: 700px) {
  .bkk-mobile-menu__body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 72px); padding-top: 44px; }
  .bkk-mobile-menu__secondary { margin-top: 30px; }
  .bkk-mobile-menu__links a { min-height: 64px; font-size: 16px; }
}
@media (max-width: 767px) { .bkk-mobile-menu__topbar { min-height: 80px; padding-block: calc(14px + env(safe-area-inset-top)) 14px; } }
@media (max-width: 359px) {
  .bkk-mobile-menu__languages { padding: 4px; gap: 2px; }
  .bkk-mobile-menu__languages :is(a,button) { gap: 6px; padding-inline: 5px; font-size: 10px; }
  .bkk-mobile-menu__links a { font-size: 14px; }
}
@media (max-height: 520px) {
  .bkk-mobile-menu__topbar { min-height: 66px; padding-block: calc(7px + env(safe-area-inset-top)) 7px; }
  .bkk-mobile-menu__body { padding-top: 20px; }
  .bkk-mobile-menu__links a { min-height: 49px; padding-block: 10px; font-size: 14px; }
}
@media (max-width: 1199px) {
  .bkk-mobile-noscript { display: grid; gap: 8px; padding-block: 18px; border-bottom: 1px solid #1f2933; }
  .bkk-mobile-noscript > :is(a,button) { display: flex; align-items: center; min-height: 44px; font: 400 12px/1.6 'JetBrains Mono', monospace; text-transform: uppercase; text-align: start; }
}
@media (min-width: 1200px) { .bkk-mobile-menu { display: none !important; } }
@media (hover: hover) {
  .bkk-mobile-menu__links a:hover { color: #fff; background: #38bdf808; }
  .bkk-mobile-menu__close:hover { border-color: var(--menu-accent); color: #fff; }
  .bkk-mobile-menu__languages :is(a,button):hover { color: #fff; }
  .bkk-mobile-menu__languages :is(a,button):hover .bkk-mobile-menu__flag { background: #17242f; }
}
@keyframes bkk-menu-enter { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bkk-mobile-menu[open] { animation: none; } }
@media (forced-colors: active) {
  .bkk-mobile-menu { background: Canvas; color: CanvasText; }
  .bkk-mobile-menu :is(a,button) { color: LinkText; border-color: ButtonText; }
  .bkk-mobile-menu [aria-current] { outline: 1px solid Highlight; }
  .bkk-mobile-menu .bkk-square, .bkk-mobile-menu__links a[aria-current]::before { background: Highlight; }
  .bkk-mobile-menu .bkk-hero-grid::before { display: none; }
}