/* ---------------------------------------------------------------------------
   Deliberate corrections layered on top of the copied WordPress stylesheets.
   Loaded last in WpStyles so these win. Kept separate so it stays obvious what
   is ours versus what came from the theme.
--------------------------------------------------------------------------- */

/* Carousel cards: the theme sizes slides with `height: 100%`, which only
   equalises them when the flex row stretches. Without the WordPress JS setting
   an explicit wrapper height the cards came out ragged, so stretch the row and
   let each card fill its slide. Images keep their natural size. */
.pxl-swiper-wrapper {
  align-items: stretch;
}

.pxl-swiper-slide {
  height: auto;
}

.pxl-service-carousel .pxl-swiper-slide > .pxl-item--inner,
.pxl-post-carousel .pxl-swiper-slide > .pxl-item--inner {
  display: flex;
  height: 100%;
  flex-direction: column;
}

/* Mobile burger: eicons font + live Elementor toggle footprint (≈38×38). */
.elementor-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  box-sizing: border-box;
}

.elementor-menu-toggle .eicon-menu-bar,
.elementor-menu-toggle .eicon-close {
  font-family: eicons !important;
  font-style: normal;
  font-weight: 400;
  speak: none;
  display: inline-block;
  line-height: 1;
}

/* Testimonials: Elementor used black @ 0.8 opacity (= gray). Force solid black. */
.elementor-element-a1325d3 > .elementor-background-overlay,
.elementor-element-161363f > .elementor-background-overlay,
.elementor-element-5aea13c > .elementor-background-overlay {
  background-color: #000 !important;
  opacity: 1 !important;
}

/* Floating Call / WhatsApp — match live Buttonizer on all viewports:
   - Mobile ≤767: red pill + WhatsApp
   - Tablet/Desktop: blue circular call (left) + WhatsApp (right) */
.gripgo-float-call-mobile {
  color: #fff;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 99998;
  height: 55px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 35px;
  background-color: #dd3333;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  text-decoration: none;
  font-family: "Inclusive Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.gripgo-float-call-tablet {
  color: #fff;
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 99998;
  width: 62px;
  height: 62px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #2196f3;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.gripgo-float-wa {
  color: #fff;
  position: fixed;
  right: 16px;
  bottom: 80px;
  z-index: 99999;
  width: 60px;
  height: 60px;
  display: none;
  align-items: center;
  justify-content: center;
  /* Chat-bubble / teardrop (sharp bottom-right tip) */
  border-radius: 50% 50% 0 50%;
  background-color: #25d366;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
}

@media (max-width: 767px) {
  body {
    padding-bottom: 80px;
  }

  .gripgo-float-call-mobile,
  .gripgo-float-wa {
    display: flex;
  }
}

@media (min-width: 768px) {
  .gripgo-float-call-tablet,
  .gripgo-float-wa {
    display: flex;
  }
}

/* Live Buttonizer desktop positions */
@media (min-width: 1200px) {
  .gripgo-float-call-tablet {
    left: 5%;
    bottom: 40px;
    width: 56px;
    height: 56px;
  }

  .gripgo-float-wa {
    right: 5%;
    bottom: 80px;
    width: 65px;
    height: 65px;
  }
}

/* Theme swaps to #pxl-header-mobile below 1200px. Elementor then un-hides the
   desktop header rows inside that mobile shell (and hides .eb5f59e via
   elementor-hidden-tablet*), which crushes logo/nav/Need Help. Force the
   real mobile row (logo + burger + Need Help) for the whole mobile-header range. */
@media (max-width: 1199px) {
  #pxl-header-mobile .elementor-element-30a19c6,
  #pxl-header-mobile .elementor-element-d3176e0 {
    display: none !important;
  }

  #pxl-header-mobile .elementor-element-eb5f59e {
    display: flex !important;
  }

  #pxl-header-mobile .elementor-nav-menu--dropdown-mobile_extra .elementor-nav-menu--main {
    display: none !important;
  }

  #pxl-header-mobile .elementor-nav-menu--dropdown-mobile_extra .elementor-menu-toggle {
    display: inline-flex !important;
  }

  #pxl-header-mobile
    .elementor-nav-menu--dropdown-mobile_extra
    .elementor-menu-toggle.elementor-active
    + .elementor-nav-menu--dropdown {
    display: block !important;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  }
}

