/* ============================================================================
   system.css — free-alkhalidi.org design system
   Phase 0: tokens + reset. Built on the site's REAL brand palette (measured
   from index.html v77), not invented values.

   Methodology: CSS @layer to control the cascade and make !important
   unnecessary. Layer order below defines precedence (later wins).
   Mobile-first. CSS logical properties throughout for RTL (Arabic) + LTR.
   ============================================================================ */

@layer tokens, base, layout, components, utilities;

/* ============================================================================
   @layer tokens — the single source of design decisions
   ============================================================================ */
@layer tokens {
  :root {
    /* ---- Brand primitives (measured from the live site) ---- */
    --c-navy-900: #0B1220;   /* page background (existing --bg) */
    --c-navy-800: #0F1928;   /* card surface (existing --bg-card) */
    --c-navy-700: #1A2942;   /* raised surface / borders */
    --c-red-500:  #E4002B;   /* brand red (existing --red) */
    --c-red-600:  #A3001E;   /* dark red, hover (existing --red-dark) */
    --c-gold-500: #C5A572;   /* brand gold (existing --gold) */
    --c-gold-400: #d9bd8e;   /* lighter gold for hover on dark */
    --c-ink-50:   #EDEFF3;   /* primary text (existing --text) */
    --c-ink-300:  #8B96A8;   /* dim text (existing --text-dim) */
    --c-ink-500:  #4A5568;   /* faint text (existing --text-faint) */
    --c-white:    #ffffff;
    --c-green-500: #2ea043;  /* success */
    --c-amber-500: #d4a437;  /* warning */

    /* ---- Semantic roles (use THESE in components, not primitives) ---- */
    --color-bg:            var(--c-navy-900);
    --color-surface:       var(--c-navy-800);
    --color-surface-raised:var(--c-navy-700);
    --color-border:        rgba(237, 239, 243, 0.08); /* existing --rule */
    --color-border-strong: rgba(237, 239, 243, 0.18);
    --color-text:          var(--c-ink-50);
    --color-text-dim:      var(--c-ink-300);
    --color-text-faint:    var(--c-ink-500);
    --color-accent:        var(--c-red-500);
    --color-accent-hover:  var(--c-red-600);
    --color-highlight:     var(--c-gold-500);
    --color-highlight-hover:var(--c-gold-400);
    --color-danger:        var(--c-red-500);
    --color-success:       var(--c-green-500);
    --color-warning:       var(--c-amber-500);
    --color-focus:         var(--c-gold-400);

    /* ---- Fonts (preserve brand identity; add Noto for non-Latin scripts) ----
       System font stacks only: zero third-party requests by design. Native
       Noto Sans cover Arabic (RTL), Cyrillic (bg), and Greek (el). */
    --font-sans:    system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    --font-body:    system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    --font-serif:   Georgia, 'Times New Roman', serif;
    --font-arabic:  'Segoe UI','SF Arabic','Noto Naskh Arabic','Noto Sans Arabic','Geeza Pro',Tahoma,system-ui,sans-serif;
    --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, monospace;

    /* ---- Type scale (fluid via clamp; hard 12px floor, 16px body) ---- */
    --fs-caption: 0.75rem;                                  /* 12px floor */
    --fs-small:   0.875rem;                                 /* 14px */
    --fs-body:    clamp(1rem, 0.95rem + 0.25vw, 1.125rem);  /* 16 -> 18px */
    --fs-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);   /* 20 -> 24px */
    --fs-h2:      clamp(1.5rem, 1.25rem + 1vw, 2rem);       /* 24 -> 32px */
    --fs-h1:      clamp(2rem, 1.5rem + 2.2vw, 3.25rem);     /* 32 -> 52px */
    --fs-hero:    clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);    /* 40 -> 72px */

    --lh-tight:   1.15;
    --lh-heading: 1.25;
    --lh-body:    1.6;
    --lh-arabic:  1.8;

    /* ---- Spacing scale (4 / 8 base) ---- */
    --space-1: 0.25rem;  /* 4 */
    --space-2: 0.5rem;   /* 8 */
    --space-3: 0.75rem;  /* 12 */
    --space-4: 1rem;     /* 16 */
    --space-5: 1.5rem;   /* 24 */
    --space-6: 2rem;     /* 32 */
    --space-7: 3rem;     /* 48 */
    --space-8: 4rem;     /* 64 */
    --space-9: 6rem;     /* 96 */

    /* ---- Radius scale (3 values) ---- */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-full: 999px;

    /* ---- Elevation scale (3 levels) ---- */
    --shadow-1: 0 1px 2px rgba(0,0,0,.30);
    --shadow-2: 0 4px 12px rgba(0,0,0,.35);
    --shadow-3: 0 12px 32px rgba(0,0,0,.45);

    /* ---- z-index scale ---- */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky-nav: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;

    /* ---- Motion ---- */
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 360ms;
    --ease-standard: cubic-bezier(.2, 0, 0, 1);
    --ease-out: cubic-bezier(0, 0, .2, 1);

    /* ---- Layout ---- */
    --container-max: 1280px;
    --container-text: 760px;   /* measure ~70ch */
    --gutter: var(--space-4);
    --section-gap: var(--space-7);
    --tap-min: 44px;           /* WCAG AAA target size */
  }

  /* Desktop layout token overrides */
  @media (min-width: 1024px) {
    :root {
      --gutter: var(--space-6);
      --section-gap: var(--space-9);
    }
  }
}

