/* ==========================================================================
   כנען ישראל – גיליון סגנון ראשי
   עברית, RTL, מותאם למחשב, טאבלט וטלפון.
   ========================================================================== */

:root {
    --red:        #c8102e;
    --red-dark:   #9c0c23;
    --green:      #1b7a3d;
    --green-dark: #14602f;
    --gold:       #d4a017;
    --gold-light: #f2c230;
    --blue:       #1b4b9e;
    --blue-dark:  #143a7a;

    --ink:        #22303f;
    --ink-soft:   #4a5a6b;
    --muted:      #6b7a8a;
    --line:       #e2e7ee;
    --line-soft:  #eef2f6;
    --paper:      #ffffff;
    --cream:      #faf8f3;
    --bg:         #f4f6f9;

    --radius:     12px;
    --radius-lg:  18px;
    --shadow:     0 2px 8px rgba(20, 30, 45, .06);
    --shadow-md:  0 8px 24px rgba(20, 30, 45, .10);
    --shadow-lg:  0 16px 44px rgba(20, 30, 45, .14);

    --wrap:       1180px;
    --font:       "Heebo", "Rubik", "Segoe UI", "Arial Hebrew", Arial, Helvetica, sans-serif;
}

/* ------------------------------------------------------------ בסיס */

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.75;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
    font-weight: 800;
    line-height: 1.25;
    color: var(--ink);
    margin: 0 0 .6em;
    letter-spacing: -.01em;
}

h1 { font-size: clamp(28px, 4.4vw, 44px); }
h2 { font-size: clamp(23px, 3vw, 31px); }
h3 { font-size: clamp(19px, 2.2vw, 23px); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.wrap {
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: 20px;
}

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

/* דילוג לתוכן – נגישות מקלדת */
.skip-link {
    position: absolute;
    right: 12px;
    top: -60px;
    z-index: 200;
    background: var(--blue);
    color: #fff;
    padding: 12px 22px;
    border-radius: 0 0 10px 10px;
    font-weight: 700;
    transition: top .2s;
}
.skip-link:focus { top: 0; text-decoration: none; }

:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ------------------------------------------- פס צבעוני מפריד */

.stripe {
    height: 7px;
    background: linear-gradient(
        90deg,
        var(--red)        0 20%,
        #e8620f          20% 40%,
        var(--gold-light) 40% 60%,
        var(--green)      60% 80%,
        var(--blue)       80% 100%
    );
}
.stripe--thin { height: 4px; }

/* ------------------------------------------------------ סרגל עליון */

.topbar {
    background: var(--ink);
    color: #cfd8e2;
    font-size: 14px;
    padding: 7px 0;
}
.topbar .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    align-items: center;
    justify-content: space-between;
}
.topbar a { color: #fff; }
.topbar-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    align-items: center;
}
.topbar-contacts span { display: inline-flex; align-items: center; gap: 6px; }
.topbar-actions { display: flex; gap: 16px; align-items: center; }

/* ---------------------------------------------------------- כותרת */

.site-header {
    background: var(--paper);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}
.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 78px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;

    /* הלוגו רשאי להצטמצם. בלי זה הוא דוחף את כפתור התפריט
       אל מחוץ למסך בטלפונים צרים ויוצר גלילה אופקית. */
    flex: 0 1 auto;
    min-width: 0;
}
.brand:hover { text-decoration: none; }

.brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, var(--red), var(--gold) 45%, var(--green));
    color: #fff;
    font-weight: 900;
    font-size: 21px;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(200, 16, 46, .28);
}
.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}
.brand-name {
    font-size: 24px;
    font-weight: 900;
    color: var(--red);
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brand-sub {
    font-size: 12.5px;
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-toggle { flex-shrink: 0; }

/* ---------------------------------------------------------- ניווט */

.nav-toggle {
    display: none;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 9px 13px;
    font: inherit;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    cursor: pointer;
    align-items: center;
    gap: 8px;
}
.nav-toggle-bars {
    display: inline-flex;
    flex-direction: column;
    gap: 3.5px;
}
.nav-toggle-bars i {
    width: 19px;
    height: 2.5px;
    background: var(--ink);
    border-radius: 2px;
}

.main-nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: flex-end;
}
.main-nav a {
    display: block;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

/* בין 1100 ל-1240 פיקסלים מצמצמים עוד, כדי שהתפריט יישאר בשורה אחת */
@media (max-width: 1240px) and (min-width: 981px) {
    .main-nav a { padding: 8px 8px; font-size: 14.5px; }
    .brand-sub { display: none; }
}
.main-nav a:hover {
    background: var(--line-soft);
    color: var(--ink);
    text-decoration: none;
}
.main-nav a.is-active {
    background: var(--green);
    color: #fff;
}
.main-nav a.nav-cta {
    background: var(--red);
    color: #fff;
    margin-inline-start: 6px;
}
.main-nav a.nav-cta:hover { background: var(--red-dark); }

/* ------------------------------------------------------------ הירו */

.hero {
    background: var(--cream);
    border-bottom: 1px solid var(--line);
}
.hero-figure { margin: 0; }
.hero-figure img {
    width: 100%;
    display: block;
}

/* ------------------------------------------------------------------
   גובה קבוע לתמונת הכותרת.
   נבחר לכל דף בנפרד במערכת הניהול. שימושי כשקובץ התמונה כולל
   שטח ריק בתחתיתו – היחס חושף את האיור ומשמיט את השאר.
   העיגון לראש התמונה שומר על הכותרת והלוגו תמיד גלויים.
   ------------------------------------------------------------------ */
.hero-figure--3x1 img,
.hero-figure--21x9 img,
.hero-figure--11x5 img,
.hero-figure--2x1 img,
.hero-figure--16x9 img {
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.hero-figure--3x1  { aspect-ratio: 3 / 1; }
.hero-figure--21x9 { aspect-ratio: 21 / 9; }
.hero-figure--11x5 { aspect-ratio: 11 / 5; }
.hero-figure--2x1  { aspect-ratio: 2 / 1; }
.hero-figure--16x9 { aspect-ratio: 16 / 9; }

/* במסך צר יחס רחב מדי הופך את הכותרת לפס דק – מרככים אותו */
@media (max-width: 700px) {
    .hero-figure--3x1  { aspect-ratio: 2 / 1; }
    .hero-figure--21x9 { aspect-ratio: 16 / 9; }
    .hero-figure--11x5 { aspect-ratio: 16 / 10; }
    .hero-figure--2x1  { aspect-ratio: 16 / 10; }
}

/* ------------------------------------------------------------------
   שכבות חיות מעל תמונת הכותרת של דף הבית.
   התמונה כוללת תיבת מונה מצוירת ואת הכיתוב "פרסם כאן".
   כאן מונחים מעליהם מונה אמיתי וקישור, לפי אחוזים מגודל התמונה,
   כך שהמיקום נשמר בכל רוחב מסך.
   המיקומים מכוילים לקובץ assets/img/hero-home.png (1701x925).
   אם מחליפים את תמונת הכותרת – יש לכבות את השכבה בהגדרות המערכת.
   ------------------------------------------------------------------ */

.hero-figure--overlay {
    position: relative;
    container-type: inline-size;
}

/* מונה חי מעל תיבת המונה המצוירת */
.hero-overlay-counter {
    position: absolute;
    left: 11.87%;
    top: 75.7%;
    width: 17.25%;
    height: 7.05%;
    display: flex;
    gap: 1.6%;
    direction: ltr;
    padding: .5% .6%;
    border-radius: .35vw;
    background: linear-gradient(180deg, #6b4f12, #3d2c07);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55);
}
.hero-overlay-counter span {
    flex: 1;
    display: grid;
    place-items: center;
    border-radius: .22vw;
    background: linear-gradient(180deg, #fdfbf4 0 48%, #e6e0cf 52% 100%);
    color: #2b2417;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .25);

    /* גודל הספרה נגזר מרוחב התמונה כדי שיישאר יחסי בכל מסך */
    font-size: 2.6vw;                 /* גיבוי לדפדפנים ישנים */
    font-size: 2.6cqw;
}

/* קישור שקוף מעל הכיתוב "פרסם כאן" */
.hero-overlay-ad {
    position: absolute;
    left: 8.8%;
    top: 84.5%;
    width: 23%;
    height: 10.5%;
    border-radius: .5vw;
    text-indent: -9999px;
    overflow: hidden;
    transition: background .18s, box-shadow .18s;
}
.hero-overlay-ad:hover,
.hero-overlay-ad:focus-visible {
    background: rgba(200, 16, 46, .10);
    box-shadow: 0 0 0 2px rgba(200, 16, 46, .35);
    text-decoration: none;
}

/* במסכים צרים התמונה קטנה מדי לשכבות – מסתירים ומציגים מונה רגיל מתחת */
@media (max-width: 560px) {
    .hero-overlay-counter { display: none; }
    .hero-overlay-ad { display: none; }
}

.hero-mobile-counter {
    display: none;
    padding: 20px 0;
    text-align: center;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
}
@media (max-width: 560px) {
    .hero-mobile-counter { display: block; }
}

/* מצב ריק – כשעדיין לא הועלתה תמונת כותרת */
.hero-empty {
    margin: 26px 0;
    border: 2.5px dashed var(--line);
    border-radius: var(--radius-lg);
    background:
        repeating-linear-gradient(135deg, #fff 0 14px, #fbfcfd 14px 28px);
    padding: 46px 24px;
    text-align: center;
    color: var(--muted);
}
.hero-empty strong {
    display: block;
    color: var(--ink);
    font-size: 19px;
    margin-bottom: 6px;
}
.hero-empty code {
    direction: ltr;
    display: inline-block;
    background: var(--line-soft);
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 13.5px;
}

/* כותרת טקסטואלית לדפים פנימיים ללא תמונה */
.page-head {
    background: linear-gradient(135deg, var(--green) 0%, var(--blue) 100%);
    color: #fff;
    padding: 46px 0 40px;
}
.page-head h1 { color: #fff; margin-bottom: .25em; }
.page-head p {
    margin: 0;
    font-size: 18px;
    color: rgba(255, 255, 255, .92);
    max-width: 760px;
}

/* -------------------------------------- רצועת קשר מתחת לתמונת הירו */

.hero-contact {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 22px 0;
}
.hero-contact-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 14px;
}
.contact-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.contact-chip:hover {
    text-decoration: none;
    border-color: var(--green);
    box-shadow: 0 4px 14px rgba(27, 122, 61, .16);
    transform: translateY(-1px);
}
.contact-chip .icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
}
.contact-chip .icon svg { width: 16px; height: 16px; fill: currentColor; }
.contact-chip--mail  .icon { background: var(--red); }
.contact-chip--mail2 .icon { background: var(--gold); }
.contact-chip--site  .icon { background: var(--blue); }
.contact-chip .value {
    direction: ltr;
    unicode-bidi: embed;
    font-size: 15.5px;
}

/* ------------------------------------------------------- תוכן ראשי */

main { display: block; }

.section {
    padding: 52px 0;
}
.section--tight { padding: 34px 0; }
.section--paper { background: var(--paper); }
.section--cream { background: var(--cream); }

.section-title {
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 26px;
}
.section-title::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 68px;
    height: 4px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--red), var(--gold) 50%, var(--green));
}
.section-title--center { text-align: center; }
.section-title--center::after {
    inset-inline-start: 50%;
    transform: translateX(50%);
}

.prose { max-width: 860px; }
.prose h2 { margin-top: 1.5em; }
.prose h3 { margin-top: 1.3em; }
.prose ul, .prose ol { padding-inline-start: 22px; margin: 0 0 1.1em; }
.prose li { margin-bottom: .45em; }
.prose blockquote {
    margin: 1.4em 0;
    padding: 14px 20px;
    border-inline-start: 4px solid var(--gold);
    background: var(--cream);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--ink-soft);
}
.prose img { border-radius: var(--radius); margin: 1.2em 0; }
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2em 0;
}
.prose th, .prose td {
    border: 1px solid var(--line);
    padding: 10px 12px;
    text-align: start;
}
.prose th { background: var(--cream); font-weight: 700; }

