/* ===================================================================
   spa2000 Modern Refresh — added 2026-04-29
   Reversible: delete /wp-content/mu-plugins/spa2000-modern-refresh.* to revert.
   No theme files modified. Pure additive CSS overrides on top of Kadence.
   =================================================================== */

/* 1. Modern Hebrew typography */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800&family=Assistant:wght@300;400;600;700&display=swap');

body, .site, .entry-content, .product, button, input, textarea, select,
.woocommerce, .woocommerce-page, .site-title, .menu-item,
.widget, .footer-widgets {
  font-family: 'Heebo', 'Assistant', 'Arial Hebrew', 'Tahoma', sans-serif !important;
  font-feature-settings: "kern" on, "liga" on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2. Modern spa color palette (sage / warm earth) */
:root {
  --spa-primary:    #6b8e7a;   /* sage green - main brand */
  --spa-primary-dk: #4a6b58;   /* sage darker */
  --spa-accent:     #2c4f3b;   /* deep forest - headings */
  --spa-secondary:  #d4c19c;   /* warm sand */
  --spa-cta:        #c2614a;   /* warm terracotta - CTA buttons */
  --spa-cta-dk:     #a04a37;
  --spa-bg:         #faf8f3;   /* warm off-white background */
  --spa-card-bg:    #ffffff;
  --spa-text:       #1f2937;   /* charcoal */
  --spa-muted:      #6b7280;
  --spa-border:     #e5e7eb;
  --spa-shadow-sm:  0 1px 3px rgba(0,0,0,0.04);
  --spa-shadow-md:  0 4px 12px rgba(0,0,0,0.06);
  --spa-shadow-lg:  0 12px 32px rgba(0,0,0,0.10);
  --spa-radius:     14px;
  --spa-radius-sm:  10px;
}

body {
  background: var(--spa-bg) !important;
  color: var(--spa-text) !important;
  line-height: 1.65;
}

/* 3. Headings — modern weight + accent color */
h1, h2, h3, h4,
.site-title,
.page-title,
.entry-title,
.product_title {
  font-weight: 700 !important;
  color: var(--spa-accent) !important;
  letter-spacing: -0.01em;
}
h1, .page-title { font-size: 2.2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }

/* 4. Site header — clean, sticky-friendly */
.site-header,
.site-header-row {
  background: var(--spa-card-bg) !important;
  box-shadow: var(--spa-shadow-sm);
  border-bottom: 1px solid var(--spa-border);
}
.site-title a, .site-branding a {
  color: var(--spa-accent) !important;
  font-weight: 700 !important;
}
.main-navigation a,
.menu-item a {
  color: var(--spa-text) !important;
  font-weight: 500 !important;
  transition: color 0.2s ease;
}
.main-navigation a:hover,
.menu-item a:hover {
  color: var(--spa-primary) !important;
}

/* 5. Modern listing cards (WooCommerce products) — UNIFORM SIZE per user request */
/* Make the products grid use equal-height cells (the cell is the <li>) */
.woocommerce ul.products,
ul.products,
.product-archive ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;  /* mobile: 2 cols min */
  gap: 16px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 24px 0 !important;
}
@media (min-width: 640px) {
  .woocommerce ul.products,
  .products,
  .product-archive .products {
    grid-template-columns: repeat(3, 1fr) !important;  /* tablet: 3 cols */
    gap: 20px !important;
  }
}
@media (min-width: 1024px) {
  .woocommerce ul.products,
  .products,
  .product-archive .products {
    grid-template-columns: repeat(4, 1fr) !important;  /* desktop: 4 cols */
  }
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; } /* kill old clearfix */

