/* --- Desktop-ish site shell + hamburger + chat bar below welcome --- */
:root{
  --bg:#faefe1;
  --panel:#fff6ed;
  --ink:#4c3427;
  --muted:#e9d7c7;
  --cta:#4c3427;
}
body{background:var(--bg); color:var(--ink); margin:0}

/* topbar */
.topbar{
  position:sticky; top:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  background:var(--bg);
  border-bottom:1px solid var(--muted);
  z-index:30;
}
.brand{display:flex; align-items:center; gap:10px}
.brand-logo{width:36px;height:36px;border-radius:50%;object-fit:cover}
.brand-title{font-weight:700}
.mainnav a{color:var(--ink); text-decoration:none; margin-left:22px; font-weight:600}
.mainnav a.active{border-bottom:2px solid var(--ink); padding-bottom:4px}

/* grid layout */
.layout{display:grid; grid-template-columns:240px 1fr; gap:24px; padding:20px}
.sidebar{padding-left:8px; transition:transform .25s ease}
.sidebar ul{list-style:none; padding:0; margin:0 0 18px 0; display:grid; gap:14px}
.sidebar li{display:flex; align-items:center; gap:12px}
.sidebar .mobile-nav a{font-weight:700; text-decoration:none; color:var(--ink)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--ink);display:inline-block}
.gear{
  width:14px; height:14px; display:inline-block;
  background:
    radial-gradient(circle at 50% 50%, var(--ink) 0 35%, transparent 36%),
    conic-gradient(from 0deg, var(--ink) 0 10%, transparent 10% 20%, var(--ink) 20% 30%,
                   transparent 30% 40%, var(--ink) 40% 50%, transparent 50% 60%,
                   var(--ink) 60% 70%, transparent 70% 80%, var(--ink) 80% 90%,
                   transparent 90% 100%);
  border-radius:50%;
}
.content{padding-right:16px}
.card{
  background:var(--panel);
  border:1px solid var(--muted);
  border-radius:12px;
  padding:24px;
  max-width:820px;
  box-shadow:0 2px 12px rgba(0,0,0,.03);
  margin-bottom:10px;
}
.card h1{font-size:40px; line-height:1.1; margin:0 0 12px}

.footer{margin-top:36px; background:var(--ink); color:#fff; text-align:center; padding:24px; font-weight:700; border-top:6px solid #3b281d}

/* chat bar (inside main, below welcome) */
.chat-bar{
  display:flex; gap:10px; padding:0; margin:10px 0 18px 0;
}
.chat-bar input{
  flex:1; border:1.5px solid var(--muted); border-radius:999px; padding:12px 16px; font-size:16px; outline:none; background:#fff;
}
.chat-bar button{
  border:0; background:var(--cta); color:#fff; border-radius:999px; padding:0 16px; font-weight:700; cursor:pointer;
}

/* hamburger */
.hamburger{display:none; background:none; border:0; padding:6px; margin-right:8px; cursor:pointer}
.hamburger span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0}

/* mobile: collapse sidebar + center brand + make sidebar from top */
@media (max-width: 900px){
  .layout{grid-template-columns:1fr}
  .hamburger{display:inline-block}
  .mainnav{display:none}
  /* center brand on mobile */
  .topbar{position:sticky; top:0}
  .brand{position:absolute; left:50%; transform:translateX(-50%)}
  .sidebar{
    position:fixed; top:0; bottom:0; left:0; width:82vw; max-width:320px;
    background:var(--bg); border-right:1px solid var(--muted);
    transform:translateX(-110%);
    padding:16px;
    z-index:40;
    box-shadow:2px 0 12px rgba(0,0,0,.12);
  }
  .sidebar.open{transform:translateX(0)}
}


/* === Header overrides (logo position/size + centered search) === */
.topbar.topbar--brand{ box-sizing:border-box; width:100%; overflow:visible; }
.topbar.topbar--brand .brand{ justify-content:flex-start; padding-left:72px; position:relative; left:auto; transform:none; }
.topbar.topbar--brand .brand-logo{ height:72px; width:auto; object-fit:contain; position:static; transform:none; border-radius:0; }

/* Search sizing: keep compact */
.topbar.topbar--brand .mast-search{ width:clamp(420px,42vw,600px); }
/* 🔧 removed border-width here so header.css can control thickness */
.topbar.topbar--brand .mast-input{ height:36px; padding:6px 20px; }
.topbar.topbar--brand .btn{ padding:6px 14px; }
.topbar.topbar--brand .btn-searchicon{ width:36px; height:36px; }


/* === Inter font + base typography === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --fs-body: 16px;
  --fs-btn: 14px;
  --fs-input: 14px;
}

html, body{ font-family: var(--font-sans); font-size: var(--fs-body); }
h1, h2, h3, h4, h5, h6, button, input, select, textarea{ font-family: inherit; }

/* Headings */
h1{ font-weight:800; letter-spacing:-0.01em; }
h2{ font-weight:700; letter-spacing:-0.01em; }
h3{ font-weight:700; }

/* Header search + buttons sizing to match mock */
.topbar.topbar--brand .mast-input{ font-size: var(--fs-input); }
.topbar.topbar--brand .btn{ font-size: var(--fs-btn); }