/* responsive.css - warstwa RWD dla etrzoda.pl (dodane 2026-07-01)
   Nie zmienia wygladu desktop (>1200px). Dostosowuje uklad do tabletow i telefonow.
   Ladowany PO style.css, wiec nadpisuje sztywne szerokosci. */

html { -webkit-text-size-adjust: 100%; }

/* obrazki w tresci/stopce nie wychodza poza ekran */
#main-content img, #main-footer img { max-width: 100%; height: auto; }

/* ===== TABLET i mniej: plynna szerokosc zamiast sztywnych 1190px ===== */
@media (max-width: 1200px) {
  #main .container,
  #main div.container {
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 12px;
    padding-right: 12px;
  }
  #main-content { min-height: 0; }
}

/* ===== TABLET: przebudowa naglowka i ukladanie kolumn w pionie ===== */
@media (max-width: 1024px) {
  /* naglowek: koniec z pozycjonowaniem absolutnym */
  #head { height: auto; position: static; text-align: center; padding-bottom: 10px; }
  #head-logo { position: static; display: inline-block; float: none; margin: 8px auto; }
  #head-logo img { max-width: 70%; height: auto; }
  #head-toolbar { position: static; width: 100%; height: auto; margin: 6px 0 0 0; }
  #head-toolbar .account-menu ul,
  #head-toolbar .account-menu form { position: static; width: auto; height: auto; }
  #head-toolbar .account-menu ul li { display: inline-block; border: none; margin: 0 6px; }
  #head-toolbar .quick-search { position: static; width: 100%; margin-top: 8px; }
  #head-toolbar .quick-search form p { position: static; height: auto; }
  #head-toolbar .quick-search form p #head-search-query {
    position: static; width: 100%; box-sizing: border-box; }
  #head-toolbar .quick-search form p #head-search-submit {
    position: static; display: inline-block; margin-top: 6px; }

  /* menu glowne: elastyczne, zawijane zamiast tabeli 944px */
  #menu-bar { position: static; top: auto; left: auto; margin-top: 10px; }
  ul#h-menu { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; }
  ul#h-menu li { display: block; margin: 3px; padding: 8px 10px; }

  /* kolumny tresci jedna pod druga */
  #columns-2-left-content, #columns-2-right-content, #columns-3-center-content { display: block !important; }
  #columns-2-left-content .left-col, #columns-2-left-content .right-col,
  #columns-2-right-content .left-col, #columns-2-right-content .right-col,
  #columns-3-center-content .left-col, #columns-3-center-content .center-col, #columns-3-center-content .right-col,
  #columns-1-content .single-col {
    display: block !important; width: 100% !important; float: none !important; }

  #main-content table { max-width: 100%; }
}

/* ===== TELEFON ===== */
@media (max-width: 600px) {
  ul#h-menu li { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 12px 8px;
    text-align: center; border-bottom: 1px solid #ddd; }
  #main .container, #main div.container { padding-left: 8px; padding-right: 8px; }
  #head-logo img { max-width: 85%; }
  /* pola formularzy: font 16px = brak automatycznego zoomu na iOS */
  input[type="text"], input[type="password"], input[type="email"], select, textarea { font-size: 16px; }
  /* szerokie tabele (ksiega, tucz) przewijalne w poziomie w ramach boxa */
  .box { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}