/* Responsive layer (COD-123). style.css stays byte-identical; from 960px up the desktop layout is
   untouched. Below 960px the fixed 850px layout becomes a single column:
   header, content, sidebar, footer. Plain CSS, no JS. */

@media (max-width: 959px) {
   body {
      font-size:16px;
      line-height:1.5;
      overflow-wrap:anywhere;}

   div#container {
      width:100%;
      background-image:none;}

   /* Header: the 850x370 picture scales with the width, title and header image scale with it
      (container query units: 1cqw = 1% of the header width). */
   #header {
      float:none;
      width:100%;
      max-width:850px;
      height:auto;
      aspect-ratio:850 / 370;
      margin:0 auto;
      background-size:100% 100%;
      container-type:inline-size;
      overflow:hidden;}

   .header-title {
      font-size:max(3.3cqw, 18px);
      padding:10cqw 0 0 23.5cqw;}

   .header-description {
      font-size:max(1.4cqw, 16px);
      padding:0 0 0 23.5cqw;}

   .ad {
      padding:7cqw 0 0 21cqw;}

   .ad img {
      width:58cqw;
      height:auto;
      max-width:none;}

   div#content {
      box-sizing:border-box;
      width:100%;
      padding:10px 12px 0 12px;}

   div#left,
   div#right {
      float:none;
      width:auto;
      margin:0;
      padding:0;
      display:block;}

   .content_post {
      float:none;
      width:auto;
      margin:0 0 30px 0;}

   .content_title {
      font-size:20px;
      line-height:1.3;}

   /* Text: 1.6 line height; links inside the text are exempt from the 44px touch target. */
   .content_post {
      line-height:1.6;}

   .media-missing {
      font-size:16px;}

   /* Touch targets of at least 44px (COD-125): padding and min-height, not font size. The padding of the
      post title and of the title link in the header is balanced by a negative margin, so nothing moves. */
   .content_title a:link,
   .content_title a:visited {
      display:inline-block;
      box-sizing:border-box;
      min-height:44px;
      padding:10px 18px 8px 18px;}

   .header-title a {
      display:inline-block;
      min-height:44px;
      box-sizing:border-box;
      padding:10px 0;
      margin:-10px 0;}

   .post_info a,
   .navigation a {
      display:inline-block;
      box-sizing:border-box;
      min-height:44px;
      padding:12px 4px 12px 0;}

   .post_info {
      height:auto;
      overflow:hidden;}

   #comment,
   #commentform textarea {
      box-sizing:border-box;
      width:100%;}

   .box_right_top,
   .box_right {
      box-sizing:border-box;
      width:100%;}

   .box_right_top {
      font-size:16px;}

   .box_right li {
      margin:0;}

   li a,
   li a:hover {
      display:block;
      font-size:16px;
      padding:10px 0 10px 16px;
      background-position:0 50%;}

   div#footer {
      width:100%;
      height:auto;
      min-height:60px;
      padding:0 12px 12px;
      box-sizing:border-box;
      background-position:center bottom;}

   div#credit {
      width:100%;}

   div#footer a {
      display:inline-block;
      padding:12px 0;}
}

@media (max-width: 599px) {
   .content_title {
      font-size:18px;}

   .content_post_cat,
   .content_post_comments {
      float:none;}

   .content_post_comments {
      text-align:left;}

   .box_right ul {
      margin:5px 8px;}
}