/* ============================================================================
   @layer base — reset + element defaults. Mobile-first, logical properties.
   ============================================================================ */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-block-size: 100vh;
  }

  /* Arabic / RTL: switch font stack and loosen line-height */
  html[lang="ar"] body,
  [dir="rtl"] {
    font-family: var(--font-arabic);
    line-height: var(--lh-arabic);
  }

  h1, h2, h3, h4 {
    font-family: var(--font-sans);
    line-height: var(--lh-heading);
    font-weight: 800;
    text-wrap: balance;
  }
  html[lang="ar"] :is(h1, h2, h3, h4) { font-family: var(--font-arabic); }

  h1 { font-size: var(--fs-h1); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); }

  p { text-wrap: pretty; }

  /* Media never overflows its container */
  img, picture, video, canvas, svg { display: block; max-inline-size: 100%; block-size: auto; }

  /* Links inherit brand; clear focus ring for keyboard users */
  a { color: inherit; text-decoration-color: var(--color-highlight); }
  :focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* Form controls inherit type; 16px floor prevents iOS auto-zoom */
  input, button, textarea, select { font: inherit; color: inherit; }

  /* Long words (German/Finnish/URLs) wrap instead of overflowing */
  p, li, h1, h2, h3, dd, dt, figcaption { overflow-wrap: break-word; }

  /* Respect reduced-motion (the one legitimate !important) */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
  }
}

/* ============================================================================
   @layer layout — structural primitives (Every Layout style)
   ============================================================================ */
@layer layout {
  .container {
    inline-size: 100%;
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .container--text { max-inline-size: var(--container-text); }

  .section { padding-block: var(--section-gap); }

  /* Auto-fitting card grid: no media queries needed */
  .grid-auto {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  }
  .grid-2 { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
  .grid-3 { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
  @media (min-width: 768px) {
    .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  /* Vertical rhythm helper */
  .stack > * + * { margin-block-start: var(--space-4); }
}

/* ============================================================================
   @layer components — the unified, reusable components
   These are OPT-IN. Existing pages keep their old classes until migrated.
   ============================================================================ */
@layer components {
  /* ---- Card: one base, a few modifiers (replaces 15+ ad-hoc card classes) ---- */
  .card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    box-shadow: var(--shadow-1);
    color: var(--color-text);
  }
  .card:where(:hover) {
    box-shadow: var(--shadow-2);
    border-color: var(--color-border-strong);
  }
  .card--feature { border-inline-start: 3px solid var(--color-accent); }
  .card--stat    { text-align: center; }
  .card--media   { padding: 0; overflow: hidden; }
  .card--quiet   { background: transparent; box-shadow: none; }
  .card :where(a, button) { min-block-size: var(--tap-min); }

  /* ---- Buttons: primary / secondary / ghost, all >= 44px tap target ---- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: var(--tap-min);
    min-inline-size: var(--tap-min);
    padding-block: var(--space-3);
    padding-inline: var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur-base) var(--ease-standard),
                border-color var(--dur-base) var(--ease-standard);
  }
  .btn--primary   { background: var(--color-accent); color: var(--c-white); }
  .btn--primary:where(:hover) { background: var(--color-accent-hover); }
  .btn--secondary { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); }
  .btn--secondary:where(:hover) { border-color: var(--color-highlight); }
  .btn--ghost     { background: transparent; color: var(--color-text-dim); }
  .btn--gold      { background: var(--color-highlight); color: var(--c-navy-900); }

  /* ---- Tags / pills ---- */
  .tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--fs-caption);
    background: var(--color-surface-raised);
    color: var(--color-text-dim);
  }
  .tag--urgent { background: rgba(228,0,43,.15); color: #ff7d93; }
  .tag--legal  { background: rgba(197,165,114,.15); color: var(--color-highlight); }

  /* ---- Stat block ---- */
  .stat { text-align: center; }
  .stat__num   { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-h1); color: var(--color-highlight); line-height: 1; }
  .stat__label { font-size: var(--fs-small); color: var(--color-text-dim); }

  /* ---- Icon button: 24px glyph inside 44px touch area ---- */
  .icon-button {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: var(--tap-min); block-size: var(--tap-min);
    background: transparent; border: 0; cursor: pointer; color: inherit;
  }
  .icon-button svg { inline-size: 24px; block-size: 24px; }

  /* ---- Protest gallery: CSS scroll-snap carousel (no JS library) ---- */
  .gallery {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    block-size: 200px;
    padding-block: var(--space-2);
  }
  .gallery__item {
    flex: 0 0 auto;
    inline-size: 140px; block-size: 100px;
    scroll-snap-align: start;
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .gallery__item img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  @media (min-width: 1024px) {
    .gallery { block-size: 280px; }
    .gallery__item { inline-size: 220px; block-size: 160px; }
  }

  /* ---- Video facade (click-to-load) for the Mary Lawlor embed ---- */
  .video-facade {
    position: relative;
    aspect-ratio: 16 / 9;
    inline-size: 100%;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--color-border);
  }
  .video-facade__play {
    position: absolute;
    inset-block-start: 50%; inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    inline-size: 68px; block-size: 68px;
    border-radius: var(--radius-full);
    background: rgba(228,0,43,.92);
    display: grid; place-items: center;
  }
}

/* ============================================================================
   @layer utilities — single-purpose helpers (win the cascade, no !important)
   ============================================================================ */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .text-center { text-align: center; }
  .text-balance { text-wrap: balance; }
  .measure { max-inline-size: var(--container-text); }
  .no-scroll { overflow: hidden; }
  .mt-0 { margin-block-start: 0; }
}

