/* בית ספר יסודי בן גוריון, קרית מוצקין — עיצוב משותף
   כיוון עיצובי: עריכתי-יוקרתי וחם ("impeccable" design skill) — פסי רקע לסירוגין
   בגוון קרם/נייר חם וגוון "כתום שרוף" (burnt orange) עמוק, צבע מותג ענבר יחיד
   המשמש בכוונה תחומה, כותרות בגופן serif תצוגתי (Frank Ruhl Libre) מול גוף טקסט
   נקי (Heebo), וקצב סקשנים עורכי (alternating bands) בהשראת פוסטרים. */

:root {
  /* ===== נייר / קרם — משפחת הרקע החמה ===== */
  --color-cream: #FBF3E6;       /* רקע ראשי, "נייר" חם */
  --color-cream-alt: #F3E4CE;   /* פס חילופין עמוק יותר */
  --color-white: #FFFFFF;       /* משטחי כרטיסים */

  /* ===== דיו (טקסט) ===== */
  --color-ink: #2A1810;         /* טקסט ראשי — חום-שחור חם. 15.4:1 על קרם */
  --color-ink-muted: #6B5644;   /* טקסט משני. 6.3:1 על קרם */
  --color-cream-text: #FBF3E6;  /* טקסט בהיר לרקעים כהים */
  --color-cream-text-muted: #E4CDB4; /* טקסט בהיר-משני על רקעים כהים */

  /* ===== מותג: ענבר + כתום שרוף (impeccable), מוגברי-רוויה ב-T4 =====
     T4: המשתמש ביקש במפורש "אנרגיית צבע חלשה" — הוגברה רוויה/בהירות של הענבר
     והטרקוטה (ללא נטישת משפחת הצבעים המקורית), ונוסף צבע-על שני תוסס (טורקיז)
     בהשראת צבעי החולצות הצוותיות שנראו בתמונות האמיתיות מבית הספר. */
  --color-amber: #E8920A;         /* primary — היה CC8800. S:91.7% L:47.5% (היה S:100% L:40%) — בהיר/תוסס יותר. 6.91:1 עם ink */
  --color-amber-dark: #C97D00;    /* מצב hover לענבר — 5.19:1 עם ink (נשאר AA) */
  --color-terracotta: #D9491A;    /* secondary — היה C55221. S:78.6% L:47.6% — רוויה+בהירות מוגברות. לקישוט/רקעים לא-טקסטואליים בלבד */
  --color-terracotta-dark: #8C3A14; /* פס הרקע הכהה ("כתום שרוף") — 6.98:1 עם טקסט קרם */
  --color-terracotta-text: #7A3410; /* גוון בטוח-טקסט על קרם/לבן — 8.2:1 */

  /* ===== צבע-על שני: טורקיז (T4) — בהשראת חולצות הקבוצות בתמונות ===== */
  --color-teal: #0A6467;          /* בטוח לטקסט: 6.93:1 על לבן, 6.29:1 על קרם */
  --color-teal-bright: #12B8AE;   /* תוסס — לקישוט/גרדיאנטים בלבד, לא לטקסט/גבולות תפקודיים */

  /* ===== סימון placeholder (ללא שינוי במדיניות) ===== */
  --color-placeholder-bg: #FCEBD5;
  --color-placeholder-border: var(--color-amber);
  --color-placeholder-text: var(--color-terracotta-text);
  --color-placeholder-text-on-dark: #F0C674; /* לשימוש על רקע כהה (פוטר) — 10.5:1 */

  --color-border: #E7D6BE;      /* גבול עדין על קרם */
  --color-border-dark: rgba(251, 243, 230, 0.22);

  --header-height: 96px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-soft: 0 4px 18px rgba(42, 24, 16, 0.10);
  --shadow-strong: 0 14px 34px rgba(42, 24, 16, 0.18);

  --font-display: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --font-body: "Heebo", "Segoe UI", Arial, sans-serif;

  /* קצב מרווחים (spacing scale) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
}

* {
  box-sizing: border-box;
}

/* ===== Accessibility: focus visibility =====
   ברירת מחדל: מתאים לרקעים בהירים (קרם/לבן) — קונטרסט 15.4:1.
   בתוך אזורים כהים (הירו / פוטר) מוגדר מחדש למטה לגוון קרם — קונטרסט 6.98–15.4:1.
   כל צירוף חושב מחדש מול הרקע הממשי שעליו הוא מופיע. */
:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 3px;
}

