/* Rising Contractors — responsive refinements.
   Loaded AFTER style.css; the template's own CSS is left untouched.
   The Constr template uses large fixed-pixel spacers and large display/watermark
   text that don't scale down on phones, leaving big empty bands and text that
   overflows the screen edge. These overrides fix both for mobile. */

/* ---- 1) tighten the big fixed spacers on mobile ---- */
@media (max-width: 767px) {
  .cs-section-height       { height: 56px !important; }
  .cs-section-height-half  { height: 28px !important; }
  .cs-height-150 { height: 54px !important; }
  .cs-height-140 { height: 50px !important; }
  .cs-height-130 { height: 46px !important; }
  .cs-height-100 { height: 40px !important; }
  .cs-height-90  { height: 36px !important; }
  .cs-height-70  { height: 30px !important; }
  .cs-height-60  { height: 26px !important; }
  .cs-height-50  { height: 22px !important; }
  .cs-height-40  { height: 18px !important; }
  .cs-height-35  { height: 16px !important; }

  /* never allow sideways scrolling */
  html, body { overflow-x: hidden; }

  /* ---- 2) keep large display / watermark text within the screen ---- */
  .cs-text-style-h4 { font-size: 22px !important; white-space: normal !important; word-break: break-word; }
  .cs-uppercase     { font-size: 26px !important; line-height: 1.15 !important; word-break: break-word; }
  .cs-text-style-h1,
  .cs-animated-text { font-size: 46px !important; line-height: 1.05 !important; word-break: break-word; }
  .cs-text-style-h2 { font-size: 30px !important; }
  .ae-title h2      { font-size: 46px !important; word-break: break-word; }
  .cs-heading       { word-break: break-word; }

  /* clip oversized decorative blocks so they can't widen the layout */
  .ae-title,
  .about-experience-wrap .parallax-image,
  .cs-com-strength { overflow: hidden; }
}

@media (max-width: 480px) {
  .cs-section-height { height: 42px !important; }
  .cs-height-150, .cs-height-140 { height: 40px !important; }
  .cs-height-130 { height: 36px !important; }
  .cs-height-100 { height: 34px !important; }
  .cs-height-90  { height: 30px !important; }

  .cs-text-style-h4 { font-size: 20px !important; }
  .cs-uppercase     { font-size: 22px !important; }
  .cs-text-style-h1,
  .cs-animated-text { font-size: 34px !important; }
  .ae-title h2      { font-size: 34px !important; }
}

/* ============================================================
   AUDIT FIXES — reported issues + full-site visual audit (2026-07-04)
   ============================================================ */

/* [3] Off-canvas sidebar now scrolls (style.css had a duplicate overflow:hidden) */
.cs_side_header_in { overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; padding-bottom: 30px; }

/* [1] Footer contact email/phone fit their column (were 35px, unbreakable) */
.cs-footer-widget a.cs-text-style-h4 { font-size: 22px !important; line-height: 1.35 !important; word-break: break-word; overflow-wrap: anywhere; display: inline-block; max-width: 100%; }
@media (max-width: 480px) { .cs-footer-widget a.cs-text-style-h4 { font-size: 18px !important; } }

/* [2] Hero: white text + dark scrim so it is readable over any slide photo */
.cs-hero-wrap .hero-slider-item { position: relative; }
.cs-hero-wrap .hero-slider-item::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,16,42,.80) 0%, rgba(10,16,42,.48) 46%, rgba(10,16,42,.08) 82%); }
.cs-hero-wrap .hero-slider-item .slider-item-content { position: relative; z-index: 2; }
.cs-hero-wrap .slider-item-content .hero-strong-title,
.cs-hero-wrap .slider-item-content .cs-hero-title-normal,
.cs-hero-wrap .slider-item-content .hero-subtitle,
.cs-hero-wrap .slider-item-content p { color: #fff !important; text-shadow: 0 2px 14px rgba(0,0,0,.4); }

/* [9] Breadcrumb banners: scrim for readable white heading over bright photo */
.cs-breadcrumb-wrap { position: relative; }
.cs-breadcrumb-wrap::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,15,40,.45), rgba(10,15,40,.64)); }
.cs-breadcrumb-wrap > .container, .cs-breadcrumb-wrap .cs-bread-page-title-area { position: relative; z-index: 1; }

/* [4] Contact map iframe: make fluid so it fills its column */
.cs-contact-map-and-form iframe { width: 100% !important; height: 620px !important; display: block; border: 0; }
@media (max-width: 991px) { .cs-contact-map-and-form iframe { height: 380px !important; } }

