/* SwiftScore — PWA / SEO lane styles.
 * Standalone stylesheet (do NOT merge into styles.css). Link it from
 * partials/header.ejs AFTER styles.css so it can rely on the core custom
 * properties (--brand, --card, --line, --muted, etc.).
 *
 * Intentionally tiny and additive: nothing here is required for the site to
 * work — it just polishes installed-PWA display mode and an optional FAQ block.
 */

/* When launched as an installed PWA (standalone), give a touch more top
 * breathing room so the sticky header clears the device status bar. */
@media (display-mode: standalone) {
  .site-header { padding-top: env(safe-area-inset-top, 0); }
  body { padding-bottom: env(safe-area-inset-bottom, 0); }
}

/* Optional FAQ accordion styling for about/pricing pages that render a
 * visible Q&A alongside the FAQPage JSON-LD. Uses native <details>. */
.faq {
  margin: 24px 0;
  display: grid;
  gap: 10px;
}
.faq > details {
  background: var(--card, #161b22);
  border: 1px solid var(--line, #222a35);
  border-radius: 12px;
  padding: 0 16px;
}
.faq > details > summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq > details > summary::-webkit-details-marker { display: none; }
.faq > details > summary::after {
  content: "+";
  color: var(--brand, #16c784);
  font-weight: 700;
  font-size: 1.2em;
  line-height: 1;
  transition: transform 0.15s ease;
}
.faq > details[open] > summary::after { content: "\2212"; } /* minus */
.faq > details > .faq-a {
  color: var(--muted, #8b97a7);
  padding: 0 0 16px;
  line-height: 1.55;
}