.hero :focus-visible,
.page-hero :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--color-cream);
}

.skip-link:focus-visible {
  outline-color: var(--color-cream);
}

/* ===== Accessibility: skip link ===== */
.skip-link {
  position: absolute;
  top: -60px;
  inset-inline-start: 20px;
  background: var(--color-ink);
  color: var(--color-cream);
  padding: 14px 24px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: 1000;
  text-decoration: none;
  font-weight: 700;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-cream);
  color: var(--color-ink);
  line-height: 1.7;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
}

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: rgba(251, 243, 230, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.header-brand-group {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  flex-shrink: 1;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-ink);
  min-width: 0;
  flex-shrink: 1;
}

.brand-logo {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-amber);
  flex-shrink: 0;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.25;
  min-width: 0;
}

.gov-logo {
  /* הלוגו של העירייה הוא SVG רחב (יחס רוחב-גובה כ-2:1), לא ריבועי - קופסה
     ריבועית עם object-fit:contain הייתה משאירה המון שוליים ריקים מעל/מתחת
     וגורמת ללוגו להיראות קטן בהרבה מהקופסה עצמה. פותר את זה עם גובה קבוע
     ורוחב אוטומטי לפי יחס הממדים האמיתי, כדי שהלוגו ימלא את השטח בפועל. */
  height: 64px;
  width: auto;
  background: var(--color-cream);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  flex-shrink: 0;
}

.brand-name small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}

.main-nav {
  display: flex;
}

.main-nav ul {
  display: flex;
  gap: var(--space-2);
}

.main-nav a {
  display: inline-block;
  padding: 10px 18px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  transition: background 0.2s ease, color 0.2s ease;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  background: var(--color-amber);
  color: var(--color-ink);
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ===== Hero (עמוד הבית) — T4: תמונת רקע אמיתית עם קרוספייד =====
   שלוש שכבות תמונה אמיתית (gallery-01/02/03) מתחלפות בהדרגה, עם שכבת
   מסך (scrim) בגוון ink בשקיפות 75% שמעליהן. חושב מתמטית: גם בפיקסל
   הכי בהיר האפשרי בתמונה (לבן טהור, FFFFFF) מוצב מתחת ל-75% ink scrim,
   הרקע האפקטיבי המתקבל הוא כ-(95,82,76) שנותן ניגודיות 6.83:1 מול טקסט
   הקרם (FBF3E6) — הרבה מעל סף AA (4.5:1) לטקסט רגיל. הכפתור הראשי (btn-
   primary) עומד בפני עצמו על רקע ענבר אטום — לא מושפע מהתמונה כלל (6.91:1).
   תנועת ה"קן-ברנס" העדינה (זום איטי) וההחלפה בין השכבות מנוטרלות לגמרי
   תחת prefers-reduced-motion (למטה + main.js). */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--color-cream-text);
  padding: var(--space-24) 0 var(--space-16);
  text-align: center;
  isolation: isolate;
}

.hero-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
  animation: heroKenBurns 14s ease-in-out infinite alternate;
  z-index: 0;
}

.hero-bg-layer.is-active {
  opacity: 1;
}

.hero-bg-layer--1 { background-image: url('assets/gallery/gallery-01.jpg'); }
.hero-bg-layer--2 { background-image: url('assets/gallery/gallery-02.jpg'); }
.hero-bg-layer--3 { background-image: url('assets/gallery/gallery-03.jpg'); }

@keyframes heroKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(42, 24, 16, 0.75); /* var(--color-ink) @ 75% — ראו חישוב ניגודיות למעלה */
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero .container::before {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: 0 auto var(--space-6);
  background: var(--color-amber);
  border-radius: 2px;
}

.hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  margin: 0 0 var(--space-4);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.hero p {
  font-size: 1.2rem;
  max-width: 640px;
  margin: 0 auto var(--space-8);
  color: var(--color-cream-text);
  font-family: var(--font-body);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.btn {
  display: inline-block;
  padding: 15px 34px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary {
  background: var(--color-amber);
  color: var(--color-ink);
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
  background: var(--color-amber-dark);
  transform: translateY(-2px) scale(1.03);
  box-shadow: var(--shadow-strong);
}

/* ===== Section headings ===== */
.section {
  padding: var(--space-16) 0;
}

.section-alt {
  background: var(--color-cream-alt);
}

.section-title {
  text-align: center;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin: 0 0 var(--space-12);
  color: var(--color-ink);
  position: relative;
  padding-bottom: var(--space-4);
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 3px;
  background: var(--color-amber);
  border-radius: 2px;
}

/* T4: וריאציית צבע-על שנייה (טורקיז) לקו התחתון של כותרת סקשן הגלריה —
   שימוש נוסף בצבע-העל השני מלבד הענבר, לגיוון האנרגיה החזותית */
.gallery-section .section-title::after {
  background: var(--color-teal);
}

/* ===== Quick actions grid ===== */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.quick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: var(--color-ink);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-amber);
}

/* T4: גיוון צבעי-על בפס העליון של כרטיסי הפעולה — אותה חוזקה חזותית,
   תחומה לגבול דקורטיבי (לא טקסט) כך שאין דרישת ניגודיות AA ישירה, אך
   כולם עוברים בנוחות את סף 3:1 (רכיב UI) מול הרקע הלבן. */
.quick-card:nth-child(2) { border-top-color: var(--color-teal); }
.quick-card:nth-child(3) { border-top-color: var(--color-terracotta); }
.quick-card:nth-child(4) { border-top-color: var(--color-amber-dark); }

.quick-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-strong);
}

/* אייקון האמוג'י (span) ואייקון התמונה/SVG (img/svg) שונים מטבעם בגודל
   ובעיצוב הפנימי - בלי "תיבה" משותפת בגובה קבוע, כל כרטיס דוחף את הכיתוב
   שמתחתיו לגובה קצת שונה. פותרים עם תיבה משותפת בגובה קבוע וממורכזת. */
.quick-card .icon,
.quick-card .icon-img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.75rem;
}

.quick-card .icon {
  font-size: 3.25rem;
  line-height: 1;
}

.quick-card .icon-img {
  width: 3.75rem;
  object-fit: contain;
}

.quick-card .label {
  font-weight: 700;
}

/* ===== T7: אזור מורשים — וריאציית quick-actions לכרטיס בודד/מעטים,
   כדי שלא יימתח לרוחב מלא של 4 עמודות כשיש רק ערך אחד ===== */
.restricted-actions {
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  justify-content: start;
}

/* ===== T7: הטמעת פייסבוק — מיכל רספונסיבי שלא שובר פריסה במובייל ===== */
.facebook-embed {
  /* פייסבוק עצמה קובעת בשרתים שלה את הרוחב המקסימלי בפועל של תוכן ה-Page
     Plugin הזה (בערך 750px), בלי קשר ל-CSS שלנו כאן - זה לא באג אצלנו,
     זו מגבלה של פייסבוק. לכן ממרכזים את הקופסה במקום למתוח אותה לכל
     רוחב הדף (מתיחה הייתה משאירה שטח ריק בצד אחד בלבד, פחות מסודר). */
  max-width: 750px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.facebook-embed iframe {
  width: 100%;
  max-width: 100%;
  border: none;
}

/* ===== News / updates empty state ===== */
.news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.news-empty {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  color: var(--color-ink-muted);
  background: var(--color-white);
}

.news-empty .emoji {
  font-size: 2.2rem;
  display: block;
  margin-bottom: var(--space-3);
}

/* ===== T5: קישור "לכל המבזקים" מתחת לרשת החדשות בעמוד הבית ===== */
.news-cta {
  text-align: center;
  margin-top: var(--space-8);
}

/* ===== T5: "צוות חינוכי" — כרטיסי כיתות/מורות אמיתיים לפי שכבת גיל,
   נטענים חי מ-API של מערכת לוח האירועים. משתמש באותם טוקנים/צלליות/
   רדיוסים כמו quick-card ו-content-section — לא מערכת עיצוב מקבילה. ===== */
.staff-status {
  text-align: center;
  padding: var(--space-8) 0;
  color: var(--color-ink-muted);
  font-weight: 600;
}

.staff-status[hidden] {
  display: none;
}

.staff-status-error {
  color: var(--color-terracotta-text);
}

.staff-grade-section {
  margin-bottom: var(--space-12);
}

.staff-grade-title {
  color: var(--color-ink);
  font-size: 1.35rem;
  margin: 0 0 var(--space-4);
  padding-inline-start: var(--space-4);
  border-inline-start: 4px solid var(--color-amber);
}

.staff-class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}

