/* ==========================================================================
   ஆசாரக்கோவை · Ācarakōvai — The Garland of Good Conduct
   100 ethical verses · c. 1st–5th century CE
   Author: Peruṅkōcaṉār · Patiṉeṇkīḻkaṇakku collection

   Title: ஆசாரக்கோவை = āṭcāram (conduct / code of behaviour) +
   kōvai (garland / string / collection). A garland of conduct-rules strung
   like flowers — each verse a blossom of wisdom about how to live, speak,
   eat, worship, and move through the social world with grace and discipline.

   Unlike the list-structured Patiṉeṇ works (Tirikkaṭukam's triplets,
   Nāṉmaṇikkaṭikai's quartets, Iṉṉā/Iṉiyavai's escalating pairs), each verse
   of Ācarakōvai is a self-contained precept or cluster of conduct-rules —
   a single blossom in the garland, complete in itself.

   Visual identity: The deep forest of right-living. Dharmic green —
   the colour of fresh dharba grass used in rituals, of the sacred tulsi
   plant, of the fertile land that rewards those who live rightly. Copper
   for the vessels, the ritual implements, the warm gleam of domestic
   propriety. The palette is grounded, living, embodied — not the cold
   lapis of gems or the harsh crimson of thorns, but the warm green of
   a well-tended life.

   Mark: a gentle arc with small nodes — the garland (kōvai), the string
   of blossoms, the continuous thread of conduct running through a life.
   ========================================================================== */

:root {
  /* ── Forest green (primary) ─────────────────────────── */
  --ac-forest:        #1a3d20;
  --ac-forest-mid:    #2a5430;
  --ac-forest-bright: #3a7040;
  --ac-forest-pale:   rgba(26, 61, 32, 0.10);
  --ac-forest-pale2:  rgba(26, 61, 32, 0.05);

  /* ── Copper (secondary) ─────────────────────────────── */
  --ac-copper:        #b06020;
  --ac-copper-mid:    #904c10;
  --ac-copper-bright: #d07830;
  --ac-copper-pale:   rgba(176, 96, 32, 0.14);
  --ac-copper-pale2:  rgba(176, 96, 32, 0.06);

  /* ── Earth (accent) ─────────────────────────────────── */
  --ac-earth:         #7a6848;
  --ac-earth-mid:     #5a4830;
  --ac-earth-pale:    rgba(122, 104, 72, 0.12);

  /* ── Warm parchment ─────────────────────────────────── */
  --ac-parchment:     #eee8d4;
  --ac-parchment-mid: #e2dac4;

  /* ── Deep ink ───────────────────────────────────────── */
  --ac-ink:           #0e1e10;
  --ac-ink-mid:       #243828;
  --ac-ink-pale:      rgba(14, 30, 16, 0.55);

  /* ── Site overrides ─────────────────────────────────── */
  --accent-vermillion: var(--ac-forest);
  --accent-kumkum:     var(--ac-forest-mid);
  --accent-ochre:      var(--ac-copper-mid);
  --accent-gold:       var(--ac-copper);
}

/* Body background: warm clay-green earth */
body { background: #8ea890; }
body::before {
  background-image:
    radial-gradient(circle at 30% 30%, rgba(26,61,32,0.08) 0%, transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(176,96,32,0.05) 0%, transparent 50%),
    repeating-linear-gradient(
      60deg,
      transparent 0px, transparent 10px,
      rgba(26,61,32,0.012) 10px, rgba(26,61,32,0.012) 11px
    );
}

/* Header */
.site-header { border-bottom-color: rgba(26,61,32,0.22); }
.site-logo .mark { color: var(--ac-copper); }
.wordmark-tamil { color: var(--ac-forest); }
.site-nav a { color: var(--ac-forest-mid); }
.site-nav a:hover { color: var(--ac-copper-mid); }
a { color: var(--ac-forest-mid); }
a:hover { color: var(--ac-forest-bright); }

/* ---------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.ac-hero {
  background: linear-gradient(160deg, #1a3d20 0%, #2a5430 45%, #1c3022 100%);
  color: var(--ac-parchment);
  padding: 3.5rem 2rem 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ac-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse at 20% 80%, rgba(176,96,32,0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(58,112,64,0.12) 0%, transparent 50%),
    repeating-linear-gradient(
      -30deg,
      transparent 0px, transparent 18px,
      rgba(255,255,255,0.012) 18px, rgba(255,255,255,0.012) 19px
    );
  pointer-events: none;
}
.ac-hero > * { position: relative; }

.ac-hero-mark {
  margin: 0 auto 1.4rem;
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
}
.ac-hero h1 {
  font-family: var(--font-tamil, serif);
  font-size: clamp(2rem, 5vw, 2.8rem);
  color: #fff;
  margin: 0 0 0.3rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.32);
}
.ac-hero-roman {
  font-size: 1.25rem;
  color: rgba(238,232,212,0.85);
  font-style: italic;
  margin: 0 0 0.4rem;
}
.ac-hero-meaning {
  font-size: 1rem;
  color: var(--ac-copper-bright);
  font-weight: 600;
  letter-spacing: 0.03em;
  margin: 0 0 1.2rem;
}
.ac-hero p {
  max-width: 640px;
  margin: 0 auto 0.8rem;
  font-size: 0.97rem;
  color: rgba(238,232,212,0.82);
  line-height: 1.65;
}

/* Stat row */
.ac-stat-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  margin-top: 1.8rem;
}
.ac-stat { text-align: center; }
.ac-stat-num {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ac-copper-bright);
}
.ac-stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(238,232,212,0.55);
  margin-top: 0.15rem;
}

