/* ===================================================================
   File: buttons.css
   Description: Canonical semantic button system for Local Leader
   =================================================================== */

:root {
  --ll-btn-radius: 8px;
  --ll-btn-font-size: 16px;
  --ll-btn-font-weight: 600;
  --ll-btn-line-height: 1.25;
  --ll-btn-min-height: 48px;
  --ll-btn-padding-y: 12px;
  --ll-btn-padding-x: 22px;

  --ll-color-primary: #16723a;
  --ll-color-primary-hover: #115c2f;
  --ll-color-primary-active: #0d4a26;

  --ll-color-secondary-text: #344054;
  --ll-color-secondary-border: #475467;
  --ll-color-secondary-hover: #f2f4f7;
  --ll-color-secondary-active: #e4e7ec;

  --ll-color-link: #175cd3;
  --ll-color-link-hover: #1849a9;
  --ll-color-link-active: #194185;

  --ll-color-urgent: #b54708;
  --ll-color-urgent-hover: #93370d;
  --ll-color-urgent-active: #7a2e0e;

  --ll-color-danger: #b42318;
  --ll-color-danger-hover: #912018;
  --ll-color-danger-active: #7a271a;

  --ll-color-disabled-bg: #e4e7ec;
  --ll-color-disabled-text: #667085;
  --ll-color-disabled-border: #d0d5dd;

  --ll-btn-shadow: 0 1px 2px rgb(16 24 40 / 8%);
  --ll-btn-shadow-hover: 0 2px 6px rgb(16 24 40 / 12%);
  --ll-btn-focus-ring:
    0 0 0 2px #ffffff,
    0 0 0 5px #344054;
}

/*
 * Base buttons are neutral. An action is visually primary only when it is
 * explicitly marked .ll-btn--primary. Selectors include the element type so
 * the canonical system outranks theme rules such as button[type="submit"].
 * This prevents accidental competing
 * primary actions when a new button is added without a semantic variant.
 */
body :is(button, a, input).ll-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: var(--ll-btn-min-height);
  padding: var(--ll-btn-padding-y) var(--ll-btn-padding-x);
  border: 2px solid var(--ll-color-secondary-border);
  border-radius: var(--ll-btn-radius);
  background: #ffffff;
  color: var(--ll-color-secondary-text);
  box-shadow: var(--ll-btn-shadow);
  font: inherit;
  font-size: var(--ll-btn-font-size);
  font-weight: var(--ll-btn-font-weight);
  line-height: var(--ll-btn-line-height);
  text-align: center;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.05s ease;
}

body :is(button, a, input).ll-btn:hover {
  background: var(--ll-color-secondary-hover);
  border-color: var(--ll-color-secondary-border);
  color: var(--ll-color-secondary-text);
  box-shadow: var(--ll-btn-shadow-hover);
  text-decoration: none;
}

body :is(button, a, input).ll-btn:active {
  background: var(--ll-color-secondary-active);
  border-color: var(--ll-color-secondary-border);
  color: var(--ll-color-secondary-text);
  box-shadow: none;
  transform: translateY(1px);
}

body :is(button, a, input).ll-btn:focus-visible {
  outline: none;
  box-shadow: var(--ll-btn-focus-ring);
}

body :is(button, a, input).ll-btn.ll-btn--primary {
  border-color: var(--ll-color-primary);
  background: var(--ll-color-primary);
  color: #ffffff;
}

body :is(button, a, input).ll-btn.ll-btn--primary:hover {
  border-color: var(--ll-color-primary-hover);
  background: var(--ll-color-primary-hover);
  color: #ffffff;
}

body :is(button, a, input).ll-btn.ll-btn--primary:active {
  border-color: var(--ll-color-primary-active);
  background: var(--ll-color-primary-active);
  color: #ffffff;
}

/*
 * Newsletter popup actions use .ll-btn-primary. Give that explicit variant
 * the blue action palette instead of allowing the neutral .ll-btn base rule
 * to leave the button white.
 */
