/*
 * Home page and FAQ.
 *
 * Loaded by index.html and FAQ.html only. The two event pages have their
 * own stylesheet (style-panels.css); this deliberately does not reuse its
 * cream, so the event pages stay visually distinct from the rest of the
 * site.
 */

:root {
  /* A lighter, less yellow warm white than the event pages' #fdf7ef --
     enough to take the glare off plain white without reading as a colour. */
  --page-warm: #fbf8f4;
  --faq-pink: #ee316c;
  --faq-pink-soft: #f4a5be;
}

body {
  background: var(--page-warm);
}

/* ---------------------------------------------------------------- *
 * FAQ questions
 *
 * These open and close, but nothing said so: the boxes had cursor:auto,
 * a shadow at 3% opacity, and no hover state, so they read as plain
 * panels. They now sit raised off the page and respond to the pointer,
 * echoing the Applications button on the event pages.
 * ---------------------------------------------------------------- */
.accordion-item {
  box-shadow: 0 2px 0 #e9c6d4, 0 5px 12px rgba(0, 0, 0, 0.07);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.accordion-item:hover {
  border-color: var(--faq-pink);
  box-shadow: 0 3px 0 #d8badf, 0 9px 18px rgba(0, 0, 0, 0.11);
  transform: translateY(-1px);
}

/* the whole header row is the hit target, so show it */
.accordion-item-trigger,
.accordion-heading,
.accordion-icon {
  cursor: pointer;
}

/* the heart marker carries the open/closed state -- give it the brand
   pink so it reads as a control rather than punctuation */
.accordion-icon .text-span-3 {
  color: var(--faq-pink);
}

/* keyboard users get the same affordance as pointer users */
.accordion-item-trigger:focus-visible {
  outline: 3px solid var(--faq-pink);
  outline-offset: 3px;
}