/* =====================================================
   styles.css – קובץ סגנונות ראשי
   גרסה עם הסברים בעברית למתכנת בכל מקטע
   ===================================================== */

/* ---------- :root – משתנים גלובליים לשימוש חוזר ---------- */
:root {
    /* גווני מותג */
    --color-primary: #2E7D32;
    /* ירוק עלים עמוק – צבע מוביל */
    --color-accent: #FFA726;
    /* כתום מנגו – נקודת הדגשה */
    --color-bg: #FFFFFF;
    /* רקע לבן לברירת מחדל */
    --color-bg-alt: #F9F9F9;
    /* רקע אפור‑בהיר לאזורים חלופיים */
    --color-text: #1B1B1B;
    /* צבע טקסט ראשי */

    /* UI כלליים */
    --radius: 0.75em;
    /* רדיוס פינות גלובליות */
    --transition: 0.3s ease;
    /* מעבר חלק לכפתורים‑וכו' */

    /* טיפוגרפיה */
    --font-heading: 'Assistant', sans-serif;
    /* כותרות */
    --font-body: 'Alef', sans-serif;
    /* טקסט גוף */
}

/* ---------- RESET בסיסי ---------- */
*,
*::before,
*::after {
    box-sizing: border-box
}

html {
    font-size: 100%
}

/* 1em = 16px */
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
}

/* כותרות */
h1,
h2,
h3 {
    font-family: var(--font-heading);
    margin: 0 0 0.5em 0
}

h1 {
    font-size: 2.4em
}

h2 {
    font-size: 1.8em
}

h3 {
    font-size: 1.4em
}

/* =====================================================
   HERO SECTION – באנר עליון עם תמונת רקע וטקסט מרכזי
   ===================================================== */
.hero-section {
    position: relative;
    background: url('produce-box.webp') center/cover no-repeat;
    min-height: 100vh;
    /* גובה מסך מלא */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

/* שכבת חצי‑שקיפות מעל התמונה כדי לשפר קריאות */
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5)
}

.hero-section .overlay {
    position: relative;
    padding: 2em;
    max-width: 40em
}

.subtitle {
    margin-bottom: 1.5em;
    font-size: 1.125em
}

/* כפתור הנעה לפעולה – WhatsApp */
.cta {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    background: var(--color-primary);
    color: #fff;
    padding: .75em 1.5em;
    border-radius: var(--radius);
    font-size: 1.125em;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.cta:hover,
.cta:focus {
    background: #1f5c23
}

/* כהה מעט בהובר */
.small.cta {
    font-size: 1em;
    padding: .5em 1.25em
}

/* גרסה קטנה */

/* אייקון וואטסאפ בטקסט – נשתמש באימוג'י */
.wa-icon::before {
    content: '🟢';
    font-size: 1em
}

/* אנימציית Pulse שמושכת תשומת לב */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(46, 125, 50, .7)
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 .8em rgba(46, 125, 50, 0)
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(46, 125, 50, 0)
    }
}

.pulse {
    animation: pulse 2s infinite
}

/* בועית WhatsApp צפה בפינה התחתונה */
.wa-bubble {
    position: fixed;
    bottom: 1.5em;
    right: 1.5em;
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    z-index: 1000;
}

/* =====================================================
   USP SECTION – שלושה יתרונות מרכזיים
   ===================================================== */
.usps {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 3em 1em;
    background: var(--color-bg-alt);
}

.usp {
    text-align: center;
    max-width: 12em;
    margin: 1em
}

.usp-icon {
    font-size: 2em;
    display: block;
    margin-bottom: .5em
}

/* =====================================================
   CATALOG STRIP – רצועת קלפים לקטלוג מוצרים
   ===================================================== */
.catalog {
    padding: 3em 1em
}

.cards-container {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1em;
}

.card {
    background: #fff;
    border: .063em solid #e0e0e0;
    border-radius: var(--radius);
    min-width: 16em;
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.card img {
    width: 100%;
    height: auto;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius)
}

.card-info {
    padding: 1em
}

.price {
    font-weight: 700;
    margin: .5em 0
}

.tag-new {
    display: inline-block;
    background: var(--color-accent);
    color: #fff;
    padding: .25em .5em;
    border-radius: var(--radius);
    font-size: .875em
}

