/*!
 * BSF Elementor Buttons — design system buttons for WordPress + Elementor
 * Every value is sanctioned by the BSF brand guidelines (palette + Ambit type).
 * Classes are prefixed `.bsf-` to avoid conflicts with theme / Bootstrap CSS.
 */

/* ---------- Local Ambit webfonts ---------- */
@font-face { font-family: "Ambit"; src: url("../fonts/Ambit-Light.woff2") format("woff2");        font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Ambit"; src: url("../fonts/Ambit-LightItalic.woff2") format("woff2");  font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Ambit"; src: url("../fonts/Ambit-Regular.woff2") format("woff2");      font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ambit"; src: url("../fonts/Ambit-Italic.woff2") format("woff2");       font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Ambit"; src: url("../fonts/Ambit-Bold.woff2") format("woff2");         font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Ambit"; src: url("../fonts/Ambit-BoldItalic.woff2") format("woff2");   font-weight: 700; font-style: italic; font-display: swap; }

/* ---------- Tokens (scoped to .bsf-btn-scope so we don't collide with global :root) ---------- */
.bsf-btn-scope,
.bsf-btn {
  --bsf-color-coral:    #FF5B29;
  --bsf-color-white:    #FFFFFF;
  --bsf-color-green:    #00523C;
  --bsf-color-pink:     #E822AB;
  --bsf-color-purple:   #6F00FF;
  --bsf-color-yellow:   #FFEC00;
  --bsf-color-beige:    #F5EFE6;
  --bsf-color-blue:     #102547;
  --bsf-color-black:    #000000;
  --bsf-color-error:    #E12E44;
  --bsf-color-success:  #0B8741;
  --bsf-color-focus:    #3898ec;
  --bsf-text-body:      var(--bsf-color-black);
  --bsf-card-bg-soft:   var(--bsf-color-beige);
  --bsf-font-body:      "Ambit", Arial, sans-serif;
  --bsf-t-caption:      0.88rem; /* 14 */
  --bsf-t-body-std:     1rem;     /* 16 */
  --bsf-t-body-lg:      1.25rem;  /* 20 */
  --bsf-s-8:            8px;
}

/* Dark theme — when the page (or Elementor section) sets data-theme="dark", surface tokens flip. */
[data-theme="dark"] .bsf-btn,
[data-theme="dark"] .bsf-btn-scope {
  --bsf-text-body:    var(--bsf-color-white);
  --bsf-card-bg-soft: #1A1814; /* Coal */
}

/* ---------- Button base ---------- */
.bsf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bsf-s-8);
  font-family: var(--bsf-font-body);
  font-weight: 400;
  font-size: var(--bsf-t-body-std);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  text-transform: uppercase;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  /* Asymmetric vertical padding compensates for Ambit uppercase glyphs sitting
     slightly above the line-box center. */
  padding: 11px 20px 9px;
  border: 2px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bsf-btn:focus { outline: none; }
.bsf-btn:focus-visible {
  outline: 2px solid var(--bsf-color-focus);
  outline-offset: 2px;
}

/* Sizes */
.bsf-btn-sm {
  padding: 7px 14px 5px;
  font-size: var(--bsf-t-caption);
  gap: 6px;
}
.bsf-btn-lg {
  padding: 15px 28px 13px;
  font-size: var(--bsf-t-body-lg);
  gap: 10px;
}

/* Inline icons */
.bsf-btn svg,
.bsf-btn .bsf-btn-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  /* Counter-translate to re-center icons relative to the asymmetric padding. */
  transform: translateY(-1px);
}
/* Icon-only — square, symmetric padding */
.bsf-btn-icon-only {
  padding: 10px;
  aspect-ratio: 1;
}
.bsf-btn-icon-only.bsf-btn-sm { padding: 6px; }
.bsf-btn-icon-only.bsf-btn-lg { padding: 14px; }
.bsf-btn-icon-only svg,
.bsf-btn-icon-only .bsf-btn-icon { transform: none; }

/* ---------- Variants ---------- */
/* Brand Coral */
.bsf-btn-coral {
  background: var(--bsf-color-coral);
  color: var(--bsf-color-white);
  border-color: var(--bsf-color-coral);
}
.bsf-btn-coral:hover {
  background: transparent;
  color: var(--bsf-color-coral);
}
.bsf-btn-coral-outline {
  background: transparent;
  color: var(--bsf-color-coral);
  border-color: var(--bsf-color-coral);
}
.bsf-btn-coral-outline:hover {
  background: var(--bsf-color-coral);
  color: var(--bsf-color-white);
}

/* Beige (theme-aware via --bsf-card-bg-soft) */
.bsf-btn-beige {
  background: var(--bsf-card-bg-soft);
  color: var(--bsf-text-body);
  border-color: var(--bsf-card-bg-soft);
}
.bsf-btn-beige:hover { background: transparent; }
.bsf-btn-outline {
  background: transparent;
  color: var(--bsf-text-body);
  border-color: var(--bsf-card-bg-soft);
}
.bsf-btn-outline:hover { background: var(--bsf-card-bg-soft); }

