/* ============================================================
   Insightec button component
   ------------------------------------------------------------
   The one button every new page should use:

     <a class="ins-btn" href="…">View clinical evidence</a>
     <a class="ins-btn ins-btn--outline" href="…">…</a>   outlined, on light
     <a class="ins-btn ins-btn--light" href="…">…</a>     white, on dark bands
     <button class="ins-btn" type="submit">…</button>     works on <button> too

   Everything is driven by the tokens on :root, so the site's button look
   changes in one place. --ins-btn-radius is the corner radius the whole site
   shares; the HCP landing blocks read it too (with a matching fallback, since
   they are pasted into pages as self-contained HTML).

   Loaded site-wide from functions.php, after style.css and responsive.css.
   ============================================================ */
:root{
  --ins-btn-radius:999px;   /* pill -- matches the 45 Elementor buttons that were already 100px */
  /* the site's primary blue and its older buttons' cyan hover (style.css a.button-cta-*) */
  --ins-btn-bg:#0C6EF8;
  --ins-btn-bg-hover:#0646B4;
  --ins-btn-fg:#fff;
  --ins-btn-fg-hover:#fff;
  --ins-btn-accent:#20CAF9;   /* focus ring, and the --light variant's hover fill */
}

/* :not(.elementor-element) keeps these off Elementor widget wrappers, which
   carry the class too -- see the Elementor section at the bottom. */
