/*
 * Dodatki do szablonu Artisteer (style.css) dla stron programy.zagrosze.com:
 *  1. reguly przeniesione z <style> w naglowkach oryginalnych stron .html i z ich atrybutow style (uklad komputerowy bez zmian),
 *  2. przelacznik jezykow z flagami (taki sam jak w aplikacji nauki: flaga + kod, biezacy podswietlony),
 *  3. wersja na telefony i tablety: do 1259 px strona jest plynna i jednokolumnowa, te same kolory, czcionki i grafiki.
 * Od 1260 px obowiazuje oryginalny uklad (szerokosc 1260 px).
 */

/* 1. uklad komputerowy */
header.art-header { width: 1250px; }
.art-content .art-postcontent-0 .layout-item-1 { padding: 10px; }
.art-content .art-postcontent-0 .layout-item-2 { margin-top: 20px; margin-bottom: 0; }
.art-content .art-postcontent-0 .layout-item-3 { color: #262626; background: url('images/a242b.png') no-repeat scroll; padding: 0; }
.art-footer .art-layout-cell { width: 50%; }
.cube-wrap { position: relative; top: 0; left: 0; }
.cube-blk { position: absolute; text-align: justify; }
.cube-blk-1 { width: 295px; top: 230px; left: 42px; }
.cube-blk-2 { width: 465px; top: 65px; left: 750px; }
.cube-blk-3 { width: 375px; top: 255px; left: 745px; }

/* 2. przelacznik jezykow */
.lang-switch {
   display: inline-flex;
   flex-wrap: wrap;
   gap: 2px;
   align-items: center;
   position: absolute;
   top: 10px;
   right: 14px;
   z-index: 200;
   margin: 0;
   font-family: 'Trebuchet MS', Arial, Helvetica, Sans-Serif;
}
.lang-switch a, .lang-switch a:link, .lang-switch a:visited {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   min-height: 32px;
   padding: 2px 7px;
   border: 1px solid transparent;
   border-radius: 8px;
   color: #D6D6D6;
   font-size: 12px;
   font-weight: bold;
   letter-spacing: .02em;
   text-decoration: none;
   box-sizing: border-box;
}
.lang-switch a:hover { background: rgba(255, 255, 255, .15); color: #FFFFFF; }
.lang-switch a[aria-current="true"] { border-color: #fcd435; background: rgba(252, 212, 53, .2); color: #fcd435; }
.lang-switch a:focus-visible { outline: 2px solid #fcd435; outline-offset: 1px; }
.lang-switch .flag { width: 22px; height: 15px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); flex: none; overflow: hidden; }

/* 3. telefony i tablety */
@media (max-width: 1259px) {
   html, body { height: auto; }
   body { min-width: 0; }
   #art-main { background-attachment: scroll; }

   .art-header { height: auto; background-size: cover; background-position: center; }
   header.art-header {
      width: auto;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas: "logo head" "logo slogan" "lang lang" "nav nav";
      column-gap: 14px;
      align-items: center;
      padding: 14px 14px 0;
      background: none;
   }
   .art-object0 { grid-area: logo; position: static; margin: 0; width: 64px; height: 64px; }
   .art-headline, .art-slogan {
      position: static;
      min-width: 0;
      margin: 0 !important;
      left: auto;
      top: auto;
      white-space: normal;
   }
   .art-headline { grid-area: head; align-self: end; }
   .art-slogan { grid-area: slogan; align-self: start; padding-top: 4px; }
   .art-headline a, .art-headline a:link, .art-headline a:visited, .art-headline a:hover { font-size: 28px; white-space: normal; line-height: 1.1; }
   .art-slogan, .art-slogan a { font-size: 16px; line-height: 1.2; }
   .lang-switch { grid-area: lang; position: static; justify-self: start; margin: 10px 0 0 -7px; }
   .art-nav { grid-area: nav; position: static; width: auto; padding: 8px 0 0; }
   .art-nav-inner { text-align: left; }
   ul.art-hmenu { display: flex; flex-wrap: wrap; float: none; gap: 4px; padding: 0; }
   ul.art-hmenu > li { flex: 1 1 calc(50% - 4px); margin: 0; float: none; }
   ul.art-hmenu > li > a, ul.art-hmenu > li > a.active, ul.art-hmenu > li > a:hover {
      display: flex;
      align-items: center;
      justify-content: center;
      height: auto;
      min-height: 42px;
      padding: 6px 10px !important;
      line-height: 1.2;
      text-align: center;
   }
   .art-hmenu a, .art-hmenu a:link, .art-hmenu a:visited, .art-hmenu a.active, .art-hmenu a:hover { font-size: 15px; text-align: center; }

   .art-sheet { width: auto; margin: 10px 6px 0; padding: 8px; }
   .art-footer-inner { width: auto; padding: 0 12px; }
   .art-footer .art-layout-cell { width: auto; }
   .art-content-layout, .art-content-layout-row, .art-layout-cell { display: block; width: auto !important; }
   .art-postcontent { overflow-wrap: break-word; word-wrap: break-word; }
   .art-postcontent img { max-width: 100%; height: auto !important; box-sizing: border-box; }
   .art-postcontent table, .art-postcontent tbody, .art-postcontent tr, .art-postcontent td { display: block; width: auto !important; }
   .art-postcontent td img { margin-left: 0 !important; }
   .art-postcontent h4 { position: static !important; top: auto !important; }

   /* strona glowna: ilustracja z szescianem skalowana nad trzema blokami tekstu (zamiast tekstu na tle o stalej szerokosci) */
   .art-content .art-postcontent-0 .layout-item-3 { padding-top: 205px; background-size: auto 195px; background-position: 40% 0; }
   .layout-item-3 > br { display: none; }
   .cube-wrap { position: static; }
   .cube-blk, .cube-blk-1, .cube-blk-2, .cube-blk-3 { position: static; width: auto; margin: 0 0 18px; }

   /* formularz kontaktowy: etykieta nad polem, pola na cala szerokosc */
   .contact-form input[type="text"], .contact-form select, .contact-form textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
   .contact-form input[type="file"] { max-width: 100%; }
   .contact-form input.form { padding: 8px 18px; font-size: 15px; }
   .contact-form td { padding: 2px 0; }
}

@media (max-width: 600px) {
   .art-postcontent, .art-postcontent li, .art-postcontent table, .art-postcontent a { font-size: 14px; line-height: 1.45; }
   .art-postcontent .art-layout-cell, .art-postcontent table, .art-postcontent td, .art-postcontent p { text-align: left !important; }
   .art-postcontent img { float: none !important; display: block; margin: 4px auto 10px !important; }
   .art-postcontent td img { margin-left: auto !important; }
   .art-postcontent h2 { font-size: 20px; }
   .art-headline a, .art-headline a:link, .art-headline a:visited, .art-headline a:hover { font-size: 24px; }
   .art-slogan, .art-slogan a { font-size: 14px; }
   .lang-switch .code { display: none; }
   .lang-switch a, .lang-switch a:link, .lang-switch a:visited { padding: 2px 8px; }
   ul.art-hmenu > li { flex-basis: calc(50% - 4px); }
   .art-hmenu a, .art-hmenu a:link, .art-hmenu a:visited, .art-hmenu a.active, .art-hmenu a:hover { font-size: 14px; }
   .art-content .art-postcontent-0 .layout-item-3 { padding-top: 165px; background-size: auto 155px; }
}

/* naglowki sekcji (w oryginale <p class="bold">, teraz <h2 class="bold">: ten sam wyglad) */
.art-postcontent h2.bold { color: #6EA5C9; font-size: 20px; font-family: 'Trebuchet MS', Arial, Helvetica, Sans-Serif; font-weight: bold; margin: 3px 0; padding: 0; }

/* wygodne cele dotykowe flag na ekranach dotykowych */
@media (max-width: 1259px) {
   .lang-switch { gap: 6px; }
   .lang-switch a, .lang-switch a:link, .lang-switch a:visited { min-height: 40px; }
}

/* komputer: dluzsze teksty (de, fr) w absolutnie pozycjonowanych blokach strony glownej nie zachodza na nastepna sekcje (polski i angielski mieszcza sie w 450 px) */
@media (min-width: 1260px) {
   html[lang="de"] .art-content .art-postcontent-0 .layout-item-3 { min-height: 462px; }
   html[lang="fr"] .art-content .art-postcontent-0 .layout-item-3 { min-height: 492px; }
}

/* potwierdzenie wyslania formularza (send_contact.php przekierowuje na szybkikontakt.html?status=success) */
.contact-ok { margin: 6px 10px 14px; padding: 10px 14px; border-left: 4px solid #89cc40; background: #eef7e3; color: #2e5a10; font-family: 'Trebuchet MS', Arial, Helvetica, Sans-Serif; font-size: 16px; font-weight: bold; }