.woocommerce ul.products li.product,
.products .product,
.product-archive .product {
  display: flex !important;
  flex-direction: column !important;
  background: var(--spa-card-bg) !important;
  border: 1px solid var(--spa-border) !important;
  border-radius: var(--spa-radius) !important;
  box-shadow: var(--spa-shadow-sm) !important;
  padding: 14px !important;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  height: 100% !important;
  min-height: 360px;
  max-height: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  overflow: hidden !important;       /* prevents description text bleeding out */
  position: relative;
}
/* Constrain ALL direct text children of cards (descriptions, snippets) */
.products .product,
.products .product .product-description,
.woocommerce ul.products li.product .woocommerce-loop-product__excerpt {
  word-break: break-word;
  overflow-wrap: break-word;
}
/* Description / snippet text — clamped to 3 lines for uniform card heights */
.products .product > p,
.products .product .woocommerce-loop-product__excerpt,
.products .product .product-description,
.woocommerce ul.products li.product > p {
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  text-overflow: ellipsis;
  font-size: 0.88rem;
  color: var(--spa-muted);
  margin: 0 0 10px 0 !important;
  line-height: 1.5;
  max-height: 4.5em;
}
@media (max-width: 768px) {
  .products .product > p,
  .products .product .woocommerce-loop-product__excerpt,
  .products .product .product-description,
  .woocommerce ul.products li.product > p {
    -webkit-line-clamp: 2;  /* shorter on mobile to keep cards uniform */
    max-height: 3em;
    font-size: 0.78rem;
  }
}
.woocommerce ul.products li.product:hover,
.products .product:hover {
  transform: translateY(-3px);
  box-shadow: var(--spa-shadow-lg) !important;
  border-color: var(--spa-primary) !important;
}

/* Uniform image area — fixed aspect ratio, centered cover */
.woocommerce ul.products li.product .wp-post-image,
.woocommerce ul.products li.product img,
.products .product img {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  border-radius: var(--spa-radius-sm) !important;
  margin: 0 0 12px 0 !important;
  background: #f0ece5;
}

.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3,
.products .product h2,
.products .product h3 {
  font-size: 1.05rem !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

/* Description preview — limit to 2 lines for uniformity */
.woocommerce ul.products li.product .product-description,
.woocommerce ul.products li.product .woocommerce-loop-product__excerpt,
.products .product p {
  font-size: 0.88rem;
  color: var(--spa-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 10px 0 !important;
  min-height: 2.4em;
}

/* Push CTA / phone to the bottom of every card */
.woocommerce ul.products li.product a[href^="tel:"],
.woocommerce ul.products li.product .button,
.products .product a[href^="tel:"],
.products .product .button {
  margin-top: auto !important;
  align-self: stretch;
  text-align: center;
}

/* 6. Contact CTA buttons (phone + WhatsApp) - prominent + single-line */
a[href^="tel:"],
a[href^="whatsapp:"],
a[href*="wa.me"],
a[href*="api.whatsapp"],
a.zvon2,
.phone-link,
.button-call,
.contact-phone a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--spa-cta) !important;
  color: white !important;
  padding: 9px 14px !important;
  border-radius: var(--spa-radius-sm) !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  text-decoration: none !important;
  border: none !important;
  transition: background 0.2s ease, transform 0.15s ease;
  box-shadow: var(--spa-shadow-sm);
  /* Critical: never break lines, never wrap */
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
  word-break: keep-all;
}
a[href^="tel:"]:hover,
a[href^="whatsapp:"]:hover,
a[href*="wa.me"]:hover,
a[href*="api.whatsapp"]:hover,
a.zvon2:hover,
.phone-link:hover {
  background: var(--spa-cta-dk) !important;
  transform: translateY(-1px);
  color: white !important;
}
/* Icons removed — emoji rendering caused visual artifacts on some devices.
   Color alone (terracotta = phone, green = WhatsApp) is the visual distinction. */
a[href^="tel:"]::before,
a[href^="whatsapp:"]::before,
a[href*="wa.me"]::before,
a[href*="api.whatsapp"]::before,
a.zvon::before,
a.zvon2::before {
  content: none !important;
  display: none !important;
}
/* WhatsApp gets its own colour */
a[href^="whatsapp:"],
a[href*="wa.me"],
a[href*="api.whatsapp"],
a.zvon2 {
  background: #25D366 !important;  /* WhatsApp brand green */
}
a[href^="whatsapp:"]:hover,
a[href*="wa.me"]:hover,
a[href*="api.whatsapp"]:hover,
a.zvon2:hover {
  background: #1ea953 !important;
}

