/*
 * OHDA G2.3 Minimal Primitive Components
 * Load after source/assets/css/tokens.css.
 * This stylesheet defines reusable UI primitives only; it is not wired to
 * production pages until an explicitly approved pilot.
 */

.ohda-skip-link {
  position: fixed;
  inset-block-start: var(--ohda-space-2);
  inset-inline-start: var(--ohda-space-2);
  z-index: var(--ohda-z-critical);
  padding: var(--ohda-space-2) var(--ohda-space-4);
  border-radius: var(--ohda-radius-md);
  background: var(--ohda-color-surface);
  color: var(--ohda-color-text);
  box-shadow: var(--ohda-shadow-raised);
  font-family: var(--ohda-font-family-sans);
  font-size: var(--ohda-font-size-sm);
  font-weight: var(--ohda-font-weight-semibold);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--ohda-space-4)));
  transition-property: transform;
  transition-duration: var(--ohda-motion-duration-fast);
  transition-timing-function: var(--ohda-motion-ease-standard);
}

.ohda-skip-link:focus-visible { transform: translateY(0); }

.ohda-site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--ohda-z-sticky);
  padding-block-start: var(--ohda-safe-area-top);
  background: var(--ohda-color-surface);
  border-block-end: 1px solid var(--ohda-color-border);
  box-shadow: var(--ohda-shadow-sm);
  color: var(--ohda-color-text);
  font-family: var(--ohda-font-family-sans);
}

.ohda-shell {
  display: flex;
  align-items: center;
  gap: var(--ohda-space-3);
  width: min(calc(100% - (2 * var(--ohda-layout-gutter-mobile))), var(--ohda-layout-content-xl));
  min-height: var(--ohda-layout-header-height);
  margin-inline: auto;
}

.ohda-brand-link,
.ohda-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ohda-space-2);
  min-width: var(--ohda-layout-touch-target);
  min-height: var(--ohda-layout-touch-target);
  border-radius: var(--ohda-radius-md);
  color: inherit;
  font-weight: var(--ohda-font-weight-bold);
  text-decoration: none;
}

.ohda-brand-link {
  justify-content: flex-start;
  min-width: 0;
  margin-inline-end: auto;
}

.ohda-logo {
  display: block;
  width: var(--ohda-layout-touch-target);
  height: var(--ohda-layout-touch-target);
  border-radius: var(--ohda-radius-md);
  object-fit: cover;
}

.ohda-home-link:hover,
.ohda-brand-link:hover { background: var(--ohda-color-surface-subtle); }

.ohda-language-switcher {
  display: inline-flex;
  align-items: center;
  gap: var(--ohda-space-1);
  padding: var(--ohda-space-1);
  border: 1px solid var(--ohda-color-border);
  border-radius: var(--ohda-radius-pill);
  background: var(--ohda-color-surface-subtle);
}

.ohda-language-switcher button {
  min-width: var(--ohda-layout-touch-target);
  min-height: var(--ohda-layout-touch-target);
  padding-inline: var(--ohda-space-3);
  border: 0;
  border-radius: var(--ohda-radius-pill);
  background: transparent;
  color: var(--ohda-color-text-body);
  cursor: pointer;
  font: inherit;
  font-size: var(--ohda-font-size-sm);
  font-weight: var(--ohda-font-weight-semibold);
  transition-property: background-color, color, box-shadow;
  transition-duration: var(--ohda-motion-duration-fast);
  transition-timing-function: var(--ohda-motion-ease-standard);
}

.ohda-language-switcher button:hover { color: var(--ohda-color-text); }

.ohda-language-switcher button[aria-pressed="true"] {
  background: var(--ohda-color-surface);
  color: var(--ohda-color-interactive-active);
  box-shadow: var(--ohda-shadow-sm);
}

.ohda-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ohda-space-2);
  min-height: var(--ohda-layout-touch-target);
  padding: var(--ohda-space-2) var(--ohda-space-4);
  border: 1px solid transparent;
  border-radius: var(--ohda-radius-md);
  cursor: pointer;
  font-family: var(--ohda-font-family-sans);
  font-size: var(--ohda-font-size-md);
  font-weight: var(--ohda-font-weight-semibold);
  line-height: var(--ohda-line-height-tight);
  text-decoration: none;
  transition-property: background-color, border-color, color, box-shadow, transform;
  transition-duration: var(--ohda-motion-duration-fast);
  transition-timing-function: var(--ohda-motion-ease-standard);
}

.ohda-button:hover { transform: translateY(calc(-1 * var(--ohda-motion-distance-sm))); }
.ohda-button:active { transform: translateY(0); }

.ohda-button--primary {
  background: var(--ohda-color-interactive);
  color: var(--ohda-color-text-inverse);
}
.ohda-button--primary:hover { background: var(--ohda-color-interactive-hover); }

.ohda-button--secondary {
  border-color: var(--ohda-color-border-strong);
  background: var(--ohda-color-surface);
  color: var(--ohda-color-text);
}
.ohda-button--secondary:hover {
  border-color: var(--ohda-color-interactive);
  color: var(--ohda-color-interactive-active);
}

.ohda-button--ghost { background: transparent; color: var(--ohda-color-text-body); }
.ohda-button--ghost:hover { background: var(--ohda-color-surface-subtle); color: var(--ohda-color-text); }
.ohda-button--icon { width: var(--ohda-layout-touch-target); padding: 0; }

.ohda-button[disabled],
.ohda-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.ohda-modal {
  position: fixed;
  inset: 0;
  z-index: var(--ohda-z-modal);
  display: none;
  min-width: 0;
  min-height: 0;
  background: var(--ohda-color-surface);
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--ohda-motion-duration-normal);
  transition-timing-function: var(--ohda-motion-ease-standard);
}

.ohda-modal[aria-hidden="false"] { display: flex; opacity: 1; }

.ohda-modal__frame {
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1;
  border: 0;
  background: var(--ohda-color-surface);
}

.ohda-modal-open { overflow: hidden; overscroll-behavior: none; }

.ohda-brand-link:focus-visible,
.ohda-home-link:focus-visible,
.ohda-language-switcher button:focus-visible,
.ohda-button:focus-visible,
.ohda-modal__frame:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--ohda-focus-ring);
}

@media (min-width: 48rem) {
  .ohda-shell { width: min(calc(100% - (2 * var(--ohda-layout-gutter-tablet))), var(--ohda-layout-content-xl)); }
}

@media (min-width: 64rem) {
  .ohda-shell { width: min(calc(100% - (2 * var(--ohda-layout-gutter-desktop))), var(--ohda-layout-content-xl)); }
}

@media (max-width: 30rem) {
  .ohda-brand-label,
  .ohda-home-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .ohda-language-switcher button {
    min-width: calc(var(--ohda-layout-touch-target) - var(--ohda-space-2));
    padding-inline: var(--ohda-space-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ohda-skip-link,
  .ohda-language-switcher button,
  .ohda-button,
  .ohda-modal { transition-duration: var(--ohda-motion-duration-instant); }

  .ohda-button:hover,
  .ohda-button:active { transform: none; }
}