/* ---------------------------------------------------------------------------
   Accordion — collapsible {title, body} rows.

   Behaviour is main.js initAccordions(); this file only styles it. The open
   state is the panel's `hidden` attribute — no max-height transition, so
   nothing here can fight the handler. Panels render open; the first click
   collapses them (see the template part for why).
   --------------------------------------------------------------------------- */

.mp-accordion {
  padding-block: var(--mp-section-y);
  background: #fff;
  color: var(--mp-ink-heading);
}

.mp-accordion__title {
  margin: 0 0 var(--mp-gap-lg);
  font-size: var(--mp-fs-section);
  color: var(--mp-ink-heading);
}

.mp-acc { display: grid; gap: 12px; }

.mp-acc__item {
  border: 1px solid var(--mp-rule);
  border-radius: var(--mp-radius);
  background: #fff;
  overflow: hidden;
}

.mp-acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 22px;
  border: 0;
  background: none;
  font-family: var(--mp-font-ui);
  font-size: var(--mp-fs-body);
  font-weight: 600;
  line-height: 1.3;
  color: var(--mp-ink-heading);
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.mp-acc__head:hover,
.mp-acc__head:focus-visible { background: rgba(37, 52, 153, .06); }

/* + / − drawn in CSS so no icon font and no inline SVG is needed. */
.mp-acc__icon {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
.mp-acc__icon::before,
.mp-acc__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--mp-pink);
  transform: translate(-50%, -50%);
  transition: opacity .2s ease, transform .2s ease;
}
.mp-acc__icon::before { width: 18px; height: 2px; }
.mp-acc__icon::after  { width: 2px; height: 18px; }
.mp-acc__head[aria-expanded="true"] .mp-acc__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }

.mp-acc__panel { border-top: 1px solid var(--mp-rule); }
.mp-acc__panel[hidden] { display: none; }
.mp-acc__body {
  padding: 20px 22px 24px;
  font-size: 17px;
  line-height: var(--mp-lh-body);
  color: var(--mp-ink-body);
}
.mp-acc__body h2,
.mp-acc__body h3,
.mp-acc__body h4 { color: var(--mp-ink-heading); }
.mp-acc__body h3 { font-size: var(--mp-fs-h3); margin-top: 1.4em; }
.mp-acc__body > *:first-child { margin-top: 0; }
.mp-acc__body a { color: var(--mp-blue-ui); text-decoration: underline; text-underline-offset: 3px; }
.mp-acc__body ul, .mp-acc__body ol { padding-left: 1.3em; }
.mp-acc__body li + li { margin-top: .4em; }

@media (max-width: 767px) {
  .mp-acc__head { padding: 16px 18px; }
  .mp-acc__body { padding: 16px 18px 20px; font-size: 16px; }
}

/* ---------------------------------------------------------------------------
   Read More disclosure — live's nested-accordion with the site's .custm--readmore
   Additional CSS: a centred fit-content pill (#253499, 15px padding, 8px radius,
   white 16px/24px label, no icon) on its container's band, which the row carries
   inline (#0D1330 with 50px padding on the box pages; white on the sector hubs).
   Opening it shows the SEO copy full width under the pill.
   --------------------------------------------------------------------------- */
.mp-accordion--readmore { padding-block: 10px; background: transparent; color: inherit; }
.mp-accordion--readmore .mp-inner { max-width: none; padding-inline: 0; }
.mp-accordion--readmore .mp-acc { display: block; }
.mp-accordion--readmore .mp-acc__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.mp-accordion--readmore .mp-acc__head {
  width: fit-content;
  justify-content: center;
  padding: 15px;
  border-radius: 8px;
  background: var(--mp-acc-pill, #253499);
  color: #fff;
  font-family: var(--mp-font-kit);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
}
.mp-accordion--readmore .mp-acc__head:hover,
.mp-accordion--readmore .mp-acc__head:focus-visible { background: var(--mp-acc-pill, #253499); filter: brightness(1.15); }
.mp-accordion--readmore .mp-acc__icon { display: none; }
.mp-accordion--readmore .mp-acc__panel { align-self: stretch; border-top: 0; }