/* First Words: Darja — lesson pages | Algeria Connect
   One file styles all pages. Edit here, changes apply everywhere. */

/* Design tokens: palette, type, spacing */
:root{
  --paper:#FBFAF7;      /* page background — warm near-white */
  --ink:#26231E;        /* body text */
  --muted:#6E675C;      /* secondary text */
  --green:#175139;      /* Atlas green — links, accents, headings */
  --saffron:#B8811F;    /* saffron — the Arabic lesson numeral only */
  --line:#E4DFD5;       /* hairlines and borders */
  --card:#FFFFFF;       /* player card background */
  --serif:"Source Serif 4", Georgia, serif;
  --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --arabic:"Amiri", "Noto Naskh Arabic", serif;
}

/* Base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.0625rem;      /* 17px */
  line-height:1.65;
}
a{color:var(--green)}
a:focus-visible{outline:2px solid var(--saffron);outline-offset:3px;border-radius:2px}

/* Layout: single centred reading column */
.wrap{max-width:42rem;margin:0 auto;padding:2.25rem 1.25rem 4rem}

/* Header: eyebrow, big Arabic numeral, title */
.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green);
  margin:0 0 .25rem;
}
.eyebrow a{text-decoration:none;color:inherit}
.eyebrow a:hover{text-decoration:underline}
.titlebar{display:flex;align-items:flex-start;gap:1.1rem}
h1{font-size:clamp(1.7rem,5vw,2.3rem);line-height:1.15;font-weight:700;margin:.1rem 0 .4rem}
.num-ar{                     /* signature: large lesson number */
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2.5rem,8vw,3.6rem);
  line-height:1;
  color:var(--saffron);
  user-select:none;
  margin-top:-.35rem;
  flex:0 0 4.6rem;           /* fixed column: identical title position on every page */
  text-align:right;          /* right edge fixed: even gap to the title on every page */
}
.lede{color:var(--muted);font-style:italic;margin:0 0 1.75rem;font-size:1.05rem}

/* Audio player card */
.player{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:1rem 1.1rem 1.15rem;
  margin:0 0 2.25rem;
}
.player .label{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 .55rem;
}
.player audio{width:100%;display:block}

/* One-line course note under the player — quiet, editorial, not a second box */
.course-note{
  margin:.65rem 0 0;
  font-size:.9rem;
  line-height:1.5;
  color:var(--muted);
}
.course-note a{color:var(--green)}
.course-note a.join{font-weight:600}

/* Section headings */
h2{
  font-family:var(--sans);
  font-size:.8rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--green);
  border-bottom:1px solid var(--line);
  padding-bottom:.45rem;
  margin:2.25rem 0 .35rem;
  font-weight:600;
}

/* Word list: phrasebook rows — meaning left, Arabic right */
.words{list-style:none;margin:0;padding:0}
.words li{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.35rem 1.25rem;
  align-items:center;
  padding:.7rem 0;
  border-bottom:1px solid var(--line);
}
.words .tl{font-weight:600;color:var(--ink)}
.words .en{display:block;color:var(--muted);font-size:.92rem;line-height:1.45}
.words .ar{
  font-family:var(--arabic);
  font-size:1.7rem;
  line-height:1.4;
  color:var(--ink);
  text-align:right;
  white-space:nowrap;
}

/* Dialogue: script block with a green rule */
.dialogue{
  border-left:3px solid var(--green);
  padding:.25rem 0 .25rem 1.1rem;
  margin:1rem 0 0;
}
.dialogue p{margin:.45rem 0}
.dialogue p::before{content:"\2014\00a0";color:var(--muted)}  /* em dash before each line */

/* Tap-to-reveal translations (native <details>, no JS) */
.dialogue details{margin:.45rem 0}
.dialogue summary{cursor:pointer;list-style:none}
.dialogue summary::-webkit-details-marker{display:none}
.dialogue summary::before{content:"\2014\00a0";color:var(--muted)}
.dialogue summary:hover{color:var(--green)}
.dialogue details[open] summary{color:var(--green)}
.dialogue .tr{
  margin:.15rem 0 .3rem 1.15rem;
  color:var(--muted);
  font-style:italic;
  font-size:.95rem;
}
.dialogue .tr::before{content:none}
.hint{
  font-family:var(--sans);
  font-size:.75rem;
  color:var(--muted);
  margin:.35rem 0 .5rem;
}

/* Intro paragraph inside a lesson */
.para{margin:1.25rem 0 0}

/* Collapsible answers */
details{
  margin:1.1rem 0 0;
  border:1px solid var(--line);
  border-radius:10px;
  padding:.7rem 1rem;
  background:var(--card);
}
summary{
  cursor:pointer;
  font-family:var(--sans);
  font-size:.85rem;
  font-weight:600;
  color:var(--green);
}
details ol{margin:.75rem 0 .25rem;padding-left:1.25rem}
details li{margin:.45rem 0}

/* Prev / next footer nav */
.pagenav{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin-top:3rem;
  padding-top:1.25rem;
  border-top:1px solid var(--line);
  font-family:var(--sans);
  font-size:.9rem;
}
.pagenav a{text-decoration:none}
.pagenav a:hover{text-decoration:underline}
.pagenav .all{color:var(--muted)}

/* Index page: lesson list */
.lessonlist{list-style:none;margin:1.5rem 0 0;padding:0}
.lessonlist li{border-bottom:1px solid var(--line)}
.lessonlist a{
  display:grid;
  grid-template-columns:3.2rem 1fr;
  gap:1rem;
  align-items:center;
  padding:.85rem .25rem;
  text-decoration:none;
  color:var(--ink);
}
.lessonlist a:hover .t{text-decoration:underline;text-decoration-color:var(--green)}
.lessonlist .n{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.45rem;
  color:var(--saffron);
  text-align:center;
  line-height:1;
}
.lessonlist .t{font-weight:600}
.lessonlist .d{display:block;color:var(--muted);font-size:.9rem;font-weight:400}

/* Site footer line */
.sitefoot{
  margin-top:3.5rem;
  font-family:var(--sans);
  font-size:.78rem;
  color:var(--muted);
  text-align:center;
}
.sitefoot a{color:var(--muted)}

/* Small screens: let Arabic wrap under the meaning */
@media (max-width:430px){
  .words li{grid-template-columns:1fr}
  .words .ar{text-align:left;white-space:normal;font-size:1.5rem}
  .num-ar{font-size:2.6rem}
}


/* Sign-up prompt on each lesson page — the audio pages are the course's shop window */
.signup-cta{
  margin:2.5rem 0 0;
  padding:1.15rem 1.25rem;
  background:var(--green);
  border-radius:12px;
  color:#F4F1EA;
}
/* Index page only: box follows the titlebar directly, so the lede's own
   bottom margin provides the spacing — the 2.5rem top margin is for the
   bottom-of-page position used on lesson pages. */
.titlebar + .signup-cta{margin-top:0}
.signup-cta .label{
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--saffron);
  margin:0 0 .35rem;
  font-weight:600;
}
.signup-cta p{margin:0 0 .8rem;font-size:1rem;line-height:1.55;color:#F4F1EA}
.signup-cta a.cta-btn{
  display:inline-block;
  background:var(--saffron);
  color:#26231E;
  font-family:var(--sans);
  font-weight:700;
  font-size:.9rem;
  text-decoration:none;
  padding:.6rem 1.1rem;
  border-radius:7px;
}
.signup-cta a.cta-btn:hover{opacity:.92}