/* ============================================================
   qa-blocks.css — question-and-answer blocks (6 Aug 2026)
   ------------------------------------------------------------
   Answer Engine Optimisation, in markup terms: a real question
   as a heading, then a direct 40–80 word answer beneath it.
   Deliberately NOT an accordion — collapsed answers still get
   crawled, but visible ones are what get lifted into answer
   boxes and AI summaries, and this is the whole point of the
   component.

   Used on one.html, classroom.html and onsite.html, directly
   above the pricing section. Paired with FAQPage schema, though
   the visible copy is what actually does the work: Google
   retired FAQ rich results on 7 May 2026.

   Loads AFTER the product stylesheets, BEFORE modular.css —
   which must always load last.
   ============================================================ */

.qa { margin-top: var(--sp-2, 8px); }

.qa__item + .qa__item {
  margin-top: var(--sp-7, 28px);
  padding-top: var(--sp-7, 28px);
  border-top: 1px solid #E6ECF4;
}

/* 34ch keeps a question to one or two lines at every width, so the
   list scans as a list of questions rather than a wall of text */
.qa__item h3 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 600;
  color: #0F1438;
  max-width: 34ch;
}

.qa__item p {
  margin: 0;
  max-width: 68ch;
  color: #4A5876;
}

.qa__item p + p { margin-top: 10px; }

@media (max-width: 700px) {
  .qa__item h3 { font-size: 20px; }
  .qa__item + .qa__item {
    margin-top: var(--sp-6, 24px);
    padding-top: var(--sp-6, 24px);
  }
}

/* ============================================================
   ACCORDION VARIANT  (6 Aug 2026)
   Rebecca: "can we have this section as an accordian… do the same for the other
   school type pages". Applied to primary-schools, secondary-schools and
   local-authorities-and-trusts ONLY.

   ⚠ THIS CONTRADICTS THE NOTE AT THE TOP OF THIS FILE, on purpose. That note says
   the component is "deliberately NOT an accordion" because visible answers are the
   ones lifted into answer boxes and AI summaries. Her call, made knowing that.
   ⚠ one.html, classroom.html and onsite.html still use the OPEN version and share
   this stylesheet — which is why every rule below is scoped to `details.qa__item`
   or `.qa__item summary`. A plain `div.qa__item` is untouched. Do not loosen these
   selectors to bare `.qa__item` or the three product pages collapse too.

   Native <details>/<summary>: no JavaScript, keyboard and screen-reader support
   for free, and the answer text is still in the DOM for crawlers. The <h3> stays
   INSIDE the <summary> so the document outline is unchanged.
   ============================================================ */
details.qa__item { }
details.qa__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  list-style: none;                 /* Firefox */
  padding: 4px 0;
}
details.qa__item summary::-webkit-details-marker { display: none; }
details.qa__item summary h3 { margin: 0; }
details.qa__item summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 183, 241, 0.45);
  border-radius: 10px;
}
/* the chevron is a 44px target in its own right, so a mis-tap still opens the row */
.qa__chev {
  flex: none;
  width: 44px;
  height: 44px;
  margin: -8px -10px 0 0;
  display: grid;
  place-items: center;
  color: var(--ge-blue, #1B367E);
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.qa__chev svg { width: 22px; height: 22px; }
details.qa__item[open] .qa__chev { transform: rotate(180deg); }
.qa__a { padding-top: 10px; }
@media (prefers-reduced-motion: reduce) {
  .qa__chev { transition: none; }
}

/* ============================================================
 * PRODUCT PAGES — QUESTIONS IN TWO COLUMNS  (10 Aug 2026)
 * Rebecca: "with the question on the product pages - can we split them into 2
 * columns". One has 8 questions, OnSite and Classroom have 4 — as one column
 * they ran a long way down a page that is otherwise dense.
 *
 * ⚠ SCOPED TO body.pp — the product pages. The three school-type pages load this
 * same stylesheet but their questions are <details> accordions, which are a
 * different reading pattern (scan the headings, open one) and are already short.
 * Two columns of accordions would also reflow the rest of the row every time one
 * opened, which is exactly the sort of jump the layout should not make.
 *
 * ⚠ THE SEPARATOR HAD TO CHANGE. The one-column list used `.qa__item + .qa__item
 * { border-top }` — "every item except the first". In a two-column grid that is
 * wrong: it puts a line above the second item, which is the top of column two and
 * has nothing above it. `:nth-child(n+3)` means "every item from the second ROW
 * down", which is the same intent expressed for a 2-wide grid.
 * ============================================================ */
@media (min-width: 860px) {
  body.pp .qa {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 4vw, 64px);
    row-gap: 0;
  }
  /* the adjacency rule no longer maps to visual rows — turn it off and re-express it */
  body.pp .qa .qa__item + .qa__item { margin-top: 0; padding-top: 0; border-top: 0; }
  body.pp .qa .qa__item:nth-child(n + 3) {
    margin-top: var(--sp-7, 28px);
    padding-top: var(--sp-7, 28px);
    border-top: 1px solid #E6ECF4;
  }
  /* the answer no longer has the full width to run into */
  body.pp .qa .qa__item p { max-width: 46ch; }
  body.pp .qa .qa__item h3 { max-width: 28ch; }
}