/* Easy Accordion instance styles.
   WordPress emitted these inline, per accordion id. The blog posts now render
   the same markup from components/posts/Faq.tsx, so they are keyed off the
   class instead and every accordion on the site picks them up. */
.sp-easy-accordion .spcollapsing {
  height: 0;
  overflow: hidden;
  transition-property: height;
  transition-duration: 300ms;
}
.sp-easy-accordion > .sp-ea-single {
  margin-bottom: 10px;
  border: 1px solid #e2e2e2;
  background: #eee;
}
.sp-easy-accordion > .sp-ea-single > .ea-header a {
  color: #444;
}
.sp-easy-accordion > .sp-ea-single > .sp-collapse > .ea-body {
  background: #fff;
  color: #444;
}
.sp-easy-accordion > .sp-ea-single > .ea-header a .ea-expand-icon {
  float: left;
  color: #444;
  font-size: 16px;
}

/* ---------------------------------------------------------------------------
   Readable body copy on text pages.

   The Elementor kit maps the page body colour to the brand red
   (`body_color -> globals/colors?id=secondary`), so any text that does not set
   its own colour inherits red — that is what the live site does on the legal
   pages and the blog excerpts. Deliberate divergence: run that copy in black
   and let only real links carry the red.
--------------------------------------------------------------------------- */
.pxl-entry-content,
.pxl-entry-content p,
.pxl-entry-content li,
.pxl-entry-content span,
.pxl-entry-content strong,
.pxl-entry-content td,
.pxl-entry-content th,
.pxl-entry-content blockquote,
.pxl-item--excerpt {
  color: #000;
}

.pxl-entry-content a,
.pxl-item--excerpt a {
  color: var(--primary-color);
}

.pxl-entry-content a:hover,
.pxl-item--excerpt a:hover {
  color: var(--gradient-color-to);
}

/* Tewkesbury reviews band.

   Every reviews section uses the same overlay (#000 at 0.8 opacity), but the
   other pages have a dark photo behind it while this section has no background
   image — so the overlay landed on white and read as #333. Give it a black
   ground so the band matches the rest of the site. */
.elementor-9421 .elementor-element-8e951b2 {
  background-color: #000;
}

/* --- single post / blog archive -------------------------------------------
   WordPress puts `single-post` / `blog` / `archive` on <body>, above
   #pxl-wapper, to unset the wrapper's `overflow-x: hidden` so the sticky
   sidebar can actually stick. Our <body> class is fixed in the root layout, so
   key off the theme-template markup instead. */
#pxl-wapper:has(.pxl-content-wrap) {
  overflow-x: unset;
}

/* Body copy stays black; only links take the brand red. `.pxl-item--content`
   is the single-post body wrapper — the archive rules above don't reach it. */
.pxl-item--content,
.pxl-item--content p,
.pxl-item--content li,
.pxl-item--content span,
.pxl-item--content strong,
.pxl-item--content blockquote,
.pxl-item--content h1,
.pxl-item--content h2,
.pxl-item--content h3,
.pxl-item--content h4,
.pxl-item--content h5,
.pxl-item--content h6 {
  color: #000;
}

.pxl-item--content a {
  color: var(--primary-color);
}

/* Sidebar author-bio widget: body copy, so black like the rest. */
.widget .textwidget,
.widget .textwidget p {
  color: #000;
}

/* --- sidebar widget titles -------------------------------------------------
   The theme sets these at 40px, but from 992px up the sidebar is col-lg-3 and
   the title box only leaves 228px between its padding (65px left for the ///
   mark, 25px right). "CATEGORIES" needs 262px there and spilled past the
   widget's right border. 34px is the largest size the longest title fits at;
   below 992px the sidebar is full width, so the theme size is left alone. */
@media screen and (min-width: 992px) {
  .pxl-sidebar-area .widget-title {
    font-size: 34px;
    overflow-wrap: break-word;
  }
}

