/* ===================================================================
   ribbon.css — single source of truth for the top ribbon used on
   respanion.com (index, research, blog, products).

   Every page links this file with <link rel="stylesheet" href="/ribbon.css">.
   The previous setup had each page copying its own ribbon CSS, which
   drifted over time and made the ribbon visibly "blink" (shift, restyle)
   when navigating between pages. This file fixes that — load it once,
   render the same ribbon everywhere.

   What's in here (and nothing else):
     - .mobile-header (the ribbon container) + responsive breakpoints
     - .mobile-header-brand / -logo / -name (logo + wordmark on the left)
     - .ribbon-nav + .topnav-link (nav links right-aligned)
     - .topnav-dropdown* (the Products dropdown menu)
     - .nav-toggle + .nav-drawer + .nav-backdrop (mobile hamburger)
     - .account + .avatar + .account-menu (login circle + dropdown)

   Anything else (page background, page-specific layout, footers) stays
   in the page's own <style> block.

   Color tokens used:
     --fg       page foreground   (every page already defines this)
     --muted    muted text         (every page already defines this)
     --accent   accent color      (every page already defines this)
   =================================================================== */


/* ---- finger cursor on everything clickable ---- */
button, a, .avatar, [onclick], input[type="submit"] { cursor: pointer; }

/* ---- top ribbon container ---- */
.mobile-header {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  padding: 0 32px;
  background: #0c0c0e;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  align-items: center;
  gap: 16px;
  z-index: 44;
}
.mobile-header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  padding: 4px 8px;
  margin-left: -8px;
  border-radius: 8px;
}
.mobile-header-brand:hover { background: rgba(255, 255, 255, 0.04); }
.mobile-header-logo {
  width: 36px;
  height: 36px;
  flex: none;
  object-fit: contain;
}
.mobile-header-name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ---- nav links on the right of the ribbon ---- */
.ribbon-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.ribbon-nav .topnav-link {
  color: var(--fg);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 6px;
  opacity: 0.92;
}
.ribbon-nav .topnav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  opacity: 1;
}

/* Hide the legacy floating .topnav (its links now live in .ribbon-nav). */
.topnav { display: none !important; }

/* Bare .topnav-link styling, used by the dropdown trigger. */
.topnav-link {
  color: var(--fg);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  opacity: 0.85;
  transition: background 0.16s ease, opacity 0.16s ease;
}
.topnav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  opacity: 1;
}

/* ---- Products dropdown ---- */
.topnav-dropdown { position: relative; }
/* Invisible bridge below the trigger so the hover doesn't drop while the
   mouse travels down to the dropdown menu. */
.topnav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px;
}
.topnav-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  background: #131316;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  display: none;
  z-index: 50;
}
.topnav-dropdown:hover .topnav-dropdown-menu,
.topnav-dropdown:focus-within .topnav-dropdown-menu {
  display: block;
}
.topnav-dropdown-link {
  display: block;
  padding: 9px 12px;
  color: var(--fg);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  opacity: 0.92;
}
.topnav-dropdown-link:hover {
  background: rgba(255, 255, 255, 0.08);
  opacity: 1;
}

/* ---- account avatar + menu ---- */
.account {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin: 0 0 0 6px;
  padding: 0;
  z-index: 50;
  line-height: 1;
  vertical-align: middle;
}
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #0a0a0c;
  font-weight: 700;
  font-size: 16px;
  border: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  vertical-align: middle;
  user-select: none;
  transition: transform 0.12s ease, opacity 0.18s ease;
}
.avatar:hover { opacity: 0.9; }
.avatar:active { transform: scale(0.95); }
.account-menu {
  position: absolute;
  top: 52px;
  right: 0;
  background: #1c1c20;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  min-width: 280px;
  max-width: 90vw;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.account-menu .menu-email {
  font-size: 13px;
  color: var(--muted);
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-menu button {
  width: 100%;
  background: transparent;
  color: var(--fg);
  border: none;
  text-align: left;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 6px;
}
.account-menu button:hover { background: rgba(255, 255, 255, 0.08); }

/* ---- mobile hamburger + slide-in drawer ---- */
.nav-toggle {
  display: none;
  position: fixed;
  top: 18px;
  right: 70px;
  z-index: 45;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--fg);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.14); }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 260px;
  max-width: 80vw;
  height: 100vh;
  background: #131316;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.5);
  z-index: 60;
  transform: translateX(100%);
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
  padding: 70px 18px 24px;
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer .nav-drawer-link {
  color: var(--fg);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 14px;
  border-radius: 10px;
  opacity: 0.92;
}
.nav-drawer .nav-drawer-link:hover,
.nav-drawer .nav-drawer-link:active {
  background: rgba(255, 255, 255, 0.08);
}
.nav-drawer .nav-drawer-sublink {
  padding-left: 28px;
  padding-top: 6px;
  padding-bottom: 6px;
  margin-top: -10px;
  font-size: 14px;
  opacity: 0.7;
}
.nav-drawer-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  cursor: pointer;
  border-radius: 8px;
}
.nav-drawer-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--fg); }
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 55;
}
.nav-backdrop.open { display: block; }

/* ---- Responsive: phone & iPad ---- */
@media (max-width: 1024px) {
  body { padding-top: 60px; }
  .mobile-header { display: flex; height: 60px; padding: 0 16px; padding-right: 64px; }
  .mobile-header-logo { width: 30px; height: 30px; }
  .mobile-header-name { font-size: 19px; }
  /* On phone/iPad the nav links live in the hamburger drawer. */
  .ribbon-nav { display: none; }
  .nav-toggle {
    display: inline-flex;
    top: 11px;
    right: 12px;
    z-index: 47;
  }
  .avatar { width: 38px !important; height: 38px !important; font-size: 15px !important; }
  /* Push the avatar to the right of the ribbon, just left of the
     absolutely-positioned hamburger. */
  .account { margin-left: auto !important; margin-right: 14px !important; }
}
/* iPad / tablet: same ribbon as phone but with larger logo + name. */
@media (min-width: 721px) and (max-width: 1024px) {
  body { padding-top: 72px; }
  .mobile-header { height: 72px; padding: 0 24px; padding-right: 74px; }
  .mobile-header-logo { width: 38px; height: 38px; }
  .mobile-header-name { font-size: 24px; }
  .nav-toggle { top: 17px !important; right: 16px !important; width: 42px; height: 42px; }
  .nav-toggle svg { width: 22px; height: 22px; }
  .avatar { width: 42px !important; height: 42px !important; font-size: 16px !important; }
}