/*
 * public-mobile-nav.css -- the compact bar of the customer-facing public pages.
 *
 * One bar for "/djs", "/dj/<slug>" and the four legal pages (/impressum, /datenschutz,
 * /nutzungsbedingungen, /avv), drawn like the start page (static/home.css: .site-header,
 * .brand, .menu-toggle, .mobile-menu, .mobile-link): 80px bar (+1px border), the logo mark
 * on the left with no wordmark, the menu button on the right, the menu below it with the
 * language switch as a full-width block and the links as 16px/500 rows. Before this file
 * every page had its own phone bar (T-20261026-03 B1/B3): the directory showed the wordmark
 * and a centred menu, the profile a DJ mark and a column of buttons, the legal pages a
 * wrapping row of links.
 *
 * WHERE THE BAR SHOWS IS THE PAGE'S DECISION, made in its <link> (the `media` attribute), not in
 * this file -- there is no outer @media here, so one set of rules serves both cases:
 *   "/djs" and "/dj/<slug>"   media="(max-width: 900px) and (scripting: enabled)"
 *       up to 900px, where the start page switches to its own menu button (home.css), and the
 *       page's wide bar above that (T-20261028-02, Timon: was 640px before);
 *   the four legal pages      media="(scripting: enabled)"
 *       at every width: Timon wants Impressum and Datenschutz with this bar on the desktop too,
 *       and Nutzungsbedingungen and AVV, the same page skeleton, follow so the four stay one group.
 * The start page keeps its own bar (home.css) -- it is the model.
 *
 * Markup contract (see templates/directory.html for the full example):
 *   <header class="cm-bar">
 *     <div class="cm-row"> a.cm-brand > img + span.cm-brand-name  [div.cm-actions > a.cm-cta]  button.cm-toggle </div>
 *     <div class="cm-menu"> <nav class="cm-menu-inner"> a.cm-link ... [div.cm-menu-actions] </nav> </div>
 *   </header>
 * and the page's own wide bar carries `cm-wide`. static/public-mobile-nav.js opens and closes
 * the menu and mounts the language switch into .cm-menu-inner (as a block) and into the row (div.cm-lang,
 * shown only from 621px to 900px together with span.cm-brand-name, see below).
 *
 * `(scripting: enabled)` is part of every page's media on purpose: the menu button needs the
 * script, so without one the page keeps its wide bar (links that work) instead of a bar whose
 * button does nothing. A browser that does not know the feature (before 2023) does not match
 * the media either and keeps the wide bar, which is the old behaviour.
 *
 * The pages hide `.cm-bar` themselves in an inline rule that stands BEFORE the <link> to this
 * file (same specificity, later wins): a harness or a failed download that lacks this file
 * shows the old bar, never a half-styled second one.
 */
.cm-wide { display: none !important; }

