/* Matey's shared stylesheet: colour names, page basics and the pieces every
   page used to paste in its own copy of (header auth area and profile menu,
   categories dropdown, buttons, kicker, "you aren't logged in" modal, footer).

   Each page links this just before its own <style>, so a page can still
   override any rule here. Dark mode lives in theme.js, which gives the colour
   names below their dark values. header.css (the full-width header and the
   Chats menu) loads after the page's own styles.

   Keep the original orange #F2792E (Bayley's choice); --mango-fill is the
   button fill, kept as its own name so a darker shade could be swapped in. */

/* ---------- Colour names (theme.js gives dark-mode values) ---------- */
:root{
  --paper:#F5F1E6;
  --paper-2:#EFE9D9;
  --ink:#1E2A28;
  --ink-soft:#3F4E4A;
  --river:#202225;
  --river-dark:#101113;
  --mango:#F2792E;
  --mango-fill:#F2792E;
  --brick:#C1631F;
  --line:#D8CFB8;
  --card:#FBF8F0;
  /* Status colours: text on its matching -bg tint */
  --good:#2F6E32;
  --good-bg:#E1F2E2;
  --good-strong:#3F9142;
  --bad:#8A2020;
  --bad-bg:#FDE8E8;
  --alert:#E5484D;
  --warn:#8A5A0B;
  --warn-bg:#FDF1DC;
  --warm-bg:#FBE3D2;
  --info:#1D4F7A;
  --info-bg:#E3EEF7;
}
/* ---------- Page basics ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.5;
}
h1,h2,h3{
  font-family:'Inter',sans-serif;
  font-weight:800;
  margin:0;
  letter-spacing:-0.02em;
}
/* Headings use Bricolage Grotesque (design review decision); body text stays Inter */
html :is(h1,h2,h3){font-family:'Bricolage Grotesque','Inter',sans-serif;}
a{color:inherit;}
.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:0 32px;
}
header .wrap.header-row{
  max-width:none;
  width:100%;
}
@media(max-width:640px){
  .wrap{padding:0 20px;}
}

