/* ==========================================================================
   מכללת ללדת — Design System 2026
   סגנון: חם, רך ונשי
   ========================================================================== */

/* ----- Design Tokens ----- */
:root {
  /* צבעים — מותאמים לצבעי הלוגו: ורוד חם + תכלת רך */
  --terracotta: #C67A85;     /* primary / CTA — ורוד חם מהלוגו */
  --terracotta-dark: #A85F6B;
  --rose: #ECC8CC;           /* ורוד רך */
  --rose-soft: #F8E7E9;
  --sand: #F5EDE4;           /* רקע בהיר */
  --cream: #FFFBF6;
  --cocoa: #5A4338;          /* טקסט ראשי */
  --cocoa-soft: #8A7367;     /* טקסט משני */
  --sage: #7FB0B5;           /* accent — תכלת/טורקיז רך מהלוגו */
  --sage-soft: #DEEAEB;
  --gold: #D8A55B;           /* badges */
  --white: #ffffff;

  /* טיפוגרפיה */
  --font-head: "Frank Ruhl Libre", "Heebo", serif;
  --font-body: "Heebo", "Assistant", -apple-system, sans-serif;

  /* ריווח ופינות */
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;
  --shadow-sm: 0 4px 18px rgba(90, 67, 56, 0.08);
  --shadow: 0 14px 40px rgba(90, 67, 56, 0.12);
  --shadow-lg: 0 24px 60px rgba(90, 67, 56, 0.16);
  --maxw: 1180px;
  --transition: .3s cubic-bezier(.22,.61,.36,1);
}

/* ----- Reset ----- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--cocoa);
  background: var(--cream);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  /* רשת ביטחון בלבד. הגלישות עצמן מטופלות במקומן — אחרת תוכן פשוט נעלם. */
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
/* קישורים רגילים מקבלים underline לנגישות (WCAG 1.4.1) — במשקל מינימלי,
   כדי שכל מחלקה תוכל לבטל אותו בלי !important. */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--terracotta);
  text-underline-offset: 3px;
}
/* אלמנטים שנראים כמו כפתור, לוגו או ניווט אינם מקבלים קו תחתון — הם
   מזוהים לפי צורתם, ולכן 1.4.1 מתקיים בלעדיו (הדרישה חלה על קישורים
   בתוך גוף טקסט). מוסיפים מחלקת כפתור חדשה? להוסיף אותה גם לרשימה כאן. */
.btn,
.cohort-reg,
.oe-cta,
.oe-wa,
.wa-float,
.skip-link,
.card-link,
.gp-rel-card,
.avatar,
.logo,
.logo-chip,
.drop-toggle,
.dd-all,
[role="menuitem"],
.nav-links a,
.socials a,
.follow-links a,
.contact-line a,
.contact-method a,
.gp-contact a,
.breadcrumb a,
.footer a {
  text-decoration: none;
}
ul { list-style: none; }
h1,h2,h3,h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.2; color: var(--cocoa); }

/* ----- Layout helpers ----- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }
.section { padding-block: 92px; }
.section--tight { padding-block: 60px; }
.center { text-align: center; }
.eyebrow {
  display: inline-block;
  font-size: .82rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terracotta);
  background: var(--rose-soft);
  padding: 7px 16px; border-radius: var(--radius-pill);
  margin-bottom: 18px;
}
.section-title { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 16px; }
.section-sub { max-width: 620px; margin-inline: auto; color: var(--cocoa-soft); font-size: 1.08rem; }
.section.center .section-sub { margin-bottom: 8px; }

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-weight: 600; font-size: 1.02rem;
  padding: 15px 30px; border-radius: var(--radius-pill);
  border: 2px solid transparent; cursor: pointer;
  transition: var(--transition);
}
.btn--primary { background: var(--terracotta); color: var(--white); box-shadow: 0 10px 24px rgba(198,122,133,.32); }
.btn--primary:hover { background: var(--terracotta-dark); transform: translateY(-3px); box-shadow: 0 16px 30px rgba(198,122,133,.4); }
.btn--ghost { background: transparent; color: var(--cocoa); border-color: rgba(90,67,56,.22); }
.btn--ghost:hover { background: var(--white); border-color: var(--terracotta); color: var(--terracotta); transform: translateY(-3px); }
.btn--white { background: var(--white); color: var(--terracotta); }
.btn--white:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.btn--lg { padding: 18px 40px; font-size: 1.1rem; }

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,251,246,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(90,67,56,.08);
  transition: var(--transition);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.logo { display: flex; align-items: center; gap: 11px; font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: var(--cocoa); }
.logo .mark {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--terracotta), var(--rose));
  display: grid; place-items: center; color: #fff; font-size: 1.2rem;
  box-shadow: 0 6px 16px rgba(198,122,133,.3);
}
.logo small { display: block; font-family: var(--font-body); font-size: .62rem; font-weight: 600; letter-spacing: .18em; color: var(--cocoa-soft); }
.logo-img { height: 54px; width: auto; display: block; }
.footer .logo-chip { display: inline-block; background: #fff; padding: 10px 16px; border-radius: 16px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.footer .logo-chip .logo-img { height: 46px; }
.nav-links { display: flex; align-items: center; gap: 19px; }
.nav-links > a, .nav-links .drop-toggle { font-weight: 500; font-size: .96rem; position: relative; transition: color .2s; cursor: pointer; }
.nav-links a { transition: color .2s; }
.nav-links a::after {
  content:''; position: absolute; bottom: -6px; right: 0; width: 0; height: 2px;
  background: var(--terracotta); transition: width .25s;
}
.nav-links a:hover { color: var(--terracotta); }
.nav-links > a:hover::after, .has-dropdown:hover .drop-toggle::after { width: 100%; }

/* Dropdown (קורסים) */
.has-dropdown { position: relative; }
.has-dropdown .drop-toggle { display: inline-flex; align-items: center; gap: 5px; }
.has-dropdown .drop-toggle .caret { font-size: .7rem; transition: transform .25s; }
.has-dropdown:hover .drop-toggle .caret { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: calc(100% + 16px); right: 0; min-width: 260px;
  background: var(--cream); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 10px; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: var(--transition); border: 1px solid rgba(90,67,56,.08); z-index: 60;
}
.has-dropdown::after { content:''; position:absolute; top:100%; right:0; left:0; height:18px; }
.has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a { display: block; padding: 11px 14px; border-radius: 11px; font-size: .94rem; font-weight: 500; white-space: nowrap; }
.dropdown a:hover { background: var(--rose-soft); color: var(--terracotta); }
.dropdown a::after { display: none; }
.dropdown .dd-all { border-top: 1px solid rgba(90,67,56,.1); margin-top: 6px; padding-top: 13px; color: var(--terracotta); font-weight: 700; }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.lang-switch { font-size: .9rem; font-weight: 600; color: var(--cocoa-soft); border: 1px solid rgba(90,67,56,.18); padding: 7px 13px; border-radius: var(--radius-pill); transition: var(--transition); }
.lang-switch:hover { color: var(--terracotta); border-color: var(--terracotta); }
.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.burger span { width: 26px; height: 2.5px; background: var(--cocoa); border-radius: 3px; transition: var(--transition); }
.burger.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger.active span:nth-child(2) { opacity: 0; }
.burger.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; padding-block: 70px 90px; overflow: hidden; }
.hero::before {
  content:''; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(circle at 88% 12%, var(--rose-soft) 0%, transparent 42%),
    radial-gradient(circle at 6% 80%, var(--sage-soft) 0%, transparent 40%),
    var(--sand);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); margin-bottom: 22px; }
.accent { color: var(--terracotta); }
.hero h1 .accent { color: var(--terracotta); }
.hero p.lead { font-size: 1.22rem; color: var(--cocoa-soft); max-width: 540px; margin-bottom: 34px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 38px; }
.trust-bar { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.trust-bar .item { display: flex; align-items: center; gap: 9px; font-size: .95rem; font-weight: 500; color: var(--cocoa); }
.trust-bar .item .ic { color: var(--terracotta); font-size: 1.2rem; }
.trust-bar .divider { width: 1px; height: 26px; background: rgba(90,67,56,.16); }

/* Hero visual */
.hero-visual { position: relative; }
.hero-img {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  aspect-ratio: 4/5; position: relative;
}
.placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--rose) 0%, var(--terracotta) 55%, var(--sage) 130%);
  display: grid; place-items: center; color: rgba(255,255,255,.92);
  font-family: var(--font-body); text-align: center; padding: 20px;
}
/* מסגרות תמונה דקורטיביות (Hero/כרטיסים/אווטאר) — ממלאות את המסגרת.
   גלריות תוכן (תמונות/המלצות) מוצגות במלואן בפריסת מסונרי (ראה למטה). */