.staff-class-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-teal);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.staff-class-code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-ink);
}

.staff-class-teacher {
  color: var(--color-ink-muted);
  font-size: 0.95rem;
}

/* ===== T4: "החיים בבית הספר" — גלריית תמונות אמיתיות ===== */
.gallery-section {
  background: var(--color-cream-alt);
}

.gallery-intro {
  text-align: center;
  max-width: 640px;
  margin: calc(var(--space-12) * -1) auto var(--space-12);
  color: var(--color-ink-muted);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 160px;
  gap: var(--space-4);
}

/* כמה תאים תופסים שתי שורות ליצירת קצב "מזאיק" חי, לא רשת אחידה משעממת */
.gallery-grid .gallery-item:nth-child(4n+1) {
  grid-row: span 2;
}

.gallery-item {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--color-ink);
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, filter 0.3s ease;
}

.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(42, 24, 16, 0) 55%, rgba(42, 24, 16, 0.55) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover,
.gallery-item:focus-visible {
  transform: translateY(-6px) scale(1.03);
  box-shadow: var(--shadow-strong);
  z-index: 3;
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.1);
}

.gallery-item:hover::after,
.gallery-item:focus-visible::after {
  opacity: 1;
}

.gallery-item:focus-visible {
  outline: 3px solid var(--color-teal);
  outline-offset: 3px;
}

/* ===== T4: Lightbox (תצוגת תמונה מוגדלת, נגיש-מקלדת) ===== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.lightbox[hidden] {
  display: none;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 11, 6, 0.88);
}

.lightbox-dialog {
  position: relative;
  z-index: 1;
  max-width: min(90vw, 900px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.lightbox-img {
  max-width: 100%;
  max-height: 75vh;
  border-radius: var(--radius);
  box-shadow: var(--shadow-strong);
}

.lightbox-caption {
  color: var(--color-cream-text);
  font-size: 0.95rem;
  text-align: center;
  margin: 0;
  max-width: 640px;
}

.lightbox-close {
  position: absolute;
  top: -18px;
  inset-inline-end: -18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--color-amber);
  color: var(--color-ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-strong);
  transition: transform 0.2s ease, background 0.2s ease;
}

.lightbox-close:hover {
  background: var(--color-amber-dark);
  transform: scale(1.08);
}

/* ===== T4: Scroll-reveal (IntersectionObserver, main.js) =====
   ברירת מחדל: מוסתר-חלקית וממורכז-כלפי-מטה; ה-JS מוסיף is-visible כשהאלמנט
   נכנס לתצוגה. אם prefers-reduced-motion פעיל, ה-JS מוסיף is-visible מיידית
   לכולם ומדלג לחלוטין על התצפית/אנימציה (ראו main.js + מדיה קווארי למטה).
   מוגבל תחת html.js בלבד (המחלקה מתווספת ע"י סקריפט inline זעיר ב-<head>):
   אם JS כבוי לגמרי, אין html.js ולכן .reveal נשאר גלוי-כברירת-מחדל —
   הגנת progressive-enhancement כדי שתוכן לא ייעלם לצמיתות בלי JS. */
html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Placeholder marker ===== */
.placeholder {
  color: var(--color-placeholder-text);
  border-bottom: 2px dashed var(--color-placeholder-border);
  padding: 0 2px;
  font-weight: 600;
}

.placeholder-box {
  background: var(--color-placeholder-bg);
  border: 1px dashed var(--color-placeholder-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-6);
  color: var(--color-placeholder-text);
}

/* ===== Footer ===== */
.site-footer {
  background: var(--color-ink);
  color: var(--color-cream-text-muted);
  padding: var(--space-12) 0 var(--space-6);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr 1fr 1.1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.footer-brand img {
  width: 56px;
  height: 56px;
  background: var(--color-cream);
  border-radius: var(--radius-sm);
  padding: 4px;
}

.footer-brand-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-cream-text);
}

.footer-col h3 {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-4);
  color: var(--color-amber);
}

.footer-col ul li {
  margin-bottom: var(--space-2);
}

.footer-col a {
  text-decoration: none;
  color: var(--color-cream-text-muted);
}