/* ============================================================
   UPDATE BAR  -  canonical responsive fix (Track C)
   Unlayered and scoped to .update-bar so it overrides the legacy
   per-page inline bar CSS (pretty and minified variants alike)
   until those pages are migrated. Specificity (0,2,0) beats the
   legacy single-class rules (0,1,0) regardless of source order.
   Goals: the news clips with an ellipsis and never collides with
   the live local time; the live time is hidden on phones; no bar
   font drops below 12px on mobile; legacy vw width caps removed.
   The two !important here only exist to defeat legacy inline
   !important and will be removed once the inline bar CSS is deleted.
   ============================================================ */
.update-bar .update-left  { flex: 1 1 auto; min-width: 0; }
.update-bar .update-right { flex: 0 0 auto; }
.update-bar .ub-track {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
  max-width: none;
}
@media (max-width: 768px) {
  .update-bar .ub-local-time { display: none !important; }
  .update-bar .ub-track { font-size: .75rem !important; letter-spacing: .1em; }
}

/* ============================================================
   Protest photo strip (index): compact horizontal scroll-snap
   gallery linking to the full archive on protests.html.
   Pure CSS scrolling; the prev/next buttons are JS progressive
   enhancement. Logical properties keep RTL correct untouched.
   ============================================================ */
.protest-strip-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.protest-strip-link { font-family: var(--font-sans); font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #F4A7AE; text-decoration: none; border-bottom: 1px solid rgba(225,29,46,.55); padding-bottom: .15rem; white-space: nowrap; }
.protest-strip-link:hover, .protest-strip-link:focus-visible { color: #fff; border-bottom-color: #E11D2E; }
.protest-strip-wrap { position: relative; }
.protest-strip { display: flex; gap: .65rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: inline mandatory; padding-bottom: .5rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(225,29,46,.5) transparent; }
@media (prefers-reduced-motion: no-preference) { .protest-strip { scroll-behavior: smooth; } }
.protest-strip > a { flex: 0 0 auto; scroll-snap-align: start; display: block; outline-offset: 3px; }
.protest-strip img { height: 200px; width: auto; display: block; border: 1px solid rgba(237,239,243,.12); filter: saturate(.92); transition: filter .2s ease, border-color .2s ease; }
.protest-strip > a:hover img, .protest-strip > a:focus-visible img { filter: saturate(1.05); border-color: rgba(225,29,46,.6); }
.protest-strip-btn { position: absolute; inset-block-start: 50%; transform: translateY(-50%); z-index: 4; display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(237,239,243,.25); background: rgba(8,14,27,.85); color: #EDEFF3; cursor: pointer; backdrop-filter: blur(6px); }
.protest-strip-btn:hover, .protest-strip-btn:focus-visible { border-color: #E11D2E; color: #fff; }
.protest-strip-btn svg { width: 18px; height: 18px; }
.protest-strip-btn.prev { inset-inline-start: -8px; }
.protest-strip-btn.next { inset-inline-end: -8px; }
.protest-strip-wrap.js .protest-strip-btn { display: inline-flex; }
@media (max-width: 640px) { .protest-strip img { height: 160px; } .protest-strip-btn { display: none !important; } }

/* ============================================================
   Engagement layer v85: scroll reveal, focus polish, counter,
   and the first-person quote band. All motion is gated behind
   prefers-reduced-motion and applied only when JS is present.
   ============================================================ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

a:focus-visible, button:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #E11D2E; outline-offset: 3px; border-radius: 2px;
}

.js-day-counter, .stat-num { font-variant-numeric: tabular-nums; }

.own-words { border-block: 1px solid rgba(225,29,46,.35); padding-block: .4rem; }
.own-words .ow-quote { display: block; text-decoration: none; padding: 1.1rem 0 1.1rem 1.2rem; border-inline-start: 3px solid rgba(225,29,46,.65); margin-block: 1rem; transition: border-color .2s ease, background .2s ease; }
.own-words .ow-quote:hover, .own-words .ow-quote:focus-visible { border-inline-start-color: #E11D2E; background: rgba(225,29,46,.06); }
.own-words .ow-text { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: clamp(1.25rem, 2.6vw, 1.9rem); line-height: 1.35; color: #EDEFF3; }
.own-words .ow-meta { display: block; margin-top: .55rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(237,239,243,.55); }