.hero-img, .thumb, .g-item, .map-embed { position: relative; overflow: hidden; }
.hero-img img, .thumb img, .g-item img, .map-embed img, .map-embed iframe,
.course-hero .hero-img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== גלריות תוכן — מסונרי: כל תמונה במלואה, ממלאת את רוחב הטור, בלי חיתוך ובלי שוליים ===== */
.masonry { column-gap: 14px; }
.masonry > * { break-inside: avoid; margin-bottom: 14px; width: 100%; }
.masonry img { width: 100%; height: auto; display: block; border-radius: 14px; box-shadow: var(--shadow-sm); }
.placeholder span { display:block; }
.placeholder .ph-ic { font-size: 2.6rem; margin-bottom: 10px; }
.placeholder .ph-note { font-size: .8rem; opacity: .85; margin-top: 8px; max-width: 220px; }

/* ===== מסגרת תמונה ריקה — כרטיס בלי תמונה =====
   נכנסת לתוך .thumb הרגיל (js/render.js → thumbPlaceholder), ולכן מקבלת
   ממנו את יחס הגובה-רוחב ואת הפינות. התוצאה: כרטיס בלי תמונה תופס בדיוק
   את אותו מקום ברשת ככרטיס עם תמונה, ואין יותר שורה של כרטיסים בגבהים
   שונים בעמוד המאמרים או קופסה ריקה בעמוד ההשתלמויות.

   הצבעים עדינים בכוונה. "אין תמונה" הוא מצב ניטרלי, לא אזהרה — הוא לא
   אמור למשוך את העין יותר מהכותרת של הכרטיס עצמו.
   התמונה נצבעת ב-currentColor, ולכן די בשינוי color כדי לכוונן אותה. */
.thumb-ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(135deg, var(--rose-soft) 0%, var(--sand) 52%, var(--sage-soft) 100%);
  color: var(--terracotta);
}
.thumb-ph svg { width: 34%; max-width: 92px; min-width: 44px; height: auto; opacity: .42; }
/* דיוקן של אישה — לרכזת בלי צילום. יושב באווטאר עגול וקטן, ולכן
   ממלא חלק גדול יותר מהמסגרת ובקו מעט עבה יותר, אחרת הוא נעלם. */
.thumb-ph--person svg { width: 62%; max-width: none; min-width: 0; opacity: .5; stroke-width: 2.1; }
/* .thumb מוגדר position:relative רק כשהוא בתוך כרטיס קורס. במאמרים אין
   הצהרה כזו, ובלעדיה ה-placeholder המרוחק היה נצמד לכרטיס כולו. */
.article-card .thumb { position: relative; overflow: hidden; }
.hero-badge {
  position: absolute; bottom: 24px; right: -22px;
  background: var(--white); border-radius: var(--radius); padding: 16px 22px;
  box-shadow: var(--shadow); display: flex; align-items: center; gap: 14px;
}
.hero-badge .num { font-family: var(--font-head); font-size: 1.9rem; color: var(--terracotta); font-weight: 700; }
.hero-badge .lbl { font-size: .85rem; color: var(--cocoa-soft); line-height: 1.35; }
.hero-badge2 {
  position: absolute; top: 26px; left: -18px;
  background: var(--white); border-radius: var(--radius-pill); padding: 11px 20px;
  box-shadow: var(--shadow); display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: .92rem;
}
.hero-badge2 .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 4px var(--sage-soft); }

/* ==========================================================================
   Steps — מאיפה מתחילים
   ========================================================================== */
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; margin-top: 48px; }
.step {
  background: var(--white); border-radius: var(--radius-lg); padding: 38px 30px;
  box-shadow: var(--shadow-sm); position: relative; transition: var(--transition);
  border: 1px solid rgba(90,67,56,.05);
}
.step:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.step .step-num {
  position: absolute; top: 26px; left: 28px;
  font-family: var(--font-head); font-size: 3.2rem; color: var(--rose); opacity: .55; font-weight: 700;
}
.step .step-ic {
  width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center;
  background: var(--rose-soft); color: var(--terracotta); font-size: 1.7rem; margin-bottom: 22px;
}
.step h3 { font-size: 1.32rem; margin-bottom: 10px; }
.step p { color: var(--cocoa-soft); }

/* ==========================================================================
   Course cards
   ========================================================================== */
.courses-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 50px; }
.course-card {
  background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: var(--transition); display: flex; flex-direction: column;
  border: 1px solid rgba(90,67,56,.05);
}
.course-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.course-card .thumb { aspect-ratio: 16/10; position: relative; }
.course-card .thumb .tag {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  background: rgba(255,251,246,.95); color: var(--terracotta); font-weight: 700; font-size: .78rem;
  padding: 6px 13px; border-radius: var(--radius-pill);
}
.course-card .body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.course-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.course-card p { color: var(--cocoa-soft); font-size: .98rem; margin-bottom: 18px; flex: 1; }
.course-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 20px; font-size: .88rem; color: var(--cocoa-soft); }
.course-meta span { display: flex; align-items: center; gap: 6px; }
.course-card .card-link { color: var(--terracotta); font-weight: 700; display: inline-flex; align-items: center; gap: 7px; transition: gap .2s; }
.course-card:hover .card-link { gap: 12px; }

/* ==========================================================================
   ערבים פתוחים
   --------------------------------------------------------------------------
   שלושה רכיבים, מרקאפ אחד לכל אחד:
     .oe-strip   — הרצועה שמעל ההדר בכל עמוד   (מרקאפ ב-js/partials.js)
     .oe-row     — שורה ברשימת המועדים          (מרקאפ ב-js/render.js)
     .oe-callout — הקריאה לפעולה בעמוד הקורס    (מרקאפ ב-js/main.js)

   הכל כאן ולא בגוש <style> בתוך עמוד, כי הרצועה מופיעה בכל עמוד באתר.
   ========================================================================== */

/* ---- הרצועה ----
   ממוקמת מתחת לתפריט, בזרימה רגילה. ההדר נשאר דביק ונגלל למעלה,
   והרצועה נגללת החוצה איתו — היא לא אוכלת גובה מסך קבוע.
   ניתנת לסגירה; הסגירה נשמרת לפי מזהה הערב, כך שהערב הבא יופיע שוב.

   העיצוב מכוון להיות שקט: רקע טרקוטה עמוק (ולא הבהיר, שבו לבן על
   טרקוטה נותן ניגודיות 3.2 בלבד ונכשל בתקן), טיפוגרפיה אחת, בלי
   אימוג'י ובלי נקודות מפרידות. הנקודה הפועמת היא הסימן החי היחיד. */