.footer-col a:hover {
  text-decoration: underline;
  color: var(--color-cream-text);
}

.footer-col p {
  margin: 0 0 var(--space-2);
  font-size: 0.92rem;
}

.footer-col .placeholder {
  color: var(--color-placeholder-text-on-dark);
  border-bottom: 2px dashed var(--color-placeholder-text-on-dark);
}

.footer-bottom {
  border-top: 1px solid var(--color-border-dark);
  padding-top: var(--space-4);
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-cream-text-muted);
}

/* ===== Inner pages (about / contact / accessibility) ===== */
.page-hero {
  background: var(--color-terracotta-dark);
  color: var(--color-cream-text);
  padding: var(--space-12) 0;
  text-align: center;
}

.page-hero h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
}

.content-section h2 {
  color: var(--color-ink);
  font-size: 1.35rem;
  margin: 0 0 var(--space-3);
}

.content-section {
  margin-bottom: var(--space-12);
}

.tribute-figure {
  max-width: 420px;
  margin: var(--space-5) auto 0;
  text-align: center;
}

.tribute-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow-strong);
  border: 3px solid var(--color-cream-alt);
}

.tribute-figure figcaption {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--color-ink);
}

/* ===== Contact form ===== */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.contact-form {
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-amber);
}

.form-notice {
  background: var(--color-placeholder-bg);
  border: 1px dashed var(--color-placeholder-border);
  color: var(--color-placeholder-text);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
  font-weight: 600;
  font-size: 0.9rem;
}

.form-field {
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-field label {
  font-weight: 600;
  font-size: 0.92rem;
}

.form-field input,
.form-field textarea {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
  background: var(--color-cream);
  color: var(--color-ink);
}

.form-field textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-info-box {
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-amber);
}

.contact-info-box h2 {
  color: var(--color-ink);
  margin-top: 0;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }

  .news-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 140px;
  }
}

@media (max-width: 768px) {
  .gov-logo {
    height: 44px;
    padding: 4px 7px;
  }

  .brand-logo {
    width: 44px;
    height: 44px;
  }

  .brand-name {
    font-size: 1.15rem;
  }

  .main-nav {
    position: fixed;
    inset-inline: 0;
    top: var(--header-height);
    background: var(--color-cream);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .main-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .main-nav ul {
    flex-direction: column;
    padding: 12px 20px 20px;
    gap: 4px;
  }

  .main-nav a {
    display: block;
    padding: 12px 16px;
  }

  .hamburger {
    display: flex;
  }

  .quick-actions {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 130px;
  }
}

@media (max-width: 480px) {
  .gov-logo {
    height: 34px;
    padding: 3px 5px;
  }

  .brand-logo {
    width: 36px;
    height: 36px;
  }

  .brand-name {
    font-size: 0.98rem;
  }

  .header-brand-group {
    gap: var(--space-2);
  }

  .hero {
    padding: var(--space-16) 0 var(--space-12);
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }

  .gallery-grid .gallery-item:nth-child(4n+1) {
    grid-row: span 1;
  }
}

/* ===== Accessibility: motion =====
   T4: מורחב לכסות את כל האנימציות/מעברים החדשים — קרוספייד הירו, קן-ברנס,
   הרמת/זום גלריה, וה-scroll-reveal (JS מדלג על ה-observer לגמרי כש-
   matchMedia('(prefers-reduced-motion: reduce)').matches, וכאן ה-CSS
   מכסה הגנת-משנה למקרה שאלמנט .reveal לא קיבל is-visible מסיבה כלשהי). */
/* ===== באנר עוגיות ===== */
.cookie-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--color-ink);
  color: var(--color-cream);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
}

.cookie-banner p {
  margin: 0;
  max-width: 60ch;
  font-size: 0.9rem;
  line-height: 1.5;
}

.cookie-banner a {
  color: var(--color-cream);
  text-decoration: underline;
}

.cookie-banner-dismiss {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-6);
}

@media (max-width: 480px) {
  .cookie-banner {
    flex-direction: column;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .quick-card:hover,
  .btn-primary:hover,
  .gallery-item:hover,
  .gallery-item:focus-visible,
  .gallery-item:hover img,
  .gallery-item:focus-visible img {
    transform: none;
  }

  .hero-bg-layer {
    animation: none;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}