/* Bamya Vids: the bar along the top, drawn as the Bamya application's navbar in its midnight theme
   (owner, 2026-10-26: "Make menu above - the same as the platform as style with b videos as logo,
   Videos as first button, Platform as second the rest are the same as crm.bamya.co"). Loaded by every
   page of the site after panel.css (and sales.css on the pages crm.bamya.co draws), so the shared
   header in panel_base.html stays as it is for every other site.

   The values are the app's (outreach_crm static/css/variables.css, [data-theme="midnight"]; outreach.css
   .crm-navbar .nav-btn): the bar is chrome-700 with the nav line under it, each destination a button
   with its icon, the page you are on a solid pill. The buttons sit next to the mark, as in the app,
   rather than in the middle of the bar. */

.top {
  --nav-bar: #151b1e;
  --nav-line: #1e2529;
  --nav-ink: #eef2f3;
  --nav-current: #26302f;
  gap: 16px;
  padding: 10px 24px;
  background: var(--nav-bar);
  border-bottom-color: var(--nav-line);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* The bar keeps its height when the page scrolls, as the app's does. */
.top.scrolled {
  padding-top: 10px;
  padding-bottom: 10px;
  background: var(--nav-bar);
}

.top .mark { font-size: 1.6rem; }

.top-nav {
  gap: 4px;
  margin-inline: 12px auto;
  font: 600 15px/1 var(--sans);
  letter-spacing: normal;
  text-transform: none;
}
.top-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--nav-ink);
  transition: background-color 0.2s ease;
}
.top-nav a:hover,
.top-nav a:focus-visible {
  color: var(--nav-ink);
  background: rgba(238, 242, 243, 0.06);
}
.top-nav a:focus-visible { outline: 2px solid var(--you); outline-offset: 1px; }
.top-nav a[aria-current="page"] {
  background: var(--nav-current);
  font-weight: 700;
}

/* Each destination's icon, drawn in the link's own colour through a mask: this site loads no icon
   font. Matched on the address, which the site config sets. */
.top-nav a::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.top-nav a[href="/"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='3'/%3E%3Cpath d='M10 9.2v5.6l4.8-2.8z' fill='black'/%3E%3C/svg%3E");
}
.top-nav a[href="/platform"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='1.6'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='1.6'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='1.6'/%3E%3Crect x='13.5' y='13.5' width='7.5' height='7.5' rx='1.6'/%3E%3C/svg%3E");
}
.top-nav a[href="/pricing"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 4.5v7.2l9.3 9.3 8.7-8.7L11.7 3H4.5A1.5 1.5 0 0 0 3 4.5z'/%3E%3Ccircle cx='7.8' cy='7.8' r='1.4' fill='black'/%3E%3C/svg%3E");
}
.top-nav a[href="/demos"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.6v6.8l5.6-3.4z' fill='black'/%3E%3C/svg%3E");
}
.top-nav a[href="/blog"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h12.5v16H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M16.5 8.5H20V18a2 2 0 0 1-2 2'/%3E%3Cpath d='M7.5 8.5h5.5M7.5 12h5.5M7.5 15.5h3.5'/%3E%3C/svg%3E");
}

/* Sign up: the app's outlined header button, not the landing's round mono one. */
.top .cta.ghost {
  padding: 8px 14px;
  border: 1px solid rgba(238, 242, 243, 0.7);
  border-radius: 8px;
  color: var(--nav-ink);
  font: 600 14px/1 var(--sans);
  letter-spacing: normal;
  text-transform: none;
}
.top .cta.ghost:hover,
.top .cta.ghost:focus-visible {
  border-color: var(--nav-ink);
  background: rgba(238, 242, 243, 0.06);
}

/* A phone: panel.css puts the buttons on a row of their own under the mark. Five buttons with their
   icons do not fit 390px, so there the icons go and the names stay. */
@media (max-width: 720px) {
  .top { padding: 8px 16px; }
  .top.scrolled { padding-top: 8px; padding-bottom: 8px; }
  .top .mark { font-size: 1.45rem; }
  .top-nav {
    gap: 2px;
    margin-inline: 0;
    font-size: 14px;
  }
  .top-nav a { padding: 7px 9px; }
}
@media (max-width: 520px) {
  .top-nav a::before { display: none; }
}