/* ==========================================================================
   THE ORANGE DESIGN BASE — global element rules, ported design pages only.
   ==========================================================================

   Shared by both Orange whitelabels, like `brand.css`. Separate from it for one
   reason: `brand.css` also loads on a CHECKOUT (it is what puts the brand's
   footer there), and these are `body` / `a` / `h1` rules — on a payment page
   they would restyle the form. Only `PartnerShell` loads this file, and only a
   ported design page goes through `PartnerShell`.

   Every declaration is the design export's own. The four exports (two partners
   x FAQ and landing) each carried its own copy of this block and they had
   already drifted: the two FAQ sheets said the page ground was #fff and orange's
   said links were #ff7900, while both landings said #f6f9fa and #212529. The
   landings are right — live's ground is the grey the transparent bar shows
   through — so those are the values kept, and orange's FAQ answer links now
   read as dark text with an orange hover, the same as every other link on the
   brand.

   Not here, because the foundation already owns them: `box-sizing` and the
   `img` reset (`foundation/reset.css`), and the @font-face declarations
   (`public/assets/css/fonts.css`, the one file that declares every face). The
   exports repeated all three. */

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: var(--brand-ground);
}

body {
  color: var(--brand-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brand-ink);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0.5rem 0;
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.2;
}

p {
  margin: 0 0 1rem 0;
}

/* The FAQ accordions. `summary` is styled rather than the design's per-element
   classes because both exports do exactly this and neither varies it.

   ONLY the declarations both exports share are here. Orange Holiday adds a `+`
   / `−` marker through `summary::after` and a list rule of its own; Zen draws
   its markers as two icons in the markup. Putting either partner's extra in
   this file would show it on the other, so they stay in that partner's own
   `pages.css`. */
summary {
  list-style: none;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

/* AN OPEN ITEM IS HIGHLIGHTED WHOLE — question AND answer.
   The exports put this shadow on the `summary`, so it stopped at the question
   and the answer hung outside the panel it belongs to. It is also scoped to
   `.faq-item` rather than any `details`: the header's language switcher is a
   `<details>` too, and unscoped it drew this grey glow around the open
   dropdown. `.faq-item` is the one class both partners' accordions carry. */
.faq-item[open] {
  box-shadow: inset 0 0 10px 2px rgb(240 240 240 / 100%);
}