/**
 * Swim Tayka button design system.
 *
 * New markup must use `tayka-button` and one explicit variant. The selectors
 * after the component API are compatibility adapters for the static WordPress
 * export; they can be removed when those templates are regenerated.
 */
:root {
  /* These values mirror the pill CTAs used on the home page. */
  --btn-primary-bg: #3266ff;
  --btn-primary-bg-hover: #244fd1;
  --btn-primary-bg-active: #193ca8;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #ffffff;
  --btn-secondary-text: #3266ff;
  --btn-secondary-border: #3266ff;
  --btn-danger-bg: #b42318;
  --btn-danger-bg-hover: #8f1c13;
  --btn-danger-text: #ffffff;
  --btn-radius: 999px;
  --btn-font-family: "Work Sans", sans-serif;
  --btn-font-weight: 700;
  --btn-height: 52px;
  --btn-height-large: 72px;
  --btn-icon-size: 48px;
  --btn-padding-x: 26px;
  --btn-padding-y: 14px;
  --btn-font-size: 1rem;
  --btn-font-size-large: clamp(1.1rem, 2vw, 1.5rem);
  --btn-shadow: none;
  --btn-focus-ring: 0 0 0 3px #ffffff, 0 0 0 6px #3266ff;
  --btn-transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease,
    transform 150ms ease, box-shadow 150ms ease;
}

:where(.tayka-button, .elementor-widget-button .elementor-button, .wp-element-button, .wp-block-button__link, .home-button, .programme-card__button, .button, .nav-cta, .grant-application-cta, .mgbutton) {
  align-items: center;
  appearance: none;
  border: 0;
  border-radius: var(--btn-radius) !important;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--btn-font-family) !important;
  font-size: var(--btn-font-size) !important;
  font-weight: var(--btn-font-weight) !important;
  gap: 12px;
  justify-content: center;
  line-height: 1.2;
  min-height: var(--btn-height) !important;
  max-width: 100%;
  padding: var(--btn-padding-y) var(--btn-padding-x) !important;
  text-align: center;
  text-decoration: none !important;
  transition: var(--btn-transition);
  white-space: normal;
}

:where(.tayka-button--primary, .elementor-widget-button .elementor-button:not(.tayka-button--secondary), .wp-element-button, .wp-block-button__link, .home-button--primary, .programme-card__button, .button.primary, .nav-cta, .mgbutton) {
  background-color: var(--btn-primary-bg) !important;
  border: 2px solid var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  fill: var(--btn-primary-text) !important;
  box-shadow: var(--btn-shadow);
}

:where(.tayka-button--primary, .elementor-widget-button .elementor-button:not(.tayka-button--secondary), .wp-element-button, .wp-block-button__link, .home-button--primary, .programme-card__button, .button.primary, .nav-cta, .mgbutton):hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--btn-primary-bg-hover) !important;
  border-color: var(--btn-primary-bg-hover) !important;
  color: var(--btn-primary-text) !important;
  transform: translateY(-1px);
}

:where(.tayka-button--primary, .elementor-widget-button .elementor-button:not(.tayka-button--secondary), .wp-element-button, .wp-block-button__link, .home-button--primary, .programme-card__button, .button.primary, .nav-cta, .mgbutton):active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--btn-primary-bg-active) !important;
  border-color: var(--btn-primary-bg-active) !important;
}

:where(.tayka-button--secondary, .home-button--secondary, .button.secondary, .grant-application-cta) {
  background-color: var(--btn-secondary-bg) !important;
  border: 2px solid var(--btn-secondary-border) !important;
  color: var(--btn-secondary-text) !important;
  box-shadow: none !important;
}

:where(.tayka-button--secondary, .home-button--secondary, .button.secondary, .grant-application-cta):hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: #f4f8fc !important;
  color: var(--btn-primary-bg-hover) !important;
  fill: var(--btn-primary-bg-hover) !important;
  border-color: var(--btn-primary-bg-hover) !important;
  transform: translateY(-2px);
}

:where(.tayka-button--secondary, .home-button--secondary, .button.secondary, .grant-application-cta):active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--btn-primary-bg-active) !important;
  border-color: var(--btn-primary-bg-active) !important;
  color: #ffffff !important;
  transform: translateY(0);
}

