/* ר' C1 / F13 (15.10): מרכז-העזרה. קובץ סטטי בכוונה (נפרס עם הקוד, בלי תלות בבניית ה-CSS של האתר השיווקי). אותם טוקנים כמו
   resources/css/app.css (משתני ה-@theme), עם ערכי-גיבוי. קהל מבוגר/פחות טכנולוגי: גופן גדול, ריווח נדיב, צעדים ממוספרים בולטים. */
.help {
    --h-ink: var(--color-ink-900, #16233d);
    --h-ink-soft: var(--color-neutral-700, #4a4038);
    --h-muted: var(--color-neutral-600, #5f564c);
    --h-paper: var(--color-paper-50, #faf7f2);
    --h-paper-2: var(--color-paper-100, #f3eee5);
    --h-line: var(--color-paper-200, #e9e0d1);
    --h-clay: var(--color-clay-700, #a2542a);
    --h-clay-dark: var(--color-clay-800, #8a4623);
    --h-moss: var(--color-moss-700, #255a4c);
    --h-display: var(--font-display, 'Suez One', serif);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--h-ink);
    padding: 0 1rem 4rem;
}
.help a { color: var(--h-clay); text-underline-offset: 3px; }
.help a:hover { color: var(--h-clay-dark); }

.help-hero, .help-section, .help-contact, .help-article { max-width: 46rem; margin: 0 auto; }
.help-hero { padding: 3.5rem 0 1.5rem; }
.help-eyebrow { color: var(--h-clay); font-weight: 600; font-size: 0.95rem; margin: 0; }
.help-title { font-family: var(--h-display); font-weight: 400; font-size: clamp(1.9rem, 4vw, 2.5rem); line-height: 1.25; margin: 0.5rem 0 0; }
.help-lead { color: var(--h-ink-soft); font-size: 1.15rem; margin: 0.75rem 0 0; }

.help-search { display: flex; gap: 0.5rem; margin-top: 1.75rem; }
.help-search input {
    flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; padding: 0.85rem 1rem;
    border: 1px solid var(--h-line); border-radius: 0.75rem; background: #fff; color: var(--h-ink);
}
.help-search input:focus { outline: 3px solid color-mix(in srgb, var(--h-clay) 30%, transparent); border-color: var(--h-clay); }
.help-search button, .help-button {
    font: inherit; font-weight: 600; padding: 0.85rem 1.4rem; border: 0; border-radius: 0.75rem;
    background: var(--h-clay); color: #fff; cursor: pointer; text-decoration: none; white-space: nowrap; display: inline-block;
}
.help-search button:hover, .help-button:hover { background: var(--h-clay-dark); color: #fff; }
/* ר' C2 (15.10): ".help a" (צבע-קישור) גבר על .help-button — "כתבו לנו" היה טקסט בצבע-הרקע, בלתי-נראה (נמדד) */
.help a.help-button, .help a.help-button:hover { color: #fff; }

.help-section { padding-top: 2.25rem; }
.help-section-title { font-family: var(--h-display); font-weight: 400; font-size: 1.4rem; margin: 0 0 1rem; }
.help-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.85rem; }
.help-card {
    display: flex; flex-direction: column; gap: 0.3rem; height: 100%; box-sizing: border-box; padding: 1.1rem 1.2rem;
    background: #fff; border: 1px solid var(--h-line); border-radius: 0.9rem; text-decoration: none; color: var(--h-ink) !important;
    transition: border-color 0.15s, transform 0.15s;
}
.help-card:hover { border-color: var(--h-clay); transform: translateY(-1px); }
.help-card strong { font-size: 1.08rem; }
.help-card span { color: var(--h-muted); font-size: 0.97rem; line-height: 1.55; }
.help-empty { color: var(--h-ink-soft); }
.help-back { margin-top: 2.25rem; color: var(--h-muted); }

.help-contact { margin-top: 3.5rem; padding: 1.75rem; border-radius: 1rem; background: var(--h-paper-2); text-align: center; }
.help-contact h2 { font-family: var(--h-display); font-weight: 400; font-size: 1.35rem; margin: 0; }
.help-contact p { margin: 0.4rem 0 1.1rem; color: var(--h-ink-soft); }

.help-article { padding-top: 2rem; }
.help-crumbs { font-size: 0.95rem; color: var(--h-muted); }
.help-crumbs a { color: var(--h-muted); }
.help-body { margin-top: 1.75rem; }
.help-body h2 { font-family: var(--h-display); font-weight: 400; font-size: 1.45rem; margin: 2.25rem 0 0.75rem; }
.help-body h3 { font-size: 1.15rem; margin: 1.75rem 0 0.5rem; }
.help-body p { margin: 0.75rem 0; }
.help-body strong { color: var(--h-ink); }
.help-body ul { padding-inline-start: 1.25rem; }
.help-body li { margin: 0.35rem 0; }
/* צעדים: רשימה ממוספרת = עיגולים בצבע המותג, גדולים וברורים */
.help-body ol { list-style: none; counter-reset: step; padding: 0; margin: 1.25rem 0; }
.help-body ol > li { counter-increment: step; position: relative; padding-inline-start: 3rem; margin: 1.1rem 0; min-height: 2.2rem; }
.help-body ol > li::before {
    content: counter(step); position: absolute; inset-inline-start: 0; top: 0.05rem; width: 2.1rem; height: 2.1rem; border-radius: 999px;
    background: var(--h-clay); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.help-body img {
    display: block; max-width: 100%; height: auto; margin: 0.9rem 0; border: 1px solid var(--h-line); border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(22, 35, 61, 0.06);
}
/* טיפ / שימו לב: ציטוט ב-Markdown */
.help-body blockquote { margin: 1.25rem 0; padding: 0.9rem 1.1rem; border-radius: 0.75rem; background: color-mix(in srgb, var(--h-moss) 8%, #fff); border-inline-start: 4px solid var(--h-moss); }
.help-body blockquote p { margin: 0.2rem 0; }
.help-body code { background: var(--h-paper-2); padding: 0.1rem 0.4rem; border-radius: 0.35rem; font-size: 0.92em; }

.help-related { margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--h-line); }
.help-related h2 { font-size: 1.1rem; margin: 0 0 0.6rem; }
.help-related ul { margin: 0; padding-inline-start: 1.1rem; }

.help .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
    .help { font-size: 1.05rem; }
    .help-hero { padding-top: 2.25rem; }
    .help-search { flex-direction: column; }
    .help-body ol > li { padding-inline-start: 2.6rem; }
    .help-body ol > li::before { width: 1.85rem; height: 1.85rem; font-size: 0.92rem; }
}

/* ר' docs/design/zi-placement.md (18.10.2026): זי — הרקע הבז' של התמונה נמס לרקע (בלי חיתוך) */
.help-zi { display: block; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
.help-hero { position: relative; }
.help-zi--hero { position: absolute; inset-inline-end: -0.5rem; top: 2rem; width: 128px; height: 128px; }
.help-zi--empty { width: 112px; height: 112px; margin: 0 auto 0.5rem; }
@media (max-width: 640px) { .help-zi--hero { width: 88px; height: 88px; top: 1.25rem; inset-inline-end: -0.75rem; } }