/* Faber & Strata — navigation behaviour only.
   Everything visual is inline on the elements; this file owns
   the states CSS alone can express: hover reveal, focus reveal,
   the mobile burger toggle, and the breakpoint. */

.fs-svc-menu { display: none; }
.fs-svc:hover > .fs-svc-menu,
.fs-svc:focus-within > .fs-svc-menu { display: block; }

.fs-svc-pane { display: none; }
.fs-svc-cat:hover > .fs-svc-pane,
.fs-svc-cat:focus-within > .fs-svc-pane { display: block; }

.fs-svc-cat-row { transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1); }
.fs-svc-cat:hover > .fs-svc-cat-row,
.fs-svc-cat:focus-within > .fs-svc-cat-row { background: var(--fs-soft); }
.fs-svc-cat:hover .fs-svc-caret,
.fs-svc-cat:focus-within .fs-svc-caret { color: var(--fs-ink-blue); }

.fs-nav2-cb { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.fs-nav2-burger { display: none; }
.fs-nav2-panel { display: none; }
.fs-nav2-cb:checked ~ .fs-nav2-panel { display: block; }

.fs-nav2-panel summary { list-style: none; cursor: pointer; }
.fs-nav2-panel summary::-webkit-details-marker { display: none; }
.fs-nav2-panel details[open] .fs-nav2-caret { transform: rotate(180deg); }
.fs-nav2-caret { transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1); }

@media (max-width: 1000px) {
  .fs-nav2-desktop { display: none !important; }
  .fs-nav2-burger { display: inline-flex !important; }
}

@media (max-width: 640px) {
  .fs-nav2-bar { padding-left: 22px !important; padding-right: 22px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .fs-svc-cat-row, .fs-nav2-caret { transition: none; }
}