/* Outline-on-dark — for buttons sitting on chromatic / dark surfaces */
.bsf-btn-outline-on-dark {
  background: transparent;
  color: var(--bsf-color-white);
  border-color: rgba(255, 255, 255, 0.35);
}
.bsf-btn-outline-on-dark:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--bsf-color-white);
  border-color: var(--bsf-color-white);
}

/* Green */
.bsf-btn-green {
  background: var(--bsf-color-green);
  color: var(--bsf-color-white);
  border-color: var(--bsf-color-green);
}
.bsf-btn-green:hover {
  background: transparent;
  color: var(--bsf-color-green);
}
.bsf-btn-green-outline {
  background: transparent;
  color: var(--bsf-color-green);
  border-color: var(--bsf-color-green);
}
.bsf-btn-green-outline:hover {
  background: var(--bsf-color-green);
  color: var(--bsf-color-white);
}

/* Pink */
.bsf-btn-pink {
  background: var(--bsf-color-pink);
  color: var(--bsf-color-white);
  border-color: var(--bsf-color-pink);
}
.bsf-btn-pink:hover {
  background: transparent;
  color: var(--bsf-color-pink);
}
.bsf-btn-pink-outline {
  background: transparent;
  color: var(--bsf-color-pink);
  border-color: var(--bsf-color-pink);
}
.bsf-btn-pink-outline:hover {
  background: var(--bsf-color-pink);
  color: var(--bsf-color-white);
}

/* Purple */
.bsf-btn-purple {
  background: var(--bsf-color-purple);
  color: var(--bsf-color-white);
  border-color: var(--bsf-color-purple);
}
.bsf-btn-purple:hover {
  background: transparent;
  color: var(--bsf-color-purple);
}
.bsf-btn-purple-outline {
  background: transparent;
  color: var(--bsf-color-purple);
  border-color: var(--bsf-color-purple);
}
.bsf-btn-purple-outline:hover {
  background: var(--bsf-color-purple);
  color: var(--bsf-color-white);
}

/* Yellow — never paired with white text per BSF brand guidelines */
.bsf-btn-yellow {
  background: var(--bsf-color-yellow);
  color: var(--bsf-color-black);
  border-color: var(--bsf-color-yellow);
}
.bsf-btn-yellow:hover {
  background: transparent;
  color: var(--bsf-text-body);
}
.bsf-btn-yellow-outline {
  background: transparent;
  color: var(--bsf-text-body);
  border-color: var(--bsf-color-yellow);
}
.bsf-btn-yellow-outline:hover {
  background: var(--bsf-color-yellow);
  color: var(--bsf-color-black);
}

/* Error / Success — semantic */
.bsf-btn-error {
  background: var(--bsf-color-error);
  color: var(--bsf-color-white);
  border-color: var(--bsf-color-error);
}
.bsf-btn-error:hover {
  background: transparent;
  color: var(--bsf-color-error);
}
.bsf-btn-error-outline {
  background: transparent;
  color: var(--bsf-color-error);
  border-color: var(--bsf-color-error);
}
.bsf-btn-error-outline:hover {
  background: var(--bsf-color-error);
  color: var(--bsf-color-white);
}
.bsf-btn-success {
  background: var(--bsf-color-success);
  color: var(--bsf-color-white);
  border-color: var(--bsf-color-success);
}
.bsf-btn-success:hover {
  background: transparent;
  color: var(--bsf-color-success);
}
.bsf-btn-success-outline {
  background: transparent;
  color: var(--bsf-color-success);
  border-color: var(--bsf-color-success);
}
.bsf-btn-success-outline:hover {
  background: var(--bsf-color-success);
  color: var(--bsf-color-white);
}

/* Dark-mode outlined text rule — White on dark surface, Coral kept for brand */
[data-theme="dark"] .bsf-btn-green-outline,
[data-theme="dark"] .bsf-btn-pink-outline,
[data-theme="dark"] .bsf-btn-purple-outline,
[data-theme="dark"] .bsf-btn-error-outline,
[data-theme="dark"] .bsf-btn-success-outline {
  color: var(--bsf-color-white);
}
[data-theme="dark"] .bsf-btn-green:hover,
[data-theme="dark"] .bsf-btn-pink:hover,
[data-theme="dark"] .bsf-btn-purple:hover,
[data-theme="dark"] .bsf-btn-error:hover,
[data-theme="dark"] .bsf-btn-success:hover {
  color: var(--bsf-color-white);
}

/* Disabled */
.bsf-btn:disabled,
.bsf-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Wrapper for alignment inside an Elementor column */
.bsf-btn-wrap { display: flex; }
.bsf-btn-wrap.bsf-align-left   { justify-content: flex-start; }
.bsf-btn-wrap.bsf-align-center { justify-content: center; }
.bsf-btn-wrap.bsf-align-right  { justify-content: flex-end; }
.bsf-btn-wrap.bsf-align-stretch .bsf-btn { width: 100%; justify-content: center; }