/**
 * Filo Diretto shell — Phase 1: accessibility & semantics
 * Scoped to light HR deploy (studio.filodiretto.app)
 */

/* ── Focus visible (all shells) ── */
:where(a, button, input, select, textarea, [role="button"], [tabindex="0"]):focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Heading hierarchy ── */
.section > h1.page-title,
.section > .page-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-5);
  line-height: 1.3;
}

.section h2.block-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  line-height: 1.35;
}

.section h2.block-title--sm {
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}

.section h3.block-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.section .page-lead {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 45rem;
  margin-bottom: var(--space-4);
}

/* ── Filo light shell: nav active indicator ── */
html[data-shell="light"] .sidebar .nav-item[aria-current="page"],
html[data-shell="light"] .sidebar .nav-item.active {
  background: var(--bg-active);
  color: var(--accent-hover);
  box-shadow: inset 3px 0 0 var(--accent);
  font-weight: 600;
}

html[data-shell="light"] .sidebar .nav-item:hover:not(.disabled):not([aria-current="page"]) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ── Ghost / outline buttons — WCAG AA contrast ── */
html[data-shell="light"] .btn.sec {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--bg-canvas);
}

html[data-shell="light"] .btn.sec:hover:not(:disabled) {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent-hover);
}

html[data-shell="light"] .btn.sec:disabled {
  color: var(--text-muted);
  border-color: var(--border-default);
}

/* ── Sidebar sticky scroll (Filo) ── */
html[data-shell="light"] .layout .sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding-bottom: var(--space-6);
  scrollbar-gutter: stable;
}

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