@import './tokens/fonts.css';
@import './tokens/colors.css';
@import './tokens/typography.css';
@import './tokens/spacing.css';
@import './tokens/effects.css';

*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100vh}
[hidden]{display:none!important}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;inset-inline-start:-9999px;z-index:100}
.skip-link:focus{inset-inline-start:16px;top:8px;background:var(--surface-raised);color:var(--blue-900);padding:8px 16px;border-radius:var(--radius-s);box-shadow:var(--shadow-raised)}
:focus-visible{outline:3px solid var(--gold-400);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
html{scroll-behavior:smooth}
:target{scroll-margin-top:16px}

/* ---------- אייקונים (mask, כמו Icon.jsx) ---------- */
.icon{display:inline-flex;width:18px;height:18px;flex:none;background-color:currentColor;
  -webkit-mask:var(--icon) no-repeat center / contain;mask:var(--icon) no-repeat center / contain}

/* ---------- כפתורים ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:500;
  font-size:16px;padding:9px 20px;border-radius:var(--radius-s);cursor:pointer;text-decoration:none;
  transition:filter var(--dur) var(--ease),background var(--dur) var(--ease)}
.btn:hover{filter:brightness(.93);text-decoration:none}
.btn:active{filter:brightness(.85)}
.btn--sm{font-size:14px;padding:6px 14px}
.btn--primary{background:var(--primary);color:var(--text-on-accent);border:1px solid var(--primary)}
.btn--primary:hover{color:var(--text-on-accent)}
.btn--secondary{background:transparent;color:var(--primary);border:1px solid var(--blue-500)}
.btn--gold{background:var(--gold-700);color:#fff;border:1px solid var(--gold-700)}
.btn--gold:hover{color:#fff}
.btn--ghost{background:transparent;color:var(--primary);border:1px solid transparent}
.btn--ghost:hover{background:var(--blue-100);filter:none}

/* ---------- תגית ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-size:13px;
  font-weight:500;padding:3px 12px;border-radius:var(--radius-pill);background:var(--gold-100);color:var(--gold-700)}

/* ---------- כותרת מדור ---------- */
.section-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  border-bottom:var(--rule-gold);padding-bottom:10px;margin-bottom:var(--sp-5)}
.section-header h2{margin:0;font-size:var(--fs-h2)}
.section-header__subtitle{font-size:var(--fs-small);color:var(--text-muted);margin-top:2px}

/* ---------- שדה קלט ---------- */
.input{display:flex;flex-direction:column;gap:6px;font-family:var(--font-body)}
.input__field{display:flex;align-items:center;gap:8px;background:var(--surface-raised);
  border:1px solid var(--border-subtle);border-radius:var(--radius-s);padding:8px 12px;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.input__field:focus-within{border-color:var(--blue-500);box-shadow:0 0 0 3px var(--blue-100)}
.input__field .icon{color:var(--ink-300)}
.input input{border:none;outline:none;background:transparent;font-family:var(--font-body);
  font-size:16px;color:var(--text-body);width:100%}

/* ---------- כרטיס פרשה (ארכיון בתצוגת רשת, קישור לעמוד הדף) ---------- */
.parasha-row{position:relative;background:var(--surface-raised);border:var(--border-card);
  border-radius:var(--radius-m);transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease)}
.parasha-row::before{content:'';position:absolute;inset-inline-start:0;top:12px;bottom:12px;
  width:3px;border-radius:3px;background:var(--parchment-300);z-index:1}
.parasha-row--has-pdf::before{background:var(--gold-600)}
.parasha-row:hover{box-shadow:var(--shadow-card);transform:translateY(-2px)}
.parasha-row__link{display:flex;flex-direction:column;gap:10px;height:100%;
  padding:14px 16px 12px 20px;color:inherit;text-decoration:none}
