/* ==========================================================================
   ASFIRE.CO.IL — עיצוב מותאם אישית (Custom CSS) — גרסה 2: פלטת אדום כיבוי-אש
   ==========================================================================
   השראה: lehavot.co.il — רקע לבן נקי, פס עליון דק עם טלפון ואייקון אדום,
   תפריט כהה על רקע לבן עם קו תחתון אדום לפריט הפעיל, כפתורי פיל (pill)
   עם מסגרת אדומה, כרטיסי תוכן נקיים עם מסגרת עדינה.

   הוראות התקנה: זו החלפה מלאה לקובץ הקיים. פתחי את
   public_html/media/templates/site/cassiopeia/css/asfire-custom.css
   בעורך הטקסט של File Manager, מחקי הכל, הדביקי את כל התוכן הזה במקומו,
   שמרי. אחר כך נקי מטמון (Hostinger + Joomla System → Maintenance →
   Clear Cache) ובדקי בגלישה בסמויה.
   ========================================================================== */

:root {
  --asfire-red: #e2231a;
  --asfire-red-dark: #b91c14;
  --asfire-red-light: #fdeceb;
  --asfire-ink: #1f2937;
  --asfire-muted: #6b7280;
  --asfire-bg-soft: #f8f9fa;
  --asfire-border: #e5e7eb;
  --asfire-radius: 10px;
  --asfire-shadow: 0 2px 10px rgba(17, 24, 39, 0.06);
  --asfire-shadow-hover: 0 10px 24px rgba(226, 35, 26, 0.14);

  /* התבנית (Cassiopeia) עצמה בונה הרבה צבעים (כולל תפריט הנייד/Offcanvas)
     מתוך המשתנה --hue (ברירת המחדל שלה: כחול). דורסים אותו כאן לגוון אדום
     כדי שכל מה שהתבנית מייצרת אוטומטית - כולל תפריט הנייד - ייצא אדום
     ולא כחול, בלי שנצטרך לצוד כל קלאס בנפרד. */
  --hue: 4;
  --template-bg-light: #ffffff;
  --template-text-dark: #1f2937;
  --template-text-light: #ffffff;
  --template-special-color: #e2231a;
}

/* ---------- טיפוגרפיה כללית ---------- */
body {
  color: var(--asfire-ink);
  line-height: 1.7;
  background: #ffffff;
}

h1, h2, h3, h4 {
  color: var(--asfire-ink);
  font-weight: 700;
}

a {
  color: var(--asfire-red);
}

/* ---------- פס עליון קטן (טלפון + WhatsApp) ---------- */
.asfire-contact-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 0;
  font-size: 14px;
  background: var(--asfire-bg-soft);
  border-bottom: 1px solid var(--asfire-border);
}

.asfire-contact-bar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--asfire-ink);
  text-decoration: none;
  font-weight: 600;
}

.asfire-contact-bar .asfire-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--asfire-red);
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
}

.asfire-contact-bar a.asfire-whatsapp .asfire-icon-circle {
  background: #25d366;
}

.asfire-contact-bar a:hover {
  color: var(--asfire-red);
}

/* ---------- כותרת עליונה + לוגו: רקע לבן נקי (לא כהה) ---------- */
#header,
.site-header,
header.header {
  background: #ffffff !important;
  box-shadow: var(--asfire-shadow);
}

/* ---------- תפריט נייד (Offcanvas) - כשהמסך צר והתפריט נפתח כפאנל צד ----------
   התבנית משתמשת בקומפוננטת Offcanvas של Bootstrap לתפריט הנייד. דורסים כאן
   במפורש (בנוסף לדריסת --hue למעלה) כדי לוודא שגם הוא לבן/אדום ולא כחול. */
.offcanvas,
.offcanvas-header,
.offcanvas-body,
nav.offcanvas,
#offcanvas-drawer,
.site-header .offcanvas,
.header .offcanvas {
  background-color: #ffffff !important;
  color: var(--asfire-ink) !important;
}

.offcanvas .nav-link,
.offcanvas a,
.offcanvas .nav-item > .nav-link {
  color: var(--asfire-ink) !important;
}

.offcanvas .nav-link:hover,
.offcanvas .nav-item.current > .nav-link,
.offcanvas .nav-item.active > .nav-link {
  color: var(--asfire-red) !important;
}

.offcanvas .btn-close {
  filter: none;
}

/* ---------- תפריט ניווט: טקסט אדום, קו תחתון אדום לפעיל/הובר ----------
   גרסה 3: המבנה האמיתי של Cassiopeia 6.1 הוא ul#mod-menu1.mod-menu.nav
   עם <a> רגיל (בלי class nav-link) בתוך li.nav-item - לא #nav-main/.nav-main
   כמו שהנחנו קודם. זו הסיבה שהצבע האדום לא היה מוחל בפועל. */
#mod-menu1,
.mod-menu.nav {
  font-size: 15px;
  letter-spacing: 0.01em;
}

#mod-menu1 > li.nav-item > a,
.mod-menu.nav > li.nav-item > a {
  color: var(--asfire-red) !important;
  padding: 10px 6px !important;
  margin: 0 8px;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  text-decoration: none !important;
  transition: color 0.15s ease, border-color 0.15s ease;
}

#mod-menu1 > li.nav-item > a:hover,
#mod-menu1 > li.nav-item.current > a,
#mod-menu1 > li.nav-item.active > a {
  color: var(--asfire-red-dark) !important;
  border-bottom-color: var(--asfire-red);
}

