/* ============================================================
   Sango - African Forest
   Theme: Parchment / Charcoal / Lotus Blue / Leaf Green / Iron Red
   Swap the whole palette by editing only the :root block below.
   ============================================================ */

:root {
  /* --- Core palette (edit these to re-theme the whole app) --- */
  --color-bg:            #f4ecd8;  /* parchment paper */
  --color-bg-alt:        #ebe0c6;  /* slightly darker parchment, cards */
  --color-text:          #2b2b2b;  /* charcoal black, main writing */
  --color-text-muted:    #5a5348;  /* faded ink */

  --color-positive:      #3f7d95;  /* lotus blue - primary/confirm buttons */
  --color-positive-hover:#356a80;

  --color-highlight:     #4f7942;  /* leaf green - highlights, tags, success */
  --color-highlight-soft:#e4ecdd;

  --color-negative:      #a63d2f;  /* iron red - destructive buttons, borders, lines */
  --color-negative-hover:#8a3126;

  --color-border:        var(--color-negative);
  --color-shadow:        rgba(43, 43, 43, 0.15);

  /* --- Derived / structural tokens (rarely need editing) --- */
  --radius: 6px;
  --font-body: Georgia, 'Times New Roman', serif;
  --font-ui: 'Trebuchet MS', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  min-height: 100%;
}

body {
  background-image:
    radial-gradient(rgba(90, 83, 72, 0.05) 1px, transparent 1px);
  background-size: 3px 3px;
}

a { color: var(--color-positive);}
a:hover { color: var(--color-positive-hover); }


button{
    color:#fff;
    padding:8px;
    border-radius: 8px;
    border:1px solid #fff;
    background-color: var(--color-positive);
}

h1, h2, h3, h4 {
  font-family: var(--font-body);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.2em;
}

#app {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem 1.25rem 3rem;
}

/* --- Header / nav --- */
.sango-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
}

.sango-header h1 {
  border: none;
  margin: 0;
  font-size: 1.6rem;
}

.sango-header .tagline {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  display: block;
}

.sango-nav a {
  margin-left: 1rem;
  font-family: var(--font-ui);
  text-decoration: none;
  font-size: 0.95rem;
}

/* --- Cards / lists --- */
.card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 2px 2px 0 var(--color-shadow);
}

.category-grid, .entry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.category-grid .card, .entry-grid .card {
  cursor: pointer;
  transition: transform 0.1s ease;
}
.category-grid .card:hover, .entry-grid .card:hover {
  transform: translateY(-2px);
}

/* --- Tags / highlights --- */
.tag {
  display: inline-block;
  background: var(--color-highlight-soft);
  color: var(--color-highlight);
  border: 1px solid var(--color-highlight);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.75rem;
  font-family: var(--font-ui);
  margin: 0.15rem 0.25rem 0.15rem 0;
}

.badge-pending {
  color: var(--color-negative);
  border: 1px solid var(--color-negative);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.7rem;
  font-family: var(--font-ui);
}

/* --- Buttons --- */
button, .btn {
  font-family: var(--font-ui);
  border: none;
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.95rem;
}

.btn-positive, button[type="submit"] {
  background: var(--color-positive);
  color: #fff;
}
.btn-positive:hover, button[type="submit"]:hover {
  background: var(--color-positive-hover);
}

.btn-negative {
  background: var(--color-negative);
  color: #fff;
}
.btn-negative:hover {
  background: var(--color-negative-hover);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--color-text-muted);
  color: var(--color-text);
}

/* --- Forms --- */
input, textarea, select {
  font-family: var(--font-ui);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.5rem;
  width: 100%;
  background: #fffdf7;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

label {
  font-family: var(--font-ui);
  font-weight: bold;
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}

hr, .divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1.5rem 0;
}

/* --- Alerts --- */
.alert-error {
  color: var(--color-negative);
  border: 1px solid var(--color-negative);
  background: rgba(166, 61, 47, 0.08);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  margin-bottom: 1rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
}

.alert-success {
  color: var(--color-highlight);
  border: 1px solid var(--color-highlight);
  background: var(--color-highlight-soft);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  margin-bottom: 1rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
}

/* --- Images --- */
.entry-images {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  margin: 0.75rem 0;
}
.entry-images img {
  height: 140px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

/* --- Comments (TikTok-style stacked list) --- */
.tiktok-comment-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 1rem 0 1.5rem;
}

.tiktok-comment {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.tiktok-comment-avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-positive);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: bold;
  font-size: 0.95rem;
}

.tiktok-comment-body {
  flex: 1 1 auto;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
}

.tiktok-comment-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  flex-wrap: wrap;
}

.tiktok-comment-time {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.tiktok-comment-text {
  margin: 0.25rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  word-break: break-word;
}

.tiktok-comment-form {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  position: sticky;
  bottom: 0;
  background: var(--color-bg);
  padding: 0.6rem 0;
  border-top: 1px solid var(--color-border);
}

.tiktok-comment-form textarea {
  flex: 1 1 auto;
  margin: 0;
  resize: none;
  border-radius: 999px;
  padding: 0.55rem 1rem;
  max-height: 4.5rem;
}

.tiktok-comment-form button {
  flex: 0 0 auto;
  border-radius: 999px;
}

.tiktok-comment-avatar-self {
  background: var(--color-highlight);
}

/* --- Nav avatar --- */
.nav-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 0.3rem;
  border: 1px solid var(--color-border);
}

/* --- Profile page --- */
.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.profile-avatar {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-positive);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: bold;
  font-size: 1.6rem;
  overflow: hidden;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-row input[type="file"] {
  width: auto;
  margin-bottom: 0;
}

/* --- Category header image --- */
.category-hero {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  margin: 0.75rem 0;
}

/* --- Loading --- */
.loading {
  text-align: center;
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  padding: 2rem;
}