/*
 * Поправки върху билд изхода на megadev.bg.
 *
 * Правилното място за тези две поправки са React компонентите (Footer и
 * BlogSection). Докато източникът не е в тази папка, това е най-малката
 * намеса, която ги оправя, без да се пипа компилираният JS.
 *
 * Файлът се копира в assets/site-fixes-<хеш>.css от scripts/geo-inject.mjs.
 * Хешът идва от съдържанието, защото .htaccess кешира .css за една година -
 * без него промяна тук нямаше да стигне до вече посетили сайта браузъри.
 *
 * Границата 639.98px е точно под Tailwind sm (640px): и двата дефекта се
 * появяват само в мобилния вариант на класовете.
 */

/* ---------------------------------------------------------------------------
 * 1. Футърът реже собственото си начало на телефон.
 *
 * Футърът е "reveal" тип: sticky блок с height:120vh и
 * top:calc(100vh - 120vh) = -20vh. При екран 812px това са -162px, тоест
 * първите 162px от футъра стоят над горния ръб и не могат да се доскролят -
 * заглавието "MegaDev" и връзките Начало / За нас / Партньорство изчезват,
 * а "Контакти" се вижда наполовина. Понеже височината е фиксирана на 120vh,
 * а съдържанието е по-ниско, justify-between разтяга и празнина от ~200px
 * в средата.
 *
 * Същото се случва и при нисък екран над sm - например landscape телефон
 * 820x420, където sm:h-[70vh] дава 294px за съдържание, което иска ~380px,
 * и "Google отзиви" / "Trustpilot" падат под долния ръб.
 *
 * И в двата случая ефектът просто се изключва: футърът тече като нормален
 * блок, нищо не се реже и празнината изчезва. На нормален десктоп reveal-ът
 * остава непокътнат.
 *
 * Прагът по височина е емпиричен - CSS не може да мери съдържание, а под
 * 700px нито един от двата варианта (70vh / 120vh) не побира футъра.
 *
 * Селекторите с #id са с по-висока специфичност от Tailwind помощните
 * класове, затова !important не е нужен.
 * ------------------------------------------------------------------------ */
@media (max-width: 639.98px), (max-height: 700px) {
  #site-footer-root > div {
    height: auto;
  }

  #site-footer-root > div > div,
  #site-footer-root > div > div > div {
    position: static;
    top: auto;
    height: auto;
  }
}

/* ---------------------------------------------------------------------------
 * 2. Падащото меню с категории в блога излиза извън екрана.
 *
 * Панелът е .absolute.left-1/2 и разчита на -translate-x-1/2, за да се центрира
 * спрямо бутона. Но animate-blog-filter-open е с animation-fill-mode:both, а
 * последният ѝ кадър задава transform:translateY(0) scale(1) - това презаписва
 * целия transform и хоризонталното отместване се губи завинаги.
 *
 * Резултат при екран 383px: панелът тръгва от центъра на бутона (191px) и
 * стига до 529px, тоест 146px извън екрана. На десктоп дефектът не личи,
 * защото там важи sm:left-0 sm:translate-x-0 и отместване не е нужно.
 *
 * На телефон запазваме статичното центриране и изключваме единствено тази
 * анимация, защото тя презаписва transform след зареждането на този файл.
 * ------------------------------------------------------------------------ */
@media (max-width: 639.98px) {
  /*
   * Самият trigger оставаше със съдържателна ширина. При най-тесните
   * телефони дългият надпис можеше да стане по-широк от реда и да избута
   * както бутона, така и менюто извън viewport-а. Правим ширината равна на
   * наличното съдържание между двата хоризонтални padding-а на секцията.
   */
  #blog-section-root [aria-haspopup="listbox"] {
    width: calc(100vw - 2.5rem);
    max-width: 22rem;
    min-width: 0;
  }

  /* Пази стойността и иконата видими, а съкращава само дългия етикет. */
  #blog-section-root [aria-haspopup="listbox"] > span:nth-of-type(2) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #blog-section-root [aria-haspopup="listbox"] + [role="listbox"] {
    width: 100%;
    max-width: calc(100vw - 2.5rem);
  }

  /*
   * Tailwind зарежда собствената анимация след този файл и тя завършва с
   * transform без translateX(-50%). По-специфичният селектор пази менюто
   * центрирано към бутона през цялото време; малката анимация тук не е
   * нужна, когато иначе би счупила позиционирането.
   */
  #blog-section-root [aria-haspopup="listbox"] + [role="listbox"].animate-blog-filter-open {
    animation: none;
    transform: translateX(-50%);
  }

}