/* Lock the contact buttons against ANY wrapping — flex-wrap:nowrap + every child stays inline */
a[href^="tel:"],
a[href^="whatsapp:"],
a[href*="wa.me"],
a[href*="api.whatsapp"],
a.zvon,
a.zvon2 {
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}
a[href^="tel:"] *,
a[href^="whatsapp:"] *,
a.zvon *,
a.zvon2 * {
  white-space: nowrap !important;
}

/* 7. General buttons - also force single-line */
.button, .btn, button[type="submit"],
.woocommerce a.button,
.woocommerce button.button {
  background: var(--spa-primary) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--spa-radius-sm) !important;
  padding: 9px 16px !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  transition: background 0.2s ease;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-align: center;
  word-break: keep-all;
}
.button:hover, .btn:hover,
.woocommerce a.button:hover {
  background: var(--spa-primary-dk) !important;
  color: white !important;
}

/* Mobile: contact buttons in product cards = full card width, stacked, tight padding */
@media (max-width: 768px) {
  .products .product a[href^="tel:"],
  .products .product a[href^="whatsapp:"],
  .products .product a[href*="wa.me"],
  .products .product a[href*="api.whatsapp"],
  .products .product a.zvon,
  .products .product a.zvon2,
  .woocommerce ul.products li.product a[href^="tel:"],
  .woocommerce ul.products li.product a[href^="whatsapp:"],
  .woocommerce ul.products li.product a.zvon,
  .woocommerce ul.products li.product a.zvon2 {
    display: flex !important;
    width: 100% !important;
    margin: 5px 0 0 0 !important;
    padding: 7px 8px !important;
    font-size: 0.82rem !important;
    gap: 4px !important;
    box-sizing: border-box;
    letter-spacing: -0.01em;
  }
  /* Slightly smaller icons on mobile */
  .products .product a[href^="tel:"]::before,
  .products .product a[href^="whatsapp:"]::before,
  .products .product a.zvon::before,
  .products .product a.zvon2::before,
  .woocommerce ul.products li.product a[href^="tel:"]::before,
  .woocommerce ul.products li.product a[href^="whatsapp:"]::before,
  .woocommerce ul.products li.product a.zvon::before,
  .woocommerce ul.products li.product a.zvon2::before {
    font-size: 0.78em !important;
  }
}
@media (max-width: 380px) {
  /* Truly tiny phones — nuclear option: icons hidden entirely */
  .products .product a[href^="tel:"]::before,
  .products .product a[href^="whatsapp:"]::before,
  .products .product a.zvon::before,
  .products .product a.zvon2::before,
  .woocommerce ul.products li.product a[href^="tel:"]::before,
  .woocommerce ul.products li.product a[href^="whatsapp:"]::before,
  .woocommerce ul.products li.product a.zvon::before,
  .woocommerce ul.products li.product a.zvon2::before {
    display: none !important;
  }
  .products .product a[href^="tel:"],
  .products .product a[href^="whatsapp:"],
  .products .product a.zvon,
  .products .product a.zvon2 {
    font-size: 0.78rem !important;
    padding: 6px 6px !important;
  }
}
@media (max-width: 480px) {
  .button, .btn,
  .woocommerce a.button,
  .woocommerce button.button {
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
  }
}

/* Also style the .zvon class explicitly (since it's the phone class on this site) */
a.zvon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--spa-cta) !important;
  color: white !important;
  padding: 9px 14px !important;
  border-radius: var(--spa-radius-sm) !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  word-break: keep-all;
  transition: background 0.2s ease;
}
a.zvon:hover {
  background: var(--spa-cta-dk) !important;
  color: white !important;
}
a.zvon::before {
  content: "📞";
  flex-shrink: 0;
}