.tayka-button--danger { background: var(--btn-danger-bg); color: var(--btn-danger-text); }
.tayka-button--danger:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--btn-danger-bg-hover); transform: translateY(-1px); }
.tayka-button--text { background: transparent; color: var(--btn-primary-bg); min-height: 44px !important; padding-inline: 12px !important; text-decoration: underline !important; text-underline-offset: .2em; }
.tayka-button--text:hover:not(:disabled):not([aria-disabled="true"]) { background: #eaf2fb; color: #12498f; }
.tayka-button--icon, .modal-close-button { background: #ffffff; border: 2px solid var(--btn-secondary-border); border-radius: 50% !important; color: var(--btn-secondary-border); inline-size: var(--btn-icon-size); min-block-size: var(--btn-icon-size) !important; padding: 10px !important; }
.tayka-button--icon:hover:not(:disabled), .modal-close-button:hover:not(:disabled) { background: #eaf2fb; transform: translateY(-1px); }
.tayka-button--large { font-size: var(--btn-font-size-large) !important; min-height: var(--btn-height-large) !important; }
.tayka-button--full { width: 100%; }
.tayka-button__icon { display: inline-flex; flex: 0 0 auto; }
.tayka-button__arrow { display: inline-block; flex: 0 0 auto; transition: transform 150ms ease; }
.tayka-button--arrow::after, .grant-application-cta::after { content: "\2192" !important; display: inline-block; font-size: 1.2em; line-height: 1; margin-left: 12px !important; transition: transform 150ms ease; }
.tayka-button--arrow:hover::after, .grant-application-cta:hover::after { transform: translateX(3px); }

:where(.tayka-button, .elementor-widget-button .elementor-button, .wp-element-button, .wp-block-button__link, .home-button, .programme-card__button, .button, .nav-cta, .grant-application-cta, .mgbutton):focus-visible,
.modal-close-button:focus-visible { box-shadow: var(--btn-focus-ring) !important; outline: 3px solid transparent !important; outline-offset: 3px; }
:where(.tayka-button, .elementor-widget-button .elementor-button, .wp-element-button, .wp-block-button__link, .home-button, .programme-card__button, .button, .nav-cta, .grant-application-cta, .mgbutton):active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(0); }
:where(.tayka-button, .elementor-widget-button .elementor-button, .wp-element-button, .wp-block-button__link, .home-button, .programme-card__button, .button, .nav-cta, .grant-application-cta, .mgbutton):disabled,
:where(.tayka-button, .elementor-widget-button .elementor-button, .wp-element-button, .wp-block-button__link, .home-button, .programme-card__button, .button, .nav-cta, .grant-application-cta, .mgbutton)[aria-disabled="true"] { cursor: not-allowed; opacity: .5; pointer-events: none; transform: none; }

@media (max-width: 600px) { .tayka-button--mobile-full { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  :where(.tayka-button, .elementor-widget-button .elementor-button, .wp-element-button, .wp-block-button__link, .home-button, .programme-card__button, .button, .nav-cta, .grant-application-cta, .mgbutton),
  .tayka-button__arrow, .tayka-button--arrow::after, .grant-application-cta::after { transition-duration: .01ms !important; }
  :where(.tayka-button, .elementor-widget-button .elementor-button, .wp-element-button, .wp-block-button__link, .home-button, .programme-card__button, .button, .nav-cta, .grant-application-cta, .mgbutton):hover,
  :where(.tayka-button, .elementor-widget-button .elementor-button, .wp-element-button, .wp-block-button__link, .home-button, .programme-card__button, .button, .nav-cta, .grant-application-cta, .mgbutton):active { transform: none !important; }
}

/* Conventional aliases for templates that are not yet using the tayka prefix. */
.btn-primary { /* compose with the shared base selector above */ }
.btn-secondary { /* compose with the shared base selector above */ }
:where(.btn-primary, .btn-secondary) {
  align-items:center; border-radius:var(--btn-radius); display:inline-flex;
  font-family:var(--btn-font-family); font-weight:var(--btn-font-weight);
  justify-content:center; min-height:var(--btn-height); padding:var(--btn-padding-y) var(--btn-padding-x);
  text-decoration:none; transition:var(--btn-transition);
}
.btn-primary { background:var(--btn-primary-bg); border:2px solid var(--btn-primary-bg); color:var(--btn-primary-text); }
.btn-secondary { background:var(--btn-secondary-bg); border:2px solid var(--btn-secondary-border); color:var(--btn-secondary-text); }