/* ============================================================
   CUSTOM CSS — everything here is stuff native Elementor widgets
   and Tailwind utilities CANNOT do on their own (organic blob
   shapes, gradients, keyframe animation, focus rings).
   This whole file is meant to be pasted into
   WordPress Customizer → Additional CSS once the layout is
   rebuilt in Elementor. Keep it framework-agnostic (plain CSS,
   no Tailwind @apply) for that reason.
   ============================================================ */

/* Organic blob accent shape — reused at section-transition seams
   site-wide per the "recurring motif" rule. In Elementor: add this
   class via the widget's Advanced > CSS Classes field, target with
   the selectors below. */
.blob-accent {
  border-radius: 76% 24% 68% 32% / 45% 55% 45% 55%;
}

.blob-accent-alt {
  border-radius: 32% 68% 24% 76% / 55% 45% 55% 45%;
}

/* Hero photo-panel gradient backdrop (sky blue → deep navy) */
.hero-gradient {
  background: linear-gradient(135deg, #4FA8E0 0%, #1E5FA8 55%, #0B1F3A 100%);
}

/* Pill button hover lift — Elementor buttons can do color/shadow
   hover natively, but the translateY lift needs this. */
.pill-btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pill-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -8px rgba(245, 130, 31, 0.45);
}

/* Card hover lift, used on service/offer/area cards */
.lift-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lift-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -12px rgba(11, 31, 58, 0.18);
}

/* Scroll-snap carousel (Our Work / testimonials) — mirrors the
   behavior of Elementor's native Image Carousel / Testimonial
   Carousel widgets (Swiper-based) with zero custom JS required. */
.snap-row {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.snap-row::-webkit-scrollbar { display: none; }
.snap-row > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

/* Sticky header shadow-on-scroll toggle target (class added by main.js) */
header.is-scrolled {
  box-shadow: 0 4px 16px -8px rgba(11, 31, 58, 0.15);
}

/* Star rating glyphs */
.star-gold { color: #FFC107; }

/* Focus visibility (accessibility — keep even after Elementor rebuild) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #F5821F;
  outline-offset: 2px;
}