/* Easy Ledger — shared styles (beyond Tailwind config in index.html)
   Material Symbols + mobile menu layering */

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.material-symbols-outlined.filled-check {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Mobile menu: ensure it clears sticky header chrome */
.site-header {
  isolation: isolate;
}

.mobile-panel {
  max-height: min(70vh, 480px);
  overflow-y: auto;
}

.mobile-panel:not([hidden]) {
  animation: mobile-panel-in 180ms ease-out;
}

@keyframes mobile-panel-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Focus visibility for keyboard / reduced-motion friendly */
:is(a, button, input, textarea, select):focus-visible {
  outline: 2px solid #002627;
  outline-offset: 2px;
}

/* FAQ accordion (<details>): hide default marker */
.faq-acc > summary {
  list-style: none;
}
.faq-acc > summary::-webkit-details-marker {
  display: none;
}
.faq-acc .faq-chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.faq-acc[open] .faq-chevron {
  transform: rotate(180deg);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}