/* Status line under the footer contact form (components/ContactForm.tsx). */
.pxl-contact-form-status {
  min-height: 24px;
  margin: 10px 0 0;
  font-size: 14px;
}
.pxl-contact-form-status .is-sent {
  color: #3fbf6a;
}
.pxl-contact-form-status .is-error {
  color: var(--primary-color);
}
.pxl-contact-form-status a {
  color: var(--primary-color);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Trustindex reviews — responsive.

   The widget lays the Google badge and the review slider side by side with
   `flex: 0 0 calc(100% - 285px)` on the slider, reserving a fixed 285px for the
   badge. That is fine on desktop and collapses on a phone: at 375px the slider
   is left 90px and the cards render as unreadable vertical slivers. Trustindex's
   own script swaps a size class in at narrow widths; that script is not loaded
   here, so the breakpoint is done in CSS.

   Below 782px the two stack, each taking the full width, and the cards go one
   per view — the layout the widget uses on mobile.
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Trustindex reviews slider.

   Three things in the widget's own CSS had to be worked around, all found by
   testing against the live site:

   1. The strip carries `overflow: hidden` at the viewport's width, so it
      clipped its own cards — only the first row-full ever painted and paging
      left the section blank. Clipping belongs to the viewport.
   2. The strip's `transform` is set with `!important`, so translating it from
      JS did nothing. The viewport is scrolled instead (Enhance.tsx).
   3. The arrows are `display: block` only above 1024px — below that Trustindex
      expects a swipe and shows a progress line. We want both, at every size.
--------------------------------------------------------------------------- */

/* Carousel, not a scroll box. */
.ti-widget.ti-goog .ti-reviews-container {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.ti-widget.ti-goog .ti-reviews-container::-webkit-scrollbar {
  display: none;
}

/* Arrows at every width, not just desktop. */
.ti-widget.ti-goog .ti-controls {
  display: block !important;
}

/* Enhance.tsx hoists the arrows out of the scroller (they used to scroll away
   with the reviews) and measures this overlay onto the strip — the container
   also holds the Google badge, so `inset: 0` would strand the left arrow. */
.ti-widget .ti-controls-hoisted {
  position: relative;
}
.ti-widget .ti-controls-hoisted > .ti-controls {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}
.ti-widget.ti-goog .ti-controls-hoisted > .ti-controls > .ti-prev,
.ti-widget.ti-goog .ti-controls-hoisted > .ti-controls > .ti-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  display: block !important;
}

@media (max-width: 781px) {
  /* The widget reserves a fixed 285px beside the slider for the Google badge:
     `.ti-widget.ti-goog .ti-widget-container:not(.ti-col-1) .ti-reviews-container`
     sets flex and max-width to `calc(100% - 285px) !important`. At 375px that
     leaves the slider 90px and the card renders as an unreadable sliver. The
     selectors below match that specificity so the later rule wins — a shorter
     selector loses to it even with !important. */
  .ti-widget.ti-goog .ti-widget-container:not(.ti-col-1) {
    flex-direction: column;
  }
  .ti-widget.ti-goog .ti-widget-container:not(.ti-col-1) .ti-reviews-container {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 0 !important;
    /* Room down each side for the arrows, so they sit beside the card rather
       than on top of it, and the card itself comes in from the screen edges. */
    padding: 0 44px !important;
    box-sizing: border-box !important;
  }
  .ti-widget.ti-goog .ti-widget-container:not(.ti-col-1) .ti-footer {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  /* One review per view, filling the strip exactly — border-box so the card's
     own padding cannot push it wider than the strip. */
  .ti-widget.ti-goog .ti-review-item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .ti-widget.ti-goog .ti-review-item .ti-inner {
    margin: 4px 0 !important;
  }
  /* Arrows live in that padding — outside the card, not over it. */
  .ti-widget.ti-goog .ti-controls-hoisted > .ti-controls > .ti-prev {
    left: 5px;
  }
  .ti-widget.ti-goog .ti-controls-hoisted > .ti-controls > .ti-next {
    right: 5px;
  }
}