/* ───────────────────────────────────────────────────────────────────────────
   style.css: how the site looks.

   Everything here is ordinary CSS. If you change something in this file you
   only need to reload the page in your browser; you do not need to restart
   the site.

   The design is deliberately quiet: one column, plenty of space between the
   lines, and a reading width that is comfortable rather than wide.
   ─────────────────────────────────────────────────────────────────────────── */


/* ── The colours and the two typefaces, all named in one place ───────────── */

:root {
  --paper:     #fbf9f6;   /* the background            */
  --ink:       #26231f;   /* ordinary text             */
  --ink-quiet: #6d665d;   /* dates, names, small print */
  --line:      #e4dfd7;   /* the thin dividing lines   */
  --field:     #ffffff;   /* inside the form boxes     */
  --accent:    #4d6b5e;   /* a muted green             */

  /* English is set in whatever clean sans-serif the reader's device provides. */
  --font-latin: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Persian is set in Vazirmatn, loaded from Google Fonts. Naming the Latin
     fonts after it means that if Vazirmatn ever fails to load, the text still
     appears in something sensible rather than in nothing at all. */
  --font-persian: "Vazirmatn", var(--font-latin);
}

/* The same page at night, so it is not blinding in a dark room. The reader's
   own device decides; there is no switch to press. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #171614;
    --ink:       #e8e4dd;
    --ink-quiet: #a09a91;
    --line:      #33302b;
    --field:     #201e1b;
    --accent:    #8fb3a3;
  }
}


/* ── The page itself. These are the mobile sizes; a phone is the starting
      point, and the wider screens are handled further down. ──────────────── */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-latin);
  font-size: 1.0625rem;   /* a touch larger than the browser default */
  line-height: 1.85;      /* generous space between the lines        */
  -webkit-text-size-adjust: 100%;
}

.page {
  max-width: 34rem;       /* a comfortable reading width */
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

/* Anything written in Persian is set in Vazirmatn. */
[lang="fa"] {
  font-family: var(--font-persian);
  line-height: 2;         /* Persian sits more easily with a little extra room */
}


/* ── Bilingual labels: the English line, then the Persian line beneath it ── */

.en, .fa { display: block; }

.fa {
  font-family: var(--font-persian);
  color: var(--ink-quiet);

  /* The Persian lines are marked right-to-left in the HTML, so a full stop lands
     at the correct end of the sentence, and each line settles against the right
     edge the way Persian is meant to. English sits on the left, Persian on the
     right, each reading naturally in its own direction. */
  text-align: right;
}

/* ...except where the whole block is centred anyway. */
.masthead .fa {
  text-align: center;
}



/* ── The strip of photographs at the very top ─────────────────────────────────
   A carousel built entirely out of CSS. The photos sit in a row that scrolls
   sideways; scroll-snap makes it settle neatly on one photo rather than
   stopping halfway between two. Swiping works on a phone without any help. */

.banner {
  margin-bottom: 2.5rem;
}

.banner-strip {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;   /* come to rest on one photo at a time */
  border-radius: 6px;

  /* Deliberately no "scroll-behavior: smooth" here. Asking for a gliding
     animation at the same time as mandatory snapping makes the browser change
     its mind halfway and slide back to the first photo, which leaves the dots
     underneath doing nothing at all. Jumping straight to the chosen photo is
     less pretty and always works. Swiping is untouched by this and still feels
     exactly as smooth as it does in any other app. */

  /* Hide the sideways scrollbar. The dots underneath do that job more quietly. */
  scrollbar-width: none;
}

.banner-strip::-webkit-scrollbar { display: none; }

.banner-photo {
  flex: 0 0 100%;      /* one photograph fills the width; the rest wait offstage */
  width: 100%;
  display: block;

  /* Photographs come in all shapes. Giving every one the same proportions and
     letting it fill that space keeps the top of the page steady instead of
     jumping about as you move from a tall photo to a wide one. */
  aspect-ratio: 3 / 2;
  object-fit: cover;

  scroll-snap-align: center;
  background: var(--field);
}

/* The little dots underneath. Each one is an ordinary link to its photograph,
   which is why this needs no JavaScript. */
.banner-dots {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin: 0.9rem 0 0;
}

.banner-dots a {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--line);
  border: 1px solid var(--line);
}

.banner-dots a:hover,
.banner-dots a:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
}

/* Text that only a screen reader announces. It gives each dot something to say
   out loud, without putting a number on the page. */