.oe-strip {
  position: relative;          /* עוגן לכפתור הסגירה — ראי ההערה אצלו */
  background: linear-gradient(90deg, #8F4D59, var(--terracotta-dark) 55%, #B06B78);
  color: #fff;
  font-size: .9rem; line-height: 1.3;
  letter-spacing: -0.01em;
}
.oe-strip[hidden] { display: none; }
.oe-inner {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: nowrap;           /* הרצועה לעולם לא נשברת לשתי שורות */
  gap: 10px; min-height: 46px; padding-block: 8px;
}
/* נקודה פועמת — מסמנת "מתקיים בקרוב" בלי מילה נוספת */
.oe-inner .oe-dot {
  flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%;
  background: var(--rose); box-shadow: 0 0 0 0 rgba(236,200,204,.7);
  animation: oePulse 2.4s ease-out infinite;
}
@keyframes oePulse {
  0%   { box-shadow: 0 0 0 0 rgba(236,200,204,.65); }
  70%  { box-shadow: 0 0 0 8px rgba(236,200,204,0); }
  100% { box-shadow: 0 0 0 0 rgba(236,200,204,0); }
}
@media (prefers-reduced-motion: reduce) { .oe-inner .oe-dot { animation: none; } }

.oe-inner .oe-lead { font-weight: 700; flex-shrink: 0; }
/* min-width:0 הוא לא קישוט: בלעדיו פריט flex לא מתכווץ מתחת לרוחב התוכן,
   השורה גולשת אל מחוץ למסך, ו-body{overflow-x:hidden} פשוט בולע אותה —
   הכותרת נעלמת בלי שום סימן לתקלה. */
.oe-inner .oe-txt {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: rgba(255,255,255,.82);
}
.oe-inner .oe-when {
  flex-shrink: 0; white-space: nowrap; font-weight: 600;
  background: rgba(255,255,255,.16); padding: 4px 12px; border-radius: var(--radius-pill);
}
.oe-inner .oe-when-short { display: none; }
/* כפתור מתאר ולא מלא — פחות רועש על רקע צבעוני, וקורא כפעולה */
.oe-inner .oe-cta {
  flex-shrink: 0; color: #fff; font-weight: 700; font-size: .85rem;
  padding: 5px 15px; border: 1.5px solid rgba(255,255,255,.55);
  border-radius: var(--radius-pill); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .25s, border-color .25s, gap .2s;
}
.oe-inner .oe-cta:hover { background: #fff; border-color: #fff; color: var(--terracotta-dark); gap: 10px; }
.oe-inner .oe-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* הסגירה נצמדת לקצה השמאלי של *הרצועה*, לא של התוכן.
   קודם היא הייתה ממוקמת יחסית ל-.container — שרוחבו חסום ב-1180 וממורכז
   — ולכן במסך רחב היא נעצרה באמצע השטח הריק במקום בקצה העמוד. */
.oe-strip .oe-close {
  position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer;
  width: 30px; height: 30px; line-height: 1; font-size: 1.3rem;
  color: rgba(255,255,255,.65); border-radius: 50%; transition: background .25s, color .25s;
}
.oe-strip .oe-close:hover { background: rgba(255,255,255,.18); color: #fff; }
.oe-strip .oe-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* שימי לב: ל-.oe-inner אין position. זה מכוון — היא .container שרוחבה
   חסום וממורכז, ואילו היה לה position היא הייתה הופכת לאב הממוקם הקרוב
   ביותר, וכפתור הסגירה היה נתלה על קצה *התוכן* במקום על קצה המסך. */

/* ---- שורת מועד ---- */
.oe-list { display: grid; gap: 18px; margin: 46px auto 0; max-width: 900px; text-align: right; }
.oe-row {
  display: grid; grid-template-columns: 92px minmax(0,1fr) auto; gap: 22px; align-items: center;
  background: var(--white); border: 1px solid rgba(90,67,56,.07);
  border-radius: var(--radius-lg); padding: 22px 24px;
  box-shadow: var(--shadow-sm); transition: var(--transition);
}
.oe-row:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.oe-date {
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
  width: 92px; height: 92px; border-radius: var(--radius); background: var(--rose-soft);
}
.oe-date .oe-d { font-family: var(--font-head); font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--terracotta-dark); }
.oe-date .oe-m { font-size: 1rem; font-weight: 700; color: var(--cocoa); }
.oe-body h3 { font-size: 1.22rem; margin-bottom: 5px; }
.oe-sub { color: var(--terracotta-dark); font-weight: 600; font-size: .92rem; margin-bottom: 9px; }
/* שורת המועד בגיבור של עמוד הערבים הפתוחים */
.oe-when-line {
  display: inline-block; background: var(--rose-soft); color: var(--cocoa);
  font-weight: 700; font-size: 1.02rem; padding: 9px 20px;
  border-radius: var(--radius-pill); margin-bottom: 18px;
}
.oe-when-line[hidden] { display: none; }
.oe-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9rem; color: var(--cocoa-soft); }
.oe-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.oe-desc { color: var(--cocoa-soft); font-size: .95rem; margin-top: 11px; }
.oe-actions .btn { justify-content: center; white-space: nowrap; }

/* ---- הקריאה לפעולה בעמוד הקורס ---- */
.oe-callout {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 20px; align-items: center;
  background: var(--sage-soft); border-radius: var(--radius-lg); padding: 24px 26px;
}
.oe-callout .oe-cal-ic { font-size: 1.9rem; }
.oe-callout h3 { font-size: 1.14rem; margin-bottom: 6px; color: #2E5E63; }
.oe-callout p { color: #2E5E63; font-size: .95rem; }
.oe-callout .btn { white-space: nowrap; justify-content: center; }

/* ---- עמוד הערב הפתוח — ההזמנה ----
   בנוי כהזמנה ממורכזת ולא כגיבור דו-טורי: המקור הוא מכתב הזמנה אישי,
   והמרכוז הוא מה שנותן לו את האופי הזה. */
.oe-invite {
  background: radial-gradient(120% 90% at 50% 0%, var(--rose-soft), var(--cream) 62%);
  padding-block: 74px 84px; text-align: center;
  border-bottom: 1px solid rgba(90,67,56,.07);
}
.oe-invite .container { max-width: 820px; }
.oe-bsd {
  display: block; font-family: var(--font-head); font-size: .95rem;
  color: var(--cocoa-soft); letter-spacing: .06em; margin-bottom: 22px;
}
.oe-invite-kicker {
  font-family: var(--font-head); font-size: 1.06rem; font-weight: 500;
  color: var(--terracotta-dark); letter-spacing: .01em; margin-bottom: 12px;
}
.oe-invite h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.15; margin-bottom: 16px; }
.oe-invite-year { color: var(--cocoa-soft); font-size: 1.02rem; margin-bottom: 20px; }
.oe-invite-lead {
  font-size: 1.12rem; line-height: 1.75; color: var(--cocoa);
  max-width: 640px; margin: 0 auto 34px;
}

/* כרטיס המועד — העוגן הוויזואלי של העמוד */
.oe-when-card {
  display: inline-flex; flex-direction: column; gap: 5px; align-items: center;
  background: var(--white); border: 1px solid rgba(90,67,56,.08);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 24px 46px; margin-bottom: 32px; position: relative; overflow: hidden;
}
/* פס מבטא עליון — סימון עדין שזה "הדבר החשוב בעמוד" */
.oe-when-card::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--terracotta), var(--rose));
}
.oe-when-main {
  font-family: var(--font-head); font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  font-weight: 700; color: var(--cocoa);
}
.oe-when-sub { font-size: .95rem; color: var(--cocoa-soft); }
.oe-when-card.is-empty .oe-when-main { color: var(--cocoa-soft); font-weight: 500; }

.oe-invite-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* שורת ההבטחות — מפרידים נשלטים ולא תווי טקסט */
.oe-badges {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
  margin-top: 30px; font-size: .95rem; color: var(--cocoa); font-weight: 600;
}
.oe-badges li { display: inline-flex; align-items: center; gap: 9px; }
.oe-badges li::before {
  content: "✓"; color: var(--terracotta); font-weight: 700; font-size: .95rem;
}
.oe-note { color: var(--cocoa-soft); font-size: .95rem; margin-top: 18px; }

/* התפיסה — שתי פסקאות, טיפוגרפיה נושמת */
.oe-creed { max-width: 720px; margin: 38px auto 0; text-align: center; }
.oe-creed p { font-size: 1.08rem; line-height: 1.9; color: var(--cocoa); margin-bottom: 18px; }
.oe-creed p:last-child { margin-bottom: 0; }

/* רשימת הלבבות. הלב מגיע מ-CSS ולא מהמרקאפ — כך הפריטים נשארים שורות
   טקסט פשוטות שאפשר להוסיף ולמחוק מהפאנל, והלב מקבל את צבע המותג
   במקום להיראות שונה בכל מערכת הפעלה. */
.oe-hearts { max-width: 820px; margin: 44px auto 0; display: grid; gap: 12px; text-align: right; }
.oe-hearts li {
  display: grid; grid-template-columns: auto minmax(0,1fr); gap: 15px; align-items: start;
  background: var(--white); border: 1px solid rgba(90,67,56,.07);
  border-radius: var(--radius); padding: 19px 22px;
  font-size: 1.02rem; line-height: 1.75; color: var(--cocoa);
  box-shadow: var(--shadow-sm); transition: var(--transition);
}
.oe-hearts li::before {
  content: "♥"; color: var(--terracotta); font-size: 1.05rem; line-height: 1.7;
}
.oe-hearts li:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* ---- כפתור קבוצת הוואטסאפ ----
   כפתור ולא קישור טקסט: הוא יושב מתחת לטופס ומתחרה בו על תשומת הלב,
   ולכן הוא שקט — לבן עם מסגרת, והסימן הירוק הוא המבטא היחיד.
   ירוק מלא עם טקסט לבן נותן ניגודיות 2.0 בלבד ונכשל בתקן, ולכן הצבע
   נמצא בסימן בלבד והטקסט נשאר בחום הכהה של האתר. */