/* [5] Contact office cards: always-present scrim + white text */
.cs-office-box { position: relative; }
.cs-office-box::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,18,45,.80), rgba(10,18,45,.64)); }
.cs-office-box .content-for-top { position: relative; z-index: 5; }
.cs-office-box .content-for-top h5, .cs-office-box .content-for-top h6, .cs-office-box .content-for-top p,
.cs-office-box .content-for-top span, .cs-office-box .content-for-top a { color: #fff !important; }

/* [6] CTA bands: dark fallback bg + scrim + white text (parallax bg is fixed) */
.cs-cta-wrap { position: relative; background-color: #0d1433; }
.cs-cta-wrap::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(rgba(10,15,45,.66), rgba(10,15,45,.80)); }
.cs-cta-wrap .container { position: relative; z-index: 1; }
.cs-cta-wrap .cta-content h2, .cs-cta-wrap .cta-content p, .cs-cta-wrap .cta-content a { color: #fff !important; }
.cs-cta-wrap .cta-content .themecolor { color: #f57500 !important; }

/* [7] service-details "Get in touch" widget: scrim + wrap long email */
div[data-src*="contact-widget-bg"] { position: relative; }
div[data-src*="contact-widget-bg"]::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: rgba(8,18,38,.52); }
div[data-src*="contact-widget-bg"] > * { position: relative; z-index: 1; }
.contact-item a, .contact-item h6 { word-break: break-word; overflow-wrap: anywhere; }

/* [11] project-details pull-quote over cta-bg: scrim + white text */
blockquote.theme-border-wrap[data-src] { position: relative; color: #fff; }
blockquote.theme-border-wrap[data-src]::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: rgba(13,18,48,.55); }
blockquote.theme-border-wrap[data-src] > * { position: relative; z-index: 1; }

/* [10] decorative grey silhouette placeholder (transparent-img-about-com.png) — hide at all sizes (showed as a grey blob / overlapped the feature list) */
.cs-com-strength .com-strength-img { display: none !important; }

/* [8] mobile: testimonial quote ran off the screen */
@media (max-width: 767px) {
  .testi-content h4 { font-size: 20px !important; line-height: 1.4 !important; word-break: break-word; overflow-wrap: anywhere; }
  .testi-slider-item-wrap, .testi-slider-item-wrap .testi-content { max-width: 100% !important; box-sizing: border-box; }
}

/* [13] mobile: footer copyright clipped + scroll-to-top overlap */
@media (max-width: 575px) {
  .cs-footer-copy-text p { font-size: 14px; line-height: 1.4; white-space: normal; padding: 0 58px 0 12px; }
  .cs_scrollup { right: 12px !important; bottom: 12px !important; }
}

/* [14] mobile "Recent Projects" titles — BLOCK-based, iOS-proof. The template's
   flex overlay collapsed the title to min-content on iOS WebKit (vertical text). Drop
   flex entirely: block overlay pinned to the bottom, title as a normal block element. */
@media (max-width: 767px) {
  .project-masonry .cs-project-item.third { display: block !important; width: 100% !important; }
  .project-masonry .cs-project-item.third .cs-project-item-content-in { width: 100% !important; }
  .project-masonry .cs-border-pr { display: none !important; }

  .project-masonry .cs-project-item .cs-project-item-content-in { display: block !important; position: relative !important; width: 100% !important; }
  .project-masonry .cs-project-item .cs-project-item-content-in img { display: block !important; width: 100% !important; }

  .project-masonry .cs-project-item .cs-project-item-content-in .project-meta-data {
    opacity: 1 !important; display: block !important;
    position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100% !important; height: auto !important;
    padding: 64px 16px 16px 16px !important;
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.42) 55%, rgba(0,0,0,0) 100%) !important;
  }
  .project-masonry .cs-project-content { display: block !important; width: 100% !important; text-align: left !important; }
  .project-masonry .cs-project-content h4,
  .project-masonry .cs-project-content h5 {
    display: block !important; width: auto !important; max-width: 100% !important;
    white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important;
    text-align: left !important; font-size: 17px !important; line-height: 1.25 !important; margin: 0 0 6px 0 !important;
  }
  .project-masonry .view-project { display: inline-block !important; font-size: 12px !important; white-space: normal !important; }
}

/* [15] iOS zoom of the WHOLE page on back-navigation: caused by width:100vw elements
   being wider than Safari's visual viewport. Neutralise to 100% on small screens and
   hard-guard against any horizontal overflow. */
html, body { overflow-x: hidden !important; max-width: 100% !important; }
@media (max-width: 991px) {
  .cs_side_header_overlay { width: 100% !important; }
  .cs_nav .cs_nav_list { width: 100% !important; }
  .cs-hero-wrap .hero-slider-item .slider-item-content { width: 100% !important; max-width: 100% !important; }
  .about-experience-wrap { width: 100% !important; max-width: 100% !important; }
  .about-experience-wrap .img-ae img { width: 100% !important; max-width: 100% !important; }
  .project-masonry { width: 100% !important; max-width: 100% !important; }
  .cs-text-moving-wrap { max-width: 100% !important; overflow: hidden !important; }
}

/* [16] Timeline year labels: multi-word labels (e.g. "2022 - 2024") wrapped into a
   vertical stack because each swiper bullet is only 14px wide, and the last label
   could spill past the right edge. Keep labels on one line, centred over their
   bullet, with breathing room at both ends of the pagination row. */
.timeline-pagination span span { white-space: nowrap; }
.timeline-pagination { padding-left: 30px; padding-right: 55px; }