.ins-btn:not(.elementor-element){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  margin:0;
  padding:12px 24px;
  background:var(--ins-btn-bg);
  border:1px solid var(--ins-btn-bg);
  border-radius:var(--ins-btn-radius);
  box-shadow:none;
  color:var(--ins-btn-fg);
  font-family:"proxima-nova",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:15px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:.06em;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
  cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.ins-btn:not(.elementor-element):hover,
.ins-btn:not(.elementor-element):focus-visible{
  background:var(--ins-btn-bg-hover);
  border-color:var(--ins-btn-bg-hover);
  color:var(--ins-btn-fg-hover);
  text-decoration:none;
}
.ins-btn:not(.elementor-element):focus-visible{outline:2px solid var(--ins-btn-accent);outline-offset:3px}
.ins-btn:not(.elementor-element)[disabled],
.ins-btn:not(.elementor-element)[aria-disabled="true"]{opacity:.55;cursor:default;pointer-events:none}

.ins-btn--outline:not(.elementor-element){background:transparent;color:var(--ins-btn-bg)}
.ins-btn--outline:not(.elementor-element):hover,
.ins-btn--outline:not(.elementor-element):focus-visible{background:var(--ins-btn-bg);border-color:var(--ins-btn-bg);color:#fff}

.ins-btn--light:not(.elementor-element){background:#fff;border-color:#fff;color:var(--ins-btn-bg)}
.ins-btn--light:not(.elementor-element):hover,
.ins-btn--light:not(.elementor-element):focus-visible{background:var(--ins-btn-accent);border-color:var(--ins-btn-accent);color:#fff}

/* ============================================================
   The theme's own buttons, restyled as the component
   ------------------------------------------------------------
   Same look as .ins-btn, written against the theme's existing selectors so no
   template has to change. Each selector matches the specificity of its rule in
   style.css, and this file loads after style.css and responsive.css, so it wins.

   Not included on purpose: .hp-btn and .btn-cta (text links with an arrow),
   .btn-style (resource tiles), the cookie banner and form plugins.
   ============================================================ */
.foo_cta .cta_inner .cta_right a,
a.button-cta-med,
a.button-cta-lg,
a.button-cta-med-white,
.post-password-form input[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:12px 24px;
  background:var(--ins-btn-bg);
  border:1px solid var(--ins-btn-bg);
  border-radius:var(--ins-btn-radius);
  box-shadow:none;
  color:var(--ins-btn-fg);
  font-family:"proxima-nova",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:15px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:.06em;
  text-decoration:none;
  text-transform:uppercase;
  cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.foo_cta .cta_inner .cta_right a:hover,
a.button-cta-med:hover,
a.button-cta-lg:hover,
.post-password-form input[type="submit"]:hover{
  background:var(--ins-btn-bg-hover);
  border-color:var(--ins-btn-bg-hover);
  color:var(--ins-btn-fg-hover);
}
/* was white-on-blue already: the --light variant */
a.button-cta-med-white{background:#fff;border-color:#fff;color:var(--ins-btn-bg)}
a.button-cta-med-white:hover{background:var(--ins-btn-accent);border-color:var(--ins-btn-accent);color:#fff}

/* Elementor Button widgets WITHOUT the ins-btn class (added by hand before this
   existed, or a new one where someone forgot the class) still get the corners. */
.elementor-button{border-radius:var(--ins-btn-radius)}

/* ============================================================
   Elementor: the same component on a Button widget
   ------------------------------------------------------------
   Drop a Button widget, then Advanced → CSS Classes:
       ins-btn                  filled blue
       ins-btn ins-btn--outline outlined, on light
       ins-btn ins-btn--light   white, on dark bands
       ins-btn ins-btn--link    text link with arrow, for cards (see the end of this file)
   Or insert the saved template "Insightec Button" from My Templates, which
   already carries the class.

   Elementor puts that class on the widget WRAPPER, not on the <a>, so these
   rules reach down to .elementor-button. The .elementor-widget prefix lifts
   them above Elementor's own button defaults and the kit. Anything set in the
   widget's Style tab still wins, so leave Style alone to keep the site look.
   ============================================================ */
.elementor-widget.ins-btn .elementor-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 24px;
  background:var(--ins-btn-bg);
  border:1px solid var(--ins-btn-bg);
  border-radius:var(--ins-btn-radius);
  box-shadow:none;
  color:var(--ins-btn-fg);
  fill:var(--ins-btn-fg);
  font-family:"proxima-nova",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:15px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.elementor-widget.ins-btn .elementor-button:hover,
.elementor-widget.ins-btn .elementor-button:focus-visible{
  background:var(--ins-btn-bg-hover);
  border-color:var(--ins-btn-bg-hover);
  color:var(--ins-btn-fg-hover);
  fill:var(--ins-btn-fg-hover);
}
.elementor-widget.ins-btn .elementor-button:focus-visible{outline:2px solid var(--ins-btn-accent);outline-offset:3px}

.elementor-widget.ins-btn--outline .elementor-button{background:transparent;color:var(--ins-btn-bg);fill:var(--ins-btn-bg)}
.elementor-widget.ins-btn--outline .elementor-button:hover,
.elementor-widget.ins-btn--outline .elementor-button:focus-visible{background:var(--ins-btn-bg);border-color:var(--ins-btn-bg);color:#fff;fill:#fff}

.elementor-widget.ins-btn--light .elementor-button{background:#fff;border-color:#fff;color:var(--ins-btn-bg);fill:var(--ins-btn-bg)}
.elementor-widget.ins-btn--light .elementor-button:hover,
.elementor-widget.ins-btn--light .elementor-button:focus-visible{background:var(--ins-btn-accent);border-color:var(--ins-btn-accent);color:#fff;fill:#fff}

/* ============================================================
   Text-link variant: "Learn more ›", "Read more ›", "Visit website →"
   ------------------------------------------------------------
   For CTAs inside cards and lists, where a pill is too heavy. No box, just
   bold text plus the widget's arrow icon.
       ins-btn ins-btn--link          blue text, on light
       ins-btn ins-btn--link-light    white text, on dark bands
   ============================================================ */
.ins-btn--link:not(.elementor-element),
.ins-btn--link-light:not(.elementor-element),
.elementor-widget.ins-btn--link .elementor-button,
.elementor-widget.ins-btn--link-light .elementor-button{
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  color:var(--ins-btn-bg-hover);
  fill:var(--ins-btn-bg-hover);
  font-size:16px;
  letter-spacing:0;
  text-transform:none;
}
.ins-btn--link-light:not(.elementor-element),
.elementor-widget.ins-btn--link-light .elementor-button{color:#fff;fill:#fff}
.ins-btn--link:not(.elementor-element):hover,
.ins-btn--link:not(.elementor-element):focus-visible,
.ins-btn--link-light:not(.elementor-element):hover,
.ins-btn--link-light:not(.elementor-element):focus-visible,
.elementor-widget.ins-btn--link .elementor-button:hover,
.elementor-widget.ins-btn--link .elementor-button:focus-visible,
.elementor-widget.ins-btn--link-light .elementor-button:hover,
.elementor-widget.ins-btn--link-light .elementor-button:focus-visible{
  background:transparent;
  border:0;
  color:var(--ins-btn-accent);
  fill:var(--ins-btn-accent);
}