/**
 * E-Invoice Check - Custom CSS
 * Only what Tailwind CDN cannot express
 * Total size < 10KB
 */

/* Smooth scrolling, guarded by prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Scroll margin for sticky navbar (64px = h-16) */
html {
  scroll-margin-top: 4rem;
}

/* Focus visible ring styling (all interactive elements) */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.5);
}

/* Details/summary styling for FAQ accordion */
details {
  border: none;
  margin-bottom: 1rem;
}

summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background-color: #f8fafc;
  border-radius: 0.5rem;
  font-weight: 600;
  color: #1e293b;
  transition: background-color 0.2s;
}

summary:hover {
  background-color: #e2e8f0;
}

/* Chevron icon rotation */
summary::after {
  content: "▼";
  display: inline-block;
  margin-left: auto;
  transition: transform 0.2s;
  font-size: 0.75rem;
  color: #64748b;
}

details[open] > summary::after {
  transform: rotate(180deg);
}

/* Details content padding */
details > *:not(summary) {
  padding: 0 1rem;
}

details > *:not(summary):last-child {
  padding-bottom: 1rem;
}

/* Disable animations under prefers-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;
  }

  details > summary::after,
  summary::after {
    transition: none;
  }
}

/* Banner safe area (notch support on mobile) */
#banner {
  padding-top: max(0.5rem, env(safe-area-inset-top));
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

/* Navbar safe area */
#navbar {
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

/* Mobile menu safe area */
#mobile-menu {
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

/* No horizontal overflow at any viewport */
body {
  overflow-x: hidden;
}

/* Prevent text selection on disabled buttons */
button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Inline SVG styling */
svg {
  display: inline-block;
  vertical-align: middle;
}

/* Code block styling */
code {
  background-color: #f1f5f9;
  color: #1e293b;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

/* Error state for invalid email */
.error-state {
  border-color: #e11d48 !important;
  color: #e11d48;
}

/* Success state for waitlist signup */
.success-state {
  color: #16a34a;
}