/* =========================================================================
   global.css
   Design tokens, CSS reset, base typography and shared primitives.
   Aesthetic: editorial newsroom — ink-black + signal-red, warm paper bg,
   a strong display serif (Frank Ruhl Libre) over a clean Hebrew sans (Heebo).
   RTL-first.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@500;700;900&family=Heebo:wght@400;500;700;800&display=swap');

:root {
  /* Palette */
  --ink:        #14110f;   /* near-black, warm */
  --ink-2:      #2c2826;
  --paper:      #f7f4ee;   /* warm off-white */
  --paper-2:    #efe9df;
  --card:       #ffffff;
  --signal:     #d12f24;   /* signal red */
  --signal-dk:  #a8231a;
  --accent:     #1f6f6b;   /* teal accent for links/secondary */
  --muted:      #6f6760;
  --line:       #e2dad0;   /* hairlines */
  --line-2:     #d3c9bc;

  /* Type */
  --display: 'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
  --body:    'Heebo', system-ui, -apple-system, sans-serif;

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Radius + shadow */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(20,17,15,.06), 0 1px 3px rgba(20,17,15,.08);
  --shadow-md: 0 4px 14px rgba(20,17,15,.10);
  --shadow-lg: 0 18px 50px rgba(20,17,15,.18);

  --maxw: 1240px;
  --header-h: 116px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--body);
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(209,47,36,.05), transparent 60%),
    var(--paper);
  color: var(--ink);
  line-height: 1.6;
  direction: rtl;
  text-align: right;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 { font-family: var(--display); line-height: 1.15; margin: 0; font-weight: 700; }

::selection { background: var(--signal); color: #fff; }

/* Shared primitives ----------------------------------------------------- */

.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-5); }

.page-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: -.01em;
}
.page-sub { color: var(--muted); margin-top: var(--sp-2); font-size: 1.05rem; }

.section-title {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 800;
  position: relative;
  padding-bottom: var(--sp-2);
}
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-4);
  border-bottom: 3px solid var(--ink);
  padding-bottom: var(--sp-2);
}
.section-more {
  font-family: var(--body); font-weight: 700; color: var(--signal);
  font-size: .95rem; white-space: nowrap; transition: opacity .2s;
}
.section-more:hover { opacity: .7; }

.btn {
  display: inline-block; padding: var(--sp-3) var(--sp-5);
  border: 2px solid var(--ink); border-radius: var(--r-sm);
  font-weight: 700; background: transparent; transition: all .2s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--primary { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn--primary:hover { background: var(--signal-dk); border-color: var(--signal-dk); }

/* Loading + empty states */
.feed-loading, .widget__loading {
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--muted); padding: var(--sp-5) 0; font-weight: 500;
}
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid var(--line-2); border-top-color: var(--signal);
  animation: spin .8s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.feed-empty, .widget__empty {
  color: var(--muted); padding: var(--sp-5); text-align: center;
  border: 1px dashed var(--line-2); border-radius: var(--r-md);
  background: var(--card);
}

.notfound { text-align: center; padding: var(--sp-8) var(--sp-4); }
.notfound h1 { font-size: 2.4rem; margin-bottom: var(--sp-4); }
.notfound p { color: var(--muted); margin-bottom: var(--sp-5); }

/* Reveal animation for grids/cards */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}