/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/
/* ===========================================================================
   Primary button — "Request a Demo" / "Watch the Demo" etc.
   Default: navy fill, white label, white badge with a navy arrow.
   Hover:   transparent fill, navy 1px outline, navy label, navy badge with a
            white arrow. A plain colour transition, nothing else.

   WHY hand-authored rather than Bricks' hover controls: on this site Bricks'
   own `_property::hover` settings emit NO CSS at all (documented project-wide),
   so every working hover is a hand-authored class.

   WHY !important: Bricks colours each part of this button with a PER-ELEMENT
   ID rule — e.g. `#brxe-ho6g1f { color: var(--surface) }` on the label,
   `#brxe-lh69ip` on the badge, `#brxe-yejlqp` on the arrow. An ID always beats
   a class, so a single reusable class cannot override them otherwise. The only
   alternative is repeating an id-scoped block per button, which would defeat
   having one sitewide definition.

   Applied by adding `btn-primary` to the element's _cssClasses (NOT
   _cssGlobalClasses — these are not Bricks Global Classes).
   =========================================================================== */

.btn-primary {
  /* Reserve the hover border up front so the box never resizes on hover.
     box-sizing is border-box sitewide, so the 48px outer height is preserved. */
  border: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease;
}

.btn-primary:hover {
  background-color: transparent !important;
  border-color: var(--brand-900);
}

/* transitions on the parts, so label/badge/arrow fade rather than snap */
.btn-primary .brxe-text-basic,
.btn-primary > .brxe-block,
.btn-primary .brxe-icon {
  transition: background-color .25s ease, color .25s ease;
}

.btn-primary:hover .brxe-text-basic { color: var(--brand-900) !important; }
.btn-primary:hover > .brxe-block    { background-color: var(--brand-900) !important; }
.btn-primary:hover .brxe-icon       { color: var(--surface) !important; }

/* ---------------------------------------------------------------------------
   Shape 2 — native Bricks button (`.bricks-button`), where the badge is an
   INLINED <svg> with exactly two paths: [1] the white circle, [2] the #2E3F8F
   arrow. `fill` there is a presentation attribute, which any CSS rule beats,
   so these need no !important (unlike the colour rules above, which fight
   per-element ID rules).

   Two entry points because a form's submit button is generated by Bricks and
   cannot take a class of its own: `btn-primary` goes on a normal button,
   `btn-primary-submit` goes on the FORM element and reaches its submit button.
   --------------------------------------------------------------------------- */

/* NOTE: a Bricks button renders its label as a BARE TEXT NODE, not a `.text`
   span — so the label colour must be set on the <a>/<button> itself and
   inherited. Targeting `.text` here silently does nothing and leaves white
   text on the now-transparent background (i.e. an invisible button).
   Bricks also sets its own border on `.bricks-button`, which zeroes the width,
   so the reserved 1px has to be !important or the outline never appears. */
