/*
 * Phone fixes for the WordPress theme (subzerorepaircenter).
 *
 * The theme sets every h1 to 46px with no phone size, and its rules for
 * stacking floated images only start at 320px wide. On today's 360 to 430px
 * phones that leaves page titles filling the screen, photos squeezing text
 * into a narrow column (blog post titles break mid-word), and the Marine
 * page title, which the theme keeps on one line, running off the screen.
 *
 * Loaded last on every page. Elementor sections have their own responsive
 * settings and are not touched (their headings carry .elementor-heading-title).
 */
@media (max-width: 767px) {
  h1:not(.elementor-heading-title) {
    font-size: 30px;
    line-height: 1.2;
    overflow-wrap: break-word;
  }

  /* Stack floated photos above or below the text instead of beside it. */
  .web-content .alignright,
  .web-content .alignleft,
  .entry-header img.wp-post-image {
    float: none;
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 16px;
  }

  /* Blog posts show the same photo in the banner and again above the
     title; on a phone the second copy pushes the title off the screen. */
  .single-post .entry-header img.wp-post-image {
    display: none;
  }
}

/* Marine page title: drawn between two rules and forced onto one 838px line,
   which does not fit on phones or portrait tablets (fits from 1024px up). */
@media (max-width: 1023px) {
  h1.horizontal-line {
    display: block;
    white-space: normal;
    text-align: left;
  }
  h1.horizontal-line::before,
  h1.horizontal-line::after {
    display: none;
  }
}