/* Beautyforest, UI primitives.
   The shared kit every block & template consumes: ONE button system, badges,
   pills, chips, the Standard seal, card shell, breadcrumb. Consumes tokens.css. */

/* ---------- Buttons (one system; mirrors theme.json core/button) ---------- */
.bf-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--bf-font-body);font-weight:700;font-size:var(--bf-fs-ui);line-height:1.2;
  padding:var(--bf-btn-pad-y) var(--bf-btn-pad-x);border-radius:var(--bf-radius);
  text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:background var(--bf-transition),color var(--bf-transition),border-color var(--bf-transition)}
/* primary: emerald gradient + white label (matches the block CTAs) */
.bf-btn--primary{background:linear-gradient(135deg,var(--bf-green),var(--bf-green-deep));color:var(--bf-white);border-color:transparent}
.bf-btn--primary:hover{background:linear-gradient(135deg,var(--bf-green-hover),var(--bf-green-deep));color:var(--bf-white);border-color:transparent}
.bf-btn--primary:active{background:var(--bf-green-deep);color:var(--bf-white)}
/* secondary: white fill, graphite text, hairline border, mint on hover */
.bf-btn--line{background:var(--bf-white);color:var(--bf-graphite);border-color:var(--bf-hairline)}
.bf-btn--line:hover{background:var(--bf-mint);color:var(--bf-graphite);border-color:var(--bf-mint)}
/* ghost: for dark grounds only */
.bf-btn--ghost{background:transparent;color:var(--bf-white);border-color:var(--bf-white)}
.bf-btn--ghost:hover{background:var(--bf-green);border-color:var(--bf-green);color:var(--bf-green-ink)}
.bf-btn--full{width:100%}
.bf-btn[disabled],.bf-btn--disabled{background:var(--bf-mint);color:var(--bf-stone);border-color:var(--bf-mint);cursor:not-allowed}

/* Editor "additional CSS class(es)" on a core Button land on the .wp-block-button
   *wrapper*, not the inner link — so bf-btn/bf-btn--* would draw a second box
   around the link (which is already a full button via theme.json). Flatten the
   wrapper so only the inner .wp-block-button__link renders. */
.wp-block-button.bf-btn{display:inline-flex;padding:0;border:0;background:none;box-shadow:none;border-radius:0}

/* ---------- Pills & chips ---------- */
.bf-pill,.bf-chip{display:inline-flex;align-items:center;font-size:.78rem;font-weight:600;line-height:1.2;
  padding:.3rem .65rem;border-radius:var(--bf-radius-pill)}
.bf-pill{background:var(--bf-mint);color:var(--bf-green-ink)}
.bf-chip{background:var(--bf-white);color:var(--bf-stone-deep);border:1px solid var(--bf-hairline)}

/* ---------- The Standard seal/badge ---------- */
.bf-standard-seal{display:inline-flex;align-items:center;gap:.4rem;background:var(--bf-mint);
  color:var(--bf-green-ink);font-weight:600;font-size:.8rem;padding:.35rem .7rem;border-radius:var(--bf-radius-pill)}
.bf-standard-seal svg{width:14px;height:14px;color:var(--bf-forest);flex:0 0 auto}

/* ---------- Card shell ---------- */
.bf-card-shell{background:var(--bf-white);border:1px solid var(--bf-hairline);border-radius:var(--bf-radius-sm);
  box-shadow:var(--bf-shadow-card);transition:box-shadow var(--bf-transition);height:100%;display:flex;flex-direction:column}
.bf-card-shell:hover{box-shadow:var(--bf-shadow-card-hover)}

/* ---------- Breadcrumb ---------- */
.bf-breadcrumb{font-size:.85rem;color:var(--bf-stone-deep);padding-block:.75rem}
.bf-breadcrumb a{color:var(--bf-forest)}

/* ---------- Focus ring (Green Deep clears 3:1 non-text) ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,.wp-element-button:focus-visible,.bf-btn:focus-visible{
  outline:2px solid var(--bf-green-deep);outline-offset:2px;border-radius:var(--bf-radius)}

/* ---------- Outline button variant on dark (from old components.css) ---------- */
.is-style-outline .wp-block-button__link{background:transparent;border:1.5px solid currentColor;color:inherit}
.is-style-outline .wp-block-button__link:hover{background:var(--bf-green);border-color:var(--bf-green);color:var(--bf-green-ink)}

/* ---------- Newsletter ---------- */
.bf-newsletter{display:flex;gap:.5rem;flex-wrap:wrap}
.bf-newsletter__input{flex:1;min-width:0;border:1px solid var(--bf-hairline);border-radius:var(--bf-radius);
  padding:.7rem .9rem;font:inherit;background:var(--bf-white);color:var(--bf-graphite)}
.bf-newsletter__btn{flex:0 0 auto}