.oe-wa-wrap { margin-top: 24px; }
.oe-wa-wrap[hidden] { display: none; }
.oe-wa {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--white); color: var(--cocoa);
  border: 1.5px solid rgba(90,67,56,.16); border-radius: var(--radius-pill);
  padding: 12px 22px; font-weight: 700; font-size: .97rem;
  box-shadow: var(--shadow-sm); transition: var(--transition);
  max-width: 100%;
}
.oe-wa:hover { border-color: #25D366; box-shadow: var(--shadow); transform: translateY(-2px); }
.oe-wa:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; }
.oe-wa-ic { color: #25D366; display: inline-flex; flex-shrink: 0; }
/* הגנה: גם אם ייכנס לתווית טקסט ארוך, הוא לא ישבור את הכפתור */
.oe-wa-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 680px) {
  .oe-wa { width: 100%; justify-content: center; padding: 12px 16px; font-size: .92rem; }
}

/* ---- רצועת הערב הפתוח בדף הבית ----
   מועד אחד, ולכן זו הודעה ולא מקטע עם רשימה. */
.oe-home { background: var(--sage-soft); border-block: 1px solid rgba(90,67,56,.07); }
.oe-home[hidden] { display: none; }
.oe-home-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 16px 28px; flex-wrap: wrap; padding-block: 26px;
}
.oe-home-txt { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; justify-content: center; }
.oe-home-txt strong { font-family: var(--font-head); font-size: 1.25rem; color: #2E5E63; }
.oe-home-when { font-weight: 600; color: var(--cocoa); }
@media (max-width: 680px) {
  .oe-home-inner { flex-direction: column; padding-block: 22px; text-align: center; }
  .oe-home-txt { flex-direction: column; gap: 5px; }
}

@media (max-width: 680px) {
  .oe-invite { padding-block: 52px 60px; }
  .oe-when-card { padding: 20px 26px; width: 100%; }
  .oe-invite-actions .btn { width: 100%; justify-content: center; }
  .oe-badges { gap: 9px 18px; font-size: .9rem; }
  .oe-hearts li { padding: 16px 17px; font-size: .97rem; }
}

/* ---- הפריט המודגש בראש התפריט הנפתח של הקורסים ---- */
.dropdown .dd-featured {
  background: var(--rose-soft); color: var(--cocoa); font-weight: 700;
  border-bottom: 1px solid rgba(90,67,56,.1); margin-bottom: 6px; padding-bottom: 13px;
}
.dropdown .dd-featured:hover { background: var(--rose); color: var(--cocoa); }

@media (max-width: 980px) {
  .oe-inner .oe-lead { display: none; }
  .oe-callout { grid-template-columns: 1fr; text-align: center; }
  .oe-callout .oe-cal-ic { display: none; }
}
@media (max-width: 680px) {
  /* בנייד נשארים שלושה פריטים בלבד בשורה אחת: נקודה, מועד מקוצר, כפתור.
     הכותרת המלאה יורדת — היא ממילא נחתכת שם ולא מוסיפה מידע. */
  .oe-strip { font-size: .84rem; }
  .oe-inner {
    min-height: 42px; gap: 9px; padding-inline: 46px 14px; justify-content: center;
  }
  .oe-inner .oe-txt { display: none; }
  .oe-inner .oe-when-long { display: none; }
  .oe-inner .oe-when-short { display: inline; }
  .oe-inner .oe-when { padding: 3px 10px; }
  .oe-inner .oe-cta { padding: 4px 12px; font-size: .8rem; }
  .oe-strip .oe-close { inset-inline-start: 6px; }
  .oe-row { grid-template-columns: 1fr; gap: 14px; text-align: center; padding: 22px 18px; }
  .oe-date { width: 100%; height: auto; padding: 12px 0; }
  .oe-meta { justify-content: center; }
  .oe-actions .btn { width: 100%; }
}

/* ==========================================================================
   Why us
   ========================================================================== */
.why { background: linear-gradient(180deg, var(--cream), var(--sand)); }
.why-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 50px; }
.feature { text-align: center; padding: 30px 20px; }
.feature .f-ic {
  width: 78px; height: 78px; border-radius: 50%; margin: 0 auto 20px;
  display: grid; place-items: center; font-size: 2rem;
  background: var(--white); color: var(--terracotta); box-shadow: var(--shadow-sm);
}
.feature h3 { font-size: 1.18rem; margin-bottom: 9px; }
.feature p { color: var(--cocoa-soft); font-size: .95rem; }

/* ==========================================================================
   Stats
   ========================================================================== */
.stats { background: var(--cocoa); color: #fff; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; text-align: center; }
.stat .stat-num { font-family: var(--font-head); font-size: clamp(2.4rem,5vw,3.4rem); color: var(--rose); font-weight: 700; line-height: 1; }
.stat .stat-lbl { color: rgba(255,255,255,.78); margin-top: 10px; font-size: 1rem; }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; margin-top: 50px; }
.testi {
  background: var(--white); border-radius: var(--radius-lg); padding: 34px 30px;
  box-shadow: var(--shadow-sm); position: relative; transition: var(--transition);
}
.testi:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.testi .quote-mark { font-family: var(--font-head); font-size: 4rem; color: var(--rose); line-height: .5; height: 26px; }
.testi p.text { color: var(--cocoa); font-size: 1.02rem; margin-bottom: 24px; }
.testi .person { display: flex; align-items: center; gap: 14px; }
/* היו כאן .testi .avatar (עיגול 56px) ו-.testi .stars. הם שירתו את המרקאפ
   הקבוע עם ההמלצות המומצאות, שהוסר ביולי 2026. בהמלצות האמיתיות
   (js/data-recommendations.js) יש id/name/role/active/sortOrder/text בלבד —
   אין תמונה ואין דירוג, ולכן אין מה למלא שם. */
.testi .person .name { font-weight: 700; }
.testi .person .role { font-size: .85rem; color: var(--cocoa-soft); }

/* ==========================================================================
   Articles
   ========================================================================== */
.articles-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 50px; }
.article-card { border-radius: var(--radius-lg); overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm); transition: var(--transition); }
.article-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.article-card .thumb { aspect-ratio: 16/10; }
.article-card .body { padding: 24px; }
.article-card .cat { font-size: .8rem; font-weight: 700; color: var(--sage); text-transform: uppercase; letter-spacing: .08em; }
.article-card h3 { font-size: 1.18rem; margin: 10px 0; }
.article-card .card-link { color: var(--terracotta); font-weight: 700; font-size: .95rem; }

/* ==========================================================================
   Lead CTA / Forms
   ========================================================================== */
