/* ── Accordion (Meet the Doctor) ─────────────────────────────────────
   Opt-in via the CSS class `eos-accordion` on the Divi Accordion module.

   Almost everything here is already in the builder and stays there — the
   1px medium-grey bottom border on each item, the 2rem/1.75rem row gap,
   item padding, open state, title/body colours, and "no background when
   closed". This file only carries what Divi cannot express:

     1. the toggle icon's geometry
     2. the room reserved for it beside the title

   Type lives in css/typography.css, where the accordion's title and content
   are extended onto .subheading-lg and .body-xl (Divi offers no CSS-class
   field on those elements). Animation timing is js/accordion.js. */


/* ── Icon ────────────────────────────────────────────────────────────
   The Figma draws a 29x29 plus from two 3px bars, and drops the vertical
   bar when the row is open, leaving a minus. Divi's icon is a font glyph
   (currently Font Awesome f067), whose bar weight is baked into the
   typeface — at the 2rem size set in the builder its strokes land far
   heavier than 3px, and no size value fixes the ratio. Same limitation as
   the carousel arrows.

   So the glyph is suppressed and the two bars are drawn here. Rounded off
   the raw Figma export on purpose: 29px -> 1.75rem, 3px -> 0.1875rem.

   NOTE: this supersedes the module's Icon colour and size settings in the
   builder — changing the icon now means editing this file. The colour below
   is the same --medium-grey (#949494) the Figma and the builder both use. */
.eos-accordion .et_pb_accordion_item.et_pb_toggle .et_pb_toggle_title {
  position      : relative;
  /* Room for the icon: 1.75rem of glyph plus the Figma's 1.75rem gap
     between the title text and it. Divi's own default reserves 50px. */
  padding-right : 3.5rem;
}

.eos-accordion .et_pb_accordion_item.et_pb_toggle .et_pb_toggle_title::before,
.eos-accordion .et_pb_accordion_item.et_pb_toggle .et_pb_toggle_title::after {
  /* Divi's native glyph off. !important is deliberate: Divi sets `content`
     on this same pseudo-element from its per-instance stylesheet, and when
     its rule outranked these selectors the glyph rendered *inside* the bar
     below — a 32px Font Awesome plus drawn through a 28x3 grey box, which
     read as a doubled icon. The selectors now outrank it on their own, so
     this is belt and braces against a future Divi rule that reaches higher.
     font-size:0 stops the glyph contributing any layout even if it returns. */
  content    : '' !important;
  font-size  : 0 !important;
  position   : absolute;
  right      : 0;
  top        : 50%;
  margin     : 0;             /* Divi centres its glyph with a margin */
  background : var(--medium-grey);
  transition : transform 0.3s ease;
}

/* horizontal bar — always present */
.eos-accordion .et_pb_accordion_item.et_pb_toggle .et_pb_toggle_title::before {
  width     : 1.75rem;
  height    : 0.1875rem;
  transform : translateY(-50%);
}

/* vertical bar — centred on the same 1.75rem box, so it rotates about the
   icon's centre rather than its own edge */
.eos-accordion .et_pb_accordion_item.et_pb_toggle .et_pb_toggle_title::after {
  width     : 0.1875rem;
  height    : 1.75rem;
  right     : calc((1.75rem - 0.1875rem) / 2);
  transform : translateY(-50%);
}

/* Open = minus. Rotating the vertical bar onto the horizontal one reads as
   a plus turning into a minus, which is a smoother cue than swapping two
   glyphs and costs no extra markup. */
.eos-accordion .et_pb_accordion_item.et_pb_toggle_open .et_pb_toggle_title::after {
  transform : translateY(-50%) rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .eos-accordion .et_pb_accordion_item.et_pb_toggle .et_pb_toggle_title::before,
  .eos-accordion .et_pb_accordion_item.et_pb_toggle .et_pb_toggle_title::after { transition: none; }
}