body :is(button, a, input).ll-btn.ll-btn-primary {
  border-color: var(--ll-color-link);
  background: var(--ll-color-link);
  color: #ffffff;
}

body :is(button, a, input).ll-btn.ll-btn-primary:hover {
  border-color: var(--ll-color-link-hover);
  background: var(--ll-color-link-hover);
  color: #ffffff;
}

body :is(button, a, input).ll-btn.ll-btn-primary:active {
  border-color: var(--ll-color-link-active);
  background: var(--ll-color-link-active);
  color: #ffffff;
}


/* .ll-btn--secondary and .ll-btn--neutral intentionally use the neutral base appearance. */

body :is(button, a, input).ll-btn.ll-btn--ghost,
body :is(button, a, input).ll-btn.ll-btn--link {
  min-height: var(--ll-btn-min-height);
  padding-right: 6px;
  padding-left: 6px;
  border-color: transparent;
  background: transparent;
  color: var(--ll-color-link);
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body :is(button, a, input).ll-btn.ll-btn--ghost:hover,
body :is(button, a, input).ll-btn.ll-btn--link:hover {
  border-color: transparent;
  background: transparent;
  color: var(--ll-color-link-hover);
  box-shadow: none;
}

body :is(button, a, input).ll-btn.ll-btn--ghost:active,
body :is(button, a, input).ll-btn.ll-btn--link:active {
  border-color: transparent;
  background: transparent;
  color: var(--ll-color-link-active);
  box-shadow: none;
  transform: none;
}

body :is(button, a, input).ll-btn.ll-btn--urgent,
body :is(button, a, input).ll-btn.ll-btn--attention {
  border-color: var(--ll-color-urgent);
  background: var(--ll-color-urgent);
  color: #ffffff;
}

body :is(button, a, input).ll-btn.ll-btn--urgent:hover,
body :is(button, a, input).ll-btn.ll-btn--attention:hover {
  border-color: var(--ll-color-urgent-hover);
  background: var(--ll-color-urgent-hover);
  color: #ffffff;
}

body :is(button, a, input).ll-btn.ll-btn--urgent:active,
body :is(button, a, input).ll-btn.ll-btn--attention:active {
  border-color: var(--ll-color-urgent-active);
  background: var(--ll-color-urgent-active);
  color: #ffffff;
}

body :is(button, a, input).ll-btn.ll-btn--danger,
body :is(button, a, input).ll-btn.ll-btn--destructive {
  border-color: var(--ll-color-danger);
  background: var(--ll-color-danger);
  color: #ffffff;
}

body :is(button, a, input).ll-btn.ll-btn--danger:hover,
body :is(button, a, input).ll-btn.ll-btn--destructive:hover {
  border-color: var(--ll-color-danger-hover);
  background: var(--ll-color-danger-hover);
  color: #ffffff;
}

body :is(button, a, input).ll-btn.ll-btn--danger:active,
body :is(button, a, input).ll-btn.ll-btn--destructive:active {
  border-color: var(--ll-color-danger-active);
  background: var(--ll-color-danger-active);
  color: #ffffff;
}

body :is(button, a, input).ll-btn.ll-btn--sm {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 14px;
}

body :is(button, a, input).ll-btn.ll-btn--lg {
  min-height: 52px;
  padding: 13px 26px;
  font-size: 17px;
}

body :is(button, a, input).ll-btn.ll-btn--block,
body :is(button, a, input).ll-btn.ll-btn--full {
  display: flex;
  width: 100%;
}

.ll-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

body :is(button, a, input).ll-btn:disabled,
body :is(button, a, input).ll-btn[aria-disabled="true"] {
  border-color: var(--ll-color-disabled-border);
  background: var(--ll-color-disabled-bg);
  color: var(--ll-color-disabled-text);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}


body :is(button, a, input).ll-btn.loading,
body :is(button, a, input).ll-btn.processing,
body :is(button, a, input).ll-btn[aria-busy="true"] {
  cursor: wait;
}