/**
 * Public site UX — smooth scrolling, focus visibility, respect reduced motion.
 * Load after design-system.css and components.css.
 */

:root {
  --ux-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ux-duration: 0.25s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ux-ease: linear;
    --ux-duration: 0.01ms;
  }
  html {
    scroll-behavior: auto;
  }
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

/* Softer in-page link behavior */
:where(a[href^="#"]):not(.nav-link) {
  scroll-margin-top: 5.5rem;
}

/* Form controls (checkout, contact, etc.) */
.form-control,
.form-select,
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  transition: border-color var(--ux-duration) var(--ux-ease), box-shadow var(--ux-duration) var(--ux-ease),
    background-color var(--ux-duration) var(--ux-ease);
}

/* Bootstrap buttons on storefront */
.btn {
  transition: background-color var(--ux-duration) var(--ux-ease), border-color var(--ux-duration) var(--ux-ease),
    color var(--ux-duration) var(--ux-ease), box-shadow var(--ux-duration) var(--ux-ease),
    transform 0.15s var(--ux-ease);
}

.btn:active:not(:disabled) {
  transform: scale(0.98);
}

/* Respect reduced motion for transform hovers in components.css */
@media (prefers-reduced-motion: reduce) {
  .research-card:hover,
  .pub-card:hover,
  .related-card:hover,
  .btn-ldrc-primary:hover,
  .btn-ldrc-outline:hover,
  .btn-gold-gradient:hover,
  .btn-gold-outline:hover,
  .btn:active:not(:disabled) {
    transform: none;
  }
}

/* Keyboard focus: visible ring using design tokens */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.form-control:focus-visible,
.form-select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.35);
}

/* Footer / muted links: clearer hover (components set color; add underline motion) */
.ldrc-footer a {
  transition: color var(--ux-duration) var(--ux-ease);
}

.ldrc-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}