.btn-primary.bricks-button,
.btn-primary-submit .bricks-button {
  border: 1px solid transparent !important;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.btn-primary.bricks-button:hover,
.btn-primary-submit .bricks-button:hover {
  background-color: transparent !important;
  border-color: var(--brand-900) !important;
  color: var(--brand-900) !important;
}

.btn-primary.bricks-button svg path,
.btn-primary-submit .bricks-button svg path {
  transition: fill .25s ease;
}

.btn-primary.bricks-button:hover svg path:nth-of-type(1),
.btn-primary-submit .bricks-button:hover svg path:nth-of-type(1) {
  fill: var(--brand-900);
}
.btn-primary.bricks-button:hover svg path:nth-of-type(2),
.btn-primary-submit .bricks-button:hover svg path:nth-of-type(2) {
  fill: var(--surface);
}

/* ---------------------------------------------------------------------------
   Shape 3 — buttons carrying the Bricks GLOBAL CLASS `button`
   (About "Request a Demo", Platform "Request a Demo" / "Explore Solutions").

   Hooking the global class rather than adding a per-element class means every
   current AND future button built with it inherits the hover automatically.

   WHY the badge is handled differently here: on these buttons the badge is a
   real <img> pointing at attachment 1428, so its internals cannot be recoloured
   by CSS the way an inline <svg> or an icon font can. `filter` is no good
   either — the glyph is two-tone (white circle + #2E3F8F arrow) and inverting
   navy gives khaki, not white. So the hover swaps the whole image via
   `content: url()`, using an inline copy of 1428 with the two fills exchanged.
   `#` is percent-encoded as %23; a raw # would be parsed as a URL fragment.
   --------------------------------------------------------------------------- */

.button {
  border: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease;
}
.button .brxe-text-basic,
.button .brxe-image {
  transition: color .25s ease;
}

.button:hover {
  background-color: transparent !important;
  border-color: var(--brand-900);
}
.button:hover .brxe-text-basic {
  color: var(--brand-900) !important;
}
.button:hover .brxe-image {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='23' viewBox='0 0 24 23' fill='none'%3E%3Cpath d='M0 11.5C0 5.14873 5.14873 0 11.5 0H12.5C18.8513 0 24 5.14873 24 11.5C24 17.8513 18.8513 23 12.5 23H11.5C5.14873 23 0 17.8513 0 11.5Z' fill='%231A2450'/%3E%3Cpath d='M14.3266 11.9375L11.8766 14.3875L12.5 15L16 11.5L12.5 8L11.8766 8.6125L14.3266 11.0625H9V11.9375H14.3266Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

/* ===========================================================================
   White button (used on dark navy bands) — "Request a Demo" in the footer CTA,
   "Explore Platform" on Home / Solutions / Why Collabrix.

   Default: white fill, navy label, NAVY badge with a WHITE arrow.
   Hover:   transparent fill, 1px white outline, white label, WHITE badge with
            a NAVY arrow. Exactly the inverse of the primary button above.

   Two hooks, mirroring the two markup shapes this button exists in:
     .button-white            -> Bricks GLOBAL CLASS, footer CTA, all 8 pages.
                                 Badge is a <div> + icon-font <i>.
     .btn-white.bricks-button -> native Bricks buttons (Home/Solutions/Why
                                 Collabrix). Badge is an inlined 2-path <svg>;
                                 the label is a BARE TEXT NODE, so its colour
                                 must be set on the button and inherited.

   !important is needed for the same reason as the primary button: Bricks
   colours each part with a per-element ID rule (#brxe-4abqyu on the label,
   #brxe-qu4nh7 on the badge, #brxe-l63so6 on the arrow) and an ID beats a
   class. The base border is !important because both shapes ship border-width:0.
   =========================================================================== */

.button-white,
.btn-white.bricks-button {
  border: 1px solid transparent !important;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.button-white .brxe-text-basic,
.button-white > .brxe-block,
.button-white .brxe-icon,
.btn-white.bricks-button svg path {
  transition: background-color .25s ease, color .25s ease, fill .25s ease;
}

.button-white:hover,
.btn-white.bricks-button:hover {
  background-color: transparent !important;
  border-color: var(--surface) !important;
  color: var(--surface) !important;
}

/* shape A parts — icon-font badge */
.button-white:hover .brxe-text-basic { color: var(--surface) !important; }
.button-white:hover > .brxe-block    { background-color: var(--surface) !important; }
.button-white:hover .brxe-icon       { color: var(--brand-900) !important; }

/* shape B parts — inlined svg badge: [1] circle, [2] arrow */
.btn-white.bricks-button:hover svg path:nth-of-type(1) { fill: var(--surface); }
.btn-white.bricks-button:hover svg path:nth-of-type(2) { fill: var(--brand-900); }

/* ---------------------------------------------------------------------------
   Search "work in progress" page — the quick-link row's vertical separators.
   Figma draws a 1x16 #64748B rule between each pair. Done as a pseudo-element
   so the separators are not extra DOM nodes that would need re-ordering every
   time a link is added or removed.
   --------------------------------------------------------------------------- */
.wip-links > a {
  position: relative;
}
.wip-links > a:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background-color: var(--text-muted);
}

/* ===========================================================================
   Solution detail — "How <solution> Works" scroll-activated timeline.

   Steps start dimmed and light up as they scroll into the reading position.
   Driven by .is-active, added by js/workflow-timeline.js (IntersectionObserver).

   The node matches Figma exactly: a 16px circle that is a 6px white centre
   inside a 5px ring, so the ring colour IS the state. box-sizing is border-box
   sitewide, so adding the border does not change the 16px footprint.
   =========================================================================== */

.wf-timeline .wf-line {
  background-color: var(--fill-muted) !important;
  overflow: hidden;
}
/* the fill grows to the last activated node */
.wf-timeline .wf-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--wf-progress, 0%);
  background-image: var(--gradient-brand);
  transition: height .45s ease;
}

.wf-timeline .wf-card {
  opacity: .5;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease, box-shadow .5s ease;
}
.wf-timeline .wf-node {
  background-color: var(--surface);
  border: 5px solid var(--border-strong);
  transition: border-color .5s ease, box-shadow .5s ease;
}

.wf-timeline .wf-step.is-active .wf-card {
  opacity: 1;
  transform: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
}
.wf-timeline .wf-step.is-active .wf-node {
  border-color: var(--brand-500);
  box-shadow: 0 0 8px 2px rgba(46, 63, 143, .35);
}

/* A visitor who prefers reduced motion still needs to read the section, so the
   JS marks every step active up front; kill the transitions too. */
@media (prefers-reduced-motion: reduce) {
  .wf-timeline .wf-card,
  .wf-timeline .wf-node,
  .wf-timeline .wf-line::after {
    transition: none;
  }
}