/* Mobilmenyn öppnade sig men gick inte att använda.
 *
 * Felet: `.kr-masthead` hade `backdrop-filter: saturate(1.2) blur(...)`. En
 * backdrop-filter som inte är `none` skapar ett **containing block för
 * position:fixed-barn**. WordPress egen menyoverlay är `position: fixed; inset: 0`
 * och räknade därför sin storlek mot mastheaden i stället för mot skärmen.
 *
 * Mätt på bulka.se vid 390 px: panelen blev 390 × 136 px medan menypunkterna
 * sträckte sig ned till y = 498. Allt under 136 px hamnade utanför den vita rutan
 * och lades ovanpå sidans innehåll — texten fanns, men gick inte att läsa och
 * länkarna låg tryckta mot högerkanten. Efter fixen: 390 × 844, alla sju punkter
 * inne i panelen.
 *
 * Att ta bort filtret kostar ingenting. Mastheaden har `background: rgb(252,252,250)`,
 * alltså helt ogenomskinlig — filtret suddade något som ändå inte syntes igenom. Det
 * sparar dessutom GPU-arbete på telefoner.
 *
 * Vald lösning framför `:has()` med flit: `.kr-masthead:has(.is-menu-open)` hade
 * fungerat i moderna webbläsare, men mobilmenyn är den enda vägen mellan sidorna på
 * telefon och den ska inte hänga på en selektor. Det här är ren kaskad.
 *
 * `!important` på align-items behövs: WordPress core sätter värdet via
 * `var(--navigation-layout-justification-setting)` i en selektor med högre
 * specificitet, och utan det centreras punkterna i ojämna kolumner.
 */
@media (max-width: 920px) {
  .kr-masthead {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content,
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
    align-items: flex-start !important;
    width: 100%;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
    padding-inline: 1.25rem;
  }
}