/* ==========================================================================
   ذاكرة الثورة في اللاذقية — design tokens carried over from the original
   archive (dark theme, Cairo headings, IBM Plex Sans Arabic body text).
   ========================================================================== */

:root {
  --bg: #0a0a0a;
  --panel: #141414;
  --panel-2: #1b1b1b;
  --text: #f5f3ec;
  --muted: #9a9a90;
  --dim: #5a5a52;
  --green: #0bbf5d;
  --red: #e23744;
  --amber: #e0a32e;
  --border: rgba(255, 255, 255, 0.1);
  --border-soft: rgba(255, 255, 255, 0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
}

a { color: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 6px; }

@keyframes fu { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.skip-link {
  position: absolute;
  right: -9999px;
  top: 0;
  background: var(--green);
  color: var(--bg);
  padding: 10px 16px;
  font-weight: 700;
  z-index: 999;
  text-decoration: none;
}
.skip-link:focus { right: 16px; top: 16px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Keyboard navigation: a clear focus ring, only for keyboard focus. */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

/* <details> disclosure widgets are used as accordions; hide the default
   triangle marker consistently across browsers. */
summary { cursor: pointer; }
summary::marker, summary::-webkit-details-marker { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- hero (home page) --------------------------------------------------- */

.hero {
  padding: 60px 48px 36px;
  border-bottom: 2px solid var(--border);
  animation: fu .7s ease both;
}
.hero__flag { display: flex; gap: 6px; margin-bottom: 20px; }
.hero__flag span { height: 8px; display: block; }
.hero__flag .s1 { width: 34px; background: var(--green); }
.hero__flag .s2 { width: 18px; background: var(--text); }
.hero__flag .s3 { width: 18px; background: var(--red); }
.hero h1 {
  margin: 0;
  font-family: "Cairo", sans-serif;
  font-weight: 900;
  font-size: 62px;
  line-height: 1.06;
  letter-spacing: -.01em;
}
.hero h1 .accent { color: var(--green); }
/* Styled on the wrapper (not just `p`) because richtext content without
   markup renders as bare text inside the div — the spacing must not depend
   on a <p> being present. */
.hero__intro { max-width: 640px; margin: 18px 0 0; font-size: 16px; line-height: 1.85; color: var(--muted); }
.hero__intro p { margin: 0 0 10px; }
.hero__intro p:last-child { margin-bottom: 0; }

/* ---- generic sections ---------------------------------------------------- */

.section { padding: 32px 48px 16px; }
.section--bordered { padding: 34px 48px; border-bottom: 2px solid var(--border); }
.section__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Cairo", sans-serif;
  font-weight: 800;
  font-size: 24px;
  margin: 0 0 16px;
}
.section__title--big { font-size: clamp(28px, 4vw, 34px); }

.tag-pill {
  background: var(--red);
  color: #fff;
  font: 700 13px/1 "IBM Plex Sans Arabic";
  padding: 6px 10px;
}
.tag-badge {
  display: inline-block;
  font: 700 12px/1 "IBM Plex Sans Arabic";
  color: var(--green);
  border: 1px solid rgba(11, 191, 93, .4);
  padding: 5px 11px;
}

/* ---- "on this day" cards --------------------------------------------------- */

.today-list { display: flex; flex-direction: column; gap: 12px; }
.today-card { background: var(--panel); border: 2px solid var(--border); }
.today-card__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: stretch;
}
.today-card__summary::-webkit-details-marker { display: none; }
.today-card__year {
  background: var(--green);
  color: var(--bg);
  font-family: "Cairo", sans-serif;
  font-weight: 900;
  font-size: 28px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  min-width: 92px;
  justify-content: center;
}
.today-card__body { padding: 16px 18px; flex: 1; }
.today-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.today-card__title { font: 800 18px/1.45 "IBM Plex Sans Arabic"; color: var(--text); }
.today-card__detail { margin-top: 12px; display: flex; gap: 16px; flex-wrap: wrap; }
.today-card__text { margin: 0; flex: 1; min-width: 220px; font-size: 14px; line-height: 1.85; color: #bdbdb4; }
.today-card__link {
  margin-top: 12px;
  display: inline-block;
  font: 700 12px/1 "IBM Plex Sans Arabic";
  color: var(--green);
  text-decoration: none;
}

/* ---- year chips ---------------------------------------------------------- */

.year-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.year-chip {
  cursor: default;
  padding: 9px 16px;
  font: 800 16px/1 "Cairo", sans-serif;
  border: 2px solid var(--border);
  background: transparent;
  color: var(--dim);
  transition: all .15s;
  text-decoration: none;
  display: inline-block;
}
.year-chip--has { cursor: pointer; color: var(--text); border-color: rgba(255, 255, 255, .14); }
.year-chip--current { border-color: var(--green); background: var(--green); color: var(--bg); }

/* ---- month accordion / day rows ------------------------------------------ */

.months { display: flex; flex-direction: column; gap: 14px; }
.month { border: none; padding: 0; margin: 0; }
.month__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  background: var(--panel);
  border: 2px solid var(--border);
  border-inline-end: 6px solid var(--red);
  transition: all .2s;
}
.month__summary::-webkit-details-marker { display: none; }
.month[open] > .month__summary { background: var(--panel-2); border-color: var(--green); border-inline-end-color: var(--green); }
.month__index { font-family: "Cairo", sans-serif; font-weight: 900; font-size: 34px; color: var(--red); line-height: 1; min-width: 54px; }
.month__name { font-family: "Cairo", sans-serif; font-weight: 800; font-size: 22px; color: var(--text); }
.month__sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.month__count { font: 700 13px/1 "IBM Plex Sans Arabic"; color: var(--green); margin-inline-start: auto; white-space: nowrap; }

.month__days { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding-inline-end: 54px; }
.day-row {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border-soft);
  transition: all .15s;
  text-decoration: none;
  color: inherit;
}
.day-row:hover, .day-row:focus-visible { background: rgba(11, 191, 93, .08); border-color: rgba(11, 191, 93, .4); }
.day-row__left { display: flex; align-items: center; gap: 14px; }
.day-row__date { font-family: "Cairo", sans-serif; font-weight: 800; font-size: 15px; color: var(--green); min-width: 76px; }
.day-row__title { font: 700 15px/1.45 "IBM Plex Sans Arabic"; }
.day-row__right { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.day-row__people { font: 600 11px/1 "IBM Plex Sans Arabic"; color: var(--muted); }
.day-row__arrow { color: var(--green); font-size: 18px; }

.empty-state { padding: 40px; text-align: center; color: var(--muted); border: 2px dashed rgba(255, 255, 255, .12); }

/* ---- sticky sub-nav (day / person pages) ---------------------------------- */

.subnav {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 48px;
  background: rgba(10, 10, 10, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.back-link {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 14px/1 "IBM Plex Sans Arabic";
  color: var(--green);
  text-decoration: none;
}
.subnav__meta { color: var(--dim); font-size: 13px; }
.subnav__search {
  margin-inline-start: auto;
  font: 700 13px/1 "IBM Plex Sans Arabic";
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}
.subnav__search:hover { color: var(--green); }
.hero__search {
  display: inline-block;
  margin-top: 18px;
  font: 700 14px/1 "IBM Plex Sans Arabic";
  color: var(--green);
  text-decoration: none;
  border: 1px solid rgba(11, 191, 93, .4);
  padding: 9px 16px;
  transition: all .15s;
}
.hero__search:hover { background: rgba(11, 191, 93, .1); }

.overlay { background: var(--bg); animation: slideIn .35s ease both; }

/* ---- day detail ------------------------------------------------------------ */

.day-main { max-width: 980px; margin: 0 auto; padding: 48px; }
.day-tagrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.day-meta { color: var(--muted); font-size: 14px; }
.day-title { margin: 0 0 26px; font-family: "Cairo", sans-serif; font-weight: 900; font-size: 46px; line-height: 1.15; }

.story { max-width: 720px; font-size: 17px; line-height: 2.05; color: #d4d4cc; margin-bottom: 20px; }
.story > * + * { margin-top: 18px; }
.story p { margin: 0; }
/* Rich text renders as bare <p> siblings, which the rule above already
   spaces — but inside a lead or a testimony they sit one level down, out
   of its reach. Space them here rather than relying on editors leaving
   blank paragraphs behind, which is what the drafts used to do. */
.story .rich-text > * + * { margin-top: 18px; }
.story__lead > * + *,
.testimony__text > * + * { margin-top: 16px; }
.story ul, .story ol { margin: 0; padding-inline-start: 22px; }
.story li + li { margin-top: 6px; }
.story hr { border: 0; border-top: 1px solid var(--border); margin: 30px 0; }

/* Opening lines of a story: same text, one size up. */
.story__lead { font-size: 20px; line-height: 1.95; color: #e8e5db; font-weight: 500; }
.story__lead::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin-top: 22px;
  background: var(--green);
}

/* Section headings inside a long story. */
.story__heading {
  margin: 42px 0 0;
  font-family: "Cairo", sans-serif;
  font-weight: 800;
  font-size: 25px;
  line-height: 1.35;
  color: var(--text);
  padding-inline-start: 14px;
  border-inline-start: 3px solid var(--green);
}
.story > .story__heading + * { margin-top: 14px; }

/* A named witness account, set apart from the narration around it. */
.testimony {
  margin: 0;
  padding: 22px 24px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-inline-start: 3px solid var(--green);
}
.testimony__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.testimony__witness {
  font-family: "Cairo", sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--text);
}
.testimony__role { font-size: 13px; color: var(--muted); }
.testimony__text { font-size: 16.5px; line-height: 2; color: #c9c7bf; }

/* Chants: one line each, the way they were called out. */
.chants { margin: 0; }
.chants__intro { color: var(--muted); font-size: 15px; margin: 0 0 12px; }
.chants__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.chant {
  padding: 12px 18px;
  background: var(--panel-2);
  border-inline-start: 3px solid var(--amber);
  font-family: "Cairo", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #efe9d9;
}
.chant::before { content: "«"; }
.chant::after { content: "»"; }
.story .day-image { max-width: 100%; height: auto; border: 1px solid var(--border-soft); display: block; }
.story blockquote.quote {
  margin: 0;
  padding: 16px 20px;
  border-inline-start: 4px solid var(--red);
  background: rgba(226, 55, 68, .08);
  font-family: "Cairo", sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: #f3d6d8;
}
.quote__attribution { display: block; margin-top: 8px; font-size: 13px; font-weight: 600; color: #e2a0a6; }
.story .embed-block { position: relative; }
.story .embed-block iframe { max-width: 100%; }

/* Self-hosted video/audio uploads */
.day-media { margin: 0; }
.day-media__video {
  display: block;
  width: 100%;
  max-height: 70vh;
  background: #000;
  border: 1px solid var(--border-soft);
}
.day-media__audio { display: block; width: 100%; }
.day-media__caption { margin-top: 8px; font-size: 13px; color: var(--muted); }

.people-groups { display: flex; flex-direction: column; gap: 32px; margin-top: 14px; border-top: 2px solid var(--border); padding-top: 30px; }
.people-group__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.people-group__bar { width: 6px; height: 24px; display: inline-block; }
.people-group__title { font-family: "Cairo", sans-serif; font-weight: 800; font-size: 22px; }
.people-group__count { font: 700 13px/1 "IBM Plex Sans Arabic"; color: var(--muted); }
.people-grid { display: flex; flex-wrap: wrap; gap: 22px; }

.person-card { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 126px; text-decoration: none; color: inherit; transition: transform .2s; }
.person-card:hover, .person-card:focus-visible { transform: translateY(-4px); }
.person-card__photo {
  width: 120px; height: 120px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: "Cairo", sans-serif; font-weight: 900; font-size: 36px;
  color: rgba(255, 255, 255, .92);
  border: 3px solid transparent;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  object-fit: cover;
}
.person-card__name { font: 700 14px/1.35 "IBM Plex Sans Arabic"; color: var(--text); text-align: center; }
.person-card__status { text-align: center; font: 700 11px/1 "IBM Plex Sans Arabic"; }

/* ---- person detail ---------------------------------------------------------- */

.person-main { max-width: 920px; margin: 0 auto; padding: 48px; display: flex; gap: 36px; flex-wrap: wrap; align-items: flex-start; }
.person-photo-col { flex: none; width: 260px; }
.person-photo-big {
  width: 260px; height: 300px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-family: "Cairo", sans-serif; font-weight: 900; font-size: 88px;
  color: rgba(255, 255, 255, .92);
  border: 4px solid transparent;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
  object-fit: cover;
}
.person-badge-wrap { margin-top: 14px; display: flex; justify-content: center; }
.status-badge { font: 700 13px/1 "IBM Plex Sans Arabic"; color: var(--bg); padding: 7px 16px; }
.person-info { flex: 1; min-width: 280px; }
.person-info h1 { margin: 0 0 6px; font-family: "Cairo", sans-serif; font-weight: 900; font-size: 44px; line-height: 1.12; }
.person-role { color: var(--muted); font-size: 15px; margin-bottom: 24px; }
.person-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-bottom: 28px; }
.person-fact { background: #0f0f0f; padding: 16px 18px; }
.person-fact__label { color: var(--dim); font-size: 12px; margin-bottom: 5px; }
.person-fact__value { font-family: "Cairo", sans-serif; font-weight: 700; font-size: 18px; }
.person-bio-title { font-family: "Cairo", sans-serif; font-weight: 800; font-size: 18px; margin-bottom: 10px; }
.person-bio { margin: 0; font-size: 16px; line-height: 2.05; color: #d4d4cc; }

/* ---- footer / error page --------------------------------------------------- */

.site-footer { padding: 22px 48px; border-top: 1px solid var(--border-soft); color: var(--dim); font-size: 12px; }

.error-page { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px; gap: 8px; }
.error-page__code { font-family: "Cairo", sans-serif; font-weight: 900; font-size: 72px; color: var(--red); }
.error-page h1 { font-family: "Cairo", sans-serif; margin: 0; }
.error-page p { color: var(--muted); max-width: 480px; }
.error-page .back-link { margin-top: 12px; }

/* ---- status / avatar utility classes --------------------------------------
   Kept as a small, enumerable set of classes (4 statuses x few properties,
   6 avatar gradients) rather than inline `style="color:{{ ... }}"` so the
   production Content-Security-Policy can drop style-src 'unsafe-inline'. */

.status-border-martyr { border-color: var(--red); }
.status-border-detained { border-color: var(--amber); }
.status-border-missing { border-color: var(--muted); }
.status-border-released { border-color: var(--green); }

.status-text-martyr { color: var(--red); }
.status-text-detained { color: var(--amber); }
.status-text-missing { color: var(--muted); }
.status-text-released { color: var(--green); }

.status-bg-martyr { background: var(--red); }
.status-bg-detained { background: var(--amber); }
.status-bg-missing { background: var(--muted); }
.status-bg-released { background: var(--green); }

.avatar-pal-0 { background: linear-gradient(135deg, #1f6f4a, #0d3322); }
.avatar-pal-1 { background: linear-gradient(135deg, #7a1f24, #330d10); }
.avatar-pal-2 { background: linear-gradient(135deg, #7a5a1f, #332610); }
.avatar-pal-3 { background: linear-gradient(135deg, #1f4a7a, #0d1f33); }
.avatar-pal-4 { background: linear-gradient(135deg, #5a1f7a, #260d33); }
.avatar-pal-5 { background: linear-gradient(135deg, #1f7a6f, #0d3330); }

/* ---- year page ---------------------------------------------------------------- */

.year-summary { color: var(--muted); font-size: 15px; line-height: 1.9; max-width: 640px; margin: 0 0 20px; }

/* ---- search ------------------------------------------------------------------- */

.search-form { display: flex; gap: 10px; max-width: 560px; margin: 0 0 26px; }
.search-form__input {
  flex: 1;
  background: var(--panel);
  border: 2px solid var(--border);
  color: var(--text);
  font: 500 16px/1.4 "IBM Plex Sans Arabic", sans-serif;
  padding: 12px 16px;
  min-width: 0;
}
.search-form__input:focus { border-color: var(--green); outline: none; }
.search-form__input::placeholder { color: var(--dim); }
.search-form__submit {
  cursor: pointer;
  background: var(--green);
  border: 2px solid var(--green);
  color: var(--bg);
  font: 800 16px/1 "Cairo", sans-serif;
  padding: 12px 26px;
  transition: all .15s;
}
.search-form__submit:hover { background: transparent; color: var(--green); }
.search-meta { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.search-results { display: flex; flex-direction: column; gap: 8px; }
.search-pagination { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.search-pagination__state { color: var(--muted); font-size: 13px; }

/* ==========================================================================
   Responsive layer — mobile-first breakpoints matching the original archive.
   ========================================================================== */

@media (max-width: 768px) {
  .hero { padding: 44px 28px 26px; }
  .section, .section--bordered, .site-footer, .subnav, .day-main, .person-main {
    padding-left: 28px;
    padding-right: 28px;
  }
}

@media (max-width: 560px) {
  html, body { overflow-x: hidden; }
  .hero { padding: 36px 18px 22px; }
  .hero h1 { font-size: clamp(30px, 8.4vw, 58px); line-height: 1.1; }
  .hero__intro { font-size: 15px; line-height: 1.8; }
  .section, .section--bordered, .site-footer { padding-left: 18px; padding-right: 18px; }
  .day-title, .section__title--big { font-size: clamp(27px, 7.4vw, 44px); line-height: 1.14; }
  .subnav { padding: 14px 18px; gap: 10px; }
  .day-main, .person-main { padding: 26px 18px; }
  .today-card__body { padding: 16px 15px; gap: 13px; }
  .month__days { padding-inline-end: 12px; }
  .person-facts { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
  .person-photo-col { width: 100%; display: flex; flex-direction: column; align-items: center; }
  .person-photo-big { width: min(230px, 60vw); height: auto; aspect-ratio: 23 / 30; font-size: clamp(46px, 15vw, 80px); }
  .story { font-size: 16px; line-height: 1.95; }
  .story__lead { font-size: 18px; }
  .story__heading { font-size: 21px; margin-top: 34px; }
  .testimony { padding: 18px 16px; }
  .chant { font-size: 16px; padding: 11px 14px; }
}