/* SeaCurrent — accessibility baseline */

/* Skip to content — invisible until focused */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  padding: 0.75rem 1rem;
  background: var(--accent-strong);
  color: var(--fg-0);
  font-weight: 600;
  border-radius: 0 0 var(--r-md) 0;
  text-decoration: none;
  transform: translateY(-110%);
  transition: transform var(--dur-fast) var(--ease);
  z-index: 10000;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Visually hidden but available to assistive tech */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Consistent keyboard focus across the app */
:focus {
  outline: none;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

/* Main landmark target style — make programmatic focus invisible but reachable */
#main:focus,
[role="main"]:focus {
  outline: none;
}

/* Hide custom elements until they upgrade (avoid FOUC) */
sea-header:not(:defined),
sea-footer:not(:defined),
sea-tabbar:not(:defined),
sea-side-panel:not(:defined),
sea-next-step:not(:defined),
sea-toast:not(:defined),
sea-skeleton:not(:defined),
sea-onboarding:not(:defined),
sea-glossary:not(:defined) {
  visibility: hidden;
}

/* Lift Leaflet attribution / zoom controls above bottom tab bar on phones,
 * and reserve space at the bottom of the page so content/map clicks aren't
 * stolen by the tabbar overlay. .has-tabbar is set by <sea-tabbar> in
 * connectedCallback as a fallback for browsers without :has() support. */
@media (max-width: 767.98px) {
  body.has-tabbar {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }
  body.has-tabbar .leaflet-bottom {
    margin-bottom: 4px;
  }
}

/* Subtle page-load fade-in. Skipped under reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  body {
    animation: sc-page-in 180ms ease-out both;
  }
  @keyframes sc-page-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  /* View Transitions API: cross-fade between pages */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 200ms;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}