/* 8. The city-intro block we added — make it shine */
.city-intro {
  background: linear-gradient(135deg, #f5f3ef 0%, #faf8f3 100%);
  padding: 32px 28px;
  border-radius: 16px;
  margin: 28px 0;
  border-right: 4px solid var(--spa-primary);
  box-shadow: var(--spa-shadow-md);
}
.city-intro p {
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--spa-text);
}
.city-intro p strong {
  color: var(--spa-accent);
}
.city-intro h3 {
  margin-top: 28px !important;
  margin-bottom: 12px !important;
  font-size: 1.2rem !important;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--spa-border);
}
.city-intro ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 12px 0 0 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.city-intro ul li {
  margin: 0 !important;
  padding: 0 !important;
}
.city-intro ul a {
  display: block !important;
  padding: 10px 14px !important;
  background: white;
  border: 1px solid var(--spa-border);
  border-radius: var(--spa-radius-sm);
  text-align: center;
  text-decoration: none !important;
  color: var(--spa-accent) !important;
  font-weight: 500;
  transition: all 0.2s ease;
}
.city-intro ul a:hover {
  background: var(--spa-primary) !important;
  color: white !important;
  border-color: var(--spa-primary) !important;
  transform: translateY(-1px);
  box-shadow: var(--spa-shadow-sm);
}

/* 9. Search bar / category select - modernize */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
select,
textarea {
  background: white !important;
  border: 1px solid var(--spa-border) !important;
  border-radius: var(--spa-radius-sm) !important;
  padding: 10px 14px !important;
  font-size: 0.95rem !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input[type="text"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  border-color: var(--spa-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(107, 142, 122, 0.15) !important;
}

/* 10. Footer - clean & modern */
.site-footer,
.footer-widgets {
  background: var(--spa-accent) !important;
  color: #d4dcd6 !important;
}
.site-footer a,
.footer-widgets a {
  color: #f0eee4 !important;
}
.site-footer a:hover,
.footer-widgets a:hover {
  color: white !important;
}
.site-footer h2, .site-footer h3, .site-footer h4,
.footer-widgets h2, .footer-widgets h3, .footer-widgets h4 {
  color: white !important;
  margin-bottom: 14px;
}

/* 11. Full-width page layout — Kadence's REAL width constraint is its CSS variable
   --global-content-narrow-width: 842px (set in customizer). Override it. */
:root {
  --global-content-width: 100% !important;
  --global-content-narrow-width: 100% !important;
  --global-calc-content-width: 100% !important;
}

.site-container,
.content-container,
.site-container.content-container,
.entry-content-wrap,
.entry-content,
.wp-site-blocks,
.site-header-row-container-inner,
.site-footer-row-container-inner,
main#main {
  max-width: 100% !important;
  width: 100% !important;
}

/* Kadence header/footer rows also use .site-container — give them light padding so logo + nav don't stick to edges */
.site-header-wrap .site-container,
.site-footer-wrap .site-container {
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .site-header-wrap .site-container,
  .site-footer-wrap .site-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Pull out the listings grid to use the whole viewport with light side padding */
.products,
.woocommerce ul.products,
.product-archive .products {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box;
}

/* Text content (paragraphs, intros) keep a comfortable readable width */
.entry-content > p:not(.products *):not(.product *),
.city-intro > p {
  max-width: 1100px;
}

@media (max-width: 768px) {
  .products,
  .woocommerce ul.products {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* 12. Mobile fine-tuning */
@media (max-width: 768px) {
  body { font-size: 0.96rem; }
  h1, .page-title { font-size: 1.7rem; }
  h2 { font-size: 1.35rem; }
  .city-intro { padding: 22px 18px; }
  .city-intro ul { grid-template-columns: 1fr 1fr; gap: 6px; }
  .city-intro ul a { padding: 8px 10px !important; font-size: 0.9rem; }
  .woocommerce ul.products li.product,
  .products .product {
    padding: 10px !important;
    min-height: 300px;
  }
  .woocommerce ul.products li.product h2,
  .woocommerce ul.products li.product h3,
  .products .product h2,
  .products .product h3 {
    font-size: 0.95rem !important;
    min-height: 2.4em;
  }
  .woocommerce ul.products li.product .product-description,
  .woocommerce ul.products li.product .woocommerce-loop-product__excerpt,
  .products .product p {
    font-size: 0.78rem;
  }
}

/* 13. Smooth scrolling */
html { scroll-behavior: smooth; }

/* 14. Selection color (small detail) */
::selection {
  background: var(--spa-primary);
  color: white;
}