:root{
  --bg: #ffffff;
  --text: #222226;        /* charcoal */
  --muted: #6b6b6f;
  --accent: #cfa352;      /* warm gold */
  --accent-2: #444648;
  --max-width: 1100px;
  --radius: 8px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

body {
  margin: 0;
  position: relative; /* חשוב כדי שה::before יהיה יחסית אליו */
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;
  background: none; /* מבטלים את הרקע הקיים */
}
body::before {
  content: "";
  position: fixed;       /* נשאר במקום גם בגלילה */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('images/background.png') no-repeat center center;
  background-size: cover; /* תמונה מתאימה לכל המסך */
  z-index: -1;            /* תמיד מאחורי התוכן */          /* חצי שקוף, אפשר לשנות בין 0-1 */
}

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

/* HEADER */
.site-header {
  background: #fff;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 64px;
  height: 64px; 
  display: flex;
  align-items: center;
  padding: 0 20px;
}

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

.logo {
  font-weight: 700;
  font-size: 20px;
  text-decoration: none;
  color: var(--text);
}

.logo-accent {
  color: var(--accent);
  margin-left: 4px;
}

/* LOGO IMAGE SIZE */
#site-logo {
  height: 50px;
  width: auto;
  max-width: 100%;
  display: block;
}

/* NAVIGATION BUTTONS */
.nav{
  display:flex;
  gap:12px;
}
.nav a{
  color: var(--text);
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 20px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}
.nav a:hover{
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.nav a.active{
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-color: var(--accent-2);
}

#nav-toggle, #nav-toggle-2, #nav-toggle-3, #nav-toggle-4{display:none;background:none;border:0;font-size:22px;cursor:pointer}

/* HERO */
.hero{padding:48px 0}
.hero-grid{display:grid;grid-template-columns:1fr 460px;gap:28px;align-items:center}
.hero h1{font-size:40px;margin:0; color:#fff}
.tagline{color:#fff;margin:10px 0 20px}
.hero-image{height:300px;background-size:cover;background-position:center;border-radius:12px;box-shadow:0 8px 30px rgba(6,6,6,0.07)}

/* CARDS */
.cards {
  display: flex;
  gap: 18px;
  padding: 40px 0;
}

.card {
  flex: 1;
  background: #fff8f0;
  border: 1.5px solid var(--accent);
  padding: 30px 24px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card h3 {
  margin-top: 0;
  font-size: 1.3em;
  color: var(--text);
  letter-spacing: 0.3px;
}

.card p {
  color: var(--muted);
  font-size: 0.95em;
  margin-top: 8px;
  line-height: 1.6;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.card-chef,
.card-drinks,
.card-events {
  background: rgba(0, 0, 0, 0.4); /* שחור חצי שקוף */
  border: none;
  color: #f5f5f5; /* צבע טקסט כללי בהיר כמו ב-about-page */
}

.card-chef h3,
.card-drinks h3,
.card-events h3 {
  color: #ffffff; /* כותרות בלבן */
}

.card-chef p,
.card-drinks p,
.card-events p {
  color: #fdf1e0; /* טקסט בגוון קרם בהיר כמו ב-about-page */
}

.card-chef p strong,
.card-drinks p strong,
.card-events p strong {
  color: #ffd479; /* זהב חם להדגשה */
  font-weight: 700;
}

.card-chef p em,
.card-drinks p em,
.card-events p em {
  color: #ffecb3; /* זהוב בהיר יותר לאיטליק */
  font-style: italic;
}
/* FOOTER */
.site-footer{border-top:1px solid #efefef;padding:26px 0;color: #fff;margin-top:40px}
.footer-grid{display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap}
.site-footer a{color:var(--accent-2);text-decoration:none}

/* BUTTONS */
.btn{background:var(--accent);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none;display:inline-block}
.btn-outline{background:transparent;border:1px solid #eaeaea;color:var(--text);padding:10px 16px;border-radius:8px}

/* TEXT */
.lead{color:var(--muted);max-width:70ch}

/* MENU HERO */
.menu-hero{padding:28px 0}
.menu-filters {
  margin-top: 0;
  margin-bottom: 0;
  padding: 10px 0;
}
.filter{border:1px solid #eee;background:#fff;padding:8px 12px;border-radius:8px;cursor:pointer}
.filter.active{background:var(--accent);color:#fff;border-color:var(--accent)}

.category-note {
  color: #fff;            /* טקסט לבן */
  font-size: 1em;         /* גודל טקסט נוח */
  margin-top: -8px;       /* מצמיד את זה לכותרת קצת */
  margin-bottom: 8px;     /* רווח לפני הפריטים */
}

/* MENU GRID */
.menu-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  padding:18px 0;
    transition: opacity 0.3s ease;
}

.contact-grid{display:grid;grid-template-columns:1fr 360px;gap:20px;padding:18px 0}

.menu-item{
  border:1px solid #f2f2f2;
  padding:20px;
  border-radius:12px;
  background:#fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.menu-item:hover{
  transform: translateY(-6px);
  box-shadow:0 12px 25px rgba(0,0,0,0.15);
}

.menu-item h3{
  margin:0 0 8px;
  font-size:18px;
  color:var(--text);
}

.menu-item p{
  color:var(--muted);
  margin-bottom:10px;
  font-size:15px;
}

.price{
  float:right;
  color:var(--muted);
  font-weight:600;
}

.menu-category h2 {
  color: #ffffff;           /* כותרת בלבן */
  border: 2px solid #ffffff; /* מסגרת לבנה סביב הכותרת */
  padding: 8px 16px;        /* ריווח פנימי יפה */
  border-radius: 12px;      /* פינות מעוגלות */
  display: inline-block;     /* כך שהמסגרת לא תתפשט על כל השורה */
  margin-bottom: 16px;       /* ריווח מתחת לכותרת */
  background-color: rgba(0,0,0,0.3); /* רקע חצי שקוף כדי להבליט על הרקע */
  font-weight: 600;          /* כותרת מודגשת */
  letter-spacing: 1px;
}

/* ABOUT HERO */
.about-hero .split{display:grid;grid-template-columns:1fr 420px;gap:20px;align-items:center;padding:28px 0}
.about-image{height:260px;background-size:cover;border-radius:10px}

/* CONTACT */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 30px;              /* רווח גדול יותר בין טופס לפרטים */
  padding: 18px 0;
}

.contact-form {
  padding-right: 20px;    /* ריווח פנימי מימין כדי שלא ייגע בקצה */
}

.contact-form label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 8px 10px;       /* טיפה קטן יותר */
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;  /* חשוב לשמירה על מימדים נכונים */
}

.map-placeholder iframe {
  width: 100%;
  height: 200px;
  border: 0;
  border-radius: 8px;
}
/* UTILITY */
.muted{color:var(--muted);font-size:14px}

/* SMALL SCREENS */
@media (max-width:880px){
  .hero-grid, .about-hero .split{grid-template-columns:1fr}
  .hero-image{height:220px}
  .cards{flex-direction:column}
  .nav{
    display:none;
    flex-direction:column;
    position:absolute;
    top:64px;
    right:20px;
    background:#fff;
    border-radius:10px;
    padding:12px 18px;
    box-shadow:0 12px 30px rgba(0,0,0,0.12);
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity:0;
    transform: translateY(-20px);
  }
  .nav.show{
    display:flex;
    opacity:1;
    transform: translateY(0);
  }
  .nav a{
    margin:6px 0;
    padding:10px 14px;
    border-radius:8px;
  }

  #nav-toggle,#nav-toggle-2,#nav-toggle-3,#nav-toggle-4{
    display:block;
    cursor:pointer;
    font-size:24px;
    background:var(--accent);
    color:#fff;
    border-radius:6px;
    padding:4px 10px;
    border:none;
    transition: background 0.3s;
  }
  #nav-toggle:hover,#nav-toggle-2:hover,#nav-toggle-3:hover,#nav-toggle-4:hover{
    background:var(--accent-2);
  }

  .footer-grid{flex-direction:column;gap:10px}
  .contact-grid{grid-template-columns:1fr}
}

/* 5-Star Reviews Section */
.reviews{
  padding: 60px 0;
  /* רקע ליניארי חצי שקוף */
  background: linear-gradient(
    135deg, 
    rgba(0, 0, 0, 0.4),  /* בהיר חצי שקוף */
    rgba(0, 0, 0, 0.4)
  );
  text-align: center;
  border-radius: 30px;
}
.reviews-title{
  font-size:2.2em;
  margin-bottom:40px;
  color:var(--accent);
  font-weight:600;
  letter-spacing:1px;
}

.review-grid{
  display:flex;
  gap:25px;
  flex-wrap:wrap;
  justify-content:center;
}

.review-card{
  background: rgba(56, 56, 56, 0.4); /* לבן חצי שקוף */
  border-radius: 20px;
  padding: 30px 25px;
  max-width: 300px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-card:hover{
  transform:translateY(-8px) scale(1.03);
  box-shadow:0 15px 30px rgba(0,0,0,0.2);
}

.stars{
  color:#f4c542;
  font-size:1.4em;
  margin-bottom:15px;
}

.review-card p {
  color: #fdf1e0;        /* קרם בהיר ונעים – כמו ב-about-page */
  font-size: 1em;
  margin-bottom: 10px;
}

.reviewer {
  font-style: italic;
  font-weight: 500;
  color: #ffd479;         /* זהב חם להדגשת שם הסוקר */
}

/* אם יש מילים מודגשות בתוך הביקורת */
.review-card p strong {
  color: #ffd479;         /* זהב חם */
  font-weight: 700;
}

/* אם יש טקסט באיטליק */
.review-card p em {
  color: #ffecb3;         /* זהוב בהיר ועדין */
  font-style: italic;
}

@media (max-width: 768px){
  .review-grid{
    flex-direction:column;
    align-items:center;
  }
}

/* CONTACT PAGE - bright text */
.contact-page {
  color: #f5f5f5;
}

.contact-page h1,
.contact-page h2,
.contact-page h3 {
  color: #ffffff;
}

.contact-page p,
.contact-page label {
  color: #f0f0f0;
}

.contact-page input,
.contact-page textarea {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
}

.contact-page .btn {
  background: var(--accent);
  color: #fff;
  border: none;
}

.contact-page .btn:hover {
  background: var(--accent-2);
}

.contact-page .muted {
  color: rgba(255,255,255,0.7);
}
/* ABOUT PAGE - bright text, no background box */
.about-page {
  color: #f5f5f5;
}

.about-page h1,
.about-page h2,
.about-page h3 {
  color: #ffffff;
}

.about-page p {
  font-size: 1.6rem;         /* מגדיל את הטקסט */
  line-height: 1.8;          /* רווח בין השורות לקריאות */
  color: #fdf1e0;            /* צבע בהיר שיתאים לרקע כהה */
  background: rgba(0, 0, 0, 0.4); /* רקע חצי שקוף להדגשה */
  padding: 20px;              /* מרווח פנימי לפסקה */
  border-radius: 12px;        /* פינות מעוגלות */
  box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* צל קל לעומק */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-page p:hover {
  transform: translateY(-5px);      /* אפקט קל כשעוברים עם העכבר */
  box-shadow: 0 8px 20px rgba(0,0,0,0.5); /* צל חזק יותר */
}

.about-page p strong {
  color: #ffd479;       /* צבע זהב חם להדגשה */
  font-weight: 700;
}

.about-page p em {
  font-style: italic;
  color: #ffecb3;       /* צבע מעט בהיר יותר להדגשה עדינה */
}

.about-page p::first-letter {
  font-size: 2rem;      /* אות ראשונה גדולה */
  font-weight: bold;
  color: #ffd479;
}

.about-page strong {
  color: #ffffff;
  font-weight: 600;
}

.about-page a {
  color: #ffd479; /* קישורים בצהוב עדין */
  text-decoration: underline;
}