/* ============================================================
   IH Homepage Fixes — loaded after style.css to override
   Deployed: 2026-04-15
   ============================================================ */

/* --- About Richard section: ensure text is readable on dark bg --- */
.HomeAbout h2,
.HomeAbout p,
.HomeAbout blockquote,
.HomeAbout li {
  color: #ffffff !important;
}
.HomeAbout blockquote {
  border-left-color: rgba(255,255,255,0.5);
}

/* --- Services We Provide: fix banner headings --- */
.ServicesWeProvide_imageBox .banner h2 {
  font-size: 2.2em !important;
  color: #ffffff !important;
  margin-bottom: 10px !important;
}
.ServicesWeProvide_imageBox .banner p {
  font-size: 15px !important;
  color: #ffffff !important;
  line-height: 1.5 !important;
}

/* --- Services list items: always visible (remove hover-only reveal) --- */
.ServicesWeProvide_imageBox .banner ul {
  font-size: 15px !important;
  list-style: none !important;
  margin-top: 8px !important;
  padding: 0 !important;
}
.ServicesWeProvide_imageBox .banner ul li {
  border-bottom: 1px solid rgba(255,255,255,0.4) !important;
  width: 80% !important;
  margin: 0 auto !important;
  padding: 8px 5px !important;
  height: auto !important;
  opacity: 1 !important;
  color: #ffffff !important;
  transition: none !important;
}
.ServicesWeProvide_imageBox .banner ul li:last-child {
  border-bottom: 0 !important;
}

/* Mobile: scale down service banner headings */
@media only screen and (max-width: 48em) {
  .ServicesWeProvide_imageBox .banner h2 {
    font-size: 1.6em !important;
  }
}

/* ============================================================
   MOBILE READABILITY FIXES — 2026-04-17
   ============================================================ */

/* --- 1. Hero: remove height cap so all content (H1 + stats + CTAs) shows on mobile --- */
/* style.css sets max-height:80vh which clips CTA buttons on small screens */
@media (max-width: 768px) {
  .HeaderVideo {
    max-height: none !important;
    min-height: 580px;
  }
}

/* --- 2. City grid: hide <br> tags that break the CSS grid layout --- */
/* Each city <a> has a trailing <br> in the page HTML which creates empty grid cells */
.ih-cities-grid br {
  display: none;
}

/* --- 3. City cards: increase contrast against the very dark section background --- */
/* Section bg is rgb(17,17,19) = #111113; old card bg was #1b1b1e — barely different */
.ih-cities-grid a {
  background: #252529 !important;
  border-color: #444450 !important;
}
.ih-cities-grid a:hover {
  background: #2e2e36 !important;
  border-color: #d4a017 !important;
}

/* --- 4. City grid: enforce 2 columns on narrow mobile --- */
@media (max-width: 640px) {
  .ih-cities-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* --- 5. Fixed sidebar CTA buttons: move from right-edge tabs to bottom bar on mobile --- */
/* On desktop: rotated vertical tabs pinned to right edge — fine.          */
/* On mobile:  they overlap and clip body text on the right side.          */
/* Fix: lay them flat across the bottom of the screen as a 50/50 bar.     */
@media (max-width: 768px) {
  #callus,
  #feedback {
    transform: none !important;
    top: auto !important;
    right: auto !important;
    bottom: 0 !important;
    width: 50% !important;
    z-index: 9999 !important;
  }
  #callus {
    left: 0 !important;
  }
  #feedback {
    left: 50% !important;
  }
  #callus a,
  #feedback a {
    position: static !important;
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid rgba(255,255,255,0.25) !important;
    padding: 14px 8px !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    font-size: 11px !important;
  }
  /* Bottom padding so page content is not hidden beneath the sticky bar */
  body {
    padding-bottom: 50px !important;
  }
}