/* Load last: one quiet control language, without moving labels or hit targets. */
html :is(.button, .button-section, .pathway-motion-enable, .motion-toggle),
html .pathway-stage-controls button,
html .registration-progress button,
html .registration-review-heading button,
html summary.menu-toggle {
  --button-idle-bg: transparent;
  --button-idle-fg: var(--green, #11643d);
  --button-border: #b3c8af;
  --button-hover-bg: var(--soft, #eaf0ea);
  --button-hover-fg: var(--green-dark, #0b4128);
  --button-pressed-bg: #dce8d8;
  --button-accent: var(--green, #11643d);
  --button-ring: var(--green, #11643d);
  border-radius: 0;
  touch-action: manipulation;
  transition: background-color 160ms ease-out, color 160ms ease-out,
    border-color 160ms ease-out, box-shadow 160ms ease-out;
}

html :is(.button, .button-section) {
  min-height: 48px;
  min-width: 44px;
  gap: 16px;
  background-color: var(--button-idle-bg);
  color: var(--button-idle-fg);
  border-color: var(--button-border);
  box-shadow: inset 0 -2px 0 transparent;
  transform: none;
}

html .button.button-dark {
  --button-idle-bg: var(--ink, #101713);
  --button-idle-fg: #fff;
  --button-border: var(--ink, #101713);
  --button-hover-bg: var(--green-dark, #0b4128);
  --button-hover-fg: #fff;
  --button-pressed-bg: #073321;
  --button-accent: #b7d8a7;
}

html .button.button-green {
  --button-idle-bg: var(--green, #11643d);
  --button-idle-fg: #fff;
  --button-border: var(--green, #11643d);
  --button-hover-bg: var(--green-dark, #0b4128);
  --button-hover-fg: #fff;
  --button-pressed-bg: #073321;
  --button-accent: #b7d8a7;
}

html .button.button-outline {
  --button-idle-fg: var(--ink, #101713);
  --button-border: var(--ink, #101713);
}

html .button.button-ghost {
  --button-idle-fg: #fff;
  --button-border: #cedccb;
  --button-hover-bg: #f7f9f0;
  --button-hover-fg: #0a3624;
  --button-pressed-bg: #e1eccb;
  --button-ring: #e1eccb;
}

/* Keep the pale primary action on the forest masthead and photographic hero. */
html .site-header .button.header-donate,
html :is(.hero-cinematic, .hero-editorial) .button.button-green {
  --button-idle-bg: #e1eccb;
  --button-idle-fg: #0a3624;
  --button-border: #e1eccb;
  --button-hover-bg: #f7f9f0;
  --button-hover-fg: #0a3624;
  --button-pressed-bg: #d4e3bf;
  --button-accent: #0b4128;
  --button-ring: #e1eccb;
  background-color: var(--button-idle-bg);
  color: var(--button-idle-fg);
  border-color: var(--button-border);
}

html :is(.hero-cinematic, .hero-editorial) .button.button-outline {
  --button-idle-bg: #051a1170;
  --button-idle-fg: #f7f9f0;
  --button-border: #cedccb;
  --button-hover-bg: #0a3624;
  --button-hover-fg: #f7f9f0;
  --button-pressed-bg: #092c1b;
  --button-accent: #e1eccb;
  --button-ring: #e1eccb;
  background-color: var(--button-idle-bg);
  color: var(--button-idle-fg);
  border-color: var(--button-border);
}

/* Forest material keeps footer controls readable over its moving artwork. */
html .site-footer .button.button-outline,
html .site-footer .motion-toggle {
  --button-idle-bg: #0b4128;
  --button-idle-fg: #f7f9f0;
  --button-border: #b3c8af;
  --button-hover-bg: #164f34;
  --button-hover-fg: #f7f9f0;
  --button-pressed-bg: #092c1b;
  --button-accent: #e1eccb;
  --button-ring: #e1eccb;
  background-color: var(--button-idle-bg);
  color: var(--button-idle-fg);
  border-color: var(--button-border);
}

html .site-footer .button {
  --button-ring: #e1eccb;
}

html .directory-jumps {
  gap: 12px;
}

html .button-section,
html .directory-jumps .button.button-section {
  --button-idle-bg: var(--paper, #f7f9f6);
  --button-idle-fg: var(--green-dark, #0b4128);
  --button-border: #b3c8af;
  --button-hover-bg: #e5eedd;
  --button-hover-fg: #0a3624;
  --button-pressed-bg: #dce8d8;
  --button-accent: var(--green, #11643d);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 112px;
  gap: 24px;
  padding: 12px 18px;
  border: 1px solid var(--button-border);
  background-color: var(--button-idle-bg);
  color: var(--button-idle-fg);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}

html .button-section[aria-current="location"] {
  --button-idle-bg: #e5eedd;
  --button-border: var(--green, #11643d);
  box-shadow: inset 0 -2px 0 var(--green, #11643d);
}

/* Native auxiliary controls retain their own display and hidden behavior. */
html :is(.pathway-motion-enable, .motion-toggle),
html .pathway-stage-controls button,
html .registration-review-heading button {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 12px;
  border: 1px solid var(--button-border);
  background-color: var(--button-idle-bg);
  color: var(--button-idle-fg);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 transparent;
}

html .pathway-motion-enable {
  padding-inline: 16px;
  max-width: 100%;
}

html .pathway-stage-controls > div {
  gap: 8px;
}

@media (max-width: 719px) {
  html .pathway-stage-controls > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
  html .pathway-stage-controls button {
    min-width: 0;
    padding-inline: 8px;
    text-wrap: balance;
  }
}

html .pathway-stage-controls button[aria-pressed="true"] {
  --button-idle-bg: var(--green-dark, #0b4128);
  --button-idle-fg: #fff;
  --button-border: var(--green-dark, #0b4128);
  --button-hover-bg: #073321;
  --button-hover-fg: #fff;
  --button-pressed-bg: #062a1b;
  --button-accent: #b7d8a7;
  background-color: var(--button-idle-bg);
  color: var(--button-idle-fg);
  border-color: var(--button-border);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 #b7d8a7;
}

html .registration-progress button {
  --button-idle-fg: var(--muted, #53615a);
  min-height: 60px;
  min-width: 44px;
  padding: 8px 6px 12px;
  border: 1px solid transparent;
  background-color: var(--button-idle-bg);
  color: var(--button-idle-fg);
}

html .registration-progress button[aria-current="step"] {
  --button-idle-bg: var(--soft, #eaf0ea);
  --button-idle-fg: var(--green-dark, #0b4128);
  box-shadow: inset 0 -2px 0 var(--green, #11643d);
}

html summary.menu-toggle {
  --button-idle-fg: #f7f9f0;
  --button-hover-bg: #164f34;
  --button-hover-fg: #f7f9f0;
  --button-pressed-bg: #1c5337;
  --button-accent: #e1eccb;
  --button-ring: #e1eccb;
  min-height: 44px;
  min-width: 44px;
  background-color: var(--button-idle-bg);
  color: var(--button-idle-fg);
  box-shadow: inset 0 -2px 0 transparent;
}

html .menu-disclosure[open] > summary.menu-toggle {
  --button-idle-bg: #164f34;
  border-color: #e1eccb;
}

html :is(.button, .button-section, .pathway-motion-enable, .motion-toggle,
  .pathway-stage-controls, .registration-form button, summary.menu-toggle)[hidden] {
  display: none !important;
}

/* Match existing lift specificity so a final stylesheet can retire it. */
html:not(.motion-paused) .button:hover:not(:focus-visible):not(:active),
html .button:focus-visible,
html .button:active {
  transform: none;
}

/* Explicit enabled-state guards also outrank incumbent variant hover rules. */
@media (hover: hover) and (pointer: fine) {
  html :is(.button, .button-section, .pathway-motion-enable, .motion-toggle,
    .pathway-stage-controls button, .registration-progress button,
    .registration-review-heading button, summary.menu-toggle):hover:not([hidden]):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not([data-loading="true"]) {
    background-color: var(--button-hover-bg);
    color: var(--button-hover-fg);
    border-color: var(--button-accent);
    box-shadow: inset 0 -2px 0 var(--button-accent);
  }
}

html :is(.button, .button-section, .pathway-motion-enable, .motion-toggle,
  .pathway-stage-controls button, .registration-progress button,
  .registration-review-heading button, summary.menu-toggle):active:not([hidden]):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not([data-loading="true"]) {
  background-color: var(--button-pressed-bg);
  color: var(--button-hover-fg);
  border-color: var(--button-accent);
  box-shadow: inset 0 -2px 0 var(--button-accent);
}

html :is(.button, .button-section, .pathway-motion-enable, .motion-toggle,
  .pathway-stage-controls button, .registration-progress button,
  .registration-review-heading button, summary.menu-toggle):focus-visible {
  outline: 3px solid var(--button-ring);
  outline-offset: 4px;
}

html .site-footer :is(.button, .motion-toggle):focus-visible {
  outline-offset: -4px;
}

html :is(.button, .button-section, .pathway-motion-enable, .motion-toggle,
  .pathway-stage-controls button, .registration-progress button,
  .registration-review-heading button, summary.menu-toggle):is(:disabled, [aria-disabled="true"], [aria-busy="true"], [data-loading="true"]):not([hidden]) {
  background-color: var(--button-idle-bg);
  color: var(--button-idle-fg);
  border-color: var(--button-border);
  box-shadow: none;
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

html :is(.button, .button-section, .pathway-motion-enable, .motion-toggle,
  .pathway-stage-controls button, .registration-progress button,
  .registration-review-heading button, summary.menu-toggle):is([aria-busy="true"], [data-loading="true"]),
html .registration-actions [data-registration-submit]:disabled:not([hidden]) {
  opacity: .75;
  cursor: wait;
  box-shadow: inset 0 -2px 0 var(--button-accent);
}

html :is(.button, .button-section) > :is(.button-arrow, svg[aria-hidden="true"]),
html .directory-jumps .button-section > span[aria-hidden="true"],
html .text-link > span[aria-hidden="true"] {
  flex-shrink: 0;
  transform: none;
  transition: transform 160ms cubic-bezier(.16, 1, .3, 1);
}

html .button-arrow,
html .button-arrow svg {
  display: block;
  width: 16px;
  height: 16px;
}

html .text-link,
html .pathway-stage-controls > a {
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}

html .text-link:focus-visible,
html .pathway-stage-controls > a:focus-visible {
  outline: 3px solid var(--green, #11643d);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not(.motion-paused) :is(.button, .button-section):hover:not(:focus-visible):not(:active):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not([data-loading="true"]) > :is(.button-arrow, svg[aria-hidden="true"]) {
    transform: translate(2px, -2px);
  }
  html:not(.motion-paused) .button-section[data-arrow-direction="down"]:hover:not(:focus-visible):not(:active):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not([data-loading="true"]) > .button-arrow {
    transform: translateY(2px);
  }
  html:not(.motion-paused) .text-link:hover:not(:focus-visible):not(:active) > span[aria-hidden="true"] {
    transform: translate(2px, -2px);
  }
}

/* Focus, touch and state changes keep every label and arrow stationary. */
html :is(.button, .button-section):is(:focus-visible, :active, :disabled, [aria-disabled="true"], [aria-busy="true"], [data-loading="true"]) > :is(.button-arrow, svg[aria-hidden="true"]),
html .text-link:is(:focus-visible, :active) > span[aria-hidden="true"] {
  transform: none;
}

@media (max-width: 480px) {
  html .directory-jumps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
  html .directory-jumps .button.button-section {
    min-width: 0;
    max-width: 100%;
    gap: 12px;
    padding: 12px 10px;
  }
}

html.motion-paused :is(.button, .button-section, .pathway-motion-enable,
  .motion-toggle, .pathway-stage-controls button, .registration-progress button,
  .registration-review-heading button, summary.menu-toggle, .text-link,
  .pathway-stage-controls > a),
html.motion-paused :is(.button-arrow, .button > svg[aria-hidden="true"],
  .text-link > span[aria-hidden="true"], .menu-icon i) {
  transition: none !important;
}

html.motion-paused :is(.button-arrow, .button > svg[aria-hidden="true"],
  .text-link > span[aria-hidden="true"]) {
  transform: none !important;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  html :is(.button, .button-section, .pathway-motion-enable, .motion-toggle,
    .pathway-stage-controls button, .registration-progress button,
    .registration-review-heading button, summary.menu-toggle, .text-link,
    .pathway-stage-controls > a),
  html :is(.button-arrow, .button > svg[aria-hidden="true"],
    .text-link > span[aria-hidden="true"], .menu-icon i) {
    transition: none !important;
  }
  html :is(.button-arrow, .button > svg[aria-hidden="true"],
    .text-link > span[aria-hidden="true"]) {
    transform: none !important;
  }
}

@media (forced-colors: active) {
  html :is(.button, .button-section, .pathway-motion-enable, .motion-toggle,
    .pathway-stage-controls button, .registration-progress button,
    .registration-review-heading button, summary.menu-toggle) {
    border-color: ButtonText;
    box-shadow: none;
  }
  html :is(.button, .button-section, .pathway-motion-enable, .motion-toggle,
    .pathway-stage-controls button, .registration-progress button,
    .registration-review-heading button, summary.menu-toggle):focus-visible {
    outline-color: Highlight;
  }
  html .pathway-stage-controls button[aria-pressed="true"],
  html .registration-progress button[aria-current="step"] {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}
/* Text-only links and buttons do not reserve an icon column. */
html .directory-jumps .button.button-section{justify-content:center}
html .program-row{grid-template-columns:minmax(170px,1fr) minmax(160px,1fr)}
@media(max-width:600px){html .home-programs .program-row{grid-template-columns:minmax(0,1fr)}}