/* ==========================================================================
   Bob's Property Solutions - "Felling Notch" support layer.

   Everything Elementor can express through its own controls is set in the
   editor. This file carries only what the builder has no control for: the
   Archivo width axis, the notched corner that is the design's signature, a
   few parent-hover states, and the hero's veil and angled cut. Every rule is
   scoped to a class set on the element in Elementor.
   ========================================================================== */

/* 1. The display face is Big Shoulders Display, a condensed industrial type
      designed for signage - so the headline voice is a real type design rather
      than Archivo distorted down its width axis. It carries no width axis of
      its own, so nothing needs setting here beyond optical corrections.

      Condensed caps at display size need their tracking opened very slightly
      or the counters close up; Elementor's letter-spacing control is per
      global, and this is the one place it needs a different value. -------- */
.bps-d .elementor-heading-title, .bps-d { text-wrap: balance; }
.bps-spec-n .elementor-heading-title { letter-spacing: .01em; }

/* 2. The notch. A corner cut off at 45 degrees, from the ID plates riveted to
      the side of an excavator. It is the one repeated ornament on the site. */
.bps-notch    { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px),  calc(100% - 9px) 100%,  0 100%); }
.bps-notch-lg { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%); }
.bps-notch-tr { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }

/* 3. Tag chip. It hugs its label rather than filling the column - a flex
      container hands every child `--container-widget-width: 100%`, which beats
      the widget's own Inline setting. Plus the rivet dot before the label. -- */
body.bps-site .elementor-element.bps-tag { width: fit-content; max-width: 100%; }
.bps-tag .elementor-heading-title { display: inline-flex; align-items: center; gap: .5rem; }
.bps-tag .elementor-heading-title::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--e-global-color-secondary);
  opacity: .5;
  flex: none;
}
.bps-tag-dark .elementor-heading-title::before { background: var(--e-global-color-accent); opacity: 1; }

/* 4. Card. The icon tile answers its parent's hover, which is not a self-hover
      and so is not reachable from Elementor's hover tab. ------------------ */
.bps-card .bps-card-ico { transition: background-color .22s cubic-bezier(.22,.61,.36,1); }
.bps-card:hover .bps-card-ico { background-color: var(--e-global-color-accent) !important; }
.bps-card:hover .bps-card-ico .elementor-icon svg { stroke: var(--e-global-color-secondary); }

/* Elementor paints every SVG icon with `fill: currentColor` from a per-element
   rule that nothing generic can out-specify, and offers no stroke-vs-fill
   control, so these stroke drawings would render as solid blobs. */
.elementor-icon svg[stroke="currentColor"],
.elementor-icon svg[stroke="currentColor"] *,
.elementor-icon-list-icon svg[stroke="currentColor"],
.elementor-icon-list-icon svg[stroke="currentColor"] * { fill: none !important; }

/* 4b. Flip box. The stacked icon plate takes the same notched corner as the
       card tiles, so the two read as one family. Elementor has no clip-path
       control, and its stacked view paints the plate with `background-color`
       on the icon wrapper. --------------------------------------------- */
.bps-flip .elementor-icon {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%);
}
/* In the stacked view Elementor drives both the plate background AND the SVG
   stroke from the same control, so a stroke drawing comes out the colour of
   the plate it sits on and disappears. The glyph is set to the plate's
   counterpart here; both still trace to kit tokens. */
body.bps-site .bps-flip .elementor-view-stacked .elementor-icon svg {
  /* Elementor's own rule carries five classes, so this needs the flag to land.
     The plate colour stays editable in the widget; only the glyph is fixed. */
  stroke: var(--e-global-color-white) !important;
}

/* 5. Area chip. A small sap dot before the label. ------------------------- */
.bps-chip .elementor-button-text { display: inline-flex; align-items: center; gap: .5rem; }
.bps-chip .elementor-button-text::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--e-global-color-sap);
  flex: none;
}
.bps-chip-on .elementor-button-text::before { background: var(--e-global-color-accent); }

/* 6. Text link. A 2px amber rule under it that opens its gap on hover. ---- */
.bps-link .elementor-button {
  border-bottom: 2px solid var(--e-global-color-accent) !important;
  padding-bottom: 3px !important;
  transition: gap .18s cubic-bezier(.22,.61,.36,1), color .18s cubic-bezier(.22,.61,.36,1);
}
.bps-link .elementor-button-content-wrapper { gap: .45rem; transition: gap .18s cubic-bezier(.22,.61,.36,1); }
.bps-link:hover .elementor-button-content-wrapper { gap: .8rem; }