.parasha-row__link:hover{text-decoration:none;color:inherit}
.parasha-row__head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.parasha-row__icon{color:var(--ink-300);flex:none}
.parasha-row--has-pdf .parasha-row__icon{color:var(--gold-600)}
.parasha-row__name{font-family:var(--font-display);font-size:18px;font-weight:500;color:var(--text-heading);flex:1 1 auto}
.parasha-row__note{font-size:13.5px;font-weight:600;color:#84620E;background:var(--parchment-100);
  border-radius:var(--radius-pill);padding:2px 10px;white-space:nowrap}
.parasha-row__meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-top:auto;
  font-size:13px;color:var(--text-muted)}
.parasha-row__metaitem{display:inline-flex;align-items:center;gap:5px}
.parasha-row__soon{font-size:14px;color:var(--ink-500)}

/* ---------- נגן פודקאסט (עמוד הדף / הירו) ---------- */
.podcast{display:flex;flex-direction:column;gap:8px}
.podcast__title{display:flex;align-items:center;gap:7px;font-weight:600;font-size:14px;color:var(--text-heading)}
.podcast__title::before{content:'';width:16px;height:16px;flex:none;background-color:#1DB954;
  -webkit-mask:url('assets/icons/headphones.svg') no-repeat center / contain;mask:url('assets/icons/headphones.svg') no-repeat center / contain}
.podcast iframe{width:100%;border:none;border-radius:12px;display:block}
.podcast audio{width:100%;height:44px}
.podcast__link{font-size:13.5px;color:var(--link)}
.podcast__showlink{text-decoration:none;color:var(--link)}
.podcast__showlink:hover{text-decoration:underline;color:var(--link)}

/* ---------- ציטוט פסוק ---------- */
.pasuk-quote{margin:0;background:var(--surface-card);border:var(--border-card);
  border-radius:var(--radius-m);padding:var(--sp-5) var(--sp-6);text-align:center}
.pasuk-quote blockquote{margin:0;font-size:20px;color:var(--blue-900)}
.pasuk-quote figcaption{margin-top:10px;font-family:var(--font-body);font-size:13.5px;color:var(--gold-700);letter-spacing:.02em}

/* ---------- חידה לשולחן שבת ---------- */
.riddle-box{background:var(--burgundy-100);border:1px solid #E4C6CA;border-radius:var(--radius-m);
  padding:var(--sp-4) var(--sp-5);font-family:var(--font-body)}
