﻿@media (orientation: landscape) and (max-width: 959px) and (max-height: 500px) {
  :root {
    --header-height-mobile: 56px;
    --header-mobile-visual-height: 45px;
    --header-short-landscape-inline-gutter: 10px;
    --header-short-landscape-left-pad: 9px;
    --header-short-landscape-right-pad: 10px;
    --header-short-landscape-social-top: 12px;
    --header-short-landscape-logo-top: 17px;
    --header-short-landscape-social-size: 32px;
    --header-short-landscape-social-gap: 5px;
    --header-short-landscape-logo-gap: 10px;
    --header-short-landscape-haatar-width: 46px;
    --header-short-landscape-haatar-height: 20px;
    --header-short-landscape-ynet-width: 49px;
    --header-short-landscape-ynet-height: 21px;
  }

  .site-header {
    height: var(--header-height-mobile);
  }

  .site-header-bar,
  .page-home .site-header-bar,
  .page-game .site-header-bar,
  .page-completed .site-header-bar {
    position: relative;
    width: calc(100% - (var(--header-short-landscape-inline-gutter) * 2));
    max-width: none;
    height: 100%;
    top: 0;
    margin: 0 auto;
    padding-inline: 0;
  }

  .page-completed {
    --completed-page-header-height: var(--header-height-mobile);
  }

  .page-completed .site-header {
    height: var(--header-height-mobile);
  }

  .page-game .site-header-bar {
    width: 100%;
    margin: 0;
  }

  .header-wave--mobile-bg {
    top: 4px;
    height: 45px;
  }

  .header-wave--mobile-cover,
  .header-wave--mobile-arch {
    top: -11px;
    height: 56px;
  }

  .site-header .header-social {
    position: absolute;
    inset: unset;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: max-content;
    height: auto;
    left: var(--header-short-landscape-left-pad);
    top: var(--header-short-landscape-social-top);
    gap: var(--header-short-landscape-social-gap);
  }

  .site-header .header-social-btn {
    position: static;
    flex: 0 0 auto;
    min-inline-size: var(--header-short-landscape-social-size);
    min-block-size: var(--header-short-landscape-social-size);
    width: var(--header-short-landscape-social-size);
    height: var(--header-short-landscape-social-size);
  }

  .site-header .header-social-btn--whatsapp img {
    width: calc(var(--header-short-landscape-social-size) * 44 / 60);
    height: calc(var(--header-short-landscape-social-size) * 44 / 60);
  }

  .site-header .header-social-btn--facebook img {
    width: calc(var(--header-short-landscape-social-size) * 33 / 60);
    height: calc(var(--header-short-landscape-social-size) * 33 / 60);
  }

  .site-header .header-social-btn--email img {
    width: calc(var(--header-short-landscape-social-size) * 48 / 60);
    height: calc(var(--header-short-landscape-social-size) * 48 / 60);
  }

  .site-header .header-logos {
    position: absolute;
    inset: unset;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: max-content;
    height: auto;
    right: var(--header-short-landscape-right-pad);
    top: var(--header-short-landscape-logo-top);
    flex-direction: row-reverse;
    gap: var(--header-short-landscape-logo-gap);
    pointer-events: none;
  }

  .site-header .header-logos a {
    pointer-events: auto;
  }

  .site-header .header-haatar-logo,
  .site-header .header-ynet-group {
    position: static;
    flex: 0 0 auto;
  }

  .site-header .header-haatar-logo {
    width: var(--header-short-landscape-haatar-width);
    height: var(--header-short-landscape-haatar-height);
  }

  .site-header .header-ynet-group,
  .site-header .header-ynet-group img {
    width: var(--header-short-landscape-ynet-width);
    height: var(--header-short-landscape-ynet-height);
  }

}

@media (orientation: landscape) and (max-width: 800px) and (max-height: 500px) {
  :root {
    --header-short-landscape-left-pad: 2px;
  }
}