/* ---------------------------------------------------------------------------
   Context banner
   ------------------------------------------------------------------------- */
.ac-context-banner {
  background: var(--ac-forest-pale);
  border-left: 3px solid var(--ac-forest-bright);
  color: var(--ac-ink-mid);
  padding: 1rem 1.4rem;
  font-size: 0.92rem;
  line-height: 1.65;
  max-width: 820px;
  margin: 1.6rem auto 0;
}
.ac-context-banner strong { color: var(--ac-forest); }
.ac-context-banner em { color: var(--ac-copper-mid); font-style: italic; }

/* ---------------------------------------------------------------------------
   Verses section header
   ------------------------------------------------------------------------- */
.ac-verses-header {
  max-width: 820px;
  margin: 2rem auto 0.8rem;
  padding: 0 1rem;
}
.ac-verses-header h2 {
  font-size: 1.3rem;
  color: var(--ac-forest);
  margin: 0 0 0.3rem;
}
.ac-verses-header p {
  font-size: 0.85rem;
  color: var(--ac-ink-pale);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Verse cards
   ------------------------------------------------------------------------- */
.ac-verses-main {
  max-width: 820px;
  margin: 0 auto 3rem;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ac-verse {
  background: var(--ac-parchment);
  border: 1px solid rgba(26,61,32,0.15);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(14,30,16,0.06);
  transition: box-shadow 0.2s;
}
.ac-verse:hover { box-shadow: 0 3px 10px rgba(14,30,16,0.10); }

/* Verse header */
.ac-verse-header {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.65rem 1rem 0.5rem;
  background: linear-gradient(90deg, rgba(26,61,32,0.07) 0%, rgba(26,61,32,0.02) 100%);
  border-bottom: 1px solid rgba(26,61,32,0.10);
}
.ac-verse-num {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ac-copper);
  min-width: 1.8rem;
  text-align: right;
  opacity: 0.85;
}
.ac-verse-theme {
  font-size: 0.85rem;
  color: var(--ac-forest-mid);
  font-style: italic;
  flex: 1;
}

/* Verse body */
.ac-verse-body { padding: 0.4rem 0; }

/* Layer (details/summary) */
.ac-layer {
  border-top: 1px solid rgba(26,61,32,0.07);
}
.ac-layer:first-child { border-top: none; }

.ac-layer-toggle {
  display: block;
  padding: 0.45rem 1rem;
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ac-forest-mid);
  cursor: pointer;
  user-select: none;
  list-style: none;
  background: transparent;
  transition: background 0.15s, color 0.15s;
}
.ac-layer-toggle::-webkit-details-marker { display: none; }
.ac-layer-toggle::before {
  content: "▸ ";
  font-size: 0.65rem;
  opacity: 0.5;
  transition: transform 0.15s;
  display: inline-block;
}
details[open] > .ac-layer-toggle::before { transform: rotate(90deg); }
.ac-layer-toggle:hover {
  background: var(--ac-forest-pale);
  color: var(--ac-forest);
}
details[open] > .ac-layer-toggle {
  color: var(--ac-forest);
  background: var(--ac-forest-pale);
}

.ac-layer-content {
  padding: 0.5rem 1rem 0.8rem;
  font-size: 0.94rem;
  line-height: 1.75;
  color: var(--ac-ink);
}

/* Tamil verse */
.ac-tamil-verse {
  font-family: var(--font-tamil, serif);
  font-size: 1.05rem;
  color: var(--ac-ink);
  line-height: 1.9;
}

/* Transliteration */
.ac-translit-verse {
  font-style: italic;
  color: var(--ac-ink-mid);
  font-size: 0.96rem;
}

/* English prose */
.ac-english-prose {
  color: var(--ac-ink-mid);
}

/* Note */
.ac-note {
  font-size: 0.88rem;
  color: var(--ac-earth);
  line-height: 1.7;
  border-left: 2px solid var(--ac-copper-pale);
  padding-left: 0.8rem;
}

/* ---------------------------------------------------------------------------
   About page
   ------------------------------------------------------------------------- */
.ac-about-main {
  max-width: 720px;
  margin: 0 auto 3rem;
  padding: 1.5rem 1rem;
  color: var(--ac-ink);
  line-height: 1.75;
}
.ac-about-main h2 {
  color: var(--ac-forest);
  font-size: 1.2rem;
  margin: 1.8rem 0 0.5rem;
  border-bottom: 1px solid var(--ac-forest-pale);
  padding-bottom: 0.3rem;
}
.ac-about-main h2:first-child { margin-top: 0; }
.ac-about-main p { margin: 0 0 0.9rem; }
.ac-about-main table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin: 1rem 0;
}
.ac-about-main th {
  background: var(--ac-forest-pale);
  color: var(--ac-forest);
  padding: 0.5rem 0.7rem;
  text-align: left;
  font-weight: 600;
}
.ac-about-main td {
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid rgba(26,61,32,0.08);
  vertical-align: top;
}
.ac-about-main tr:last-child td { border-bottom: none; }
.ac-about-main [lang="ta"] { font-family: var(--font-tamil, serif); }