/*
Theme Name: Imahot Portal
Theme URI: https://www.m4m.co.il/
Author: Portal Team
Description: תבנית בלוקים מותאמת אישית עבור פורטל האמהות. מבוססת על עורך האתר המלא (FSE) של וורדפרס - כל התוכן ניתן לעריכה מלאה בבלוקים.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.0
License: GPL v2 or later
Text Domain: imahot
*/

:root{
  --imahot-bg:#FBF6F0;
  --imahot-surface:#FFFFFF;
  --imahot-ink:#33291F;
  --imahot-ink-soft:#000000;
  --imahot-accent-1:#7C9473;
  --imahot-accent-1-dark:#4E6047;
  --imahot-accent-2:#C97B84;
  --imahot-accent-3:#5B3A4B;
  --imahot-border:#E8DFD2;
}

body{ background:var(--imahot-bg); color:var(--imahot-ink); }

/* ---------- For-sale strip (site-wide, lives in header part) ---------- */
.imahot-forsale-bar{
  background:var(--imahot-accent-3);
  color:#fff;
  text-align:center;
  padding:6px 16px;
  font-size:14px;
  cursor:pointer;
  border:none;
  width:100%;
  display:block;
}
.imahot-forsale-bar:hover{ background:#4a2f3d; }
.imahot-forsale-bar .underline{ text-decoration:underline; font-weight:600; }

.imahot-modal-backdrop{
  display:none;
  position:fixed; inset:0;
  background:rgba(43,36,32,.55);
  align-items:center; justify-content:center;
  z-index:100;
}
.imahot-modal-backdrop.open{ display:flex; }
.imahot-modal{
  background:var(--imahot-surface);
  border-radius:20px;
  padding:32px;
  width:380px;
  max-width:90vw;
  position:relative;
}
.imahot-modal .imahot-modal-title{ margin-bottom:6px; font-size:1.17em; font-weight:bold; margin-top:1em; }
.imahot-modal p.sub{ font-size:15px; color:var(--imahot-ink-soft); margin-bottom:20px; }
.imahot-modal label{ font-size:15px; font-weight:600; display:block; margin-bottom:5px; }
.imahot-modal input, .imahot-modal textarea{
  width:100%; border:1px solid var(--imahot-border); border-radius:10px;
  padding:10px 12px; font-size:16px; margin-bottom:14px; outline:none;
}
.imahot-modal button.submit{
  width:100%; background:var(--imahot-accent-1); color:#fff; border:none;
  border-radius:10px; padding:12px; font-weight:700; font-size:16px; cursor:pointer;
}
.imahot-modal .close{
  position:absolute; top:16px; left:16px;
  background:none; border:none; font-size:20px; cursor:pointer; color:var(--imahot-ink-soft);
}

/* ---------- Search box ---------- */
.imahot-search .wp-block-search__inside-wrapper{
  border:1px solid var(--imahot-border);
  border-radius:20px;
  overflow:hidden;
  background:var(--imahot-surface);
}
.imahot-search input.wp-block-search__input{ border:none; font-size:15px; }
.imahot-search .wp-block-search__button{
  background:transparent; color:var(--imahot-ink-soft); box-shadow:none;
}
/* עותק החיפוש המיועד למובייל מוסתר כברירת מחדל (גם בדסקטופ) -
   הוא יוצג רק בתוך המדיה-קוורי של המובייל, בתוך מגירת ההמבורגר */
.imahot-search--mobile {
  display: none;
}

/* ---------- Category / article cards ---------- */
.imahot-card{
  background:var(--imahot-surface);
  border:1px solid var(--imahot-border);
  border-radius:20px;
  overflow:hidden;
}
.imahot-card .imahot-card-visual{
  height:100px;
  display:flex; align-items:center; justify-content:center;
}
.imahot-card .imahot-card-visual svg{ width:42px; height:42px; }
.imahot-card .imahot-card-body{ padding:16px 18px 18px; }

/* ---------- Journey strip (pregnancy -> birth -> breastfeeding -> children) ---------- */
.imahot-journey{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.imahot-journey .stage{ text-align:center; padding:16px; }

/* ---------- Medical note callout, used inside article content ---------- */
.imahot-medical-note{
  background:var(--imahot-surface);
  border:1px solid var(--imahot-border);
  border-inline-start:4px solid var(--imahot-accent-2);
  border-radius:12px;
  padding:16px 18px;
  font-size:18px;
  color:var(--imahot-ink-soft);
}
/* אם וורדפרס הפך את זה לבלוק Quote, מנטרלים את עיצוב ברירת המחדל שלו
   (כולל הבורדר השחור) כדי שרק העיצוב שלנו יחול */
blockquote.imahot-medical-note,
.wp-block-quote.imahot-medical-note {
  border: 1px solid var(--imahot-border) !important;
  border-inline-start: 4px solid var(--imahot-accent-2) !important;
  margin: 24px 0;
}
.wp-block-quote.imahot-medical-note p {
  font-size: 18px;
  color: var(--imahot-ink-soft);
}
.wp-block-quote.imahot-medical-note cite {
  display: none;
}

/* ================================================
   התאמות מובייל (מסכים עד 782px - breakpoint סטנדרטי של וורדפרס)
   ================================================ */
@media (max-width: 782px) {

  /* הדר: פחות padding אופקי, לוגו קטן יותר */
  .imahot-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  header.wp-block-template-part img[alt="פורטל האמהות"] {
    width: 130px !important;
    min-width: 130px !important;
  }

  /* תיבת החיפוש בהדר - מצמצמים במקום שתדחוף את שאר האלמנטים */
  .imahot-search {
    max-width: 140px;
  }
  .imahot-search input.wp-block-search__input {
    width: 100%;
  }

  /* פס "האתר למכירה" - טקסט קטן יותר כדי שלא ישבר לשתי שורות מכוערות */
  .imahot-forsale-bar {
    font-size: 13px;
    padding: 6px 10px;
  }

  /* רשתות כרטיסים (עמוד בית, כתבות קשורות, עמוד קטגוריה) -
     מ-3/4 עמודות לעמודה אחת */
  .grid-cards,
  .post-list,
  .related-grid {
    grid-template-columns: 1fr !important;
  }

  /* הירו של עמוד הבית - כותרת קטנה יותר, טור אחד במקום שתי עמודות */
  .hero {
    grid-template-columns: 1fr !important;
  }

  /* טקסט ההירו: ממורכז, ותמיד ראשון (מעל האיור) */
  .hero-text {
    order: 1;
    text-align: center;
  }
  .hero-text p {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-cta {
    display: inline-block;
  }
  .hero-text h1 {
    font-size: 28px !important;
  }

  /* האיור: מתחת לטקסט, ממורכז */
  .hero-illustration {
    order: 2;
    display: block;
    margin: 24px auto 0;
  }

  /* כותרת מאמר בודד - קצת יותר קטנה */
  .article-title,
  .wp-block-post-title {
    font-size: 26px !important;
  }

  /* Container הכללי - שוליים צרים יותר */
  .imahot-container {
    max-width: 100%;
  }

  /* ---------- סידור ההדר במובייל: המבורגר מימין, לוגו משמאל ----------
     ה-imahot-container הזה משמש גם את שורת ההדר, לכן מדייקים ל-header בלבד */
  header.wp-block-template-part .imahot-container > div:first-child {
    order: 2; /* הלוגו - עובר לסוף הסדר => נחת בצד שמאל ב-RTL */
  }
  header.wp-block-template-part .imahot-container nav.wp-block-navigation {
    order: 1; /* התפריט/המבורגר - ראשון בסדר => נחת בצד ימין ב-RTL */
  }
  /* מאפשרים לשורת ההדר "לשבור שורה" במובייל */
  .imahot-container {
    flex-wrap: wrap !important;
  }

  /* החיפוש יורד לשורה שנייה, ברוחב מלא, מתחת ללוגו ולהמבורגר */
  /* מסתירים במובייל את עותק החיפוש שמיועד לדסקטופ */
  .imahot-search--desktop {
    display: none !important;
  }

  /* מציגים במובייל את עותק החיפוש שמיועד למובייל (בתוך מגירת ההמבורגר) */
  .imahot-search--mobile {
    display: block !important;
    width: 260px !important;
    max-width: 90% !important;
    margin: 10px auto 0 !important;
    align-self: center !important;
  }
  .imahot-search--mobile .wp-block-search__inside-wrapper {
    width: 100%;
  }
  .imahot-search--mobile input.wp-block-search__input {
    width: 100%;
    min-width: 0;
  }

  /* מרכוז הקישורים בתוך מגירת ההמבורגר */
  .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container {
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding-inline-start: 0;
  }
  .wp-block-navigation__responsive-container-content li.wp-block-navigation-item {
    width: 100% !important;
    justify-content: center !important;
  }
  .wp-block-navigation__responsive-container-content a.wp-block-navigation-item__content {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ---------- Subcategory pills ---------- */
.imahot-pill{
  display:inline-block;
  background:var(--imahot-surface);
  border:1px solid var(--imahot-border);
  border-radius:20px;
  padding:8px 18px;
  font-size:15px;
  font-weight:600;
  color:var(--imahot-accent-1-dark);
  text-decoration:none;
  margin-inline-end:8px;
  margin-bottom:8px;
}
/* עיצוב טופס Contact Form 7 בתוך חלון "האתר למכירה" */
.imahot-modal .wpcf7-form p {
  margin-bottom: 14px;
}
.imahot-modal .wpcf7-form label {
  font-size: 15px;
  font-weight: 600;
  display: block;
  margin-bottom: 5px;
  color: var(--imahot-ink);
  text-align: right;
}
.imahot-modal .wpcf7-form input[type="text"],
.imahot-modal .wpcf7-form input[type="tel"],
.imahot-modal .wpcf7-form input[type="email"],
.imahot-modal .wpcf7-form textarea {
  width: 100%;
  border: 1px solid var(--imahot-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 16px;
  font-family: 'Assistant', sans-serif;
  outline: none;
  direction: rtl;
  text-align: right;
}
.imahot-modal .wpcf7-form textarea {
  min-height: 80px;
  height: 80px;
  resize: vertical;
}
.imahot-modal .wpcf7-form input[type="submit"] {
  width: 100%;
  background: var(--imahot-accent-1);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  font-family: 'Assistant', sans-serif;
}
.imahot-modal .wpcf7-form input[type="submit"]:hover {
  background: var(--imahot-accent-1-dark);
  cursor: pointer;
}
.imahot-modal .wpcf7-spinner {
  display: none;
}
.imahot-modal .wpcf7-not-valid-tip {
  font-size: 14px;
  color: var(--wp--preset--color--accent-2-dark);
  text-align: right;
}
.imahot-container {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
.wp-block-post-title a {
  color: var(--imahot-ink) !important;
}
.wp-block-post-terms,
.wp-block-post-terms.taxonomy-category {
  /* משאירים את זה בלוק "רגיל" כדי שוורדפרס ימרכז אותו לרוחב התוכן (is-layout-constrained),
     בדיוק כמו הכותרת. אין כאן width/max-width מותאם - זה מה שגרם לבאג הקודם.
     ה-!important כאן נחוץ כי הרקע/פדינג/רדיוס מגיעים מ-inline style ו-class
     שוורדפרס הוסיף אוטומטית מהגדרות הבלוק בעורך (has-accent-1-background-color וכו') */
  display: block;
  text-align: right;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin-bottom: 14px;
}

.wp-block-post-terms a,
.wp-block-post-terms a:visited,
.wp-block-post-terms.taxonomy-category a,
.wp-block-post-terms.taxonomy-category a:visited {
  display: inline-block;
  background: rgba(124, 148, 115, 0.15);
  color: var(--imahot-accent-1-dark);
  font-size: 14px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 10px;
  text-decoration: none;
}

.wp-block-post-terms a:hover,
.wp-block-post-terms.taxonomy-category a:hover {
  text-decoration: underline;
}

/* ---------- Sticky header (כל ההדר, כולל פס "האתר למכירה") ----------
   הבחירה ב-tag הזה (במקום class) מבטיחה שזה יעבוד אוטומטית בכל
   התבניות (Front Page, Single Posts, Archive וכו'), כי וורדפרס
   תמיד עוטף Template Part מסוג "header" בתגית <header>. */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--imahot-bg);
}


/* ---------- Category description spacing (Visual Term Description Editor content) ---------- */
.wp-block-term-description p {
  margin-bottom: 16px;
}
.wp-block-term-description p:last-child {
  margin-bottom: 0;
}
.wp-block-term-description strong {
  display: inline-block;
  margin-top: 8px;
  color: var(--imahot-ink);
  font-size: 1.05em;
}


/* ---------- הגדלת גדלי טקסט בכרטיסי מאמרים (תאריך/תקציר/קראי עוד) ---------- */
.imahot-card-body .wp-block-post-date,
.imahot-card-body .wp-block-post-date time {
  font-size: 14px !important;
}
.imahot-card-body .wp-block-post-excerpt,
.imahot-card-body .wp-block-post-excerpt p {
  font-size: 16px !important;
}
.imahot-card-body .wp-block-read-more {
  font-size: 16px !important;
}


/* ---------- נגישות: טקסט/קישורים בצבע accent-2 עוברים לגוון כהה שעומד ב-WCAG AA ----------
   (רקעים וגבולות דקורטיביים עם accent-2 לא מושפעים - נשארים בגוון הבהיר המקורי) */
.has-accent-2-color {
  color: var(--wp--preset--color--accent-2-dark) !important;
}
.imahot-card-body .wp-block-read-more {
  color: var(--wp--preset--color--accent-2-dark) !important;
}


/* ---------- אחידות: כותרת כרטיס מאמר (h3) בגופן Assistant, כמו שאר טקסט הגוף באתר ---------- */
.imahot-card-body .wp-block-post-title {
  font-family: var(--wp--preset--font-family--body) !important;
}


/* ---------- כותרות מאמרים בכרטיסים - שינוי מ-Frank Ruhl Libre ל-Assistant (כמו שאר האתר) ---------- */
.imahot-card-body .wp-block-post-title,
.imahot-card-body .wp-block-post-title a {
  font-family: var(--wp--preset--font-family--body) !important;
}


/* ---------- גודל מקורי של איור ה-Hero בעמוד הבית (כמו במוקאפ המקורי) -
   svg. ספציפית, כי יש גם div אחר עם אותו class בטעות (עוטף את הטקסט) ---------- */
svg.hero-illustration,
img.hero-illustration {
  width: 100%;
  max-width: 340px;
  height: auto;
  display: block;
  margin-inline-start: auto;
  margin-inline-end: 0;
}
div.hero-illustration {
  width: auto !important;
  max-width: none !important;
}


/* ---------- יישור טקסט "לא נמצאו תוצאות" לימין (כמו הכותרת) ---------- */
.wp-block-query-no-results {
  text-align: right;
}