.for-screen-readers {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ── His name and dates at the top ───────────────────────────────────────── */

.masthead {
  text-align: center;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2.5rem;
}

.masthead h1 {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0;
  line-height: 1.4;
}

.name-fa {
  font-family: var(--font-persian);
  margin-top: 0.35rem !important;
}

.dates {
  margin: 1rem 0 0;
  color: var(--ink-quiet);
  font-size: 0.95rem;
  line-height: 1.9;
}


/* ── His story ───────────────────────────────────────────────────────────── */

.story p {
  margin: 0 0 1.4rem;
  white-space: pre-line;   /* keeps the line breaks you typed into the bio */

  /* Centred, like the name and dates above it, so the top of the page reads as
     one piece. If the bio ever grows into long paragraphs, centred text will
     get tiring to read; change this line to "left" then. */
  text-align: center;
}

.story p:last-child { margin-bottom: 0; }


/* ── Headings for the two lower sections ─────────────────────────────────── */

h2 {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0 0 0.4rem;
  line-height: 1.5;
}

h2 .fa { font-size: 1.05rem; }

.quiet {
  color: var(--ink-quiet);
  font-size: 0.92rem;
  margin: 0 0 1.5rem;
  line-height: 1.7;
}

.quiet a { color: var(--accent); }


/* ── The form ────────────────────────────────────────────────────────────── */

.share {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}

label {
  margin-bottom: 0.45rem;
  font-size: 0.92rem;
  line-height: 1.5;
}

label .fa { font-size: 0.9rem; }

input[type="text"],
textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.8;

  /* Vazirmatn is named first here because we cannot know in advance which
     language a visitor will write in. It carries a clean Latin alphabet too,
     so English typed into these boxes still looks right. */
  font-family: var(--font-persian);
}

textarea { resize: vertical; }

/* The photo box. Browsers each draw this control their own way and will not be
   talked out of it, so the aim here is just to give it room and keep it from
   spilling out of the page on a narrow phone. */
input[type="file"] {
  display: block;
  width: 100%;
  margin-bottom: 0.4rem;
  font-family: var(--font-latin);
  font-size: 0.92rem;
  color: var(--ink-quiet);
}

/* The small grey line under the photo box. */
.field-hint {
  margin: 0 0 1.5rem;
  font-size: 0.85rem;
}

.field-hint .fa { font-size: 0.85rem; }

input[type="text"]:focus,
textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

button {
  font-family: var(--font-latin);
  font-size: 0.95rem;
  padding: 0.65rem 1.6rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: var(--paper);
  cursor: pointer;
  text-align: center;
}

button .fa { color: inherit; opacity: 0.85; }

button:hover { opacity: 0.9; }


/* ── THE ROBOT TRAP ──────────────────────────────────────────────────────────
   This pushes the decoy box far off the left-hand side of the screen. Nobody
   ever sees it, so nobody ever fills it in, except automatic junk senders,
   which fill in every box they find. That is exactly how they give themselves
   away. Do not delete these lines, or the decoy would appear on the page. */

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ── The message after the form is sent ──────────────────────────────────── */

.notice {
  margin: 0 0 1.75rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--field);
  font-size: 0.95rem;
  line-height: 1.7;
}

.notice .fa { color: var(--ink-quiet); }


/* ── The memories ────────────────────────────────────────────────────────── */

.memories {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}

.memories h2 { margin-bottom: 1.5rem; }

.entry {
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line);
}

.entry:last-child { border-bottom: none; }

.entry-text {
  margin: 0 0 0.7rem;
  white-space: pre-wrap;   /* keeps the paragraphs the writer typed */
}

/* A photo attached to a memory. It is never allowed to be wider than the
   column, and it keeps its own proportions however tall or wide it happens to
   be, so a portrait photo and a landscape one both sit comfortably. */
.entry-photo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 0.9rem;
  border-radius: 6px;
  background: var(--field);
}

/* The folded-away translation under a memory. Closed, it is one quiet line
   reading "Translation ترجمه" with the browser's own little arrow beside it;
   opened, the memory appears again in the other language, in the quiet colour
   so the original stays the main voice. */
.entry-translation {
  margin: -0.2rem 0 0.9rem;
}

.entry-translation summary {
  display: inline-flex;
  align-items: baseline;
  column-gap: 0.5rem;
  cursor: pointer;
  color: var(--accent);
  font-size: 0.85rem;
}

.entry-translation summary .en,
.entry-translation summary .fa {
  display: inline;
  color: inherit;
}

.entry-translation p {
  margin: 0.5rem 0 0;
  color: var(--ink-quiet);
  white-space: pre-wrap;
}

.entry-name {
  margin: 0;
  color: var(--ink-quiet);
  font-size: 0.92rem;
}

/* A small dash before the name, on whichever side that name begins. */
.entry-name::before { content: "– "; }

.empty {
  color: var(--ink-quiet);
  font-size: 0.95rem;
}


/* ── The private admin page ──────────────────────────────────────────────── */

/* The admin heading is plain English and sits on the left. */
.admin-masthead {
  text-align: left;
  padding-bottom: 1.2rem;
  margin-bottom: 1.5rem;
}