.card-cta {
    display: block;
    text-align: center;
    background: var(--color-primary);
    color: #fff;
    padding: .75em 1em;
    border-end-start-radius: var(--radius);
    border-end-end-radius: var(--radius);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.card-cta:hover,
.card-cta:focus {
    background: #1f5c23
}

/* =====================================================
   TESTIMONIALS – המלצות לקוחות בטור אחד (7 כרטיסים)
   ===================================================== */
.testimonials {
    background: var(--color-bg-alt);
    padding: 3em 1em;
    text-align: center
}

/* רשימת ההמלצות בטור אנכי */
.testimonial-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.testimonial {
    background: #fff;
    border: .063em solid #e6e6e6;
    border-radius: var(--radius);
    padding: 1.2em 1.4em;
    box-shadow: 0 0 .3em rgba(0, 0, 0, .04);
}

.stars {
    color: #ffb400;
    font-size: 1.25em;
    letter-spacing: .1em
}

.quote {
    margin: .6em 0 .4em;
    font-style: italic;
    line-height: 1.45
}

.author {
    font-weight: 600
}

/* ביטול הסליידר הישן – לא נחוץ עוד */
.testimonial-slider,
.testimonial.active {
    display: none
}

/* התאמת המקטע למסכים גדולים יותר */
@media(min-width:40em) {

    /* ‎≈640px */
    .testimonials {
        max-width: 45em;
        margin: 0 auto;
        padding: 3em 2em
    }
}

/* =====================================================
   HOW‑IT‑WORKS – תהליך שלושה שלבים
   ===================================================== */
.how-it-works {
    padding: 3em 1em;
    text-align: center
}

.how-it-works ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2em
}

.how-it-works li {
    max-width: 10em
}

.step-icon {
    font-size: 2em;
    display: block;
    margin-bottom: .5em
}

/* =====================================================
   SCARCITY – הודעת דחיפות להזמנה
   ===================================================== */
.scarcity {
    background: #fff8e1;
    padding: 2em 1em;
    text-align: center;
    font-weight: 600
}

/* =====================================================
   FAQ – אקורדיון שאלות נפוצות
   ===================================================== */
.faq {
    padding: 3em 1em
}

.faq details {
    margin-bottom: 1em;
    border: .063em solid #e0e0e0;
    border-radius: var(--radius);
    padding: 1em;
    background: #fff
}

.faq summary {
    cursor: pointer;
    font-weight: 600
}

/* =====================================================
   FOOTER – אזור תחתון של האתר
   ===================================================== */
footer {
    background: var(--color-primary);
    color: #fff;
    padding: 2em 1em;
    text-align: center
}

footer a {
    color: #fff;
    text-decoration: underline
}

footer .logo {
    max-width: 6em;
    margin-bottom: 1em
}

/* =====================================================
   ACCESSIBILITY BUTTON – כפתור נגישות צף
   ===================================================== */
#accessibility-btn {
    position: fixed;
    bottom: 1.5em;
    left: 1.5em;
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    background: var(--color-accent);
    border: none;
    color: #fff;
    font-size: 1.5em;
    cursor: pointer;
    z-index: 1000;
}

/* =====================================================
   RESPONSIVE TWEAKS – התאמות למסכים צרים
   ===================================================== */
@media(max-width:48em) {

    /* עד ~768px */
    .usps {
        flex-direction: column;
        align-items: center
    }

    .how-it-works ol {
        flex-direction: column;
        gap: 1.5em
    }
}

/* ----------עיצוב הכפתור פתח / סגור להמלצות נוספות ---------- */
.more-testimonials {
    margin: 1em 0 0;
    border: none;
}

.more-testimonials summary {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .4em;
    padding: 1em 0;
    font-family: var(--font-heading);
    font-size: 1.25em;
    font-weight: 700;
    color: var(--color-text);
    user-select: none;
    list-style: none;
    /* מסיר משולש דפדפן ישן */
    background: transparent;
}

/* טקסט + חץ כשהחלק סגור */
.more-testimonials summary::before {
    content: 'פתח';
}

.more-testimonials summary::after {
    content: '▼';
}

