/* =====================================================================
   Rob Reliability site navigation - extracted for the embedded
   AI Readiness Score tool. Only .nav* / .mobile-menu* selectors, so it
   never collides with the tool's own stylesheet. Kept in sync by hand
   with rob-reliability-clone/assets/styles.css (nav section).
   ===================================================================== */
:root {
  --rr-cyan-shade: #00B8D6;
  --bg-main: #F5F8FB;
  --white: #FFFFFF;
  --grey-border: #E5EBF2;
  --text-primary: #0A1220;
  --text-secondary: #1A2438;
  --text-muted: #6B8DB5;
  --shadow-xl: 0 24px 60px rgba(10, 18, 32, 0.12), 0 12px 20px rgba(10, 18, 32, 0.06);
}

/* Reset carried over from the site's global stylesheet (assets/styles.css)
   so the extracted nav renders exactly like every other page: no native
   button border (the "boxes") and no native link underline. Scoped to the
   nav / mobile menu so it never touches the tool's own UI. */
.nav a, .mobile-menu a { color: inherit; text-decoration: none; }
.nav button, .mobile-menu button { font-family: inherit; cursor: pointer; border: 0; background: none; }

.nav .container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .nav .container { padding: 0 20px; } }

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 249, 252, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--grey-border);
  transition: border-color .2s ease, background .2s ease;
}
.nav.scrolled { border-bottom-color: var(--grey-border); background: rgba(255,255,255,0.9); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo img { height: 44px; width: auto; }
.nav-links { display: flex; gap: 4px; align-items: center; }
.nav-links a {
  padding: 8px 14px; font-size: 14px; font-weight: 500; color: var(--text-secondary);
  border-radius: 8px; transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--text-primary); background: rgba(31,42,68,0.04); }
.nav-links a.active { color: var(--text-primary); }
.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-right .btn svg { width: 17px; height: 17px; }
#topbar-right { display: flex; align-items: center; gap: 10px; }
@media (max-width: 880px) { .nav-links { display: none; } }

/* dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  font-size: 14px; font-weight: 500; color: var(--text-secondary);
  border-radius: 8px; cursor: pointer; background: none; transition: color .2s, background .2s;
}
.nav-dropdown-toggle:hover { color: var(--text-primary); background: rgba(31,42,68,0.04); }
.nav-dropdown-toggle.active { color: var(--rr-cyan-shade); }
.nav-dropdown-toggle .nav-caret { width: 10px; height: 10px; transition: transform .2s; }
.nav-dropdown:hover .nav-caret, .nav-dropdown.open .nav-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px;
  background: white; border: 1px solid var(--grey-border); border-radius: 14px;
  box-shadow: var(--shadow-xl); padding: 8px;
  opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease; z-index: 60;
}
.nav-dropdown-menu::before { content: ''; position: absolute; bottom: 100%; left: 0; right: 0; height: 10px; }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.nav-dropdown-menu a {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px; color: var(--text-primary); transition: background .15s;
}
.nav-dropdown-menu a:hover { background: var(--bg-main); }
.nav-dropdown-menu a strong { font-size: 14px; font-weight: 600; }
.nav-dropdown-menu a .nav-ico { width: 17px; height: 17px; flex-shrink: 0; color: #00B8D6; }
.nav-dropdown-menu a:hover .nav-ico { color: #0A1220; }
.nav-dropdown-menu a.active strong { color: var(--rr-cyan-shade); }

/* mobile */
.nav-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px; border-radius: 10px; background: transparent;
  cursor: pointer; border: 0; transition: background .2s;
}
.nav-burger:hover { background: rgba(31,42,68,0.05); }
.nav-burger span { display: block; height: 2px; width: 100%; background: var(--text-primary); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu-backdrop {
  position: fixed; inset: 0; background: rgba(10,18,32,0.45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 40;
}
.mobile-menu-backdrop.open { opacity: 1; pointer-events: auto; }
.mobile-menu {
  position: fixed; top: 0; right: 0; width: min(360px, 86vw); height: 100dvh; height: 100vh;
  background: var(--white, #fff); border-left: 1px solid var(--grey-border); box-shadow: var(--shadow-xl);
  padding: 88px 18px 32px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateX(110%); transition: transform .3s cubic-bezier(.2,.7,.2,1); z-index: 45;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-links { display: flex; flex-direction: column; gap: 2px; }
.mobile-menu-links > a { display: block; font-size: 16px; font-weight: 500; color: var(--text-primary); padding: 13px 12px; border-radius: 10px; }
.mobile-menu-links > a:hover { background: var(--bg-main); }
.mobile-menu .nav-dropdown { position: static; }
.mobile-menu .nav-dropdown-toggle {
  width: 100%; justify-content: flex-start; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted);
  padding: 16px 12px 4px; pointer-events: none;
}
.mobile-menu .nav-dropdown-toggle .nav-caret { display: none; }
.mobile-menu .nav-dropdown-menu {
  position: static; opacity: 1; pointer-events: auto; transform: none;
  min-width: 0; border: 0; box-shadow: none; padding: 0 0 6px; background: transparent;
}
.mobile-menu .nav-dropdown-menu::before { display: none; }
.mobile-menu .nav-dropdown-menu a { font-size: 16px; padding: 12px; border-radius: 10px; }
.mobile-menu .mobile-menu-cta { display: flex; margin-top: 22px; width: 100%; justify-content: center; }
@media (max-width: 880px) { .nav-burger { display: flex; } }
@media (min-width: 881px) { .mobile-menu, .mobile-menu-backdrop { display: none !important; } }

/* keep the tool's lead-capture modal above the sticky nav */
.modal-overlay { z-index: 300; }