/*
 * Blog responsive fixes (every template: listing, category, tag, author,
 * search, 404, single post).
 *
 * Found by an overflow sweep at 320 / 375 / 414 / 481–960 / 1024px and by a
 * user report of the listing breaking on a phone with larger text:
 * - post cards ran two-up down to 481px, so with long words ("Alternatives",
 *   "ActiveCampaign") or a bigger system text size the right column ran off
 *   the screen;
 * - long words in headings could not wrap (the 40px post title overflowed a
 *   320px phone);
 * - the listing search box was a fixed 350px (52px sideways scroll at 320px);
 * - the sidebar ad link was wider than the sidebar at 901–1029px (21px);
 * - inline code (DNS records etc.) never wrapped (25px at 320px).
 *
 * Kept out of style.css because header.php links that unversioned; this file
 * is enqueued with a filemtime version (functions.php).
 */

/* Let long words break instead of pushing the layout wider. */
.main-post,
.post-list,
.list-head,
.list-content,
.blog-heading,
.blog-main-title,
.blog-text {
  overflow-wrap: break-word;
}
.main-row > .col-3,
.post-list {
  min-width: 0;
}

/* Listing / category / tag / author / search cards: one column on phones
   (was two-up down to 481px). */
@media only screen and (max-width: 640px) {
  .main-row > .col-3 {
    width: 100%;
  }
}

/* Search box under the category chips: fill the width instead of a fixed
   350px. */
@media only screen and (max-width: 900px) {
  .live-search {
    width: 100%;
    max-width: 350px;
  }
}

/* Single-post sidebar ad: the link was an inline box wider than the column. */
.image-ad a {
  display: block;
  max-width: 100%;
}
.image-ad img {
  /* single.php sets an inline max-width: 286px; keep that cap but never
     wider than the sidebar column. */
  max-width: min(100%, 286px) !important;
  height: auto;
}

/* Inline code and code blocks inside posts. */
.blog-text code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.blog-text pre {
  max-width: 100%;
  overflow-x: auto;
}
.blog-text pre code {
  white-space: pre;
  overflow-wrap: normal;
}

/* Embeds never wider than the column. */
.blog-text iframe,
.blog-text video,
.blog-text embed,
.blog-text object {
  max-width: 100%;
}

/* Headline sizes on small phones (were 40px / 32px / 34px from the 900px
   rules, too big for 320–480px screens). */
@media only screen and (max-width: 480px) {
  /* h1 in the selector so this beats both `.blog-heading` and the 900px
     `.post-main-content .blog-heading` rule in style.css. */
  h1.blog-heading,
  .post-main-content h1.blog-heading {
    font-size: 30px;
    line-height: 38px;
  }
  .main-post h2 {
    font-size: 26px;
    line-height: 34px;
  }
  .main-post h3 {
    font-size: 30px;
    line-height: 38px;
    margin-bottom: 30px;
  }
}

/* Phone header: the 150px centred logo touched the "Sign up" button at
   320–360px. */
@media only screen and (max-width: 380px) {
  .mob-logo img {
    width: 120px;
    height: auto;
  }
}