/* טקסט + חץ כשהחלק פתוח */
.more-testimonials[open] summary::before {
    content: 'סגור';
}

.more-testimonials[open] summary::after {
    content: '▲';
}

/* שינוי צבע בהובר / פוקוס */
.more-testimonials summary:hover,
.more-testimonials summary:focus {
    color: var(--color-primary);
}


/* =====================================================
   ABOUT SECTION – עיצוב נגיש ורספונסיבי
   מתאים לפלטת‑הצבעים והטיפוגרפיה של האתר
   ===================================================== */

/* מעטפת כללית */
.about {
    background: var(--color-bg);
    /* רקע לבן נקי */
    padding: 3em 1em;
    /* מרווח סביבי גמיש */
    text-align: center;
    /* מרכז כותרות ותמונה */
}

/* עוטף התוכן הפנימי – מגביל רוחב ומרכז */
.about-inner {
    max-width: 45em;
    /* ≈ 720 px ב־16 px בסיס */
    margin: 0 auto;
}


/* משפט פתיחה בולט */
.about .lead {
    font-size: 1.25em;
    /* גדול מטקסט גוף, עדיין נגיש */
    line-height: 1.45;
    margin-bottom: 1em;
    font-weight: 700;
}

/* רשימת ערכים – Flex עם גלישה */
.values-list {
    list-style: none;
    /* מסיר כפתורי‑תבליט */
    margin: 1.5em 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
}

/* כרטיס בודד ברשימת הערכים */
.values-list li {
    background: var(--color-bg-alt);
    /* אפור‑בהיר קיים */
    border-radius: var(--radius);
    padding: .75em 1.25em;
    font-weight: 600;
    box-shadow: 0 0 .25em rgba(0, 0, 0, .04);
    display: flex;
    align-items: center;
    gap: .5em;
}

/* נגישות לעיוורי‑צבעים – אל תסמוך רק על צבע */
.values-list li::before {
    content: '';
    /* נקה ברירת‑מחדל */
    display: none;
    /* אייקונים כבר בתוך הטקסט */
}

/* משפר נראות בפוקוס־מקלדת (WCAG 2.2 Focus Appearance) */
.about a:focus-visible,
.values-list li:focus-visible {
    outline: .25em solid var(--color-accent);
    outline-offset: .15em;
}

/* מצב prefers‑reduced‑motion: מבטל צללים דינמיים אם יש */
@media (prefers-reduced-motion: reduce) {
    .about img {
        box-shadow: none;
    }
}

/* מובייל – הטבלה נעשית בטור אחד */
@media (max-width: 40em) {

    /* עד ≈ 640 px */
    .values-list {
        flex-direction: column;
        align-items: center;
    }
}



/* ===== טופס יצירת קשר – CSS מעודכן ===== */

/* בסיס כללי: הפוך חישוב רוחב לגבול-inclusive */
#contact-form *,
#contact-form *::before,
#contact-form *::after {
    box-sizing: border-box;
}

/* מעטפת הטופס */
#contact-form {
    max-width: 40em;
    margin: 4em auto;
    padding: 2em;
    background: #f9f9f9;
    border-radius: 0.75em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

#contact-form h2 {
    margin-top: 0;
    text-align: center;
}

#contact-form label {
    display: block;
    margin: 1em 0 0.25em;
    font-weight: 600;
}

#contact-form input,
#contact-form select {
    width: 100%;
    padding: 0.6em;
    border: 1px solid #ccc;
    border-radius: 0.4em;
    font-size: 1em;
}

/* מצב פוקוס לנגישות (מקלדת) */
#contact-form input:focus-visible,
#contact-form select:focus-visible,
#contact-form button:focus-visible {
    outline: 3px solid #FFA726;
    /* כתום‑מנגו תואם פלטת הצבעים */
    outline-offset: 2px;
}

/* כפתור שליחה – קבע גבול קבוע ומעבר עדין */
#contact-form button {
    margin-top: 1.5em;
    width: 100%;
    padding: 0.75em;
    font-size: 1.125em;
    font-weight: 700;
    color: #fff;
    background: #2E7D32;
    border: 2px solid #2E7D32;
    /* גבול קבוע => אין "קפיצה" */
    border-radius: 0.6em;
    cursor: pointer;
    transition: background .25s, transform .12s;
}

