/*! やじるし | (c) 2025-2026 asamizu | yajirushi.liteside.dev | All rights reserved */
/*
   画面サイズごとの調整。基本の見た目は css/index.css にある。
   幅だけでなく高さでも分けているのは、縦の短い端末（小型スマホ・横向き）で
   地図・距離・矢印が1画面に収まらなくなるため。
*/

@media (max-width: 600px) {
  .search-container {
    max-width: 70vw;
    min-width: 150px;
  }

  input[type="text"] {
    max-width: 180px;
  }

  .search-button {
    font-size: 16px;
    padding: 8px 10px;
    min-width: 36px;
  }

  .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-top: 2px solid #666666;
  }

  #startNav, #stopNav {
    padding: 8px 15px;
  }

  .distance-info .prefix {
    font-size: 1em;
  }

  #distance {
    font-size: 2.2em;
    margin-left: 4px;
  }

  #mapContainer {
    max-height: 340px;
    min-height: 150px;
  }

  .nav-buttons {
    padding: 8px;
  }

  #destinationAddress {
    font-size: 0.9em;
    max-height: 24px;
  }

  #arrowContainer {
    min-height: 180px;
    max-height: 45dvh;
  }
}

/*
   縦の短い端末（小型スマホ、横向き）。
   ナビ中に大事なのは矢印と距離なので、削るのは地図の高さと見出し
*/
@media (max-height: 700px) {
  h1 {
    font-size: 1em;
    margin: 4px 0;
  }

  /* 見出しの行を詰める。ボタンも一回り小さく */
  #appHeader {
    min-height: 34px;
  }

  #menuButton {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }

  #menu {
    top: 38px;
  }

  #mapContainer {
    height: 38dvh;
    min-height: 120px;
  }

  #arrowContainer {
    min-height: 140px;
  }

  #distance {
    font-size: 2em;
  }

  .nav-buttons {
    padding: 6px;
  }
}