/* Mobiltouch: förstora navigationens träffytor.
 *
 * Mätt på bulka.se vid 390 px (iPhone 14) den 10 september 2026, innan den här filen
 * fanns. Hela mobilnavigationen låg under varje riktvärde som finns:
 *
 *   hamburgerknappen            24 × 24 px, padding 0
 *   stängknappen                24 × 24 px
 *   samtliga sju menylänkar     18 px höga
 *
 * Apples riktvärde är 44 × 44, Googles 48 × 48. En 18 px hög länk är ungefär en
 * tredjedel av ett fingeravtryck, och det är den enda vägen mellan sidorna på telefon
 * eftersom navigationen är helt dold bakom knappen under 920 px. Majoriteten av
 * besökarna kommer från mobil, så det här är inte kosmetika.
 *
 * Ligger i design/overrides/css eftersom det är rungen som överlever motorsynk —
 * blockmarkeringen (.wp-block-navigation__*) ägs av temat och får inte forkas. Vår
 * prisradbrytnings-CSS låg en gång i temat och försvann i en synk.
 *
 * Reglerna gäller bara under 920 px, alltså exakt där navigationen fälls ihop. Desktop
 * rör vi inte.
 */
@media (max-width: 920px) {
  /* Öppna- och stängknappen. min-height/width snarare än padding, så ikonen behåller
   * sin storlek medan träffytan växer runt den. */
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Menylänkarna i overlayen. 18 px kom av att raderna bara var textens egen höjd —
   * de saknade helt vertikal padding. */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0.35rem;
  }

  /* Åtta pixlar mellan träffytorna är Googles rekommendation och skillnaden mellan
   * att träffa rätt rad och fel. */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
    gap: 8px;
  }

  /* Köpknapparna mätte 43 px — en pixel under gränsen, vilket är trivialt att rätta
   * och det enda stället på sidan där en miss kostar oss pengar. */
  .kr-btn,
  .kr-masthead__cta {
    min-height: 44px;
  }
}