.cm-bar {
  display: block;
  position: sticky; top: 0; z-index: 100;
  padding-top: env(safe-area-inset-top);
  background: rgba(7, 7, 11, 0.86);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #f7f7fb;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: normal;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
/* Like home.css body.menu-open: header + open menu are capped at the viewport and the menu
   scrolls itself, so the last link stays reachable in a low (landscape) window. */
body.cm-menu-open { overflow: hidden; }
body.cm-menu-open .cm-bar {
  display: flex; flex-direction: column;
  max-height: 100vh; max-height: 100dvh;
}
body.cm-menu-open .cm-row { flex: none; }

/* width: 100% -- with the menu open the bar is a flex column, where `margin: 0 auto` alone would
   shrink the row to its content and centre the logo and the button. */
.cm-row {
  display: flex; align-items: center; gap: 18px;
  width: 100%; min-height: 80px;
  max-width: 1200px; margin: 0 auto; padding: 0 16px;
}
.cm-brand {
  display: flex; flex: 0 1 auto; align-items: center;
  color: inherit; text-decoration: none;
}
/* 36px mark without rounding; the WebP is transparent, so the tile colour is painted behind it. */
.cm-brand img { display: block; width: 36px; height: 36px; background: #1b1b21; }
.cm-brand:focus-visible, .cm-link:focus-visible, .cm-cta:focus-visible {
  outline: 2px solid #f7f7fb; outline-offset: 2px;
}

.cm-actions { display: flex; flex: none; align-items: center; gap: 10px; margin-left: auto; }
/* The accent of the action is a page's decision: the DJ profile paints its DJ's accent fill
   (--cm-cta-bg / -fg / -border), every other page the Crewmate accent. */
.cm-cta, .cm-menu-cta {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cm-cta-border, transparent); border-radius: 12px;
  background: var(--cm-cta-bg, #8B1538); color: var(--cm-cta-fg, #fff);
  font-family: inherit; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.cm-cta { min-height: 42px; padding: 9px 14px; font-size: 14px; }

.cm-toggle {
  display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 44px; height: 44px; margin-left: auto; padding: 0;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px;
  cursor: pointer;
}
.cm-actions + .cm-toggle { margin-left: 0; }
.cm-toggle span {
  display: block; width: 17px; height: 2px;
  background: #f7f7fb; border-radius: 2px;
  transition: transform .22s ease, opacity .22s ease;
}
.cm-toggle.is-open span:first-child { transform: translateY(3.5px) rotate(45deg); }
.cm-toggle.is-open span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.cm-toggle:focus-visible { outline: 2px solid #f7f7fb; outline-offset: 2px; }

.cm-menu {
  display: none;
  margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: #07070b;
}
.cm-menu.is-open {
  display: block;
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
/* Legal pages style the bare `nav` element (flex, gap, margin-bottom): every property that
   would leak into the menu is set here again. */
.cm-menu-inner {
  display: flex; flex-direction: column; flex-wrap: nowrap; gap: 4px;
  max-width: 1200px; margin: 0 auto; padding: 12px 16px 18px;
}
.cm-link {
  display: flex; align-items: center;
  min-height: 48px; padding: 13px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #f7f7fb; font-size: 16px; font-weight: 500; text-decoration: none;
}
.cm-link--quiet { border-bottom: none; color: #8f8a9b; font-size: 15px; }
.cm-menu-actions { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.cm-menu-cta { width: 100%; min-height: 48px; padding: 12px 22px; font-size: 15px; }

/* A page whose content has its own large top padding (the legal pages: 56px above the link
   row they no longer show) marks the element after the bar with this class. */
.cm-bar + .cm-below-bar { padding-top: 24px; }

/* Embedded legal text (?embed=1, the in-app modals) has no page bar. */
html[data-legal-embed="true"] .cm-bar { display: none; }

/* Above 620px the start page widens its shell padding from 16px to 22px (home.css .shell and
   .mobile-menu-inner); the logo and the menu button keep sitting where they sit there. */
@media (min-width: 621px) {
  .cm-row { padding: 0 22px; }
  .cm-menu-inner { padding: 14px 22px 20px; }
}

/* T-20261029-03 (Timon): between 621 and 900px the bar also shows the wordmark and the language switch, as the
   start page does there (home.css: .brand-copy is shown above 620px, the switch above 420px, the menu button from
   900px down). The page's own action stays the page's: "DJ finden" belongs to the start page only. Below 621px (and
   on the desktop widths of the legal pages) the logo stays alone and the switch lives in the open menu. The switch
   itself is mounted by public-mobile-nav.js into .cm-lang; both are hidden unless this band is on. */
.cm-brand-name, .cm-lang { display: none; }
.cm-brand img, .cm-brand-name { flex: none; }
@media (min-width: 621px) and (max-width: 900px) {
  .cm-brand { gap: 10px; }
  .cm-brand-name {
    display: block; color: #f7f7fb; white-space: nowrap;
    font-size: 17px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2;
  }
  /* The group on the right starts here: switch, [action], menu button -- the 10px between switch and action are
     the start page's (18px row gap minus 8px). */
  .cm-lang { display: flex; flex: none; align-items: center; margin-left: auto; }
  .cm-lang + .cm-actions { margin-left: -8px; }
  .cm-lang + .cm-toggle { margin-left: 0; }
}

/* On a wide window (only the legal pages show the bar there) the open menu is a column under the
   button, not a strip of 1150px: the language block and the rows keep a readable width. */
@media (min-width: 901px) {
  .cm-menu-inner { align-items: flex-end; }
  .cm-menu .cm-menu-inner > * { width: min(100%, 420px); }
}

/* The narrowest bar, like home.css at 380px: less gap and a smaller action. */
@media (max-width: 380px) {
  .cm-row { gap: 10px; }
  .cm-cta { padding: 9px 12px; font-size: 13px; }
}