/* additions to the 2013 PERUS stylesheets: site-name tile, menu states, swatch lists,
   browser surfaces, and the phone layout. The desktop frame stays as it was. */

#head-row1 {
   display: flex;
   overflow: hidden;
}
#head-row1 .tiles {
   display: flex;
}
#head-row1 img {
   display: block;
}

/* replaces the third-party logo tile: same size and the same pale grey ground; logo.svg carries the mark */
.site-mark {
   flex: 0 0 188px;
   width: 188px;
   height: 81px;
   display: block;
   background: radial-gradient(ellipse 120% 95% at 58% 88%, #f1f2ef 0%, #d9dad5 52%, #c6c8bf 100%);
}
.site-mark img {
   display: block;
   width: 188px;
   height: 81px;
}

.nav-toggle {
   display: none;
}
ul.menu li.sep {
   list-style: none;
   color: #8c9a7d;
   font-weight: normal;
   letter-spacing: 0.05em;
   overflow: hidden;
   white-space: nowrap;
}
a.menu[aria-current="page"] {
   text-decoration: underline;
   text-underline-offset: 3px;
}

.skip {
   position: absolute;
   left: -9999px;
   top: 0;
}
.skip:focus {
   left: 8px;
   top: 8px;
   z-index: 10;
   background: #ffffff;
   color: #395923;
   padding: 6px 10px;
   border: 1px solid #395923;
}

a:focus-visible,
button:focus-visible {
   outline: 2px solid #347b03;
   outline-offset: 2px;
}
::selection {
   background: #395923;
   color: #ffffff;
}

/* the original footer tone #b0a676 reads at 3.3:1 on the green bar; lightened to 4.7:1 */
#copyright-text {
   color: #cfc79f;
}
#copyright-text a:link,
#copyright-text a:visited {
   color: #ffffff;
}

/* the one page written new (O webu): headings get air above them, as the CMS pages get from spacer paragraphs */
.o-webu h2 {
   margin-top: 16px;
   margin-bottom: 6px;
}

/* "Viz také" links at the end of a page: same label style as the attachment blocks of the CMS */
.see-also {
   margin: 18px 0 6px;
   padding-top: 10px;
   border-top: 1px solid #e0cda4;
}
.see-also-label {
   font-weight: bold;
   margin-bottom: 6px !important;
}
.see-also ul {
   line-height: 160%;
}

#real-text img {
   max-width: 100%;
   height: auto;
}

/* numbered spec sections: h2 in the markup, the original h3 size on screen */
#real-text h2.sec {
   font-size: 13px;
   margin-top: 5px;
   margin-bottom: 15px;
}

/* generated illustration under the page heading */
figure.ilu {
   margin: 4px 0 16px;
}
figure.ilu picture {
   display: block;
}
figure.ilu img {
   display: block;
   width: 100%;
   max-width: 534px;
   height: auto;
}
figure.ilu figcaption {
   margin-top: 5px;
   font-size: 10px;
   color: #6b6a50;
}

.swatches {
   margin: 12px 0 15px;
}
.swatches-label {
   font-weight: bold;
   margin-bottom: 6px !important;
}
.swatches ul {
   columns: 2;
   column-gap: 24px;
   line-height: 150%;
}
.swatches li {
   break-inside: avoid;
}

/* phone */
@media (max-width: 760px) {
   body {
      margin: 0;
      font-size: 15px;
      line-height: 1.5;
   }
   td, table {
      font-size: 14px;
   }
   #center,
   #main-part,
   #envelope,
   #copyright {
      width: auto;
   }
   #main-part,
   #envelope {
      background: #ffffff;
   }
   #head-row1 {
      width: auto;
      height: 64px;
   }
   .site-mark {
      flex: 0 0 auto;
      width: auto;
      height: 64px;
   }
   .site-mark img {
      width: auto;
      height: 64px;
   }
   #head-row1 .tiles {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
   }
   #head-row1 .tiles img {
      width: auto;
      height: 64px;
   }
   #head-row2,
   #head-row3,
   #left-column .menu-head,
   #left-column .menu-foot {
      display: none;
   }
   #left-column {
      float: none;
      width: auto;
      padding-bottom: 0;
   }
   #left-menu {
      background: #f7f4e6;
   }
   .nav-toggle {
      display: block;
      width: 100%;
      min-height: 44px;
      padding: 0 16px;
      border: 0;
      background: #395923;
      color: #ffffff;
      font: bold 15px Arial, Helvetica, sans-serif;
      text-align: left;
      cursor: pointer;
   }
   .nav-toggle:hover,
   .nav-toggle:active,
   .nav-toggle[aria-expanded="true"] {
      background: #2f4a1d;
   }
   .nav-toggle {
      -webkit-tap-highlight-color: transparent;
   }
   .nav-toggle::after {
      content: "";
      float: right;
      margin-top: 17px;
      border: 6px solid transparent;
      border-top-color: #ffffff;
   }
   .nav-toggle[aria-expanded="true"]::after {
      margin-top: 11px;
      border-top-color: transparent;
      border-bottom-color: #ffffff;
   }
   .left-column-text {
      padding: 0 16px;
      background: none;
   }
   .js ul.menu {
      display: none;
   }
   .js ul.menu.open {
      display: block;
   }
   ul.menu {
      margin: 0;
      padding: 6px 0 10px;
   }
   ul.menu li {
      line-height: 1.3;
   }
   ul.menu a.menu {
      display: flex;
      align-items: center;
      min-height: 44px;
      padding: 4px 0;
      box-sizing: border-box;
   }
   #main-text {
      float: none;
      width: auto;
   }
   #real-text {
      padding: 16px 16px 24px;
      overflow-wrap: anywhere;
   }
   h1 {
      font-size: 23px;
      margin-right: 0;
   }
   h2 {
      font-size: 18px;
   }
   h3,
   #real-text h2.sec {
      font-size: 16px;
   }
   /* the spec sheets indent values with up to five nested blockquotes; one step is enough on a phone */
   #real-text blockquote {
      margin: 0;
   }
   #real-text blockquote > blockquote:first-child,
   #real-text p + blockquote {
      margin-left: 12px;
   }
   #real-text blockquote blockquote blockquote {
      margin-left: 0;
   }
   #real-text table {
      width: 100% !important;
      height: auto !important;
   }
   #real-text td {
      width: auto !important;
   }
   #real-text table.dynamic {
      display: block;
      overflow-x: auto;
   }
   /* layout tables (text beside a photo, label beside value) stack on a phone */
   #real-text table:not(.dynamic),
   #real-text table:not(.dynamic) > tbody,
   #real-text table:not(.dynamic) > tbody > tr,
   #real-text table:not(.dynamic) > tbody > tr > td {
      display: block;
      width: auto !important;
   }
   #real-text img.right,
   #real-text img.left {
      float: none;
      display: block;
      margin: 10px 0;
   }
   .swatches ul {
      columns: 1;
   }
   /* perforation comparison: words stay whole, the table scrolls sideways if it must */
   #real-text .perf-compare td {
      overflow-wrap: normal;
      font-size: 13px;
   }
   figure.ilu figcaption {
      font-size: 14px;
   }
   #copyright {
      height: auto;
   }
   #copyright-text {
      padding: 10px 16px;
      text-align: left;
      font-size: 12px;
   }
}