#contact-form button:hover,
#contact-form button:focus {
    background: #1f5c23;
}

#contact-form button:active {
    transform: scale(0.97);
    /* סימולציית לחיצה בלי להזיז layout */
}

/* כפתור במצב מושבת (אחרי שליחה למניעת ספאם) */
#contact-form button:disabled {
    background: #9e9e9e;
    border-color: #9e9e9e;
    cursor: not-allowed;
}

/* הודעות מערכת */
.form-success {
    color: #2E7D32;
    margin-top: 1em;
    text-align: center;
    font-weight: 600;
}

.form-error {
    color: #C62828;
    margin-top: 1em;
    text-align: center;
    font-weight: 600;
}

/* התאמה למסכים קטנים יותר */
@media (max-width: 30em) {
    #contact-form {
        margin: 2em 1em;
        padding: 1.5em;
    }
}



/* === תמונה מוקטנת – גודל רספונסיבי ב‑em ===================== */

/* ברירת‑מחדל (דסקטופ גדול) */
.mini-img {
    /* ≈ 288 px אם ‎1 em = 16 px */
    width: 18em;
    height: auto;
    /* שומר על יחס‑גובה */
}

/* טבלט (עד 48 em ≈ 768 px) */
@media (max-width: 48em) {
    .mini-img {
        width: 16em;
    }

    /* ≈ 256 px */
}

/* מובייל צר (עד 30 em ≈ 480 px) */
@media (max-width: 30em) {
    .mini-img {
        width: 12em;
    }

    /* ≈ 192 px */
}

/* תמונות “אודות” ברוחב‑מלא – למעט .mini-img */
.about img:not(.mini-img) {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin-bottom: 1.5em;
    box-shadow: 0 0 .5em rgba(0, 0, 0, .06);
}



/* תונה שורה של פירות */
/* באנר רוחב‑מלא, גובה ~25 % מהחלון */
.catalog-banner {
  width: 100%;
  height: 25vh;           /* אפשר 20–30vh לפי הטעם */
  overflow: hidden;       /* חותך חלקי תמונה שלא נכנסים בגובה */
  margin: 0;              /* מסיר רווחים מ‑<figure> */
}

/* התמונה עצמה */
.catalog-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* ממלאת את המכלול בלי לעוות יחס‑צדדים */
  object-position: center;/* שומר נקודת עניין במרכז */
}

/* הגדרות כלליות לקונטיינר הקטלוג */
/* גריד רספונסיבי ב‑em */
.catalog .cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
  gap: 1em;
  padding: 1em;
}

/* סגנון כל כרטיס */
.catalog .cards-container .card {
  text-align: center;
  font-size: 1em;
}

/* תמונת הכרטיס */
.catalog .cards-container .card img {
  width: 12em;           /* רוחב בסיס ביחידות em */
  max-width: 100%;       /* לא לחרוג מרוחב הקונטיינר */
  height: auto;          /* יחס גובה‑רוחב נשמר */
  object-fit: cover;     /* חיתוך אחיד בלי עיוות */
  border-radius: 0.5em;  /* פינות עגולות קלות */
  display: block;
  margin: 0 auto 0.5em;  /* מרכז ומוסיף מרווח תחתון */
}

/* כיתוב הכרטיס */
.catalog .cards-container .card p {
  margin: 0;
  font-size: 1em;
}

/* גלילה אופקיט לקטלוג */

/* כאשר רוחב המסך עד 40em (~640px) */
@media (max-width: 40em) {
  .catalog .cards-container {
    display: flex;             /* שורה גמישה */
    flex-wrap: nowrap;         /* ללא שורות נוספות */
    overflow-x: auto;          /* גלילה אופקית */
    overflow-y: hidden;        /* מונע גלילה אנכית */
    -webkit-overflow-scrolling: touch; /* גלישה חלקה באייפון */
  }

  .catalog .cards-container .card {
    flex: 0 0 auto;            /* לא יתכווץ מעבר למינימום */
    min-width: 12em;           /* שומר על רוחב מינימלי כפי שהגדרנו */
  }
}