/*
 * responsive.css
 * Media queries – Macma WEBAPI 2.
 *
 * Taby językowe PL/EN są teraz wewnątrz nagłówka (header),
 * więc header jest jedynym fixed elementem na górze.
 * Wysokość headera: ok. 65px.
 * nav#menu i section#content kompensują tylko ten jeden element.
 */

/* =============================================================
   DUŻE MONITORY (≥ 1200px)
   Header i menu boczne przyklejone (fixed).
============================================================= */
@media (min-width: 1200px) {

    header          { position: fixed; z-index: 1000; width: 100%; }
    nav#menu        { position: fixed; top: 70px; }
    section#content { margin-top: 70px; padding-top: 30px; }

}

/* =============================================================
   TABLETY – poziome (992px – 1199px)
============================================================= */
@media (min-width: 992px) and (max-width: 1199px) {

    header          { position: fixed; z-index: 1000; width: 100%; }
    nav#menu        { position: fixed; top: 70px; }
    section#content { margin-top: 70px; padding-top: 30px; }

}

/* =============================================================
   TABLETY – pionowe (768px – 991px)
   Elementy w normalnym przepływie dokumentu.
============================================================= */
@media (min-width: 768px) and (max-width: 991px) {

    header          { position: static; }
    nav#menu        { position: static; }
    section#content { margin-top: 0; }

}

/* =============================================================
   TELEFONY – poziome (≤ 767px)
============================================================= */
@media (max-width: 767px) {

    header          { position: static; }
    nav#menu        { position: static; }
    section#content { margin-top: 0; }

    /* Przyciski języka i logout pionowo na małych ekranach */
    .header-actions { margin-top: 10px; }

}

/* =============================================================
   TELEFONY – pionowe (≤ 480px)
============================================================= */
@media (max-width: 480px) {

    section#content article { padding: 10px; }
    .code-panel             { font-size: 10px; }

}