/*
 * mobile_header.css — предложение V-04 (мобильная шапка), medyunion.ru
 * ПРЕВЬЮ: на сайт не подключён. Подключать ПОСЛЕ styles.css (и после contrast.css, если он согласован).
 * Нужна и правка разметки: см. mobile_header.html.diff (кнопка .mob_sign в header.php).
 *
 * Что делает
 *  1. Кнопка «Записаться» в правой группе шапки (перед иконкой телефона) на экранах 340-500px (на 501-900px в шапке телефон текстом и «Задать вопрос», место занято;
 *     на <340px кнопка скрыта: перекрывает логотип). Тот же триггер, что у десктопной .btn1: класс js_mdl,
 *     соседние span[data-name=m_title|m_cont] -> js/all.js: js_mdl() открывает модалку js_reception_cont.
 *  2. Тап-зоны >=44x44 у бургера, телефона, иконки «версия для слабовидящих», иконки поиска и пунктов нижней панели.
 *     Видимый размер и положение иконок не меняются: зона расширяется padding + отрицательный margin.
 */

/* ---- 1. Кнопка «Записаться» ---- */
.mob_sign{display:none}
@media (max-width:500px){
  .mob_sign{display:flex;align-items:center;margin-right:12px;position:relative;z-index:3} /* z-index: блок логотипа в .line2 иначе перекрывает левую часть кнопки */
  .mob_sign_btn{
    position:relative;
    height:36px;padding:0 12px;
    border:0;border-radius:8px;
    background:var(--mu-pink,#C92F68);color:#fff;
    font:600 13px/36px "Open Sans",sans-serif;white-space:nowrap;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  /* невидимое расширение до 44px по высоте и +4px по бокам */
  .mob_sign_btn:before{content:"";position:absolute;left:-4px;right:-4px;top:-4px;bottom:-4px}
  .mob_sign_btn:active{filter:brightness(.92)}
  .search_active .mob_sign{display:none}
}
@media (max-width:374px){
  .mob_sign_btn{padding:0 7px;font-size:12px}
}
@media (max-width:339px){
  .mob_sign{display:none}
}

/* ---- 2. Тап-зоны ---- */
@media (max-width:900px){
  /* бургер: видимая иконка 32x32 в зоне 44x44 */
  .head .line2>div #open_mobile_menu{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;max-width:none;margin:-6px;flex:0 0 44px;
  }
  /* иконка поиска, появляется при прокрутке */
  .head_block.head_scroll .search_mob{
    width:44px;height:44px;margin:-6px -6px -6px 12px;
    background-size:32px 32px;
  }
  /* при прокрутке телефон скрыт, место нужно кнопке: убираем её отступ справа */
  .head_block.head_scroll .mob_sign{margin-right:0}
  /* нижняя панель: зона на всю высоту панели (60px) и +6px по бокам, раскладка прежняя */
  .mob_panel a{align-self:stretch;display:flex;align-items:center;padding:0 6px;margin:0 -6px}
}
@media (max-width:500px){
  /* телефон-иконка 32x32 -> зона 44x44 */
  .head .line1 .phone{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin:-6px;
  }
  /* глаз 21x14 -> зона 45x44, центр на прежнем месте */
  .to_eye_version{
    width:45px;height:44px;margin:-15px -12px -15px 9px;
    background-repeat:no-repeat;background-position:center;background-size:21px 14px;
  }
}