/* =================================================================
   G Accordion  ·  “original look” refresh
   – white card with light-grey border & soft corners
   – roomy padding, arrow on the far right, rotates on open
================================================================= */

/* ────────────────────────────────────────────────────────────────
   1.  Wrapper  <details class="g-accordion">
   ───────────────────────────────────────────────────────────── */
details.g-accordion{
  border:1px solid #e2e2e2;      /* faint outline */
  border-radius:6px;             /* soft corner */
  background:#fafafa;            /* whisper-grey card */
  margin:1.5rem 0;               /* breathing room top/bottom */
  transition:border-color .2s ease-in-out;
}

details.g-accordion:hover{
  border-color:#d6d6d6;          /* subtle hover feedback */
}

/* ────────────────────────────────────────────────────────────────
   2.  Toggle row  <summary>
   ───────────────────────────────────────────────────────────── */
details.g-accordion > summary{
  position:relative;             /* anchor arrow */
  cursor:pointer;
  padding:1.25rem 3rem 1.25rem 1.5rem;
  margin:0;
  font-weight:600;
  font-size:1.125rem;            /* ~18 px (matches <h3> default) */
  line-height:1.4;
  list-style:none;               /* hide Firefox marker */
  display:flex;
  align-items:center;
  gap:.65rem;                    /* space between emoji & text */
  user-select:none;              /* prevent accidental text-drag */
}

/* 2.a  kill native markers in all browsers */
details.g-accordion > summary::-webkit-details-marker{ display:none; }
details.g-accordion > summary::marker{ display:none; }      /* FF/Safari */

/* 2.b  remove default margin on our injected <h3> */
details.g-accordion > summary h3{
  margin:0;
  font:inherit;                  /* inherit size/weight */
  flex:1;                        /* take remaining space; arrow stays right */
}

/* ────────────────────────────────────────────────────────────────
   3.  Custom arrow
   ───────────────────────────────────────────────────────────── */
details.g-accordion > summary::after{
  content:"";
  width:9px;
  height:9px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  position:absolute;
  right:1.25rem;
  top:50%;
  margin-top:-4.5px;             /* half of width/height to centre */
  transform:rotate(45deg);       /* ► closed */
  transition:transform .25s ease-in-out;
}

details.g-accordion[open] > summary::after{
  transform:rotate(225deg);      /* ▼ open */
}

/* ────────────────────────────────────────────────────────────────
   4.  Inner content (everything after <summary>)
   ───────────────────────────────────────────────────────────── */
details.g-accordion[open] > *:not(summary){
  padding:0 1.5rem 0 1.5rem; /* match left/right; add bottom */
  font-size:1rem;                  /* normal body text */
  line-height:1.55;
}

details.g-accordion[open] .article_references_subtitle{
  display:block;
  margin:.75rem 0 .25rem;
  font-weight:600;
}

/* Lists look nicer indented a bit */
details.g-accordion[open] ol,
details.g-accordion[open] ul{
  margin:0 0 1rem 1.25rem;
  padding:0;
}

/* Optional: tidy <li> spacing */
details.g-accordion[open] li + li{ margin-top:.5rem; }

/* ✱ Lists inside an open accordion
   -------------------------------------------------------------- */
details.g-accordion[open] ol,
details.g-accordion[open] ul{
  margin:0 0 1rem 1.25rem!important;       /* no extra left margin */
  padding-left:1.5rem;
  padding-right:1.5rem;      /* indent matches body text */
  list-style-position:outside; /* bullet hangs in the gutter */
}

/* optional: tighten li spacing */
details.g-accordion[open] li + li{
  margin-top:.4rem;
}