/*
style.css — Xakerlar

Design intent: this is a small, invite-only, high-bar community —
the visual tone should read as considered and dignified, not loud or
gamified. Palette and type were chosen deliberately, not decoratively:

  - Warm ivory background (manuscript-paper, not stark white) —
    easier on the eyes for long reading sessions, and a deliberate
    departure from the harsh-blue-light default noted in an earlier
    comment in user_layout.html.
  - Deep emerald + antique gold as the accent pair — both carry real
    weight in Islamic visual tradition without leaning on literal
    iconography (crescents, etc.), which would read as costume rather
    than genuine design language.
  - Amiri (Google Fonts) for headings/titles — a serif typeface
    specifically designed in the Naskh calligraphic tradition for
    Arabic-and-Latin text, freely licensed. Used for headings only:
    a whole page of body text in a calligraphic-tradition serif is
    beautiful for a few words and tiring for paragraphs, so body copy
    stays a clean, highly legible sans.

Every existing class name this file's templates already depend on
(nav ul/li/a, .title, .subpost, .votearrow, input/textarea, body/html)
is preserved below — this is a restyle, not a rename, so no template
changes are required beyond what's already been done to enable
Tailwind in the layouts.
*/

@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600&display=swap');

:root {
  --color-bg: #faf6ec;         /* warm ivory, manuscript-paper */
  --color-bg-card: #f3ebd8;     /* slightly deeper cream for content surfaces */
  --color-ink: #2b2620;         /* warm near-black, softer than pure black */
  --color-muted: #7a6f5c;       /* muted brown-gray, secondary text */
  --color-emerald: #0b6e4f;
  --color-emerald-dark: #084c37;
  --color-gold: #b8860b;
  --color-gold-light: #d4af37;
  --color-border: #d9c9a3;      /* warm sand, replaces default table borders */

  --font-heading: 'Amiri', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---------------------------------------------
   Base
--------------------------------------------- */
body,
html {
  padding: 0px;
  margin: 0px;
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
}

a {
  color: var(--color-emerald-dark);
}

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

/* ---------------------------------------------
   Navigation
--------------------------------------------- */
nav {
  background-color: var(--color-emerald);
  padding: 12px 20px;
  /* Subtle geometric divider under the nav — a simplified 8-point
     star lattice motif, tiled small and kept quiet so it reads as
     texture, not decoration competing with the content. */
  border-bottom: 3px solid var(--color-gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 0l3 9 9 3-9 3-3 9-3-9-9-3 9-3z' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E");
  background-repeat: repeat;
  /* Two <ul> siblings (nav-left, nav-right) sit at opposite ends —
     this is what actually pushes the right one to the far side,
     not anything on the <ul> itself. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

nav li {
  margin-right: 20px;
}

nav a {
  text-decoration: none;
  color: var(--color-bg);
  font-weight: 600;
  padding: 5px 0;
  letter-spacing: 0.01em;
}

nav a:hover {
  color: var(--color-gold-light);
}

/* The "Xakerlar" wordmark specifically — first link in the nav —
   gets the heading typeface so the brand itself carries the design
   intent, even though the rest of the nav stays in the readable sans. */
.nav-left li:first-child a {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--color-bg);
}

nav button {
  background: transparent;
  border: 1px solid var(--color-gold-light);
  color: var(--color-bg);
  padding: 4px 14px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

nav button:hover {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-emerald-dark);
}

/* The ajr badge next to a logged-in user's name — a small marker of
   standing in the community, styled to feel earned rather than just
   a raw number. */
.ajr-badge {
  display: inline-block;
  background-color: var(--color-gold);
  color: var(--color-emerald-dark);
  font-weight: 600;
  font-size: 0.75rem;
  padding: 2px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------
   Content table (the HN-style layout every page uses)
--------------------------------------------- */
table[border] {
  /* Neutralizes the default HTML border="1" attribute's stark thin
     black grid — replaced with our own quieter row separators below
     instead of a table-wide box. */
  border: none !important;
  border-collapse: collapse;
  background-color: var(--color-bg-card);
  box-shadow: 0 1px 3px rgba(43, 38, 32, 0.08);
  border-radius: 6px;
  overflow: hidden;
}

table[border] tr {
  border-bottom: 1px solid var(--color-border);
}

table[border] td {
  padding: 6px 10px;
}

tr.spacer {
  border-bottom: none !important;
}

/* ---------------------------------------------
   Forms
--------------------------------------------- */
input,
textarea {
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background-color: #ffffff;
  padding: 6px 8px;
  font-family: var(--font-body);
  color: var(--color-ink);
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-emerald);
  box-shadow: 0 0 0 2px rgba(11, 110, 79, 0.15);
}

textarea {
  min-height: 100px !important;
}

/* ---------------------------------------------
   Post / comment typography
--------------------------------------------- */
.title {
  font-family: var(--font-heading);
  font-size: 11pt;
  color: var(--color-ink);
  overflow: hidden;
  font-weight: 700;
}

.title:hover {
  color: var(--color-emerald);
}

.subpost {
  font-family: var(--font-body);
  font-size: 8pt;
  color: var(--color-muted);
  overflow: hidden;
}

.subpost.text-bold {
  color: var(--color-emerald-dark);
  font-weight: 600;
}

/* ---------------------------------------------
   Vote arrow
--------------------------------------------- */
.votearrow {
  width: 12px;
  height: 12px;
  border: 0px;
  margin: 3px 2px 6px;
  background-size: 12px;
  transition: transform 0.1s ease;
}

.votearrow svg path {
  fill: var(--color-muted);
}

.votearrow:hover {
  transform: translateY(-1px);
}

.votearrow:hover svg path {
  fill: var(--color-gold);
}

/* ---------------------------------------------
   Nested comment threading (matches the padding-left/border-left
   inline style render.rs applies per nesting level — this just
   brings the border color onto the same palette; render.rs's inline
   style can be updated separately if you want the color sourced from
   one place instead of two)
--------------------------------------------- */
td[style*="border-left"] {
  border-left-color: var(--color-border) !important;
}