.riddle-box__title{display:flex;align-items:center;gap:8px;color:var(--burgundy-700);font-weight:600;font-size:15px;margin:0 0 6px;font-family:var(--font-body);line-height:1.4}
.riddle-box__body{color:var(--ink-900);font-size:16px;line-height:1.65}
.riddle-box__prev{margin-top:12px;border-top:1px solid #E4C6CA;padding-top:10px;font-size:15px}
.riddle-box__prev summary{cursor:pointer;color:var(--burgundy-700);font-weight:600}
.riddle-box__prev-q{margin:8px 0 4px;color:var(--ink-700);font-size:14.5px}
.riddle-box__prev-a{margin:0;color:var(--ink-900);font-weight:500}

/* ---------- מבנה עמוד ---------- */
.container{max-width:var(--page-width);margin:0 auto;padding-inline:24px}

.site-header{background:var(--blue-900);color:var(--text-on-dark)}
.site-header__inner{display:flex;align-items:center;gap:24px;padding-block:14px;flex-wrap:wrap}
.wordmark{text-decoration:none;display:flex;flex-direction:column}
.wordmark:hover{text-decoration:none}
.wordmark__title{font-family:var(--font-display);font-weight:900;font-size:24px;color:#F7F2E7;line-height:1.2}
.wordmark__sub{font-size:13px;color:var(--gold-400);letter-spacing:.04em}
.wordmark__byline{font-size:11.5px;opacity:.85}
.site-nav{display:flex;gap:20px;flex:1 1 auto;font-size:15px;flex-wrap:wrap}
.site-nav a{padding:6px 0;display:inline-block}
.site-nav a{color:#DCE4F0}
.site-nav a:hover{color:#fff}
.site-header .input{width:240px}
.header-podcast{display:inline-flex;align-items:center;gap:7px;flex:none;font-size:14.5px;font-weight:600;
  color:#1DB954;background:rgba(29,185,84,.12);border:1px solid rgba(29,185,84,.5);
  border-radius:var(--radius-pill);padding:6px 14px;text-decoration:none;white-space:nowrap}
.header-podcast:hover{background:rgba(29,185,84,.22);color:#1DB954;text-decoration:none}
.header-podcast .icon{color:#1DB954}

.hero{background:var(--parchment-100);border-bottom:var(--rule-gold)}
.hero__inner{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding-block:56px 48px}
.hero--stack .hero__inner{grid-template-columns:1fr;gap:32px;align-items:start}
.hero--stack #hero-side{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.hero--stack .hero-preview__img{height:260px}
.hero__laky{font-size:14px;color:#84620E;font-weight:600;letter-spacing:.04em;margin-bottom:10px}
.hero-badges{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:14px}
.hero-badge{display:inline-flex;align-items:center;gap:10px;background:var(--blue-900);color:#F7F2E7;
  border-radius:var(--radius-pill);padding:6px 16px;font-size:15px;flex-wrap:wrap}
.hero-badge__kind{color:var(--gold-400);font-weight:600}
.hero-badge__name{font-family:var(--font-display);font-weight:700;font-size:17px}
.hero-badge__date{color:#B9C5D8}
#hero-side{display:flex;flex-direction:column;gap:20px}
.hero-preview{background:var(--surface-raised);border:var(--border-card);border-radius:var(--radius-m);
  box-shadow:var(--shadow-card);overflow:hidden;display:flex;flex-direction:column}
.hero-preview__bar{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--parchment-200)}
.hero-preview__title{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--text-heading);flex:1}
.hero-preview__more{font-size:13.5px;font-weight:600;color:var(--link);white-space:nowrap}
.hero-preview__imglink{display:block;text-decoration:none}
.hero-preview__img{display:block;width:100%;height:320px;object-fit:cover;object-position:top;background:#fff;transition:opacity var(--dur) var(--ease)}
.hero-preview__imglink:hover .hero-preview__img{opacity:.92}
.hero-preview__podcast{padding:12px 16px;border-top:1px solid var(--parchment-200)}
/* גודל רציף לפי רוחב המסך: בנייד צר ~27px, בדסקטופ 44px — בלי קפיצה בין מדרגות.
   שורה עברית ארוכה במשקל 900 נעשית קיר; גובה שורה צפוף יותר מרגיע אותה. */
.hero h1{margin:0;font-size:clamp(27px,6.2vw,44px);font-weight:900;line-height:1.16;letter-spacing:-.01em;
  text-wrap:balance}
.hero__lead{max-width:560px;color:var(--ink-700);margin-top:16px}
.hero__actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}

.site-main{padding-top:48px}
.site-main__grid{display:grid;grid-template-columns:2.2fr 1fr;gap:40px;align-items:start}

.sefer-section{margin-bottom:var(--sp-7)}
.sefer-section__list{display:grid;grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  gap:14px;align-items:start;list-style:none;margin:0;padding:0}
.search-empty{background:var(--surface-card);border:var(--border-card);border-radius:var(--radius-m);
  padding:var(--sp-5);color:var(--ink-700);font-size:16px}

.sidebar{display:flex;flex-direction:column;gap:20px;position:sticky;top:24px}
.sidebar-card{background:var(--surface-card);border:var(--border-card);border-radius:var(--radius-m);padding:var(--sp-5)}
.sidebar-card__title{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--text-heading);margin:0 0 6px;line-height:1.3}
.sidebar-card p{margin:0 0 12px;font-size:15px;color:var(--ink-700)}
.sidebar__note{font-size:15px;color:var(--text-muted);line-height:1.6}

/* ---------- טופס הרשמה לרשימת התפוצה ---------- */
.subscribe-dialog{height:auto;max-height:90vh;width:min(480px,100%)}
.subscribe-dialog__body{padding:20px 24px 24px;overflow-y:auto}
#subscribe-form{display:flex;flex-direction:column;gap:16px}
.input__label{font-size:14px;font-weight:500;color:var(--ink-700)}
.subscribe-days{border:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.subscribe-days legend{padding:0;font-size:15px;font-weight:600;color:var(--text-heading);margin-bottom:8px}
.subscribe-days label{display:flex;align-items:flex-start;gap:10px;font-size:15px;cursor:pointer;
  border:1px solid var(--border-subtle);border-radius:var(--radius-s);padding:11px 14px;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.subscribe-days label:hover{background:var(--parchment-50)}
.subscribe-days label:has(input:checked){border-color:var(--blue-500);background:var(--blue-100)}
.subscribe-days label span{display:flex;flex-direction:column;gap:2px}
.subscribe-days__hint{font-size:13px;color:var(--text-muted)}
.subscribe-days input{width:18px;height:18px;accent-color:var(--blue-700);margin:2px 0 0}
.subscribe-consent{margin:0;font-size:13px;color:var(--text-muted);line-height:1.5}
.subscribe-msg{margin:0;font-size:14.5px;font-weight:500}
.subscribe-msg--ok{color:var(--success)}
.subscribe-msg--error{color:var(--danger)}
#subscribe-submit:disabled{opacity:.6;cursor:default}

/* ---------- עמוד הדף ---------- */
.parasha-page{padding-block:28px 64px}
.parasha-page__back{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:var(--link);margin-bottom:20px}
.parasha-page__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  border-bottom:var(--rule-gold);padding-bottom:14px;margin-bottom:24px;flex-wrap:wrap}
.parasha-page__kicker{font-size:14px;color:var(--gold-700);font-weight:600;letter-spacing:.03em;margin-bottom:4px}
.parasha-page__head h1{margin:0;font-size:var(--fs-h1)}
.parasha-page__grid{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start}
.parasha-page__main{display:flex;flex-direction:column;gap:20px}
.parasha-page__preview{display:block;width:100%;max-width:640px;border:var(--border-card);border-radius:var(--radius-m);
  box-shadow:var(--shadow-card);cursor:zoom-in;background:#fff}
.parasha-page__actions{display:flex;gap:10px;flex-wrap:wrap}
.parasha-page__soon{background:var(--surface-card);border:var(--border-card);border-radius:var(--radius-m);padding:var(--sp-5);color:var(--ink-700)}
.parasha-page__aside{display:flex;flex-direction:column;gap:20px;position:sticky;top:24px}
.parasha-page__podcast:not(:empty){background:var(--surface-card);border:var(--border-card);border-radius:var(--radius-m);padding:var(--sp-5)}
.parasha-page__comments{background:var(--surface-card);border:var(--border-card);border-radius:var(--radius-m);padding:var(--sp-5)}

/* ---------- תגובות ---------- */
.comments__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.comment{background:var(--surface-raised);border:var(--border-card);border-radius:var(--radius-m);padding:14px 18px}
.comment__head{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.comment__name{font-weight:600;color:var(--text-heading)}
.comment__date{font-size:13.5px;color:var(--text-muted)}
.comment__body{font-size:16px;line-height:1.6;white-space:pre-line}
#pc-note{color:var(--ink-700);font-size:15px;margin:0 0 12px}

.comment-form{display:flex;flex-direction:column;gap:14px;background:var(--surface-raised);
  border:var(--border-card);border-radius:var(--radius-m);padding:18px;margin-bottom:18px}
.comment-form textarea{border:1px solid var(--parchment-300);border-radius:var(--radius-s);
  background:var(--surface-card);padding:10px 12px;font-family:var(--font-body);font-size:16px;
  line-height:1.6;color:var(--ink-900);resize:vertical;min-height:110px;width:100%;box-sizing:border-box}
.comment-form textarea:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px var(--blue-100)}
.comment-form__row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.input__hint{font-weight:400;color:var(--text-muted);font-size:13px}
.comment-form__msg{margin:0;font-size:15px;color:var(--ink-700);min-height:1.2em}
.comment-form__msg.is-ok{color:#2E6B3E}
.comment-form__msg.is-error{color:#8A2B2B}
/* מלכודת בוטים — מוסתרת מבני אדם אך לא מ-display:none שבוטים לומדים לזהות */
.comment-form__hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;margin:0}

/* ---------- חזרה למעלה ---------- */
.to-top{position:fixed;inset-inline-end:auto;left:20px;bottom:20px;width:46px;height:46px;border-radius:50%;
  background:var(--blue-700);color:#fff;border:none;cursor:pointer;box-shadow:var(--shadow-raised);
  display:flex;align-items:center;justify-content:center;z-index:40}
.to-top:hover{background:var(--blue-500)}

.site-footer{background:var(--blue-900);color:#B9C5D8;margin-top:var(--sp-8)}
.site-footer__inner{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:14px;padding-block:28px;flex-wrap:wrap}
.site-footer__brand{font-family:var(--font-display);font-weight:700;font-size:18px;color:#F7F2E7}
.site-footer__tagline{margin-top:4px}
.site-footer__byline{font-size:13px;color:var(--gold-400);margin-top:2px}
.site-footer a{color:var(--gold-400)}

/* ---------- מודאל צפייה ב-PDF ---------- */
.pdf-modal{position:fixed;inset:0;background:rgba(20,25,35,.55);display:flex;align-items:center;
  justify-content:center;z-index:50;padding:24px}
.pdf-modal[hidden]{display:none}
.pdf-modal__dialog{background:var(--surface-raised);border-radius:var(--radius-l);box-shadow:var(--shadow-raised);
  width:min(860px,100%);height:90vh;display:flex;flex-direction:column;overflow:hidden}
.pdf-modal__bar{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--parchment-200)}
.pdf-modal__title{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--text-heading);flex:1}
.pdf-modal iframe{border:none;flex:1;width:100%}

/* ---------- רספונסיביות ---------- */
@media (max-width:920px){
  .hero__inner,.site-main__grid,.parasha-page__grid,.hero--stack #hero-side{grid-template-columns:1fr}
  .sidebar,.parasha-page__aside{position:static}
  /* בטור אחד הסרגל היה נקבר מתחת לכל הארכיון — מעלים אותו מעליו */
  .site-main__grid{display:flex;flex-direction:column}
  .sidebar{order:-1}
  .hero__inner{padding-block:16px 30px}
  .site-header__inner{gap:10px 14px;padding-block:12px}
  /* הפודקאסט תפס שורה שלמה לעצמו; מעלים אותו לצד השם, בקצה השמאלי */
  .wordmark{order:1;flex:1 1 0;min-width:0}   /* min-width:0 מרשה לו להתכווץ במסך צר במקום לדחוף את הפודקאסט לשורה נפרדת */
  .header-podcast{order:2;margin-inline-start:auto}
  .site-nav{order:3;flex-basis:100%}
  .site-header .input{order:4;width:100%}
  /* התפריט נגלל לצד; מסכה מימין מסמנת שיש עוד, במקום מילה חתוכה באמצע */
  .site-nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to left,#000 88%,transparent);
    mask-image:linear-gradient(to left,#000 88%,transparent)}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{flex:none;padding:10px 2px}
  .parasha-page__actions .btn{padding:11px 18px;min-height:44px}
}

@media (max-width:600px){
  /* כשתוכן התגית נשבר לשתי שורות, רדיוס "גלולה" הופך אותה לכתם — מעגלים פינות במידה */
  .hero-badge{border-radius:14px;padding:9px 14px;font-size:14px;gap:8px}
  .hero-badge__name{font-size:16px}
  .hero__lead{font-size:16px;margin-top:14px}
  .hero__actions{margin-top:20px}
  .hero__actions .btn{flex:1 1 auto;justify-content:center}
}

.riddle-box__imgnote{margin-top:8px;font-size:14.5px}
.riddle-box__imgnote a{color:var(--burgundy-700);text-decoration:underline}