.cta-band { position: relative; overflow: hidden; }
.cta-band::before {
  content:''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, var(--terracotta), var(--rose) 130%);
}
.cta-band { color: #fff; }
.cta-band .section-title, .cta-band h2 { color: #fff; }
.lead-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 44px; box-shadow: var(--shadow-lg);
  max-width: 560px; margin-inline: auto;
}
.lead-card h2, .lead-card h3 { color: var(--cocoa); }
.form-row { display: grid; gap: 16px; }
.form-grid-2 { grid-template-columns: 1fr 1fr; }
/* כותרת קטע בתוך טופס (type:"heading" בסכמה) — מפרידה בין קבוצות שדות */
.form-section-title {
  grid-column: 1 / -1; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
  color: var(--terracotta); margin: 26px 0 2px; padding-bottom: 8px; text-align: right;
  border-bottom: 1px solid rgba(90,67,56,.10);
}
[data-fields] > .form-row:first-child .form-section-title { margin-top: 0; }
.field { display: flex; flex-direction: column; gap: 7px; text-align: right; }
.field label { font-weight: 600; font-size: .92rem; color: var(--cocoa); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--cocoa);
  padding: 14px 16px; border: 1.5px solid rgba(90,67,56,.16); border-radius: var(--radius-sm);
  background: var(--cream); transition: var(--transition); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--terracotta); background: #fff; box-shadow: 0 0 0 4px var(--rose-soft);
}
.field textarea { resize: vertical; min-height: 110px; }
.field.error input, .field.error select, .field.error textarea { border-color: #d9534f; }
.field .err-msg { color: #d9534f; font-size: .82rem; display: none; }
.field.error .err-msg { display: block; }
/* מונה תווים לשדה עם מגבלת אורך (ראי maxLength ב-js/form-schemas.js) */
.field .field-count { align-self: flex-end; font-size: .78rem; color: var(--cocoa-soft); }
.field .field-count.near { color: var(--terracotta); font-weight: 600; }
.form-note { font-size: .85rem; color: var(--cocoa-soft); margin-top: 14px; text-align: center; }
.form-success {
  display: none; background: var(--sage-soft); color: #2E5E63; border-radius: var(--radius);
  padding: 20px; text-align: center; font-weight: 600; margin-top: 18px;
}
.form-success.show { display: block; }

/* שדות מרונדרים מסכמה (data-fields) ושדות מותאמים (dynamic-fields) — מרווח בין שורות */
[data-fields] .form-row + .form-row { margin-top: 16px; }
.dynamic-fields .form-row { margin-top: 16px; }
/* תיבת אישור (checkbox עם תווית ארוכה) */
.consent-field { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; text-align: right; }
.consent-field input { margin-top: 4px; flex: none; width: 18px; height: 18px; accent-color: var(--terracotta); }
.consent-field label { font-weight: 400; font-size: .92rem; color: var(--cocoa); line-height: 1.5; }
.consent-field.error label { color: #d9534f; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--cocoa); color: rgba(255,255,255,.78); padding-block: 64px 30px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 44px; }
.footer h3 { color: #fff; font-size: 1.1rem; margin-bottom: 18px; }
.footer .logo { color: #fff; margin-bottom: 16px; }
.footer .logo small { color: rgba(255,255,255,.6); }
.footer a { transition: color .2s; }
.footer a:hover { color: var(--rose); }
.footer ul li { margin-bottom: 11px; }
.footer .socials { display: flex; gap: 12px; margin-top: 18px; }
.footer .socials a {
  width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.1);
  display: grid; place-items: center; font-size: 1.1rem; transition: var(--transition);
}
.footer .socials a:hover { background: var(--terracotta); transform: translateY(-3px); }
.footer .contact-line { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .85rem; color: rgba(255,255,255,.55); }

/* ==========================================================================
   Floating WhatsApp
   ========================================================================== */
.wa-float {
  position: fixed; bottom: 26px; left: 26px; z-index: 200;
  width: 62px; height: 62px; border-radius: 50%; background: #25D366; color: #fff;
  display: grid; place-items: center; font-size: 1.8rem; box-shadow: 0 10px 30px rgba(37,211,102,.45);
  transition: var(--transition); animation: pulse 2.6s infinite;
}
.wa-float:hover { transform: scale(1.08); }
@keyframes pulse {
  0% { box-shadow: 0 10px 30px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.4); }
  70% { box-shadow: 0 10px 30px rgba(37,211,102,.45), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 10px 30px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,0); }
}

/* ==========================================================================
   Course page specifics
   ========================================================================== */
.course-hero { background: var(--sand); padding-block: 56px; position: relative; }
.course-hero .breadcrumb { font-size: .9rem; color: var(--cocoa-soft); margin-bottom: 18px; }
.course-hero .breadcrumb a:hover { color: var(--terracotta); }
.course-hero-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 50px; align-items: center; }
.course-hero-grid > * { min-width: 0; }
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.badge {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .85rem;
  padding: 8px 15px; border-radius: var(--radius-pill); background: var(--rose-soft); color: var(--terracotta-dark);
}
.badge.gold { background: #f6ebd6; color: #97702c; }
.badge.sage { background: var(--sage-soft); color: #2E5E63; }
.course-hero h1 { font-size: clamp(2rem,4.6vw,3.2rem); margin-bottom: 18px; }
.keyfacts { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 28px; }
.keyfact { background: #fff; border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 14px; }
.keyfact .kf-ic { width: 46px; height: 46px; border-radius: 13px; background: var(--rose-soft); color: var(--terracotta); display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; }
.keyfact .kf-val { font-weight: 700; font-size: 1.05rem; }
.keyfact .kf-lbl { font-size: .82rem; color: var(--cocoa-soft); }

/* layout with sticky form */
/* minmax(0,1fr) + min-width:0 מונעים מטבלה או מתוכן רחב "לפוצץ" את עמודת ה-grid
   ולדחוף את כרטיס ההרשמה אל מחוץ למסך (הוא נחתך בצד שמאל בעברית). */
.course-layout { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 50px; align-items: start; overflow: visible; }
.course-layout > * { overflow: visible; min-width: 0; }
.course-main h2 { font-size: 1.7rem; margin-bottom: 18px; margin-top: 8px; }
.course-block { margin-bottom: 48px; }
.audience-list { display: grid; gap: 12px; margin-top: 8px; }
.audience-list li { display: flex; gap: 12px; align-items: flex-start; }
.audience-list .ic { color: var(--sage); font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.learn-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 8px; }
.learn-card { background: var(--white); border-radius: var(--radius); padding: 26px 22px; box-shadow: var(--shadow-sm); border: 1px solid rgba(90,67,56,.05); }
.learn-card .lc-ic { font-size: 1.8rem; margin-bottom: 12px; }
.learn-card h4 { font-size: 1.1rem; margin-bottom: 8px; }
.learn-card p { font-size: .92rem; color: var(--cocoa-soft); }
.timeline { margin-top: 14px; border-right: 2px solid var(--rose); padding-right: 26px; }
.timeline li { position: relative; padding-bottom: 26px; }
.timeline li::before { content:''; position: absolute; right: -34px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--terracotta); box-shadow: 0 0 0 4px var(--rose-soft); }
.timeline li h4 { font-size: 1.08rem; margin-bottom: 4px; }
.timeline li p { color: var(--cocoa-soft); font-size: .95rem; }

/* כרטיס ההרשמה — גולל יחד עם העמוד.
   הכרטיס גבוה מהמסך (מחיר + יתרונות + טופס + הערות), ולכן הצמדה (sticky)
   הותירה את תחתיתו — כולל כפתור השליחה — בלתי נגישה בשום גלילה. */
.enroll-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 30px; box-shadow: var(--shadow); border: 1px solid rgba(90,67,56,.06);
}
.enroll-card .price { font-family: var(--font-head); font-size: 2.2rem; color: var(--terracotta); font-weight: 700; }
.enroll-card .price small { font-size: .9rem; color: var(--cocoa-soft); font-weight: 400; display: block; font-family: var(--font-body); }
.enroll-card .perk { display: flex; gap: 10px; align-items: center; font-size: .92rem; margin: 12px 0; }
.enroll-card .perk .ic { color: var(--sage); }
.enroll-card .btn { width: 100%; justify-content: center; margin-top: 18px; }
.divider-line { height: 1px; background: rgba(90,67,56,.12); margin: 22px 0; }

/* FAQ */
.faq-list { max-width: 820px; margin: 36px auto 0; }
.faq-item { background: var(--white); border-radius: var(--radius); margin-bottom: 14px; box-shadow: var(--shadow-sm); overflow: hidden; border: 1px solid rgba(90,67,56,.05); }
.faq-q { width: 100%; text-align: right; background: none; border: none; cursor: pointer; padding: 22px 26px; font-family: var(--font-head); font-size: 1.12rem; font-weight: 700; color: var(--cocoa); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-q .chev { color: var(--terracotta); font-size: 1.4rem; transition: transform .3s; flex-shrink: 0; }
.faq-item.open .faq-q .chev { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a-inner { padding: 0 26px 24px; color: var(--cocoa-soft); }

/* gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 16px; }
.gallery-grid .g-item { aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-hero { background: linear-gradient(135deg, var(--rose-soft), var(--sand)); padding-block: 70px; text-align: center; }
.contact-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 50px; align-items: start; }
.contact-grid > * { min-width: 0; }
.contact-info-card { background: var(--white); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-sm); margin-bottom: 22px; }
.contact-method { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; }
.contact-method:last-child { margin-bottom: 0; }
.contact-method .cm-ic { width: 52px; height: 52px; border-radius: 15px; background: var(--rose-soft); color: var(--terracotta); display: grid; place-items: center; font-size: 1.4rem; flex-shrink: 0; }
.contact-method h4 { font-size: 1.08rem; margin-bottom: 3px; }
.contact-method p, .contact-method a { color: var(--cocoa-soft); }
.contact-method a:hover { color: var(--terracotta); }
.branches-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 16px; margin-top: 40px; }
.branch-card { background: var(--white); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); text-align: center; transition: var(--transition); cursor: pointer; }
.branch-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.branch-card:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.branch-card.active { background: var(--rose-soft); box-shadow: var(--shadow); }
.branch-card.active .b-ic { transform: scale(1.1); }
.branch-card .b-ic { font-size: 1.6rem; color: var(--terracotta); margin-bottom: 10px; }
.branch-card h4 { font-size: 1.15rem; margin-bottom: 5px; }
.branch-card p { font-size: .9rem; color: var(--cocoa-soft); }
/* סניף מרחוק (זום) — אינו מקום, ולכן אינו לחיץ ואינו מזיז את המפה */
.branch-card--online { cursor: default; background: var(--sand); }
.branch-card--online:hover { transform: none; box-shadow: var(--shadow-sm); }
.branch-card--online .b-ic { color: var(--sage); }
.map-embed { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 21/9; margin-top: 40px; box-shadow: var(--shadow-sm); }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.in { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .hero-grid, .course-hero-grid, .course-layout, .contact-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 440px; margin-inline: auto; order: -1; }
  /* גובה מפורש לתמונות ה-Hero במובייל (פתרון לקריסת aspect-ratio בחלק מהדפדפנים).
     width:100% הכרחי: היכן שנשאר aspect-ratio (תמונת מאמר 21/9, תמונת קורס 16/10)
     הדפדפן גוזר ממנו רוחב לפי הגובה — 700px במסך של 360 — והעמוד נחתך. */
  .hero-img { width: 100%; aspect-ratio: auto; height: 70vw; max-height: 460px; min-height: 300px; }
  .steps-grid, .courses-grid, .testi-grid, .articles-grid, .learn-grid { grid-template-columns: repeat(2,1fr); }
  .why-grid, .stats-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(2,1fr); }

  /* תפריט נפתח (המבורגר) כבר מ-980px: תפריט הניווט המלא אינו נכנס לרוחב הזה
     וכפתור "לשיחת ייעוץ" נדחף אל מחוץ למסך ונחתך. */
  .nav-links {
    position: fixed; inset: 78px 0 auto 0; flex-direction: column; gap: 0;
    background: var(--cream); padding: 10px 22px 26px; box-shadow: var(--shadow);
    transform: translateY(-130%); transition: transform .35s; align-items: stretch;
    max-height: calc(100vh - 78px); overflow-y: auto;
  }
  .nav-links.open { transform: none; }
  .nav-links a { padding: 15px 4px; border-bottom: 1px solid rgba(90,67,56,.08); }
  .nav-links a::after { display: none; }
  .has-dropdown { width: 100%; }
  .has-dropdown .drop-toggle { padding: 15px 4px; border-bottom: 1px solid rgba(90,67,56,.08); }
  .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: transparent; padding: 4px 0 8px; border: none; min-width: 0; }
  .dropdown a { padding: 12px 18px; font-size: .9rem; color: var(--cocoa-soft); border-bottom: none; }
  .has-dropdown::after { display: none; }
  .burger { display: flex; }
  .nav-cta .btn { display: none; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .section { padding-block: 64px; }
  .steps-grid, .courses-grid, .testi-grid, .articles-grid, .learn-grid,
  .why-grid, .stats-grid, .footer-grid, .keyfacts, .form-grid-2, .gallery-grid { grid-template-columns: 1fr; }
  /* הסתרת הבאדג'ים הצפים במובייל כדי שלא יסתירו את הטקסט */
  .hero-badge, .hero-badge2 { display: none; }
  .lead-card { padding: 30px 22px; }
  .wa-float { width: 56px; height: 56px; bottom: 18px; left: 18px; }

  /* ---- שיפור ניגוד צבעים במובייל ---- */
  .header { background: rgba(255,251,246,.95); }
  .footer { background: #4a3328; color: rgba(255,255,255,.85); }
  .footer a { color: rgba(255,255,255,.9); }
  .footer a:hover { color: var(--rose); }
  .footer-bottom { color: rgba(255,255,255,.75); }
  .btn--primary { background: #b56a75; color: #fff; }
  .btn--white { background: #fff; color: #b56a75; }
  .course-card { background: #fff; border: 1px solid rgba(90,67,56,.15); }
  .course-card p { color: #5a4338; }
  .course-card .card-link { color: #b56a75; }
  .testi { background: #fff; border: 1px solid rgba(90,67,56,.1); }
  .testi p.text { color: #5a4338; }
  .testi .person .role { color: #6b5448; }
  .eyebrow { background: #f0e0e3; color: #a85f6b; }

  /* ---- Full-bleed hero images on mobile ---- */
  /* התמונה במלוא הרוחב ע"י ביטול ריפוד ה-container והחזרתו רק לטקסט (ללא margin שלילי).
     minmax(0,1fr) + min-width:0 מונעים את "התפוצצות" עמודת ה-grid מעבר לרוחב המסך. */
  .hero { padding-block: 0 48px; overflow: hidden; }
  .hero .container { padding-inline: 0; grid-template-columns: minmax(0, 1fr); }
  .hero-text { padding-inline: 22px; min-width: 0; }
  .hero .hero-visual { max-width: none; margin-inline: 0; min-width: 0; }
  .hero .hero-img { border-radius: 0; box-shadow: none; height: 56vw; min-height: 240px; max-height: 380px; }

  /* בעמוד הקורס: display:contents ממוסס את ה-grid (כך אין התפוצצות עמודה)
     ומאפשר סדר מדויק: תמונה ← נתיב ניווט ← טקסט */
  .course-hero { padding-top: 0; overflow: hidden; }
  .course-hero .container { display: flex; flex-direction: column; padding-inline: 0; }
  .course-hero-grid { display: contents; }
  .course-hero .hero-visual { order: 1; max-width: none; margin-inline: 0; min-width: 0; }
  .course-hero .breadcrumb { order: 2; margin: 16px 0 0; padding-inline: 22px; }
  .course-hero-grid > div:not(.hero-visual) { order: 3; padding-inline: 22px; min-width: 0; }
  /* width:100% הכרחי — בלעדיו aspect-ratio יחד עם הגובה הקבוע נותנים לתמונה
     רוחב של 480px בתוך מסך צר יותר, והיא נחתכת בצד אחד. */
  .course-hero .hero-img { border-radius: 0 !important; box-shadow: none; width: 100%; aspect-ratio: 16/10 !important; }
}

/* ===== טבלת מועדי פתיחה (מוזרקת דינמית בעמודי הקורס) ===== */
.cohorts-wrap { margin-top: 8px; overflow-x: auto; border-radius: 16px; box-shadow: var(--shadow-sm); }
/* הטבלה מתאימה את עצמה לרוחב העמודה. min-width קבוע ו-nowrap גורף גרמו לה
   לגלוש, לקבל פס גלילה ולהסתיר את עמודת ההרשמה. */
.cohorts-table { width: 100%; border-collapse: collapse; background: #fff; }
.cohorts-table th, .cohorts-table td { padding: 14px 12px; text-align: right; border-bottom: 1px solid rgba(90,67,56,.08); white-space: normal; }
.cohorts-table th { background: var(--sand); font-weight: 700; font-size: .92rem; }
.cohorts-table tbody tr:nth-child(even) td { background: #fdfaf7; }
.cohorts-table tbody tr:hover td { background: var(--rose-soft); }
.cohorts-table tr:last-child td { border-bottom: none; }
.cohorts-table .co-date { font-weight: 700; color: var(--terracotta-dark); white-space: nowrap; }
.cohorts-table .co-time { white-space: nowrap; }
.cohorts-table .co-scope { white-space: normal; max-width: 340px; line-height: 1.4; font-size: .88rem; color: var(--cocoa-soft); }
.cohorts-table th, .cohorts-table td { vertical-align: middle; }
.cohort-reg { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; background: var(--terracotta); color: #fff; font-weight: 600; font-size: .85rem; padding: 7px 15px; border-radius: 999px; text-decoration: none; transition: var(--transition); }
.cohort-reg:hover { background: var(--terracotta-dark); transform: translateY(-1px); }
/* מסך בינוני (מחשב נייד): עמודת התוכן צרה יותר — מצמצמים ריווח כדי שכל שש
   העמודות ייכנסו, כולל עמודת ההרשמה, בלי פס גלילה צידי. */
@media (max-width: 1200px) {
  .cohorts-table th, .cohorts-table td { padding: 12px 8px; font-size: .88rem; }
  .cohorts-table .co-scope { font-size: .84rem; }
  .cohort-reg { padding: 6px 12px; font-size: .82rem; }
}

/* ===== תוכן עשיר של קורסים/מאמרים (course-text, סילבוס, שו"ת) ===== */
.rich{color:#46352d;line-height:1.85}
.rich h2{font-size:1.3rem;margin:20px 0 10px}
.rich h3{font-size:1.12rem;margin:18px 0 8px}
.rich p{margin:0 0 14px}
.rich ul,.rich ol{margin:0 0 14px;padding-inline-start:22px}
.rich li{margin-bottom:6px}
.rich img,.article-body img{display:block;max-width:min(100%,400px);height:auto;border-radius:10px;margin:14px auto}
.rich a{color:var(--terracotta);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.rich a:hover{color:var(--terracotta-dark)}
/* הגנה על תוכן שיובא מוורדפרס: כתובת ארוכה, טבלה או קוד רחבים אינם
   מרחיבים את העמוד ומשאירים חלק ממנו מחוץ למסך.
   anywhere ולא break-word — רק הוא מקטין את הרוחב המינימלי של הטקסט. */
.rich, .article-body { overflow-wrap: anywhere; }
.rich table, .article-body table { display: block; width: 100%; overflow-x: auto; }
.rich pre, .article-body pre { overflow-x: auto; }
.rich iframe, .rich video, .article-body iframe, .article-body video { max-width: 100%; }
.faq-d{background:#fff;border:1px solid rgba(90,67,56,.1);border-radius:12px;margin-bottom:10px;overflow:hidden}
.faq-d summary{cursor:pointer;padding:14px 18px;font-weight:600;list-style:none}
.faq-d summary::-webkit-details-marker{display:none}
.faq-d[open] summary{color:var(--rose)}
.faq-d .rich{padding:0 18px 16px}

/* ==========================================================================
   Accessibility & WCAG 2.1 AA / AAA Enhancements
   ========================================================================== */

/* ----- Focus-visible styling across interactive elements ----- */
:focus-visible {
  outline: 3px solid var(--terracotta) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(198, 122, 133, 0.35) !important;
}

/* ----- Screen reader utility class ----- */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ----- Skip to main content link ----- */
.skip-link {
  position: absolute;
  top: -100px;
  right: 20px;
  z-index: 10000;
  background: var(--cocoa);
  color: #fff;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 1rem;
  box-shadow: var(--shadow-lg);
  transition: top 0.25s ease;
  text-decoration: none;
}
.skip-link:focus {
  top: 15px;
}

/* ==========================================================================
   כרטיסי הרכזות — מקטע הצוות באודות + עמוד הרכזות (team.html)
   --------------------------------------------------------------------------
   עד אוגוסט 2026 זו היתה טבלה עם אימוג'י בעמודה הראשונה. עכשיו כרטיס עם
   צילום אמיתי. המרקאפ ב-js/render.js (teamCards), ולכן שני העמודים
   והבנייה מקבלים בדיוק את אותו HTML.

   מחלקה אחת לשתי הווריאציות: team-card הבסיסי משמש את מקטע האודות,
   ו-team-card--full מוסיף רק את מה שמופיע בעמוד הייעודי (הכרות ופרטי
   קשר). ככה אין שני עיצובים שצריך לתחזק במקביל.
   ========================================================================== */
.team-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 26px; margin-top: 46px; text-align: right;
}
/* אווטאר עגול ולא פאנל תמונה מלא — וזו ההחלטה המרכזית כאן.
   לרוב הרכזות אין צילום, ופאנל בגובה 4:5 הפך שני שלישים מהעמוד
   למלבנים ריקים ענקיים עם אייקון קטן באמצע. אווטאר עגול הופך את
   "אין תמונה" לפרט קטן ושקט, ומיישר את כל הכרטיסים לאותו מבנה בין
   אם יש צילום ובין אם לא. זו בדיוק התבנית של .grad-card בעמוד
   הבוגרות, שכבר מוכחת באתר. */
.team-card {
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); border: 1px solid rgba(90,67,56,.05);
  transition: var(--transition);
  padding: 32px 24px 28px; text-align: center;
}
.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.team-card .tc-photo {
  position: relative; width: 108px; height: 108px; border-radius: 50%;
  overflow: hidden; margin: 0 auto 18px; background: var(--sand);
  box-shadow: 0 6px 18px rgba(90,67,56,.14);
}
/* object-position גבוה (25%) ולא במרכז: בצילום של אדם הפנים יושבות
   בשליש העליון, ומרכוז חותך אותן ומשאיר את הידיים והשולחן. */
.team-card .tc-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 25%; display: block;
}
.team-card .tc-name { font-size: 1.16rem; margin: 0; color: var(--cocoa); line-height: 1.35; }
.team-card .tc-role { font-size: .89rem; color: var(--cocoa-soft); margin: 6px 0 0; line-height: 1.55; }
.team-card .tc-branch {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 13px;
  padding: 5px 13px; border-radius: var(--radius-pill);
  background: var(--sage-soft); color: #2E5E63;
  font-size: .77rem; font-weight: 700; white-space: nowrap;
}
.team-card .tc-bio {
  font-size: .89rem; color: var(--cocoa-soft); line-height: 1.65;
  margin: 15px 0 0; padding-top: 15px; border-top: 1px solid rgba(90,67,56,.09);
}
/* פרטי הקשר יושבים מיד אחרי התוכן ולא נדחפים לתחתית הכרטיס — דחיפה
   לתחתית פתחה חור לבן בכל כרטיס בלי טקסט הכרות. */
.team-card .tc-contact {
  margin-top: 15px; display: flex; flex-direction: column;
  align-items: center; gap: 8px;
}
.team-card .tc-link {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--cocoa-soft); font-size: .85rem; font-weight: 500;
  text-decoration: none; transition: color var(--transition);
  max-width: 100%; overflow-wrap: anywhere; direction: ltr;
}
.team-card .tc-link .tc-ic { color: var(--terracotta); font-size: .95rem; flex: none; }
.team-card .tc-link:hover { color: var(--terracotta-dark); text-decoration: underline; }
/* כל הכרטיסים בשורה באותו גובה (ברירת המחדל של grid, stretch).
   קודם היה כאן align-items:start בגלל חור לבן שנפתח בכרטיס בלי טקסט
   הכרות — אבל החור נבע מדחיפת פרטי הקשר לתחתית (margin-top:auto),
   וזה בוטל. עכשיו התוכן זורם מלמעלה, ולכן מתיחה לגובה אחיד רק מוסיפה
   שוליים בתחתית הכרטיס הקצר. אחידות בלי מחיר. */
.team-grid--full { grid-template-columns: repeat(3, 1fr); gap: 26px; }

/* ==========================================================================
   גלריית "רגעים מהקורס" — סוף עמוד הקורס (course-view.html)
   --------------------------------------------------------------------------
   פסיפס ולא רשת שטוחה: התמונה הראשונה (cg-lead) תופסת שני טורים ושתי
   שורות. זה נותן מוקד ויזואלי אחד, וגם מציל גלריה קטנה של 3-5 תמונות
   מלהיראות דלה. המרקאפ ב-js/render.js → courseGallery.
   ========================================================================== */
.course-gallery {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr; gap: 16px; margin-top: 42px;
}
.course-gallery .cg-item {
  padding: 0; border: none; background: var(--sand); cursor: zoom-in;
  border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm);
  aspect-ratio: 1; position: relative; display: block;
  transition: transform var(--transition), box-shadow var(--transition);
}
.course-gallery .cg-item:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.course-gallery .cg-item:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; }
.course-gallery .cg-item img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.course-gallery .cg-item:hover img { transform: scale(1.07); }
/* שכבת חמימות עדינה שמתפוגגת במעבר עכבר — נותנת לגלריה עומק בלי לטשטש */
.course-gallery .cg-item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(90,67,56,0) 55%, rgba(90,67,56,.22) 100%);
  opacity: 1; transition: opacity var(--transition);
}
.course-gallery .cg-item:hover::after { opacity: 0; }
.course-gallery .cg-lead { grid-column: span 2; grid-row: span 2; }

/* ----- חלון הגדלה (lightbox) — גלריית הקורס ----- */
.cg-modal { display: none; position: fixed; inset: 0; z-index: 9999; }
.cg-modal.open { display: block; }
.cg-modal .cg-backdrop { position: absolute; inset: 0; background: rgba(43,32,26,.86); backdrop-filter: blur(3px); }
.cg-modal .cg-wrap { position: absolute; inset: 0; display: grid; place-items: center; padding: 40px 24px; }
.cg-modal img { max-width: 92vw; max-height: 84vh; border-radius: 14px; box-shadow: 0 24px 64px rgba(0,0,0,.45); position: relative; }
.cg-modal .cg-btn {
  position: absolute; border: none; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.95); color: var(--cocoa);
  cursor: pointer; z-index: 2; display: grid; place-items: center;
  box-shadow: var(--shadow); transition: var(--transition);
}
.cg-modal .cg-btn:hover { background: #fff; transform: scale(1.06); }
.cg-modal .cg-close { top: 20px; inset-inline-end: 20px; width: 46px; height: 46px; font-size: 1.5rem; }
.cg-modal .cg-prev, .cg-modal .cg-next { top: 50%; margin-top: -25px; width: 50px; height: 50px; font-size: 1.4rem; }
/* RTL: "הקודם" יושב מימין ו"הבא" משמאל, כמו כיוון הקריאה */
.cg-modal .cg-prev { inset-inline-end: 22px; }
.cg-modal .cg-next { inset-inline-start: 22px; }
.cg-modal .cg-count {
  position: absolute; bottom: 24px; inset-inline-start: 50%; transform: translateX(50%);
  color: rgba(255,255,255,.9); font-size: .9rem; font-weight: 600; letter-spacing: .04em;
}

@media (max-width: 980px) {
  .team-grid, .team-grid--full { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .course-gallery { grid-template-columns: repeat(3, 1fr); gap: 13px; }
}
@media (max-width: 680px) {
  .team-grid, .team-grid--full { grid-template-columns: 1fr; }
  /* בטלפון הפסיפס מיותר — שתי עמודות שוות, בלי תמונה מובילה */
  .course-gallery { grid-template-columns: repeat(2, 1fr); gap: 11px; }
  .course-gallery .cg-lead { grid-column: span 1; grid-row: span 1; }
  .cg-modal .cg-prev, .cg-modal .cg-next { width: 42px; height: 42px; margin-top: -21px; }
  .cg-modal .cg-prev { inset-inline-end: 10px; }
  .cg-modal .cg-next { inset-inline-start: 10px; }
}

/* ----- Accessibility Widget Button & Modal ----- */
.a11y-widget {
  position: relative;
  z-index: 9999;
}
.a11y-toggle-btn {
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 10000;
  background: var(--cocoa);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 12px;
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(90, 67, 56, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease-out, background-color 0.25s ease, box-shadow 0.25s ease;
  width: 48px;
  height: 48px;
}
.a11y-toggle-btn:hover {
  background: var(--terracotta);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(90, 67, 56, 0.25);
}
.a11y-toggle-btn .a11y-icon {
  font-size: 1.3rem;
}

/* Modal Drawer */
.a11y-modal {
  position: fixed;
  bottom: 85px;
  right: 26px;
  width: min(380px, calc(100vw - 32px));
  max-height: 80vh;
  background: var(--cream);
  border: 2px solid var(--cocoa);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  overflow-y: auto;
  font-family: var(--font-body);
  color: var(--cocoa);
  animation: a11ySlideUp 0.3s ease;
}
@keyframes a11ySlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.a11y-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: var(--cocoa);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.a11y-modal-title {
  font-size: 1.1rem;
  color: #fff;
  margin: 0;
}
.a11y-close-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.a11y-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}
.a11y-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.a11y-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.a11y-label {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--cocoa-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.a11y-btn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.a11y-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.a11y-btn {
  background: #fff;
  border: 1.5px solid rgba(90, 67, 56, 0.2);
  border-radius: var(--radius-sm);
  padding: 10px 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--cocoa);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}
.a11y-btn:hover, .a11y-btn[aria-pressed="true"] {
  background: var(--terracotta);
  color: #fff;
  border-color: var(--terracotta);
}
.a11y-toggle-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.a11y-toggle-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid rgba(90, 67, 56, 0.16);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--cocoa);
  cursor: pointer;
  width: 100%;
  text-align: right;
  transition: all 0.2s;
}
.a11y-toggle-card i {
  font-style: normal;
  font-size: 1.1rem;
}
.a11y-toggle-card:hover, .a11y-toggle-card[aria-pressed="true"] {
  background: var(--rose-soft);
  border-color: var(--terracotta);
  color: var(--terracotta-dark);
}
.a11y-footer {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.a11y-btn-reset {
  width: 100%;
  background: rgba(90, 67, 56, 0.08);
  border: 1px dashed var(--cocoa-soft);
  padding: 12px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  color: var(--cocoa);
  cursor: pointer;
  font-size: 0.92rem;
}
.a11y-btn-reset:hover {
  background: #f0dbdb;
  color: #a82020;
}
.a11y-statement-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--terracotta);
  text-decoration: underline;
}

/* ----- High Contrast Modes ----- */
/* 1. Dark High Contrast */
body.a11y-contrast-dark {
  background: #000000 !important;
  color: #ffffff !important;
}
body.a11y-contrast-dark *,
body.a11y-contrast-dark h1,
body.a11y-contrast-dark h2,
body.a11y-contrast-dark h3,
body.a11y-contrast-dark h4,
body.a11y-contrast-dark p,
body.a11y-contrast-dark span,
body.a11y-contrast-dark li {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #555555 !important;
  box-shadow: none !important;
}
body.a11y-contrast-dark a {
  color: #ffff00 !important;
  text-decoration: underline !important;
}
body.a11y-contrast-dark .btn,
body.a11y-contrast-dark button {
  background: #000000 !important;
  color: #ffff00 !important;
  border: 2px solid #ffff00 !important;
}

/* 2. Light High Contrast */
body.a11y-contrast-light {
  background: #ffffff !important;
  color: #000000 !important;
}
body.a11y-contrast-light * {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
  box-shadow: none !important;
}
body.a11y-contrast-light a {
  color: #0000ee !important;
  text-decoration: underline !important;
  font-weight: bold !important;
}

/* 3. Grayscale Mode */
body.a11y-contrast-grayscale {
  filter: grayscale(100%) !important;
}

/* ----- Readable Font Mode ----- */
body.a11y-readable-font,
body.a11y-readable-font * {
  font-family: Arial, Helvetica, "Heebo", sans-serif !important;
  letter-spacing: 0.03em !important;
  line-height: 1.8 !important;
}

/* ----- Highlight Links ----- */
body.a11y-highlight-links a {
  background: #ffeb3b !important;
  color: #000000 !important;
  text-decoration: underline !important;
  font-weight: bold !important;
  padding-inline: 4px !important;
  border-radius: 4px !important;
}

/* ----- Highlight Headings ----- */
body.a11y-highlight-headings h1,
body.a11y-highlight-headings h2,
body.a11y-highlight-headings h3,
body.a11y-highlight-headings h4,
body.a11y-highlight-headings h5,
body.a11y-highlight-headings h6 {
  outline: 3px dashed var(--terracotta) !important;
  outline-offset: 4px !important;
  background: rgba(198, 122, 133, 0.08) !important;
}

/* ----- Stop Animations / Reduce Motion ----- */
body.a11y-reduce-motion *,
body.a11y-reduce-motion *::before,
body.a11y-reduce-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
body.a11y-reduce-motion .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* ----- Reading Guide Ruler ----- */
#a11y-reading-guide {
  position: fixed;
  left: 0;
  width: 100vw;
  height: 30px;
  background: rgba(198, 122, 133, 0.25);
  border-top: 2px solid var(--terracotta);
  border-bottom: 2px solid var(--terracotta);
  pointer-events: none;
  z-index: 99999;
}