/* ── The four tabs ────────────────────────────────────────────────────────────
   The tabs are ordinary links to #pending, #published, #bio and #banner, and
   the switching below is done entirely by the stylesheet: the section named in
   the address is shown, the rest are hidden. No JavaScript. */

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 2rem;
}

.admin-tabs a {
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-quiet);
  text-decoration: none;
  font-size: 0.95rem;
}

.admin-tabs a:hover { color: var(--ink); }

/* Every section starts hidden... */
.admin-section { display: none; }

/* ...the one named in the address is shown... */
.admin-section:target { display: block; }

/* ...and when the address names none of them, the Waiting tab is the one you
   see, since that is what this page is for. */
.page:not(:has(.admin-section:target)) #pending { display: block; }

/* The tab whose section is showing is painted in. */
.page:has(#pending:target)   .admin-tabs a[href="#pending"],
.page:has(#published:target) .admin-tabs a[href="#published"],
.page:has(#bio:target)       .admin-tabs a[href="#bio"],
.page:has(#banner:target)    .admin-tabs a[href="#banner"],
.page:not(:has(.admin-section:target)) .admin-tabs a[href="#pending"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

.admin-tabs a .count { color: inherit; opacity: 0.8; }

/* A browser too old to understand :has() simply shows all four sections in a
   row, one after another, which is exactly how the page worked before tabs. */
@supports not (selector(:has(*))) {
  .admin-section { display: block; }
}

.admin-section { margin-bottom: 3rem; }

.admin-section h3 {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
  line-height: 1.5;
}

/* The small number of memories beside an admin heading. */
.count {
  display: inline;
  color: var(--ink-quiet);
  font-size: 0.85rem;
  font-weight: 400;
}

.admin-entry {
  padding: 1.2rem 0 0.4rem;
  border-bottom: 1px solid var(--line);
}

.admin-meta {
  margin: 0 0 0.6rem;
  font-size: 0.92rem;
}

.admin-meta strong { font-weight: 500; }

.when {
  color: var(--ink-quiet);
  font-size: 0.85rem;
  margin-inline-start: 0.6rem;
}

/* ── The grid of photographs on the admin Photos tab ─────────────────────────
   Small square pictures in their current order, left to right. The number
   under each one is its place in the strip. */

.banner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.banner-cell { margin: 0; cursor: grab; }

/* The photograph while it is being dragged. */
.banner-cell.dragging { opacity: 0.4; }

/* The little "Order saved." word beside the Save order button. */
.drag-note {
  margin-inline-start: 0.8rem;
  font-size: 0.9rem;
  color: var(--ink-quiet);
}

.banner-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;      /* every picture the same square, however it was shot */
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.banner-cell-controls {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.45rem;
}

.banner-cell-controls select {
  font-family: var(--font-latin);
  font-size: 0.95rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field);
  color: var(--ink);
}

.banner-cell-controls .danger {
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
}

/* On the admin page the photo is deliberately kept small. You are checking
   what it is, not admiring it, and a screenful of full-size photos would make
   a long list of memories tiring to work through. */
.admin-photo {
  display: block;
  max-width: 100%;
  max-height: 14rem;
  width: auto;
  height: auto;
  margin: 0 0 0.9rem;
  border-radius: 6px;
}

.admin-entry textarea { margin-bottom: 0.9rem; }

/* The small line above the translation box on the admin page. */
.admin-label {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  color: var(--ink-quiet);
}

.admin-buttons {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}

.admin-buttons button { padding: 0.5rem 1.1rem; font-size: 0.9rem; }

/* The delete button is deliberately plain, so it is never the one you press
   by accident. */
.danger {
  background: transparent;
  color: var(--ink-quiet);
  border-color: var(--line);
}

.danger:hover { color: #b4453a; border-color: #b4453a; opacity: 1; }


/* ── How the two languages sit together ──────────────────────────────────────
   Short pieces of interface (headings, the labels above the boxes) put both
   languages on ONE line: English starting from the left end, Persian starting
   from the right end, the way formal bilingual documents set them. If the two
   ever run out of room, the pair quietly falls back to two lines, still
   anchored to their own ends. Longer sentences (the messages, the small print)
   stay as two stacked lines, which the rules above already handle. */

h2,
label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  column-gap: 1.5rem;
}

/* A button holds its pair side by side on one line, English then Persian. */
button {
  display: inline-flex;
  justify-content: center;
  align-items: baseline;
  column-gap: 0.7rem;
}

button .en, button .fa { line-height: 1.5; }


/* ── Wider screens: a little more air, nothing else changes ──────────────── */

@media (min-width: 40rem) {
  .page { padding: 4rem 2rem 6rem; }
  .banner-photo { aspect-ratio: 16 / 9; }
  .masthead h1 { font-size: 1.75rem; }
  body { font-size: 1.09375rem; }
}