/* =====================================================
   ROK_WEB — poprawki widoczności na urządzeniach mobilnych
   Dołączane na każdej stronie po style.css.
   Zmiany ograniczone do węższych ekranów, by nie ruszać
   dopracowanego layoutu desktop.
   ===================================================== */

/* Twardo blokuj poziome przewijanie na całym dokumencie */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Obrazy i media nie wychodzą poza ekran */
img, svg, video, iframe {
  max-width: 100%;
}

/* Widget logowania w nawigacji — kompaktowy i nieprzewijający */
#rok-auth {
  flex-wrap: nowrap;
}
#rok-auth a, #rok-auth button {
  white-space: nowrap;
}

@media (max-width: 767px) {
  /* Zmniejsz i dogęść przyciski auth, by zmieściły się obok logo i menu */
  #rok-auth { gap: 0.375rem; }
  #rok-auth a, #rok-auth button {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    font-size: 9px;
    letter-spacing: 0.08em;
  }

  /* Wygodne pola dotyku w linkach górnej nawigacji.
     Tu inline-flex jest właściwy, bo elementy stoją obok siebie. */
  nav.fixed.top-0 a,
  nav.fixed.top-0 button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* Menu boczne: pozycje muszą stać jedna pod drugą.
     Wcześniej było tu inline-flex, przez co „Modlitwa Głębi”
     i „Lectio Divina” sklejały się w jedną linię. */
  #drawer-content nav a {
    min-height: 40px;
    display: flex;
    align-items: center;
  }

  /* Dekoracyjne duże okręgi/tła nie mogą wymuszać przewijania */
  [class*="w-[420px]"],
  [class*="w-[300px]"] {
    max-width: 90vw;
    max-height: 90vw;
  }

  /* Lepsza czytelność długich akapitów na wąskim ekranie */
  main p {
    line-height: 1.65;
  }
}

/* Bardzo małe telefony (≤380px) — logo tekstowe schodzi, zostaje sama ikona */
@media (max-width: 380px) {
  #rok-auth a, #rok-auth button { font-size: 8px; letter-spacing: 0.05em; }
}