/* ---------- Header ---------- */
header{
  padding:22px 0 16px;
  border-bottom:1px solid var(--line);
}
header .wrap.header-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:24px;
}
.logo{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-family:'Inter',sans-serif;
  font-size:22px;
  font-weight:800;
  letter-spacing:-0.02em;
}
.logo .dot{color:var(--mango);}
.nav-cta{
  display:flex;
  gap:12px;
  align-items:center;
}
.header-row .btn-ghost:hover{
  background:var(--mango-fill, #F2792E);
  color:#FFFFFF;
}
.auth-area{margin-left:auto;}
.auth-logged-out{
  display:flex;
  align-items:center;
  gap:18px;
  font-size:14px;
  font-weight:600;
}
.auth-logged-out a{
  color:var(--ink);
  text-decoration:none;
  transition:color .12s ease;
}
.auth-logged-out a:hover{color:var(--mango);}
.auth-logged-out a.btn-primary,
.auth-logged-out a.btn-primary:hover{color:#FFFFFF;}

.auth-logged-in{
  display:flex;
  align-items:center;
  gap:18px;
  font-size:14px;
  font-weight:600;
}
.auth-logged-in > a{
  color:var(--ink);
  text-decoration:none;
  transition:color .12s ease;
}
.auth-logged-in > a:hover{color:var(--mango);}
.auth-logged-in > a.btn-primary,
.auth-logged-in > a.btn-primary:hover{color:#FFFFFF;}
.hi-text{color:var(--ink);}
.avatar-img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}

.profile-wrap{position:relative;}
.profile-icon-btn{
  width:34px; height:34px;
  border-radius:50%;
  background:var(--river);
  color:#FFFFFF;
  border:none;
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.profile-dropdown{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:220px;
  background:var(--card);
  border-radius:16px;
  box-shadow:0 12px 32px rgba(30,42,40,0.18), 0 2px 8px rgba(30,42,40,0.08);
  padding:16px;
  z-index:50;
}
.profile-dropdown.open{display:block;}
.profile-dropdown-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:12px;
  margin-bottom:8px;
  border-bottom:1px solid var(--line);
}
.profile-avatar-lg{
  width:36px; height:36px;
  border-radius:50%;
  background:var(--river);
  color:#FFFFFF;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:14px;
  flex-shrink:0;
}
.profile-dropdown-name{font-weight:700; font-size:14.5px;}
.profile-menu-item{
  display:block;
  width:100%;
  text-align:left;
  padding:9px 6px;
  border-radius:8px;
  font-size:14px;
  color:var(--ink);
  text-decoration:none;
  background:none;
  border:none;
  font-family:'Inter',sans-serif;
  cursor:pointer;
}
.profile-menu-item:hover{background:var(--paper-2);}
.profile-logout{color:var(--brick);}

@media(max-width:640px){
  header .wrap.header-row{flex-wrap:wrap;}
  .auth-area{margin-left:0;}
}

/* ---------- "You aren't logged in" modal ---------- */
.auth-modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(16,17,19,0.45);
  backdrop-filter:blur(6px);
  align-items:center;
  justify-content:center;
  z-index:200;
}
.auth-modal-overlay.open{display:flex;}
.auth-modal-box{
  position:relative;
  background:var(--card);
  border-radius:20px;
  padding:32px 32px 28px;
  max-width:380px;
  width:90%;
  box-shadow:0 24px 60px rgba(16,17,19,0.35);
  text-align:center;
}
.auth-modal-close{
  position:absolute;
  top:14px; right:14px;
  background:none;
  border:none;
  font-size:20px;
  line-height:1;
  color:var(--ink-soft);
  cursor:pointer;
}
.auth-modal-close:hover{color:var(--ink);}
.auth-modal-box h3{font-size:22px;}
.auth-modal-box p{margin-top:10px; color:var(--ink-soft); font-size:15px;}
.auth-modal-actions{
  margin-top:24px;
  display:flex;
  gap:12px;
  justify-content:center;
}

/* ---------- Categories dropdown in the header ---------- */
.category-wrap{position:relative;}
#categoryBtn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'Inter',sans-serif;
}
.caret{font-size:11px;position:relative;top:1px;}
.category-dropdown{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%);
  background:var(--card);
  border:none;
  border-radius:16px;
  box-shadow:0 12px 32px rgba(30,42,40,0.18), 0 2px 8px rgba(30,42,40,0.08);
  padding:22px 24px;
  z-index:50;
  gap:24px;
}
.category-dropdown.open{display:flex;}
.category-col{min-width:220px;}
.category-col-title{
  font-weight:700;
  font-size:13px;
  color:var(--brick);
  margin-bottom:10px;
  white-space:nowrap;
}
.category-divider{
  width:1px;
  background:var(--line);
  align-self:stretch;
}
.category-list{
  list-style:none;
  margin:0;
  padding:0;
}
.category-list.scrollable{
  max-height:440px;
  overflow-y:auto;
  padding-right:10px;
}
.category-list.scrollable::-webkit-scrollbar{width:6px;}
.category-list.scrollable::-webkit-scrollbar-thumb{
  background:var(--line);
  border-radius:6px;
}
.category-list li{
  font-size:14px;
  color:var(--ink-soft);
  padding:6px 0;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.category-list li:last-child{border-bottom:none;}
.category-list li:hover{color:var(--ink);}
.category-list li a{
  text-decoration:none;
  color:inherit;
  display:block;
}
@media(max-width:640px){
  .category-dropdown{
    left:50%;
    transform:translateX(-50%);
    flex-direction:column;
    max-width:calc(100vw - 40px);
    overflow-x:auto;
  }
  .category-list li{white-space:normal;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  padding:11px 20px;
  border-radius:14px;
  font-weight:600;
  font-size:15px;
  text-decoration:none;
  cursor:pointer;
  border:none;
  box-shadow:0 8px 20px rgba(28,31,34,0.15), 0 2px 6px rgba(28,31,34,0.08);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(28,31,34,0.2), 0 2px 6px rgba(28,31,34,0.1);
}
.btn-primary{
  background:var(--mango-fill, #F2792E);
  color:#FFFFFF;
}
.btn-ghost{
  background:var(--card);
  color:var(--ink);
}
.btn-ghost:hover{background:var(--card);color:var(--ink);}
.btn-small{padding:8px 14px;font-size:14px;}

/* Small orange label above a heading */
.kicker{
  font-family:'Inter',sans-serif;
  font-size:14px;
  font-weight:700;
  color:var(--brick);
  display:inline-block;
  margin-bottom:8px;
}

/* ---------- Footer ---------- */
footer.site-footer{
  padding:36px 0 48px;
  font-size:14px;
  color:var(--ink-soft);
}
footer.site-footer .wrap{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  border-top:1px solid var(--line);
  padding-top:24px;
}
footer.site-footer a{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--line);
  text-underline-offset:2px;
}
footer.site-footer a:hover{color:var(--mango); text-decoration-color:var(--mango);}

/* ---------- Forms ---------- */
.field-label{display:block; font-weight:600; font-size:14px; margin-bottom:8px;}
.field-input{width:100%; padding:14px 16px; border-radius:12px; border:1px solid var(--line); background:var(--card); font-family:'Inter',sans-serif; font-size:15px;}
.resize-y{resize:vertical;}
.form-error{color:var(--brick); font-size:13.5px; font-weight:600;}
/* "or" line between the Google button and the email form */
.or-divider{display:flex; align-items:center; gap:12px; color:var(--ink-soft); font-size:13px;}
.or-line{flex:1; height:1px; background:var(--line);}

/* ---------- Shared bits ---------- */
a.logo{text-decoration:none;}
.link-strong{color:var(--river-dark); font-weight:600;}
.inline{display:inline;}
/* Review stars */
.star-on{color:var(--mango);}
.star-off{color:var(--line);}
.info-box{padding:22px 24px; border:1px solid var(--line); border-radius:16px; background:var(--card);}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
/* Round photo or initial from avatarHtml() in session.js (it sets the size) */
.avatar-circle{border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; overflow:hidden; background:var(--river); color:#fff;}
/* Photo preview on sign-up and complete-profile */
.avatar-preview{width:56px; height:56px;}
.avatar-preview-photo{border-radius:50%; overflow:hidden;}
.tick-list{margin:12px 0 0 18px; color:var(--ink-soft); font-size:14.5px; display:flex; flex-direction:column; gap:6px;}

/* ---------- Small helpers ----------
   One job each, used in page markup instead of style="" attributes. They sit
   last so they win over the rules above; a page's own <style> loads after
   this file, so don't give a page rule the same property for the same element.
   Names: m = margin (t/b/x/y), py = top and bottom padding, fs = font size,
   fw = weight, lh = line height, maxw = max width; 13-5 means 13.5. */
.block{display:block;}
.inline-block{display:inline-block;}
.flex{display:flex;}
.flex-col{flex-direction:column;}
.flex-wrap{flex-wrap:wrap;}
.flex-1{flex:1;}
.items-baseline{align-items:baseline;}
.items-center{align-items:center;}
.items-start{align-items:flex-start;}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.self-center{align-self:center;}
.self-start{align-self:flex-start;}
.gap-6{gap:6px;}
.gap-8{gap:8px;}
.gap-10{gap:10px;}
.gap-12{gap:12px;}
.gap-14{gap:14px;}
.gap-16{gap:16px;}
.gap-18{gap:18px;}
.gap-20{gap:20px;}
.gap-22{gap:22px;}
.w-full{width:100%;}
.maxw-56ch{max-width:56ch;}
.maxw-58ch{max-width:58ch;}
.maxw-60ch{max-width:60ch;}
.maxw-62ch{max-width:62ch;}
.maxw-400{max-width:400px;}
.maxw-440{max-width:440px;}
.maxw-480{max-width:480px;}
.maxw-520{max-width:520px;}
.maxw-680{max-width:680px;}
.maxw-720{max-width:720px;}
.maxw-760{max-width:760px;}
.m-0{margin:0;}
.mx-0{margin-inline:0;}
.mx-auto{margin:0 auto;}
.my-4{margin-block:4px;}
.my-8{margin-block:8px;}
.mt-0{margin-top:0;}
.mt-2{margin-top:2px;}
.mt-4{margin-top:4px;}
.mt-6{margin-top:6px;}
.mt-8{margin-top:8px;}
.mt-10{margin-top:10px;}
.mt-12{margin-top:12px;}
.mt-14{margin-top:14px;}
.mt-16{margin-top:16px;}
.mt-18{margin-top:18px;}
.mt-20{margin-top:20px;}
.mt-22{margin-top:22px;}
.mt-24{margin-top:24px;}
.mt-26{margin-top:26px;}
.mt-28{margin-top:28px;}
.mt-32{margin-top:32px;}
.mt-36{margin-top:36px;}
.mt-40{margin-top:40px;}
.mt-44{margin-top:44px;}
.mb-0{margin-bottom:0;}
.mb-4{margin-bottom:4px;}
.mb-6{margin-bottom:6px;}
.mb-7{margin-bottom:7px;}
.mb-8{margin-bottom:8px;}
.mb-10{margin-bottom:10px;}
.mb-12{margin-bottom:12px;}
.mb-24{margin-bottom:24px;}
.ml-auto{margin-left:auto;}
.py-56{padding:56px 0;}
.py-64{padding:64px 0;}
.fs-12{font-size:12px;}
.fs-12-5{font-size:12.5px;}
.fs-13{font-size:13px;}
.fs-13-5{font-size:13.5px;}
.fs-14{font-size:14px;}
.fs-14-5{font-size:14.5px;}
.fs-15{font-size:15px;}
.fs-15-5{font-size:15.5px;}
.fs-16{font-size:16px;}
.fs-17{font-size:17px;}
.fs-18{font-size:18px;}
.fs-20{font-size:20px;}
.fs-22{font-size:22px;}
.fs-28{font-size:28px;}
.fs-32{font-size:32px;}
.fs-34{font-size:34px;}
.fs-38{font-size:38px;}
.fw-600{font-weight:600;}
.fw-700{font-weight:700;}
.lh-1-5{line-height:1.5;}
.lh-1-55{line-height:1.55;}
.lh-1-6{line-height:1.6;}
.text-brick{color:var(--brick);}
.text-center{text-align:center;}
.text-ink{color:var(--ink);}
.text-left{text-align:left;}
.text-mango{color:var(--mango);}
.text-paper{color:var(--paper);}
.text-river-dark{color:var(--river-dark);}
.text-soft{color:var(--ink-soft);}
.underline{text-decoration:underline;}
.nowrap{white-space:nowrap;}
.pointer{cursor:pointer;}