/**
 * Hebrew mobile header = English look/spacing, mirrored RTL.
 * Sticky behavior comes from theme .head-sticky (site.js).
 */

/*
 * Identity mirrors EN .site-descr.
 * Override Logo Fix `white-space: pre-line` — whitespace in the markup
 * was creating an empty first line between Implantolog.co.il and the name.
 */
html[dir="rtl"] .site-descr.mobile-header__identity,
body.rtl .site-descr.mobile-header__identity {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1.1;
  white-space: normal !important;
}

html[dir="rtl"] .mobile-header__name,
html[dir="rtl"] .mobile-header__title,
body.rtl .mobile-header__name,
body.rtl .mobile-header__title {
  display: block;
  font-weight: 400;
  color: inherit;
}

html[dir="rtl"] .site-descr br,
body.rtl .site-descr br {
  display: none !important;
}

@media (max-width: 991px) {
  /* Same outer padding as theme EN: .head-bar-inner { padding: 10px 15px } */
  html[dir="rtl"] .head-bar-inner,
  body.rtl .head-bar-inner {
    padding: 10px 15px;
  }

  /* Mirror EN: title at start (right), Menu at end (left) */
  html[dir="rtl"] .head-bar-inner > .row,
  body.rtl .head-bar-inner > .row {
    display: flex;
    flex-direction: row;
    direction: rtl;
    align-items: flex-start; /* EN: Menu aligns to top with site-title */
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  html[dir="rtl"] .head-bar-inner > .row::before,
  html[dir="rtl"] .head-bar-inner > .row::after,
  body.rtl .head-bar-inner > .row::before,
  body.rtl .head-bar-inner > .row::after {
    display: none !important;
    content: none !important;
  }

  html[dir="rtl"] .head-bar-inner > .row > .col-lg-2,
  html[dir="rtl"] .head-bar-inner > .row > .col-md-3,
  html[dir="rtl"] .head-bar-inner > .row > .col-xs-6:first-child,
  body.rtl .head-bar-inner > .row > .col-lg-2,
  body.rtl .head-bar-inner > .row > .col-md-3,
  body.rtl .head-bar-inner > .row > .col-xs-6:first-child {
    float: none !important;
    width: auto !important;
    max-width: calc(100% - 100px) !important;
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: right;
  }

  html[dir="rtl"] .head-bar-inner > .row > .col-lg-10,
  html[dir="rtl"] .head-bar-inner > .row > .col-md-9,
  html[dir="rtl"] .head-bar-inner > .row > .col-xs-6:last-child,
  body.rtl .head-bar-inner > .row > .col-lg-10,
  body.rtl .head-bar-inner > .row > .col-md-9,
  body.rtl .head-bar-inner > .row > .col-xs-6:last-child {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto;
    padding-left: 0;
    padding-right: 0;
  }

  /* Exact EN mobile type scale from style.css @media max-width 767px */
  html[dir="rtl"] .site-title,
  body.rtl .site-title {
    font-size: 21px;
    line-height: 1;
    margin: 0 0 3px 0; /* same as EN .site-title */
    text-align: right;
  }

  html[dir="rtl"] .site-descr,
  html[dir="rtl"] .mobile-header__identity,
  body.rtl .site-descr,
  body.rtl .mobile-header__identity {
    font-size: 12px;
    line-height: 1.1;
    text-align: right;
    max-width: 100%;
  }

  html[dir="rtl"] .head-cont,
  body.rtl .head-cont {
    text-align: left;
    display: block;
  }

  /*
   * Menu button: same metrics as EN
   * (.head-cont .btn-mobile padding 20px, height/line-height 40px on mobile)
   * float:left = RTL mirror of EN float:right
   */
  html[dir="rtl"] .head-cont .btn-mobile,
  html[dir="rtl"] .mobile-header__toggle,
  body.rtl .head-cont .btn-mobile,
  body.rtl .mobile-header__toggle {
    float: left !important;
    display: inline-block !important;
    margin: 0;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
  }

  html[dir="rtl"] .head-items,
  body.rtl .head-items {
    float: left;
    margin-left: 0;
    margin-right: 4px;
  }
}

@media (max-width: 480px) {
  /* Match EN: padding-left/right 10px */
  html[dir="rtl"] .head-cont .btn-mobile,
  body.rtl .head-cont .btn-mobile {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Sticky bar above page content (all sticky states) */
html[dir="rtl"] .head-sticky.head-bar,
body.rtl .head-sticky.head-bar {
  left: 0;
  right: 0;
  z-index: 50;
}