/* Site menu: the same top header as the home page (index.html), rebuilt without React.
   Shared by partswanted.html, privacy.html, disclosure.html and 404.html - the markup is built by /site-menu.js into <header id="sm"></header>.
   Everything is scoped under #sm and every class starts with sm- so none of the page's own classes (.btn, .lbl, .input, .pw...) are touched.
   z-index 50: above the page's sticky bits, below the photo viewer / request layers (1000). */
body > #sm { flex-shrink: 0; }   /* pages whose body is a flex column */
#sm { line-height: normal; }     /* pages with a taller body line-height (privacy.html) */
#sm *, #sm *::before, #sm *::after { box-sizing: border-box; }
#sm { --sm-text: #3b4144; --sm-muted: #6d7278; --sm-line: #e5e3e8; --sm-page: #eaf0f5; --sm-brand: #28a745; --sm-brand-dark: #218838; --sm-on-brand: #fff; --sm-brand-text: #1e7e34; --sm-brand-soft: #e9f7ec;
  position: sticky; top: 0; z-index: 50; color: var(--sm-text); background: #fff; border-bottom: 1px solid transparent; transition: border-color .15s, box-shadow .15s; will-change: transform; }
#sm.sm-scrolled { border-bottom-color: var(--sm-line); box-shadow: 0 1px 4px rgba(0,0,0,.06); }   /* line under the header once scrolled */
#sm a { color: inherit; }
#sm button { font: inherit; cursor: pointer; }
#sm :focus-visible { outline: 2px solid var(--sm-brand); outline-offset: 2px; }
#sm .sm-inner { display: flex; align-items: center; gap: 24px; max-width: 1400px; height: 72px; margin: 0 auto; padding: 0 16px; }
#sm .sm-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; color: var(--sm-text); }
#sm .sm-logo img { display: block; height: 36px; }
/* PartsOnline wordmark + tagline */
#sm .sm-brand { display: flex; flex-direction: column; line-height: 1; }
#sm .sm-word { font-size: clamp(22px, 10px + 1.3vw, 28px); font-weight: 500; letter-spacing: -.01em; }
#sm .sm-blue { color: #0367B2; }
#sm .sm-tag { margin-top: 4px; font-size: 11px; white-space: nowrap; color: var(--sm-muted); }
#sm .sm-est { color: #4081EC; }
@media (max-width: 1100px) { #sm .sm-tag { display: none; } }
@media (max-width: 900px) { #sm .sm-brand { display: none; } }

/* Search: grey filled pill, magnifier inside, recent searches dropdown */
#sm .sm-search { flex: 0 1 240px; min-width: 150px; position: relative; display: flex; align-items: center; margin: 0 0 0 -16px; }
#sm .sm-sicon { position: absolute; right: 14px; display: flex; color: #65676b; pointer-events: none; }
#sm .sm-input { flex: 1; min-width: 0; height: 40px; padding: 0 40px 0 16px; font: inherit; font-size: 15px; color: #050505; background: #f0f2f5; border: 0; border-radius: 5px; outline: none; transition: background .15s, box-shadow .15s; }
#sm .sm-input::placeholder { color: #65676b; }
#sm .sm-input:hover { background: #e4e6e9; }
#sm .sm-input:focus { background: #f0f2f5; box-shadow: 0 0 0 2px var(--sm-brand-soft), 0 0 0 3px var(--sm-brand); }
#sm .sm-input::-webkit-search-cancel-button { display: none; }
#sm .sm-suggest { position: absolute; top: 46px; left: -8px; width: 320px; max-width: calc(100vw - 16px); z-index: 20; padding: 8px; background: #fff; border-radius: 5px; box-shadow: 0 12px 28px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.1); }
#sm .sm-hd { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 8px; }
#sm .sm-hd strong { font-size: clamp(15px, 14px + .3vw, 17px); color: #050505; }
#sm .sm-hd button { padding: 4px 8px; font-size: 15px; color: var(--sm-brand-text); background: none; border: 0; border-radius: 4px; }
#sm .sm-hd button:hover { background: #f2f2f2; }
#sm .sm-suggest ul { margin: 0; padding: 0; list-style: none; }
#sm .sm-suggest li { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 4px; cursor: pointer; }
#sm .sm-suggest li:hover, #sm .sm-suggest li.sm-active { background: #f2f2f2; }
#sm .sm-suggest .sm-ico { color: #65676b; }
#sm .sm-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: #050505; }
#sm .sm-rm { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; color: #65676b; background: none; border: 0; border-radius: 50%; }
#sm .sm-rm:hover { background: #e4e6eb; }
#sm .sm-empty { padding: 8px; font-size: 15px; color: #65676b; }

/* Right side: Wrecking Now, Parts Requests, bell, login / account */
#sm .sm-actions { position: relative; display: flex; align-items: center; gap: 8px; margin-left: auto; }
#sm .sm-auth { display: contents; }   /* its buttons sit in the row as if they were direct children */
#sm .sm-bell { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; color: var(--sm-text); background: none; border: 0; border-radius: 50%; }
#sm .sm-bell:hover, #sm .sm-bell[aria-expanded="true"] { background: var(--sm-page); }
#sm .sm-login { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; font-weight: 500; white-space: nowrap; text-decoration: none; color: var(--sm-text); background: #fff; border: 1px solid var(--sm-text); border-radius: 5px; }
#sm .sm-login:hover { background: var(--sm-page); }
#sm .sm-join { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; font-weight: 500; white-space: nowrap; text-decoration: none; color: var(--sm-on-brand); background: var(--sm-brand); border: 1px solid var(--sm-brand); border-radius: 5px; }
#sm .sm-join:hover { background: var(--sm-brand-dark); border-color: var(--sm-brand-dark); }
#sm .sm-req { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 14px; margin-right: 4px; font-size: 15px; font-weight: 500; white-space: nowrap; color: var(--sm-text); background: none; border: 0; border-radius: 5px; }
#sm .sm-req:hover, #sm .sm-req[aria-expanded="true"] { background: var(--sm-page); }
#sm .sm-link { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; font-size: 15px; font-weight: 500; white-space: nowrap; text-decoration: none; color: var(--sm-text); border-radius: 5px; }
#sm .sm-link:hover { background: var(--sm-page); }
#sm .sm-ico-m { display: none; }
#sm .sm-chev-down { flex-shrink: 0; margin-top: 1px; transition: transform .15s; }
#sm .sm-req[aria-expanded="true"] .sm-chev-down { transform: rotate(180deg); }
@media (max-width: 900px) {   /* narrower screens: Wrecking Now and Parts Requests become icons */
  #sm .sm-link, #sm .sm-req { width: 40px; padding: 0; justify-content: center; margin-right: 0; }
  #sm .sm-lbl-long, #sm .sm-req .sm-chev-down { display: none; }
  #sm .sm-ico-m { display: block; }
}

/* Account button (photo, email + level, chevron) and the dropdowns */
#sm .sm-wrap { position: relative; }
#sm .sm-who { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 8px 4px 4px; text-align: left; color: var(--sm-text); background: none; border: 0; border-radius: 5px; }
#sm .sm-who:hover, #sm .sm-who[aria-expanded="true"] { background: var(--sm-page); }
#sm .sm-avatar { flex-shrink: 0; object-fit: cover; border: 1px solid var(--sm-line); border-radius: 50%; }
#sm .sm-avatar.sm-logo { object-fit: contain; border-radius: 5px; background: #fff; padding: 2px; }   /* your logo, whole */
#sm .sm-avatar.sm-none { display: flex; align-items: center; justify-content: center; color: var(--sm-muted); background: var(--sm-page); }
#sm .sm-lines { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
#sm .sm-who .sm-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
#sm .sm-level { font-size: 12px; color: var(--sm-muted); }
#sm .sm-chev { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; color: #050505; background: #e4e6eb; border-radius: 50%; transition: transform .15s; }
#sm .sm-who[aria-expanded="true"] .sm-chev { transform: rotate(180deg); }
#sm .sm-dd { position: absolute; top: 48px; right: 0; z-index: 30; width: 340px; max-width: calc(100vw - 16px); padding: 8px; background: #fff; border-radius: 5px; box-shadow: 0 12px 28px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.1); }
#sm .sm-profile { display: flex; align-items: center; gap: 12px; padding: 10px 8px; text-decoration: none; color: #050505; border-radius: 5px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
#sm .sm-profile:hover { background: #f2f2f2; }
#sm .sm-profile .sm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(15px, 14px + .3vw, 17px); font-weight: 600; }
#sm .sm-sep { height: 1px; margin: 8px; background: #ced0d4; }
#sm .sm-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; font-size: 15px; font-weight: 500; text-align: left; text-decoration: none; color: #050505; background: none; border: 0; border-radius: 5px; }
#sm .sm-item:hover { background: #f2f2f2; }
#sm .sm-ico { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; color: #050505; background: #e4e6eb; border-radius: 50%; }
#sm .sm-ico.sm-ico-brand { color: var(--sm-on-brand); background: var(--sm-brand); }
#sm .sm-req-menu { width: 300px; }
#sm .sm-req-menu .sm-lines { line-height: 1.3; }
#sm .sm-t { font-size: 15px; font-weight: 500; color: #050505; }
/* Notifications dropdown under the bell */
#sm .sm-panel { position: absolute; top: 48px; right: 0; z-index: 30; width: 300px; max-width: calc(100vw - 32px); padding: 16px; background: #fff; border: 1px solid var(--sm-line); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
#sm .sm-panel h2 { margin: 0 0 8px; font-size: clamp(15px, 14px + .25vw, 17px); font-weight: 700; }
#sm .sm-panel p { margin: 0; font-size: 14px; color: var(--sm-muted); line-height: 1.5; }
#sm .sm-panel a { color: var(--sm-brand-text); font-weight: 500; }

#sm .sm-search-toggle { display: none; }
/* Phones: search field hidden, magnifier beside the logo shows it full width underneath; account shows photo + chevron only */
@media (max-width: 640px) {
  #sm .sm-inner { flex-wrap: wrap; height: auto; gap: 12px; padding: 12px 16px; }
  #sm .sm-search { display: none; order: 3; flex: 1 1 100%; margin-left: 0; }
  #sm .sm-suggest { left: 0; width: 100%; }
  #sm .sm-search.sm-open { display: flex; }
  #sm .sm-search-toggle { display: flex; }
  #sm .sm-who .sm-lines { display: none; }
  #sm .sm-dd { position: fixed; top: 64px; right: 8px; }
}
@media (max-width: 480px) {   /* small phones: tighter so everything stays on one row; Login shrinks to its icon */
  #sm .sm-inner { gap: 8px; padding: 10px 12px; }
  #sm .sm-actions { gap: 4px; }
  #sm .sm-bell { width: 36px; height: 36px; }
  #sm .sm-req, #sm .sm-link { width: 36px; height: 36px; padding: 0; }
  #sm .sm-login { width: 40px; height: 36px; padding: 0; justify-content: center; }
  #sm .sm-login .sm-lbl { display: none; }
  #sm .sm-join { height: 36px; padding: 0 14px; gap: 6px; }
}
@media (max-width: 380px) { #sm .sm-join svg { display: none; } #sm .sm-join { padding: 0 12px; } #sm .sm-actions { gap: 2px; } }   /* very narrow phones: Join as text only */

/* "● 12 online" counter (online.js) - a pulsing green dot + the number; hidden until the first answer */
#sm .sm-online { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 15px; background: #e9f7ec; color: #1e7e34; font-size: 13px; font-weight: 600; white-space: nowrap; }
#sm .sm-online[hidden] { display: none; }
#sm .online-dot { width: 8px; height: 8px; border-radius: 50%; background: #28a745; box-shadow: 0 0 0 0 rgba(40,167,69,.6); animation: sm-online-pulse 2s ease-out infinite; }
@keyframes sm-online-pulse { 0% { box-shadow: 0 0 0 0 rgba(40,167,69,.6); } 70% { box-shadow: 0 0 0 7px rgba(40,167,69,0); } 100% { box-shadow: 0 0 0 0 rgba(40,167,69,0); } }
@media (prefers-reduced-motion: reduce) { #sm .online-dot { animation: none; } }
@media (max-width: 600px) { #sm .sm-online { padding: 0 8px; font-size: 12px; } }