/* תפריטים נפתחים (dropdown) - .mod-menu__sub, לא .dropdown-menu */
#mod-menu1 .mod-menu__sub {
  background: #fff;
  border: 1px solid var(--asfire-border);
  border-radius: var(--asfire-radius);
  box-shadow: var(--asfire-shadow-hover);
  padding: 8px;
  list-style: none;
}

#mod-menu1 .mod-menu__sub a {
  color: var(--asfire-ink) !important;
  display: block;
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none !important;
}

#mod-menu1 .mod-menu__sub a:hover {
  background-color: var(--asfire-red-light);
  color: var(--asfire-red) !important;
}

/* ---------- Hero (עמוד הבית) — תמונה נקייה במלוא הרוחב, ללא טקסט מעליה ---------- */
.asfire-hero {
  position: relative;
  overflow: hidden;
  min-height: 380px;
  background-size: cover;
  background-position: center;
  margin-bottom: 0;
}

/* גרסה עם טקסט מעל התמונה (אופציונלי - אם תרצי כותרת על ההירו) */
.asfire-hero.asfire-hero--with-text {
  display: flex;
  align-items: center;
  min-height: 420px;
}

.asfire-hero.asfire-hero--with-text::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 20, 20, 0.72) 0%, rgba(20, 20, 20, 0.4) 55%, rgba(20, 20, 20, 0.05) 100%);
}

.asfire-hero-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding: 0 48px;
  color: #fff;
}

.asfire-hero-content h1 {
  color: #fff;
  font-size: 38px;
  margin-bottom: 16px;
}

.asfire-hero-content p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 28px;
}

/* ---------- כפתור פיל (pill) - מסגרת אדומה, כמו "עוד עלינו" באתר הדוגמה ---------- */
.asfire-hero-cta,
.readmore a,
.btn-readmore,
.asfire-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #fff;
  color: var(--asfire-red) !important;
  border: 1.5px solid var(--asfire-red);
  padding: 10px 26px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.asfire-hero-cta:hover,
.readmore a:hover,
.btn-readmore:hover,
.asfire-btn-outline:hover {
  background-color: var(--asfire-red);
  color: #fff !important;
  transform: translateY(-1px);
}

/* כפתור מלא (אדום מלא, לשימוש בולט יותר) */
.asfire-btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--asfire-red);
  color: #fff !important;
  border: 1.5px solid var(--asfire-red);
  padding: 10px 26px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.asfire-btn-solid:hover {
  background-color: var(--asfire-red-dark);
  transform: translateY(-1px);
}

/* ---------- תגית אייקון (הריבוע האדום עם סמל השלהבת) ---------- */
.asfire-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--asfire-red);
  color: #fff;
  margin-bottom: 18px;
}

.asfire-icon-badge svg {
  width: 26px;
  height: 26px;
  fill: #fff;
}

/* ---------- כרטיסי שירות ---------- */
.asfire-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin: 32px 0;
}

.asfire-card {
  background: #fff;
  border: 1px solid var(--asfire-border);
  border-radius: var(--asfire-radius);
  padding: 28px 24px;
  box-shadow: var(--asfire-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  text-align: center;
}

.asfire-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--asfire-shadow-hover);
}

.asfire-card .asfire-card-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--asfire-red-light);
  color: var(--asfire-red);
  font-size: 24px;
}

.asfire-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.asfire-card p {
  color: var(--asfire-muted);
  font-size: 14px;
}

/* ---------- קטע "מי אנחנו" - עמודה עם אייקון+טקסט מול תמונה ---------- */
.asfire-about-row {
  display: flex;
  align-items: center;
  gap: 48px;
  margin: 56px 0;
  flex-wrap: wrap;
}

.asfire-about-row > .asfire-about-text {
  flex: 1 1 380px;
}

.asfire-about-row > .asfire-about-image {
  flex: 1 1 380px;
}

.asfire-about-row > .asfire-about-image img {
  width: 100%;
  border-radius: var(--asfire-radius);
  box-shadow: var(--asfire-shadow);
  display: block;
}

.asfire-about-text h2 {
  font-size: 26px;
  margin-bottom: 14px;
}

.asfire-about-text p {
  color: var(--asfire-muted);
  margin-bottom: 24px;
}

/* ---------- רשימת מאמרים (Category Blog) - כרטיסים נקיים ---------- */
.blog .items-row,
.category-blog .items-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.blog .item, .blog-item,
.category-blog .item {
  background: #fff;
  border: 1px solid var(--asfire-border);
  border-radius: var(--asfire-radius);
  padding: 20px;
  box-shadow: var(--asfire-shadow);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.blog .item:hover,
.category-blog .item:hover {
  box-shadow: var(--asfire-shadow-hover);
  transform: translateY(-2px);
}

.blog .item img,
.category-blog .item img {
  border-radius: 8px;
  margin-bottom: 12px;
}

/* ---------- מודול קטגוריות בצד (אם עוד קיים במקום אחר) ---------- */
.asfire-sidebar-box {
  background: var(--asfire-bg-soft);
  border-radius: var(--asfire-radius);
  padding: 20px;
  border: 1px solid var(--asfire-border);
}

/* ---------- מובייל ---------- */
@media (max-width: 767px) {
  .asfire-hero {
    min-height: 220px;
  }
  .asfire-hero.asfire-hero--with-text {
    min-height: 300px;
  }
  .asfire-hero-content {
    padding: 0 24px;
  }
  .asfire-hero-content h1 {
    font-size: 24px;
  }
  .asfire-cards {
    grid-template-columns: 1fr;
  }
  .asfire-about-row {
    gap: 24px;
  }
}