/* 7. Hero. The 105deg veil is a three-stop gradient, and the bottom edge is
      cut by a single angled notch - a felling cut. Elementor's overlay owns
      ::before, so the veil goes on ::after. ------------------------------- */
.bps-hero {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), 44% calc(100% - 46px), 36% 100%, 0 100%);
}
.bps-hero::after, .bps-phero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.bps-hero::after {
  background-image: linear-gradient(105deg, rgba(20,26,19,.95) 0%, rgba(20,26,19,.82) 42%, rgba(34,72,44,.6) 100%);
}
.bps-phero::after {
  background-image: linear-gradient(100deg, rgba(20,26,19,.94), rgba(34,72,44,.68));
}
.bps-hero > .e-con-inner, .bps-phero > .e-con-inner,
.bps-hero > .elementor-element, .bps-phero > .elementor-element { position: relative; z-index: 2; }

@media (max-width: 780px) {
  .bps-hero {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 52% calc(100% - 26px), 44% 100%, 0 100%);
  }
}

/* 7b. Hero photo panel. It fills its grid cell and bleeds to the viewport edge,
       so the picture has to cover rather than letter-box. Elementor's image
       widget has no object-fit control. -------------------------------- */
/* The photograph is portrait, so left in flow its natural aspect would set the
   height of the whole band and push the CTA below the fold. Taking it out of
   flow lets the copy decide the height and the picture crop to whatever that
   turns out to be. */
.bps-hero-photo { position: relative; overflow: hidden; }
.bps-hero-photo .elementor-widget-image,
.bps-hero-photo .elementor-widget-container,
.bps-hero-photo .elementor-image,
.bps-hero-photo figure { position: absolute; inset: 0; margin: 0; }
.bps-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}
/* Stacked, the panel goes from a tall portrait crop to a wide shallow one, and
   the same focal point would cut Bob's head off. */
@media (max-width: 980px) {
  .bps-hero-photo img { object-position: center 15%; }
}

/* 8. CTA band. One soft radial glow off the top right. -------------------- */
.bps-cta { position: relative; overflow: hidden; }
.bps-cta::after {
  content: '';
  position: absolute;
  right: -6%; top: -40%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(87,160,95,.34), transparent 66%);
  pointer-events: none;
  z-index: 0;
}
.bps-cta > .e-con-inner { position: relative; z-index: 2; }

/* 9. FAQ toggle. A round fir outline holding a plus, filling amber when open.
      Elementor draws the glyph but not the disc around it. ---------------- */
.bps-faq .e-n-accordion-item-title-icon {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  flex: none;
  margin-top: 2px;
  border: 2px solid var(--e-global-color-primary);
  border-radius: 50%;
  transition: background .22s cubic-bezier(.22,.61,.36,1),
              border-color .22s cubic-bezier(.22,.61,.36,1);
}
.bps-faq details[open] > summary .e-n-accordion-item-title-icon {
  background: var(--e-global-color-accent);
  border-color: var(--e-global-color-accent);
}
.bps-faq details[open] > summary .e-n-accordion-item-title-icon svg { color: var(--e-global-color-secondary); }

/* 10. Scroll reveal, with no JavaScript.

       Elementor 4.2.3 still prints the entrance-animation CSS but no longer
       ships the waypoints library that strips `.elementor-invisible`, so any
       element given an entrance animation would stay hidden for good. The
       first rule makes that state harmless. The second reproduces the
       original's `[data-reveal]` with a scroll-driven timeline where the
       browser has one; everywhere else the content simply renders. -------- */
.elementor-invisible { visibility: visible; }

@keyframes bps-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bps-reveal {
      animation: bps-rise .55s cubic-bezier(.22,.61,.36,1) both;
      animation-timeline: view();
      animation-range: entry 0% cover 20%;
    }
  }
}

/* 11. Elementor gives the header location a stacking context of z-index 1, and
       page content later in the document paints over both the sticky header
       and the fixed call bar inside it. The theme stylesheet loads after this
       one, so the selector has to out-specify it. ------------------------- */
body.bps-site .elementor-location-header { z-index: 90; }

/* 12. Selection and focus, in the brand's own colours. -------------------- */
body.bps-site ::selection { background: var(--e-global-color-accent); color: var(--e-global-color-secondary); }
body.bps-site :focus-visible { outline: 2px solid var(--e-global-color-accent); outline-offset: 3px; }