/* גלילה אופקית לתוכן רחב */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------- רשימת נקודות */

.checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 11px;
}
.checklist li {
    position: relative;
    padding-inline-start: 34px;
    font-size: 17px;
}
.checklist li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .48em;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: inset 0 0 0 3.5px #fff, 0 0 0 2px var(--green);
}

/* ---------------------------------------------------------- כרטיסים */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 22px;
}
.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px 24px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    transition: transform .18s, box-shadow .18s;
    display: flex;
    flex-direction: column;
}
.card::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--red), var(--gold) 50%, var(--green));
}
a.card:hover,
.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}
.card h3 { margin-bottom: .45em; color: var(--ink); }
.card p { color: var(--ink-soft); font-size: 16px; }
.card-more {
    margin-top: auto;
    padding-top: 14px;
    color: var(--blue);
    font-weight: 700;
    font-size: 15.5px;
}

/* ----------------------------------------------------- קריאה לפעולה */

.cta {
    background: linear-gradient(135deg, var(--green) 0%, var(--blue) 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 40px 34px;
    text-align: center;
    box-shadow: var(--shadow-md);
}
.cta h2 { color: #fff; }
.cta p {
    color: rgba(255, 255, 255, .93);
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: 1.6em;
    font-size: 17.5px;
}

/* ---------------------------------------------------------- כפתורים */

.btn {
    display: inline-block;
    padding: 13px 30px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 17px;
    font-family: inherit;
    border: 2px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: background .15s, color .15s, transform .12s, box-shadow .15s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary   { background: var(--red);   color: #fff; }
.btn-primary:hover { background: var(--red-dark); color: #fff; }

.btn-green     { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-dark); color: #fff; }

.btn-blue      { background: var(--blue);  color: #fff; }
.btn-blue:hover { background: var(--blue-dark); color: #fff; }

.btn-white     { background: #fff; color: var(--green); }
.btn-white:hover { background: #f2f6f3; color: var(--green-dark); }

.btn-outline   { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn-outline:hover { background: var(--blue); color: #fff; }

.btn-block { display: block; width: 100%; }

/* ------------------------------------------------------ לוח מספרים */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 18px;
}
.stat {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 18px;
    text-align: center;
    box-shadow: var(--shadow);
}
.stat-value {
    font-size: 36px;
    font-weight: 900;
    line-height: 1.1;
    color: var(--green);
    font-variant-numeric: tabular-nums;
}
.stat-label {
    font-size: 14.5px;
    color: var(--muted);
    font-weight: 600;
    margin-top: 5px;
}
.stat--red   .stat-value { color: var(--red); }
.stat--blue  .stat-value { color: var(--blue); }
.stat--gold  .stat-value { color: #a97c0b; }

/* --------------------------------------------- מונה כניסות מכני */

.visit-counter {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
}
.visit-counter-label {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--green-dark);
    letter-spacing: .02em;
}
.visit-digits {
    display: flex;
    gap: 4px;
    direction: ltr;
    padding: 7px 9px;
    background: linear-gradient(180deg, #6b4f12, #3d2c07);
    border: 2px solid var(--gold);
    border-radius: 8px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5), 0 3px 10px rgba(0, 0, 0, .18);
}
.visit-digits span {
    width: 26px;
    height: 38px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #fdfbf4 0 48%, #e8e2d2 52% 100%);
    border-radius: 3px;
    font-size: 25px;
    font-weight: 900;
    color: #2b2417;
    font-variant-numeric: tabular-nums;
    box-shadow: inset 0 -1px 3px rgba(0, 0, 0, .22);
}

/* -------------------------------------------------------- חדשות */

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 24px;
}
.news-item {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    transition: transform .18s, box-shadow .18s;
}
.news-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.news-thumb {
    aspect-ratio: 16 / 9;
    background: var(--cream);
    overflow: hidden;
}
.news-thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.news-date {
    font-size: 13.5px;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 7px;
}
.news-item h3 { font-size: 20px; margin-bottom: .4em; }
.news-item h3 a { color: var(--ink); }
.news-item h3 a:hover { color: var(--red); text-decoration: none; }
.news-item p { color: var(--ink-soft); font-size: 15.5px; }
.news-item .card-more { margin-top: auto; }

/* -------------------------------------------------------- סניפים */

.branch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
    gap: 20px;
}
.branch {
    background: var(--paper);
    border: 1px solid var(--line);
    border-inline-start: 5px solid var(--green);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow);
}
.branch h3 { margin-bottom: .3em; font-size: 20px; }
.branch-city {
    display: inline-block;
    background: var(--cream);
    border-radius: 999px;
    padding: 3px 13px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--green-dark);
    margin-bottom: 12px;
}
.branch dl {
    margin: 12px 0 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 12px;
    font-size: 15px;
}
.branch dt { color: var(--muted); font-weight: 600; }
.branch dd { margin: 0; font-weight: 600; }

/* --------------------------------------------------------- טפסים */

.form-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-md);
    max-width: 720px;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 4px 20px;
}
.field { margin-bottom: 17px; }
.field--full { grid-column: 1 / -1; }

.field label {
    display: block;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 6px;
    color: var(--ink);
}
.field .req { color: var(--red); }

.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field input[type=url],
.field input[type=number],
.field input[type=password],
.field input[type=date],
.field select,
.field textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 9px;
    font: inherit;
    font-size: 16px;
    background: #fff;
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(27, 75, 158, .13);
    outline: none;
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--red); }

.field-hint { font-size: 13px; color: var(--muted); margin-top: 5px; }
.field-error { font-size: 13.5px; color: var(--red); font-weight: 600; margin-top: 5px; }

.field-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
}
.field-check input { margin-top: 5px; width: 17px; height: 17px; flex-shrink: 0; }
.field-check label { font-weight: 500; margin: 0; }

/* מלכודת ספאם – מוסתרת מבני אדם ומקוראי מסך */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

/* -------------------------------------------------------- התראות */

.alert {
    padding: 15px 19px;
    border-radius: var(--radius);
    margin-bottom: 22px;
    font-size: 16px;
    border: 1px solid transparent;
}
.alert strong { font-weight: 800; }
.alert-success { background: #e9f6ee; border-color: #bce0c9; color: #14532d; }
.alert-error   { background: #fdecee; border-color: #f4c2c8; color: #8d1023; }
.alert-info    { background: #e8f0fb; border-color: #c1d5f2; color: #143a7a; }
.alert-warning { background: #fef6e3; border-color: #f3dfa8; color: #7a5a06; }
.alert ul { margin: 8px 0 0; padding-inline-start: 20px; }

/* --------------------------------------------------- פרטי קשר */

.contact-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.contact-list li {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: var(--shadow);
}
.contact-list .k {
    font-size: 13.5px;
    color: var(--muted);
    font-weight: 700;
    display: block;
    margin-bottom: 3px;
}
.contact-list .v {
    font-size: 17px;
    font-weight: 700;
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
    word-break: break-word;
}

/* ------------------------------------------------------ פוטר */

.site-footer {
    background: var(--ink);
    color: #b9c4d0;
    padding: 46px 0 0;
    margin-top: 0;
    font-size: 15.5px;
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 34px;
    padding-bottom: 34px;
}
.site-footer h4 {
    color: #fff;
    font-size: 17px;
    margin-bottom: 14px;
}
.site-footer a { color: #dbe3ec; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }
.footer-brand-name {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 6px;
}
.footer-motto { color: var(--gold-light); font-weight: 600; margin-bottom: 14px; }
.footer-contact-line {
    display: block;
    direction: ltr;
    unicode-bidi: embed;
    text-align: start;
    margin-bottom: 8px;
    word-break: break-word;
}
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 18px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #8b98a6;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* ------------------------------------------------------- עמודי מידע */

.breadcrumbs {
    font-size: 14.5px;
    color: var(--muted);
    padding: 14px 0;
}
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--blue); }
.breadcrumbs span { margin: 0 7px; }

.pagination {
    display: flex;
    gap: 7px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 34px;
    list-style: none;
    padding: 0;
}
.pagination a,
.pagination span {
    display: block;
    min-width: 42px;
    text-align: center;
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    font-weight: 700;
    color: var(--ink-soft);
}
.pagination a:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.pagination .is-current { background: var(--green); border-color: var(--green); color: #fff; }

.empty-state {
    text-align: center;
    padding: 54px 24px;
    color: var(--muted);
    background: var(--paper);
    border: 2px dashed var(--line);
    border-radius: var(--radius-lg);
}
.empty-state strong { display: block; color: var(--ink); font-size: 19px; margin-bottom: 6px; }

/* ------------------------------------------------------- רספונסיבי */

@media (max-width: 980px) {
    .nav-toggle { display: inline-flex; }

    .main-nav {
        position: absolute;
        top: 100%;
        inset-inline: 0;
        background: var(--paper);
        border-top: 1px solid var(--line);
        box-shadow: var(--shadow-lg);
        display: none;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
    .main-nav.is-open { display: block; }
    .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px; }
    .main-nav a {
        padding: 13px 16px;
        border-radius: 8px;
        font-size: 16.5px;
    }
    .main-nav a.nav-cta { margin: 6px 0 0; text-align: center; }

    .site-header .wrap { position: relative; }
}

@media (max-width: 640px) {
    body { font-size: 16px; }

    .topbar { font-size: 13px; }
    .topbar .wrap { justify-content: center; text-align: center; }

    .brand-name { font-size: 20px; }
    .brand-mark { width: 40px; height: 40px; font-size: 18px; }
    .brand-sub { display: none; }

    .section { padding: 36px 0; }
    .form-card { padding: 22px 18px; }
    .cta { padding: 30px 22px; }
    .page-head { padding: 32px 0 28px; }

    .contact-chip { width: 100%; justify-content: center; }
    .hero-contact-inner { flex-direction: column; }

    .visit-digits span { width: 22px; height: 33px; font-size: 21px; }

    .footer-bottom { justify-content: center; text-align: center; }
}

/* ------------------------------------------------------- הדפסה */

@media print {
    .topbar, .site-header, .site-footer, .nav-toggle, .cta, .skip-link { display: none !important; }
    body { background: #fff; font-size: 12pt; }
    .section { padding: 12px 0; }
    a { color: #000; text-decoration: underline; }
}

/* ------------------------------------- העדפת תנועה מופחתת */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}