/* Fidelity overrides — must load AFTER thg-theme.css.
 *
 * TASK-0071 / ISSUE-0026 (P0): The home + /insights routes were rendering
 * blank above-the-fold for the third consecutive deploy. Root cause was the
 * theme treating reveal animations as a visibility GATE rather than a
 * progressive enhancement:
 *
 *   thg-theme.css:680, :22642   `.wow { visibility: hidden }`
 *   ca93424b-main.js gsap.from autoAlpha:0 on .title-anim / .text-anim
 *   ca93424b-main.js gsap.set  opacity:0 on .right-swipe / .left-swipe
 *
 * Any one of those firing successfully relied on WOW.js + the full GSAP
 * chain (incl. the paid Club / Business plugins) running to completion at
 * window.load. If anything earlier in main.js threw (a paid-plugin license
 * check, a DOM-shape difference, an asset 404) the controllers never
 * revealed the content and the hero / why-choose / about / services /
 * testimonials / cta-section stayed invisible forever.
 *
 * The LeadConnector-rendered live site dodges the WOW.js gate too — its
 * server-rendered HTML doesn't actually rely on `.wow { visibility: hidden }`
 * to be flipped to keep the page readable; in practice the animations run as
 * a polish layer over already-visible content.
 *
 * Override surgically: visible at rest, animation still plays on scroll
 * because keyframes tween from their initial state to the computed state.
 * If the animation never runs, the user still sees the page.
 *
 * Pair fix: ca93424b-main.js dropped `autoAlpha:0` from the title/text
 * reveal calls and `opacity:0` from the right/left-swipe set calls, so the
 * inline JS-applied hides also no-op.
 *
 * TASK-0079 (PR 5.6.2): The two paid GSAP plugins that started the
 * visibility regression (smooth-scroll + character-splitter) are now
 * removed entirely. Browser-native smooth scroll + the CSS heading
 * keyframe below replace them. The `.wow` override remains as a belt-
 * and-braces guarantee that no future at-rest visibility regression can
 * silently blank the page.
 */

.wow {
  visibility: visible !important;
}

/* TASK-0079 / PR 5.6.2: in-page anchor jumps (header nav → #choose, etc.)
 * used to be eased by the paid GSAP smooth-scroll plugin. We do not have
 * a license, and the browser ships the behavior natively for free. This
 * one rule replaces the entire plugin. */
html {
  scroll-behavior: smooth;
}

/* TASK-0079 / PR 5.6.2: CSS-only heading reveal.
 *
 * The live site faded `.title-anim` / `.text-anim` headings up
 * character-by-character via a paid GSAP plugin. We don't have a license,
 * and the per-character DOM rewrite is more work than the polish is worth.
 * Instead we fade the whole element up once, on first paint, via the
 * keyframe below. `animation-fill-mode: both` keeps the heading in its
 * final visible state after the animation completes, so even below-the-
 * fold headings (where the animation finishes off-screen during initial
 * load) render correctly when the visitor scrolls to them.
 *
 * Pairs with the `.wow { visibility: visible }` override above: if the
 * animation never runs at all (very old browser, JS disabled, etc.) the
 * heading is still readable. */
.title-anim,
.text-anim {
  animation: thgFadeInUp 0.7s ease-out both;
}

@keyframes thgFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* TASK-0072 / PR 5.6.2: /insights listing card layout fidelity.
 *
 * The base theme declares:
 *   .blog-item            height: 100%
 *   .blog-item .blog-thumb       min-height: 280px  (no max-height)
 *   .blog-item .blog-thumb img   width:100%; min-height:280px; height:100%; object-fit:cover
 *
 * In the live LeadConnector site the cards are JS-injected into a flex
 * column container, so the thumb height is bounded and the image
 * cover-crops to ~280px. Our server-rendered markup drops the cards into
 * a plain Bootstrap `.row.g-4` and the theme rules alone don't bound
 * `.blog-thumb` — because `.blog-thumb` only has min-height (no height
 * or max-height) the natural image aspect ratio expands the thumb and
 * pushes the title / byline / CTA off-screen.
 *
 * Surgical fix: turn `.blog-item` into a flex column and give the thumb
 * a fixed height (280 desktop, 240 at the breakpoints the theme itself
 * uses). The existing `img { object-fit: cover; height: 100% }` then
 * does the right thing because its parent finally has a real height.
 *
 * Also style the new `.blog-author` byline that the InsightsListing
 * emits — the theme doesn't ship a selector for it, so this is the only
 * place that paragraph gets typography. Kept tight and neutral so it
 * reads as a byline, not a heading.
 *
 * Scoped to `.tj-blog-section .blog-item` so detail-page sidebars and
 * any future `.blog-item` usage outside the listing section are
 * untouched.
 */
.tj-blog-section .blog-item {
  display: flex;
  flex-direction: column;
}

.tj-blog-section .blog-item .blog-thumb {
  display: block;
  height: 280px;
  flex: 0 0 280px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
(max-width: 575px) {
  .tj-blog-section .blog-item .blog-thumb {
    height: 240px;
    flex: 0 0 240px;
  }
}

.tj-blog-section .blog-item .blog-content {
  flex: 1 1 auto;
}

.tj-blog-section .blog-item .blog-content .blog-author {
  margin-top: 12px;
  margin-bottom: 0;
  color: var(--tj-color-text-body-2, #364E52);
  font-weight: var(--tj-fw-medium, 500);
  font-size: 14px;
  line-height: 1.5;
}

/* PR 5.6.3: Swiper fallback — home service + testimonial carousels
 * gate card copy on `.swiper-slide-active`. If Swiper init fails (loop
 * with too few slides, pagination selector collision, JS throw before
 * service init) visitors see one blank card. Horizontal scroll + visible
 * copy when Swiper hasn't initialized yet. */
.tj-service-section .service-slider:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.tj-service-section .service-slider:not(.swiper-initialized) .swiper-slide {
  flex: 0 0 min(100%, 360px);
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .tj-service-section .service-slider:not(.swiper-initialized) .swiper-slide {
    flex-basis: min(50%, 420px);
  }
}

@media (min-width: 992px) {
  .tj-service-section .service-slider:not(.swiper-initialized) .swiper-slide {
    flex-basis: min(33.333%, 400px);
  }
}

.tj-service-section
  .service-slider:not(.swiper-initialized)
  .swiper-slide
  .service-item.style-1
  .desc,
.tj-service-section
  .service-slider:not(.swiper-initialized)
  .swiper-slide
  .service-item.style-1
  .text-btn {
  opacity: 1;
  visibility: visible;
}

.tj-testimonial-section .testimonial-slider:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.tj-testimonial-section .testimonial-slider:not(.swiper-initialized) .swiper-slide {
  flex: 0 0 min(100%, 380px);
  scroll-snap-align: start;
}

@media (min-width: 992px) {
  .tj-testimonial-section .testimonial-slider:not(.swiper-initialized) .swiper-slide {
    flex-basis: min(33.333%, 400px);
  }
}

/* PR 6: honeypot field — hidden from users, visible to bots */
.thg-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}