/* Shared header layout for every page with the standard header.
   Loaded after each page's own <style>, so these rules win.
   - The header row spans the full window: nav on the left edge, account
     buttons on the right edge.
   - The Chats dropdown (Jobs / Mateys / AI Agents) replaces the old
     separate Jobs and Mateys buttons; header.js opens and closes it. */
header .wrap.header-row{
  max-width:none;
  width:100%;
  box-sizing:border-box;
  padding:0 32px;
}
@media(max-width:640px){
  header .wrap.header-row{padding:0 20px;}
}

.chats-wrap{position:relative;}
.chats-wrap .caret{font-size:10px; margin-left:2px;}
.chats-btn{display:inline-flex; align-items:center; gap:6px;}
.chats-btn.active{background:var(--ink, #1E2A28); color:#FFFFFF;}
.chats-dot{
  display:none;
  min-width:8px; height:8px;
  border-radius:50%;
  background:var(--mango, #F2792E);
}
.chats-dot.show{display:inline-block;}
.chats-dropdown{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:250px;
  background:var(--card, #FBF7EE);
  border-radius:16px;
  box-shadow:0 12px 32px rgba(30,42,40,0.18), 0 2px 8px rgba(30,42,40,0.08);
  padding:8px;
  z-index:60;
}
.chats-dropdown.open{display:block;}
.auth-logged-in .chats-dropdown a,
.chats-dropdown a{
  display:flex !important;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  color:var(--ink, #1E2A28);
  font-size:14px;
  font-weight:600;
  transition:background .12s ease;
}
.chats-dropdown a[style*="display:none"],
.chats-dropdown a[style*="display: none"]{display:none !important;}
.chats-dropdown a:hover{background:var(--paper-2, #EFE9D9); color:var(--ink, #1E2A28);}
.chats-dropdown a.active{background:var(--paper-2, #EFE9D9);}
.chats-dropdown .chats-icon{
  flex:none;
  width:34px; height:34px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink, #1E2A28);
  color:var(--mango, #F2792E);
}
.chats-dropdown .chats-icon svg{width:17px; height:17px;}
.chats-dropdown small{
  display:block;
  font-weight:500;
  font-size:12px;
  color:var(--ink-soft, #3F4E4A);
  margin-top:1px;
}

/* Header buttons never wrap their text or drop onto a second line; when
   the row is too narrow, mobile.js switches to the compact menu. */
header .wrap.header-row{flex-wrap:nowrap !important;}
header .header-row .btn,
header .header-row .hi-text,
header .header-row .logo{white-space:nowrap; flex-shrink:0;}
header .header-row .nav-cta,
header .header-row .auth-logged-in,
header .header-row .auth-logged-out{flex-wrap:nowrap; flex-shrink:0;}
header .header-row .auth-logged-out a,
header .header-row .auth-logged-in > a{white-space:nowrap; flex-shrink:0;}