/* .btn — styles for src/lib/expand.mjs's x-button. Load AFTER tokens.css.
   See public/components/README.md for load order, the box-sizing
   requirement (.btn--full is width:100%), and the split rationale. */

/* display/align-items/justify-content and text-decoration exist here rather
   than per-caller because .btn is used on <a> as often as <button> (a CTA
   that navigates rather than submits) — an anchor is inline with an
   underline by default, neither of which a <button> has, so without these
   an anchor-as-button silently renders underlined and off-center. Three
   separate call sites (contact-actions__item, weekly-cta .btn, and the now-
   removed person__action) each patched this individually before it moved
   here — a sign the base class was missing the rule, not that every caller
   needs its own copy. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: var(--hit-target);
  padding: var(--button-primary-padding-block) var(--button-primary-padding-inline);
  border: var(--border-width-hairline) solid transparent;
  border-radius: var(--radius-default);
  font-family: var(--font-sans);
  font-size: var(--size-500);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-ui);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard);
}

.btn--primary {
  background-color: var(--button-primary-background);
  color: var(--button-primary-text);
  box-shadow: var(--button-primary-shadow);
}

/* Hover brightens the fill and tightens the halo. Deliberately not a transform:
   scaling shifts whatever sits next to the button, and the halo already carries
   the response. */
.btn--primary:hover:not(:disabled),
.btn--primary:focus-visible:not(:disabled) {
  background-color: var(--button-primary-background-hover);
  box-shadow: var(--button-primary-shadow-hover);
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
  box-shadow: none;
}

.btn--secondary:hover:not(:disabled) {
  background-color: var(--color-surface-hover);
}

.btn:disabled {
  opacity: var(--button-primary-opacity-disabled);
  box-shadow: none;
  cursor: not-allowed;
}

.btn--full {
  align-self: stretch;
  width: 100%;
}

@media (max-width: 600px) {
  .btn {
    align-self: stretch;
    width: 100%;
  }
}

/* Split from .nav__item's identical rule in nav.css so each file only lists
   the selectors it owns — see public/components/README.md on why load order
   between the two does not matter. */
.btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}