/* =========================================================
   Hebrew (RTL) overrides for Hair page (/he/hair.html)
   IMPORTANT: This file must load AFTER ../hair.css and AFTER rtl.css
   ========================================================= */

html[dir="rtl"] body{
  font-family: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Reading alignment */
html[dir="rtl"] .page-hero .inner,
html[dir="rtl"] .page-body,
html[dir="rtl"] .page-aside,
html[dir="rtl"] .site-footer{
  text-align: right;
}

/* ---------------------------------------------------------
   Desktop layout swap (fixes "sidebar starts lower" gap)
   We set BOTH column and row to avoid CSS Grid auto-placement
   leaving empty cells in row 1.
   --------------------------------------------------------- */
@media (min-width: 980px){
  /* Keep grid math in LTR so column numbers are predictable */
  html[dir="rtl"] .page-grid{
    direction: ltr;
    grid-template-columns: 0.8fr 1.2fr; /* left = sidebar, right = main */
    grid-auto-flow: dense;             /* backfill any gaps (extra safety) */
  }

  html[dir="rtl"] .page-aside{
    grid-column: 1;
    grid-row: 1;
    direction: rtl; /* keep text RTL inside */
  }

  html[dir="rtl"] .page-body{
    grid-column: 2;
    grid-row: 1;
    direction: rtl;
  }
}

/* ---------------------------------------------------------
   "How it works" block (fixes image dropping below the text)
   Same issue: set BOTH column and row.
   --------------------------------------------------------- */
@media (min-width: 980px){
  html[dir="rtl"] .how-grid{
    direction: ltr;
    grid-template-columns: 0.95fr 1.05fr; /* left = image, right = copy */
    grid-auto-flow: dense;
  }

  html[dir="rtl"] .how-it-works .media-card{
    grid-column: 1;
    grid-row: 1;
  }

  html[dir="rtl"] .how-it-works .copy{
    grid-column: 2;
    grid-row: 1;
    direction: rtl;
  }

  html[dir="rtl"] .caption{
    text-align: right;
  }
}

/* Lists: move indents/bullets to the RIGHT */
html[dir="rtl"] ul.bullet,
html[dir="rtl"] ul.bullets{
  padding-left: 0;
  padding-right: 18px;
}

html[dir="rtl"] .aside-list li{
  padding-left: 0;
  padding-right: 18px;
}
html[dir="rtl"] .aside-list li::before{
  left: auto;
  right: 0;
}

/* Dropdown alignment */
html[dir="rtl"] .nav-sub{
  left: auto;
  right: 0;
}

/* Sidebar image crop (tweakable) */
html[dir="rtl"] .hair-aside-image img{
  object-position: 50% 35%;
}


@media (max-width: 820px){
  html[dir="rtl"] a.cta:not(.whatsapp-sticky){
    display: flex;
    justify-content: center;
    align-items: center;

    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;

    text-align: center;
  }
}