/* THI post-clone fixes — thipipeandpiling.com
 *
 * The cloned theme CSS is kept byte-identical to the original so the site stays a
 * faithful reproduction; every correction lives here instead, so what we changed is
 * always obvious. Added 2026-08-11 after the multi-viewport QA sweep.
 *
 * Note: the layout bugs below were verified to exist on the ORIGINAL live WordPress
 * site too (identical pixel overhang, identical selectors) — we are not repairing
 * damage from the clone, we are fixing what was already shipped.
 */

/* --- reCAPTCHA v3 badge -----------------------------------------------------
 * Google fixes the badge to the right edge; at 390px it pushed the document 273px
 * sideways. Hiding it is expressly permitted provided the attribution text appears
 * instead — gform-adapter.js injects that beneath each form. */
.grecaptcha-badge {
  visibility: hidden !important;
}

.thi-recaptcha-notice {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #777;
}
.thi-recaptcha-notice a {
  color: inherit;
  text-decoration: underline;
}

/* --- Homepage "Why choose THI Pipe & Piling?" cards -------------------------
 * .thi-cards-row lays its columns out with display:flex and has no mobile rules at
 * all, so on a phone the three cards stay side by side and the row runs ~86px off
 * the screen. Let them wrap and go full width. */
@media (max-width: 767px) {
  .thi-cards-row {
    flex-wrap: wrap !important;
  }
  .thi-cards-row > .wpb_column {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 14px;
  }
}

/* --- /pipe/ hero -----------------------------------------------------------
 * The hero row is a flex row; the theme sets .thi-pipe-right to width:100% below
 * 768px but never tells the row to stack, so the CTA card sits beside the heading
 * and hangs ~177px off the right edge (205px at 360px). Stack the row instead.
 * Tablet (768px) already renders correctly, so this stays below that breakpoint. */
@media (max-width: 767px) {
  .thi-pipe-hero .vc_row {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
  .thi-pipe-hero .wpb_column,
  .thi-pipe-left,
  .thi-pipe-right {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
  .thi-pipe-cta-inner {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* --- /who-we-are/ testimonial carousel -------------------------------------
 * slick.js writes a fixed pixel width onto .slick-track (2667px on a phone) which
 * leaks past the viewport. The track must stay wide — that is how the carousel
 * slides — so clip it at the viewport instead of resizing it. */
.slick-slider,
.slick-list,
.testimonials_rotator,
.testimonials_list,
.module_testimonial {
  max-width: 100%;
  overflow: hidden !important;
}

/* --- Tablet: the main content row is a hard 798px ---------------------------
 * .row.sidebar_none / .content-container.span12 carry a fixed 798px width, 30px
 * wider than a 768px tablet, so every page scrolls sideways there. */
@media (max-width: 1024px) {
  .row.sidebar_none,
  .content-container.span12,
  .content-container {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* --- Written content blocks (.thi-lit) --------------------------------------
 * Styling for the copy we added where the original site shipped blank pages and
 * stock template filler. Palette taken from the site's own markup: navy #0a1628,
 * gold #c8944a (hover #b07e3a), charcoal #222328, body slate #3a405b. */
.thi-lit {
  color: #3a405b;
  font-size: 16px;
  line-height: 1.7;
}
.thi-lit h1,
.thi-lit h2,
.thi-lit h3 {
  color: #0a1628;
  margin: 0 0 14px;
}
.thi-lit h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.15; }
.thi-lit h2 { font-size: clamp(24px, 3.4vw, 32px); }
.thi-lit h3 { font-size: 19px; }
.thi-lit p { margin: 0 0 16px; }
.thi-lit a { color: #b07e3a; }

.thi-lit-hero {
  background: #0a1628;
  color: #d8dce6;
  padding: 54px 26px;
  border-radius: 6px;
  margin: 0 0 40px;
}
.thi-lit-hero h1 { color: #fff; }
.thi-lit-hero a:not(.thi-lit-btn) { color: #e0b872; }
.thi-lit-hero-compact { padding: 38px 26px; }

.thi-lit-lead { font-size: 18px; max-width: 62ch; }
.thi-lit-hero .thi-lit-lead { color: #cbd2de; }

.thi-lit-section { margin: 0 0 44px; }
.thi-lit-section-alt {
  background: #f4f5f8;
  padding: 34px 26px;
  border-radius: 6px;
}

.thi-lit-btn {
  display: inline-block;
  background: #c8944a;
  color: #17202f !important;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 14px;
  padding: 14px 26px;
  border-radius: 3px;
  text-decoration: none;
  margin: 0 10px 10px 0;
}
.thi-lit-btn:hover { background: #b07e3a; color: #fff !important; }
.thi-lit-btn-ghost {
  background: transparent;
  color: #c8944a !important;
  box-shadow: inset 0 0 0 2px #c8944a;
}
.thi-lit-btn-ghost:hover { background: #c8944a; color: #17202f !important; }
.thi-lit-cta-row { margin-top: 22px; }

.thi-lit-grid,
.thi-lit-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.thi-lit-grid li,
.thi-lit-cards > div {
  background: #fff;
  border: 1px solid #e4e6ec;
  border-left: 3px solid #c8944a;
  border-radius: 4px;
  padding: 18px 20px;
}
.thi-lit-grid li strong { display: block; color: #0a1628; margin-bottom: 4px; }
.thi-lit-grid li span { font-size: 15px; }
.thi-lit-cards p { margin: 0; font-size: 15px; }

.thi-lit-steps {
  counter-reset: thi-step;
  list-style: none;
  margin: 0;
  padding: 0;
}
.thi-lit-steps li {
  counter-increment: thi-step;
  position: relative;
  padding: 0 0 20px 54px;
  margin: 0 0 18px;
  border-bottom: 1px solid #e4e6ec;
}
.thi-lit-steps li:last-child { border-bottom: 0; }
.thi-lit-steps li::before {
  content: counter(thi-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #c8944a;
  color: #17202f;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thi-lit-steps strong { display: block; color: #0a1628; margin-bottom: 4px; }

.thi-lit-checks { list-style: none; margin: 0; padding: 0; }
.thi-lit-checks li {
  position: relative;
  padding: 0 0 10px 28px;
}
.thi-lit-checks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c8944a;
}

.thi-lit-closer {
  background: #222328;
  color: #cbd2de;
  padding: 38px 26px;
  border-radius: 6px;
}
.thi-lit-closer h2 { color: #fff; }
.thi-lit-closer a:not(.thi-lit-btn) { color: #e0b872; }

@media (max-width: 767px) {
  .thi-lit-hero { padding: 36px 20px; }
  .thi-lit-section-alt,
  .thi-lit-closer { padding: 26px 20px; }
  .thi-lit-steps li { padding-left: 46px; }
}

/* --- Belt and braces -------------------------------------------------------
 * Nothing should ever scroll the page sideways on a phone. The targeted rules
 * above fix the known offenders; this catches anything we have not seen yet
 * without affecting layout on larger screens. */
@media (max-width: 1024px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }
}