/*
 * Small layout fixes on top of the original theme (loaded after style.css).
 * The theme files stay untouched; each fix here was found by the
 * kidswithanedge-site-tests browser tests and also existed on the WordPress site.
 */

/* Page titles are 80px on every screen, so single long words ("Testimonials",
   "Descriptions") ran off the side of phones and made the page scroll sideways.
   Scale them with the screen width on phones only. */
@media screen and (max-width: 600px) {
  .internal-page-banner h1 {
    font-size: clamp(34px, 13vw, 80px);
    line-height: 1.05;
    letter-spacing: -1px;
    left: 15px;
    right: 15px;
    overflow-wrap: break-word;
  }
}

/* The message box keeps its default 40-character width (the theme's rule for it
   targets an older Contact Form 7 class), which is wider than a phone and wider
   than the iPad's form column. Never let it exceed its column. */
.contact-form textarea {
  max-width: 100%;
  box-sizing: border-box;
}

/* Home page photo banner on phones. The theme squeezes the text into the left
   70% of the photo and shifts it 30px up (translateY), so "WE SPECIALIZE IN"
   hid under the top bar and GET STARTED was cut off at the bottom. Use the full
   width with an even dark tint so the white text stays readable over the photo. */
@media screen and (max-width: 600px) {
  .home-banner .right-content {
    width: 100% !important;
    transform: none !important;
    padding: 28px 20px 24px !important;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.4) 100%) !important;
  }
}
/* Small phones (iPhone SE and similar): tighten spacing so it all fits in the photo. */
@media screen and (max-width: 400px) {
  .home-banner .right-content { padding: 18px 14px 16px !important; }
  .home-banner .right-content h3,
  .home-banner .right-content p.subtitle { margin-bottom: 12px !important; }
  .home-banner .right-content p { padding-top: 6px !important; }
  .home-banner .right-content .online { margin-top: 14px !important; }
}

/* Section headings inside pages are 30px on every screen, so on phones a heading
   like "Highly Interactive and Customized Classes for Ages 4 to 7" took three
   heavy lines. A little smaller on phones only. */
@media screen and (max-width: 600px) {
  .internal-page .column-layout .left-column h2 {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 18px;
  }
}

/* Footer copyright line: #999 on the #f7f7f7 footer was hard to read (contrast 2.66).
   #707070 meets the readable-contrast standard (4.6:1) and still reads as secondary. Issue #10. */
.footer p.copyright {
  color: #707070;
}