/* ASAP Pest & Wildlife — Global Styles (v4.1 Visual Rework)
   Matches the live removeasap.com Webflow aesthetic */

/* ============================================
   OUTLINED TEXT EFFECTS
   The signature visual — transparent fill with stroked border
   ============================================ */
.text-outlined-cream {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #F2EDDC;
  color: transparent;
}

.text-outlined-orange {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #B77537;
  color: transparent;
}

.text-outlined-navy {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #212936;
  color: transparent;
}

/* Responsive stroke width — thinner on mobile */
@media (max-width: 768px) {
  .text-outlined-cream,
  .text-outlined-orange,
  .text-outlined-navy {
    -webkit-text-stroke-width: 1.5px;
  }
}

/* ============================================
   WILDLIFE CARDS — hover overlay
   ============================================ */
.wildlife-card {
  cursor: pointer;
  transition: transform 0.2s ease;
}
.wildlife-card:hover {
  transform: translateY(-2px);
}

/* ============================================
   FAQ ACCORDION
   ============================================ */
.faq-item .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-item.open .faq-answer {
  max-height: 500px;
}
.faq-item .faq-toggle-icon {
  transition: transform 0.3s ease;
}
.faq-item.open .faq-toggle-icon {
  transform: rotate(180deg);
}

/* ============================================
   PHOTO GALLERY SLIDER
   ============================================ */
.slider-container {
  position: relative;
  overflow: hidden;
}
.slider-track {
  display: flex;
  transition: transform 0.5s ease;
}
.slider-slide {
  min-width: 100%;
  flex-shrink: 0;
}
.slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(242, 237, 220, 0.4);
  cursor: pointer;
  transition: background 0.3s ease;
}
.slider-dot.active {
  background: #B77537;
}

/* ============================================
   LIGHTBOX
   ============================================ */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.lightbox-overlay.active {
  opacity: 1;
  pointer-events: all;
}
.lightbox-overlay img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
}

/* ============================================
   FORM STYLING — matches Webflow original
   ============================================ */
input::placeholder,
select::placeholder {
  color: rgba(242, 237, 220, 0.4);
}

/* Select arrow color fix for dark backgrounds */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F2EDDC' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* ============================================
   SMOOTH SCROLL
   ============================================ */
html {
  scroll-behavior: smooth;
}

/* ============================================
   BODY TEXT DEFAULTS
   The header is position: fixed at top:0 so it overlays content;
   padding-top on body pushes the page content below the header height.
   Heights account for the new two-row navbar:
     - lg+ (1024): pill (44) + overlap (-23) + logo (260×0.69 ≈ 179) + paddings (16) ≈ 216
     - md  (768) : pill (44) + overlap (-23) + logo (220×0.69 ≈ 152) + paddings (16) ≈ 189
     - base      : no pill, hamburger only — logo (180×0.69 ≈ 124) + paddings (16) ≈ 140
   Body padding ≈ navbar_height + small buffer.
   On the home page, body.home-page overrides this to 0 at canvas+ where
   the canvas-cap's pt:240 takes over navbar clearance.
   ============================================ */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: 140px;
}
@media (min-width: 768px) {
  body { padding-top: 200px; }
}
@media (min-width: 1024px) {
  body { padding-top: 230px; }
}

/* ============================================
   SCROLL-REVEAL ANIMATIONS
   Add class="reveal" to any element to fade-up on viewport enter.
   Stagger via reveal-delay-1..4 on adjacent siblings.
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================
   HOME PAGE — body padding override
   Reference uses position:fixed navbar + zero body padding so the hero
   section starts at viewport y=0. We mirror that on the home page only,
   keeping the absolute-navbar + body-padding pattern on inner pages.
   Selector specificity (0,0,1,1) beats the base body rule (0,0,0,1).
   ============================================ */
/* Only zero body padding at canvas+ (≥1440), where canvas-cap's pt:240 provides
   navbar clearance. Below 1440 we keep the body padding so mobile/tablet hero
   text doesn't collide with the fixed navbar. */
@media (min-width: 1440px) { body.home-page { padding-top: 0; } }

/* ============================================
   CTA BANNER — tooth clearance + mobile hide
   The arrow-orange tooth is absolute-positioned inside the bar with top:0
   and h-auto on a 14.28vw-wide SVG (aspect 320/341 ≈ 0.94). It hangs ~196px
   below the bar at canvas+ and ~14vw on smaller viewports. Without bottom
   padding on the section, the tooth overlaps content in the next section
   (visible on contact / about / wildlife pages where text starts close).
   Reference (.hero-arrow-wrapper.background---cream.blog) uses 14.28vw mb;
   at canvas+ we lock to 200px so it stops scaling above the breakpoint.

   Mobile (<768) hides the tooth to match reference's display:none — and
   spares small viewports the extra padding-bottom they don't need.
   ============================================ */
.cta-banner-section { padding-bottom: 14.28vw; }
@media (min-width: 1440px) {
  .cta-banner-section { padding-bottom: 200px; }
}
.cta-tooth { display: none; }
@media (min-width: 768px) {
  .cta-tooth { display: block; }
}
@media (max-width: 767px) {
  .cta-banner-section { padding-bottom: 0; }
}

/* ============================================
   CANVAS CAP @ 1440px
   Mirrors removeasap.com's `@media (min-width: 1440px)` block:
   above this breakpoint reference switches from vw-based fluid
   sizing to fixed pixels so the design stops scaling. Below 1440px
   the existing vw-based fluidity stays. Selector specificity (0,0,2,0)
   is chosen to beat Tailwind utility classes (0,0,1,0) without
   requiring !important.
   ============================================ */
@media (min-width: 1440px) {
  .canvas-cap {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 240px;          /* reference .padding---medium.stackable---bottom.position---relative pt:12vw locked */
    padding-left: 103px;
    padding-right: 103px;
    padding-bottom: 0;
  }
  .canvas-cap .hero-giving { font-size: 90px; }
  .canvas-cap .hero-peace  { font-size: 170px; }
  .canvas-cap .hero-one    {
    font-size: 60px;
    letter-spacing: 16px;
  }
  /* animal canvas+ overrides — reference uses fixed-pixel translates above 1440 */
  .canvas-cap .home-bat       { transform: translate(290px); }
  .canvas-cap .home-groundhog { max-width: 103px; transform: translate(-123px, 74px); }
  .canvas-cap .home-raccoon   { top: 3%; }
  .cta-canvas-cap {
    max-width: 1440px;
    margin-right: 206px;
    padding-left: 103px;
    padding-right: 25.75px;
  }
  .cta-canvas-cap .cta-tooth {
    right: -9%;
  }
}